From 5f6b23e45a536dce27407a5ceae467fbf56684b4 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Mon, 30 May 2022 10:46:33 +0200
Subject: [PATCH] AutoSizeInput: Move to @grafana/ui (#48811)

* AutoSizeInput: Move to @grafana/ui

* Update packages/grafana-ui/src/components/AutoSizeInput/AutoSizeInput.mdx

Co-authored-by: JitaC <70489351+achatterjee-grafana@users.noreply.github.com>

* Update packages/grafana-ui/src/components/AutoSizeInput/AutoSizeInput.mdx

Co-authored-by: JitaC <70489351+achatterjee-grafana@users.noreply.github.com>

* Update packages/grafana-ui/src/components/AutoSizeInput/AutoSizeInput.mdx

Co-authored-by: JitaC <70489351+achatterjee-grafana@users.noreply.github.com>

* Fix linter error

* Update packages/grafana-ui/src/components/AutoSizeInput/AutoSizeInput.mdx

Co-authored-by: JitaC <70489351+achatterjee-grafana@users.noreply.github.com>

* Update packages/grafana-ui/src/components/AutoSizeInput/AutoSizeInput.mdx

Co-authored-by: JitaC <70489351+achatterjee-grafana@users.noreply.github.com>

* Move AutoSizeInput to Input folder

* Use iconOptions in storybook

Co-authored-by: JitaC <70489351+achatterjee-grafana@users.noreply.github.com>
---
 .../src/components/Input/AutoSizeInput.mdx    |  37 +++++++
 .../components/Input/AutoSizeInput.story.tsx  | 100 ++++++++++++++++++
 .../components/Input}/AutoSizeInput.test.tsx  |   9 +-
 .../src/components/Input}/AutoSizeInput.tsx   |   6 +-
 packages/grafana-ui/src/components/index.ts   |   1 +
 .../components/LokiQueryBuilderOptions.tsx    |   3 +-
 .../querybuilder/components/NestedQuery.tsx   |   3 +-
 .../querybuilder/components/NestedQuery.tsx   |   3 +-
 .../components/PromQueryBuilderOptions.tsx    |   3 +-
 .../components/PromQueryLegendEditor.tsx      |   3 +-
 .../shared/OperationParamEditor.tsx           |   3 +-
 11 files changed, 151 insertions(+), 20 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/Input/AutoSizeInput.mdx
 create mode 100644 packages/grafana-ui/src/components/Input/AutoSizeInput.story.tsx
 rename {public/app/plugins/datasource/prometheus/querybuilder/shared => packages/grafana-ui/src/components/Input}/AutoSizeInput.test.tsx (87%)
 rename {public/app/plugins/datasource/prometheus/querybuilder/shared => packages/grafana-ui/src/components/Input}/AutoSizeInput.tsx (93%)

