Add grafana/experimental package (#42289)

* Add grafana/experimental package

* CloudWatch: Use experimental for components

* Use canary version of experimental

* Update sort order

package.json

@@ -238,6 +238,7 @@
     "@grafana/aws-sdk": "0.0.3",
     "@grafana/data": "workspace:*",
     "@grafana/e2e-selectors": "workspace:*",
+    "@grafana/experimental": "canary",
     "@grafana/runtime": "workspace:*",
     "@grafana/schema": "workspace:*",
     "@grafana/slate-react": "0.22.10-grafana",

public/app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor.tsx

@@ -1,15 +1,11 @@
 import React, { ChangeEvent } from 'react';
-import { Switch, Input } from '@grafana/ui';
-import { CloudWatchAnnotationQuery, CloudWatchMetricsQuery } from '../types';
 import { PanelData } from '@grafana/data';
+import { EditorField, EditorHeader, EditorRow, InlineSelect, Space } from '@grafana/experimental';
+import { Input, Switch } from '@grafana/ui';
 import { CloudWatchDatasource } from '../datasource';
-import { MetricStatEditor } from './MetricStatEditor';
-import EditorHeader from './ui/EditorHeader';
-import InlineSelect from './ui/InlineSelect';
-import { Space } from './ui/Space';
 import { useRegions } from '../hooks';
-import EditorRow from './ui/EditorRow';
+import { CloudWatchAnnotationQuery, CloudWatchMetricsQuery } from '../types';
-import EditorField from './ui/EditorField';
+import { MetricStatEditor } from './MetricStatEditor';
 
 export type Props = {
   query: CloudWatchAnnotationQuery;

public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/Dimensions.tsx

@@ -1,9 +1,9 @@
-import React, { useMemo, useState } from 'react';
 import { isEqual } from 'lodash';
+import React, { useMemo, useState } from 'react';
 import { SelectableValue } from '@grafana/data';
-import { Dimensions as DimensionsType, CloudWatchMetricsQuery } from '../../types';
+import { EditorList } from '@grafana/experimental';
-import EditorList from '../ui/EditorList';
 import { CloudWatchDatasource } from '../../datasource';
+import { CloudWatchMetricsQuery, Dimensions as DimensionsType } from '../../types';
 import { FilterItem } from './FilterItem';
 
 export interface Props {

public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/FilterItem.tsx

@@ -1,15 +1,13 @@
 import React, { FunctionComponent, useMemo } from 'react';
 import { css, cx } from '@emotion/css';
-import { Select, stylesFactory, useTheme2 } from '@grafana/ui';
-
 import { useAsyncFn } from 'react-use';
 import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';
+import { InputGroup, AccessoryButton } from '@grafana/experimental';
+import { Select, stylesFactory, useTheme2 } from '@grafana/ui';
 import { CloudWatchDatasource } from '../../datasource';
 import { CloudWatchMetricsQuery, Dimensions } from '../../types';
 import { appendTemplateVariables } from '../../utils/utils';
 import { DimensionFilterCondition } from './Dimensions';
-import InputGroup from '../ui/InputGroup';
-import AccessoryButton from '../ui/AccessoryButton';
 
 export interface Props {
   query: CloudWatchMetricsQuery;

public/app/plugins/datasource/cloudwatch/components/MetricStatEditor/MetricStatEditor.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
-import { Switch, Select } from '@grafana/ui';
+import { EditorField, EditorFieldGroup, EditorRow, EditorRows } from '@grafana/experimental';
-import { CloudWatchMetricsQuery } from '../../types';
+import { Select, Switch } from '@grafana/ui';
-import { CloudWatchDatasource } from '../../datasource';
-import EditorRows from '../ui/EditorRows';
-import EditorRow from '../ui/EditorRow';
-import EditorFieldGroup from '../ui/EditorFieldGroup';
-import EditorField from '../ui/EditorField';
-import { appendTemplateVariables, toOption } from '../../utils/utils';
-import { useDimensionKeys, useMetrics, useNamespaces } from '../../hooks';
 import { Dimensions } from '..';
+import { CloudWatchDatasource } from '../../datasource';
+import { useDimensionKeys, useMetrics, useNamespaces } from '../../hooks';
+import { CloudWatchMetricsQuery } from '../../types';
+import { appendTemplateVariables, toOption } from '../../utils/utils';
 
 export type Props = {
   query: CloudWatchMetricsQuery;

public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx

@@ -1,22 +1,18 @@
-import React, { PureComponent, ChangeEvent } from 'react';
+import React, { ChangeEvent, PureComponent } from 'react';
-
 import { QueryEditorProps } from '@grafana/data';
+import { EditorField, EditorRow, Space } from '@grafana/experimental';
 import { Input } from '@grafana/ui';
-import {
-  CloudWatchQuery,
-  CloudWatchMetricsQuery,
-  CloudWatchJsonData,
-  MetricQueryType,
-  MetricEditorMode,
-} from '../types';
 import { CloudWatchDatasource } from '../datasource';
-import { Alias, MetricStatEditor, MathExpressionQueryField, SQLBuilderEditor, SQLCodeEditor } from './';
-
-import EditorRow from './ui/EditorRow';
-import EditorField from './ui/EditorField';
-import { Space } from './ui/Space';
-import QueryHeader from './QueryHeader';
 import { isMetricsQuery } from '../guards';
+import {
+  CloudWatchJsonData,
+  CloudWatchMetricsQuery,
+  CloudWatchQuery,
+  MetricEditorMode,
+  MetricQueryType,
+} from '../types';
+import { Alias, MathExpressionQueryField, MetricStatEditor, SQLBuilderEditor, SQLCodeEditor } from './';
+import QueryHeader from './QueryHeader';
 
 export type Props = QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData>;
 

public/app/plugins/datasource/cloudwatch/components/QueryHeader.tsx

@@ -3,6 +3,7 @@ import { pick } from 'lodash';
 
 import { SelectableValue } from '@grafana/data';
 import { Button, ConfirmModal, RadioButtonGroup } from '@grafana/ui';
+import { EditorHeader, InlineSelect, FlexItem } from '@grafana/experimental';
 
 import { CloudWatchDatasource } from '../datasource';
 import {
@@ -12,9 +13,6 @@ import {
   MetricEditorMode,
   MetricQueryType,
 } from '../types';
-import EditorHeader from './ui/EditorHeader';
-import InlineSelect from './ui/InlineSelect';
-import FlexItem from './ui/FlexItem';
 import { useRegions } from '../hooks';
 
 interface QueryHeaderProps {

public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderEditor.tsx

@@ -1,15 +1,13 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { CloudWatchMetricsQuery } from '../../types';
+import { EditorField, EditorRow, EditorRows } from '@grafana/experimental';
+import { Input } from '@grafana/ui';
+import SQLGenerator from '../../cloudwatch-sql/SQLGenerator';
 import { CloudWatchDatasource } from '../../datasource';
-import EditorRow from '../ui/EditorRow';
+import { CloudWatchMetricsQuery } from '../../types';
-import EditorRows from '../ui/EditorRows';
+import SQLBuilderSelectRow from './SQLBuilderSelectRow';
-import EditorField from '../ui/EditorField';
 import SQLFilter from './SQLFilter';
 import SQLGroupBy from './SQLGroupBy';
-import SQLBuilderSelectRow from './SQLBuilderSelectRow';
-import SQLGenerator from '../../cloudwatch-sql/SQLGenerator';
 import SQLOrderByGroup from './SQLOrderByGroup';
-import { Input } from '@grafana/ui';
 import { setSql } from './utils';
 
 export type Props = {

public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLBuilderSelectRow.tsx

@@ -1,15 +1,13 @@
-import { toOption } from '@grafana/data';
-import { Select, Switch } from '@grafana/ui';
 import React, { useEffect, useMemo } from 'react';
+import { toOption } from '@grafana/data';
+import { EditorField, EditorFieldGroup } from '@grafana/experimental';
+import { Select, Switch } from '@grafana/ui';
 import { STATISTICS } from '../../cloudwatch-sql/language';
 import { CloudWatchDatasource } from '../../datasource';
 import { useDimensionKeys, useMetrics, useNamespaces } from '../../hooks';
 import { CloudWatchMetricsQuery } from '../../types';
 import { appendTemplateVariables } from '../../utils/utils';
-import EditorField from '../ui/EditorField';
-import EditorFieldGroup from '../ui/EditorFieldGroup';
 import {
-  stringArrayToDimensions,
   getMetricNameFromExpression,
   getNamespaceFromExpression,
   getSchemaLabelKeys as getSchemaLabels,
@@ -19,6 +17,7 @@ import {
   setNamespace,
   setSchemaLabels,
   setWithSchema,
+  stringArrayToDimensions,
 } from './utils';
 
 interface SQLBuilderSelectRowProps {

public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLFilter.tsx

@@ -1,16 +1,14 @@
-import { SelectableValue, toOption } from '@grafana/data';
-import { Select } from '@grafana/ui';
 import React, { useMemo, useState } from 'react';
 import { useAsyncFn } from 'react-use';
+import { SelectableValue, toOption } from '@grafana/data';
+import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 import { COMPARISON_OPERATORS, EQUALS } from '../../cloudwatch-sql/language';
 import { CloudWatchDatasource } from '../../datasource';
 import { QueryEditorExpressionType, QueryEditorOperatorExpression, QueryEditorPropertyType } from '../../expressions';
 import { useDimensionKeys } from '../../hooks';
 import { CloudWatchMetricsQuery } from '../../types';
 import { appendTemplateVariables } from '../../utils/utils';
-import AccessoryButton from '../ui/AccessoryButton';
-import EditorList from '../ui/EditorList';
-import InputGroup from '../ui/InputGroup';
 import {
   getFlattenedFilters,
   getMetricNameFromExpression,

public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx

@@ -1,13 +1,11 @@
-import { SelectableValue, toOption } from '@grafana/data';
-import { Select } from '@grafana/ui';
 import React, { useMemo, useState } from 'react';
+import { SelectableValue, toOption } from '@grafana/data';
+import { AccessoryButton, EditorList, InputGroup } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 import { CloudWatchDatasource } from '../../datasource';
 import { QueryEditorExpressionType, QueryEditorGroupByExpression, QueryEditorPropertyType } from '../../expressions';
 import { useDimensionKeys } from '../../hooks';
 import { CloudWatchMetricsQuery } from '../../types';
-import AccessoryButton from '../ui/AccessoryButton';
-import EditorList from '../ui/EditorList';
-import InputGroup from '../ui/InputGroup';
 import {
   getFlattenedGroupBys,
   getMetricNameFromExpression,

public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLOrderByGroup.tsx

@@ -1,13 +1,11 @@
-import { SelectableValue, toOption } from '@grafana/data';
-import { Select } from '@grafana/ui';
 import React from 'react';
+import { SelectableValue, toOption } from '@grafana/data';
+import { AccessoryButton, EditorField, EditorFieldGroup } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
 import { ASC, DESC, STATISTICS } from '../../cloudwatch-sql/language';
 import { CloudWatchDatasource } from '../../datasource';
 import { CloudWatchMetricsQuery } from '../../types';
 import { appendTemplateVariables } from '../../utils/utils';
-import AccessoryButton from '../ui/AccessoryButton';
-import EditorField from '../ui/EditorField';
-import EditorFieldGroup from '../ui/EditorFieldGroup';
 import { setOrderBy, setSql } from './utils';
 
 interface SQLBuilderSelectRowProps {

public/app/plugins/datasource/cloudwatch/components/ui/AccessoryButton.tsx

@@ -1,23 +0,0 @@
-import { css, cx } from '@emotion/css';
-import { GrafanaTheme2 } from '@grafana/data';
-import { stylesFactory, useTheme2 } from '@grafana/ui';
-import { Button, ButtonProps } from '@grafana/ui/src/components/Button';
-import React from 'react';
-
-interface AccessoryButtonProps extends ButtonProps {}
-
-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),
-  }),
-}));
-
-export default AccessoryButton;

public/app/plugins/datasource/cloudwatch/components/ui/EditorField.tsx

@@ -1,79 +0,0 @@
-import { css } from '@emotion/css';
-import { GrafanaTheme2 } from '@grafana/data';
-import { Field, Icon, PopoverContent, stylesFactory, Tooltip, useTheme2, ReactUtils } from '@grafana/ui';
-import { Space } from 'app/plugins/datasource/grafana-azure-monitor-datasource/components/Space';
-import React from 'react';
-
-interface EditorFieldProps {
-  label: string;
-  children: React.ReactElement;
-  width?: number;
-  optional?: boolean;
-  tooltip?: PopoverContent;
-}
-
-const EditorField: React.FC<EditorFieldProps> = (props) => {
-  const { label, optional, tooltip, children } = props;
-
-  const theme = useTheme2();
-  const styles = getStyles(theme, props);
-  const childInputId = 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">
-            <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}>
-        <div className={styles.child}>{children}</div>
-      </Field>
-    </div>
-  );
-};
-
-export default EditorField;
-
-const getStyles = stylesFactory((theme: GrafanaTheme2, props: EditorFieldProps) => {
-  return {
-    root: css({
-      minWidth: theme.spacing(props.width ?? 0),
-    }),
-    label: css({
-      fontSize: 12,
-    }),
-    optional: css({
-      fontStyle: 'italic',
-      color: theme.colors.text.secondary,
-    }),
-    field: css({
-      marginBottom: 0, // GrafanaUI/Field has a bottom margin which we must remove
-    }),
-
-    // TODO: really poor hack to align the switch
-    // Find a better solution to this
-    child: css({
-      display: 'flex',
-      alignItems: 'center',
-      minHeight: 30,
-    }),
-    icon: css({
-      color: theme.colors.text.secondary,
-      marginLeft: theme.spacing(1),
-      ':hover': {
-        color: theme.colors.text.primary,
-      },
-    }),
-  };
-});

public/app/plugins/datasource/cloudwatch/components/ui/EditorFieldGroup.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import Stack from './Stack';
-
-interface EditorFieldGroupProps {}
-
-const EditorFieldGroup: React.FC<EditorFieldGroupProps> = ({ children }) => {
-  return <Stack gap={1}>{children}</Stack>;
-};
-
-export default EditorFieldGroup;

public/app/plugins/datasource/cloudwatch/components/ui/EditorHeader.tsx

@@ -1,28 +0,0 @@
-import { css } from '@emotion/css';
-import { GrafanaTheme2 } from '@grafana/data';
-import { stylesFactory, useTheme2 } from '@grafana/ui';
-import React from 'react';
-import Stack from './Stack';
-
-interface EditorHeaderProps {}
-
-const EditorHeader: React.FC<EditorHeaderProps> = ({ children }) => {
-  const theme = useTheme2();
-  const styles = getStyles(theme);
-
-  return (
-    <div className={styles.root}>
-      <Stack gap={3} alignItems="center">
-        {children}
-      </Stack>
-    </div>
-  );
-};
-
-export default EditorHeader;
-
-const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
-  root: css({
-    padding: theme.spacing(0, 1),
-  }),
-}));

public/app/plugins/datasource/cloudwatch/components/ui/EditorList.tsx

@@ -1,46 +0,0 @@
-import { Button } from '@grafana/ui';
-import React, { Fragment } from 'react';
-import Stack from './Stack';
-
-interface EditorListProps<T> {
-  items: T[];
-  renderItem: (item: Partial<T>, onChangeItem: (item: T) => void, onDeleteItem: () => void) => React.ReactElement;
-  onChange: (items: Array<Partial<T>>) => void;
-}
-
-function EditorList<T>({ items, renderItem, onChange }: EditorListProps<T>) {
-  const onAddItem = () => {
-    const newItems = [...items, {}];
-
-    onChange(newItems);
-  };
-
-  const onChangeItem = (itemIndex: number, newItem: 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) => (
-        <Fragment key={index}>
-          {renderItem(
-            item,
-            (newItem) => onChangeItem(index, newItem),
-            () => onDeleteItem(index)
-          )}
-        </Fragment>
-      ))}
-      <Button onClick={onAddItem} variant="secondary" size="md" icon="plus" aria-label="Add" />
-    </Stack>
-  );
-}
-
-export default EditorList;

