Build: removed circular dependencies to make grafana/ui build again (#23468)

* fixed dependecy issues.

* Fixed so we don't have any circular dependencies.

* added missing type.

* fixed formatting issue of config.

* skipping sourcemap again.

packages/grafana-data/src/transformations/index.ts

@@ -6,3 +6,5 @@ export * from './fieldReducer';
 export { FilterFieldsByNameTransformerOptions } from './transformers/filterByName';
 export { FilterFieldsByNameTransformerOptions } from './transformers/filterByName';
 export { FilterFramesByRefIdTransformerOptions } from './transformers/filterByRefId';
 export { FilterFramesByRefIdTransformerOptions } from './transformers/filterByRefId';
 export { ReduceTransformerOptions } from './transformers/reduce';
 export { ReduceTransformerOptions } from './transformers/reduce';
+export { OrganizeFieldsTransformerOptions } from './transformers/organize';
+export { createOrderFieldsComparer } from './transformers/order';

packages/grafana-data/src/transformations/transformers/order.ts

@@ -35,7 +35,7 @@ export const orderFieldsTransformer: DataTransformerInfo<OrderFieldsTransformerO
   },
   },
 };
 };
 
 
-export const createFieldsComparer = (indexByName: Record<string, number>) => (a: string, b: string) => {
+export const createOrderFieldsComparer = (indexByName: Record<string, number>) => (a: string, b: string) => {
   return indexOfField(a, indexByName) - indexOfField(b, indexByName);
   return indexOfField(a, indexByName) - indexOfField(b, indexByName);
 };
 };
 
 
@@ -46,7 +46,7 @@ const createFieldsOrderer = (indexByName: Record<string, number>) => (fields: Fi
   if (!indexByName || Object.keys(indexByName).length === 0) {
   if (!indexByName || Object.keys(indexByName).length === 0) {
     return fields;
     return fields;
   }
   }
-  const comparer = createFieldsComparer(indexByName);
+  const comparer = createOrderFieldsComparer(indexByName);
   return fields.sort((a, b) => comparer(a.name, b.name));
   return fields.sort((a, b) => comparer(a.name, b.name));
 };
 };
 
 

packages/grafana-ui/.storybook/webpack.config.js

@@ -38,7 +38,7 @@ module.exports = ({ config, mode }) => {
     use: [
     use: [
       {
       {
         loader: 'style-loader',
         loader: 'style-loader',
-        options: { injectType: 'lazyStyleTag' }
+        options: { injectType: 'lazyStyleTag' },
       },
       },
       {
       {
         loader: 'css-loader',
         loader: 'css-loader',
@@ -86,9 +86,10 @@ module.exports = ({ config, mode }) => {
       }),
       }),
       new OptimizeCSSAssetsPlugin({}),
       new OptimizeCSSAssetsPlugin({}),
     ],
     ],
-  },
+  };
 
 
   config.resolve.extensions.push('.ts', '.tsx', '.mdx');
   config.resolve.extensions.push('.ts', '.tsx', '.mdx');
+
   config.stats = {
   config.stats = {
     warningsFilter: /export .* was not found in/,
     warningsFilter: /export .* was not found in/,
   };
   };

packages/grafana-ui/src/components/Alert/Alert.tsx

 import React, { FC, ReactNode } from 'react';
 import React, { FC, ReactNode } from 'react';
-import { Icon, IconName } from '@grafana/ui';
 import classNames from 'classnames';
 import classNames from 'classnames';
+import { Icon } from '../Icon/Icon';
+import { IconName } from '../../types/icon';
 
 
 export type AlertVariant = 'success' | 'warning' | 'error' | 'info';
 export type AlertVariant = 'success' | 'warning' | 'error' | 'info';
 
 

packages/grafana-ui/src/components/Button/Button.tsx

@@ -2,7 +2,7 @@ import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, useContext } from 'r
 import { css, cx } from 'emotion';
 import { css, cx } from 'emotion';
 import tinycolor from 'tinycolor2';
 import tinycolor from 'tinycolor2';
 import { selectThemeVariant, stylesFactory, ThemeContext } from '../../themes';
 import { selectThemeVariant, stylesFactory, ThemeContext } from '../../themes';
-import { IconName } from '../../types';
+import { IconName } from '../../types/icon';
 import { getFocusStyle, getPropertiesForButtonSize } from '../Forms/commonStyles';
 import { getFocusStyle, getPropertiesForButtonSize } from '../Forms/commonStyles';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
 import { ButtonContent } from './ButtonContent';
 import { ButtonContent } from './ButtonContent';

