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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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
+            <Input name="title" ref={register({ required: true })} aria-label="Save dashboard title field" autoFocus />
-              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

@@ -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,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

@@ -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

@@ -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

@@ -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
+              <Input size="md" name="loginOrEmail" placeholder="email@example.com" ref={register({ required: true })} />
-                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

@@ -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

@@ -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"