Skip to content

N
nexpie-grafana-theme
Commit 7e429250 by Tobias Skarhed Committed by GitHub
Options

Form migrations: Final components to LegacyForms (#23707) 

* FormField to LegacyForms

* FormLabel to InlineFormLabel

* Move SecretFormField to LeagcyForms
parent b7809918
Showing with 155 additions and 138 deletions
packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
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
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
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
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
// Libraries
import React, { PureComponent, ChangeEvent } from 'react';
import { FormLabel, LegacyForms, FormField } from '@grafana/ui';
const { Select } = LegacyForms;
import { InlineFormLabel, LegacyForms } from '@grafana/ui';
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
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
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
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
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
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
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
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
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
import React from 'react';
import { EventsWithValidation, FormField, regexValidation, LegacyForms } from '@grafana/ui';
const { Select, Input } = LegacyForms;
import { EventsWithValidation, regexValidation, LegacyForms } from '@grafana/ui';
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
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
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
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
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
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';
const { Select, Input } = LegacyForms;
import { DataSourceHttpSettings, InlineFormLabel, LegacyForms } from '@grafana/ui';
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
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
import React, { useEffect, useState } from 'react';
import { css } from 'emotion';
import { Button, FormField, DataLinkInput, stylesFactory, LegacyForms } from '@grafana/ui';
const { Switch } = LegacyForms;
import { Button, DataLinkInput, stylesFactory, LegacyForms } from '@grafana/ui';
const { Switch, FormField } = LegacyForms;
import { VariableSuggestion } from '@grafana/data';
import { DataSourceSelectItem } from '@grafana/data';
......
public/app/plugins/datasource/loki/configuration/MaxLinesField.tsx
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
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
import React, { SyntheticEvent } from 'react';
import { EventsWithValidation, FormField, FormLabel, regexValidation, LegacyForms } from '@grafana/ui';
const { Select, Input } = LegacyForms;
import { EventsWithValidation, InlineFormLabel, regexValidation, LegacyForms } from '@grafana/ui';
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
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';
const { Select } = LegacyForms;
import { LegacyForms, InlineFormLabel, PanelOptionsGroup } from '@grafana/ui';
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}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment