Form migrations: TextArea from Forms namespace (#23436)

* Move from Forms namespace and move folder

* Figrate pages from Forms

* Make Enterprise mergable

packages/grafana-ui/src/components/Forms/Form.story.tsx

@@ -16,7 +16,7 @@ import Forms from './index';
 import mdx from './Form.mdx';
 import mdx from './Form.mdx';
 import { ValidateResult } from 'react-hook-form';
 import { ValidateResult } from 'react-hook-form';
 import { boolean } from '@storybook/addon-knobs';
 import { boolean } from '@storybook/addon-knobs';
-import { TextArea } from './TextArea/TextArea';
+import { TextArea } from '../TextArea/TextArea';
 
 
 export default {
 export default {
   title: 'Forms/Example forms',
   title: 'Forms/Example forms',

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

@@ -5,8 +5,8 @@ import { RadioButtonGroup } from './RadioButtonGroup/RadioButtonGroup';
 import { Form } from './Form';
 import { Form } from './Form';
 import { Field } from './Field';
 import { Field } from './Field';
 import { Legend } from './Legend';
 import { Legend } from './Legend';
-import { TextArea } from './TextArea/TextArea';
 import { Checkbox } from './Checkbox';
 import { Checkbox } from './Checkbox';
+import { TextArea } from '../TextArea/TextArea';
 
 
 const Forms = {
 const Forms = {
   RadioButtonGroup,
   RadioButtonGroup,
@@ -15,9 +15,9 @@ const Forms = {
   Form,
   Form,
   Field,
   Field,
   InputControl,
   InputControl,
-  TextArea,
   Checkbox,
   Checkbox,
   Legend,
   Legend,
+  TextArea,
 };
 };
 
 
 export default Forms;
 export default Forms;

packages/grafana-ui/src/components/Forms/TextArea/TextArea.story.tsx → packages/grafana-ui/src/components/TextArea/TextArea.story.tsx

 import React from 'react';
 import React from 'react';
 import { TextArea } from './TextArea';
 import { TextArea } from './TextArea';
-import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { boolean, number, select, text } from '@storybook/addon-knobs';
 import { boolean, number, select, text } from '@storybook/addon-knobs';
 import mdx from './TextArea.mdx';
 import mdx from './TextArea.mdx';
 
 

packages/grafana-ui/src/components/Forms/TextArea/TextArea.tsx → packages/grafana-ui/src/components/TextArea/TextArea.tsx

 import React, { HTMLProps } from 'react';
 import React, { HTMLProps } from 'react';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
 import { css, cx } from 'emotion';
 import { css, cx } from 'emotion';
-import { stylesFactory, useTheme } from '../../../themes';
-import { getFocusStyle, inputSizes, sharedInputStyle } from '../commonStyles';
-import { FormInputSize } from '../types';
+import { stylesFactory, useTheme } from '../../themes';
+import { getFocusStyle, inputSizes, sharedInputStyle } from '../Forms/commonStyles';
+import { FormInputSize } from '../Forms/types';
 
 
 export interface Props extends Omit<HTMLProps<HTMLTextAreaElement>, 'size'> {
 export interface Props extends Omit<HTMLProps<HTMLTextAreaElement>, 'size'> {
   /** Show an invalid state around the input */
   /** Show an invalid state around the input */

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

@@ -138,6 +138,7 @@ export { RadioButtonGroup } from './Forms/RadioButtonGroup/RadioButtonGroup';
 
 
 export { Input } from './Input/Input';
 export { Input } from './Input/Input';
 export { Switch } from './Forms/Switch';
 export { Switch } from './Forms/Switch';
+export { TextArea } from './TextArea/TextArea';
 
 
 // Legacy forms
 // Legacy forms
 
 

public/app/features/dashboard/components/PanelEditor/PanelOptionsTab.tsx

 import React, { FC, useMemo } from 'react';
 import React, { FC, useMemo } from 'react';
 import { PanelModel, DashboardModel } from '../../state';
 import { PanelModel, DashboardModel } from '../../state';
 import { SelectableValue, PanelPlugin, FieldConfigSource, PanelData } from '@grafana/data';
 import { SelectableValue, PanelPlugin, FieldConfigSource, PanelData } from '@grafana/data';
-import { Forms, Switch, Select, DataLinksInlineEditor, Input } from '@grafana/ui';
+import { Forms, Switch, Select, DataLinksInlineEditor, Input, TextArea } from '@grafana/ui';
 import { OptionsGroup } from './OptionsGroup';
 import { OptionsGroup } from './OptionsGroup';
 import { getPanelLinksVariableSuggestions } from '../../../panel/panellinks/link_srv';
 import { getPanelLinksVariableSuggestions } from '../../../panel/panellinks/link_srv';
 import { getVariables } from '../../../variables/state/selectors';
 import { getVariables } from '../../../variables/state/selectors';
@@ -45,7 +45,7 @@ export const PanelOptionsTab: FC<Props> = ({
         <Input defaultValue={panel.title} onBlur={e => onPanelConfigChange('title', e.currentTarget.value)} />
         <Input defaultValue={panel.title} onBlur={e => onPanelConfigChange('title', e.currentTarget.value)} />
       </Forms.Field>
       </Forms.Field>
       <Forms.Field label="Description" description="Panel description supports markdown and links.">
       <Forms.Field label="Description" description="Panel description supports markdown and links.">
-        <Forms.TextArea
+        <TextArea
           defaultValue={panel.description}
           defaultValue={panel.description}
           onBlur={e => onPanelConfigChange('description', e.currentTarget.value)}
           onBlur={e => onPanelConfigChange('description', e.currentTarget.value)}
         />
         />

public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx

 import React, { useMemo } from 'react';
 import React, { useMemo } from 'react';
 
 
-import { Forms, Button, HorizontalGroup } from '@grafana/ui';
+import { Forms, Button, HorizontalGroup, TextArea } from '@grafana/ui';
 import { e2e } from '@grafana/e2e';
 import { e2e } from '@grafana/e2e';
 import { SaveDashboardFormProps } from '../types';
 import { SaveDashboardFormProps } from '../types';
 
 
@@ -50,12 +50,7 @@ export const SaveDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard,
             )}
             )}
             {(hasVariableChanged || hasTimeChanged) && <div className="gf-form-group" />}
             {(hasVariableChanged || hasTimeChanged) && <div className="gf-form-group" />}
 
 
-            <Forms.TextArea
-              name="message"
-              ref={register}
-              placeholder="Add a note to describe your changes..."
-              autoFocus
-            />
+            <TextArea name="message" ref={register} placeholder="Add a note to describe your changes..." autoFocus />
           </div>
           </div>
 
 
           <HorizontalGroup>
           <HorizontalGroup>

public/app/features/explore/RichHistory/RichHistoryCard.tsx

@@ -2,7 +2,8 @@ import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import { hot } from 'react-hot-loader';
 import { css, cx } from 'emotion';
 import { css, cx } from 'emotion';
-import { stylesFactory, useTheme, Forms, Button, Icon } from '@grafana/ui';
+import { stylesFactory, useTheme, TextArea, Button, Icon } from '@grafana/ui';
+
 import { GrafanaTheme, AppEvents, DataSourceApi } from '@grafana/data';
 import { GrafanaTheme, AppEvents, DataSourceApi } from '@grafana/data';
 import { RichHistoryQuery, ExploreId } from 'app/types/explore';
 import { RichHistoryQuery, ExploreId } from 'app/types/explore';
 import { copyStringToClipboard, createUrlFromRichHistory, createDataQuery } from 'app/core/utils/richHistory';
 import { copyStringToClipboard, createUrlFromRichHistory, createDataQuery } from 'app/core/utils/richHistory';
@@ -194,7 +195,7 @@ export function RichHistoryCard(props: Props) {
 
 
   const updateComment = (
   const updateComment = (
     <div className={styles.updateCommentContainer}>
     <div className={styles.updateCommentContainer}>
-      <Forms.TextArea
+      <TextArea
         value={comment}
         value={comment}
         placeholder={comment ? undefined : 'An optional description of what the query does.'}
         placeholder={comment ? undefined : 'An optional description of what the query does.'}
         onChange={e => setComment(e.currentTarget.value)}
         onChange={e => setComment(e.currentTarget.value)}

public/app/features/manage-dashboards/DashboardImportPage.tsx

@@ -2,7 +2,7 @@ import React, { FormEvent, PureComponent } from 'react';
 import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
 import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
 import { css } from 'emotion';
 import { css } from 'emotion';
 import { AppEvents, NavModel } from '@grafana/data';
 import { AppEvents, NavModel } from '@grafana/data';
-import { Button, Forms, stylesFactory, Input } from '@grafana/ui';
+import { Button, Forms, stylesFactory, Input, TextArea } from '@grafana/ui';
 import Page from 'app/core/components/Page/Page';
 import Page from 'app/core/components/Page/Page';
 import { ImportDashboardOverview } from './components/ImportDashboardOverview';
 import { ImportDashboardOverview } from './components/ImportDashboardOverview';
 import { DashboardFileUpload } from './components/DashboardFileUpload';
 import { DashboardFileUpload } from './components/DashboardFileUpload';
@@ -111,7 +111,7 @@ class DashboardImportUnConnected extends PureComponent<Props> {
                   invalid={!!errors.dashboardJson}
                   invalid={!!errors.dashboardJson}
                   error={errors.dashboardJson && errors.dashboardJson.message}
                   error={errors.dashboardJson && errors.dashboardJson.message}
                 >
                 >
-                  <Forms.TextArea
+                  <TextArea
                     name="dashboardJson"
                     name="dashboardJson"
                     ref={register({
                     ref={register({
                       required: 'Need a dashboard json model',
                       required: 'Need a dashboard json model',