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

2e58a65e · Tobias Skarhed · GitHub · c7ffc119 · 2e58a65e · 2e58a65e
Commit 2e58a65e authored Apr 03, 2020 by Tobias Skarhed Committed by GitHub Apr 03, 2020
21 changed files
--- a/packages/grafana-ui/src/components/Forms/index.ts
+++ b/packages/grafana-ui/src/components/Forms/index.ts
 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,

--- a/packages/grafana-ui/src/components/OptionsUI/number.tsx
+++ b/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}

--- a/packages/grafana-ui/src/components/OptionsUI/string.tsx
+++ b/packages/grafana-ui/src/components/OptionsUI/string.tsx
 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)}

--- a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeForm.tsx
+++ b/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))}

--- a/packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
+++ b/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>
      </>
    );

--- a/packages/grafana-ui/src/components/index.ts
+++ b/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

--- a/public/app/core/components/FilterInput/FilterInput.tsx
+++ b/public/app/core/components/FilterInput/FilterInput.tsx
 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" />}

--- a/public/app/features/admin/UserCreatePage.tsx
+++ b/public/app/features/admin/UserCreatePage.tsx
 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"

--- a/public/app/features/admin/UserListAdminPage.tsx
+++ b/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"

--- a/public/app/features/admin/UserProfile.tsx
+++ b/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}

--- a/public/app/features/dashboard/components/PanelEditor/GeneralPanelOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/GeneralPanelOptions.tsx
 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

--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx
+++ b/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" />}

--- a/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx
 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} />}

--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
 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

--- a/public/app/features/folders/components/NewDashboardsFolder.tsx
+++ b/public/app/features/folders/components/NewDashboardsFolder.tsx
 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.',

--- a/public/app/features/manage-dashboards/DashboardImportPage.tsx
+++ b/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"

--- a/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx
+++ b/public/app/features/manage-dashboards/components/ImportDashboardForm.tsx
 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"

--- a/public/app/features/org/NewOrgPage.tsx
+++ b/public/app/features/org/NewOrgPage.tsx
 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"

--- a/public/app/features/org/UserInviteForm.tsx
+++ b/public/app/features/org/UserInviteForm.tsx
 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" />

--- a/public/app/features/profile/SignupForm.tsx
+++ b/public/app/features/profile/SignupForm.tsx
 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"

--- a/public/app/features/users/SignupInvited.tsx
+++ b/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"