From c0b778134efaa32b1d17fb37fe212029a70ccbe1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zolt=C3=A1n=20Bedi?= <zoltan.bedi@gmail.com>
Date: Mon, 24 Oct 2022 17:12:36 +0200
Subject: [PATCH] Revert: Query editor components from grafana-ui (#57436)

* Revert: QueryEditor components from grafana-ui

* Use local version of experimental

* Use experimental for query editor components

* Fix type issues in MSSQL

* point to actual version of experimental package

* point to latest version of experimental

Co-authored-by: Erik Sundell <erik.sundell87@gmail.com>
---
 package.json                                  |  2 +-
 .../QueryEditor/AccessoryButton.tsx           | 23 -----
 .../components/QueryEditor/EditorField.tsx    | 80 -----------------
 .../QueryEditor/EditorFieldGroup.tsx          |  9 --
 .../components/QueryEditor/EditorHeader.tsx   | 25 ------
 .../src/components/QueryEditor/EditorList.tsx | 49 ----------
 .../src/components/QueryEditor/EditorRow.tsx  | 30 -------
 .../src/components/QueryEditor/EditorRows.tsx | 13 ---
 .../components/QueryEditor/EditorSwitch.tsx   | 25 ------
 .../src/components/QueryEditor/FlexItem.tsx   | 10 ---
 .../components/QueryEditor/InlineSelect.tsx   | 89 -------------------
 .../QueryEditor/InputGroup.story.internal.tsx | 65 --------------
 .../src/components/QueryEditor/InputGroup.tsx | 80 -----------------
 .../src/components/QueryEditor/Space.tsx      | 40 ---------
 .../src/components/QueryEditor/Stack.tsx      | 31 -------
 .../src/components/QueryEditor/index.ts       | 13 ---
 packages/grafana-ui/src/components/index.ts   |  1 -
 .../alerting/unified/AlertsFolderView.tsx     |  3 +-
 .../features/alerting/unified/Receivers.tsx   |  3 +-
 .../components/alert-groups/MatcherFilter.tsx |  3 +-
 .../components/expressions/Expression.tsx     |  3 +-
 .../components/receivers/ReceiversTable.tsx   |  3 +-
 .../components/receivers/TemplateDataDocs.tsx |  3 +-
 .../components/receivers/TemplateForm.tsx     |  3 +-
 .../components/rule-editor/DetailsStep.tsx    |  3 +-
 .../rule-editor/ExpressionsEditor.tsx         |  2 +-
 .../components/rule-editor/QueryWrapper.tsx   |  3 +-
 .../rule-editor/RuleFolderPicker.tsx          |  3 +-
 .../QueryAndExpressionsStep.tsx               |  3 +-
 .../rule-editor/rule-types/RuleTypePicker.tsx |  3 +-
 .../unified/components/rules/RulesFilter.tsx  |  3 +-
 .../unified/components/rules/StateHistory.tsx |  3 +-
 .../components/silences/SilencesFilter.tsx    |  3 +-
 .../components/silences/SilencesTable.tsx     |  3 +-
 .../AnnotationSettingsEdit.tsx                |  3 +-
 .../components/HelpWizard/HelpWizard.tsx      |  2 +-
 .../components/PanelEditor/PanelEditor.tsx    |  2 +-
 .../SaveDashboard/forms/SaveDashboardForm.tsx |  3 +-
 .../forms/SaveProvisionedDashboardForm.tsx    |  3 +-
 .../SaveDashboard/forms/SaveToStorageForm.tsx |  2 +-
 .../VersionHistory/VersionHistoryButtons.tsx  |  3 +-
 .../expressions/components/Condition.tsx      |  3 +-
 .../features/expressions/components/Math.tsx  |  3 +-
 .../app/features/inspector/QueryInspector.tsx |  3 +-
 public/app/features/org/UserInviteForm.tsx    | 14 +--
 .../PluginDetailsHeaderDependencies.tsx       |  3 +-
 .../plugins/sql/components/QueryEditor.tsx    |  2 +-
 .../plugins/sql/components/QueryHeader.tsx    | 16 +---
 .../visual-query-builder/GroupByRow.tsx       |  3 +-
 .../visual-query-builder/OrderByRow.tsx       |  3 +-
 .../visual-query-builder/SelectRow.tsx        |  3 +-
 .../visual-query-builder/VisualEditor.tsx     |  2 +-
 public/app/features/scenes/SceneListPage.tsx  |  3 +-
 .../scenes/components/NestedScene.tsx         |  3 +-
 .../LabelsToFieldsTransformerEditor.tsx       |  3 +-
 .../variables/editor/VariableEditorList.tsx   |  3 +-
 .../components/Aggregation.tsx                |  3 +-
 .../cloud-monitoring/components/AliasBy.tsx   |  3 +-
 .../cloud-monitoring/components/Alignment.tsx |  2 +-
 .../components/AnnotationQueryEditor.tsx      |  3 +-
 .../components/GraphPeriod.tsx                |  3 +-
 .../cloud-monitoring/components/GroupBy.tsx   |  3 +-
 .../components/LabelFilter.tsx                |  3 +-
 .../components/LookbackPeriodSelect.tsx       |  3 +-
 .../components/MetricQueryEditor.tsx          |  2 +-
 .../cloud-monitoring/components/Metrics.tsx   |  3 +-
 .../components/Preprocessor.tsx               |  3 +-
 .../cloud-monitoring/components/Project.tsx   |  3 +-
 .../components/QueryEditor.tsx                |  2 +-
 .../components/QueryHeader.tsx                |  3 +-
 .../cloud-monitoring/components/SLO.tsx       |  3 +-
 .../components/SLOQueryEditor.tsx             |  2 +-
 .../cloud-monitoring/components/Selector.tsx  |  3 +-
 .../cloud-monitoring/components/Service.tsx   |  3 +-
 .../components/VisualMetricQueryEditor.tsx    |  2 +-
 .../components/AnnotationQueryEditor.tsx      |  3 +-
 .../components/Dimensions/Dimensions.tsx      |  2 +-
 .../components/Dimensions/FilterItem.tsx      |  3 +-
 .../MetricStatEditor/MetricStatEditor.tsx     |  3 +-
 .../MetricsQueryEditor/MetricsQueryEditor.tsx |  3 +-
 .../MetricsQueryEditor/MetricsQueryHeader.tsx |  3 +-
 .../cloudwatch/components/QueryHeader.tsx     |  2 +-
 .../SQLBuilderEditor/SQLBuilderEditor.tsx     |  3 +-
 .../SQLBuilderEditor/SQLBuilderSelectRow.tsx  |  3 +-
 .../components/SQLBuilderEditor/SQLFilter.tsx |  3 +-
 .../SQLBuilderEditor/SQLGroupBy.tsx           |  3 +-
 .../SQLBuilderEditor/SQLOrderByGroup.tsx      |  3 +-
 .../VariableQueryEditor/MultiFilter.tsx       |  2 +-
 .../VariableQueryEditor/MultiFilterItem.tsx   |  3 +-
 .../QueryEditor/AnnotationQueryEditor.tsx     |  3 +-
 .../ArgQueryEditor/ArgQueryEditor.tsx         |  2 +-
 .../components/Field.tsx                      |  3 +-
 .../LogsQueryEditor/LogsQueryEditor.tsx       |  3 +-
 .../MetricsQueryEditor/DimensionFields.tsx    |  3 +-
 .../MetricsQueryEditor/MetricsQueryEditor.tsx |  2 +-
 .../components/QueryHeader.tsx                |  2 +-
 .../components/AnnotationsQueryEditor.tsx     |  3 +-
 .../loki/components/LokiQueryEditor.tsx       |  3 +-
 .../components/LokiQueryBuilder.tsx           |  2 +-
 .../components/LokiQueryBuilderExplained.tsx  |  2 +-
 .../components/LokiQueryBuilderOptions.tsx    |  3 +-
 .../querybuilder/components/NestedQuery.tsx   |  3 +-
 .../components/NestedQueryList.tsx            |  2 +-
 .../querybuilder/components/QueryPreview.tsx  |  2 +-
 .../datasource/mssql/sqlCompletionProvider.ts | 11 ++-
 .../components/AnnotationQueryEditor.tsx      |  3 +-
 .../querybuilder/components/MetricSelect.tsx  |  3 +-
 .../querybuilder/components/NestedQuery.tsx   |  3 +-
 .../components/NestedQueryList.tsx            |  2 +-
 .../components/PromQueryBuilder.tsx           |  2 +-
 .../components/PromQueryBuilderExplained.tsx  |  2 +-
 .../components/PromQueryBuilderOptions.tsx    |  3 +-
 .../components/PromQueryEditorSelector.tsx    |  3 +-
 .../components/PromQueryLegendEditor.tsx      |  3 +-
 .../querybuilder/components/QueryPreview.tsx  |  2 +-
 .../querybuilder/shared/FeedbackLink.tsx      |  3 +-
 .../querybuilder/shared/LabelFilterItem.tsx   |  3 +-
 .../querybuilder/shared/LabelFilters.tsx      |  2 +-
 .../querybuilder/shared/OperationEditor.tsx   |  3 +-
 .../querybuilder/shared/OperationHeader.tsx   |  3 +-
 .../shared/OperationInfoButton.tsx            |  3 +-
 .../querybuilder/shared/OperationList.tsx     |  3 +-
 .../shared/OperationParamEditor.tsx           |  3 +-
 .../shared/OperationsEditorRow.tsx            |  3 +-
 .../querybuilder/shared/QueryHeaderSwitch.tsx |  3 +-
 .../querybuilder/shared/QueryOptionGroup.tsx  |  3 +-
 .../traceql/TempoQueryBuilderOptions.tsx      |  3 +-
 yarn.lock                                     | 18 ++--
 128 files changed, 212 insertions(+), 727 deletions(-)
 delete mode 100644 packages/grafana-ui/src/components/QueryEditor/AccessoryButton.tsx
 delete mode 100644 packages/grafana-ui/src/components/QueryEditor/EditorField.tsx
 delete mode 100644 packages/grafana-ui/src/components/QueryEditor/EditorFieldGroup.tsx
 delete mode 100644 packages/grafana-ui/src/components/QueryEditor/EditorHeader.tsx
 delete mode 100644 packages/grafana-ui/src/components/QueryEditor/EditorList.tsx
 delete mode 100644 packages/grafana-ui/src/components/QueryEditor/EditorRow.tsx
 delete mode 100644 packages/grafana-ui/src/components/QueryEditor/EditorRows.tsx
 delete mode 100644 packages/grafana-ui/src/components/QueryEditor/EditorSwitch.tsx
 delete mode 100644 packages/grafana-ui/src/components/QueryEditor/FlexItem.tsx
 delete mode 100644 packages/grafana-ui/src/components/QueryEditor/InlineSelect.tsx
 delete mode 100644 packages/grafana-ui/src/components/QueryEditor/InputGroup.story.internal.tsx
 delete mode 100644 packages/grafana-ui/src/components/QueryEditor/InputGroup.tsx
 delete mode 100644 packages/grafana-ui/src/components/QueryEditor/Space.tsx
 delete mode 100644 packages/grafana-ui/src/components/QueryEditor/Stack.tsx
 delete mode 100644 packages/grafana-ui/src/components/QueryEditor/index.ts

diff --git a/package.json b/package.json
index f10c59a0a76..89da93945b6 100644
--- a/package.json
+++ b/package.json
@@ -255,7 +255,7 @@
     "@grafana/aws-sdk": "0.0.37",
     "@grafana/data": "workspace:*",
     "@grafana/e2e-selectors": "workspace:*",
-    "@grafana/experimental": "^0.0.2-canary.36",
+    "@grafana/experimental": "1.0.1",
     "@grafana/google-sdk": "0.0.3",
     "@grafana/lezer-logql": "0.1.1",
     "@grafana/monaco-logql": "^0.0.6",
diff --git a/packages/grafana-ui/src/components/QueryEditor/AccessoryButton.tsx b/packages/grafana-ui/src/components/QueryEditor/AccessoryButton.tsx
deleted file mode 100644
index 07f8c2c8a53..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/AccessoryButton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { css, cx } from '@emotion/css';
-import React from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
-
-import { useTheme2, stylesFactory } from '../../themes';
-import { Button, ButtonProps } from '../Button';
-
-interface AccessoryButtonProps extends ButtonProps {}
-
-export const AccessoryButton: React.FC<AccessoryButtonProps> = ({ className, ...props }) => {
-  const theme = useTheme2();
-  const styles = getButtonStyles(theme);
-
-  return <Button {...props} className={cx(className, styles.button)} />;
-};
-
-const getButtonStyles = stylesFactory((theme: GrafanaTheme2) => ({
-  button: css({
-    paddingLeft: theme.spacing(3 / 2),
-    paddingRight: theme.spacing(3 / 2),
-  }),
-}));
diff --git a/packages/grafana-ui/src/components/QueryEditor/EditorField.tsx b/packages/grafana-ui/src/components/QueryEditor/EditorField.tsx
deleted file mode 100644
index d25fe998a08..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/EditorField.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { css } from '@emotion/css';
-import React, { ComponentProps } from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
-
-import { stylesFactory, useTheme2 } from '../../themes';
-import { ReactUtils } from '../../utils';
-import { Field } from '../Forms/Field';
-import { Icon } from '../Icon/Icon';
-import { PopoverContent, Tooltip } from '../Tooltip';
-
-import { Space } from './Space';
-
-interface EditorFieldProps extends ComponentProps<typeof Field> {
-  label: string;
-  children: React.ReactElement;
-  width?: number | string;
-  optional?: boolean;
-  tooltip?: PopoverContent;
-  tooltipInteractive?: boolean;
-}
-
-export const EditorField: React.FC<EditorFieldProps> = (props) => {
-  const { label, optional, tooltip, tooltipInteractive, children, width, ...fieldProps } = props;
-
-  const theme = useTheme2();
-  const styles = getStyles(theme, width);
-
-  // Null check for backward compatibility
-  const childInputId = fieldProps?.htmlFor || ReactUtils?.getChildId(children);
-
-  const labelEl = (
-    <>
-      <label className={styles.label} htmlFor={childInputId}>
-        {label}
-        {optional && <span className={styles.optional}> - optional</span>}
-        {tooltip && (
-          <Tooltip placement="top" content={tooltip} theme="info" interactive={tooltipInteractive}>
-            <Icon name="info-circle" size="sm" className={styles.icon} />
-          </Tooltip>
-        )}
-      </label>
-      <Space v={0.5} />
-    </>
-  );
-
-  return (
-    <div className={styles.root}>
-      <Field className={styles.field} label={labelEl} {...fieldProps}>
-        {children}
-      </Field>
-    </div>
-  );
-};
-
-const getStyles = stylesFactory((theme: GrafanaTheme2, width?: number | string) => {
-  return {
-    root: css({
-      minWidth: theme.spacing(width ?? 0),
-    }),
-    label: css({
-      fontSize: 12,
-      fontWeight: theme.typography.fontWeightMedium,
-    }),
-    optional: css({
-      fontStyle: 'italic',
-      color: theme.colors.text.secondary,
-    }),
-    field: css({
-      marginBottom: 0, // GrafanaUI/Field has a bottom margin which we must remove
-    }),
-    icon: css({
-      color: theme.colors.text.secondary,
-      marginLeft: theme.spacing(1),
-      ':hover': {
-        color: theme.colors.text.primary,
-      },
-    }),
-  };
-});
diff --git a/packages/grafana-ui/src/components/QueryEditor/EditorFieldGroup.tsx b/packages/grafana-ui/src/components/QueryEditor/EditorFieldGroup.tsx
deleted file mode 100644
index d846a541415..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/EditorFieldGroup.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-import { Stack } from './Stack';
-
-interface EditorFieldGroupProps {}
-
-export const EditorFieldGroup = ({ children }: React.PropsWithChildren<EditorFieldGroupProps>) => {
-  return <Stack gap={1}>{children}</Stack>;
-};
diff --git a/packages/grafana-ui/src/components/QueryEditor/EditorHeader.tsx b/packages/grafana-ui/src/components/QueryEditor/EditorHeader.tsx
deleted file mode 100644
index bfa1d57dc0a..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/EditorHeader.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { css } from '@emotion/css';
-import React from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
-
-import { stylesFactory, useTheme2 } from '../../themes';
-
-interface EditorHeaderProps {}
-
-export const EditorHeader = ({ children }: React.PropsWithChildren<EditorHeaderProps>) => {
-  const theme = useTheme2();
-  const styles = getStyles(theme);
-
-  return <div className={styles.root}>{children}</div>;
-};
-
-const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
-  root: css({
-    display: 'flex',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    gap: theme.spacing(3),
-    minHeight: theme.spacing(4),
-  }),
-}));
diff --git a/packages/grafana-ui/src/components/QueryEditor/EditorList.tsx b/packages/grafana-ui/src/components/QueryEditor/EditorList.tsx
deleted file mode 100644
index d19bc53b79f..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/EditorList.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-
-import { Button } from '../Button';
-
-import { Stack } from './Stack';
-
-interface EditorListProps<T> {
-  items: Array<Partial<T>>;
-  renderItem: (
-    item: Partial<T>,
-    onChangeItem: (item: Partial<T>) => void,
-    onDeleteItem: () => void
-  ) => React.ReactElement;
-  onChange: (items: Array<Partial<T>>) => void;
-}
-
-export function EditorList<T>({ items, renderItem, onChange }: EditorListProps<T>) {
-  const onAddItem = () => {
-    const newItems = [...items, {}];
-
-    onChange(newItems);
-  };
-
-  const onChangeItem = (itemIndex: number, newItem: Partial<T>) => {
-    const newItems = [...items];
-    newItems[itemIndex] = newItem;
-    onChange(newItems);
-  };
-
-  const onDeleteItem = (itemIndex: number) => {
-    const newItems = [...items];
-    newItems.splice(itemIndex, 1);
-    onChange(newItems);
-  };
-  return (
-    <Stack>
-      {items.map((item, index) => (
-        <div key={index}>
-          {renderItem(
-            item,
-            (newItem) => onChangeItem(index, newItem),
-            () => onDeleteItem(index)
-          )}
-        </div>
-      ))}
-      <Button onClick={onAddItem} variant="secondary" size="md" icon="plus" aria-label="Add" type="button" />
-    </Stack>
-  );
-}
diff --git a/packages/grafana-ui/src/components/QueryEditor/EditorRow.tsx b/packages/grafana-ui/src/components/QueryEditor/EditorRow.tsx
deleted file mode 100644
index f25cc9c1dd4..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/EditorRow.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { css } from '@emotion/css';
-import React from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
-
-import { useStyles2 } from '../../themes';
-
-import { Stack } from './Stack';
-
-interface EditorRowProps {}
-
-export const EditorRow = ({ children }: React.PropsWithChildren<EditorRowProps>) => {
-  const styles = useStyles2(getStyles);
-
-  return (
-    <div className={styles.root}>
-      <Stack gap={2}>{children}</Stack>
-    </div>
-  );
-};
-
-const getStyles = (theme: GrafanaTheme2) => {
-  return {
-    root: css({
-      padding: theme.spacing(1),
-      backgroundColor: theme.colors.background.secondary,
-      borderRadius: theme.shape.borderRadius(1),
-    }),
-  };
-};
diff --git a/packages/grafana-ui/src/components/QueryEditor/EditorRows.tsx b/packages/grafana-ui/src/components/QueryEditor/EditorRows.tsx
deleted file mode 100644
index feed64809d0..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/EditorRows.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-import { Stack } from './Stack';
-
-interface EditorRowsProps {}
-
-export const EditorRows = ({ children }: React.PropsWithChildren<EditorRowsProps>) => {
-  return (
-    <Stack gap={0.5} direction="column">
-      {children}
-    </Stack>
-  );
-};
diff --git a/packages/grafana-ui/src/components/QueryEditor/EditorSwitch.tsx b/packages/grafana-ui/src/components/QueryEditor/EditorSwitch.tsx
deleted file mode 100644
index 6a9635500e7..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/EditorSwitch.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { css } from '@emotion/css';
-import React, { ComponentProps } from 'react';
-
-import { Switch } from '../Switch/Switch';
-
-// Wrapper component around <Switch /> that properly aligns it in <EditorField />
-export const EditorSwitch: React.FC<ComponentProps<typeof Switch>> = (props) => {
-  const styles = getStyles();
-
-  return (
-    <div className={styles.switch}>
-      <Switch {...props} />
-    </div>
-  );
-};
-
-const getStyles = () => {
-  return {
-    switch: css({
-      display: 'flex',
-      alignItems: 'center',
-      minHeight: 30,
-    }),
-  };
-};
diff --git a/packages/grafana-ui/src/components/QueryEditor/FlexItem.tsx b/packages/grafana-ui/src/components/QueryEditor/FlexItem.tsx
deleted file mode 100644
index b8c30e0a3a5..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/FlexItem.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-
-interface FlexItemProps {
-  grow?: number;
-  shrink?: number;
-}
-
-export const FlexItem: React.FC<FlexItemProps> = ({ grow, shrink }) => {
-  return <div style={{ display: 'block', flexGrow: grow, flexShrink: shrink }} />;
-};
diff --git a/packages/grafana-ui/src/components/QueryEditor/InlineSelect.tsx b/packages/grafana-ui/src/components/QueryEditor/InlineSelect.tsx
deleted file mode 100644
index f8b38cdfb3d..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/InlineSelect.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { css, cx } from '@emotion/css';
-import React, { useState } from 'react';
-import { GroupBase } from 'react-select';
-
-import { GrafanaTheme2 } from '@grafana/data';
-
-import { stylesFactory, useTheme2 } from '../../themes';
-import { Select } from '../Select/Select';
-import { SelectContainerProps, SelectContainer as BaseSelectContainer } from '../Select/SelectContainer';
-import { SelectCommonProps } from '../Select/types';
-
-interface InlineSelectProps<T> extends SelectCommonProps<T> {
-  label?: string;
-}
-
-export function InlineSelect<T>({ label: labelProp, ...props }: InlineSelectProps<T>) {
-  const theme = useTheme2();
-  const [id] = useState(() => Math.random().toString(16).slice(2));
-  const styles = getSelectStyles(theme);
-  const components = {
-    SelectContainer,
-    ValueContainer,
-    SingleValue: ValueContainer,
-  };
-
-  return (
-    <div className={styles.root}>
-      {labelProp && (
-        <label className={styles.label} htmlFor={id}>
-          {labelProp}
-          {':'}&nbsp;
-        </label>
-      )}
-      {/* @ts-ignore */}
-      <Select openMenuOnFocus inputId={id} {...props} components={components} />
-    </div>
-  );
-}
-
-const SelectContainer = <Option, isMulti extends boolean, Group extends GroupBase<Option>>(
-  props: SelectContainerProps<Option, isMulti, Group>
-) => {
-  const { children } = props;
-
-  const theme = useTheme2();
-  const styles = getSelectStyles(theme);
-
-  return (
-    <BaseSelectContainer {...props} className={cx(props.className, styles.container)}>
-      {children}
-    </BaseSelectContainer>
-  );
-};
-
-const ValueContainer = <Option, isMulti extends boolean, Group extends GroupBase<Option>>(
-  props: SelectContainerProps<Option, isMulti, Group>
-) => {
-  const { className, children } = props;
-  const theme = useTheme2();
-  const styles = getSelectStyles(theme);
-
-  return <div className={cx(className, styles.valueContainer)}>{children}</div>;
-};
-
-const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => ({
-  root: css({
-    display: 'flex',
-    fontSize: 12,
-    alignItems: 'center',
-  }),
-
-  label: css({
-    color: theme.colors.text.secondary,
-    whiteSpace: 'nowrap',
-  }),
-
-  container: css({
-    background: 'none',
-    borderColor: 'transparent',
-  }),
-
-  valueContainer: css({
-    display: 'flex',
-    alignItems: 'center',
-    flex: 'initial',
-    color: theme.colors.text.secondary,
-    fontSize: 12,
-  }),
-}));
diff --git a/packages/grafana-ui/src/components/QueryEditor/InputGroup.story.internal.tsx b/packages/grafana-ui/src/components/QueryEditor/InputGroup.story.internal.tsx
deleted file mode 100644
index b3ddbeeeefc..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/InputGroup.story.internal.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import React from 'react';
-
-import { Stack } from '..';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { Input } from '../Input/Input';
-import { Select } from '../Select/Select';
-
-import { AccessoryButton } from './AccessoryButton';
-import { InputGroup } from './InputGroup';
-
-const meta: ComponentMeta<typeof InputGroup> = {
-  title: 'Experimental/InputGroup',
-  component: InputGroup,
-  decorators: [withCenteredStory],
-};
-
-export function WithTextInputs() {
-  return (
-    <InputGroup>
-      <Input placeholder="One" />
-      <Input placeholder="Two" />
-    </InputGroup>
-  );
-}
-
-export function WithAccessoryButton() {
-  return (
-    <InputGroup>
-      <Select value={selectOptions[0]} options={selectOptions} onChange={() => {}} />
-      <AccessoryButton aria-label="Remove group by column" icon="times" variant="secondary" />
-    </InputGroup>
-  );
-}
-
-export function WithSelectsAndInput() {
-  return (
-    <Stack direction="column">
-      <InputGroup>
-        <Input invalid placeholder="LHS" />
-        <Select value={comparitorOptions[0]} options={comparitorOptions} onChange={() => {}} />
-        <Input placeholder="RHS" />
-      </InputGroup>
-      <InputGroup>
-        <Input placeholder="LHS" />
-        <Select invalid value={comparitorOptions[0]} options={comparitorOptions} onChange={() => {}} />
-        <Input placeholder="RHS" />
-      </InputGroup>
-      <InputGroup>
-        <Input placeholder="LHS" />
-        <Select value={comparitorOptions[0]} options={comparitorOptions} onChange={() => {}} />
-        <Input invalid placeholder="RHS" />
-      </InputGroup>
-    </Stack>
-  );
-}
-
-const selectOptions = [{ label: 'Prometheus', value: 1 }];
-const comparitorOptions = [
-  { label: '=', value: 1 },
-  { label: '<', value: 2 },
-  { label: '>', value: 3 },
-];
-
-export default meta;
diff --git a/packages/grafana-ui/src/components/QueryEditor/InputGroup.tsx b/packages/grafana-ui/src/components/QueryEditor/InputGroup.tsx
deleted file mode 100644
index 04dc192e9f9..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/InputGroup.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { css, cx } from '@emotion/css';
-import React, { Children, cloneElement, isValidElement, ReactElement } from 'react';
-
-import { useStyles2 } from '../../themes';
-
-type Child = string | undefined | ReactElement<{ className?: string; invalid?: unknown }>;
-interface InputGroupProps {
-  // we type the children props so we can test them later on
-  children: Child | Child[];
-}
-
-export const InputGroup = ({ children }: InputGroupProps) => {
-  const styles = useStyles2(getStyles);
-
-  // Find children with an invalid prop, and set a class name to raise their z-index so all
-  // of the invalid border is visible
-  const modifiedChildren = Children.map(children, (child) => {
-    if (isValidElement(child) && child.props.invalid) {
-      return cloneElement(child, { className: cx(child.props.className, styles.invalidChild) });
-    }
-
-    return child;
-  });
-
-  return <div className={styles.root}>{modifiedChildren}</div>;
-};
-
-// The later in the array the higher the priority for showing that element's border
-const borderPriority = [
-  '' as const, // lowest priority
-  'base' as const,
-  'hovered' as const,
-  'invalid' as const,
-  'focused' as const, // highest priority
-];
-
-const getStyles = () => ({
-  root: css({
-    display: 'flex',
-
-    // Style the direct children of the component
-    '> *': {
-      '&:not(:first-child)': {
-        // Negative margin hides the double-border on adjacent selects
-        marginLeft: -1,
-      },
-
-      '&:first-child': {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
-      },
-
-      '&:last-child': {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0,
-      },
-
-      '&:not(:first-child):not(:last-child)': {
-        borderRadius: 0,
-      },
-
-      //
-      position: 'relative',
-      zIndex: borderPriority.indexOf('base'),
-
-      // Adjacent borders are overlapping, so raise children up when hovering etc
-      // so all that child's borders are visible.
-      '&:hover': {
-        zIndex: borderPriority.indexOf('hovered'),
-      },
-      '&:focus-within': {
-        zIndex: borderPriority.indexOf('focused'),
-      },
-    },
-  }),
-
-  invalidChild: css({
-    zIndex: borderPriority.indexOf('invalid'),
-  }),
-});
diff --git a/packages/grafana-ui/src/components/QueryEditor/Space.tsx b/packages/grafana-ui/src/components/QueryEditor/Space.tsx
deleted file mode 100644
index 5daa34af026..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/Space.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { css, cx } from '@emotion/css';
-import React from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
-
-import { stylesFactory, useTheme2 } from '../../themes';
-
-export interface SpaceProps {
-  v?: number;
-  h?: number;
-  layout?: 'block' | 'inline';
-}
-
-export const Space = (props: SpaceProps) => {
-  const theme = useTheme2();
-  const styles = getStyles(theme, props);
-
-  return <span className={cx(styles.wrapper)} />;
-};
-
-Space.defaultProps = {
-  v: 0,
-  h: 0,
-  layout: 'block',
-};
-
-const getStyles = stylesFactory((theme: GrafanaTheme2, props: SpaceProps) => ({
-  wrapper: css([
-    {
-      paddingRight: theme.spacing(props.h ?? 0),
-      paddingBottom: theme.spacing(props.v ?? 0),
-    },
-    props.layout === 'inline' && {
-      display: 'inline-block',
-    },
-    props.layout === 'block' && {
-      display: 'block',
-    },
-  ]),
-}));
diff --git a/packages/grafana-ui/src/components/QueryEditor/Stack.tsx b/packages/grafana-ui/src/components/QueryEditor/Stack.tsx
deleted file mode 100644
index 430c4f430aa..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/Stack.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { css } from '@emotion/css';
-import React, { CSSProperties, useCallback } from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
-
-import { useStyles2 } from '../../themes';
-
-interface StackProps {
-  direction?: CSSProperties['flexDirection'];
-  alignItems?: CSSProperties['alignItems'];
-  wrap?: boolean;
-  gap?: number;
-  flexGrow?: CSSProperties['flexGrow'];
-}
-
-export const Stack = ({ children, ...props }: React.PropsWithChildren<StackProps>) => {
-  const styles = useStyles2(useCallback((theme) => getStyles(theme, props), [props]));
-
-  return <div className={styles.root}>{children}</div>;
-};
-
-const getStyles = (theme: GrafanaTheme2, props: StackProps) => ({
-  root: css({
-    display: 'flex',
-    flexDirection: props.direction ?? 'row',
-    flexWrap: props.wrap ?? true ? 'wrap' : undefined,
-    alignItems: props.alignItems,
-    gap: theme.spacing(props.gap ?? 2),
-    flexGrow: props.flexGrow,
-  }),
-});
diff --git a/packages/grafana-ui/src/components/QueryEditor/index.ts b/packages/grafana-ui/src/components/QueryEditor/index.ts
deleted file mode 100644
index 2eba9ed73f9..00000000000
--- a/packages/grafana-ui/src/components/QueryEditor/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export { AccessoryButton } from './AccessoryButton';
-export { EditorFieldGroup } from './EditorFieldGroup';
-export { EditorHeader } from './EditorHeader';
-export { EditorField } from './EditorField';
-export { EditorRow } from './EditorRow';
-export { EditorList } from './EditorList';
-export { EditorRows } from './EditorRows';
-export { EditorSwitch } from './EditorSwitch';
-export { FlexItem } from './FlexItem';
-export { Stack } from './Stack';
-export { InlineSelect } from './InlineSelect';
-export { InputGroup } from './InputGroup';
-export { Space } from './Space';
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 9b6d3dd00e5..be1987ed037 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -276,4 +276,3 @@ export { type GraphNGLegendEvent } from './GraphNG/types';
 export * from './PanelChrome/types';
 export { Label as BrowserLabel } from './BrowserLabel/Label';
 export { PanelContainer } from './PanelContainer/PanelContainer';
