public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Forms migration: Remove Input from Forms namespace (#23301)

Browse Source
This commit is contained in:
Tobias Skarhed
2020-04-03 10:04:19 +02:00
committed by GitHub
parent c7ffc1199c
commit 2e58a65e8f
21 changed files with 61 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/Forms/index.ts
+2
View File
@@ -1,6 +1,7 @@
import { Controller as InputControl } from 'react-hook-form';
import { getFormStyles } from './getFormStyles';
import { Label } from './Label';
// To be removed
import { Input } from './Input/Input';
import { RadioButtonGroup } from './RadioButtonGroup/RadioButtonGroup';
import { Form } from './Form';
@@ -15,6 +16,7 @@ const Forms = {
Switch,
getFormStyles,
Label,
// To be removed
Input,
Form,
Field,
packages/grafana-ui/src/components/OptionsUI/number.tsx
+2 -2
View File
@@ -5,7 +5,7 @@ import {
toFloatOrUndefined,
NumberFieldConfigSettings,
} from '@grafana/data';
import Forms from '../Forms';
import { Input } from '../Forms/Input/Input';
export const NumberValueEditor: React.FC<FieldConfigEditorProps<number, NumberFieldConfigSettings>> = ({
value,
@@ -14,7 +14,7 @@ export const NumberValueEditor: React.FC<FieldConfigEditorProps<number, NumberFi
}) => {
const { settings } = item;
return (
<Forms.Input
<Input
value={isNaN(value) ? '' : value}
min={settings?.min}
max={settings?.max}
packages/grafana-ui/src/components/OptionsUI/string.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { FieldConfigEditorProps, StringFieldConfigSettings } from '@grafana/data';
import Forms from '../Forms';
import { Input } from '../Forms/Input/Input';
export const StringValueEditor: React.FC<FieldConfigEditorProps<string, StringFieldConfigSettings>> = ({
value,
@@ -8,7 +8,7 @@ export const StringValueEditor: React.FC<FieldConfigEditorProps<string, StringFi
item,
}) => {
return (
<Forms.Input
<Input
placeholder={item.settings?.placeholder}
value={value || ''}
onChange={e => onChange(e.currentTarget.value)}
packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeForm.tsx
+3 -2
View File
@@ -4,6 +4,7 @@ import { stringToDateTimeType, isValidTimeString } from '../time';
import { mapStringsToTimeRange } from './mapper';
import { TimePickerCalendar } from './TimePickerCalendar';
import Forms from '../../Forms';
import { Input } from '../../Forms/Input/Input';
import { Button } from '../../Button';
interface Props {
@@ -66,7 +67,7 @@ export const TimeRangeForm: React.FC<Props> = props => {
return (
<>
<Forms.Field label="From" invalid={from.invalid} error={errorMessage}>
<Forms.Input
<Input
onClick={event => event.stopPropagation()}
onFocus={onFocus}
onChange={event => setFrom(eventToState(event, false, timeZone))}
@@ -75,7 +76,7 @@ export const TimeRangeForm: React.FC<Props> = props => {
/>
</Forms.Field>
<Forms.Field label="To" invalid={to.invalid} error={errorMessage}>
<Forms.Input
<Input
onClick={event => event.stopPropagation()}
onFocus={onFocus}
onChange={event => setTo(eventToState(event, true, timeZone))}
packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
+6 -5
View File
@@ -2,6 +2,7 @@ import React, { ChangeEvent } from 'react';
import { HorizontalGroup } from '../Layout/Layout';
import { Select } from '../index';
import Forms from '../Forms';
import { Input } from '../Forms/Input/Input';
import { MappingType, RangeMap, ValueMap, ValueMapping } from '@grafana/data';
import * as styleMixins from '../../themes/mixins';
import { useTheme } from '../../themes';
@@ -48,15 +49,15 @@ export const MappingRow: React.FC<Props> = ({ valueMapping, updateValueMapping,
<>
<HorizontalGroup>
<Forms.Field label="From">
<Forms.Input type="number" defaultValue={(valueMapping as RangeMap).from!} onBlur={onMappingFromChange} />
<Input type="number" defaultValue={(valueMapping as RangeMap).from!} onBlur={onMappingFromChange} />
</Forms.Field>
<Forms.Field label="To">
<Forms.Input type="number" defaultValue={(valueMapping as RangeMap).to} onBlur={onMappingToChange} />
<Input type="number" defaultValue={(valueMapping as RangeMap).to} onBlur={onMappingToChange} />
</Forms.Field>
</HorizontalGroup>
<Forms.Field label="Text">
<Forms.Input defaultValue={valueMapping.text} onBlur={onMappingTextChange} />
<Input defaultValue={valueMapping.text} onBlur={onMappingTextChange} />
</Forms.Field>
</>
);
@@ -65,11 +66,11 @@ export const MappingRow: React.FC<Props> = ({ valueMapping, updateValueMapping,
return (
<>
<Forms.Field label="Value">
<Forms.Input type="number" defaultValue={(valueMapping as ValueMap).value} onBlur={onMappingValueChange} />
<Input type="number" defaultValue={(valueMapping as ValueMap).value} onBlur={onMappingValueChange} />
</Forms.Field>
<Forms.Field label="Text">
<Forms.Input defaultValue={valueMapping.text} onBlur={onMappingTextChange} />
<Input defaultValue={valueMapping.text} onBlur={onMappingTextChange} />
</Forms.Field>
</>
);
packages/grafana-ui/src/components/index.ts
+2
View File
@@ -139,6 +139,8 @@ export { ButtonSelect } from './Select/ButtonSelect';
export { HorizontalGroup, VerticalGroup, Container } from './Layout/Layout';
export { RadioButtonGroup } from './Forms/RadioButtonGroup/RadioButtonGroup';
export { Input } from './Forms/Input/Input';
// Legacy forms
// Select
public/app/core/components/FilterInput/FilterInput.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import React, { FC } from 'react';
import { escapeStringForRegex, unEscapeStringFromRegex } from '@grafana/data';
import { Forms, Icon } from '@grafana/ui';
import { Input, Icon } from '@grafana/ui';
export interface Props {
value: string | undefined;
@@ -11,7 +11,7 @@ export interface Props {
}
export const FilterInput: FC<Props> = props => (
<Forms.Input
<Input
// Replaces the usage of ref
autoFocus
prefix={<Icon name="search" />}
public/app/features/admin/UserCreatePage.tsx
+5 -5
View File
@@ -1,7 +1,7 @@
import React, { useCallback } from 'react';
import { hot } from 'react-hot-loader';
import { connect } from 'react-redux';
import { Forms, Button } from '@grafana/ui';
import { Forms, Button, Input } from '@grafana/ui';
import { NavModel } from '@grafana/data';
import { getBackendSrv } from '@grafana/runtime';
import { StoreState } from '../../types';
@@ -37,15 +37,15 @@ const UserCreatePage: React.FC<UserCreatePageProps> = ({ navModel, updateLocatio
return (
<>
<Forms.Field label="Name" required invalid={!!errors.name} error={!!errors.name && 'Name is required'}>
<Forms.Input name="name" size="md" ref={register({ required: true })} />
<Input name="name" size="md" ref={register({ required: true })} />
</Forms.Field>
<Forms.Field label="E-mail">
<Forms.Input name="email" size="md" ref={register} />
<Input name="email" size="md" ref={register} />
</Forms.Field>
<Forms.Field label="Username">
<Forms.Input name="login" size="md" ref={register} />
<Input name="login" size="md" ref={register} />
</Forms.Field>
<Forms.Field
label="Password"
@@ -53,7 +53,7 @@ const UserCreatePage: React.FC<UserCreatePageProps> = ({ navModel, updateLocatio
invalid={!!errors.password}
error={!!errors.password && 'Password is required and must contain at least 4 characters'}
>
<Forms.Input
<Input
size="md"
type="password"
name="password"
public/app/features/admin/UserListAdminPage.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { css, cx } from 'emotion';
import { hot } from 'react-hot-loader';
import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
import { NavModel } from '@grafana/data';
import { Pagination, Forms, Tooltip, HorizontalGroup, stylesFactory, LinkButton } from '@grafana/ui';
import { Pagination, Tooltip, HorizontalGroup, stylesFactory, LinkButton, Input } from '@grafana/ui';
import { StoreState, UserDTO } from '../../types';
import Page from 'app/core/components/Page/Page';
import { getNavModel } from '../../core/selectors/navModel';
@@ -42,7 +42,7 @@ const UserListAdminPageUnConnected: React.FC<Props> = props => {
<>
<div>
<HorizontalGroup justify="space-between">
<Forms.Input
<Input
size="md"
type="text"
placeholder="Search user by login,email or name"
public/app/features/admin/UserProfile.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { UserDTO } from 'app/types';
import { cx, css } from 'emotion';
import { config } from 'app/core/config';
import { GrafanaTheme } from '@grafana/data';
import { ConfirmButton, ConfirmModal, LegacyInputStatus, Button, stylesFactory, Forms } from '@grafana/ui';
import { ConfirmButton, ConfirmModal, LegacyInputStatus, Button, stylesFactory, Input } from '@grafana/ui';
interface Props {
user: UserDTO;
@@ -265,7 +265,7 @@ export class UserProfileRow extends PureComponent<UserProfileRowProps, UserProfi
<td className={labelClass}>{label}</td>
<td className="width-25" colSpan={2}>
{this.state.editing ? (
<Forms.Input
<Input
size="md"
type={inputType}
defaultValue={value}
public/app/features/dashboard/components/PanelEditor/GeneralPanelOptions.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import React, { FC, useMemo } from 'react';
import { PanelModel } from '../../state';
import { SelectableValue } from '@grafana/data';
import { Forms, Select, DataLinksInlineEditor } from '@grafana/ui';
import { Forms, Select, DataLinksInlineEditor, Input } from '@grafana/ui';
import { OptionsGroup } from './OptionsGroup';
import { getPanelLinksVariableSuggestions } from '../../../panel/panellinks/link_srv';
import { getVariables } from '../../../variables/state/selectors';
@@ -24,7 +24,7 @@ export const GeneralPanelOptions: FC<{
<div>
<OptionsGroup title="Panel settings">
<Forms.Field label="Panel title">
<Forms.Input defaultValue={panel.title} onBlur={e => onPanelConfigChange('title', e.currentTarget.value)} />
<Input defaultValue={panel.title} onBlur={e => onPanelConfigChange('title', e.currentTarget.value)} />
</Forms.Field>
<Forms.Field label="Description" description="Panel description supports markdown and links.">
<Forms.TextArea
public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx
+2 -2
View File
@@ -10,8 +10,8 @@ import {
TabsBar,
useTheme,
Container,
Forms,
Icon,
Input,
} from '@grafana/ui';
import { DefaultFieldConfigEditor, OverrideFieldConfigEditor } from './FieldConfigEditor';
import { AngularPanelOptions } from './AngularPanelOptions';
@@ -147,7 +147,7 @@ export const OptionsPaneContent: React.FC<{
return (
<div className={styles.searchWrapper}>
<div style={{ ...defaultStyles, ...transitionStyles[state] }}>
<Forms.Input
<Input
className={styles.searchInput}
type="text"
prefix={<Icon name="search" />}
public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import React, { FC, useState } from 'react';
import { css } from 'emotion';
import { GrafanaTheme, PanelPlugin, PanelPluginMeta } from '@grafana/data';
import { CustomScrollbar, useTheme, stylesFactory, Forms, Icon } from '@grafana/ui';
import { CustomScrollbar, useTheme, stylesFactory, Icon, Input } from '@grafana/ui';
import { changePanelPlugin } from '../../state/actions';
import { StoreState } from 'app/types';
import { PanelModel } from '../../state/PanelModel';
@@ -45,7 +45,7 @@ export const VisualizationTabUnconnected: FC<Props> = ({ panel, plugin, changePa
return (
<div className={styles.wrapper}>
<div className={styles.search}>
<Forms.Input
<Input
value={searchQuery}
onChange={e => setSearchQuery(e.currentTarget.value)}
prefix={<Icon name="filter" className={styles.icon} />}
public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
+2 -7
View File
@@ -1,5 +1,5 @@
import React from 'react';
import { Button, Forms, HorizontalGroup } from '@grafana/ui';
import { Button, Forms, HorizontalGroup, Input } from '@grafana/ui';
import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
import { FolderPicker } from 'app/core/components/Select/FolderPicker';
import { SaveDashboardFormProps } from '../types';
@@ -75,12 +75,7 @@ export const SaveDashboardAsForm: React.FC<SaveDashboardFormProps & { isNew?: bo
{({ register, control, errors }) => (
<>
<Forms.Field label="Dashboard name" invalid={!!errors.title} error="Dashboard name is required">
<Forms.Input
name="title"
ref={register({ required: true })}
aria-label="Save dashboard title field"
autoFocus
/>
<Input name="title" ref={register({ required: true })} aria-label="Save dashboard title field" autoFocus />
</Forms.Field>
<Forms.Field label="Folder">
<Forms.InputControl
public/app/features/folders/components/NewDashboardsFolder.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import React, { PureComponent } from 'react';
import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
import { NavModel } from '@grafana/data';
import { Forms, Button } from '@grafana/ui';
import { Forms, Button, Input } from '@grafana/ui';
import Page from 'app/core/components/Page/Page';
import { createNewFolder } from '../state/actions';
import { getNavModel } from 'app/core/selectors/navModel';
@@ -55,7 +55,7 @@ export class NewDashboardsFolder extends PureComponent<Props> {
invalid={!!errors.folderName}
error={errors.folderName && errors.folderName.message}
>
<Forms.Input
<Input
name="folderName"
ref={register({
required: 'Folder name is required.',
public/app/features/manage-dashboards/DashboardImportPage.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import React, { FormEvent, PureComponent } from 'react';
import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
import { css } from 'emotion';
import { AppEvents, NavModel } from '@grafana/data';
import { Button, Forms, stylesFactory } from '@grafana/ui';
import { Button, Forms, stylesFactory, Input } from '@grafana/ui';
import Page from 'app/core/components/Page/Page';
import { ImportDashboardOverview } from './components/ImportDashboardOverview';
import { DashboardFileUpload } from './components/DashboardFileUpload';
@@ -87,7 +87,7 @@ class DashboardImportUnConnected extends PureComponent<Props> {
invalid={!!errors.gcomDashboard}
error={errors.gcomDashboard && errors.gcomDashboard.message}
>
<Forms.Input
<Input
size="md"
name="gcomDashboard"
placeholder="Grafana.com dashboard url or id"
public/app/features/manage-dashboards/components/ImportDashboardForm.tsx
+5 -5
View File
@@ -1,5 +1,5 @@
import React, { FC, useEffect, useState } from 'react';
import { Button, Forms, FormAPI, FormsOnSubmit, HorizontalGroup, FormFieldErrors } from '@grafana/ui';
import { Button, Forms, FormAPI, FormsOnSubmit, HorizontalGroup, FormFieldErrors, Input } from '@grafana/ui';
import { FolderPicker } from 'app/core/components/Select/FolderPicker';
import DataSourcePicker from 'app/core/components/Select/DataSourcePicker';
import { DashboardInput, DashboardInputs, DataSourceInput, ImportDashboardDTO } from '../state/reducers';
@@ -43,7 +43,7 @@ export const ImportDashboardForm: FC<Props> = ({
<>
<Forms.Legend>Options</Forms.Legend>
<Forms.Field label="Name" invalid={!!errors.title} error={errors.title && errors.title.message}>
<Forms.Input
<Input
name="title"
size="md"
type="text"
@@ -72,7 +72,7 @@ export const ImportDashboardForm: FC<Props> = ({
>
<>
{!uidReset ? (
<Forms.Input
<Input
size="md"
name="uid"
disabled
@@ -80,7 +80,7 @@ export const ImportDashboardForm: FC<Props> = ({
addonAfter={!uidReset && <Button onClick={onUidReset}>Change uid</Button>}
/>
) : (
<Forms.Input
<Input
size="md"
name="uid"
ref={register({ required: true, validate: async (v: string) => await validateUid(v) })}
@@ -119,7 +119,7 @@ export const ImportDashboardForm: FC<Props> = ({
invalid={errors.constants && !!errors.constants[index]}
key={constantIndex}
>
<Forms.Input
<Input
ref={register({ required: true })}
name={`${constantIndex}`}
size="md"
public/app/features/org/NewOrgPage.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import React, { FC } from 'react';
import { getBackendSrv } from '@grafana/runtime';
import Page from 'app/core/components/Page/Page';
import { Forms, Button } from '@grafana/ui';
import { Forms, Button, Input } from '@grafana/ui';
import { getConfig } from 'app/core/config';
import { StoreState } from 'app/types';
import { hot } from 'react-hot-loader';
@@ -58,7 +58,7 @@ export const NewOrgPage: FC<PropsWithState> = ({ navModel }) => {
invalid={!!errors.name}
error={errors.name && errors.name.message}
>
<Forms.Input
<Input
size="md"
placeholder="Org. name"
name="name"
public/app/features/org/UserInviteForm.tsx
+3 -8
View File
@@ -1,5 +1,5 @@
import React, { FC } from 'react';
import { Forms, HorizontalGroup, Button, LinkButton } from '@grafana/ui';
import { Forms, HorizontalGroup, Button, LinkButton, Input } from '@grafana/ui';
import { getConfig } from 'app/core/config';
import { OrgRole } from 'app/types';
import { getBackendSrv } from '@grafana/runtime';
@@ -54,15 +54,10 @@ export const UserInviteForm: FC<Props> = ({ updateLocation }) => {
error={!!errors.loginOrEmail && 'Email or Username is required'}
label="Email or Username"
>
<Forms.Input
size="md"
name="loginOrEmail"
placeholder="email@example.com"
ref={register({ required: true })}
/>
<Input size="md" name="loginOrEmail" placeholder="email@example.com" ref={register({ required: true })} />
</Forms.Field>
<Forms.Field invalid={!!errors.name} label="Name">
<Forms.Input size="md" name="name" placeholder="(optional)" ref={register} />
<Input size="md" name="name" placeholder="(optional)" ref={register} />
</Forms.Field>
<Forms.Field invalid={!!errors.role} label="Role">
<Forms.InputControl as={Forms.RadioButtonGroup} control={control} options={roles} name="role" />
public/app/features/profile/SignupForm.tsx
+6 -6
View File
@@ -1,5 +1,5 @@
import React, { FC } from 'react';
import { Forms, Button, LinkButton } from '@grafana/ui';
import { Forms, Button, LinkButton, Input } from '@grafana/ui';
import { css } from 'emotion';
import { getConfig } from 'app/core/config';
@@ -66,19 +66,19 @@ export const SignupForm: FC<Props> = props => {
<>
{verifyEmailEnabled && (
<Forms.Field label="Email verification code (sent to your email)">
<Forms.Input name="code" size="md" ref={register} placeholder="Code" />
<Input name="code" size="md" ref={register} placeholder="Code" />
</Forms.Field>
)}
{!autoAssignOrg && (
<Forms.Field label="Org. name">
<Forms.Input size="md" name="orgName" placeholder="Org. name" ref={register} />
<Input size="md" name="orgName" placeholder="Org. name" ref={register} />
</Forms.Field>
)}
<Forms.Field label="Your name">
<Forms.Input size="md" name="name" placeholder="(optional)" ref={register} />
<Input size="md" name="name" placeholder="(optional)" ref={register} />
</Forms.Field>
<Forms.Field label="Email" invalid={!!errors.email} error={!!errors.email && errors.email.message}>
<Forms.Input
<Input
size="md"
name="email"
type="email"
@@ -97,7 +97,7 @@ export const SignupForm: FC<Props> = props => {
invalid={!!errors.password}
error={!!errors.password && errors.password.message}
>
<Forms.Input
<Input
size="md"
name="password"
type="password"
public/app/features/users/SignupInvited.tsx
+5 -5
View File
@@ -4,7 +4,7 @@ import { connect, MapStateToProps, MapDispatchToProps } from 'react-redux';
import { StoreState } from 'app/types';
import { updateLocation } from 'app/core/actions';
import { UrlQueryValue, getBackendSrv } from '@grafana/runtime';
import { Forms, Button } from '@grafana/ui';
import { Forms, Button, Input } from '@grafana/ui';
import { useAsync } from 'react-use';
import Page from 'app/core/components/Page/Page';
import { contextSrv } from 'app/core/core';
@@ -73,7 +73,7 @@ const SingupInvitedPageUnconnected: FC<DispatchProps & ConnectedProps> = ({ code
{({ register, errors }) => (
<>
<Forms.Field invalid={!!errors.email} error={!!errors.email && errors.email.message} label="Email">
<Forms.Input
<Input
size="md"
placeholder="email@example.com"
name="email"
@@ -87,14 +87,14 @@ const SingupInvitedPageUnconnected: FC<DispatchProps & ConnectedProps> = ({ code
/>
</Forms.Field>
<Forms.Field invalid={!!errors.name} error={!!errors.name && errors.name.message} label="Name">
<Forms.Input size="md" placeholder="Name (optional)" name="name" ref={register} />
<Input size="md" placeholder="Name (optional)" name="name" ref={register} />
</Forms.Field>
<Forms.Field
invalid={!!errors.username}
error={!!errors.username && errors.username.message}
label="Username"
>
<Forms.Input
<Input
size="md"
placeholder="Username"
name="username"
@@ -106,7 +106,7 @@ const SingupInvitedPageUnconnected: FC<DispatchProps & ConnectedProps> = ({ code
error={!!errors.password && errors.password.message}
label="Password"
>
<Forms.Input
<Input
size="md"
type="password"
placeholder="Password"