feat: extract tract for admin form settings

apps/frontend/src/features/admin-form/settings/SettingsPage.tsx

@@ -75,7 +75,7 @@ export const SettingsPage = (): JSX.Element => {
     !isFormSettingLoading &&
     user?.betaFlags?.multiLangTranslation
       ? {
-          label: 'Multi-language',
+          label: t('features.adminForm.settings.tabs.multiLanguage'),
           icon: LanguageTranslation,
           component: SettingsMultiLangPage,
           path: 'language',

apps/frontend/src/features/admin-form/settings/components/AuthSettingsSection/SecretKeyDownloadWhitelistFileModal.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useQueryClient } from 'react-query'
 import { UseDisclosureReturn } from '@chakra-ui/react'
 import Papa from 'papaparse'
@@ -30,6 +31,7 @@ export const SecretKeyDownloadWhitelistFileModal = ({
   downloadFileName,
   formId,
 }: SecretKeyDownloadWhitelistFileModalProps) => {
+  const { t } = useTranslation()
   const toast = useToast({ status: 'success', isClosable: true })
   const errorToast = useToast({ status: 'danger', isClosable: true })
   const [isDecrypting, setIsDecrypting] = useState(false)
@@ -137,8 +139,12 @@ export const SecretKeyDownloadWhitelistFileModal = ({
       onClose={onClose}
       isOpen={isOpen}
       publicKey={publicKey}
-      modalActionText="Download CSV file of whitelisted NRIC/FIN/UEN(s)"
-      submitButtonText="Download file"
+      modalActionText={t(
+        'features.adminForm.settings.secretKeyModal.whitelistCsv.modalTitle',
+      )}
+      submitButtonText={t(
+        'features.adminForm.settings.secretKeyModal.whitelistCsv.submitButton',
+      )}
       hasAck={false}
     />
   )

apps/frontend/src/features/admin-form/settings/components/FormDetailsSection.tsx

@@ -1,5 +1,6 @@
 import { KeyboardEventHandler, useCallback } from 'react'
 import { Controller, RegisterOptions, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 import { FormControl, Skeleton, Stack } from '@chakra-ui/react'
 import { isEmpty } from 'lodash'
 
@@ -30,6 +31,7 @@ interface FormTitleInputProps {
 export const FormTitleInput = ({
   initialTitle,
 }: FormTitleInputProps): JSX.Element => {
+  const { t } = useTranslation()
   const {
     control,
     handleSubmit,
@@ -71,7 +73,7 @@ export const FormTitleInput = ({
 
   return (
     <FormControl isInvalid={!isEmpty(errors)}>
-      <FormLabel isRequired>Form name</FormLabel>
+      <FormLabel isRequired>{t('features.common.formName')}</FormLabel>
 
       <Controller<{ title: string }>
         control={control}

apps/frontend/src/features/admin-form/settings/components/SecretKeyActivationModal.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { UseDisclosureReturn } from '@chakra-ui/react'
 
 import { FormStatus } from 'formsg-shared/types/form/form'
@@ -18,6 +19,7 @@ export const SecretKeyActivationModal = ({
   isOpen,
   publicKey,
 }: SecretKeyActivationModalProps): JSX.Element => {
+  const { t } = useTranslation()
   const { mutateFormStatus } = useMutateFormSettings()
 
   const onSubmit = () => {
@@ -31,8 +33,12 @@ export const SecretKeyActivationModal = ({
       onClose={onClose}
       isOpen={isOpen}
       publicKey={publicKey}
-      modalActionText="Activate your form"
-      submitButtonText="Activate form"
+      modalActionText={t(
+        'features.adminForm.settings.secretKeyModal.activation.modalTitle',
+      )}
+      submitButtonText={t(
+        'features.adminForm.settings.secretKeyModal.activation.submitButton',
+      )}
       onSubmit={onSubmit}
       hasAck
     />

apps/frontend/src/features/admin-form/settings/components/SecretKeyFormModal.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { BiRightArrowAlt, BiUpload } from 'react-icons/bi'
 import {
   Container,
@@ -51,6 +52,8 @@ export const SecretKeyFormModal = ({
   onSubmit,
   hasAck = false,
 }: SecretKeyFormModalProps): JSX.Element => {
+  const { t } = useTranslation()
+
   const {
     dragging,
     errors,
@@ -104,22 +107,32 @@ export const SecretKeyFormModal = ({
                 mb="1rem"
                 isDisabled={isLoading}
               >
-                <FormLabel>Enter or upload Secret Key</FormLabel>
+                <FormLabel>
+                  {t('features.adminForm.settings.secretKeyModal.fieldLabel')}
+                </FormLabel>
                 <Stack direction="row" spacing="0.5rem">
                   <Input
                     type="password"
                     {...register(SECRET_KEY_NAME, {
-                      required: "Please enter the form's secret key",
+                      required: t(
+                        'features.adminForm.settings.secretKeyModal.validation.required',
+                      ),
                       pattern: {
                         value: SECRET_KEY_REGEX,
-                        message: 'The secret key provided is invalid',
+                        message: t(
+                          'features.adminForm.settings.secretKeyModal.validation.invalidSecretKey',
+                        ),
                       },
                       setValueAs: (v) => v.trim(),
                     })}
                     placeholder={
                       dragging
-                        ? 'Drop your Secret Key here'
-                        : 'Enter or drop your Secret Key to continue'
+                        ? t(
+                            'features.adminForm.settings.secretKeyModal.placeholder.dragging',
+                          )
+                        : t(
+                            'features.adminForm.settings.secretKeyModal.placeholder.default',
+                          )
                     }
                     onDragEnter={handleDragEnter}
                     onDragLeave={handleDragLeave}
@@ -129,7 +142,9 @@ export const SecretKeyFormModal = ({
                   <IconButton
                     isDisabled={isLoading}
                     variant="outline"
-                    aria-label="Pass secret key from file"
+                    aria-label={t(
+                      'features.adminForm.settings.secretKeyModal.uploadFromFileAriaLabel',
+                    )}
                     icon={<BiUpload />}
                     onClick={() => secretKeyFileUploadRef.current?.click()}
                   />
@@ -145,8 +160,7 @@ export const SecretKeyFormModal = ({
                       required: true,
                     })}
                   >
-                    If I lose my key, I will not be able to activate my form and
-                    all my responses will be lost permanently
+                    {t('features.adminForm.settings.secretKeyModal.ackLabel')}
                   </Checkbox>
                 </FormControl>
               ) : null}

apps/frontend/src/features/admin-form/settings/components/SettingsTab.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { As, Box, Icon, Tab } from '@chakra-ui/react'
 
 import Badge from '~components/Badge'
@@ -13,6 +14,8 @@ export const SettingsTab = ({
   icon,
   showNewBadge = false,
 }: SettingsTabProps): JSX.Element => {
+  const { t } = useTranslation()
+
   return (
     <Tab justifyContent="flex-start" p="1rem">
       <Icon as={icon} color="currentcolor" fontSize="1.5rem" />
@@ -25,7 +28,7 @@ export const SettingsTab = ({
           colorScheme="success"
           display={{ base: 'none', lg: 'initial' }}
         >
-          New
+          {t('features.adminForm.settings.tabs.newBadge')}
         </Badge>
       ) : null}
     </Tab>

apps/frontend/src/i18n/locales/features/admin-form/settings/en-sg.ts

@@ -8,6 +8,32 @@ export const enSG = {
   singpass: {
     title: 'Singpass',
   },
+  tabs: {
+    newBadge: 'New',
+    multiLanguage: 'Multi-language',
+  },
+  secretKeyModal: {
+    fieldLabel: 'Enter or upload Secret Key',
+    uploadFromFileAriaLabel: 'Pass secret key from file',
+    validation: {
+      required: "Please enter the form's secret key",
+      invalidSecretKey: 'The secret key provided is invalid',
+    },
+    placeholder: {
+      dragging: 'Drop your Secret Key here',
+      default: 'Enter or drop your Secret Key to continue',
+    },
+    ackLabel:
+      'If I lose my key, I will not be able to activate my form and all my responses will be lost permanently',
+    activation: {
+      modalTitle: 'Activate your form',
+      submitButton: 'Activate form',
+    },
+    whitelistCsv: {
+      modalTitle: 'Download CSV file of whitelisted NRIC/FIN/UEN(s)',
+      submitButton: 'Download file',
+    },
+  },
   emailNotifications,
   webhooks,
   payments,

apps/frontend/src/i18n/locales/features/admin-form/settings/index.ts

@@ -9,9 +9,38 @@ export type HasTitle = {
   title: string
 }
 
+export interface SettingsTabsStrings {
+  newBadge: string
+  multiLanguage: string
+}
+
+export interface SecretKeyModalStrings {
+  fieldLabel: string
+  uploadFromFileAriaLabel: string
+  validation: {
+    required: string
+    invalidSecretKey: string
+  }
+  placeholder: {
+    dragging: string
+    default: string
+  }
+  ackLabel: string
+  activation: {
+    modalTitle: string
+    submitButton: string
+  }
+  whitelistCsv: {
+    modalTitle: string
+    submitButton: string
+  }
+}
+
 export interface Settings {
   general: General
   singpass: HasTitle
+  tabs: SettingsTabsStrings
+  secretKeyModal: SecretKeyModalStrings
   emailNotifications: EmailNotifications
   webhooks: Webhooks
   payments: Payments