From e36a6ac4767b7d51df7b17823bca5167a166a4c9 Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Thu, 7 May 2020 10:53:58 -0700
Subject: [PATCH] TransformersUI: move transformer ui to grafana app (#24360)

---
 package.json                                  |  1 +
 .../grafana-data/src/transformations/index.ts | 12 ------
 .../transformers/calculateField.ts            |  8 ++--
 packages/grafana-ui/src/components/index.ts   |  1 +
 packages/grafana-ui/src/index.ts              |  2 -
 public/app/app.ts                             |  3 +-
 .../CalculateFieldTransformerEditor.tsx       | 37 ++++++-------------
 .../FilterByNameTransformerEditor.tsx         |  7 +---
 .../FilterByRefIdTransformerEditor.tsx        |  6 +--
 .../LabelsToFieldsTransformerEditor.tsx       | 10 ++---
 .../OrganizeFieldsTransformerEditor.tsx       |  9 ++---
 .../ReduceTransformerEditor.tsx               |  5 ++-
 .../SeriesToFieldsTransformerEditor.tsx       |  5 ++-
 .../app/core}/utils/standardTransformers.ts   |  0
 14 files changed, 38 insertions(+), 68 deletions(-)
 rename {packages/grafana-ui/src => public/app/core}/components/TransformersUI/CalculateFieldTransformerEditor.tsx (92%)
 rename {packages/grafana-ui/src => public/app/core}/components/TransformersUI/FilterByNameTransformerEditor.tsx (95%)
 rename {packages/grafana-ui/src => public/app/core}/components/TransformersUI/FilterByRefIdTransformerEditor.tsx (95%)
 rename {packages/grafana-ui/src => public/app/core}/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx (75%)
 rename {packages/grafana-ui/src => public/app/core}/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx (96%)
 rename {packages/grafana-ui/src => public/app/core}/components/TransformersUI/ReduceTransformerEditor.tsx (89%)
 rename {packages/grafana-ui/src => public/app/core}/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx (91%)
 rename {packages/grafana-ui/src => public/app/core}/utils/standardTransformers.ts (100%)

diff --git a/package.json b/package.json
index 7dc096dee1d..0138aa42df7 100644
--- a/package.json
+++ b/package.json
@@ -98,6 +98,7 @@
     "@types/prismjs": "1.16.0",
     "@types/puppeteer-core": "2.0.0",
     "@types/react": "16.8.16",
+    "@types/react-beautiful-dnd": "12.1.2",
     "@types/react-dom": "16.8.4",
     "@types/react-grid-layout": "0.16.7",
     "@types/react-redux": "7.1.7",
diff --git a/packages/grafana-data/src/transformations/index.ts b/packages/grafana-data/src/transformations/index.ts
index ebe98678d41..aad76b97463 100644
--- a/packages/grafana-data/src/transformations/index.ts
+++ b/packages/grafana-data/src/transformations/index.ts
@@ -3,18 +3,6 @@ export * from './transformers/ids';
 export * from './matchers';
 export { standardTransformers } from './transformers';
 export * from './fieldReducer';