diff --git a/packages/grafana-ui/src/components/Input/AutoSizeInput.mdx b/packages/grafana-ui/src/components/Input/AutoSizeInput.mdx
new file mode 100644
index 00000000000..7494b398511
--- /dev/null
+++ b/packages/grafana-ui/src/components/Input/AutoSizeInput.mdx
@@ -0,0 +1,37 @@
+import { Props, Preview } from '@storybook/addon-docs/blocks';
+import { AutoSizeInput } from './AutoSizeInput';
+import { Field } from '../Forms/Field';
+import { Icon } from '../Icon/Icon';
+
+# AutoSizeInput
+
+You can use it or regular text input. When used, AutoSizeInput resizes itself to the current content. For an array of data or tree-structured data, consider using `Select` or `Cascader` respectively.
+
+## Prefix and suffix
+
+To add more context to the input, you can add either text or an icon before or after the input using the `prefix` and `suffix`. Here are some examples for you to try in the canvas!
+
+```jsx
+<AutoSizeInput prefix={<Icon name="search" />} />
+```
+
+<Preview>
+  <AutoSizeInput prefix={<Icon name="search" />} />
+</Preview>
+
+## Usage in forms with Field
+
+Use `AutoSizeInput`with the`Field`component to get labels and descriptions. Also, you can use`AutoSizeInput`with the`required`attribute for validation. See the`Field` component for more information.
+
+```jsx
+<Field label="Important information" description="This information is very important, so you really need to fill it in">
+  <AutoSizeInput name="importantInput" required />
+</Field>
+```
+
+<Preview>
+  <Field label="Important information!" description="Please enter the relevant information.">
+    <AutoSizeInput name="importantInput" required />
+  </Field>
+</Preview>
+<Props of={AutoSizeInput} />
diff --git a/packages/grafana-ui/src/components/Input/AutoSizeInput.story.tsx b/packages/grafana-ui/src/components/Input/AutoSizeInput.story.tsx
new file mode 100644
index 00000000000..29c8dcdca3f
--- /dev/null
+++ b/packages/grafana-ui/src/components/Input/AutoSizeInput.story.tsx
@@ -0,0 +1,100 @@
+import { Story, Meta } from '@storybook/react';
+import React from 'react';
+
+import { Icon, Button, AutoSizeInput } from '@grafana/ui';
+
+import { IconName } from '../../types';
+import { iconOptions } from '../../utils/storybook/knobs';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+
+import mdx from './AutoSizeInput.mdx';
+
+const icons: { [key: string]: string | undefined } = { ...iconOptions };
+Object.keys(icons).forEach((key) => {
+  icons[key] = `icon-${icons[key]}`;
+});
+
+const prefixSuffixOpts = {
+  Text: '$',
+  ...icons,
+};
+
+export default {
+  title: 'Forms/Input/AutoSizeInput',
+  component: AutoSizeInput,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+    controls: {
+      exclude: ['prefix', 'suffix', 'addonBefore', 'addonAfter'],
+    },
+  },
+  args: {
+    type: 'text',
+    width: 40,
+    prefixVisible: '',
+    suffixVisible: '',
+    invalid: false,
+    loading: false,
+  },
+  argTypes: {
+    prefixVisible: {
+      control: {
+        type: 'select',
+        options: prefixSuffixOpts,
+      },
+    },
+    suffixVisible: {
+      control: {
+        type: 'select',
+        options: prefixSuffixOpts,
+      },
+    },
+    type: {
+      control: {
+        type: 'select',
+        options: ['text', 'number', 'password'],
+      },
+    },
+    minWidth: { control: { type: 'range', min: 10, max: 200, step: 10 } },
+  },
+} as Meta;
+
+export const Simple: Story = (args) => {
+  const addonAfter = <Button variant="secondary">Load</Button>;
+  const addonBefore = <div style={{ display: 'flex', alignItems: 'center', padding: '5px' }}>AutoSizeInput</div>;
+  const prefix = args.prefixVisible;
+  const suffix = args.suffixVisible;
+  let prefixEl: any = prefix;
+  if (prefix && prefix.match(/icon-/g)) {
+    prefixEl = <Icon name={prefix.replace(/icon-/g, '') as IconName} />;
+  }
+  let suffixEl: any = suffix;
+  if (suffix && suffix.match(/icon-/g)) {
+    suffixEl = <Icon name={suffix.replace(/icon-/g, '') as IconName} />;
+  }
+
+  return (
+    <AutoSizeInput
+      disabled={args.disabled}
+      prefix={prefixEl}
+      invalid={args.invalid}
+      width={args.width}
+      suffix={suffixEl}
+      loading={args.loading}
+      addonBefore={args.before && addonBefore}
+      addonAfter={args.after && addonAfter}
+      type={args.type}
+      placeholder={args.placeholder}
+      minWidth={args.minWidth}
+    />
+  );
+};
+Simple.args = {
+  disabled: false,
+  before: false,
+  after: false,
+  placeholder: 'Enter your name here...',
+};
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.test.tsx b/packages/grafana-ui/src/components/Input/AutoSizeInput.test.tsx
similarity index 87%
rename from public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.test.tsx
rename to packages/grafana-ui/src/components/Input/AutoSizeInput.test.tsx
index 1bd9458fb50..2a07011eb8e 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.test.tsx
+++ b/packages/grafana-ui/src/components/Input/AutoSizeInput.test.tsx
@@ -3,16 +3,13 @@ import React from 'react';
 
 import { AutoSizeInput } from './AutoSizeInput';
 