-export * from './QueryEditor';
diff --git a/public/app/features/alerting/unified/AlertsFolderView.tsx b/public/app/features/alerting/unified/AlertsFolderView.tsx
index 94d15495208..32b7b55e684 100644
--- a/public/app/features/alerting/unified/AlertsFolderView.tsx
+++ b/public/app/features/alerting/unified/AlertsFolderView.tsx
@@ -4,7 +4,8 @@ import React, { useEffect, useState } from 'react';
 import { useDebounce } from 'react-use';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Card, FilterInput, Icon, Pagination, Select, Stack, TagList, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Card, FilterInput, Icon, Pagination, Select, TagList, useStyles2 } from '@grafana/ui';
 import { DEFAULT_PER_PAGE_PAGINATION } from 'app/core/constants';
 import { getQueryParamValue } from 'app/core/utils/query';
 import { FolderState, useDispatch } from 'app/types';
diff --git a/public/app/features/alerting/unified/Receivers.tsx b/public/app/features/alerting/unified/Receivers.tsx
index 49ce166c924..d4934e43fa5 100644
--- a/public/app/features/alerting/unified/Receivers.tsx
+++ b/public/app/features/alerting/unified/Receivers.tsx
@@ -4,7 +4,8 @@ import React, { useEffect } from 'react';
 import { Redirect, Route, RouteChildrenProps, Switch, useLocation, useParams } from 'react-router-dom';
 
 import { NavModelItem, GrafanaTheme2 } from '@grafana/data';
