feat(i18n): replace hardcoded string values for AdminFormNavbar (#7456)

feat(i18n): add en-sg translations and types for admin-form-navbar, use translations in AdminFormNavbar Co-authored-by: Ken Lee Shu Ming <[email protected]>
opengovsg · Jul 8, 2024 · a79f783 · a79f783
1 parent b506433
commit a79f783
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 14 deletions.
diff --git a/frontend/src/features/admin-form/common/components/AdminFormNavbar/AdminFormNavbar.tsx b/frontend/src/features/admin-form/common/components/AdminFormNavbar/AdminFormNavbar.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
   BiDotsHorizontalRounded,
   BiShareAlt,
@@ -72,6 +73,7 @@ export const AdminFormNavbar = ({
   handleShareButtonClick,
   previewFormLink,
 }: AdminFormNavbarProps): JSX.Element => {
+  const { t } = useTranslation()
   const { ref, onMouseDown } = useDraggable<HTMLDivElement>()
   const { isOpen, onClose, onOpen } = useDisclosure()
   const { pathname } = useLocation()
@@ -182,7 +184,7 @@ export const AdminFormNavbar = ({
           to={ADMINFORM_BUILD_SUBROUTE}
           isActive={checkTabActive(ADMINFORM_BUILD_SUBROUTE)}
         >
-          Create
+          {t('features.adminFormNavbar.tabs.create')}
         </NavigationTab>
         <NavigationTab
           hidden={viewOnly}
@@ -197,7 +199,7 @@ export const AdminFormNavbar = ({
             }
           }}
         >
-          Settings
+          {t('features.adminFormNavbar.tabs.settings')}
           {shouldShowSettingsReddot ? (
             <Icon
               as={GoPrimitiveDot}
@@ -212,7 +214,7 @@ export const AdminFormNavbar = ({
           to={ADMINFORM_RESULTS_SUBROUTE}
           isActive={checkTabActive(ADMINFORM_RESULTS_SUBROUTE)}
         >
-          Results
+          {t('features.adminFormNavbar.tabs.results')}
         </NavigationTab>
       </NavigationTabList>
       <Flex
@@ -226,7 +228,7 @@ export const AdminFormNavbar = ({
       >
         <IconButton
           display={{ base: 'flex', md: 'none' }}
-          aria-label="Form actions"
+          aria-label={t('features.adminFormNavbar.formActions')}
           onClick={onOpen}
           icon={<BiDotsHorizontalRounded />}
         />
@@ -235,26 +237,28 @@ export const AdminFormNavbar = ({
             {renderLastModified}
           </Flex>
           <ButtonGroup spacing="0.5rem" isDisabled={!formInfo}>
-            <Tooltip label="Manage collaborators">
+            <Tooltip label={t('features.adminFormNavbar.manageCollaborators')}>
               <IconButton
-                aria-label="Manage collaborators"
+                aria-label={t('features.adminFormNavbar.manageCollaborators')}
                 variant="outline"
                 onClick={handleAddCollabButtonClick}
                 icon={<BiUserPlus />}
               />
             </Tooltip>
-            <Tooltip label="Preview form">
+            <Tooltip label={t('features.adminFormNavbar.previewForm')}>
               <IconButton
                 as={ReactLink}
-                aria-label="Preview form"
+                aria-label={t('features.adminFormNavbar.previewForm')}
                 variant="outline"
                 to={previewFormLink}
                 target="_blank"
                 icon={<BiShow />}
               />
             </Tooltip>
-            <Tooltip label="Share your form link">
-              <Button onClick={handleShareButtonClick}>Share</Button>
+            <Tooltip label={t('features.adminFormNavbar.shareBtn.tooltip')}>
+              <Button onClick={handleShareButtonClick}>
+                {t('features.adminFormNavbar.shareBtn.text')}
+              </Button>
             </Tooltip>
           </ButtonGroup>
         </Box>
@@ -278,21 +282,21 @@ export const AdminFormNavbar = ({
                 {...mobileDrawerExtraButtonProps}
                 leftIcon={<BiShow fontSize="1.25rem" />}
               >
-                Preview form
+                {t('features.adminFormNavbar.previewForm')}
               </Button>
               <Button
                 {...mobileDrawerExtraButtonProps}
                 onClick={handleShareButtonClick}
                 leftIcon={<BiShareAlt fontSize="1.25rem" />}
               >
-                Share form link
+                {t('features.adminFormNavbar.shareBtn.textMobile')}
               </Button>
               <Button
                 {...mobileDrawerExtraButtonProps}
                 onClick={handleAddCollabButtonClick}
                 leftIcon={<BiUserPlus fontSize="1.25rem" />}
               >
-                Manage collaborators
+                {t('features.adminFormNavbar.manageCollaborators')}
               </Button>
             </ButtonGroup>
           </DrawerBody>

diff --git a/frontend/src/i18n/locales/en-sg.ts b/frontend/src/i18n/locales/en-sg.ts
@@ -1,3 +1,4 @@
+import { enSG as adminFormNavbar } from './features/admin-form-navbar'
 import { enSG as common } from './features/common'
 import { enSG as login } from './features/login'
 import { enSG as publicForm } from './features/public-form'
@@ -6,6 +7,7 @@ import { FallbackTranslation } from './types'
 export const enSG: FallbackTranslation = {
   translation: {
     features: {
+      adminFormNavbar,
       common,
       login,
       publicForm,

diff --git a/frontend/src/i18n/locales/features/admin-form-navbar/en-sg.ts b/frontend/src/i18n/locales/features/admin-form-navbar/en-sg.ts
@@ -0,0 +1,18 @@
+import { AdminFormNavbar } from '.'
+
+export const enSG: AdminFormNavbar = {
+  tabs: {
+    create: 'Create',
+    settings: 'Settings',
+    results: 'Results',
+    routing: 'Routing',
+  },
+  manageCollaborators: 'Manage collaborators',
+  previewForm: 'Preview form',
+  formActions: 'Form actions',
+  shareBtn: {
+    text: 'Share',
+    textMobile: 'Share form link',
+    tooltip: 'Share your form link',
+  },
+}
diff --git a/frontend/src/i18n/locales/features/admin-form-navbar/index.ts b/frontend/src/i18n/locales/features/admin-form-navbar/index.ts
@@ -0,0 +1,18 @@
+export * from './en-sg'
+
+export interface AdminFormNavbar {
+  tabs: {
+    create: string
+    settings: string
+    results: string
+    routing: string
+  }
+  manageCollaborators: string
+  previewForm: string
+  formActions: string
+  shareBtn: {
+    text: string
+    textMobile: string
+    tooltip: string
+  }
+}
diff --git a/frontend/src/i18n/locales/features/index.ts b/frontend/src/i18n/locales/features/index.ts
@@ -1,3 +1,4 @@
+export { type AdminFormNavbar } from './admin-form-navbar'
 export { type Common } from './common'
 export { type Login } from './login'
 export { type PublicForm } from './public-form'
diff --git a/frontend/src/i18n/locales/types.ts b/frontend/src/i18n/locales/types.ts
@@ -1,8 +1,9 @@
-import { Common, Login, PublicForm } from './features'
+import { AdminFormNavbar, Common, Login, PublicForm } from './features'
 
 interface Translation {
   translation: {
     features: {
+      adminFormNavbar?: AdminFormNavbar
       common?: Common
       publicForm?: PublicForm
       login?: Login