feat(i18n): extract text for form metadata (#7926)

Extract labels for form metadata, namely last modified data
and form type

[i18n]
- Add Meta section to `adminForm`

[features]
- Replace constants file with i18n equivalent mapping of type labels

frontend/src/features/admin-form/settings/components/GeneralTabHeader.tsx

@@ -1,20 +1,20 @@
+import { useTranslation } from 'react-i18next'
 import { Skeleton, Wrap } from '@chakra-ui/react'
 
 import Badge from '~components/Badge'
 
-import { RESPONSE_MODE_TO_TEXT } from '~features/admin-form/common/constants'
-
 import { useAdminFormSettings } from '../queries'
 
 import { CategoryHeader } from './CategoryHeader'
 
 export const GeneralTabHeader = (): JSX.Element => {
+  const { t } = useTranslation()
   const { data: settings, isLoading: isLoadingSettings } =
     useAdminFormSettings()
 
   const readableFormResponseMode = !settings
     ? 'Loading...'
-    : RESPONSE_MODE_TO_TEXT[settings.responseMode]
+    : t(`features.adminForm.meta.responseModeText.${settings.responseMode}`)
 
   return (
     <Wrap

frontend/src/features/workspace/components/WorkspaceFormRow/WorkspaceFormRow.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Link as ReactLink } from 'react-router-dom'
 import { Box, ButtonProps, chakra, Flex, Text } from '@chakra-ui/react'
 import dayjs from 'dayjs'
@@ -8,8 +9,6 @@ import { AdminDashboardFormMetaDto, FormStatus } from '~shared/types/form/form'
 import { ADMINFORM_ROUTE } from '~constants/routes'
 import Badge from '~components/Badge'
 
-import { RESPONSE_MODE_TO_TEXT } from '~features/admin-form/common/constants'
-
 import { FormStatusLabel } from './FormStatusLabel'
 import { RowActions } from './RowActions'
 
@@ -30,6 +29,7 @@ export const WorkspaceFormRow = ({
   formMeta,
   ...buttonProps
 }: WorkspaceFormRowProps): JSX.Element => {
+  const { t } = useTranslation()
   const prettyLastModified = useMemo(() => {
     return dayjs(formMeta.lastModified).calendar(null, RELATIVE_DATE_FORMAT)
   }, [formMeta.lastModified])
@@ -83,12 +83,19 @@ export const WorkspaceFormRow = ({
             {formMeta.title}
           </Text>
           <Text textStyle="body-2" color="secondary.400">
-            Edited {prettyLastModified}
+            {t('features.adminForm.meta.prettyLastModified', {
+              prettyLastModified,
+            })}
           </Text>
         </Flex>
         <Box gridArea="formType" alignSelf="center">
           <Badge bgColor="primary.100" color="secondary.500">
-            {RESPONSE_MODE_TO_TEXT[formMeta.responseMode]}
+            {t(
+              `features.adminForm.meta.responseModeText.${formMeta.responseMode}`,
+              {
+                prettyLastModified,
+              },
+            )}
           </Badge>
         </Box>
         <Box gridArea="status" alignSelf="center">

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

@@ -1,7 +1,9 @@
+import { enSG as meta } from './meta'
 import { enSG as navbar } from './navbar'
 import { enSG as sidebar } from './sidebar'
 
 export const enSG = {
   navbar,
   sidebar,
+  meta,
 }

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

@@ -1,4 +1,5 @@
 export * from './en-sg'
+export { type Meta } from './meta'
 export { type Navbar } from './navbar'
 export { type Fields } from './sidebar'
 export { type HeaderAndInstructions } from './sidebar'

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

@@ -0,0 +1,10 @@
+import { FormResponseMode } from '~shared/types'
+
+export const enSG = {
+  prettyLastModified: 'Edited {prettyLastModified}',
+  responseModeText: {
+    [FormResponseMode.Multirespondent]: 'Multi-respondent form',
+    [FormResponseMode.Email]: 'Email mode',
+    [FormResponseMode.Encrypt]: 'Storage mode',
+  },
+}

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

@@ -0,0 +1,10 @@
+import { FormResponseMode } from '~shared/types'
+
+export * from './en-sg'
+
+export interface Meta {
+  prettyLastModified: string
+  responseModeText: {
+    [k in FormResponseMode]: string
+  }
+}

frontend/src/i18n/locales/features/index.ts

@@ -1,8 +1,11 @@
-export { type Navbar } from './admin-form'
-export { type Fields } from './admin-form'
-export { type HeaderAndInstructions } from './admin-form'
-export { type Logic } from './admin-form'
-export { type ThankYou } from './admin-form'
+export {
+  type Fields,
+  type HeaderAndInstructions,
+  type Logic,
+  type Meta,
+  type Navbar,
+  type ThankYou,
+} from './admin-form'
 export { type Common } from './common'
 export { type Login } from './login'
 export { type PublicForm } from './public-form'

frontend/src/i18n/locales/types.ts

@@ -6,6 +6,7 @@ import {
   HeaderAndInstructions,
   Logic,
   Login,
+  Meta,
   Navbar,
   PublicForm,
   ThankYou,
@@ -22,6 +23,7 @@ interface Translation {
           thankYou?: ThankYou
         }
         navbar?: Navbar
+        meta?: Meta
       }
       common?: Common
       publicForm?: PublicForm