-import { Alert, LoadingPlaceholder, withErrorBoundary, useStyles2, Icon, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Alert, LoadingPlaceholder, withErrorBoundary, useStyles2, Icon } from '@grafana/ui';
 import { useDispatch } from 'app/types';
 
 import { ContactPointsState } from '../../../types';
diff --git a/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx b/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
index 6eebd413c22..c4b02127be1 100644
--- a/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
+++ b/public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx
@@ -3,8 +3,9 @@ import { debounce } from 'lodash';
 import React, { FormEvent } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { Stack } from '@grafana/experimental';
 import { logInfo } from '@grafana/runtime';
-import { Label, Tooltip, Input, Icon, useStyles2, Stack } from '@grafana/ui';
+import { Label, Tooltip, Input, Icon, useStyles2 } from '@grafana/ui';
 
 import { LogMessages } from '../../Analytics';
 
diff --git a/public/app/features/alerting/unified/components/expressions/Expression.tsx b/public/app/features/alerting/unified/components/expressions/Expression.tsx
index 02f465fc900..295b8376db8 100644
--- a/public/app/features/alerting/unified/components/expressions/Expression.tsx
+++ b/public/app/features/alerting/unified/components/expressions/Expression.tsx
@@ -4,7 +4,8 @@ import React, { FC, useCallback, useState } from 'react';
 
 import { DataFrame, dateTimeFormat, GrafanaTheme2, LoadingState, PanelData } from '@grafana/data';
 import { isTimeSeries } from '@grafana/data/src/dataframe/utils';
