From 93d770861d2f85711ac256bc200dbac54a728816 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Mon, 15 Jul 2024 15:17:54 +0300
Subject: [PATCH] Allow submitting forms in the UI by pressing "Enter" (#4674)

# What this PR does

- Escalation Chain and Token forms now use `react-hook-form`

## Which issue(s) this PR closes

Closes https://github.com/grafana/oncall/issues/2038
---
 .../ManualAlertGroup/ManualAlertGroup.tsx     |  19 +-
 .../ApiTokenSettings/ApiTokenForm.module.css  |   6 +-
 .../ApiTokenSettings/ApiTokenForm.tsx         | 119 +++++++----
 .../EscalationChainForm.tsx                   | 193 +++++++++++-------
 4 files changed, 211 insertions(+), 126 deletions(-)

diff --git a/src/components/ManualAlertGroup/ManualAlertGroup.tsx b/src/components/ManualAlertGroup/ManualAlertGroup.tsx
index b2f39a5e0d..6a9f2fa898 100644
--- a/src/components/ManualAlertGroup/ManualAlertGroup.tsx
+++ b/src/components/ManualAlertGroup/ManualAlertGroup.tsx
@@ -1,5 +1,6 @@
 import React, { FC, useCallback } from 'react';
 
+import { css } from '@emotion/css';
 import { Button, Drawer, Field, HorizontalGroup, TextArea, useStyles2, VerticalGroup } from '@grafana/ui';
 import { observer } from 'mobx-react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
@@ -50,7 +51,6 @@ export const ManualAlertGroup: FC<ManualAlertGroupProps> = observer(({ onCreate,
 
   const onSubmit = async (data: FormData) => {
     const transformedData = prepareForUpdate(selectedUserResponders, selectedTeamResponder, data);
-
     const resp = await directPagingStore.createManualAlertRule(transformedData);
 
     if (!resp) {
@@ -65,13 +65,14 @@ export const ManualAlertGroup: FC<ManualAlertGroupProps> = observer(({ onCreate,
     onHide();
   };
 
-  const utils = useStyles2(getUtilStyles);
+  const utilStyles = useStyles2(getUtilStyles);
+  const styles = useStyles2(getStyles);
 
   return (
     <Drawer scrollableContent title="New escalation" onClose={onHideDrawer} closeOnMaskClick={false} width="70%">
       <VerticalGroup>
         <FormProvider {...formMethods}>
-          <form id="Manual Alert Group" onSubmit={handleSubmit(onSubmit)} className={utils.width100}>
+          <form id="Manual Alert Group" onSubmit={handleSubmit(onSubmit)} className={utilStyles.width100}>
             <Controller
               name="message"
               control={control}
@@ -82,8 +83,10 @@ export const ManualAlertGroup: FC<ManualAlertGroupProps> = observer(({ onCreate,
                 </Field>
               )}
             />
+
             <AddResponders mode="create" />
-            <div className="buttons">
+
+            <div className={styles.buttons}>
               <HorizontalGroup justify="flex-end">
                 <Button variant="secondary" onClick={onHideDrawer}>
                   Cancel
@@ -99,3 +102,11 @@ export const ManualAlertGroup: FC<ManualAlertGroupProps> = observer(({ onCreate,
     </Drawer>
   );
 });
+
+const getStyles = () => {
+  return {
+    buttons: css`
+      padding-top: 12px;
+    `,
+  };
+};
diff --git a/src/containers/ApiTokenSettings/ApiTokenForm.module.css b/src/containers/ApiTokenSettings/ApiTokenForm.module.css
index d8058bec9c..51ceddca17 100644
--- a/src/containers/ApiTokenSettings/ApiTokenForm.module.css
+++ b/src/containers/ApiTokenSettings/ApiTokenForm.module.css
@@ -1,11 +1,9 @@
 .token__inputContainer {
   width: 100%;
   display: flex;
-  margin-bottom: 24px;
 }
 
 .token__input {
-  flex-grow: 1;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -14,3 +12,7 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+
+.field {
+  flex-grow: 1;
+}
diff --git a/src/containers/ApiTokenSettings/ApiTokenForm.tsx b/src/containers/ApiTokenSettings/ApiTokenForm.tsx
index 83e0855832..c0f8246d63 100644
--- a/src/containers/ApiTokenSettings/ApiTokenForm.tsx
+++ b/src/containers/ApiTokenSettings/ApiTokenForm.tsx
@@ -1,11 +1,13 @@
-import React, { useCallback, HTMLAttributes, useState } from 'react';
+import React, { HTMLAttributes, useState } from 'react';
 
-import { Button, HorizontalGroup, Input, Label, Modal, VerticalGroup } from '@grafana/ui';
+import { Button, Field, HorizontalGroup, Input, Label, Modal, VerticalGroup } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { get } from 'lodash-es';
 import { observer } from 'mobx-react';
 import CopyToClipboard from 'react-copy-to-clipboard';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
 
+import { RenderConditionally } from 'components/RenderConditionally/RenderConditionally';
 import { SourceCode } from 'components/SourceCode/SourceCode';
 import { useStore } from 'state/useStore';
 import { openErrorNotification, openNotification } from 'utils/utils';
@@ -20,62 +22,81 @@ interface TokenCreationModalProps extends HTMLAttributes<HTMLElement> {
   onUpdate: () => void;
 }
 
+interface FormFields {
+  name: string;
+}
+
 export const ApiTokenForm = observer((props: TokenCreationModalProps) => {
   const { onHide = () => {}, onUpdate = () => {} } = props;
-  const [name, setName] = useState('');
   const [token, setToken] = useState('');
 
   const store = useStore();
+  const formMethods = useForm<FormFields>({
+    mode: 'onChange',
+  });
 
-  const onCreateTokenCallback = useCallback(async () => {
-    try {
-      const data = await store.apiTokenStore.create({ name });
-      setToken(data.token);
-      onUpdate();
-    } catch (error) {
-      openErrorNotification(get(error, 'response.data.detail', 'error creating token'));
-    }
-  }, [name]);
+  const {
+    control,
+    watch,
+    formState: { errors },
+    handleSubmit,
+  } = formMethods;
 
-  const handleNameChange = useCallback((event) => {
-    setName(event.target.value);
-  }, []);
+  const name = watch('name');
 
   return (
     <Modal isOpen closeOnEscape={false} title={token ? 'Your new API Token' : 'Create API Token'} onDismiss={onHide}>
-      <VerticalGroup>
-        <Label>Token Name</Label>
-        <div className={cx('token__inputContainer')}>
-          {renderTokenInput()}
-          {renderCopyToClipboard()}
-        </div>
-
-        {renderCurlExample()}
-
-        <HorizontalGroup justify="flex-end">
-          <Button variant="secondary" onClick={() => onHide()}>
-            {token ? 'Close' : 'Cancel'}
-          </Button>
-          {!token && (
-            <Button disabled={!!token || !name} variant="primary" onClick={onCreateTokenCallback}>
-              Create Token
-            </Button>
-          )}
-        </HorizontalGroup>
-      </VerticalGroup>
+      <FormProvider {...formMethods}>
+        <form onSubmit={handleSubmit(onCreateTokenCallback)}>
+          <VerticalGroup>
+            <Label>Token Name</Label>
+            <div className={cx('token__inputContainer')}>
+              {renderTokenInput()}
+              {renderCopyToClipboard()}
+            </div>
+
+            {renderCurlExample()}
+
+            <HorizontalGroup justify="flex-end">
+              <Button variant="secondary" onClick={() => onHide()}>
+                {token ? 'Close' : 'Cancel'}
+              </Button>
+
+              <RenderConditionally shouldRender={!token}>
+                <Button type="submit" disabled={!name} variant="primary">
+                  Create Token
+                </Button>
+              </RenderConditionally>
+            </HorizontalGroup>
+          </VerticalGroup>
+        </form>
+      </FormProvider>
     </Modal>
   );
 
   function renderTokenInput() {
-    return token ? (
-      <Input value={token} disabled={!!token} className={cx('token__input')} />
-    ) : (
-      <Input
-        className={cx('token__input')}
-        maxLength={50}
-        onChange={handleNameChange}
-        placeholder="Enter token name"
-        autoFocus
+    return (
+      <Controller
+        name="name"
+        control={control}
+        rules={{ required: 'Token name is required' }}
+        render={({ field }) => (
+          <Field invalid={Boolean(errors['name'])} error={errors['name']?.message} className={cx('field')}>
+            <>
+              {token ? (
+                <Input {...field} disabled={!!token} className={cx('token__input')} />
+              ) : (
+                <Input
+                  {...field}
+                  className={cx('token__input')}
+                  maxLength={50}
+                  placeholder="Enter token name"
+                  autoFocus
+                />
+              )}
+            </>
+          </Field>
+        )}
       />
     );
   }
@@ -104,6 +125,16 @@ export const ApiTokenForm = observer((props: TokenCreationModalProps) => {
       </VerticalGroup>
     );
   }
+
+  async function onCreateTokenCallback() {
+    try {
+      const data = await store.apiTokenStore.create({ name });
+      setToken(data.token);
+      onUpdate();
+    } catch (error) {
+      openErrorNotification(get(error, 'response.data.detail', 'error creating token'));
+    }
+  }
 });
 
 function getCurlExample(token, onCallApiUrl) {
diff --git a/src/containers/EscalationChainForm/EscalationChainForm.tsx b/src/containers/EscalationChainForm/EscalationChainForm.tsx
index ec694f7b0f..a2fb59d4da 100644
--- a/src/containers/EscalationChainForm/EscalationChainForm.tsx
+++ b/src/containers/EscalationChainForm/EscalationChainForm.tsx
@@ -1,8 +1,9 @@
-import React, { ChangeEvent, FC, useCallback, useState } from 'react';
+import React, { FC } from 'react';
 
 import { Button, Field, HorizontalGroup, Input, Modal } from '@grafana/ui';
 import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
 
 import { GSelect } from 'containers/GSelect/GSelect';
 import { EscalationChain } from 'models/escalation_chain/escalation_chain.types';
@@ -25,6 +26,11 @@ interface EscalationChainFormProps {
   onSubmit: (id: EscalationChain['id']) => Promise<void>;
 }
 
+interface EscalationFormFields {
+  team: string;
+  name: string;
+}
+
 const cx = cn.bind(styles);
 
 export const EscalationChainForm: FC<EscalationChainFormProps> = observer((props) => {
@@ -40,96 +46,131 @@ export const EscalationChainForm: FC<EscalationChainFormProps> = observer((props
   } = store;
 
   const user = userStore.currentUser;
-
   const escalationChain = escalationChainId ? escalationChainStore.items[escalationChainId] : undefined;
+  const isCreateMode = mode === EscalationChainFormMode.Create;
+  const isCopyMode = mode === EscalationChainFormMode.Copy;
+
+  const formMethods = useForm<EscalationFormFields>({
+    mode: 'onChange',
+    defaultValues: {
+      team: escalationChain?.team || user.current_team,
+      name: isCopyMode ? `${escalationChain.name} copy` : '',
+    },
+  });
 
-  const [name, setName] = useState<string | undefined>(
-    mode === EscalationChainFormMode.Copy ? `${escalationChain?.name} copy` : escalationChain?.name
+  const {
+    control,
+    setError,
+    getValues,
+    formState: { errors },
+    handleSubmit,
+  } = formMethods;
+
+  return (
+    <Modal isOpen title={`${mode} Escalation Chain`} onDismiss={onHide}>
+      <div className={cx('root')}>
+        <FormProvider {...formMethods}>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <Controller
+              name={'team'}
+              control={control}
+              render={({ field }) => (
+                <Field label="Assign to team" invalid={Boolean(errors['team'])} error={errors['team']?.message}>
+                  <GSelect<GrafanaTeam>
+                    {...field}
+                    items={grafanaTeamItems}
+                    fetchItemsFn={grafanaTeamStore.updateItems}
+                    fetchItemFn={grafanaTeamStore.fetchItemById}
+                    getSearchResult={grafanaTeamStore.getSearchResult}
+                    displayField="name"
+                    valueField="id"
+                    allowClear
+                    placeholder="Select a team"
+                    className={cx('team-select')}
+                  />
+                </Field>
+              )}
+            />
+
+            <Controller
+              name={'name'}
+              control={control}
+              rules={{ required: 'Name is required' }}
+              render={({ field }) => (
+                <Field
+                  invalid={Boolean(errors['name'])}
+                  error={errors['name']?.message}
+                  label="Escalation Chain name"
+                  data-testid="create-escalation-chain-name-input-modal"
+                >
+                  <Input autoFocus {...field} />
+                </Field>
+              )}
+            />
+
+            <HorizontalGroup justify="flex-end">
+              <Button variant="secondary" onClick={onHide}>
+                Cancel
+              </Button>
+              <Button type="submit" variant="primary">
+                {`${mode} Escalation Chain`}
+              </Button>
+            </HorizontalGroup>
+          </form>
+        </FormProvider>
+      </div>
+    </Modal>
   );
-  const [selectedTeam, setSelectedTeam] = useState<GrafanaTeam['id']>(escalationChain?.team || user.current_team);
-  const [errors, setErrors] = useState<{ [key: string]: string }>({});
 
-  const onSubmit = useCallback(async () => {
+  async function onSubmit() {
     let escalationChain: EscalationChain | void;
 
-    const isCreateMode = mode === EscalationChainFormMode.Create;
-    const isCopyMode = mode === EscalationChainFormMode.Copy;
-
-    if (isCreateMode) {
-      escalationChain = await escalationChainStore.create<EscalationChain>({ name, team: selectedTeam });
-    } else if (isCopyMode) {
-      escalationChain = await escalationChainStore.clone(escalationChainId, { name, team: selectedTeam });
-    } else {
-      escalationChain = await escalationChainStore.update<EscalationChain>(escalationChainId, {
-        name,
-        team: selectedTeam,
-      });
-    }
-
-    if (!escalationChain) {
-      let verb: string;
+    const teamName = getValues('team');
+    const escalationChainName = getValues('name');
 
+    try {
       if (isCreateMode) {
-        verb = 'creating';
+        escalationChain = await escalationChainStore.create<EscalationChain>({
+          name: escalationChainName,
+          team: teamName,
+        });
       } else if (isCopyMode) {
-        verb = 'copying';
+        escalationChain = await escalationChainStore.clone(escalationChainId, {
+          name: escalationChainName,
+          team: teamName,
+        });
       } else {
-        verb = 'updating';
+        escalationChain = await escalationChainStore.update<EscalationChain>(escalationChainId, {
+          name: escalationChainName,
+          team: teamName,
+        });
       }
 
-      openWarningNotification(`There was an issue ${verb} the escalation chain. Please try again`);
-      return;
-    }
+      if (!escalationChain) {
+        let verb: string;
+
+        if (isCreateMode) {
+          verb = 'creating';
+        } else if (isCopyMode) {
+          verb = 'copying';
+        } else {
+          verb = 'updating';
+        }
+
+        openWarningNotification(`There was an issue ${verb} the escalation chain. Please try again`);
+        return;
+      }
 
-    try {
       await onSubmitProp(escalationChain.id);
       onHide();
     } catch (err) {
-      setErrors({
-        name: err.response.data.name || err.response.data.detail || err.response.data.non_field_errors,
-      });
+      if (err?.response?.data) {
+        const keys = Object.keys(err.response.data);
+        keys.forEach((key: keyof EscalationFormFields) => {
+          const message = Array.isArray(err.response.data[key]) ? err.response.data[key][0] : err.response.data[key];
+          setError('name', { message });
+        });
+      }
     }
-  }, [name, selectedTeam, mode, onSubmitProp]);
-
-  const handleNameChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    setName(event.target.value);
-  }, []);
-
-  return (
-    <Modal isOpen title={`${mode} Escalation Chain`} onDismiss={onHide}>
-      <div className={cx('root')}>
-        <Field label="Assign to team">
-          <GSelect<GrafanaTeam>
-            items={grafanaTeamItems}
-            fetchItemsFn={grafanaTeamStore.updateItems}
-            fetchItemFn={grafanaTeamStore.fetchItemById}
-            getSearchResult={grafanaTeamStore.getSearchResult}
-            displayField="name"
-            valueField="id"
-            allowClear
-            placeholder="Select a team"
-            className={cx('team-select')}
-            onChange={setSelectedTeam}
-            value={selectedTeam}
-          />
-        </Field>
-        <Field
-          invalid={Boolean(errors['name'])}
-          error={errors['name']}
-          label="Escalation Chain name"
-          data-testid="create-escalation-chain-name-input-modal"
-        >
-          <Input autoFocus value={name} onChange={handleNameChange} />
-        </Field>
-        <HorizontalGroup justify="flex-end">
-          <Button variant="secondary" onClick={onHide}>
-            Cancel
-          </Button>
-          <Button variant="primary" onClick={onSubmit}>
-            {`${mode} Escalation Chain`}
-          </Button>
-        </HorizontalGroup>
-      </div>
-    </Modal>
-  );
+  }
 });