feat: Add the email input box for encrypt form modal (#8071)

* feat: enable optional email input for storage mode as well * fix: pass the emails to the form wizard * fix: remove admin email adding for playwright tests * fix issue where validation rules didn't apply correctly
opengovsg · Feb 6, 2025 · d7ada84 · d7ada84
1 parent 2e9cb71
commit d7ada84
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 8 deletions.
diff --git a/__tests__/e2e/helpers/createForm.ts b/__tests__/e2e/helpers/createForm.ts
@@ -171,7 +171,7 @@ const addSettings = async (
   await expect(page).toHaveURL(ADMIN_FORM_PAGE_SETTINGS(formId))
 
   await addGeneralSettings(page, formSettings)
-  await addAdminEmails(page, formSettings)
+  // await addAdminEmails(page, formSettings)
   await addAuthSettings(page, formSettings)
   await addCollaborators(page, formSettings)
 

diff --git a/...s/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormDetailsScreen.tsx b/...s/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormDetailsScreen.tsx
@@ -112,9 +112,15 @@ export const CreateFormDetailsScreen = (): JSX.Element => {
               </InlineMessage>
             )}
           </FormControl>
-          {responseModeValue === FormResponseMode.Email && (
-            <FormControl isRequired isInvalid={!!errors.emails} mb="2.25rem">
+          {(responseModeValue === FormResponseMode.Encrypt ||
+            responseModeValue === FormResponseMode.Email) && (
+            <FormControl
+              isRequired={responseModeValue === FormResponseMode.Email}
+              isInvalid={!!errors.emails}
+              mb="2.25rem"
+            >
               <FormLabel
+                isRequired={responseModeValue === FormResponseMode.Email}
                 useMarkdownForDescription
                 description={`All email addresses below will be notified. Learn more on [how to guard against email bounces](${GUIDE_PREVENT_EMAIL_BOUNCE}).`}
               >

diff --git a/.../workspace/components/CreateFormModal/CreateFormModalContent/EmailFormRecipientsInput.tsx b/.../workspace/components/CreateFormModal/CreateFormModalContent/EmailFormRecipientsInput.tsx
@@ -3,7 +3,12 @@ import { Skeleton } from '@chakra-ui/react'
 import { get } from 'lodash'
 import isEmail from 'validator/lib/isEmail'
 
-import { REQUIRED_ADMIN_EMAIL_VALIDATION_RULES } from '~utils/formValidation'
+import { FormResponseMode } from '~shared/types/form/form'
+
+import {
+  OPTIONAL_ADMIN_EMAIL_VALIDATION_RULES,
+  REQUIRED_ADMIN_EMAIL_VALIDATION_RULES,
+} from '~utils/formValidation'
 import FormErrorMessage from '~components/FormControl/FormErrorMessage'
 import Input from '~components/Input'
 import { TagInput } from '~components/TagInput'
@@ -15,6 +20,10 @@ import { useCreateFormWizard } from '../CreateFormWizardContext'
 export const EmailFormRecipientsInput = (): JSX.Element => {
   const { user, isLoading } = useUser()
   const { formMethods } = useCreateFormWizard()
+
+  const { watch } = formMethods
+  const responseModeValue = watch('responseMode')
+
   const {
     control,
     formState: { errors },
@@ -35,7 +44,11 @@ export const EmailFormRecipientsInput = (): JSX.Element => {
         control={control}
         defaultValue={[user.email]}
         name="emails"
-        rules={REQUIRED_ADMIN_EMAIL_VALIDATION_RULES}
+        rules={
+          responseModeValue === FormResponseMode.Email
+            ? REQUIRED_ADMIN_EMAIL_VALIDATION_RULES
+            : OPTIONAL_ADMIN_EMAIL_VALIDATION_RULES
+        }
         render={({ field }) => (
           <TagInput
             placeholder="Separate emails with a comma"

diff --git a/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx b/frontend/src/features/workspace/components/CreateFormModal/CreateFormWizardProvider.tsx
@@ -72,15 +72,15 @@ const useCreateFormWizardContext = (): CreateFormWizardContextReturn => {
   const workspaceId = isDefaultWorkspace ? undefined : activeWorkspace._id
 
   const handleCreateStorageModeOrMultirespondentForm = handleSubmit(
-    ({ title, responseMode }) => {
+    ({ title, responseMode, emails }) => {
       switch (responseMode) {
         case FormResponseMode.Encrypt:
           return createStorageModeFormMutation.mutate({
             title,
             responseMode,
             publicKey: keypair.publicKey,
             workspaceId,
-            emails: [],
+            emails: emails.filter(Boolean),
           })
         case FormResponseMode.Email:
           return

diff --git a/frontend/src/features/workspace/components/DuplicateFormModal/DupeFormWizardProvider.tsx b/frontend/src/features/workspace/components/DuplicateFormModal/DupeFormWizardProvider.tsx
@@ -72,7 +72,7 @@ export const useDupeFormWizardContext = (): CreateFormWizardContextReturn => {
   const workspaceId = isDefaultWorkspace ? undefined : activeWorkspace._id
 
   const handleCreateStorageModeOrMultirespondentForm = handleSubmit(
-    ({ title, responseMode }) => {
+    ({ title, responseMode, emails }) => {
       if (!activeFormMeta?._id) {
         return
       }
@@ -85,6 +85,7 @@ export const useDupeFormWizardContext = (): CreateFormWizardContextReturn => {
             responseMode,
             publicKey: keypair.publicKey,
             workspaceId,
+            emails: emails.filter(Boolean),
           })
         case FormResponseMode.Email:
           return

diff --git a/shared/types/form/form.ts b/shared/types/form/form.ts
@@ -379,6 +379,7 @@ export type DuplicateFormOverwriteDto = {
   | {
       responseMode: FormResponseMode.Encrypt
       publicKey: string
+      emails: string[]
     }
   | {
       responseMode: FormResponseMode.Multirespondent