-import { AutoSizeInput, Icon, IconButton, Select, Stack, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { AutoSizeInput, Icon, IconButton, Select, useStyles2 } from '@grafana/ui';
 import { ClassicConditions } from 'app/features/expressions/components/ClassicConditions';
 import { Math } from 'app/features/expressions/components/Math';
 import { Reduce } from 'app/features/expressions/components/Reduce';
diff --git a/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx b/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
index 8b596b92424..42f9b455210 100644
--- a/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
+++ b/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
@@ -3,7 +3,8 @@ import pluralize from 'pluralize';
 import React, { FC, useMemo, useState } from 'react';
 
 import { GrafanaTheme2, dateTime, dateTimeFormat } from '@grafana/data';
-import { Button, ConfirmModal, Modal, useStyles2, Badge, Icon, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Button, ConfirmModal, Modal, useStyles2, Badge, Icon } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
 import { AlertManagerCortexConfig, Receiver } from 'app/plugins/datasource/alertmanager/types';
 import { useDispatch, AccessControlAction, ContactPointsState, NotifiersState, ReceiversState } from 'app/types';
diff --git a/public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx b/public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx
index 808faab9012..99e5e4fb3d9 100644
--- a/public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx
+++ b/public/app/features/alerting/unified/components/receivers/TemplateDataDocs.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Stack, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { useStyles2 } from '@grafana/ui';
 
 import { HoverCard } from '../HoverCard';
 
diff --git a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
index efb7ed39027..c5dc31fd665 100644
--- a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
@@ -4,7 +4,8 @@ import { useForm, Validate } from 'react-hook-form';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Alert, Button, Field, FieldSet, Input, LinkButton, Stack, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Alert, Button, Field, FieldSet, Input, LinkButton, useStyles2 } from '@grafana/ui';
 import { useCleanup } from 'app/core/hooks/useCleanup';
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
 import { useDispatch } from 'app/types';
diff --git a/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
index d79ad03fe9e..b53405ca357 100644
--- a/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx
@@ -4,7 +4,8 @@ import React, { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2, Field, Input, InputControl, Label, Tooltip, Icon, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { useStyles2, Field, Input, InputControl, Label, Tooltip, Icon } from '@grafana/ui';
 import { FolderPickerFilter } from 'app/core/components/Select/FolderPicker';
 import { contextSrv } from 'app/core/services/context_srv';
 import { DashboardSearchHit } from 'app/features/search/types';
diff --git a/public/app/features/alerting/unified/components/rule-editor/ExpressionsEditor.tsx b/public/app/features/alerting/unified/components/rule-editor/ExpressionsEditor.tsx
index a1ecc460869..ea09e7761a7 100644
--- a/public/app/features/alerting/unified/components/rule-editor/ExpressionsEditor.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/ExpressionsEditor.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 
 import { PanelData } from '@grafana/data';
-import { Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
 import { isExpressionQuery } from 'app/features/expressions/guards';
 import { ExpressionQuery, ExpressionQueryType } from 'app/features/expressions/types';
 import { AlertQuery } from 'app/types/unified-alerting-dto';
diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
index e24de45f826..4ff7ac8c5d7 100644
--- a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx
@@ -13,7 +13,8 @@ import {
   RelativeTimeRange,
   ThresholdsConfig,
 } from '@grafana/data';
-import { RelativeTimeRangePicker, useStyles2, Tooltip, Icon, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { RelativeTimeRangePicker, useStyles2, Tooltip, Icon } from '@grafana/ui';
 import { isExpressionQuery } from 'app/features/expressions/guards';
 import { QueryEditorRow } from 'app/features/query/components/QueryEditorRow';
 import { AlertQuery } from 'app/types/unified-alerting-dto';
diff --git a/public/app/features/alerting/unified/components/rule-editor/RuleFolderPicker.tsx b/public/app/features/alerting/unified/components/rule-editor/RuleFolderPicker.tsx
index ce320385df5..db6f02bd74c 100644
--- a/public/app/features/alerting/unified/components/rule-editor/RuleFolderPicker.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/RuleFolderPicker.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Icon, Stack, Tooltip, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Icon, Tooltip, useStyles2 } from '@grafana/ui';
 import { FolderPicker, Props as FolderPickerProps } from 'app/core/components/Select/FolderPicker';
 import { PermissionLevelString } from 'app/types';
 
diff --git a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
index 50981d11b02..d329a1d3de7 100644
--- a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx
@@ -3,8 +3,9 @@ import { useFormContext } from 'react-hook-form';
 
 import { LoadingState, PanelData } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { Stack } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { Alert, Button, Field, InputControl, Stack, Tooltip } from '@grafana/ui';
+import { Alert, Button, Field, InputControl, Tooltip } from '@grafana/ui';
 import { isExpressionQuery } from 'app/features/expressions/guards';
 import { AlertQuery } from 'app/types/unified-alerting-dto';
 
diff --git a/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx b/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx
index 4777e2bcfe8..f92eaede6a1 100644
--- a/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/rule-types/RuleTypePicker.tsx
@@ -3,7 +3,8 @@ import { isEmpty } from 'lodash';
 import React, { FC } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
-import { Stack, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { useStyles2 } from '@grafana/ui';
 
 import { useRulesSourcesWithRuler } from '../../../hooks/useRuleSourcesWithRuler';
 import { RuleFormType } from '../../../types/rule-form';
diff --git a/public/app/features/alerting/unified/components/rules/RulesFilter.tsx b/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
index 7a85d505bc4..9e14b688223 100644
--- a/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
+++ b/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
@@ -3,8 +3,9 @@ import { debounce } from 'lodash';
 import React, { FormEvent, useState } from 'react';
 
 import { DataSourceInstanceSettings, GrafanaTheme, SelectableValue } from '@grafana/data';
+import { Stack } from '@grafana/experimental';
 import { DataSourcePicker, logInfo } from '@grafana/runtime';
-import { Button, Field, Icon, Input, Label, RadioButtonGroup, Stack, Tooltip, useStyles } from '@grafana/ui';
+import { Button, Field, Icon, Input, Label, RadioButtonGroup, Tooltip, useStyles } from '@grafana/ui';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { PromAlertingRuleState, PromRuleType } from 'app/types/unified-alerting-dto';
 
diff --git a/public/app/features/alerting/unified/components/rules/StateHistory.tsx b/public/app/features/alerting/unified/components/rules/StateHistory.tsx
index e02df6a13d1..e46f6f92f7c 100644
--- a/public/app/features/alerting/unified/components/rules/StateHistory.tsx
+++ b/public/app/features/alerting/unified/components/rules/StateHistory.tsx
@@ -3,7 +3,8 @@ import { groupBy } from 'lodash';
 import React, { FC, FormEvent, useCallback, useState } from 'react';
 
 import { AlertState, dateTimeFormat, GrafanaTheme2 } from '@grafana/data';
-import { Alert, Field, Icon, Input, Label, LoadingPlaceholder, Stack, Tooltip, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Alert, Field, Icon, Input, Label, LoadingPlaceholder, Tooltip, useStyles2 } from '@grafana/ui';
 import { StateHistoryItem, StateHistoryItemData } from 'app/types/unified-alerting';
 import { GrafanaAlertStateWithReason, PromAlertingRuleState } from 'app/types/unified-alerting-dto';
 
diff --git a/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx b/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx
index 7613cf683eb..2d926a9fe41 100644
--- a/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencesFilter.tsx
@@ -3,7 +3,8 @@ import { debounce, uniqueId } from 'lodash';
 import React, { FormEvent, useState } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Label, Icon, Input, Tooltip, RadioButtonGroup, useStyles2, Button, Field, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Label, Icon, Input, Tooltip, RadioButtonGroup, useStyles2, Button, Field } from '@grafana/ui';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { SilenceState } from 'app/plugins/datasource/alertmanager/types';
 
diff --git a/public/app/features/alerting/unified/components/silences/SilencesTable.tsx b/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
index ef021d61fe9..e775a081b03 100644
--- a/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencesTable.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React, { FC, useMemo } from 'react';
 
 import { GrafanaTheme2, dateMath } from '@grafana/data';
-import { Icon, useStyles2, Link, Button, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Icon, useStyles2, Link, Button } from '@grafana/ui';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { contextSrv } from 'app/core/services/context_srv';
 import { AlertmanagerAlert, Silence, SilenceState } from 'app/plugins/datasource/alertmanager/types';
diff --git a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx
index 0ba8a16c5b4..2b97dbd4b0d 100644
--- a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx
+++ b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx
@@ -3,8 +3,9 @@ import { useAsync } from 'react-use';
 
 import { AnnotationQuery, DataSourceInstanceSettings, getDataSourceRef } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { Stack } from '@grafana/experimental';
 import { DataSourcePicker, getDataSourceSrv, locationService } from '@grafana/runtime';
-import { Button, Checkbox, Field, FieldSet, HorizontalGroup, Input, Stack } from '@grafana/ui';
+import { Button, Checkbox, Field, FieldSet, HorizontalGroup, Input } from '@grafana/ui';
 import { ColorValueEditor } from 'app/core/components/OptionsUI/color';
 import StandardAnnotationQueryEditor from 'app/features/annotations/components/StandardAnnotationQueryEditor';
 
diff --git a/public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx b/public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx
index f0a95b690d0..43070ebcd72 100644
--- a/public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx
+++ b/public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx
@@ -3,6 +3,7 @@ import React, { useMemo, useEffect } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 import { PanelPlugin, GrafanaTheme2, FeatureState } from '@grafana/data';
+import { Stack } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
 import {
   Drawer,
@@ -19,7 +20,6 @@ import {
   FeatureBadge,
   Select,
   ClipboardButton,
-  Stack,
   Icon,
 } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
index c3d3dac52dc..736bd64ef8b 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
@@ -6,6 +6,7 @@ import { Subscription } from 'rxjs';
 
 import { FieldConfigSource, GrafanaTheme2, NavModel, NavModelItem, PageLayoutType } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { Stack } from '@grafana/experimental';
 import { config, locationService } from '@grafana/runtime';
 import {
   Button,
@@ -14,7 +15,6 @@ import {
   ModalsController,
   PageToolbar,
   RadioButtonGroup,
-  Stack,
   stylesFactory,
   Themeable2,
   ToolbarButton,
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
index 1912aec84d9..0d25fbde1fc 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx
@@ -1,7 +1,8 @@
 import React, { useMemo, useState } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
-import { Button, Checkbox, Form, Stack, TextArea } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Button, Checkbox, Form, TextArea } from '@grafana/ui';
 import { DashboardModel } from 'app/features/dashboard/state';
 
 import { SaveDashboardData, SaveDashboardOptions } from '../types';
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
index a8498c71b8a..335cbd53c16 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
@@ -3,7 +3,8 @@ import { saveAs } from 'file-saver';
 import React, { useCallback, useState } from 'react';
 
 import { GrafanaTheme } from '@grafana/data';
-import { Button, ClipboardButton, HorizontalGroup, Stack, stylesFactory, TextArea, useTheme } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Button, ClipboardButton, HorizontalGroup, stylesFactory, TextArea, useTheme } from '@grafana/ui';
 
 import { SaveDashboardFormProps } from '../types';
 
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveToStorageForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveToStorageForm.tsx
index de34b050d69..052f293733c 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveToStorageForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveToStorageForm.tsx
@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react';
 import { useAsync } from 'react-use';
 
 import { selectors } from '@grafana/e2e-selectors';
+import { Stack } from '@grafana/experimental';
 import { locationService } from '@grafana/runtime';
 import {
   Button,
@@ -12,7 +13,6 @@ import {
   Input,
   RadioButtonGroup,
   Spinner,
-  Stack,
   TextArea,
 } from '@grafana/ui';
 import { getGrafanaStorage } from 'app/features/storage/storage';
diff --git a/public/app/features/dashboard/components/VersionHistory/VersionHistoryButtons.tsx b/public/app/features/dashboard/components/VersionHistory/VersionHistoryButtons.tsx
index 1f5c89e8a16..427786af2ad 100644
--- a/public/app/features/dashboard/components/VersionHistory/VersionHistoryButtons.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/VersionHistoryButtons.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Tooltip, Button, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Tooltip, Button } from '@grafana/ui';
 
 type VersionsButtonsType = {
   hasMore: boolean;
diff --git a/public/app/features/expressions/components/Condition.tsx b/public/app/features/expressions/components/Condition.tsx
index 3dd3ede7c8d..abcb8c90d68 100644
--- a/public/app/features/expressions/components/Condition.tsx
+++ b/public/app/features/expressions/components/Condition.tsx
@@ -2,7 +2,8 @@ import { css, cx } from '@emotion/css';
 import React, { FC, FormEvent } from 'react';
 
 import { GrafanaTheme, SelectableValue } from '@grafana/data';
-import { Button, ButtonSelect, Icon, InlineFieldRow, Input, Select, Stack, useStyles } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Button, ButtonSelect, Icon, InlineFieldRow, Input, Select, useStyles } from '@grafana/ui';
 
 import alertDef, { EvalFunction } from '../../alerting/state/alertDef';
 import { ClassicCondition, ReducerType } from '../types';
diff --git a/public/app/features/expressions/components/Math.tsx b/public/app/features/expressions/components/Math.tsx
index a4d9b1986b5..d6bf9eeab5a 100644
--- a/public/app/features/expressions/components/Math.tsx
+++ b/public/app/features/expressions/components/Math.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React, { ChangeEvent, FC } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Icon, InlineField, InlineLabel, Stack, TextArea, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Icon, InlineField, InlineLabel, TextArea, useStyles2 } from '@grafana/ui';
 import { HoverCard } from 'app/features/alerting/unified/components/HoverCard';
 
 import { ExpressionQuery } from '../types';
diff --git a/public/app/features/inspector/QueryInspector.tsx b/public/app/features/inspector/QueryInspector.tsx
index 2615a97d44d..1cc818e8b5e 100644
--- a/public/app/features/inspector/QueryInspector.tsx
+++ b/public/app/features/inspector/QueryInspector.tsx
@@ -4,8 +4,9 @@ import { Subscription } from 'rxjs';
 
 import { DataFrame } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { Stack } from '@grafana/experimental';
 import { config, RefreshEvent } from '@grafana/runtime';
-import { Button, ClipboardButton, JSONFormatter, LoadingPlaceholder, Stack } from '@grafana/ui';
+import { Button, ClipboardButton, JSONFormatter, LoadingPlaceholder } from '@grafana/ui';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { supportsDataQuery } from 'app/features/dashboard/components/PanelEditor/utils';
 import { PanelModel } from 'app/features/dashboard/state';
diff --git a/public/app/features/org/UserInviteForm.tsx b/public/app/features/org/UserInviteForm.tsx
index cd44a762ea1..40ba570823c 100644
--- a/public/app/features/org/UserInviteForm.tsx
+++ b/public/app/features/org/UserInviteForm.tsx
@@ -1,19 +1,9 @@
 import React from 'react';
 
 import { locationUtil } from '@grafana/data';
+import { Stack } from '@grafana/experimental';
 import { locationService } from '@grafana/runtime';
-import {
-  Button,
-  LinkButton,
-  Input,
-  Switch,
-  RadioButtonGroup,
-  Form,
-  Field,
-  InputControl,
-  FieldSet,
-  Stack,
-} from '@grafana/ui';
+import { Button, LinkButton, Input, Switch, RadioButtonGroup, Form, Field, InputControl, FieldSet } from '@grafana/ui';
 import { getConfig } from 'app/core/config';
 import { OrgRole, useDispatch } from 'app/types';
 
diff --git a/public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx b/public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx
index 3be03f5a415..be9d69ab168 100644
--- a/public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx
+++ b/public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2, Icon, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { useStyles2, Icon } from '@grafana/ui';
 
 import { Version, CatalogPlugin, PluginIconName } from '../types';
 
diff --git a/public/app/features/plugins/sql/components/QueryEditor.tsx b/public/app/features/plugins/sql/components/QueryEditor.tsx
index aeee322b0d5..14274be3774 100644
--- a/public/app/features/plugins/sql/components/QueryEditor.tsx
+++ b/public/app/features/plugins/sql/components/QueryEditor.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useAsync } from 'react-use';
 
 import { QueryEditorProps } from '@grafana/data';
-import { Space } from '@grafana/ui';
+import { Space } from '@grafana/experimental';
 
 import { SqlDatasource } from '../datasource/SqlDatasource';
 import { applyQueryDefaults } from '../defaults';
diff --git a/public/app/features/plugins/sql/components/QueryHeader.tsx b/public/app/features/plugins/sql/components/QueryHeader.tsx
index 48fce15170f..eab9bf3a517 100644
--- a/public/app/features/plugins/sql/components/QueryHeader.tsx
+++ b/public/app/features/plugins/sql/components/QueryHeader.tsx
@@ -2,20 +2,8 @@ import React, { useCallback, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 
 import { SelectableValue } from '@grafana/data';
-import {
-  Button,
-  EditorField,
-  EditorHeader,
-  EditorRow,
-  FlexItem,
-  InlineField,
-  InlineSelect,
-  InlineSwitch,
-  RadioButtonGroup,
-  Select,
-  Space,
-  Tooltip,
-} from '@grafana/ui';
+import { EditorField, EditorHeader, EditorRow, FlexItem, InlineSelect, Space } from '@grafana/experimental';
+import { Button, InlineField, InlineSwitch, RadioButtonGroup, Select, Tooltip } from '@grafana/ui';
 
 import { QueryWithDefaults } from '../defaults';
 import { SQLQuery, QueryFormat, QueryRowFilter, QUERY_FORMAT_OPTIONS, DB, EditorMode } from '../types';
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/GroupByRow.tsx b/public/app/features/plugins/sql/components/visual-query-builder/GroupByRow.tsx
index 72cef797eaf..7c91147f724 100644
--- a/public/app/features/plugins/sql/components/visual-query-builder/GroupByRow.tsx
+++ b/public/app/features/plugins/sql/components/visual-query-builder/GroupByRow.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, EditorList, InputGroup, Select } from '@grafana/ui';
+import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 
 import { QueryEditorGroupByExpression } from '../../expressions';
 import { SQLExpression } from '../../types';
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/OrderByRow.tsx b/public/app/features/plugins/sql/components/visual-query-builder/OrderByRow.tsx
index beb8950a211..58c8ce3158a 100644
--- a/public/app/features/plugins/sql/components/visual-query-builder/OrderByRow.tsx
+++ b/public/app/features/plugins/sql/components/visual-query-builder/OrderByRow.tsx
@@ -2,7 +2,8 @@ import { uniqueId } from 'lodash';
 import React, { useCallback } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { EditorField, Input, InputGroup, RadioButtonGroup, Select, Space } from '@grafana/ui';
+import { EditorField, InputGroup, Space } from '@grafana/experimental';
+import { Input, RadioButtonGroup, Select } from '@grafana/ui';
 
 import { SQLExpression } from '../../types';
 import { setPropertyField } from '../../utils/sql.utils';
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/SelectRow.tsx b/public/app/features/plugins/sql/components/visual-query-builder/SelectRow.tsx
index 3211a9ef912..b11c7e5b357 100644
--- a/public/app/features/plugins/sql/components/visual-query-builder/SelectRow.tsx
+++ b/public/app/features/plugins/sql/components/visual-query-builder/SelectRow.tsx
@@ -3,7 +3,8 @@ import { uniqueId } from 'lodash';
 import React, { useCallback } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { Button, EditorField, Select, Stack, useStyles2 } from '@grafana/ui';
+import { EditorField, Stack } from '@grafana/experimental';
+import { Button, Select, useStyles2 } from '@grafana/ui';
 
 import { QueryEditorExpressionType, QueryEditorFunctionExpression } from '../../expressions';
 import { SQLExpression } from '../../types';
diff --git a/public/app/features/plugins/sql/components/visual-query-builder/VisualEditor.tsx b/public/app/features/plugins/sql/components/visual-query-builder/VisualEditor.tsx
index 8985836a0b0..2329e64b60e 100644
--- a/public/app/features/plugins/sql/components/visual-query-builder/VisualEditor.tsx
+++ b/public/app/features/plugins/sql/components/visual-query-builder/VisualEditor.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useAsync } from 'react-use';
 
