Chore: Remove Form usage in Signup components (#81532)

* Chore: Remove Form component from SignupPage.tsx

* Replace HorizontalGroup with Stack

* Replace form in VerifyEmail.tsx

* Remove max-width

public/app/core/components/Signup/SignupPage.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import { useForm } from 'react-hook-form';
 
 import { getBackendSrv } from '@grafana/runtime';
-import { Form, Field, Input, Button, HorizontalGroup, LinkButton, FormAPI } from '@grafana/ui';
+import { Field, Input, Button, LinkButton, Stack } from '@grafana/ui';
 import { getConfig } from 'app/core/config';
 import { useAppNotification } from 'app/core/copy/appNotification';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
@@ -27,8 +28,15 @@ interface QueryParams {
 
 interface Props extends GrafanaRouteComponentProps<{}, QueryParams> {}
 
-export const SignupPage = (props: Props) => {
+export const SignupPage = ({ queryParams }: Props) => {
   const notifyApp = useAppNotification();
+  const {
+    handleSubmit,
+    formState: { errors },
+    register,
+    getValues,
+  } = useForm<SignupDTO>({ defaultValues: { email: queryParams.email, code: queryParams.code } });
+
   const onSubmit = async (formData: SignupDTO) => {
     if (formData.name === '') {
       delete formData.name;
@@ -55,72 +63,63 @@ export const SignupPage = (props: Props) => {
     window.location.assign(getConfig().appSubUrl + '/');
   };
 
-  const defaultValues = {
-    email: props.queryParams.email,
-    code: props.queryParams.code,
-  };
-
   return (
     <LoginLayout>
       <InnerBox>
-        <Form defaultValues={defaultValues} onSubmit={onSubmit}>
-          {({ errors, register, getValues }: FormAPI<SignupDTO>) => (
-            <>
-              <Field label="Your name">
-                <Input id="user-name" {...register('name')} placeholder="(optional)" />
-              </Field>
-              <Field label="Email" invalid={!!errors.email} error={errors.email?.message}>
-                <Input
-                  id="email"
-                  {...register('email', {
-                    required: 'Email is required',
-                    pattern: {
-                      value: w3cStandardEmailValidator,
-                      message: 'Email is invalid',
-                    },
-                  })}
-                  type="email"
-                  placeholder="Email"
-                />
-              </Field>
-              {!getConfig().autoAssignOrg && (
-                <Field label="Org. name">
-                  <Input id="org-name" {...register('orgName')} placeholder="Org. name" />
-                </Field>
-              )}
-              {getConfig().verifyEmailEnabled && (
-                <Field label="Email verification code (sent to your email)">
-                  <Input id="verification-code" {...register('code')} placeholder="Code" />
-                </Field>
-              )}
-              <Field label="Password" invalid={!!errors.password} error={errors?.password?.message}>
-                <PasswordField
-                  id="new-password"
-                  autoFocus
-                  autoComplete="new-password"
-                  {...register('password', { required: 'Password is required' })}
-                />
-              </Field>
-              <Field label="Confirm password" invalid={!!errors.confirm} error={errors?.confirm?.message}>
-                <PasswordField
-                  id="confirm-new-password"
-                  autoComplete="new-password"
-                  {...register('confirm', {
-                    required: 'Confirmed password is required',
-                    validate: (v) => v === getValues().password || 'Passwords must match!',
-                  })}
-                />
-              </Field>
-
-              <HorizontalGroup>
-                <Button type="submit">Submit</Button>
-                <LinkButton fill="text" href={getConfig().appSubUrl + '/login'}>
-                  Back to login
-                </LinkButton>
-              </HorizontalGroup>
-            </>
+        <form onSubmit={handleSubmit(onSubmit)} style={{ width: '100%' }}>
+          <Field label="Your name">
+            <Input id="user-name" {...register('name')} placeholder="(optional)" />
+          </Field>
+          <Field label="Email" invalid={!!errors.email} error={errors.email?.message}>
+            <Input
+              id="email"
+              {...register('email', {
+                required: 'Email is required',
+                pattern: {
+                  value: w3cStandardEmailValidator,
+                  message: 'Email is invalid',
+                },
+              })}
+              type="email"
+              placeholder="Email"
+            />
+          </Field>
+          {!getConfig().autoAssignOrg && (
+            <Field label="Org. name">
+              <Input id="org-name" {...register('orgName')} placeholder="Org. name" />
+            </Field>
+          )}
+          {getConfig().verifyEmailEnabled && (
+            <Field label="Email verification code (sent to your email)">
+              <Input id="verification-code" {...register('code')} placeholder="Code" />
+            </Field>
           )}
-        </Form>
+          <Field label="Password" invalid={!!errors.password} error={errors?.password?.message}>
+            <PasswordField
+              id="new-password"
+              autoFocus
+              autoComplete="new-password"
+              {...register('password', { required: 'Password is required' })}
+            />
+          </Field>
+          <Field label="Confirm password" invalid={!!errors.confirm} error={errors?.confirm?.message}>
+            <PasswordField
+              id="confirm-new-password"
+              autoComplete="new-password"
+              {...register('confirm', {
+                required: 'Confirmed password is required',
+                validate: (v) => v === getValues().password || 'Passwords must match!',
+              })}
+            />
+          </Field>
+
+          <Stack>
+            <Button type="submit">Submit</Button>
+            <LinkButton fill="text" href={getConfig().appSubUrl + '/login'}>
+              Back to login
+            </LinkButton>
+          </Stack>
+        </form>
       </InnerBox>
     </LoginLayout>
   );

public/app/core/components/Signup/VerifyEmail.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
 
 import { getBackendSrv } from '@grafana/runtime';
-import { Form, Field, Input, Button, Legend, Container, HorizontalGroup, LinkButton } from '@grafana/ui';
+import { Field, Input, Button, Legend, Container, LinkButton, Stack } from '@grafana/ui';
 import { getConfig } from 'app/core/config';
 import { useAppNotification } from 'app/core/copy/appNotification';
 import { w3cStandardEmailValidator } from 'app/features/admin/utils';
@@ -12,6 +13,11 @@ interface EmailDTO {
 
 export const VerifyEmail = () => {
   const notifyApp = useAppNotification();
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm<EmailDTO>();
   const [emailSent, setEmailSent] = useState(false);
 
   const onSubmit = (formModel: EmailDTO) => {
@@ -39,36 +45,32 @@ export const VerifyEmail = () => {
   }
 
   return (
-    <Form onSubmit={onSubmit}>
-      {({ register, errors }) => (
-        <>
-          <Legend>Verify Email</Legend>
-          <Field
-            label="Email"
-            description="Enter your email address to get a verification link sent to you"
-            invalid={!!errors.email}
-            error={errors.email?.message}
-          >
-            <Input
-              id="email"
-              {...register('email', {
-                required: 'Email is required',
-                pattern: {
-                  value: w3cStandardEmailValidator,
-                  message: 'Email is invalid',
-                },
-              })}
-              placeholder="Email"
-            />
-          </Field>
-          <HorizontalGroup>
-            <Button type="submit">Send verification email</Button>
-            <LinkButton fill="text" href={getConfig().appSubUrl + '/login'}>
-              Back to login
-            </LinkButton>
-          </HorizontalGroup>
-        </>
-      )}
-    </Form>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Legend>Verify Email</Legend>
+      <Field
+        label="Email"
+        description="Enter your email address to get a verification link sent to you"
+        invalid={!!errors.email}
+        error={errors.email?.message}
+      >
+        <Input
+          id="email"
+          {...register('email', {
+            required: 'Email is required',
+            pattern: {
+              value: w3cStandardEmailValidator,
+              message: 'Email is invalid',
+            },
+          })}
+          placeholder="Email"
+        />
+      </Field>
+      <Stack>
+        <Button type="submit">Send verification email</Button>
+        <LinkButton fill="text" href={getConfig().appSubUrl + '/login'}>
+          Back to login
+        </LinkButton>
+      </Stack>
+    </form>
   );
 };