public/app/plugins/datasource/cloudwatch/components/ui/EditorRow.tsx

@@ -1,30 +0,0 @@
-import { css } from '@emotion/css';
-import { GrafanaTheme2 } from '@grafana/data';
-import { stylesFactory, useTheme2 } from '@grafana/ui';
-import React from 'react';
-import Stack from './Stack';
-
-interface EditorRowProps {}
-
-const EditorRow: React.FC<EditorRowProps> = ({ children }) => {
-  const theme = useTheme2();
-  const styles = getStyles(theme);
-
-  return (
-    <div className={styles.root}>
-      <Stack gap={4}>{children}</Stack>
-    </div>
-  );
-};
-
-export default EditorRow;
-
-const getStyles = stylesFactory((theme: GrafanaTheme2) => {
-  return {
-    root: css({
-      padding: theme.spacing(1),
-      backgroundColor: theme.colors.background.secondary,
-      borderRadius: theme.shape.borderRadius(1),
-    }),
-  };
-});

public/app/plugins/datasource/cloudwatch/components/ui/EditorRows.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import Stack from './Stack';
-
-interface EditorRowsProps {}
-
-const EditorRows: React.FC<EditorRowsProps> = ({ children }) => {
-  return (
-    <Stack gap={0.5} direction="column">
-      {children}
-    </Stack>
-  );
-};
-
-export default EditorRows;