-import { EditorRows, EditorRow, EditorField } from '@grafana/ui';
+import { EditorRows, EditorRow, EditorField } from '@grafana/experimental';
 
 import { DB, QueryEditorProps, QueryRowFilter } from '../../types';
 import { QueryToolbox } from '../query-editor-raw/QueryToolbox';
diff --git a/public/app/features/scenes/SceneListPage.tsx b/public/app/features/scenes/SceneListPage.tsx
index b3e94c0bc5d..2cf1e6ad489 100644
--- a/public/app/features/scenes/SceneListPage.tsx
+++ b/public/app/features/scenes/SceneListPage.tsx
@@ -1,7 +1,8 @@
 // Libraries
 import React, { FC } from 'react';
 
-import { Card, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Card } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 
 // Types
diff --git a/public/app/features/scenes/components/NestedScene.tsx b/public/app/features/scenes/components/NestedScene.tsx
index 4e2a87e51d1..a6b027bce03 100644
--- a/public/app/features/scenes/components/NestedScene.tsx
+++ b/public/app/features/scenes/components/NestedScene.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Button, Stack, ToolbarButton, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Button, ToolbarButton, useStyles2 } from '@grafana/ui';
 
 import { SceneObjectBase } from '../core/SceneObjectBase';
 import { SceneObject, SceneLayoutChildState, SceneComponentProps, SceneLayout } from '../core/types';
diff --git a/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx b/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
index 940f8d1501a..7a131b5dfcb 100644
--- a/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
@@ -11,7 +11,8 @@ import {
   LabelsToFieldsMode,
   LabelsToFieldsOptions,
 } from '@grafana/data/src/transformations/transformers/labelsToFields';
