fix: fix chromatic reviews

opengovsg · Jun 14, 2024 · 6c09ea2 · 6c09ea2
1 parent d4055ed
commit 6c09ea2
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 35 deletions.
diff --git a/frontend/src/features/admin-form/settings/SettingsEmailsPage.tsx b/frontend/src/features/admin-form/settings/SettingsEmailsPage.tsx
@@ -1,42 +1,43 @@
-import { Skeleton, Stack, Wrap } from '@chakra-ui/react'
+import { FormControl, Skeleton } from '@chakra-ui/react'
 
 import { FormResponseMode } from '~shared/types'
 
+import FormLabel from '~components/FormControl/FormLabel'
+import { TagInput } from '~components/TagInput'
+
 import { CategoryHeader } from './components/CategoryHeader'
 import { EmailFormSection } from './components/EmailFormSection'
 import { useAdminFormSettings } from './queries'
 
 const AdminEmailSection = (): JSX.Element => {
-  const { data: settings, isLoading: isLoadingSettings } =
-    useAdminFormSettings()
+  const { data: settings } = useAdminFormSettings()
 
   const isEmailOrStorageMode =
     settings?.responseMode === FormResponseMode.Email ||
     settings?.responseMode === FormResponseMode.Encrypt
 
+  if (settings && isEmailOrStorageMode) {
+    return <EmailFormSection settings={settings} />
+  } else {
+    return <EmailFormSectionSkeleton />
+  }
+}
+
+export const EmailFormSectionSkeleton = (): JSX.Element => {
   return (
-    <Skeleton isLoaded={!isLoadingSettings && !!settings}>
-      <Stack spacing="2rem">
-        {settings && isEmailOrStorageMode ? (
-          <EmailFormSection settings={settings} />
-        ) : null}
-      </Stack>
-    </Skeleton>
+    <FormControl isRequired>
+      <FormLabel>Send an email copy of new responses</FormLabel>
+      <Skeleton>
+        <TagInput placeholder="me@example.com" isDisabled />
+      </Skeleton>
+    </FormControl>
   )
 }
+
 export const SettingsEmailsPage = (): JSX.Element => {
   return (
     <>
-      <Wrap
-        shouldWrapChildren
-        spacing="0.5rem"
-        justify="space-between"
-        mb="2.5rem"
-      >
-        <CategoryHeader mb={0} mr="2rem">
-          Email notifications
-        </CategoryHeader>
-      </Wrap>
+      <CategoryHeader>Email notifications</CategoryHeader>
       <AdminEmailSection />
     </>
   )

diff --git a/frontend/src/features/admin-form/settings/SettingsPage.tsx b/frontend/src/features/admin-form/settings/SettingsPage.tsx
@@ -98,7 +98,7 @@ export const SettingsPage = (): JSX.Element => {
     ) {
       // Add the Email Notifications page into the tab list, after singpass
       baseConfig.splice(2, 0, {
-        label: 'Email Notifications',
+        label: 'Email notifications',
         icon: BiMailSend,
         component: SettingsEmailsPage,
         path: 'email-notifications',

diff --git a/frontend/src/features/admin-form/settings/components/EmailFormSection.tsx b/frontend/src/features/admin-form/settings/components/EmailFormSection.tsx
@@ -68,6 +68,8 @@ export const EmailFormSection = ({
     (settings.payments_channel.channel !== PaymentChannel.Unconnected ||
       settings.payments_field.enabled)
 
+  const isEmailsDisabled = isFormPublic || isPaymentsEnabled
+
   const handleSubmitEmails = useCallback(
     ({ emails }: { emails: string[] }) => {
       if (isEqual(new Set(emails.filter(Boolean)), initialEmailSet)) return
@@ -91,10 +93,7 @@ export const EmailFormSection = ({
         isFormResponseModeEmail={isEmailMode}
       />
       <FormProvider {...formMethods}>
-        <FormControl
-          isInvalid={!isEmpty(errors)}
-          isDisabled={isFormPublic || isPaymentsEnabled}
-        >
+        <FormControl isInvalid={!isEmpty(errors)} isDisabled={isEmailsDisabled}>
           <FormLabel
             isRequired={isEmailMode}
             useMarkdownForDescription
@@ -105,11 +104,20 @@ export const EmailFormSection = ({
           >
             Send an email copy of new responses
           </FormLabel>
-          <AdminEmailRecipientsInput onSubmit={handleSubmitEmails} />
+          <AdminEmailRecipientsInput
+            onSubmit={handleSubmitEmails}
+            isEmailsDisabled={isEmailsDisabled}
+          />
           <FormErrorMessage>{get(errors, 'emails.message')}</FormErrorMessage>
-          <FormLabel.Description color="secondary.400" mt="0.5rem">
-            Separate multiple email addresses with a comma
-          </FormLabel.Description>
+          {isEmpty(errors) ? (
+            <FormLabel.Description
+              color="secondary.400"
+              mt="0.5rem"
+              opacity={isEmailsDisabled ? '0.3' : '1'}
+            >
+              Separate multiple email addresses with a comma
+            </FormLabel.Description>
+          ) : null}
         </FormControl>
       </FormProvider>
     </>
@@ -120,7 +128,7 @@ const MRFAdvertisingInfobox = () => {
   const mdComponents = useMdComponents()
 
   return (
-    <Flex bg="primary.100" p="1rem">
+    <Flex bg="primary.100" p="1rem" marginBottom="40px">
       <Icon as={BiBulb} color="primary.500" fontSize="1.5rem" mr="0.5rem" />
       <MarkdownText
         components={mdComponents}
@@ -142,17 +150,16 @@ const EmailNotificationsHeader = ({
 }: EmailNotificationsHeaderProps) => {
   if (isFormPublic) {
     return (
-      <InlineMessage>
+      <InlineMessage marginBottom="40px">
         To change admin email recipients, close your form to new responses.
       </InlineMessage>
     )
   }
 
   if (isPaymentsEnabled) {
     return (
-      <InlineMessage useMarkdown>
-        {`Email notifications for payment forms are not available in FormSG. You
-        can configure them using [Plumber](${OGP_PLUMBER}).`}
+      <InlineMessage useMarkdown marginBottom="40px">
+        {`Email notifications for payment forms are not available in FormSG. You can configure them using [Plumber](${OGP_PLUMBER}).`}
       </InlineMessage>
     )
   }
@@ -166,6 +173,7 @@ const EmailNotificationsHeader = ({
 
 interface AdminEmailRecipientsInputProps {
   onSubmit: (params: { emails: string[] }) => void
+  isEmailsDisabled: boolean
 }
 
 const AdminEmailRecipientsInput = ({
@@ -202,7 +210,10 @@ const AdminEmailRecipientsInput = ({
         <TagInput
           {...(getValues('emails') && getValues('emails').length > 0
             ? {}
-            : { placeholder: 'me@example.com' })}
+            : {
+                placeholder: 'me@example.com',
+                _placeholder: { color: 'neutral.500' },
+              })}
           {...field}
           tagValidation={tagValidation}
           onBlur={handleBlur}