Teams: Remove Form component usage (#82367)

* Teams: Remove Form usage

* Update team settings

public/app/features/teams/CreateTeam.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { JSX, useState } from 'react';
+import { useForm } from 'react-hook-form';
 
 import { NavModelItem } from '@grafana/data';
 import { getBackendSrv, locationService } from '@grafana/runtime';
-import { Button, Form, Field, Input, FieldSet } from '@grafana/ui';
+import { Button, Field, Input, FieldSet } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { TeamRolePicker } from 'app/core/components/RolePicker/TeamRolePicker';
 import { updateTeamRoles } from 'app/core/components/RolePicker/api';
@@ -21,7 +22,11 @@ export const CreateTeam = (): JSX.Element => {
   const currentOrgId = contextSrv.user.orgId;
   const [pendingRoles, setPendingRoles] = useState<Role[]>([]);
   const [{ roleOptions }] = useRoleOptions(currentOrgId);
-
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm<TeamDTO>();
   const canUpdateRoles =
     contextSrv.hasPermission(AccessControlAction.ActionUserRolesAdd) &&
     contextSrv.hasPermission(AccessControlAction.ActionUserRolesRemove);
@@ -44,40 +49,36 @@ export const CreateTeam = (): JSX.Element => {
   return (
     <Page navId="teams" pageNav={pageNav}>
       <Page.Contents>
-        <Form onSubmit={createTeam}>
-          {({ register, errors }) => (
-            <>
-              <FieldSet>
-                <Field label="Name" required invalid={!!errors.name} error="Team name is required">
-                  <Input {...register('name', { required: true })} id="team-name" />
-                </Field>
-                {contextSrv.licensedAccessControlEnabled() && (
-                  <Field label="Role">
-                    <TeamRolePicker
-                      teamId={0}
-                      roleOptions={roleOptions}
-                      disabled={false}
-                      apply={true}
-                      onApplyRoles={setPendingRoles}
-                      pendingRoles={pendingRoles}
-                      maxWidth="100%"
-                    />
-                  </Field>
-                )}
-                <Field
-                  label={'Email'}
-                  description={'This is optional and is primarily used for allowing custom team avatars.'}
-                >
-                  <Input {...register('email')} type="email" id="team-email" placeholder="email@test.com" />
-                </Field>
-              </FieldSet>
+        <form onSubmit={handleSubmit(createTeam)} style={{ maxWidth: '600px' }}>
+          <FieldSet>
+            <Field label="Name" required invalid={!!errors.name} error="Team name is required">
+              <Input {...register('name', { required: true })} id="team-name" />
+            </Field>
+            {contextSrv.licensedAccessControlEnabled() && (
+              <Field label="Role">
+                <TeamRolePicker
+                  teamId={0}
+                  roleOptions={roleOptions}
+                  disabled={false}
+                  apply={true}
+                  onApplyRoles={setPendingRoles}
+                  pendingRoles={pendingRoles}
+                  maxWidth="100%"
+                />
+              </Field>
+            )}
+            <Field
+              label={'Email'}
+              description={'This is optional and is primarily used for allowing custom team avatars.'}
+            >
+              <Input {...register('email')} type="email" id="team-email" placeholder="email@test.com" />
+            </Field>
+          </FieldSet>
 
-              <Button type="submit" variant="primary">
-                Create
-              </Button>
-            </>
-          )}
-        </Form>
+          <Button type="submit" variant="primary">
+            Create
+          </Button>
+        </form>
       </Page.Contents>
     </Page>
   );

public/app/features/teams/TeamSettings.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
 import { connect, ConnectedProps } from 'react-redux';
 
-import { Input, Field, Form, Button, FieldSet, VerticalGroup } from '@grafana/ui';
+import { Input, Field, Button, FieldSet, Stack } from '@grafana/ui';
 import { TeamRolePicker } from 'app/core/components/RolePicker/TeamRolePicker';
 import { updateTeamRoles } from 'app/core/components/RolePicker/api';
 import { useRoleOptions } from 'app/core/components/RolePicker/hooks';
@@ -28,6 +29,11 @@ export const TeamSettings = ({ team, updateTeam }: Props) => {
 
   const [{ roleOptions }] = useRoleOptions(currentOrgId);
   const [pendingRoles, setPendingRoles] = useState<Role[]>([]);
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm<Team>({ defaultValues: team });
 
   const canUpdateRoles =
     contextSrv.hasPermission(AccessControlAction.ActionTeamsRolesAdd) &&
@@ -37,59 +43,55 @@ export const TeamSettings = ({ team, updateTeam }: Props) => {
     contextSrv.hasPermissionInMetadata(AccessControlAction.ActionTeamsRolesList, team) &&
     contextSrv.hasPermission(AccessControlAction.ActionRolesList);
 
+  const onSubmit = async (formTeam: Team) => {
+    if (contextSrv.licensedAccessControlEnabled() && canUpdateRoles) {
+      await updateTeamRoles(pendingRoles, team.id);
+    }
+    updateTeam(formTeam.name, formTeam.email || '');
+  };
+
   return (
-    <VerticalGroup spacing="lg">
-      <Form
-        defaultValues={{ ...team }}
-        onSubmit={async (formTeam: Team) => {
-          if (contextSrv.licensedAccessControlEnabled() && canUpdateRoles) {
-            await updateTeamRoles(pendingRoles, team.id);
-          }
-          updateTeam(formTeam.name, formTeam.email || '');
-        }}
-        disabled={!canWriteTeamSettings}
-      >
-        {({ register, errors }) => (
-          <FieldSet label="Team details">
-            <Field
-              label="Name"
-              disabled={!canWriteTeamSettings}
-              required
-              invalid={!!errors.name}
-              error="Name is required"
-            >
-              <Input {...register('name', { required: true })} id="name-input" />
-            </Field>
+    <Stack direction={'column'} gap={3}>
+      <form onSubmit={handleSubmit(onSubmit)} style={{ maxWidth: '600px' }}>
+        <FieldSet label="Team details">
+          <Field
+            label="Name"
+            disabled={!canWriteTeamSettings}
+            required
+            invalid={!!errors.name}
+            error="Name is required"
+          >
+            <Input {...register('name', { required: true })} id="name-input" />
+          </Field>
 
-            {contextSrv.licensedAccessControlEnabled() && canListRoles && (
-              <Field label="Role">
-                <TeamRolePicker
-                  teamId={team.id}
-                  roleOptions={roleOptions}
-                  disabled={!canUpdateRoles}
-                  apply={true}
-                  onApplyRoles={setPendingRoles}
-                  pendingRoles={pendingRoles}
-                  maxWidth="100%"
-                />
-              </Field>
-            )}
-
-            <Field
-              label="Email"
-              description="This is optional and is primarily used to set the team profile avatar (via gravatar service)."
-              disabled={!canWriteTeamSettings}
-            >
-              <Input {...register('email')} placeholder="team@email.com" type="email" id="email-input" />
+          {contextSrv.licensedAccessControlEnabled() && canListRoles && (
+            <Field label="Role">
+              <TeamRolePicker
+                teamId={team.id}
+                roleOptions={roleOptions}
+                disabled={!canUpdateRoles}
+                apply={true}
+                onApplyRoles={setPendingRoles}
+                pendingRoles={pendingRoles}
+                maxWidth="100%"
+              />
             </Field>
-            <Button type="submit" disabled={!canWriteTeamSettings}>
-              Update
-            </Button>
-          </FieldSet>
-        )}
-      </Form>
+          )}
+
+          <Field
+            label="Email"
+            description="This is optional and is primarily used to set the team profile avatar (via gravatar service)."
+            disabled={!canWriteTeamSettings}
+          >
+            <Input {...register('email')} placeholder="team@email.com" type="email" id="email-input" />
+          </Field>
+          <Button type="submit" disabled={!canWriteTeamSettings}>
+            Update
+          </Button>
+        </FieldSet>
+      </form>
       <SharedPreferences resourceUri={`teams/${team.id}`} disabled={!canWriteTeamSettings} preferenceType="team" />
-    </VerticalGroup>
+    </Stack>
   );
 };