Form migrations: Last components from Forms namespace (#23556)

* Migrate RadioButtonGroup

* Migrate Label

* Migrate Form

* Migrate Field

* Missing Form import

* Migrate InputControl

* Migrate Checkbox

* Move InputControl and uncomment

* Fix small issues

* inor fix

* Fix import

* Fix stuff

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, Input } from '@grafana/ui';
+import { Button, Input, Field, Form } from '@grafana/ui';
 import { getConfig } from 'app/core/config';
 import { StoreState } from 'app/types';
 import { hot } from 'react-hot-loader';
@@ -49,15 +49,11 @@ export const NewOrgPage: FC<PropsWithState> = ({ navModel }) => {
           deployments.{' '}
         </p>
 
-        <Forms.Form<CreateOrgFormDTO> onSubmit={createOrg}>
+        <Form<CreateOrgFormDTO> onSubmit={createOrg}>
           {({ register, errors }) => {
             return (
               <>
-                <Forms.Field
-                  label="Organization name"
-                  invalid={!!errors.name}
-                  error={errors.name && errors.name.message}
-                >
+                <Field label="Organization name" invalid={!!errors.name} error={errors.name && errors.name.message}>
                   <Input
                     size="md"
                     placeholder="Org. name"
@@ -67,12 +63,12 @@ export const NewOrgPage: FC<PropsWithState> = ({ navModel }) => {
                       validate: async orgName => await validateOrg(orgName),
                     })}
                   />
-                </Forms.Field>
+                </Field>
                 <Button type="submit">Create</Button>
               </>
             );
           }}
-        </Forms.Form>
+        </Form>
       </Page.Contents>
     </Page>
   );

public/app/features/org/UserInviteForm.tsx

@@ -1,5 +1,15 @@
 import React, { FC } from 'react';
-import { Forms, HorizontalGroup, Button, LinkButton, Input, Switch } from '@grafana/ui';
+import {
+  HorizontalGroup,
+  Button,
+  LinkButton,
+  Input,
+  Switch,
+  RadioButtonGroup,
+  Form,
+  Field,
+  InputControl,
+} from '@grafana/ui';
 import { getConfig } from 'app/core/config';
 import { OrgRole } from 'app/types';
 import { getBackendSrv } from '@grafana/runtime';
@@ -45,26 +55,26 @@ export const UserInviteForm: FC<Props> = ({ updateLocation }) => {
   };
 
   return (
-    <Forms.Form defaultValues={defaultValues} onSubmit={onSubmit}>
+    <Form defaultValues={defaultValues} onSubmit={onSubmit}>
       {({ register, control, errors }) => {
         return (
           <>
-            <Forms.Field
+            <Field
               invalid={!!errors.loginOrEmail}
               error={!!errors.loginOrEmail && 'Email or Username is required'}
               label="Email or Username"
             >
               <Input size="md" name="loginOrEmail" placeholder="email@example.com" ref={register({ required: true })} />
-            </Forms.Field>
-            <Forms.Field invalid={!!errors.name} label="Name">
+            </Field>
+            <Field invalid={!!errors.name} label="Name">
               <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" />
-            </Forms.Field>
-            <Forms.Field invalid={!!errors.sendEmail} label="Send invite email">
+            </Field>
+            <Field invalid={!!errors.role} label="Role">
+              <InputControl as={RadioButtonGroup} control={control} options={roles} name="role" />
+            </Field>
+            <Field invalid={!!errors.sendEmail} label="Send invite email">
               <Switch name="sendEmail" ref={register} />
-            </Forms.Field>
+            </Field>
             <HorizontalGroup>
               <Button type="submit">Submit</Button>
               <LinkButton href={assureBaseUrl(getConfig().appSubUrl + '/org/users')} variant="secondary">
@@ -74,7 +84,7 @@ export const UserInviteForm: FC<Props> = ({ updateLocation }) => {
           </>
         );
       }}
-    </Forms.Form>
+    </Form>
   );
 };