-export { FilterFieldsByNameTransformerOptions } from './transformers/filterByName';
-export { FilterFramesByRefIdTransformerOptions } from './transformers/filterByRefId';
-export { SeriesToColumnsOptions } from './transformers/seriesToColumns';
-export { ReduceTransformerOptions } from './transformers/reduce';
-export { LabelsToFieldsOptions } from './transformers/labelsToFields';
-export {
-  CalculateFieldTransformerOptions,
-  CalculateFieldMode,
-  getResultFieldNameForCalculateFieldTransformerOptions,
-} from './transformers/calculateField';
-export { OrganizeFieldsTransformerOptions } from './transformers/organize';
-export { createOrderFieldsComparer } from './transformers/order';
 export { transformDataFrame } from './transformDataFrame';
 export {
   TransformerRegistyItem,
diff --git a/packages/grafana-data/src/transformations/transformers/calculateField.ts b/packages/grafana-data/src/transformations/transformers/calculateField.ts
index b3b299138ae..99daf725eaa 100644
--- a/packages/grafana-data/src/transformations/transformers/calculateField.ts
+++ b/packages/grafana-data/src/transformations/transformers/calculateField.ts
@@ -16,13 +16,13 @@ export enum CalculateFieldMode {
   BinaryOperation = 'binary',
 }
 
-interface ReduceOptions {
+export interface ReduceOptions {
   include?: string; // Assume all fields
   reducer: ReducerID;
   nullValueMode?: NullValueMode;
 }
 
-interface BinaryOptions {
+export interface BinaryOptions {
   left: string;
   operator: BinaryOperationID;
   right: string;
@@ -99,7 +99,7 @@ export const calculateFieldTransformer: DataTransformerInfo<CalculateFieldTransf
       }
 
       const field = {
-        name: getResultFieldNameForCalculateFieldTransformerOptions(options),
+        name: getNameFromOptions(options),
         type: FieldType.number,
         config: {},
         values,
@@ -229,7 +229,7 @@ function findConsistentTimeFieldName(data: DataFrame[]): string | undefined {
   return name;
 }
 
-export function getResultFieldNameForCalculateFieldTransformerOptions(options: CalculateFieldTransformerOptions) {
+export function getNameFromOptions(options: CalculateFieldTransformerOptions) {
   if (options.alias?.length) {
     return options.alias;
   }
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 79751c8c23a..5fd4b0ea292 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -29,6 +29,7 @@ export { TagsInput } from './TagsInput/TagsInput';
 export { Pagination } from './Pagination/Pagination';
 export { Tag } from './Tags/Tag';
 export { TagList } from './Tags/TagList';
+export { FilterPill } from './FilterPill/FilterPill';
 
 export { ConfirmModal } from './ConfirmModal/ConfirmModal';
 export { QueryField } from './QueryField/QueryField';
diff --git a/packages/grafana-ui/src/index.ts b/packages/grafana-ui/src/index.ts
index 7f401a7dab1..74eacaee202 100644
--- a/packages/grafana-ui/src/index.ts
+++ b/packages/grafana-ui/src/index.ts
@@ -11,5 +11,3 @@ export * from './slate-plugins';
 
 // Exposes standard editors for registries of optionsUi config and panel options UI
 export { getStandardFieldConfigs, getStandardOptionEditors } from './utils//standardEditors';
-// Exposes standard transformers for registry of Transformations
-export { getStandardTransformers } from './utils/standardTransformers';
diff --git a/public/app/app.ts b/public/app/app.ts
index 5f27a9699bb..ff90fde339b 100644
--- a/public/app/app.ts
+++ b/public/app/app.ts
@@ -47,9 +47,10 @@ import { reportPerformance } from './core/services/echo/EchoSrv';
 import { PerformanceBackend } from './core/services/echo/backends/PerformanceBackend';
 import 'app/routes/GrafanaCtrl';
 import 'app/features/all';
-import { getStandardFieldConfigs, getStandardOptionEditors, getStandardTransformers } from '@grafana/ui';
+import { getStandardFieldConfigs, getStandardOptionEditors } from '@grafana/ui';
 import { getDefaultVariableAdapters, variableAdapters } from './features/variables/adapters';
 import { initDevFeatures } from './dev';
+import { getStandardTransformers } from 'app/core/utils/standardTransformers';
 
 // add move to lodash for backward compatabiltiy
 // @ts-ignore
diff --git a/packages/grafana-ui/src/components/TransformersUI/CalculateFieldTransformerEditor.tsx b/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx
similarity index 92%
rename from packages/grafana-ui/src/components/TransformersUI/CalculateFieldTransformerEditor.tsx
rename to public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx
index ca22cbda378..4b548ca907c 100644
--- a/packages/grafana-ui/src/components/TransformersUI/CalculateFieldTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/CalculateFieldTransformerEditor.tsx
@@ -1,6 +1,6 @@
 import React, { ChangeEvent } from 'react';
+
 import {
-  CalculateFieldTransformerOptions,
   DataTransformerID,
   FieldType,
   KeyValue,
@@ -8,35 +8,22 @@ import {
   standardTransformers,
   TransformerRegistyItem,
   TransformerUIProps,
-  NullValueMode,
   BinaryOperationID,
   SelectableValue,
   binaryOperators,
-  CalculateFieldMode,
-  getResultFieldNameForCalculateFieldTransformerOptions,
   getFieldTitle,
 } from '@grafana/data';
-import { StatsPicker } from '../StatsPicker/StatsPicker';
-import { Switch } from '../Forms/Legacy/Switch/Switch';
-import { Input } from '../Input/Input';
-import { FilterPill } from '../FilterPill/FilterPill';
-import { HorizontalGroup } from '../Layout/Layout';
-import { Select } from '../Select/Select';
+import { Select, StatsPicker, LegacyForms, Input, FilterPill, HorizontalGroup } from '@grafana/ui';
+import {
+  CalculateFieldTransformerOptions,
+  CalculateFieldMode,
+  getNameFromOptions,
+  ReduceOptions,
+  BinaryOptions,
+} from '@grafana/data/src/transformations/transformers/calculateField';
+
 import defaults from 'lodash/defaults';
 
-// Copied from @grafana/data ;(  not sure how to best support his
-interface ReduceOptions {
-  include?: string; // Assume all fields
-  reducer: ReducerID;
-  nullValueMode?: NullValueMode;
-}
-
-interface BinaryOptions {
-  left: string;
-  operator: BinaryOperationID;
-  right: string;
-}
-
 interface CalculateFieldTransformerEditorProps extends TransformerUIProps<CalculateFieldTransformerOptions> {}
 
 interface CalculateFieldTransformerEditorState {
@@ -342,14 +329,14 @@ export class CalculateFieldTransformerEditor extends React.PureComponent<
             <Input
               className="width-18"
               value={options.alias ?? ''}
-              placeholder={getResultFieldNameForCalculateFieldTransformerOptions(options)}
+              placeholder={getNameFromOptions(options)}
               onChange={this.onAliasChanged}
             />
           </div>
         </div>
         <div className="gf-form-inline">
           <div className="gf-form">
-            <Switch
+            <LegacyForms.Switch
               label="Replace all fields"
               labelClass="width-8"
               checked={!!options.replaceFields}
diff --git a/packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx b/public/app/core/components/TransformersUI/FilterByNameTransformerEditor.tsx
similarity index 95%
rename from packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx
rename to public/app/core/components/TransformersUI/FilterByNameTransformerEditor.tsx
index cf7d2c51cb1..0af33e4c6b3 100644
--- a/packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/FilterByNameTransformerEditor.tsx
@@ -1,18 +1,15 @@
 import React from 'react';
 import {
   DataTransformerID,
-  FilterFieldsByNameTransformerOptions,
   KeyValue,
   standardTransformers,
   TransformerRegistyItem,
   TransformerUIProps,
   getFieldTitle,
 } from '@grafana/data';
-import { HorizontalGroup } from '../Layout/Layout';
-import { Input } from '../Input/Input';
-import { FilterPill } from '../FilterPill/FilterPill';
-import { Field } from '../Forms/Field';
+import { Field, Input, FilterPill, HorizontalGroup } from '@grafana/ui';
 import { css } from 'emotion';
+import { FilterFieldsByNameTransformerOptions } from '@grafana/data/src/transformations/transformers/filterByName';
 
 interface FilterByNameTransformerEditorProps extends TransformerUIProps<FilterFieldsByNameTransformerOptions> {}
 
diff --git a/packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx b/public/app/core/components/TransformersUI/FilterByRefIdTransformerEditor.tsx
similarity index 95%
rename from packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx
rename to public/app/core/components/TransformersUI/FilterByRefIdTransformerEditor.tsx
index cb74b7ef081..2e148bca496 100644
--- a/packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/FilterByRefIdTransformerEditor.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import {
   DataTransformerID,
-  FilterFramesByRefIdTransformerOptions,
   KeyValue,
   standardTransformers,
   TransformerRegistyItem,
   TransformerUIProps,
 } from '@grafana/data';
-import { HorizontalGroup } from '../Layout/Layout';
-import { FilterPill } from '../FilterPill/FilterPill';
+import { HorizontalGroup, FilterPill } from '@grafana/ui';
+
+import { FilterFramesByRefIdTransformerOptions } from '@grafana/data/src/transformations/transformers/filterByRefId';
 
 interface FilterByRefIdTransformerEditorProps extends TransformerUIProps<FilterFramesByRefIdTransformerOptions> {}
 
diff --git a/packages/grafana-ui/src/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx b/public/app/core/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx
similarity index 75%
rename from packages/grafana-ui/src/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx
rename to public/app/core/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx
index 1f18f7e3628..b8fae7ca852 100644
--- a/packages/grafana-ui/src/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/LabelsToFieldsTransformerEditor.tsx
@@ -1,11 +1,7 @@
 import React from 'react';
-import {
-  DataTransformerID,
-  standardTransformers,
-  TransformerRegistyItem,
-  TransformerUIProps,
-  LabelsToFieldsOptions,
-} from '@grafana/data';
+import { DataTransformerID, standardTransformers, TransformerRegistyItem, TransformerUIProps } from '@grafana/data';
+
+import { LabelsToFieldsOptions } from '@grafana/data/src/transformations/transformers/labelsToFields';
 
 export const LabelsAsFieldsTransformerEditor: React.FC<TransformerUIProps<LabelsToFieldsOptions>> = ({
   input,
diff --git a/packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx b/public/app/core/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx
similarity index 96%
rename from packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx
rename to public/app/core/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx
index 531f694b990..f42ca2132fd 100644
--- a/packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx
@@ -2,19 +2,18 @@ import React, { useCallback, useMemo } from 'react';
 import { css, cx } from 'emotion';
 import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
 import {
-  createOrderFieldsComparer,
   DataFrame,
   DataTransformerID,
   GrafanaTheme,
-  OrganizeFieldsTransformerOptions,
   standardTransformers,
   TransformerRegistyItem,
   TransformerUIProps,
   getFieldTitle,
 } from '@grafana/data';
-import { stylesFactory, useTheme } from '../../themes';
-import { Input } from '../Input/Input';
-import { IconButton } from '../IconButton/IconButton';
+import { stylesFactory, useTheme, Input, IconButton } from '@grafana/ui';
+
+import { OrganizeFieldsTransformerOptions } from '@grafana/data/src/transformations/transformers/organize';
+import { createOrderFieldsComparer } from '@grafana/data/src/transformations/transformers/order';
 
 interface OrganizeFieldsTransformerEditorProps extends TransformerUIProps<OrganizeFieldsTransformerOptions> {}
 
diff --git a/packages/grafana-ui/src/components/TransformersUI/ReduceTransformerEditor.tsx b/public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx
similarity index 89%
rename from packages/grafana-ui/src/components/TransformersUI/ReduceTransformerEditor.tsx
rename to public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx
index 8a63f74e46c..86110b1e9bf 100644
--- a/packages/grafana-ui/src/components/TransformersUI/ReduceTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/ReduceTransformerEditor.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { StatsPicker } from '../StatsPicker/StatsPicker';
+import { StatsPicker } from '@grafana/ui';
 import {
-  ReduceTransformerOptions,
   DataTransformerID,
   ReducerID,
   standardTransformers,
@@ -9,6 +8,8 @@ import {
   TransformerUIProps,
 } from '@grafana/data';
 
+import { ReduceTransformerOptions } from '@grafana/data/src/transformations/transformers/reduce';
+
 // TODO:  Minimal implementation, needs some <3
 export const ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransformerOptions>> = ({
   options,
diff --git a/packages/grafana-ui/src/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx b/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx
similarity index 91%
rename from packages/grafana-ui/src/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx
rename to public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx
index d0926953ff9..bf07c3ebeb2 100644
--- a/packages/grafana-ui/src/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx
+++ b/public/app/core/components/TransformersUI/SeriesToFieldsTransformerEditor.tsx
@@ -2,13 +2,14 @@ import React, { useCallback, useMemo } from 'react';
 import {
   DataTransformerID,
   SelectableValue,
-  SeriesToColumnsOptions,
   standardTransformers,
   TransformerRegistyItem,
   TransformerUIProps,
 } from '@grafana/data';
 import { getAllFieldNamesFromDataFrames } from './OrganizeFieldsTransformerEditor';
-import { Select } from '../Select/Select';
+import { Select } from '@grafana/ui';
+
+import { SeriesToColumnsOptions } from '@grafana/data/src/transformations/transformers/seriesToColumns';
 
 export const SeriesToFieldsTransformerEditor: React.FC<TransformerUIProps<SeriesToColumnsOptions>> = ({
   input,
diff --git a/packages/grafana-ui/src/utils/standardTransformers.ts b/public/app/core/utils/standardTransformers.ts
similarity index 100%
rename from packages/grafana-ui/src/utils/standardTransformers.ts
rename to public/app/core/utils/standardTransformers.ts