public/app/plugins/datasource/cloudwatch/components/ui/FlexItem.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-interface FlexItemProps {
-  grow?: number;
-  shrink?: number;
-}
-
-const FlexItem: React.FC<FlexItemProps> = ({ grow, shrink }) => {
-  return <div style={{ display: 'block', flexGrow: grow, flexShrink: shrink }} />;
-};
-
-export default FlexItem;

public/app/plugins/datasource/cloudwatch/components/ui/InlineSelect.tsx

@@ -1,89 +0,0 @@
-import { css, cx } from '@emotion/css';
-import { GrafanaTheme2 } from '@grafana/data';
-import { Select, stylesFactory, useTheme2 } from '@grafana/ui';
-import {
-  SelectContainerProps,
-  SelectContainer as BaseSelectContainer,
-} from '@grafana/ui/src/components/Select/SelectContainer';
-import { SelectCommonProps } from '@grafana/ui/src/components/Select/types';
-import React, { useState } from 'react';
-import { GroupBase } from 'react-select';
-
-interface InlineSelectProps<T> extends SelectCommonProps<T> {
-  label?: string;
-}
-
-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>
-      )}
-      <Select openMenuOnFocus inputId={id} {...props} width="auto" components={components} />
-    </div>
-  );
-}
-
-export default InlineSelect;
-
-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,
-  }),
-
-  container: css({
-    background: 'none',
-    borderColor: 'transparent',
-  }),
-
-  valueContainer: css({
-    display: 'flex',
-    alignItems: 'center',
-    flex: 'initial',
-    color: theme.colors.text.secondary,
-    fontSize: 12,
-  }),
-}));

