Form migrations: Final components to LegacyForms (#23707)

* FormField to LegacyForms

* FormLabel to InlineFormLabel

* Move SecretFormField to LeagcyForms

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

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, useContext } from 'react';
 import { DataLink, VariableSuggestion, GrafanaTheme } from '@grafana/data';
-import { FormField } from '../index';
+import { FormField } from '../FormField/FormField';
 import { Switch } from '../Forms/Legacy/Switch/Switch';
 import { css } from 'emotion';
 import { ThemeContext, stylesFactory } from '../../themes/index';

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

@@ -4,7 +4,7 @@ import { FormField } from '../FormField/FormField';
 import { Button } from '../Button/Button';
 import { css, cx } from 'emotion';
 
-interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onReset'> {
+export interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onReset'> {
   // Function to use when reset is clicked. Means you have to reset the input value yourself as this is  uncontrolled
   // component (or do something else if required).
   onReset: (event: React.SyntheticEvent<HTMLButtonElement>) => void;

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

@@ -12,11 +12,6 @@ export { ClipboardButton } from './ClipboardButton/ClipboardButton';
 export { Cascader, CascaderOption } from './Cascader/Cascader';
 export { ButtonCascader } from './ButtonCascader/ButtonCascader';
 
-// Forms
-export { FormLabel } from './FormLabel/FormLabel';
-export { FormField } from './FormField/FormField';
-export { SecretFormField } from './SecretFormField/SecretFormField';
-
 export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';
 export { ColorPicker, SeriesColorPicker } from './ColorPicker/ColorPicker';
 export { SeriesColorPickerPopover, SeriesColorPickerPopoverWithTheme } from './ColorPicker/SeriesColorPickerPopover';
@@ -153,6 +148,9 @@ export { TextArea } from './TextArea/TextArea';
 
 // Legacy forms
 
+// Export this until we've figured out a good approach to inline form styles.
+export { FormLabel as InlineFormLabel } from './FormLabel/FormLabel';
+
 // Select
 import { Select, AsyncSelect } from './Forms/Legacy/Select/Select';
 import { IndicatorsContainer } from './Forms/Legacy/Select/IndicatorsContainer';
@@ -161,10 +159,14 @@ import { ButtonSelect } from './Forms/Legacy/Select/ButtonSelect';
 
 //Input
 import { Input, LegacyInputStatus } from './Forms/Legacy/Input/Input';
+import { FormField } from './FormField/FormField';
+import { SecretFormField } from './SecretFormField/SecretFormField';
 
 import { Switch } from './Forms/Legacy/Switch/Switch';
 
 const LegacyForms = {
+  SecretFormField,
+  FormField,
   Select,
   AsyncSelect,
   IndicatorsContainer,