-jest.mock('@grafana/ui', () => {
-  const original = jest.requireActual('@grafana/ui');
-  const mockedUi = { ...original };
-
+jest.mock('../../utils/measureText', () => {
   // Mocking measureText
-  mockedUi.measureText = (text: string, fontSize: number) => {
+  const measureText = (text: string, fontSize: number) => {
     return { width: text.length * fontSize };
   };
 
-  return mockedUi;
+  return { measureText };
 });
 
 describe('AutoSizeInput', () => {
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.tsx b/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
similarity index 93%
rename from public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.tsx
rename to packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
index a81e3c91010..3aedbe32e78 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.tsx
+++ b/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
@@ -1,7 +1,9 @@
 import React, { useEffect } from 'react';
 
-import { Input, measureText } from '@grafana/ui';
-import { Props as InputProps } from '@grafana/ui/src/components/Input/Input';
+import { measureText } from '../../utils/measureText';
+
+import { Input, Props as InputProps } from './Input';
+
 export interface Props extends InputProps {
   /** Sets the min-width to a multiple of 8px. Default value is 10*/
   minWidth?: number;
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 4c32405d854..eda36a086d3 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -218,6 +218,7 @@ export { RadioButtonGroup } from './Forms/RadioButtonGroup/RadioButtonGroup';
 export { RadioButtonList } from './Forms/RadioButtonList/RadioButtonList';
 
 export { Input, getInputStyles } from './Input/Input';
+export { AutoSizeInput } from './Input/AutoSizeInput';
 export { FilterInput } from './FilterInput/FilterInput';
 export { FormInputSize } from './Forms/types';
 
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
index c975a9aea1b..6a6136ec75f 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
@@ -2,8 +2,7 @@ import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { EditorRow, EditorField } from '@grafana/experimental';
-import { RadioButtonGroup, Select } from '@grafana/ui';
-import { AutoSizeInput } from 'app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput';
+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 0c88536906f..fbd4ed2074f 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/NestedQuery.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/NestedQuery.tsx
@@ -3,8 +3,7 @@ import React from 'react';
 
 import { GrafanaTheme2, toOption } from '@grafana/data';
 import { EditorRows, FlexItem } from '@grafana/experimental';
-import { IconButton, Select, useStyles2 } from '@grafana/ui';
-import { AutoSizeInput } from 'app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput';
+import { AutoSizeInput, IconButton, Select, useStyles2 } from '@grafana/ui';
 
 import { LokiDatasource } from '../../datasource';
 import { binaryScalarDefs } from '../binaryScalarOperations';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQuery.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQuery.tsx
index 80034621982..2bf6c16c66c 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQuery.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/NestedQuery.tsx
@@ -3,11 +3,10 @@ import React from 'react';
 
 import { GrafanaTheme2, toOption } from '@grafana/data';
 import { EditorRows, FlexItem } from '@grafana/experimental';
-import { IconButton, Select, useStyles2 } from '@grafana/ui';
+import { AutoSizeInput, IconButton, Select, useStyles2 } from '@grafana/ui';
 
 import { PrometheusDatasource } from '../../datasource';
 import { binaryScalarDefs } from '../binaryScalarOperations';
-import { AutoSizeInput } from '../shared/AutoSizeInput';
 import { PromVisualQueryBinary } from '../types';
 
 import { PromQueryBuilder } from './PromQueryBuilder';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
index 17b3b296eea..b24e15df1aa 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx
@@ -2,12 +2,11 @@ import React, { SyntheticEvent } from 'react';
 
 import { CoreApp, SelectableValue } from '@grafana/data';
 import { EditorRow, EditorField, EditorSwitch } from '@grafana/experimental';
-import { RadioButtonGroup, Select } from '@grafana/ui';
+import { AutoSizeInput, RadioButtonGroup, Select } from '@grafana/ui';
 
 import { getQueryTypeChangeHandler, getQueryTypeOptions } from '../../components/PromExploreExtraField';
 import { FORMAT_OPTIONS, INTERVAL_FACTOR_OPTIONS } from '../../components/PromQueryEditor';
 import { PromQuery } from '../../types';
-import { AutoSizeInput } from '../shared/AutoSizeInput';
 import { QueryOptionGroup } from '../shared/QueryOptionGroup';
 
 import { getLegendModeLabel, PromQueryLegendEditor } from './PromQueryLegendEditor';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryLegendEditor.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryLegendEditor.tsx
index 3d4e512d86f..bb1503b0d9d 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryLegendEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryLegendEditor.tsx
@@ -2,10 +2,9 @@ import React, { useRef } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import { EditorField } from '@grafana/experimental';
-import { Select } from '@grafana/ui';
+import { Select, AutoSizeInput } from '@grafana/ui';
 
 import { LegendFormatMode } from '../../types';
-import { AutoSizeInput } from '../shared/AutoSizeInput';
 
 export interface Props {
   legendFormat: string | undefined;
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx
index 2ebe1431e34..2ad1e5e6005 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx
@@ -1,11 +1,10 @@
 import React, { ComponentType } from 'react';
 
 import { SelectableValue, toOption } from '@grafana/data';
-import { Checkbox, Select } from '@grafana/ui';
+import { AutoSizeInput, Checkbox, Select } from '@grafana/ui';
 
 import { QueryBuilderOperationParamDef, QueryBuilderOperationParamEditorProps } from '../shared/types';
 
-import { AutoSizeInput } from './AutoSizeInput';
 import { getOperationParamId } from './operationUtils';
 
 export function getOperationParamEditor(