packages/grafana-ui/src/components/Button/ButtonContent.tsx

 import React from 'react';
 import React from 'react';
 import { css } from 'emotion';
 import { css } from 'emotion';
 import { stylesFactory, useTheme } from '../../themes';
 import { stylesFactory, useTheme } from '../../themes';
-import { IconName } from '../../types';
+import { IconName } from '../../types/icon';
 import { Icon } from '../Icon/Icon';
 import { Icon } from '../Icon/Icon';
 import { ComponentSize } from '../../types/size';
 import { ComponentSize } from '../../types/size';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';

packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx

 import React, { FC, useContext } from 'react';
 import React, { FC, useContext } from 'react';
 import { css } from 'emotion';
 import { css } from 'emotion';
 import { Modal } from '../Modal/Modal';
 import { Modal } from '../Modal/Modal';
-import { IconName } from '../../types';
+import { IconName } from '../../types/icon';
 import { Button } from '../Button';
 import { Button } from '../Button';
 import { stylesFactory, ThemeContext } from '../../themes';
 import { stylesFactory, ThemeContext } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';

packages/grafana-ui/src/components/Icon/Icon.tsx

 import React from 'react';
 import React from 'react';
 import { css, cx } from 'emotion';
 import { css, cx } from 'emotion';
 import { GrafanaTheme, toPascalCase } from '@grafana/data';
 import { GrafanaTheme, toPascalCase } from '@grafana/data';
-import { stylesFactory } from '../../themes';
+import { stylesFactory } from '../../themes/stylesFactory';
 import { useTheme } from '../../themes/ThemeContext';
 import { useTheme } from '../../themes/ThemeContext';
-import { IconName, IconType, IconSize } from '../../types';
+import { IconName, IconType, IconSize } from '../../types/icon';
 import { ComponentSize } from '../../types/size';
 import { ComponentSize } from '../../types/size';
 //@ts-ignore
 //@ts-ignore
 import * as DefaultIcon from '@iconscout/react-unicons';
 import * as DefaultIcon from '@iconscout/react-unicons';
@@ -14,11 +14,6 @@ interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: IconSize;
   size?: IconSize;
   type?: IconType;
   type?: IconType;
 }
 }
