feat: add form field list for translation

frontend/src/app/AppRouter.tsx

@@ -165,7 +165,9 @@ export const AppRouter = (): JSX.Element => {
         >
           <Route index element={<CreatePage />} />
           <Route path={ADMINFORM_SETTINGS_SUBROUTE} element={<SettingsPage />}>
-            <Route path={':settingsTab'} element={<SettingsPage />} />
+            <Route path={':settingsTab'} element={<SettingsPage />}>
+              <Route path={':language'} element={<SettingsPage />} />
+            </Route>
           </Route>
           <Route
             path={ADMINFORM_RESULTS_SUBROUTE}

frontend/src/features/admin-form/settings/SettingsMultiLangPage.stories.tsx

@@ -1,9 +1,17 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, StoryFn } from '@storybook/react'
 
-import { FormSettings, Language } from '~shared/types'
+import {
+  FormColorTheme,
+  FormLogoState,
+  FormSettings,
+  Language,
+} from '~shared/types'
 
 import {
+  createFormBuilderMocks,
   getAdminFormSettings,
+  MOCK_FORM_FIELDS_WITH_NO_TRANSLATIONS,
+  MOCK_FORM_FIELDS_WITH_TRANSLATIONS,
   patchAdminFormSettings,
 } from '~/mocks/msw/handlers/admin-form'
 
@@ -29,15 +37,23 @@ const buildMswRoutes = ({
 export default {
   title: 'Pages/AdminFormPage/Settings/MultiLang',
   component: SettingsMultiLangPage,
-  decorators: [StoryRouter({ initialEntries: ['/12345'], path: '/:formId' })],
+  decorators: [
+    StoryRouter({
+      initialEntries: ['/61540ece3d4a6e50ac0cc6ff'],
+      path: '/:formId',
+    }),
+  ],
   parameters: {
     // Required so skeleton "animation" does not hide content.
     chromatic: { pauseAnimationAtEnd: true },
     msw: buildMswRoutes(),
   },
 } as Meta
 
-const Template: Story = () => <SettingsMultiLangPage />
+const Template: StoryFn = () => <SettingsMultiLangPage />
+
+// Stories related to toggling multi language translation feature on and off
+// and choosing which language to enable translations for
 export const MultiLangNotSelected = Template.bind({})
 MultiLangNotSelected.parameters = {
   msw: buildMswRoutes({
@@ -62,6 +78,70 @@ MultiLangEnglishChineseMalaySelected.parameters = {
   }),
 }
 
+// Stories related to displaying list of form fields for translations
+export const MultiLangListOfFormFieldsWithNoTranslations = Template.bind({})
+MultiLangListOfFormFieldsWithNoTranslations.parameters = {
+  router: {
+    initialEntries: ['/61540ece3d4a6e50ac0cc6ff/settings/multi-language/zh-SG'],
+    path: '/:formId/settings/multi-language/:language',
+  },
+  msw: [
+    ...createFormBuilderMocks({
+      form_fields: MOCK_FORM_FIELDS_WITH_NO_TRANSLATIONS,
+      startPage: {
+        colorTheme: FormColorTheme.Blue,
+        logo: { state: FormLogoState.Default },
+        paragraph: 'Test start page',
+      },
+    }),
+    getAdminFormSettings(),
+    patchAdminFormSettings(),
+  ],
+}
+
+export const MultiLangListOfFormFieldsWithCompletedTranslations = Template.bind(
+  {},
+)
+MultiLangListOfFormFieldsWithCompletedTranslations.parameters = {
+  router: {
+    initialEntries: ['/61540ece3d4a6e50ac0cc6ff/settings/multi-language/zh-SG'],
+    path: '/:formId/settings/multi-language/:language',
+  },
+  msw: [
+    ...createFormBuilderMocks({
+      form_fields: MOCK_FORM_FIELDS_WITH_TRANSLATIONS,
+      // Completed translations for start page
+      startPage: {
+        colorTheme: FormColorTheme.Blue,
+        logo: { state: FormLogoState.Default },
+        paragraph: 'Test start page',
+        paragraphTranslations: [
+          { language: Language.CHINESE, translation: 'Fake Translations' },
+        ],
+      },
+      // Completed translations for end page
+      endPage: {
+        title: 'Thank you for filling out the form.',
+        titleTranslations: [
+          { language: Language.CHINESE, translation: 'Fake Title Translation' },
+        ],
+        paragraph: 'Test end page paragraph',
+        paragraphTranslations: [
+          {
+            language: Language.CHINESE,
+            translation: 'Fake Paragraph Translation',
+          },
+        ],
+        buttonText: 'Submit another form',
+        paymentTitle: 'payment title',
+        paymentParagraph: 'payment paragraph',
+      },
+    }),
+    getAdminFormSettings(),
+    patchAdminFormSettings(),
+  ],
+}
+
 export const Loading = Template.bind({})
 Loading.parameters = {
   msw: buildMswRoutes({ delay: 'infinite' }),

frontend/src/features/admin-form/settings/SettingsMultiLangPage.tsx

@@ -1,5 +1,15 @@
+import { useParams } from 'react-router-dom'
+
 import { MultiLanguageSection } from './components/MultiLanguageSection/MultiLanguageSection'
+import { TranslationListSection } from './components/MultiLanguageSection/TranslationListSection'
 
 export const SettingsMultiLangPage = (): JSX.Element => {
-  return <MultiLanguageSection />
+  const { language } = useParams()
+
+  return (
+    <>
+      {!language ? <MultiLanguageSection /> : null}
+      {language ? <TranslationListSection language={language} /> : null}
+    </>
+  )
 }

frontend/src/features/admin-form/settings/components/MultiLanguageSection/FormMultiLanguageToggle.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react'
 import { BiEditAlt } from 'react-icons/bi'
 import { GoEye, GoEyeClosed } from 'react-icons/go'
+import { useNavigate, useParams } from 'react-router-dom'
 import {
   Box,
   Divider,
@@ -14,6 +15,7 @@ import _ from 'lodash'
 
 import { Language } from '~shared/types'
 
+import { ADMINFORM_ROUTE } from '~constants/routes'
 import {
   convertUnicodeLocaleToLanguage,
   getDefaultSupportedLanguages,
@@ -40,7 +42,9 @@ const LanguageTranslationRow = ({
   isDefaultLanguage,
   isLast,
 }: LanguageTranslationRowProps): JSX.Element => {
+  const { formId } = useParams()
   const { data: settings } = useAdminFormSettings()
+  const navigate = useNavigate()
 
   const supportedLanguages = settings?.supportedLanguages ?? null
 
@@ -74,6 +78,15 @@ const LanguageTranslationRow = ({
     [mutateFormSupportedLanguages, supportedLanguages],
   )
 
+  const handleLanguageTranslationEditClick = useCallback(
+    (language: Language) => {
+      navigate(
+        `${ADMINFORM_ROUTE}/${formId}/settings/multi-language/${language.toString()}`,
+      )
+    },
+    [formId, navigate],
+  )
+
   return (
     <>
       <Flex alignItems="center" w="100%" py={2}>
@@ -109,7 +122,9 @@ const LanguageTranslationRow = ({
                 colorScheme="secondary"
                 aria-label={`Add ${unicodeLocale} translations`}
                 // TODO: Will add redirection to translation section in next PR
-                onClick={() => console.log('Edit translations')}
+                onClick={() =>
+                  handleLanguageTranslationEditClick(unicodeLocale)
+                }
               />
             </Tooltip>
           </HStack>