-import { InlineField, InlineFieldRow, RadioButtonGroup, Select, FilterPill, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { InlineField, InlineFieldRow, RadioButtonGroup, Select, FilterPill } from '@grafana/ui';
 
 const modes: Array<SelectableValue<LabelsToFieldsMode>> = [
   { value: LabelsToFieldsMode.Columns, label: 'Columns' },
diff --git a/public/app/features/variables/editor/VariableEditorList.tsx b/public/app/features/variables/editor/VariableEditorList.tsx
index ef3b8ff2d42..5f57c997398 100644
--- a/public/app/features/variables/editor/VariableEditorList.tsx
+++ b/public/app/features/variables/editor/VariableEditorList.tsx
@@ -2,8 +2,9 @@ import React, { ReactElement } from 'react';
 import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 
 import { selectors } from '@grafana/e2e-selectors';
+import { Stack } from '@grafana/experimental';
 import { reportInteraction } from '@grafana/runtime';
-import { Button, Stack } from '@grafana/ui';
+import { Button } from '@grafana/ui';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 
 import { VariablesDependenciesButton } from '../inspect/VariablesDependenciesButton';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx
index cdf34ecafe2..6f403bd09ce 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx
@@ -1,7 +1,8 @@
 import React, { FC, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, Select } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 
 import { getAggregationOptionsByMetric } from '../functions';
 import { MetricDescriptor, MetricKind, ValueTypes } from '../types';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/AliasBy.tsx b/public/app/plugins/datasource/cloud-monitoring/components/AliasBy.tsx
index 38ac1c8a848..a12d50abf3b 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/AliasBy.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/AliasBy.tsx
@@ -1,7 +1,8 @@
 import { debounce } from 'lodash';
 import React, { FunctionComponent, useState } from 'react';
 
-import { EditorField, Input } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { Input } from '@grafana/ui';
 
 export interface Props {
   refId: string;
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Alignment.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Alignment.tsx
index e6634c60c23..37694a33773 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Alignment.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Alignment.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorFieldGroup } from '@grafana/ui';
+import { EditorField, EditorFieldGroup } from '@grafana/experimental';
 
 import { ALIGNMENT_PERIODS } from '../constants';
 import CloudMonitoringDatasource from '../datasource';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx
index 08d70b5c06d..c868129ebda 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx
@@ -2,7 +2,8 @@ import React, { useState } from 'react';
 import { useDebounce } from 'react-use';
 
 import { QueryEditorProps, toOption } from '@grafana/data';
-import { EditorField, EditorRows, Input } from '@grafana/ui';
+import { EditorField, EditorRows } from '@grafana/experimental';
+import { Input } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../datasource';
 import {
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx b/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx
index cdd9e2c6c3d..ff24f498bc2 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx
@@ -1,7 +1,8 @@
 import React, { FunctionComponent } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorRow, HorizontalGroup, Switch } from '@grafana/ui';
+import { EditorField, EditorRow } from '@grafana/experimental';
+import { HorizontalGroup, Switch } from '@grafana/ui';
 
 import { GRAPH_PERIODS } from '../constants';
 
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx b/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx
index 0fcb97cde9c..dbd642d9999 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx
@@ -1,7 +1,8 @@
 import React, { FunctionComponent, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorFieldGroup, MultiSelect } from '@grafana/ui';
+import { EditorField, EditorFieldGroup } from '@grafana/experimental';
+import { MultiSelect } from '@grafana/ui';
 
 import { SYSTEM_LABELS } from '../constants';
 import { labelsToGroupedOptions } from '../functions';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx b/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx
index d949b63da65..7298534bbaf 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/LabelFilter.tsx
@@ -1,7 +1,8 @@
 import React, { FunctionComponent, useMemo } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, EditorField, EditorList, EditorRow, HorizontalGroup, Select } from '@grafana/ui';
+import { AccessoryButton, EditorField, EditorList, EditorRow } from '@grafana/experimental';
+import { HorizontalGroup, Select } from '@grafana/ui';
 
 import { labelsToGroupedOptions, stringArrayToFilters } from '../functions';
 
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/LookbackPeriodSelect.tsx b/public/app/plugins/datasource/cloud-monitoring/components/LookbackPeriodSelect.tsx
index 3c4791dbbbb..fcdfaaf2f07 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/LookbackPeriodSelect.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/LookbackPeriodSelect.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, Select } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 
 import { LOOKBACK_PERIODS } from '../constants';
 
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
index e0948666e04..c02f07dd439 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorRows } from '@grafana/ui';
+import { EditorRows } from '@grafana/experimental';
 
 import CloudMonitoringDatasource from '../datasource';
 import { getAlignmentPickerData } from '../functions';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx
index da08b85e141..6da64a511a1 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Metrics.tsx
@@ -3,7 +3,8 @@ import { startCase, uniqBy } from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { EditorField, EditorFieldGroup, EditorRow, getSelectStyles, Select, useStyles2, useTheme2 } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental';
+import { getSelectStyles, Select, useStyles2, useTheme2 } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../datasource';
 import { MetricDescriptor, MetricQuery } from '../types';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.tsx
index c779d9b1061..526ca98658f 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Preprocessor.tsx
@@ -1,7 +1,8 @@
 import React, { FunctionComponent, useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, RadioButtonGroup } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { RadioButtonGroup } from '@grafana/ui';
 
 import { getAlignmentPickerData } from '../functions';
 import { MetricDescriptor, MetricKind, MetricQuery, PreprocessorType, ValueTypes } from '../types';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Project.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Project.tsx
index 172cd7d9089..59f8038c6df 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Project.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Project.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, Select } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../datasource';
 
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
index c97f14ca1fc..3df829e58d7 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 
 import { QueryEditorProps, toOption } from '@grafana/data';
-import { EditorRows } from '@grafana/ui';
+import { EditorRows } from '@grafana/experimental';
 
 import CloudMonitoringDatasource from '../datasource';
 import { CloudMonitoringQuery, MetricQuery, QueryType, SLOQuery, CloudMonitoringOptions } from '../types';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/QueryHeader.tsx b/public/app/plugins/datasource/cloud-monitoring/components/QueryHeader.tsx
index ede335508bf..86eea6a3e35 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/QueryHeader.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/QueryHeader.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { EditorHeader, FlexItem, InlineSelect, RadioButtonGroup } from '@grafana/ui';
+import { EditorHeader, FlexItem, InlineSelect } from '@grafana/experimental';
+import { RadioButtonGroup } from '@grafana/ui';
 
 import { QUERY_TYPES } from '../constants';
 import { EditorMode, CloudMonitoringQuery, QueryType, SLOQuery, MetricQuery } from '../types';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/SLO.tsx b/public/app/plugins/datasource/cloud-monitoring/components/SLO.tsx
index 3ed05864c91..5ad2bb73e2b 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/SLO.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/SLO.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { Select, EditorField } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../datasource';
 import { SLOQuery } from '../types';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/SLOQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/SLOQueryEditor.tsx
index 7bd8bee4cf3..bb863416287 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/SLOQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/SLOQueryEditor.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental';
 
 import { ALIGNMENT_PERIODS, SLO_BURN_RATE_SELECTOR_NAME } from '../constants';
 import CloudMonitoringDatasource from '../datasource';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Selector.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Selector.tsx
index 66104222e3f..cc93f3a5780 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Selector.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Selector.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, Select } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 
 import { SELECTORS } from '../constants';
 import CloudMonitoringDatasource from '../datasource';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Service.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Service.tsx
index 963adea22a5..7ce23574920 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Service.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Service.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, Select } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 
 import CloudMonitoringDatasource from '../datasource';
 import { SLOQuery } from '../types';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx
index a42f6638696..318b51a37a4 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorRow } from '@grafana/ui';
+import { EditorRow } from '@grafana/experimental';
 
 import CloudMonitoringDatasource from '../datasource';
 import { CustomMetaData, MetricDescriptor, MetricQuery, SLOQuery } from '../types';
diff --git a/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx
index 6c0bfb7ae6b..6d52f7d2728 100644
--- a/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx
@@ -1,7 +1,8 @@
 import React, { ChangeEvent } from 'react';
 
 import { QueryEditorProps } from '@grafana/data';
-import { Alert, EditorField, EditorHeader, EditorRow, EditorSwitch, InlineSelect, Input, Space } from '@grafana/ui';
+import { EditorField, EditorHeader, EditorRow, EditorSwitch, InlineSelect, Space } from '@grafana/experimental';
+import { Alert, Input } from '@grafana/ui';
 
 import { CloudWatchDatasource } from '../datasource';
 import { isCloudWatchAnnotationQuery } from '../guards';
diff --git a/public/app/plugins/datasource/cloudwatch/components/Dimensions/Dimensions.tsx b/public/app/plugins/datasource/cloudwatch/components/Dimensions/Dimensions.tsx
index 8ee4e503532..4dc13d44744 100644
--- a/public/app/plugins/datasource/cloudwatch/components/Dimensions/Dimensions.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/Dimensions/Dimensions.tsx
@@ -2,7 +2,7 @@ import { isEqual } from 'lodash';
 import React, { useMemo, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorList } from '@grafana/ui';
+import { EditorList } from '@grafana/experimental';
 
 import { CloudWatchDatasource } from '../../datasource';
 import { Dimensions as DimensionsType, MetricStat } from '../../types';
diff --git a/public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx b/public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx
index 6906b730933..9e1a0c11df6 100644
--- a/public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/Dimensions/FilterItem.tsx
@@ -3,7 +3,8 @@ import React, { FunctionComponent, useMemo } from 'react';
 import { useAsyncFn } from 'react-use';
 
 import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, InputGroup, Select, stylesFactory, useTheme2 } from '@grafana/ui';
+import { AccessoryButton, InputGroup } from '@grafana/experimental';
+import { Select, stylesFactory, useTheme2 } from '@grafana/ui';
 
 import { CloudWatchDatasource } from '../../datasource';
 import { Dimensions, MetricStat } from '../../types';
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
index b619282aa99..0e11495ff27 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorField, EditorFieldGroup, EditorRow, EditorRows, EditorSwitch, Select } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorRow, EditorRows, EditorSwitch } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 
 import { Dimensions } from '..';
 import { CloudWatchDatasource } from '../../datasource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx
index d2e3e7b8310..7b8b1e39149 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryEditor.tsx
@@ -1,8 +1,9 @@
 import React, { ChangeEvent, useState } from 'react';
 
 import { QueryEditorProps } from '@grafana/data';
+import { EditorField, EditorRow, Space } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { EditorField, EditorRow, Input, Space } from '@grafana/ui';
+import { Input } from '@grafana/ui';
 
 import { MathExpressionQueryField, MetricStatEditor, SQLBuilderEditor, SQLCodeEditor } from '../';
 import { CloudWatchDatasource } from '../../datasource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.tsx
index 653ba5a9571..020f7cd505f 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor/MetricsQueryHeader.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { Button, ConfirmModal, FlexItem, InlineSelect, RadioButtonGroup } from '@grafana/ui';
+import { FlexItem, InlineSelect } from '@grafana/experimental';
+import { Button, ConfirmModal, RadioButtonGroup } from '@grafana/ui';
 
 import { CloudWatchDatasource } from '../../datasource';
 import { CloudWatchMetricsQuery, CloudWatchQuery, MetricEditorMode, MetricQueryType } from '../../types';
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx
index ee36de2799e..e8bccd0231b 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx
@@ -2,7 +2,7 @@ import { pick } from 'lodash';
 import React from 'react';
 
 import { SelectableValue, ExploreMode } from '@grafana/data';
-import { EditorHeader, InlineSelect } from '@grafana/ui';
+import { EditorHeader, InlineSelect } from '@grafana/experimental';
 
 import { CloudWatchDatasource } from '../datasource';
 import { useRegions } from '../hooks';
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx
index a838df4b147..174fdbb5a6c 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { EditorField, EditorRow, EditorRows, Input } from '@grafana/ui';
+import { EditorField, EditorRow, EditorRows } from '@grafana/experimental';
+import { Input } from '@grafana/ui';
 
 import SQLGenerator from '../../cloudwatch-sql/SQLGenerator';
 import { CloudWatchDatasource } from '../../datasource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
index b6b3ecabdeb..180683169c2 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useMemo } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { EditorField, EditorFieldGroup, EditorSwitch, Select } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorSwitch } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 
 import { STATISTICS } from '../../cloudwatch-sql/language';
 import { CloudWatchDatasource } from '../../datasource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx
