Chore: Resolved circular dependency warnings in grafana/ui (#74908)

* Resolved circual dependency warnings.

* Fixed circular dependencies only 21 more to go.

* Fixed the align issue.

* fix betterer merge error

* Update betterer results

* Fix failing test

* reverted changes for Table

* removed utils updates.

* fixed some more 'easy' circular dependencies issues.

* Fixed incorrect imports.

---------

Co-authored-by: Oscar Kilhed <oscar.kilhed@grafana.com>

packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx

@@ -4,9 +4,10 @@ import React, { ReactNode, useRef, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { Icon, Spinner } from '..';
 import { useStyles2 } from '../../themes';
 import { getFocusStyles } from '../../themes/mixins';
+import { Icon } from '../Icon/Icon';
+import { Spinner } from '../Spinner/Spinner';
 
 export interface Props {
   label: ReactNode;

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

@@ -4,10 +4,11 @@ import React, { useEffect, useRef, useState } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { HorizontalGroup, Input } from '..';
 import { useStyles2 } from '../../themes';
 import { IconName } from '../../types/icon';
 import { Button, ButtonVariant } from '../Button';
+import { Input } from '../Input/Input';
+import { HorizontalGroup } from '../Layout/Layout';
 import { Modal } from '../Modal/Modal';
 
 export interface ConfirmModalProps {

packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx

@@ -9,13 +9,12 @@ import { Editor } from 'slate-react';
 
 import { DataLinkBuiltInVars, GrafanaTheme2, VariableOrigin, VariableSuggestion } from '@grafana/data';
 
-import { makeValue } from '../../index';
 import { SlatePrism } from '../../slate-plugins';
 import { useStyles2 } from '../../themes';
-import { SCHEMA } from '../../utils/slate';
+import { SCHEMA, makeValue } from '../../utils/slate';
 import CustomScrollbar from '../CustomScrollbar/CustomScrollbar';
 import { getInputStyles } from '../Input/Input';
-import { Portal } from '../index';
+import { Portal } from '../Portal/Portal';
 
 import { DataLinkSuggestions } from './DataLinkSuggestions';
 import { SelectionReference } from './SelectionReference';

packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx

@@ -6,7 +6,7 @@ import useClickAway from 'react-use/lib/useClickAway';
 import { VariableSuggestion, GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2 } from '../../themes';
-import { List } from '../index';
+import { List } from '../List/List';
 
 interface DataLinkSuggestionsProps {
   activeRef?: React.RefObject<HTMLDivElement>;

packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { InlineField } from '../..';
+import { InlineField } from '../../components/Forms/InlineField';
 import { FormField } from '../FormField/FormField';
 import { SecretFormField } from '../SecretFormField/SecretFormField';
 

packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx

@@ -9,9 +9,14 @@ import { useMedia } from 'react-use';
 
 import { dateTimeFormat, DateTime, dateTime, GrafanaTheme2, isDateTime } from '@grafana/data';
 
-import { Button, HorizontalGroup, Icon, InlineField, Input, Portal } from '../..';
 import { useStyles2, useTheme2 } from '../../../themes';
+import { Button } from '../../Button/Button';
+import { InlineField } from '../../Forms/InlineField';
+import { Icon } from '../../Icon/Icon';
+import { Input } from '../../Input/Input';
+import { HorizontalGroup } from '../../Layout/Layout';
 import { getModalStyles } from '../../Modal/getModalStyles';
+import { Portal } from '../../Portal/Portal';
 import { TimeOfDayPicker, POPUP_CLASS_NAME } from '../TimeOfDayPicker';
 import { getBodyStyles } from '../TimeRangePicker/CalendarBody';
 import { isValid } from '../utils';

packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx

@@ -4,10 +4,11 @@ import React from 'react';
 
 import { dateTime, DateTime, dateTimeAsMoment, GrafanaTheme2, isDateTimeInput } from '@grafana/data';
 
-import { Icon, useStyles2 } from '../../index';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { getFocusStyles } from '../../themes/mixins';
 import { inputSizes } from '../Forms/commonStyles';
 import { FormInputSize } from '../Forms/types';
+import { Icon } from '../Icon/Icon';
 
 export interface Props {
   onChange: (value: DateTime) => void;

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx

@@ -4,11 +4,11 @@ import React, { memo, useMemo, useState } from 'react';
 import { GrafanaTheme2, isDateTime, rangeUtil, RawTimeRange, TimeOption, TimeRange, TimeZone } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { FilterInput } from '../..';
 import { stylesFactory, useTheme2 } from '../../../themes';
 import { getFocusStyles } from '../../../themes/mixins';
 import { t, Trans } from '../../../utils/i18n';
 import { CustomScrollbar } from '../../CustomScrollbar/CustomScrollbar';
+import { FilterInput } from '../../FilterInput/FilterInput';
 import { Icon } from '../../Icon/Icon';
 
 import { TimePickerFooter } from './TimePickerFooter';

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx

@@ -5,10 +5,12 @@ import React, { useCallback, useState } from 'react';
 import { getTimeZoneInfo, GrafanaTheme2, TimeZone } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { Field, RadioButtonGroup, Select } from '../..';
 import { stylesFactory, useTheme2 } from '../../../themes';
 import { t, Trans } from '../../../utils/i18n';
 import { Button } from '../../Button';
+import { Field } from '../../Forms/Field';
+import { RadioButtonGroup } from '../../Forms/RadioButtonGroup/RadioButtonGroup';
+import { Select } from '../../Select/Select';
 import { TimeZonePicker } from '../TimeZonePicker';
 import { TimeZoneDescription } from '../TimeZonePicker/TimeZoneDescription';
 import { TimeZoneOffset } from '../TimeZonePicker/TimeZoneOffset';

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx

@@ -14,12 +14,13 @@ import {
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { Icon, Tooltip } from '../..';
+import { useStyles2 } from '../../../themes/ThemeContext';
-import { useStyles2 } from '../../..';
 import { t, Trans } from '../../../utils/i18n';
 import { Button } from '../../Button';
 import { Field } from '../../Forms/Field';
+import { Icon } from '../../Icon/Icon';
 import { Input } from '../../Input/Input';
+import { Tooltip } from '../../Tooltip/Tooltip';
 import { isValid } from '../utils';
 
 import TimePickerCalendar from './TimePickerCalendar';

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

@@ -10,7 +10,7 @@ import { getFocusStyles } from '../../themes/mixins';
 import { ComponentSize } from '../../types/size';
 import { trimFileName } from '../../utils/file';
 import { getButtonStyles } from '../Button';
-import { Icon } from '../index';
+import { Icon } from '../Icon/Icon';
 
 export interface Props {
   /** Callback function to handle uploaded file  */

packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx

@@ -2,7 +2,7 @@ import { Placement } from '@popperjs/core';
 import { uniqueId } from 'lodash';
 import React, { PureComponent } from 'react';
 
-import { Icon } from '../../..';
+import { Icon } from '../../../Icon/Icon';
 import { Tooltip } from '../../../Tooltip/Tooltip';
 
 export interface Props {

packages/grafana-ui/src/components/Menu/MenuItem.tsx

@@ -5,7 +5,7 @@ import { GrafanaTheme2, LinkTarget } from '@grafana/data';
 
 import { useStyles2 } from '../../themes';
 import { getFocusStyles } from '../../themes/mixins';
-import { IconName } from '../../types';
+import { IconName } from '../../types/icon';
 import { Icon } from '../Icon/Icon';
 
 import { SubMenu } from './SubMenu';

packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
-import { ErrorWithStack, LoadingPlaceholder } from '..';
 import { useAsyncDependency } from '../../utils/useAsyncDependency';
+import { ErrorWithStack } from '../ErrorBoundary/ErrorWithStack';
+import { LoadingPlaceholder } from '../LoadingPlaceholder/LoadingPlaceholder';
 
 // we only use import type so it will not be included in the bundle
 import type { ReactMonacoEditorProps } from './types';

packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx

@@ -4,12 +4,13 @@ import React, { ReactNode } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { Link, ToolbarButtonRow } from '..';
 import { useStyles2 } from '../../themes/ThemeContext';
 import { getFocusStyles } from '../../themes/mixins';
 import { IconName } from '../../types';
 import { Icon } from '../Icon/Icon';
 import { IconButton } from '../IconButton/IconButton';
+import { Link } from '../Link/Link';
+import { ToolbarButtonRow } from '../ToolbarButton/ToolbarButtonRow';
 
 export interface Props {
   pageIcon?: IconName;

packages/grafana-ui/src/components/PanelChrome/PanelContext.ts

@@ -14,7 +14,7 @@ import {
 
 import { AdHocFilterItem } from '../Table/types';
 
-import { SeriesVisibilityChangeMode } from '.';
+import { SeriesVisibilityChangeMode } from './types';
 
 /** @alpha */
 export interface PanelContext {

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

@@ -9,15 +9,6 @@ import { Editor, EventHook, Plugin } from 'slate-react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import {
-  makeValue,
-  SCHEMA,
-  CompletionItemGroup,
-  TypeaheadOutput,
-  TypeaheadInput,
-  SuggestionsState,
-  Themeable2,
-} from '../..';
 import {
   ClearPlugin,
   NewlinePlugin,
@@ -29,6 +20,9 @@ import {
 } from '../../slate-plugins';
 import { withTheme2 } from '../../themes';
 import { getFocusStyles } from '../../themes/mixins';
+import { CompletionItemGroup, SuggestionsState, TypeaheadInput, TypeaheadOutput } from '../../types/completion';
+import { Themeable2 } from '../../types/theme';
+import { makeValue, SCHEMA } from '../../utils/slate';
 
 export interface QueryFieldProps extends Themeable2 {
   additionalPlugins?: Plugin[];

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

@@ -7,9 +7,10 @@ import { SelectableValue } from '@grafana/data';
 import { useStyles2 } from '../../themes';
 import { InlineLabel } from '../Forms/InlineLabel';
 
+import { SegmentSelect } from './SegmentSelect';
 import { getSegmentStyles } from './styles';
-
+import { SegmentProps } from './types';
-import { SegmentSelect, useExpandableLabel, SegmentProps } from './';
+import { useExpandableLabel } from './useExpandableLabel';
 
 export interface SegmentSyncProps<T> extends SegmentProps, Omit<HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {
   value?: T | SelectableValue<T>;

packages/grafana-ui/src/components/Segment/SegmentAsync.tsx

@@ -12,8 +12,8 @@ import { InlineLabel } from '../Forms/InlineLabel';
 
 import { SegmentSelect } from './SegmentSelect';
 import { getSegmentStyles } from './styles';
-
+import { SegmentProps } from './types';
-import { useExpandableLabel, SegmentProps } from '.';
+import { useExpandableLabel } from './useExpandableLabel';
 
 export interface SegmentAsyncProps<T> extends SegmentProps, Omit<HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {
   value?: T | SelectableValue<T>;

packages/grafana-ui/src/components/Segment/SegmentInput.tsx

@@ -7,8 +7,8 @@ import { measureText } from '../../utils/measureText';
 import { InlineLabel } from '../Forms/InlineLabel';
 
 import { getSegmentStyles } from './styles';
-
+import { SegmentProps } from './types';
-import { useExpandableLabel, SegmentProps } from '.';
+import { useExpandableLabel } from './useExpandableLabel';
 
 export interface SegmentInputProps
   extends Omit<SegmentProps, 'allowCustomValue' | 'allowEmptyValue'>,

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

@@ -3,8 +3,11 @@ import React, { useState } from 'react';
 
 import { SelectableValue, GrafanaTheme2 } from '@grafana/data';
 
-import { IconName, TabsBar, Tab, IconButton, CustomScrollbar, TabContent } from '../..';
+import { IconButton } from '../../components/IconButton/IconButton';
+import { TabsBar, Tab, TabContent } from '../../components/Tabs';
 import { stylesFactory, useTheme2 } from '../../themes';
+import { IconName } from '../../types/icon';
+import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
 
 export interface TabConfig {
   label: string;

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

@@ -0,0 +1,3 @@
+export { Tab } from './Tab';
+export { TabsBar } from './TabsBar';
+export { TabContent } from './TabContent';

packages/grafana-ui/src/components/VizLegend/utils.ts

@@ -1,4 +1,4 @@
-import { SeriesVisibilityChangeMode } from '..';
+import { SeriesVisibilityChangeMode } from '../PanelChrome/types';
 
 export function mapMouseEventToMode(event: React.MouseEvent): SeriesVisibilityChangeMode {
   if (event.ctrlKey || event.metaKey || event.shiftKey) {

packages/grafana-ui/src/options/builder/axis.tsx

@@ -9,7 +9,11 @@ import {
 } from '@grafana/data';
 import { AxisColorMode, AxisConfig, AxisPlacement, ScaleDistribution, ScaleDistributionConfig } from '@grafana/schema';
 
-import { graphFieldOptions, Select, RadioButtonGroup, Input, Field } from '../../index';
+import { Field } from '../../components/Forms/Field';
+import { RadioButtonGroup } from '../../components/Forms/RadioButtonGroup/RadioButtonGroup';
+import { Input } from '../../components/Input/Input';
+import { Select } from '../../components/Select/Select';
+import { graphFieldOptions } from '../../components/uPlot/config';
 
 /**
  * @alpha

packages/grafana-ui/src/options/builder/hideSeries.tsx

@@ -4,7 +4,8 @@ import React, { useCallback } from 'react';
 import { FieldConfigEditorBuilder, FieldConfigEditorProps } from '@grafana/data';
 import { HideableFieldConfig, HideSeriesConfig } from '@grafana/schema';
 
-import { FilterPill, HorizontalGroup } from '../../index';
+import { FilterPill } from '../../components/FilterPill/FilterPill';
+import { HorizontalGroup } from '../../components/Layout/Layout';
 
 const SeriesConfigEditor = ({ value, onChange }: FieldConfigEditorProps<HideSeriesConfig, {}>) => {
   const onChangeToggle = useCallback(

packages/grafana-ui/src/options/builder/stacking.tsx

@@ -6,9 +6,13 @@ import {
   FieldType,
   identityOverrideProcessor,
 } from '@grafana/data';
-import { StackingConfig, StackingMode } from '@grafana/schema';
+import { GraphFieldConfig, StackingConfig, StackingMode } from '@grafana/schema';
 
-import { GraphFieldConfig, graphFieldOptions, HorizontalGroup, IconButton, Input, RadioButtonGroup } from '../..';
+import { RadioButtonGroup } from '../../components/Forms/RadioButtonGroup/RadioButtonGroup';
+import { IconButton } from '../../components/IconButton/IconButton';
+import { Input } from '../../components/Input/Input';
+import { HorizontalGroup } from '../../components/Layout/Layout';
+import { graphFieldOptions } from '../../components/uPlot/config';
 
 export const StackingEditor = ({ value, context, onChange, item }: FieldOverrideEditorProps<StackingConfig, any>) => {
   return (

packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx

@@ -1,7 +1,7 @@
 import { Global } from '@emotion/react';
 import React from 'react';
 
-import { useTheme2 } from '..';
+import { useTheme2 } from '../ThemeContext';
 
 import { getAgularPanelStyles } from './angularPanelStyles';
 import { getCardStyles } from './card';