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,

plugins-bundled/internal/input-datasource/src/InputQueryEditor.tsx

@@ -5,7 +5,7 @@ import React, { PureComponent } from 'react';
 import { InputDatasource, describeDataFrame } from './InputDatasource';
 import { InputQuery, InputOptions } from './types';
 
-import { FormLabel, LegacyForms, TableInputCSV, Icon } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms, TableInputCSV, Icon } from '@grafana/ui';
 const { Select } = LegacyForms;
 import { DataFrame, toCSV, SelectableValue, MutableDataFrame, QueryEditorProps } from '@grafana/data';
 
@@ -69,7 +69,7 @@ export class InputQueryEditor extends PureComponent<Props, State> {
     return (
       <div>
         <div className="gf-form">
-          <FormLabel width={4}>Data</FormLabel>
+          <InlineFormLabel width={4}>Data</InlineFormLabel>
           <Select width={6} options={options} value={selected} onChange={this.onSourceChange} />
 
           <div className="btn btn-link">

public/app/core/angular_wrappers.ts

@@ -13,11 +13,12 @@ import {
   DataLinksEditor,
   DataSourceHttpSettings,
   GraphContextMenu,
-  SecretFormField,
   SeriesColorPickerPopoverWithTheme,
   UnitPicker,
   Icon,
+  LegacyForms,
 } from '@grafana/ui';
+const { SecretFormField } = LegacyForms;
 import { FunctionEditor } from 'app/plugins/datasource/graphite/FunctionEditor';
 import ReactProfileWrapper from 'app/features/profile/ReactProfileWrapper';
 import { LokiAnnotationsQueryEditor } from '../plugins/datasource/loki/components/AnnotationsQueryEditor';

public/app/core/components/SharedPreferences/SharedPreferences.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 
-import { FormLabel, LegacyForms } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms } from '@grafana/ui';
 const { Select } = LegacyForms;
 
 import { DashboardSearchHit, DashboardSearchHitType } from 'app/types';
@@ -126,12 +126,12 @@ export class SharedPreferences extends PureComponent<Props, State> {
           />
         </div>
         <div className="gf-form">
-          <FormLabel
+          <InlineFormLabel
             width={11}
             tooltip="Not finding dashboard you want? Star it first, then it should appear in this select box."
           >
             Home Dashboard
-          </FormLabel>
+          </InlineFormLabel>
           <Select
             value={dashboards.find(dashboard => dashboard.id === homeDashboardId)}
             getOptionValue={i => i.id}

public/app/features/admin/ldap/LdapPage.tsx

@@ -2,7 +2,8 @@ import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import { NavModel } from '@grafana/data';
-import { FormField, Alert } from '@grafana/ui';
+import { Alert, LegacyForms } from '@grafana/ui';
+const { FormField } = LegacyForms;
 import { getNavModel } from 'app/core/selectors/navModel';
 import config from 'app/core/config';
 import Page from 'app/core/components/Page/Page';

public/app/features/api-keys/ApiKeysPage.tsx

@@ -13,7 +13,14 @@ import ApiKeysAddedModal from './ApiKeysAddedModal';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
-import { DeleteButton, EventsWithValidation, FormLabel, LegacyForms, ValidationEvents, IconButton } from '@grafana/ui';
+import {
+  DeleteButton,
+  EventsWithValidation,
+  InlineFormLabel,
+  LegacyForms,
+  ValidationEvents,
+  IconButton,
+} from '@grafana/ui';
 const { Input, Switch } = LegacyForms;
 import { dateTime, isDateTime, NavModel } from '@grafana/data';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
@@ -213,7 +220,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
                 </span>
               </div>
               <div className="gf-form max-width-21">
-                <FormLabel tooltip={tooltipText}>Time to live</FormLabel>
+                <InlineFormLabel tooltip={tooltipText}>Time to live</InlineFormLabel>
                 <Input
                   type="text"
                   className="gf-form-input"

public/app/features/dashboard/panel_editor/DataSourceOption.tsx

@@ -1,5 +1,5 @@
 import React, { FC, ChangeEvent } from 'react';
-import { FormLabel, LegacyForms } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms } from '@grafana/ui';
 const { Input } = LegacyForms;
 
 interface Props {
@@ -15,7 +15,7 @@ interface Props {
 export const DataSourceOption: FC<Props> = ({ label, placeholder, name, value, onBlur, onChange, tooltipInfo }) => {
   return (
     <div className="gf-form gf-form--flex-end">
-      <FormLabel tooltip={tooltipInfo}>{label}</FormLabel>
+      <InlineFormLabel tooltip={tooltipInfo}>{label}</InlineFormLabel>
       <Input
         type="text"
         className="gf-form-input width-6"

public/app/features/dashboard/panel_editor/QueryOptions.tsx

@@ -5,7 +5,7 @@ import React, { PureComponent, ChangeEvent, FocusEvent, ReactText } from 'react'
 import { rangeUtil, DataSourceSelectItem } from '@grafana/data';
 
 // Components
-import { EventsWithValidation, LegacyInputStatus, LegacyForms, ValidationEvents, FormLabel } from '@grafana/ui';
+import { EventsWithValidation, LegacyInputStatus, LegacyForms, ValidationEvents, InlineFormLabel } from '@grafana/ui';
 import { DataSourceOption } from './DataSourceOption';
 const { Input, Switch } = LegacyForms;
 
@@ -188,7 +188,7 @@ export class QueryOptions extends PureComponent<Props, State> {
         {this.renderOptions()}
 
         <div className="gf-form">
-          <FormLabel>Relative time</FormLabel>
+          <InlineFormLabel>Relative time</InlineFormLabel>
           <Input
             type="text"
             className="width-6"

public/app/features/datasources/settings/BasicSettings.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { FormLabel, LegacyForms } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms } from '@grafana/ui';
 const { Input, Switch } = LegacyForms;
 import { e2e } from '@grafana/e2e';
 
@@ -15,14 +15,14 @@ const BasicSettings: FC<Props> = ({ dataSourceName, isDefault, onDefaultChange,
     <div className="gf-form-group" aria-label="Datasource settings page basic settings">
       <div className="gf-form-inline">
         <div className="gf-form max-width-30" style={{ marginRight: '3px' }}>
-          <FormLabel
+          <InlineFormLabel
             tooltip={
               'The name is used when you select the data source in panels. The Default data source is ' +
               'preselected in new panels.'
             }
           >
             Name
-          </FormLabel>
+          </InlineFormLabel>
           <Input
             className="gf-form-input max-width-23"
             type="text"

public/app/features/expressions/ExpressionQueryEditor.tsx

@@ -1,8 +1,8 @@
 // Libraries
 import React, { PureComponent, ChangeEvent } from 'react';
 
-import { FormLabel, LegacyForms, FormField } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms } from '@grafana/ui';
-const { Select } = LegacyForms;
+const { Select, FormField } = LegacyForms;
 import { SelectableValue, ReducerID, QueryEditorProps } from '@grafana/data';
 
 // Types
@@ -131,7 +131,7 @@ export class ExpressionQueryEditor extends PureComponent<Props, State> {
           <Select options={gelTypes} value={selected} onChange={this.onSelectGELType} />
           {query.type === GELQueryType.reduce && (
             <>
-              <FormLabel width={5}>Function:</FormLabel>
+              <InlineFormLabel width={5}>Function:</InlineFormLabel>
               <Select options={reducerTypes} value={reducer} onChange={this.onSelectReducer} />
               <FormField label="Fields:" labelWidth={5} onChange={this.onExpressionChange} value={query.expression} />
             </>
@@ -147,9 +147,9 @@ export class ExpressionQueryEditor extends PureComponent<Props, State> {
               <FormField label="Rule:" labelWidth={5} onChange={this.onRuleChange} value={query.rule} />
             </div>
             <div>
-              <FormLabel width={12}>Downsample Function:</FormLabel>
+              <InlineFormLabel width={12}>Downsample Function:</InlineFormLabel>
               <Select options={downsamplingTypes} value={downsampler} onChange={this.onSelectDownsampler} />
-              <FormLabel width={12}>Upsample Function:</FormLabel>
+              <InlineFormLabel width={12}>Upsample Function:</InlineFormLabel>
               <Select options={upsamplingTypes} value={upsampler} onChange={this.onSelectUpsampler} />
             </div>
           </>

public/app/features/profile/UserProfileEditForm.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent, ChangeEvent, MouseEvent } from 'react';
-import { Button, FormLabel, LegacyForms, Tooltip, Icon } from '@grafana/ui';
+import { Button, InlineFormLabel, LegacyForms, Tooltip, Icon } from '@grafana/ui';
 const { Input } = LegacyForms;
 import { User } from 'app/types';
 import config from 'app/core/config';
@@ -59,11 +59,11 @@ export class UserProfileEditForm extends PureComponent<Props, State> {
         <h3 className="page-sub-heading">Edit Profile</h3>
         <form name="userForm" className="gf-form-group">
           <div className="gf-form max-width-30">
-            <FormLabel className="width-8">Name</FormLabel>
+            <InlineFormLabel className="width-8">Name</InlineFormLabel>
             <Input className="gf-form-input max-width-22" type="text" onChange={this.onNameChange} value={name} />
           </div>
           <div className="gf-form max-width-30">
-            <FormLabel className="width-8">Email</FormLabel>
+            <InlineFormLabel className="width-8">Email</InlineFormLabel>
             <Input
               className="gf-form-input max-width-22"
               type="text"
@@ -78,7 +78,7 @@ export class UserProfileEditForm extends PureComponent<Props, State> {
             )}
           </div>
           <div className="gf-form max-width-30">
-            <FormLabel className="width-8">Username</FormLabel>
+            <InlineFormLabel className="width-8">Username</InlineFormLabel>
             <Input
               className="gf-form-input max-width-22"
               type="text"

public/app/features/teams/CreateTeam.tsx

@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
 import Page from 'app/core/components/Page/Page';
 import { hot } from 'react-hot-loader';
-import { FormField, Button } from '@grafana/ui';
+import { Button, LegacyForms } from '@grafana/ui';
+const { FormField } = LegacyForms;
 import { NavModel } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
 import { updateLocation } from '../../core/actions';

public/app/features/teams/TeamSettings.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { FormLabel, LegacyForms } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms } from '@grafana/ui';
 const { Input } = LegacyForms;
 
 import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences';
@@ -52,7 +52,7 @@ export class TeamSettings extends React.Component<Props, State> {
         <h3 className="page-sub-heading">Team Settings</h3>
         <form name="teamDetailsForm" className="gf-form-group" onSubmit={this.onUpdate}>
           <div className="gf-form max-width-30">
-            <FormLabel>Name</FormLabel>
+            <InlineFormLabel>Name</InlineFormLabel>
             <Input
               type="text"
               required
@@ -63,9 +63,9 @@ export class TeamSettings extends React.Component<Props, State> {
           </div>
 
           <div className="gf-form max-width-30">
-            <FormLabel tooltip="This is optional and is primarily used to set the team profile avatar (via gravatar service)">
+            <InlineFormLabel tooltip="This is optional and is primarily used to set the team profile avatar (via gravatar service)">
               Email
-            </FormLabel>
+            </InlineFormLabel>
             <Input
               type="email"
               className="gf-form-input max-width-22"

public/app/features/variables/datasource/DataSourceVariableEditor.tsx

@@ -3,7 +3,7 @@ import React, { ChangeEvent, FocusEvent, PureComponent } from 'react';
 import { DataSourceVariableModel, VariableWithMultiSupport } from '../../templating/types';
 import { OnPropChangeArguments, VariableEditorProps } from '../editor/types';
 import { SelectionOptionsEditor } from '../editor/SelectionOptionsEditor';
-import { FormLabel } from '@grafana/ui';
+import { InlineFormLabel } from '@grafana/ui';
 import { VariableEditorState } from '../editor/reducer';
 import { DataSourceVariableEditorState } from './reducer';
 import { initDataSourceVariableEditor } from './actions';
@@ -87,7 +87,7 @@ export class DataSourceVariableEditorUnConnected extends PureComponent<Props> {
           </div>
 
           <div className="gf-form">
-            <FormLabel
+            <InlineFormLabel
               width={12}
               tooltip={
                 <div>
@@ -100,7 +100,7 @@ export class DataSourceVariableEditorUnConnected extends PureComponent<Props> {
               }
             >
               Instance name filter
-            </FormLabel>
+            </InlineFormLabel>
             <input
               type="text"
               className="gf-form-input max-width-18"

public/app/features/variables/editor/VariableEditorEditor.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, FormEvent, PureComponent } from 'react';
 import isEqual from 'lodash/isEqual';
 import { AppEvents, VariableType } from '@grafana/data';
-import { FormLabel } from '@grafana/ui';
+import { InlineFormLabel } from '@grafana/ui';
 import { e2e } from '@grafana/e2e';
 import { variableAdapters } from '../adapters';
 import { NEW_VARIABLE_ID, toVariablePayload, VariableIdentifier } from '../state/types';
@@ -133,9 +133,9 @@ export class VariableEditorEditorUnConnected extends PureComponent<Props> {
                 />
               </div>
               <div className="gf-form max-width-19">
-                <FormLabel width={6} tooltip={variableAdapters.get(this.props.variable.type).description}>
+                <InlineFormLabel width={6} tooltip={variableAdapters.get(this.props.variable.type).description}>
                   Type
-                </FormLabel>
+                </InlineFormLabel>
                 <div className="gf-form-select-wrapper max-width-17">
                   <select
                     className="gf-form-input"

public/app/features/variables/interval/IntervalVariableEditor.tsx

@@ -2,7 +2,7 @@ import React, { ChangeEvent, FocusEvent, PureComponent } from 'react';
 
 import { IntervalVariableModel } from '../../templating/types';
 import { VariableEditorProps } from '../editor/types';
-import { FormLabel, LegacyForms } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms } from '@grafana/ui';
 const { Switch } = LegacyForms;
 
 export interface Props extends VariableEditorProps<IntervalVariableModel> {}
@@ -78,12 +78,12 @@ export class IntervalVariableEditor extends PureComponent<Props> {
             {this.props.variable.auto && (
               <>
                 <div className="gf-form">
-                  <FormLabel
+                  <InlineFormLabel
                     width={9}
                     tooltip={'How many times should the current time range be divided to calculate the value'}
                   >
                     Step count
-                  </FormLabel>
+                  </InlineFormLabel>
                   <div className="gf-form-select-wrapper max-width-10">
                     <select
                       className="gf-form-input"
@@ -99,9 +99,9 @@ export class IntervalVariableEditor extends PureComponent<Props> {
                   </div>
                 </div>
                 <div className="gf-form">
-                  <FormLabel width={9} tooltip={'The calculated value will not go below this threshold'}>
+                  <InlineFormLabel width={9} tooltip={'The calculated value will not go below this threshold'}>
                     Min interval
-                  </FormLabel>
+                  </InlineFormLabel>
                   <input
                     type="text"
                     className="gf-form-input max-width-10"

public/app/features/variables/query/QueryVariableEditor.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, PureComponent } from 'react';
 import { e2e } from '@grafana/e2e';
-import { FormLabel, LegacyForms } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms } from '@grafana/ui';
 const { Switch } = LegacyForms;
 
 import templateSrv from '../../templating/template_srv';
@@ -145,9 +145,9 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
             </div>
 
             <div className="gf-form max-width-22">
-              <FormLabel width={10} tooltip={'When to update the values of this variable.'}>
+              <InlineFormLabel width={10} tooltip={'When to update the values of this variable.'}>
                 Refresh
-              </FormLabel>
+              </InlineFormLabel>
               <div className="gf-form-select-wrapper width-15">
                 <select
                   className="gf-form-input"
@@ -181,12 +181,12 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
           )}
 
           <div className="gf-form">
-            <FormLabel
+            <InlineFormLabel
               width={10}
               tooltip={'Optional, if you want to extract part of a series name or metric node segment.'}
             >
               Regex
-            </FormLabel>
+            </InlineFormLabel>
             <input
               type="text"
               className="gf-form-input"
@@ -198,9 +198,9 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
             />
           </div>
           <div className="gf-form max-width-21">
-            <FormLabel width={10} tooltip={'How to sort the values of this variable.'}>
+            <InlineFormLabel width={10} tooltip={'How to sort the values of this variable.'}>
               Sort
-            </FormLabel>
+            </InlineFormLabel>
             <div className="gf-form-select-wrapper max-width-14">
               <select
                 className="gf-form-input"

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

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { FormLabel, LegacyForms, Button } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms, Button } from '@grafana/ui';
 const { Select, Input } = LegacyForms;
 import {
   DataSourcePluginOptionsEditorProps,
@@ -125,7 +125,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
         <div className="gf-form-group">
           <div className="gf-form-inline">
             <div className="gf-form">
-              <FormLabel className="width-14">Auth Provider</FormLabel>
+              <InlineFormLabel className="width-14">Auth Provider</InlineFormLabel>
               <Select
                 className="width-30"
                 value={authProviderOptions.find(authProvider => authProvider.value === options.jsonData.authType)}
@@ -143,12 +143,12 @@ export class ConfigEditor extends PureComponent<Props, State> {
           {options.jsonData.authType === 'credentials' && (
             <div className="gf-form-inline">
               <div className="gf-form">
-                <FormLabel
+                <InlineFormLabel
                   className="width-14"
                   tooltip="Credentials profile name, as specified in ~/.aws/credentials, leave blank for default."
                 >
                   Credentials Profile Name
-                </FormLabel>
+                </InlineFormLabel>
                 <div className="width-30">
                   <Input
                     className="width-30"
@@ -165,7 +165,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
               {options.secureJsonFields.accessKey ? (
                 <div className="gf-form-inline">
                   <div className="gf-form">
-                    <FormLabel className="width-14">Access Key ID</FormLabel>
+                    <InlineFormLabel className="width-14">Access Key ID</InlineFormLabel>
                     <Input className="width-25" placeholder="Configured" disabled={true} />
                   </div>
                   <div className="gf-form">
@@ -183,7 +183,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
               ) : (
                 <div className="gf-form-inline">
                   <div className="gf-form">
-                    <FormLabel className="width-14">Access Key ID</FormLabel>
+                    <InlineFormLabel className="width-14">Access Key ID</InlineFormLabel>
                     <div className="width-30">
                       <Input
                         className="width-30"
@@ -197,7 +197,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
               {options.secureJsonFields.secretKey ? (
                 <div className="gf-form-inline">
                   <div className="gf-form">
-                    <FormLabel className="width-14">Secret Access Key</FormLabel>
+                    <InlineFormLabel className="width-14">Secret Access Key</InlineFormLabel>
                     <Input className="width-25" placeholder="Configured" disabled={true} />
                   </div>
                   <div className="gf-form">
@@ -215,7 +215,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
               ) : (
                 <div className="gf-form-inline">
                   <div className="gf-form">
-                    <FormLabel className="width-14">Secret Access Key</FormLabel>
+                    <InlineFormLabel className="width-14">Secret Access Key</InlineFormLabel>
                     <div className="width-30">
                       <Input
                         className="width-30"
@@ -231,9 +231,9 @@ export class ConfigEditor extends PureComponent<Props, State> {
           {options.jsonData.authType === 'arn' && (
             <div className="gf-form-inline">
               <div className="gf-form">
-                <FormLabel className="width-14" tooltip="ARN of Assume Role">
+                <InlineFormLabel className="width-14" tooltip="ARN of Assume Role">
                   Assume Role ARN
-                </FormLabel>
+                </InlineFormLabel>
                 <div className="width-30">
                   <Input
                     className="width-30"
@@ -247,12 +247,12 @@ export class ConfigEditor extends PureComponent<Props, State> {
           )}
           <div className="gf-form-inline">
             <div className="gf-form">
-              <FormLabel
+              <InlineFormLabel
                 className="width-14"
                 tooltip="Specify the region, such as for US West (Oregon) use ` us-west-2 ` as the region."
               >
                 Default Region
-              </FormLabel>
+              </InlineFormLabel>
               <Select
                 className="width-30"
                 value={regions.find(region => region.value === options.jsonData.defaultRegion)}
@@ -264,9 +264,9 @@ export class ConfigEditor extends PureComponent<Props, State> {
           </div>
           <div className="gf-form-inline">
             <div className="gf-form">
-              <FormLabel className="width-14" tooltip="Namespaces of Custom Metrics.">
+              <InlineFormLabel className="width-14" tooltip="Namespaces of Custom Metrics.">
                 Custom Metrics
-              </FormLabel>
+              </InlineFormLabel>
               <Input
                 className="width-30"
                 placeholder="Namespace1,Namespace2"

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

@@ -1,5 +1,5 @@
 import React, { InputHTMLAttributes, FunctionComponent } from 'react';
-import { FormLabel } from '@grafana/ui';
+import { InlineFormLabel } from '@grafana/ui';
 
 export interface Props extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
@@ -9,9 +9,9 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement> {
 
 export const QueryField: FunctionComponent<Partial<Props>> = ({ label, tooltip, children }) => (
   <>
-    <FormLabel width={8} className="query-keyword" tooltip={tooltip}>
+    <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
       {label}
-    </FormLabel>
+    </InlineFormLabel>
     {children}
   </>
 );

public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { css } from 'emotion';
 import { VariableSuggestion } from '@grafana/data';
-import { Button, FormField, DataLinkInput, stylesFactory } from '@grafana/ui';
+import { Button, LegacyForms, DataLinkInput, stylesFactory } from '@grafana/ui';
+const { FormField } = LegacyForms;
 import { DataLinkConfig } from '../types';
 
 const getStyles = stylesFactory(() => ({

public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { EventsWithValidation, FormField, regexValidation, LegacyForms } from '@grafana/ui';
+import { EventsWithValidation, regexValidation, LegacyForms } from '@grafana/ui';
-const { Select, Input } = LegacyForms;
+const { Select, Input, FormField } = LegacyForms;
 import { ElasticsearchOptions } from '../types';
 import { DataSourceSettings, SelectableValue } from '@grafana/data';
 

public/app/plugins/datasource/elasticsearch/configuration/LogsConfig.test.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { LogsConfig } from './LogsConfig';
 import { createDefaultConfigOptions } from './mocks';
-import { FormField } from '@grafana/ui';
+import { LegacyForms } from '@grafana/ui';
+const { FormField } = LegacyForms;
 
 describe('ElasticDetails', () => {
   it('should render without error', () => {

public/app/plugins/datasource/elasticsearch/configuration/LogsConfig.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormField } from '@grafana/ui';
+import { LegacyForms } from '@grafana/ui';
+const { FormField } = LegacyForms;
 import { ElasticsearchOptions } from '../types';
 
 type Props = {

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent, ChangeEvent } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { AzureCredentialsForm } from './AzureCredentialsForm';
-import { FormLabel, LegacyForms, Button } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms, Button } from '@grafana/ui';
 const { Select, Switch } = LegacyForms;
 import { AzureDataSourceSettings } from '../types';
 
@@ -169,12 +169,12 @@ export class AnalyticsConfig extends PureComponent<Props, State> {
         <div className="gf-form-group">
           <div className="gf-form-inline">
             <div className="gf-form">
-              <FormLabel
+              <InlineFormLabel
                 className="width-12"
                 tooltip="Choose the default/preferred Workspace for Azure Log Analytics queries."
               >
                 Default Workspace
-              </FormLabel>
+              </InlineFormLabel>
               <div className="width-25">
                 <Select
                   value={workspaces.find(workspace => workspace.value === jsonData.logAnalyticsDefaultWorkspace)}

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AzureCredentialsForm.tsx

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, PureComponent } from 'react';
 import { SelectableValue } from '@grafana/data';
-import { FormLabel, LegacyForms, Button } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms, Button } from '@grafana/ui';
 const { Select, Input } = LegacyForms;
 
 export interface Props {
@@ -49,9 +49,9 @@ export class AzureCredentialsForm extends PureComponent<Props> {
           {azureCloudOptions && (
             <div className="gf-form-inline">
               <div className="gf-form">
-                <FormLabel className="width-12" tooltip="Choose an Azure Cloud.">
+                <InlineFormLabel className="width-12" tooltip="Choose an Azure Cloud.">
                   Azure Cloud
-                </FormLabel>
+                </InlineFormLabel>
                 <Select
                   className="width-15"
                   value={azureCloudOptions.find(azureCloud => azureCloud.value === selectedAzureCloud)}
@@ -64,7 +64,7 @@ export class AzureCredentialsForm extends PureComponent<Props> {
           )}
           <div className="gf-form-inline">
             <div className="gf-form">
-              <FormLabel className="width-12">Directory (tenant) ID</FormLabel>
+              <InlineFormLabel className="width-12">Directory (tenant) ID</InlineFormLabel>
               <div className="width-15">
                 <Input
                   className="width-30"
@@ -77,7 +77,7 @@ export class AzureCredentialsForm extends PureComponent<Props> {
           </div>
           <div className="gf-form-inline">
             <div className="gf-form">
-              <FormLabel className="width-12">Application (client) ID</FormLabel>
+              <InlineFormLabel className="width-12">Application (client) ID</InlineFormLabel>
               <div className="width-15">
                 <Input
                   className="width-30"
@@ -91,7 +91,7 @@ export class AzureCredentialsForm extends PureComponent<Props> {
           {clientSecretConfigured ? (
             <div className="gf-form-inline">
               <div className="gf-form">
-                <FormLabel className="width-12">Client Secret</FormLabel>
+                <InlineFormLabel className="width-12">Client Secret</InlineFormLabel>
                 <Input className="width-25" placeholder="configured" disabled={true} />
               </div>
               <div className="gf-form">
@@ -105,7 +105,7 @@ export class AzureCredentialsForm extends PureComponent<Props> {
           ) : (
             <div className="gf-form-inline">
               <div className="gf-form">
-                <FormLabel className="width-12">Client Secret</FormLabel>
+                <InlineFormLabel className="width-12">Client Secret</InlineFormLabel>
                 <div className="width-15">
                   <Input
                     className="width-30"
@@ -121,7 +121,7 @@ export class AzureCredentialsForm extends PureComponent<Props> {
             <>
               <div className="gf-form-inline">
                 <div className="gf-form">
-                  <FormLabel className="width-12">Default Subscription</FormLabel>
+                  <InlineFormLabel className="width-12">Default Subscription</InlineFormLabel>
                   <div className="width-25">
                     <Select
                       value={subscriptionOptions.find(subscription => subscription.value === selectedSubscription)}

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/InsightsConfig.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { FormLabel, Button, LegacyForms } from '@grafana/ui';
+import { InlineFormLabel, Button, LegacyForms } from '@grafana/ui';
 const { Input } = LegacyForms;
 import { AzureDataSourceSettings, AzureDataSourceJsonData, AzureDataSourceSecureJsonData } from '../types';
 
@@ -27,7 +27,7 @@ export class InsightsConfig extends PureComponent<Props> {
           {options.secureJsonFields.appInsightsApiKey ? (
             <div className="gf-form-inline">
               <div className="gf-form">
-                <FormLabel className="width-12">API Key</FormLabel>
+                <InlineFormLabel className="width-12">API Key</InlineFormLabel>
                 <Input className="width-25" placeholder="configured" disabled={true} />
               </div>
               <div className="gf-form">
@@ -41,7 +41,7 @@ export class InsightsConfig extends PureComponent<Props> {
           ) : (
             <div className="gf-form-inline">
               <div className="gf-form">
-                <FormLabel className="width-12">API Key</FormLabel>
+                <InlineFormLabel className="width-12">API Key</InlineFormLabel>
                 <div className="width-15">
                   <Input
                     className="width-30"
@@ -55,7 +55,7 @@ export class InsightsConfig extends PureComponent<Props> {
           )}
           <div className="gf-form-inline">
             <div className="gf-form">
-              <FormLabel className="width-12">Application ID</FormLabel>
+              <InlineFormLabel className="width-12">Application ID</InlineFormLabel>
               <div className="width-15">
                 <Input
                   className="width-30"

public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { DataSourceHttpSettings, FormLabel, LegacyForms } from '@grafana/ui';
+import { DataSourceHttpSettings, InlineFormLabel, LegacyForms } from '@grafana/ui';
 const { Select, Switch } = LegacyForms;
 import {
   DataSourcePluginOptionsEditorProps,
@@ -57,9 +57,9 @@ export class ConfigEditor extends PureComponent<Props> {
         <div className="gf-form-group">
           <div className="gf-form-inline">
             <div className="gf-form">
-              <FormLabel tooltip="This option controls what functions are available in the Graphite query editor.">
+              <InlineFormLabel tooltip="This option controls what functions are available in the Graphite query editor.">
                 Version
-              </FormLabel>
+              </InlineFormLabel>
               <Select
                 value={currentVersion}
                 options={graphiteVersions}
@@ -70,7 +70,7 @@ export class ConfigEditor extends PureComponent<Props> {
           </div>
           <div className="gf-form-inline">
             <div className="gf-form">
-              <FormLabel tooltip={this.renderTypeHelp}>Type</FormLabel>
+              <InlineFormLabel tooltip={this.renderTypeHelp}>Type</InlineFormLabel>
               <Select
                 options={graphiteTypes}
                 value={graphiteTypes.find(type => type.value === options.jsonData.graphiteType)}

public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx

@@ -8,8 +8,8 @@ import {
   onUpdateDatasourceJsonDataOptionSelect,
   onUpdateDatasourceSecureJsonDataOption,
 } from '@grafana/data';
-import { DataSourceHttpSettings, FormLabel, SecretFormField, LegacyForms } from '@grafana/ui';
+import { DataSourceHttpSettings, InlineFormLabel, LegacyForms } from '@grafana/ui';
-const { Select, Input } = LegacyForms;
+const { Select, Input, SecretFormField } = LegacyForms;
 import { InfluxOptions, InfluxSecureJsonData } from '../types';
 
 const httpModes = [
@@ -41,7 +41,7 @@ export class ConfigEditor extends PureComponent<Props> {
         <div className="gf-form-group">
           <div className="gf-form-inline">
             <div className="gf-form">
-              <FormLabel className="width-10">Database</FormLabel>
+              <InlineFormLabel className="width-10">Database</InlineFormLabel>
               <div className="width-20">
                 <Input
                   className="width-20"
@@ -53,7 +53,7 @@ export class ConfigEditor extends PureComponent<Props> {
           </div>
           <div className="gf-form-inline">
             <div className="gf-form">
-              <FormLabel className="width-10">User</FormLabel>
+              <InlineFormLabel className="width-10">User</InlineFormLabel>
               <div className="width-10">
                 <Input
                   className="width-20"
@@ -78,14 +78,14 @@ export class ConfigEditor extends PureComponent<Props> {
           </div>
           <div className="gf-form-inline">
             <div className="gf-form">
-              <FormLabel
+              <InlineFormLabel
                 className="width-10"
                 tooltip="You can use either GET or POST HTTP method to query your InfluxDB database. The POST
           method allows you to perform heavy requests (with a lots of WHERE clause) while the GET method
           will restrict you and return an error if the query is too large."
               >
                 HTTP Method
-              </FormLabel>
+              </InlineFormLabel>
               <Select
                 className="width-10"
                 value={httpModes.find(httpMode => httpMode.value === options.jsonData.httpMode)}
@@ -112,13 +112,13 @@ export class ConfigEditor extends PureComponent<Props> {
         <div className="gf-form-group">
           <div className="gf-form-inline">
             <div className="gf-form">
-              <FormLabel
+              <InlineFormLabel
                 className="width-10"
                 tooltip="A lower limit for the auto group by time interval. Recommended to be set to write frequency,
 				for example 1m if your data is written every minute."
               >
                 Min time interval
-              </FormLabel>
+              </InlineFormLabel>
               <div className="width-10">
                 <Input
                   className="width-10"

public/app/plugins/datasource/loki/components/LokiExploreExtraField.tsx

@@ -2,7 +2,7 @@
 import React, { memo } from 'react';
 
 // Types
-import { FormLabel } from '@grafana/ui';
+import { InlineFormLabel } from '@grafana/ui';
 
 export interface LokiExploreExtraFieldProps {
   label: string;
@@ -19,7 +19,7 @@ export function LokiExploreExtraField(props: LokiExploreExtraFieldProps) {
   return (
     <div className="gf-form-inline explore-input--ml">
       <div className="gf-form">
-        <FormLabel width={6}>{label}</FormLabel>
+        <InlineFormLabel width={6}>{label}</InlineFormLabel>
         <input
           type={type}
           className="gf-form-input width-6"

public/app/plugins/datasource/loki/configuration/DebugSection.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { css } from 'emotion';
 import cx from 'classnames';
-import { FormField } from '@grafana/ui';
+import { LegacyForms } from '@grafana/ui';
+const { FormField } = LegacyForms;
 import { DerivedFieldConfig } from '../types';
 import { getLinksFromLogsField } from '../../../../features/panel/panellinks/linkSuppliers';
 import { ArrayVector, Field, FieldType, LinkModel } from '@grafana/data';

public/app/plugins/datasource/loki/configuration/DerivedField.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { css } from 'emotion';
-import { Button, FormField, DataLinkInput, stylesFactory, LegacyForms } from '@grafana/ui';
+import { Button, DataLinkInput, stylesFactory, LegacyForms } from '@grafana/ui';
-const { Switch } = LegacyForms;
+const { Switch, FormField } = LegacyForms;
 import { VariableSuggestion } from '@grafana/data';
 import { DataSourceSelectItem } from '@grafana/data';
 

public/app/plugins/datasource/loki/configuration/MaxLinesField.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormField } from '@grafana/ui';
+import { LegacyForms } from '@grafana/ui';
+const { FormField } = LegacyForms;
 
 type Props = {
   value: string;

public/app/plugins/datasource/opentsdb/components/OpenTsdbDetails.tsx

@@ -1,5 +1,5 @@
 import React, { SyntheticEvent } from 'react';
-import { FormLabel, LegacyForms } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms } from '@grafana/ui';
 const { Select, Input } = LegacyForms;
 import { DataSourceSettings, SelectableValue } from '@grafana/data';
 import { OpenTsdbOptions } from '../types';
@@ -27,7 +27,7 @@ export const OpenTsdbDetails = (props: Props) => {
     <>
       <h5>OpenTSDB settings</h5>
       <div className="gf-form">
-        <FormLabel width={7}>Version</FormLabel>
+        <InlineFormLabel width={7}>Version</InlineFormLabel>
         <Select
           options={tsdbVersions}
           value={tsdbVersions.find(version => version.value === value.jsonData.tsdbVersion) ?? tsdbVersions[0]}
@@ -35,7 +35,7 @@ export const OpenTsdbDetails = (props: Props) => {
         />
       </div>
       <div className="gf-form">
-        <FormLabel width={7}>Resolution</FormLabel>
+        <InlineFormLabel width={7}>Resolution</InlineFormLabel>
         <Select
           options={tsdbResolutions}
           value={
@@ -45,7 +45,7 @@ export const OpenTsdbDetails = (props: Props) => {
         />
       </div>
       <div className="gf-form">
-        <FormLabel width={7}>Lookup Limit</FormLabel>
+        <InlineFormLabel width={7}>Lookup Limit</InlineFormLabel>
         <Input
           type="number"
           value={value.jsonData.lookupLimit ?? 1000}

public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx

@@ -2,7 +2,7 @@
 import React, { memo } from 'react';
 
 // Types
-import { FormLabel } from '@grafana/ui';
+import { InlineFormLabel } from '@grafana/ui';
 
 export interface PromExploreExtraFieldProps {
   label: string;
@@ -19,9 +19,9 @@ export function PromExploreExtraField(props: PromExploreExtraFieldProps) {
   return (
     <div className="gf-form-inline explore-input--ml" aria-label="Prometheus extra field">
       <div className="gf-form">
-        <FormLabel width={5} tooltip={hasTooltip ? tooltipContent : null}>
+        <InlineFormLabel width={5} tooltip={hasTooltip ? tooltipContent : null}>
           {label}
-        </FormLabel>
+        </InlineFormLabel>
         <input
           type={'text'}
           className="gf-form-input width-4"

public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import React, { PureComponent } from 'react';
 
 // Types
-import { FormLabel, LegacyForms, Select } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
 import { SelectableValue, QueryEditorProps } from '@grafana/data';
 
 const { Switch } = LegacyForms;
@@ -112,13 +112,13 @@ export class PromQueryEditor extends PureComponent<Props, State> {
 
         <div className="gf-form-inline">
           <div className="gf-form">
-            <FormLabel
+            <InlineFormLabel
               width={7}
               tooltip="Controls the name of the time series, using name or pattern. For example
         {{hostname}} will be replaced with label value for the label hostname."
             >
               Legend
-            </FormLabel>
+            </InlineFormLabel>
             <input
               type="text"
               className="gf-form-input"
@@ -130,7 +130,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
           </div>
 
           <div className="gf-form">
-            <FormLabel
+            <InlineFormLabel
               width={7}
               tooltip={
                 <>
@@ -140,7 +140,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
               }
             >
               Min step
-            </FormLabel>
+            </InlineFormLabel>
             <input
               type="text"
               className="gf-form-input width-8"
@@ -172,13 +172,13 @@ export class PromQueryEditor extends PureComponent<Props, State> {
             />
             <Switch label="Instant" checked={instant} onChange={this.onInstantChange} />
 
-            <FormLabel width={10} tooltip="Link to Graph in Prometheus">
+            <InlineFormLabel width={10} tooltip="Link to Graph in Prometheus">
               <PromLink
                 datasource={datasource}
                 query={this.query} // Use modified query
                 panelData={data}
               />
-            </FormLabel>
+            </InlineFormLabel>
           </div>
         </div>
       </div>

public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx

@@ -1,6 +1,6 @@
 import React, { SyntheticEvent } from 'react';
-import { EventsWithValidation, FormField, FormLabel, regexValidation, LegacyForms } from '@grafana/ui';
+import { EventsWithValidation, InlineFormLabel, regexValidation, LegacyForms } from '@grafana/ui';
-const { Select, Input } = LegacyForms;
+const { Select, Input, FormField } = LegacyForms;
 import { DataSourceSettings, SelectableValue } from '@grafana/data';
 import { PromOptions } from '../types';
 
@@ -59,12 +59,12 @@ export const PromSettings = (props: Props) => {
           </div>
         </div>
         <div className="gf-form">
-          <FormLabel
+          <InlineFormLabel
             width={13}
             tooltip="Specify the HTTP Method to query Prometheus. (POST is only available in Prometheus >= v2.1.0)"
           >
             HTTP Method
-          </FormLabel>
+          </InlineFormLabel>
           <Select
             options={httpOptions}
             value={httpOptions.find(o => o.value === value.jsonData.httpMethod)}

public/app/plugins/datasource/stackdriver/components/Fields.tsx

@@ -1,5 +1,5 @@
 import React, { InputHTMLAttributes, FunctionComponent } from 'react';
-import { FormLabel } from '@grafana/ui';
+import { InlineFormLabel } from '@grafana/ui';
 
 export interface Props extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
@@ -9,9 +9,9 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement> {
 
 export const QueryField: FunctionComponent<Partial<Props>> = ({ label, tooltip, children }) => (
   <>
-    <FormLabel width={9} className="query-keyword" tooltip={tooltip}>
+    <InlineFormLabel width={9} className="query-keyword" tooltip={tooltip}>
       {label}
-    </FormLabel>
+    </InlineFormLabel>
     {children}
   </>
 );

public/app/plugins/datasource/testdata/QueryEditor.tsx

@@ -6,7 +6,7 @@ import _ from 'lodash';
 import { getBackendSrv } from '@grafana/runtime';
 
 // Components
-import { FormLabel, LegacyForms } from '@grafana/ui';
+import { InlineFormLabel, LegacyForms } from '@grafana/ui';
 const { Select } = LegacyForms;
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
 
@@ -56,9 +56,9 @@ export class QueryEditor extends PureComponent<Props> {
     return (
       <div className="gf-form-inline">
         <div className="gf-form">
-          <FormLabel className="query-keyword" width={7}>
+          <InlineFormLabel className="query-keyword" width={7}>
             Scenario
-          </FormLabel>
+          </InlineFormLabel>
           <Select options={options} value={current} onChange={this.onScenarioChange} />
         </div>
       </div>

public/app/plugins/panel/piechart/PieChartOptionsBox.tsx

@@ -2,12 +2,12 @@
 import React, { PureComponent } from 'react';
 
 // Components
-import { LegacyForms, FormLabel, PanelOptionsGroup } from '@grafana/ui';
+import { LegacyForms, InlineFormLabel, PanelOptionsGroup } from '@grafana/ui';
-const { Select } = LegacyForms;
+const { Select, FormField } = LegacyForms;
 
 // Types
 import { PanelEditorProps } from '@grafana/data';
-import { FormField, PieChartType } from '@grafana/ui';
+import { PieChartType } from '@grafana/ui';
 import { PieChartOptions } from './types';
 
 const labelWidth = 8;
@@ -29,7 +29,7 @@ export class PieChartOptionsBox extends PureComponent<PanelEditorProps<PieChartO
     return (
       <PanelOptionsGroup title="PieChart">
         <div className="gf-form">
-          <FormLabel width={labelWidth}>Type</FormLabel>
+          <InlineFormLabel width={labelWidth}>Type</InlineFormLabel>
           <Select
             width={12}
             options={pieChartOptions}