index 376151e92eb..a9b0b04baea 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx
@@ -2,7 +2,8 @@ import React, { useMemo, useState } from 'react';
 import { useAsyncFn } from 'react-use';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, EditorList, InputGroup, Select } from '@grafana/ui';
+import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 
 import { COMPARISON_OPERATORS, EQUALS } from '../../cloudwatch-sql/language';
 import { CloudWatchDatasource } from '../../datasource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx
index 93df84f74aa..1fdda2a5ff4 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx
@@ -1,7 +1,8 @@
 import React, { useMemo, useState } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, EditorList, InputGroup, Select } from '@grafana/ui';
+import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 
 import { CloudWatchDatasource } from '../../datasource';
 import { QueryEditorExpressionType, QueryEditorGroupByExpression, QueryEditorPropertyType } from '../../expressions';
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
index f92c6593b14..0a590e72a32 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { AccessoryButton, EditorField, EditorFieldGroup, InputGroup, Select } from '@grafana/ui';
+import { AccessoryButton, EditorField, EditorFieldGroup, InputGroup } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 
 import { ASC, DESC, STATISTICS } from '../../cloudwatch-sql/language';
 import { CloudWatchDatasource } from '../../datasource';
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx
index 3cf327d0dab..863c6e56ea0 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx
@@ -1,7 +1,7 @@
 import { isEqual } from 'lodash';
 import React, { useEffect, useState } from 'react';
 
-import { EditorList } from '@grafana/ui';
+import { EditorList } from '@grafana/experimental';
 
 import { MultiFilters } from '../../types';
 
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
index 905f7dfa9bf..a4ccf64492c 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
@@ -2,7 +2,8 @@ import { css, cx } from '@emotion/css';
 import React, { FunctionComponent, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { AccessoryButton, Input, InputGroup, stylesFactory, useTheme2 } from '@grafana/ui';
+import { AccessoryButton, InputGroup } from '@grafana/experimental';
+import { Input, stylesFactory, useTheme2 } from '@grafana/ui';
 
 import { MultiFilterCondition } from './MultiFilter';
 
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx
index a51893133bf..60d12b10cf4 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { AnnotationQuery } from '@grafana/data';
-import { EditorField, EditorRow, Input } from '@grafana/ui';
+import { EditorField, EditorRow } from '@grafana/experimental';
+import { Input } from '@grafana/ui';
 
 import { ElasticsearchQuery } from '../../types';
 
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ArgQueryEditor/ArgQueryEditor.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ArgQueryEditor/ArgQueryEditor.tsx
index 060c3356f0c..780e0de3753 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ArgQueryEditor/ArgQueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ArgQueryEditor/ArgQueryEditor.tsx
@@ -1,7 +1,7 @@
 import { intersection } from 'lodash';
 import React, { useState, useMemo } from 'react';
 
-import { EditorFieldGroup, EditorRow, EditorRows } from '@grafana/ui';
+import { EditorFieldGroup, EditorRow, EditorRows } from '@grafana/experimental';
 
 import Datasource from '../../datasource';
 import { AzureMonitorErrorish, AzureMonitorOption, AzureMonitorQuery } from '../../types';
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/Field.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/Field.tsx
index 2b8d73b4d72..b139b377686 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/Field.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/Field.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { EditorField, InlineField } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { InlineField } from '@grafana/ui';
 import { Props as InlineFieldProps } from '@grafana/ui/src/components/Forms/InlineField';
 
 interface Props extends InlineFieldProps {
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/LogsQueryEditor.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/LogsQueryEditor.tsx
index 6659b927bd7..e924cce236b 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/LogsQueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/LogsQueryEditor.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Alert, EditorFieldGroup, EditorRow, EditorRows } from '@grafana/ui';
+import { EditorFieldGroup, EditorRow, EditorRows } from '@grafana/experimental';
+import { Alert } from '@grafana/ui';
 
 import Datasource from '../../datasource';
 import { AzureMonitorErrorish, AzureMonitorOption, AzureMonitorQuery } from '../../types';
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/DimensionFields.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/DimensionFields.tsx
index d6671b53e21..33765f4173a 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/DimensionFields.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/DimensionFields.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { SelectableValue, DataFrame, PanelData, Labels } from '@grafana/data';
-import { Select, HorizontalGroup, MultiSelect, EditorList, AccessoryButton } from '@grafana/ui';
+import { EditorList, AccessoryButton } from '@grafana/experimental';
+import { Select, HorizontalGroup, MultiSelect } from '@grafana/ui';
 
 import { AzureMetricDimension, AzureMonitorOption, AzureMonitorQuery, AzureQueryEditorFieldProps } from '../../types';
 import { Field } from '../Field';
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.tsx
index 6d60a68ac26..b9e8251f358 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/MetricsQueryEditor.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { PanelData } from '@grafana/data/src/types';
-import { EditorRows, EditorRow, EditorFieldGroup } from '@grafana/ui';
+import { EditorRows, EditorRow, EditorFieldGroup } from '@grafana/experimental';
 
 import type Datasource from '../../datasource';
 import type { AzureMonitorQuery, AzureMonitorOption, AzureMonitorErrorish, AzureMetricResource } from '../../types';
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryHeader.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryHeader.tsx
index e232561e14b..843095e2103 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryHeader.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryHeader.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorHeader, InlineSelect } from '@grafana/ui';
+import { EditorHeader, InlineSelect } from '@grafana/experimental';
 
 import { AzureMonitorQuery, AzureQueryType } from '../types';
 
diff --git a/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx b/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx
index 17bfd1a685e..fa9f0e39511 100644
--- a/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx
+++ b/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx
@@ -2,7 +2,8 @@
 import React, { memo } from 'react';
 
 import { AnnotationQuery } from '@grafana/data';
-import { EditorField, EditorRow, Input } from '@grafana/ui';
+import { EditorField, EditorRow } from '@grafana/experimental';
+import { Input } from '@grafana/ui';
 
 // Types
 import { getNormalizedLokiQuery } from '../queryUtils';
diff --git a/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx b/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx
index b60a412d391..5002328ce3f 100644
--- a/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx
@@ -2,8 +2,9 @@ import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react';
 
 import { CoreApp, LoadingState } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { EditorHeader, EditorRows, FlexItem, Space } from '@grafana/experimental';
 import { reportInteraction } from '@grafana/runtime';
-import { Button, ConfirmModal, EditorHeader, EditorRows, FlexItem, Space } from '@grafana/ui';
+import { Button, ConfirmModal } from '@grafana/ui';
 import { QueryEditorModeToggle } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryEditorModeToggle';
 import { QueryHeaderSwitch } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch';
 import { QueryEditorMode } from 'app/plugins/datasource/prometheus/querybuilder/shared/types';
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx
index 9ad7b8f43c8..7fa74deefaa 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { DataSourceApi, getDefaultTimeRange, LoadingState, PanelData, SelectableValue } from '@grafana/data';
-import { EditorRow } from '@grafana/ui';
+import { EditorRow } from '@grafana/experimental';
 import { LabelFilters } from 'app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters';
 import { OperationExplainedBox } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox';
 import { OperationList } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationList';
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderExplained.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderExplained.tsx
index ab5ee6552be..0333c07ec59 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderExplained.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderExplained.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
 import { OperationExplainedBox } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationExplainedBox';
 import { OperationListExplained } from 'app/plugins/datasource/prometheus/querybuilder/shared/OperationListExplained';
 import { RawQuery } from 'app/plugins/datasource/prometheus/querybuilder/shared/RawQuery';
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
index 21311f9ad07..7e6e46596b5 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 
 import { CoreApp, SelectableValue } from '@grafana/data';
+import { EditorField, EditorRow } from '@grafana/experimental';
 import { reportInteraction } from '@grafana/runtime';
-import { RadioButtonGroup, Select, AutoSizeInput, EditorField, EditorRow } from '@grafana/ui';
+import { RadioButtonGroup, Select, AutoSizeInput } from '@grafana/ui';
 import { QueryOptionGroup } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryOptionGroup';
 
 import { preprocessMaxLines, queryTypeOptions, RESOLUTION_OPTIONS } from '../../components/LokiOptionFields';
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/NestedQuery.tsx b/public/app/plugins/datasource/loki/querybuilder/components/NestedQuery.tsx
index 569332f62a7..fa7c54a532c 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/NestedQuery.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/NestedQuery.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2, toOption } from '@grafana/data';
-import { AutoSizeInput, EditorRows, FlexItem, IconButton, Select, useStyles2 } from '@grafana/ui';
+import { EditorRows, FlexItem } from '@grafana/experimental';
+import { AutoSizeInput, IconButton, Select, useStyles2 } from '@grafana/ui';
 
 import { LokiDatasource } from '../../datasource';
 import { binaryScalarDefs } from '../binaryScalarOperations';
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/NestedQueryList.tsx b/public/app/plugins/datasource/loki/querybuilder/components/NestedQueryList.tsx
index 4bf7af82923..cf71dd0b69c 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/NestedQueryList.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/NestedQueryList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
 
 import { LokiDatasource } from '../../datasource';
 import { LokiVisualQuery, LokiVisualQueryBinary } from '../types';
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/QueryPreview.tsx b/public/app/plugins/datasource/loki/querybuilder/components/QueryPreview.tsx
index c219b5dcc10..fac87a30563 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/QueryPreview.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/QueryPreview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { EditorRow, EditorFieldGroup, EditorField } from '@grafana/ui';
+import { EditorRow, EditorFieldGroup, EditorField } from '@grafana/experimental';
 
 import { RawQuery } from '../../../prometheus/querybuilder/shared/RawQuery';
 import { lokiGrammar } from '../../syntax';
diff --git a/public/app/plugins/datasource/mssql/sqlCompletionProvider.ts b/public/app/plugins/datasource/mssql/sqlCompletionProvider.ts
index 5b2ab94a0d8..00f1ae63b44 100644
--- a/public/app/plugins/datasource/mssql/sqlCompletionProvider.ts
+++ b/public/app/plugins/datasource/mssql/sqlCompletionProvider.ts
@@ -1,3 +1,4 @@
+import { TableIdentifier } from '@grafana/experimental';
 import { AGGREGATE_FNS, OPERATORS } from 'app/features/plugins/sql/constants';
 import {
   ColumnDefinition,
@@ -35,13 +36,17 @@ export const getSqlCompletionProvider: (args: CompletionProviderGetterArgs) => L
           processedToken = processedToken.next;
         }
 
-        return tablePath;
+        return { table: tablePath };
       },
     },
 
     columns: {
-      resolve: async (t: string) => {
-        const [database, schema, tableName] = t.split('.');
+      resolve: async (t: TableIdentifier | undefined) => {
+        if (!t?.table) {
+          return [];
+        }
+        // TODO: Use schema instead of table
+        const [database, schema, tableName] = t.table.split('.');
         return await getColumns.current({ table: `${schema}.${tableName}`, dataset: database, refId: 'A' });
       },
     },
diff --git a/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx
index b5db9022ab8..ad2e1e90114 100644
--- a/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/components/AnnotationQueryEditor.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { AnnotationQuery } from '@grafana/data';
-import { AutoSizeInput, EditorField, EditorRow, EditorRows, EditorSwitch, Input, Space } from '@grafana/ui';
+import { EditorField, EditorRow, EditorRows, EditorSwitch, Space } from '@grafana/experimental';
+import { AutoSizeInput, Input } from '@grafana/ui';
 
 import { PromQueryCodeEditor } from '../querybuilder/components/PromQueryCodeEditor';
 import { PromQuery } from '../types';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
index 5b48d9389d1..f836ad70a43 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
@@ -3,7 +3,8 @@ import React, { useCallback, useState } from 'react';
 import Highlighter from 'react-highlight-words';
 
 import { SelectableValue, toOption, GrafanaTheme2 } from '@grafana/data';
-import { Select, FormatOptionLabelMeta, useStyles2, EditorField, EditorFieldGroup } from '@grafana/ui';
+import { EditorField, EditorFieldGroup } from '@grafana/experimental';
+import { Select, FormatOptionLabelMeta, useStyles2 } from '@grafana/ui';
 
 import { PromVisualQuery } from '../types';
 
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQuery.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQuery.tsx
index 1d10e64ea4e..f9be626d4ad 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQuery.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQuery.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2, toOption } from '@grafana/data';
-import { AutoSizeInput, EditorRows, FlexItem, IconButton, Select, useStyles2 } from '@grafana/ui';
+import { EditorRows, FlexItem } from '@grafana/experimental';
+import { AutoSizeInput, IconButton, Select, useStyles2 } from '@grafana/ui';
 
 import { PrometheusDatasource } from '../../datasource';
 import { binaryScalarDefs } from '../binaryScalarOperations';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQueryList.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQueryList.tsx