-export interface SvgProps extends React.HTMLAttributes<SVGElement> {
-  size: number;
-  secondaryColor?: string;
-  className?: string;
-}
 
 
 const getIconStyles = stylesFactory((theme: GrafanaTheme) => {
 const getIconStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
   return {

packages/grafana-ui/src/components/Icon/assets/Apps.tsx

 import React, { FunctionComponent } from 'react';
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 
 export const Apps: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
 export const Apps: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
   return (

packages/grafana-ui/src/components/Icon/assets/Bell.tsx

 import React, { FunctionComponent } from 'react';
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 
 export const Bell: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
 export const Bell: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
   return (

packages/grafana-ui/src/components/Icon/assets/Cog.tsx

 import React, { FunctionComponent } from 'react';
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 
 export const Cog: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
 export const Cog: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
   return (

packages/grafana-ui/src/components/Icon/assets/Favorite.tsx

 import React, { FunctionComponent } from 'react';
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 
 export const Favorite: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
 export const Favorite: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
   return (

packages/grafana-ui/src/components/Icon/assets/Folder.tsx

 import React, { FunctionComponent } from 'react';
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 
 export const Folder: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
 export const Folder: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
   return (

packages/grafana-ui/src/components/Icon/assets/FolderPlus.tsx

 import React, { FunctionComponent } from 'react';
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 
 export const FolderPlus: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
 export const FolderPlus: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
   return (

packages/grafana-ui/src/components/Icon/assets/Grafana.tsx

 import React, { FunctionComponent } from 'react';
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 
 export const Grafana: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
 export const Grafana: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
   return (

packages/grafana-ui/src/components/Icon/assets/Import.tsx

 import React, { FunctionComponent } from 'react';
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 
 export const Import: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
 export const Import: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
   return (

packages/grafana-ui/src/components/Icon/assets/PanelAdd.tsx

 import React, { FunctionComponent } from 'react';
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 
 export const PanelAdd: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
 export const PanelAdd: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
   return (

packages/grafana-ui/src/components/Icon/assets/PlusSquare.tsx

 import React, { FunctionComponent } from 'react';
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 
 export const PlusSquare: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
 export const PlusSquare: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
   return (

packages/grafana-ui/src/components/Icon/assets/Shield.tsx

 import React, { FunctionComponent } from 'react';
 import React, { FunctionComponent } from 'react';
-import { SvgProps } from '../Icon';
+import { SvgProps } from './types';
 
 
 export const Shield: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
 export const Shield: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
   return (
   return (

packages/grafana-ui/src/components/Icon/assets/types.ts

+import React from 'react';
+
+export interface SvgProps extends React.HTMLAttributes<SVGElement> {
+  size: number;
+  secondaryColor?: string;
+  className?: string;
+}

packages/grafana-ui/src/components/Logs/LogRow.tsx

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
 import { Field, LinkModel, LogRowModel, TimeZone, DataQueryResponse, GrafanaTheme } from '@grafana/data';
 import { Field, LinkModel, LogRowModel, TimeZone, DataQueryResponse, GrafanaTheme } from '@grafana/data';
-import { Icon } from '@grafana/ui';
+import { Icon } from '../Icon/Icon';
 import { cx, css } from 'emotion';
 import { cx, css } from 'emotion';
 
 
 import {
 import {

packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx

 // Libraries
 // Libraries
 import React, { FunctionComponent } from 'react';
 import React, { FunctionComponent } from 'react';
-import { Icon } from '@grafana/ui';
+import { Icon } from '../Icon/Icon';
 
 
 interface Props {
 interface Props {
   title?: string | JSX.Element;
   title?: string | JSX.Element;

packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx

 import React, { useMemo, useCallback } from 'react';
 import React, { useMemo, useCallback } from 'react';
 import { css, cx } from 'emotion';
 import { css, cx } from 'emotion';
-import { OrganizeFieldsTransformerOptions } from '@grafana/data/src/transformations/transformers/organize';
 import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
 import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
+import {
+  DataTransformerID,
+  transformersRegistry,
+  DataFrame,
+  GrafanaTheme,
+  createOrderFieldsComparer,
+  OrganizeFieldsTransformerOptions,
+} from '@grafana/data';
 import { TransformerUIRegistyItem, TransformerUIProps } from './types';
 import { TransformerUIRegistyItem, TransformerUIProps } from './types';
-import { DataTransformerID, transformersRegistry, DataFrame, GrafanaTheme } from '@grafana/data';
 import { stylesFactory, useTheme } from '../../themes';
 import { stylesFactory, useTheme } from '../../themes';
-import { Button } from '../Button';
-import { createFieldsComparer } from '@grafana/data/src/transformations/transformers/order';
+import { Button } from '../Button/Button';
 import { VerticalGroup } from '../Layout/Layout';
 import { VerticalGroup } from '../Layout/Layout';
 import { Input } from '../Input/Input';
 import { Input } from '../Input/Input';
 
 
@@ -189,7 +194,7 @@ const orderFieldNamesByIndex = (fieldNames: string[], indexByName: Record<string
   if (!indexByName || Object.keys(indexByName).length === 0) {
   if (!indexByName || Object.keys(indexByName).length === 0) {
     return fieldNames;
     return fieldNames;
   }
   }
-  const comparer = createFieldsComparer(indexByName);
+  const comparer = createOrderFieldsComparer(indexByName);
   return fieldNames.sort(comparer);
   return fieldNames.sort(comparer);
 };
 };
 
 

packages/grafana-ui/src/components/index.ts

+export { Icon } from './Icon/Icon';
 export { ConfirmButton } from './ConfirmButton/ConfirmButton';
 export { ConfirmButton } from './ConfirmButton/ConfirmButton';
 export { DeleteButton } from './ConfirmButton/DeleteButton';
 export { DeleteButton } from './ConfirmButton/DeleteButton';
 export { Tooltip, PopoverContent } from './Tooltip/Tooltip';
 export { Tooltip, PopoverContent } from './Tooltip/Tooltip';
@@ -113,7 +114,6 @@ export { FadeTransition } from './transitions/FadeTransition';
 export { SlideOutTransition } from './transitions/SlideOutTransition';
 export { SlideOutTransition } from './transitions/SlideOutTransition';
 export { Segment, SegmentAsync, SegmentInput, SegmentSelect } from './Segment/';
 export { Segment, SegmentAsync, SegmentInput, SegmentSelect } from './Segment/';
 export { default as Chart } from './Chart';
 export { default as Chart } from './Chart';
-export { Icon } from './Icon/Icon';
 export { Drawer } from './Drawer/Drawer';
 export { Drawer } from './Drawer/Drawer';
 export { Slider } from './Slider/Slider';
 export { Slider } from './Slider/Slider';