public/app/plugins/datasource/cloudwatch/components/ui/InputGroup.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { css } from '@emotion/css';
-import { stylesFactory, useTheme2 } from '@grafana/ui';
-import { GrafanaTheme2 } from '@grafana/data';
-
-interface InputGroupProps {}
-
-const InputGroup: React.FC<InputGroupProps> = ({ children }) => {
-  const theme = useTheme2();
-  const styles = useStyles(theme);
-
-  return <div className={styles.root}>{children}</div>;
-};
-
-const useStyles = stylesFactory((theme: GrafanaTheme2) => ({
-  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: 1,
-
-      '&:hover': {
-        zIndex: 2,
-      },
-      '&:focus-within': {
-        zIndex: 2,
-      },
-    },
-  }),
-}));
-
-export default InputGroup;

public/app/plugins/datasource/cloudwatch/components/ui/Space.tsx

@@ -1 +0,0 @@
-export { Space } from '../../../grafana-azure-monitor-datasource/components/Space';

public/app/plugins/datasource/cloudwatch/components/ui/Stack.tsx

@@ -1,30 +0,0 @@
-import React, { CSSProperties } from 'react';
-import { css } from '@emotion/css';
-import { GrafanaTheme2 } from '@grafana/data';
-import { stylesFactory, useTheme2 } from '@grafana/ui';
-
-interface StackProps {
-  direction?: CSSProperties['flexDirection'];
-  alignItems?: CSSProperties['alignItems'];
-  wrap?: boolean;
-  gap?: number;
-}
-
-const Stack: React.FC<StackProps> = ({ children, ...props }) => {
-  const theme = useTheme2();
-  const styles = useStyles(theme, props);
-
-  return <div className={styles.root}>{children}</div>;
-};
-
-const useStyles = stylesFactory((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),
-  }),
-}));
-
-export default Stack;

yarn.lock

@@ -3493,6 +3493,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@grafana/experimental@npm:canary":
+  version: 0.0.1-pre-ba33f35900
+  resolution: "@grafana/experimental@npm:0.0.1-pre-ba33f35900"
+  peerDependencies:
+    "@emotion/css": 11.1.3
+    react: 17.0.1
+    react-select: 5.2.1
+  checksum: 610482f4d5b9be408e029ade6c6434232a1e67f12ccd8c71ad35bc99b87ff2be74befcabf75e0ef61261ba6055db19395478ab208c7c5454f0b9af209f1d7167
+  languageName: node
+  linkType: hard
+
 "@grafana/runtime@workspace:*, @grafana/runtime@workspace:packages/grafana-runtime":
   version: 0.0.0-use.local
   resolution: "@grafana/runtime@workspace:packages/grafana-runtime"
@@ -19379,6 +19390,7 @@ __metadata:
     "@grafana/e2e": "workspace:*"
     "@grafana/e2e-selectors": "workspace:*"
     "@grafana/eslint-config": 2.5.1
+    "@grafana/experimental": canary
     "@grafana/runtime": "workspace:*"
     "@grafana/schema": "workspace:*"
     "@grafana/slate-react": 0.22.10-grafana