index 0dfb5ed75c4..297a72b8501 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQueryList.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQueryList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
 
 import { PrometheusDatasource } from '../../datasource';
 import { PromVisualQuery, PromVisualQueryBinary } from '../types';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx
index 52a8ef0be25..7dd5d4bc3a1 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 
 import { DataSourceApi, PanelData, SelectableValue } from '@grafana/data';
-import { EditorRow } from '@grafana/ui';
+import { EditorRow } from '@grafana/experimental';
 
 import { PrometheusDatasource } from '../../datasource';
 import { getMetadataString } from '../../language_provider';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderExplained.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderExplained.tsx
index c15fbc03505..038e4e8cbd3 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderExplained.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderExplained.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
 
 import promqlGrammar from '../../promql';
 import { promQueryModeller } from '../PromQueryModeller';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
index f97dc32069d..4a846cff03c 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
@@ -1,7 +1,8 @@
 import React, { SyntheticEvent } from 'react';
 
 import { CoreApp, SelectableValue } from '@grafana/data';
-import { AutoSizeInput, EditorField, EditorRow, EditorSwitch, RadioButtonGroup, Select } from '@grafana/ui';
+import { EditorField, EditorRow, EditorSwitch } from '@grafana/experimental';
+import { AutoSizeInput, RadioButtonGroup, Select } from '@grafana/ui';
 
 import { getQueryTypeChangeHandler, getQueryTypeOptions } from '../../components/PromExploreExtraField';
 import { FORMAT_OPTIONS, INTERVAL_FACTOR_OPTIONS } from '../../components/PromQueryEditor';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
index d989645e93d..1ae2582be86 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx
@@ -1,8 +1,9 @@
 import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react';
 
 import { CoreApp, LoadingState } from '@grafana/data';
+import { EditorHeader, EditorRows, FlexItem, InlineSelect, Space } from '@grafana/experimental';
 import { reportInteraction } from '@grafana/runtime';
-import { Button, ConfirmModal, EditorHeader, EditorRows, FlexItem, InlineSelect, Space } from '@grafana/ui';
+import { ConfirmModal, Button } from '@grafana/ui';
 
 import { PromQueryEditorProps } from '../../components/types';
 import { PromQuery } from '../../types';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryLegendEditor.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryLegendEditor.tsx
index 0bf9c8c1707..bb1503b0d9d 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryLegendEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryLegendEditor.tsx
@@ -1,7 +1,8 @@
 import React, { useRef } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { Select, AutoSizeInput, EditorField } from '@grafana/ui';
+import { EditorField } from '@grafana/experimental';
+import { Select, AutoSizeInput } from '@grafana/ui';
 
 import { LegendFormatMode } from '../../types';
 
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/QueryPreview.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/QueryPreview.tsx
index 1f531206212..888e4a38adb 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/QueryPreview.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/QueryPreview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { EditorRow, EditorFieldGroup, EditorField } from '@grafana/ui';
+import { EditorRow, EditorFieldGroup, EditorField } from '@grafana/experimental';
 
 import promqlGrammar from '../../promql';
 import { RawQuery } from '../shared/RawQuery';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/FeedbackLink.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/FeedbackLink.tsx
index 1c909b0812d..ef0b03a76a0 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/FeedbackLink.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/FeedbackLink.tsx
@@ -2,8 +2,9 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { Stack } from '@grafana/experimental';
 import { config, reportInteraction } from '@grafana/runtime';
-import { Icon, Stack, useStyles2 } from '@grafana/ui';
+import { Icon, useStyles2 } from '@grafana/ui';
 
 export interface Props {
   feedbackUrl?: string;
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx
index 9141ff665f9..28ffec9c8dd 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx
@@ -3,7 +3,8 @@ import React, { useState } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { AccessoryButton, InputGroup, Select } from '@grafana/ui';
+import { AccessoryButton, InputGroup } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 
 import { QueryBuilderLabelFilter } from './types';
 
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.tsx
index 6f5daf76c56..a198723647f 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilters.tsx
@@ -2,7 +2,7 @@ import { isEqual } from 'lodash';
 import React, { useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { EditorFieldGroup, EditorField, EditorList } from '@grafana/ui';
+import { EditorFieldGroup, EditorField, EditorList } from '@grafana/experimental';
 
 import { QueryBuilderLabelFilter } from '../shared/types';
 
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
index e10c9164bf4..4256a0e4bfc 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
@@ -3,7 +3,8 @@ import React, { useEffect, useState } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 
 import { DataSourceApi, GrafanaTheme2 } from '@grafana/data';
-import { Button, Icon, Stack, Tooltip, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Button, Icon, Tooltip, useStyles2 } from '@grafana/ui';
 
 import { OperationHeader } from './OperationHeader';
 import { getOperationParamEditor } from './OperationParamEditor';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationHeader.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationHeader.tsx
index 66cc6e692f7..f6acf54caae 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationHeader.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationHeader.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React, { useState } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Button, Select, useStyles2, FlexItem } from '@grafana/ui';
+import { FlexItem } from '@grafana/experimental';
+import { Button, Select, useStyles2 } from '@grafana/ui';
 
 import { OperationInfoButton } from './OperationInfoButton';
 import { VisualQueryModeller, QueryBuilderOperation, QueryBuilderOperationDef } from './types';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationInfoButton.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationInfoButton.tsx
index f5028a03977..20e21009d08 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationInfoButton.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationInfoButton.tsx
@@ -3,7 +3,8 @@ import React, { useState } from 'react';
 import { usePopperTooltip } from 'react-popper-tooltip';
 
 import { GrafanaTheme2, renderMarkdown } from '@grafana/data';
-import { Button, Portal, useStyles2, FlexItem } from '@grafana/ui';
+import { FlexItem } from '@grafana/experimental';
+import { Button, Portal, useStyles2 } from '@grafana/ui';
 
 import { QueryBuilderOperation, QueryBuilderOperationDef } from './types';
 
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationList.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationList.tsx
index ed0c990ecf8..2bec1adbebe 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationList.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationList.tsx
@@ -4,7 +4,8 @@ import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 import { useMountedState, usePrevious } from 'react-use';
 
 import { DataSourceApi, GrafanaTheme2 } from '@grafana/data';
-import { Button, Cascader, CascaderOption, Stack, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Button, Cascader, CascaderOption, useStyles2 } from '@grafana/ui';
 
 import { OperationEditor } from './OperationEditor';
 import { QueryBuilderOperation, QueryWithOperations, VisualQueryModeller } from './types';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx
index dbd608228b5..7f5eb8e60b4 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React, { ComponentType } from 'react';
 
 import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';
-import { AutoSizeInput, Button, Checkbox, Select, Stack, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { AutoSizeInput, Button, Checkbox, Select, useStyles2 } from '@grafana/ui';
 
 import { QueryBuilderOperationParamDef, QueryBuilderOperationParamEditorProps } from '../shared/types';
 
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationsEditorRow.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationsEditorRow.tsx
index 4b4267f562d..6800e86f726 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationsEditorRow.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationsEditorRow.tsx
@@ -2,7 +2,8 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2, Stack } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { useStyles2 } from '@grafana/ui';
 
 interface Props {
   children: React.ReactNode;
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch.tsx
index 168a505e86f..8e591e27c6c 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch.tsx
@@ -3,7 +3,8 @@ import { uniqueId } from 'lodash';
 import React, { HTMLProps, useRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Switch, Stack, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Switch, useStyles2 } from '@grafana/ui';
 
 export interface Props extends Omit<HTMLProps<HTMLInputElement>, 'value' | 'ref'> {
   value?: boolean;
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryOptionGroup.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryOptionGroup.tsx
index fabf208b432..d3dc219ecd8 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryOptionGroup.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/QueryOptionGroup.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 import { useToggle } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Icon, Stack, useStyles2 } from '@grafana/ui';
+import { Stack } from '@grafana/experimental';
+import { Icon, useStyles2 } from '@grafana/ui';
 
 export interface Props {
   title: string;
diff --git a/public/app/plugins/datasource/tempo/traceql/TempoQueryBuilderOptions.tsx b/public/app/plugins/datasource/tempo/traceql/TempoQueryBuilderOptions.tsx
index d68741402b2..bf54c17b7f1 100644
--- a/public/app/plugins/datasource/tempo/traceql/TempoQueryBuilderOptions.tsx
+++ b/public/app/plugins/datasource/tempo/traceql/TempoQueryBuilderOptions.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { AutoSizeInput, EditorField, EditorRow } from '@grafana/ui';
+import { EditorField, EditorRow } from '@grafana/experimental';
+import { AutoSizeInput } from '@grafana/ui';
 import { QueryOptionGroup } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryOptionGroup';
 
 import { DEFAULT_LIMIT } from '../datasource';
diff --git a/yarn.lock b/yarn.lock
index 41a281f4ae9..a26d90121bc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5361,17 +5361,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@grafana/experimental@npm:^0.0.2-canary.36":
-  version: 0.0.2-canary.36
-  resolution: "@grafana/experimental@npm:0.0.2-canary.36"
+"@grafana/experimental@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@grafana/experimental@npm:1.0.1"
   dependencies:
     "@types/uuid": ^8.3.3
     uuid: ^8.3.2
   peerDependencies:
     "@emotion/css": 11.1.3
-    react: 17.0.1
-    react-select: 5.2.1
-  checksum: 2aea6c2cbed323f7212c82df1b529897296c5c2938345dc0e7866cc4576c763f731f4f89803e6344ec7a3eb3940e0e8bdc4a01739b67833a5513913434130aba
+    "@grafana/data": ^9.2.0
+    "@grafana/runtime": ^9.2.0
+    "@grafana/ui": ^9.2.0
+    react: 17.0.2
+    react-dom: 17.0.2
+    react-select: ^5.2.1
+  checksum: 126042201975927516248c182045c130fbad069c353846810490729cad0db0062dd98d58cfadc0134e9fc0236ba8ce76b2db2ac25ca98b164cb3ca7205f2c39f
   languageName: node
   linkType: hard
 
@@ -23211,7 +23215,7 @@ __metadata:
     "@grafana/e2e": "workspace:*"
     "@grafana/e2e-selectors": "workspace:*"
     "@grafana/eslint-config": 5.0.0
-    "@grafana/experimental": ^0.0.2-canary.36
+    "@grafana/experimental": 1.0.1
     "@grafana/google-sdk": 0.0.3
     "@grafana/lezer-logql": 0.1.1
     "@grafana/monaco-logql": ^0.0.6