Merge pull request #8853 from opengovsg/release_v6.264.0

build: release v6.264.0

Author: eliotlim

CHANGELOG.md

@@ -4,8 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v6.264.0](https://github.com/opengovsg/FormSG/compare/v6.263.0...v6.264.0)
+
+- feat(i18n): extract text from various modals [`#8843`](https://github.com/opengovsg/FormSG/pull/8843)
+- build: merge release v6.263. to develop [`#8848`](https://github.com/opengovsg/FormSG/pull/8848)
+- build: release v6.263.0 [`#8847`](https://github.com/opengovsg/FormSG/pull/8847)
+
 #### [v6.263.0](https://github.com/opengovsg/FormSG/compare/v6.262.0...v6.263.0)
 
+> 28 October 2025
+
 - fix: radio others bug v2 [`#8842`](https://github.com/opengovsg/FormSG/pull/8842)
 - feat: remove betaFlag from signature field in basic field list drawer [`#8846`](https://github.com/opengovsg/FormSG/pull/8846)
 - fix(deps): bump libphonenumber-js from 1.12.23 to 1.12.25 in /shared [`#8841`](https://github.com/opengovsg/FormSG/pull/8841)
@@ -15,6 +23,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - build(deps-dev): bump vite from 5.4.20 to 5.4.21 in /frontend [`#8831`](https://github.com/opengovsg/FormSG/pull/8831)
 - build: merge release v6.262.0 to develop [`#8833`](https://github.com/opengovsg/FormSG/pull/8833)
 - build: release v6.262.0 [`#8832`](https://github.com/opengovsg/FormSG/pull/8832)
+- chore: bump version to v6.263.0 [`51d1069`](https://github.com/opengovsg/FormSG/commit/51d1069406c2e810280f1568673842fb6cad00dc)
 
 #### [v6.262.0](https://github.com/opengovsg/FormSG/compare/v6.261.0...v6.262.0)
 
@@ -660,7 +669,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix(deps): bump libphonenumber-js from 1.12.8 to 1.12.9 in /shared [`#8466`](https://github.com/opengovsg/FormSG/pull/8466)
 - build: release v6.206.0 [`#8464`](https://github.com/opengovsg/FormSG/pull/8464)
 - chore: bump version to v6.207.0 [`24ca7e8`](https://github.com/opengovsg/FormSG/commit/24ca7e8e8ad6d42f2dfd3ad4223fcc3809e79272)
-- chore: bump version to v6.206.0 [`b121e2f`](https://github.com/opengovsg/FormSG/commit/b121e2ff3234ebf09f14d90dbf631297bd44c606)
 
 #### [v6.206.0](https://github.com/opengovsg/FormSG/compare/v6.205.0...v6.206.0)
 
@@ -669,7 +677,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix: retain isForceConvertToStorageMode for email mode form converts [`#8463`](https://github.com/opengovsg/FormSG/pull/8463)
 - build: merge release v6.205.0 to develop [`#8461`](https://github.com/opengovsg/FormSG/pull/8461)
 - build: release v6.205.0 [`#8460`](https://github.com/opengovsg/FormSG/pull/8460)
-- chore: bump version to v6.206.0 [`7e58553`](https://github.com/opengovsg/FormSG/commit/7e585531370be5555910bb73a0cedd3a03b43ee6)
+- chore: bump version to v6.206.0 [`b121e2f`](https://github.com/opengovsg/FormSG/commit/b121e2ff3234ebf09f14d90dbf631297bd44c606)
 
 #### [v6.205.0](https://github.com/opengovsg/FormSG/compare/v6.204.0...v6.205.0)
 
@@ -699,7 +707,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix(deps): bump zod from 3.25.20 to 3.25.28 in /shared [`#8422`](https://github.com/opengovsg/FormSG/pull/8422)
 - fix(deps): bump zod from 3.25.17 to 3.25.20 in /shared [`#8411`](https://github.com/opengovsg/FormSG/pull/8411)
 - chore: bump version to v6.204.0 [`162f9c6`](https://github.com/opengovsg/FormSG/commit/162f9c65764ddcd8e2dfcf489d2b637a81373691)
-- chore: bump version to v6.203.0 [`fa0d417`](https://github.com/opengovsg/FormSG/commit/fa0d4178044d022d0acc097af13e377b7a37d292)
 
 #### [v6.203.0](https://github.com/opengovsg/FormSG/compare/v6.202.0...v6.203.0)
 
@@ -711,7 +718,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - feat: add iac tag [`#8403`](https://github.com/opengovsg/FormSG/pull/8403)
 - feat: add error span tag for dd retention filter to index [`#8402`](https://github.com/opengovsg/FormSG/pull/8402)
 - build: release v6.202.0 [`#8401`](https://github.com/opengovsg/FormSG/pull/8401)
-- chore: bump version to v6.203.0 [`48e8251`](https://github.com/opengovsg/FormSG/commit/48e825166839c820379846c21efc7a755a2a48e1)
+- chore: bump version to v6.203.0 [`fa0d417`](https://github.com/opengovsg/FormSG/commit/fa0d4178044d022d0acc097af13e377b7a37d292)
 
 #### [v6.202.0](https://github.com/opengovsg/FormSG/compare/v6.201.0...v6.202.0)
 

frontend/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "form-frontend",
-  "version": "6.263.0",
+  "version": "6.264.0",
   "homepage": ".",
   "type": "module",
   "private": true,

frontend/package.json

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } 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'
 import isEmail from 'validator/lib/isEmail'
@@ -27,6 +28,9 @@ export type AddCollaboratorInputs = {
 }
 
 const useAddCollaboratorInput = () => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.collaborator.addInput',
+  })
   const { handleForwardToTransferOwnership, formId } = useCollaboratorWizard()
   const { isLoading, collaborators, form, isFormAdmin } =
     useAdminFormCollaborators(formId)
@@ -76,23 +80,23 @@ const useAddCollaboratorInput = () => {
   const validationRules: RegisterOptions<AddCollaboratorInputs, 'email'> =
     useMemo(() => {
       return {
-        required: 'Collaborator email is required',
+        required: t('errors.required'),
         validate: {
           validEmail: (value: string) =>
-            !value || isEmail(value) || 'Please enter a valid email',
+            !value || isEmail(value) || t('errors.invalidEmail'),
           duplicateEmail: (value: string) =>
             !value ||
             !collaborators?.find(
               (c) => c.email.toLowerCase() === value.toLowerCase(),
             ) ||
-            'This user is an existing collaborator. Edit role below.',
+            t('errors.duplicate'),
           ownerEmail: (value: string) =>
             !value ||
             form?.admin.email?.toLowerCase() !== value.toLowerCase() ||
-            'You cannot add the form owner as a collaborator',
+            t('errors.ownerEmail'),
         },
       }
-    }, [collaborators, form?.admin.email])
+    }, [collaborators, form?.admin.email, t])
 
   const isMobile = useIsMobile()
 
@@ -114,6 +118,9 @@ const useAddCollaboratorInput = () => {
 }
 
 export const AddCollaboratorInput = (): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.collaborator.addInput',
+  })
   const {
     formMethods: {
       control,
@@ -132,19 +139,16 @@ export const AddCollaboratorInput = (): JSX.Element => {
   return (
     <form noValidate onSubmit={handleInputSubmission}>
       <FormControl isInvalid={!isEmpty(errors)} isReadOnly={isMutationLoading}>
-        <FormLabel
-          isRequired
-          description="Share your secret key with users who need to access response data"
-        >
-          Add collaborators or transfer form ownership
+        <FormLabel isRequired description={t('description')}>
+          {t('label')}
         </FormLabel>
         <Skeleton isLoaded={!isQueryLoading}>
           <Stack direction={{ base: 'column', md: 'row' }}>
             <Input
               isDisabled={isQueryLoading}
               type="email"
               {...register('email', validationRules)}
-              placeholder="[email protected]"
+              placeholder={t('email.placeholder')}
             />
             <Controller
               name="role"
@@ -172,9 +176,7 @@ export const AddCollaboratorInput = (): JSX.Element => {
         mt="1rem"
         type="submit"
       >
-        {isTransferOwnershipSelected
-          ? 'Transfer form ownership'
-          : 'Add collaborator'}
+        {isTransferOwnershipSelected ? t('button.transfer') : t('button.add')}
       </Button>
     </form>
   )

frontend/src/features/admin-form/common/components/CollaboratorModal/CollaboratorListScreen/AddCollaboratorInput.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { BiTrash } from 'react-icons/bi'
 import { Spacer, Stack, StackDivider } from '@chakra-ui/react'
 
@@ -23,20 +24,26 @@ type CollaboratorRowMeta = {
 }
 
 const RemoveCollaboratorButton = (
-  props: Pick<IconButtonProps, 'isDisabled' | 'isLoading' | 'onClick'>,
+  props: Pick<IconButtonProps, 'isDisabled' | 'isLoading' | 'onClick'> & {
+    ariaLabel: string
+  },
 ) => {
+  const { ariaLabel, ...rest } = props
   return (
     <IconButton
       icon={<BiTrash />}
       variant="clear"
       colorScheme="danger"
-      aria-label="Remove collaborator"
-      {...props}
+      aria-label={ariaLabel}
+      {...rest}
     />
   )
 }
 
 export const CollaboratorList = (): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.collaborator',
+  })
   const isMobile = useIsMobile()
   // Admin form data required for checking for duplicate emails.
   const {
@@ -166,6 +173,7 @@ export const CollaboratorList = (): JSX.Element => {
                   onChange={handleUpdateRole(row)}
                 />
                 <RemoveCollaboratorButton
+                  ariaLabel={t('list.removeButton.ariaLabel')}
                   isLoading={
                     areMutationsLoading &&
                     mutateRemoveCollaborator.variables?.permissionToRemove
@@ -179,6 +187,7 @@ export const CollaboratorList = (): JSX.Element => {
               <ViewOnlyPermission role={row.role}>
                 {isCurrentUser ? (
                   <RemoveCollaboratorButton
+                    ariaLabel={t('list.removeButton.ariaLabel')}
                     isDisabled={areMutationsLoading}
                     onClick={handleForwardToRemoveSelf}
                   />

frontend/src/features/admin-form/common/components/CollaboratorModal/CollaboratorListScreen/CollaboratorList.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { ModalBody, ModalHeader, Stack } from '@chakra-ui/react'
 
 import { useAdminFormCollaborators } from '~features/admin-form/common/queries'
@@ -8,12 +9,15 @@ import { AddCollaboratorInput } from './AddCollaboratorInput'
 import { CollaboratorList } from './CollaboratorList'
 
 export const CollaboratorListScreen = (): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.collaborator',
+  })
   const { formId } = useCollaboratorWizard()
   const { hasEditAccess } = useAdminFormCollaborators(formId)
   return (
     <>
       <ModalHeader color="secondary.700">
-        {hasEditAccess ? 'Manage collaborators' : 'Collaborators'}
+        {hasEditAccess ? t('list.header.manage') : t('list.header.view')}
       </ModalHeader>
       <ModalBody whiteSpace="pre-wrap">
         <Stack spacing="2.5rem" pb="2rem">

frontend/src/features/admin-form/common/components/CollaboratorModal/CollaboratorListScreen/CollaboratorListScreen.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Text } from '@chakra-ui/react'
 
 import Menu from '~components/Menu'
@@ -20,6 +21,21 @@ export const PermissionDropdown = ({
   allowTransferOwnership,
   buttonVariant = 'outline',
 }: PermissionDropdownProps): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.collaborator.roles',
+  })
+
+  const getRoleLabel = (role: DropdownRole): string => {
+    switch (role) {
+      case DropdownRole.Owner:
+        return t('owner')
+      case DropdownRole.Editor:
+        return t('editor')
+      case DropdownRole.Viewer:
+        return t('viewer')
+    }
+  }
+
   const availableRoles = useMemo(() => {
     return Object.values(DropdownRole).filter((role) => {
       // Either not owner role, or owner role and allowTransferOwnership is true.
@@ -39,7 +55,7 @@ export const PermissionDropdown = ({
             isActive={isOpen}
             iconSpacing="1.5rem"
           >
-            {value}
+            {getRoleLabel(value)}
           </Menu.Button>
           <Menu.List defaultValue={value}>
             {availableRoles.map((role) => (
@@ -48,7 +64,7 @@ export const PermissionDropdown = ({
                   // Styling to hint to user the current active choice
                   fontWeight={role === value ? 500 : 400}
                 >
-                  {role}
+                  {getRoleLabel(role)}
                 </Text>
               </Menu.Item>
             ))}

frontend/src/features/admin-form/common/components/CollaboratorModal/CollaboratorListScreen/PermissionDropdown.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { Stack, StackProps, Text } from '@chakra-ui/react'
 
 import { DropdownRole } from '../constants'
@@ -12,6 +13,21 @@ export const ViewOnlyPermission = ({
   children,
   ...stackProps
 }: ViewOnlyPermissionProps): JSX.Element => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.collaborator.roles',
+  })
+
+  const getRoleLabel = (role: DropdownRole): string => {
+    switch (role) {
+      case DropdownRole.Owner:
+        return t('owner')
+      case DropdownRole.Editor:
+        return t('editor')
+      case DropdownRole.Viewer:
+        return t('viewer')
+    }
+  }
+
   return (
     <Stack
       direction="row"
@@ -26,7 +42,7 @@ export const ViewOnlyPermission = ({
         textStyle="body-2"
         color="secondary.500"
       >
-        {role}
+        {getRoleLabel(role)}
       </Text>
       {children}
     </Stack>

frontend/src/features/admin-form/common/components/CollaboratorModal/CollaboratorListScreen/ViewOnlyPermission.tsx

@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
   ModalBody,
   ModalFooter,
@@ -15,6 +16,10 @@ import { useMutateCollaborators } from '~features/admin-form/common/mutations'
 import { useCollaboratorWizard } from '../CollaboratorWizardContext'
 
 export const RemoveSelfScreen = (): JSX.Element | null => {
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'features.adminForm.collaborator',
+  })
+  const { t: tCommon } = useTranslation()
   const isMobile = useIsMobile()
   const { mutateRemoveSelf } = useMutateCollaborators()
   const { handleBackToList, onClose } = useCollaboratorWizard()
@@ -25,14 +30,9 @@ export const RemoveSelfScreen = (): JSX.Element | null => {
 
   return (
     <>
-      <ModalHeader color="secondary.700">
-        Remove myself as collaborator
-      </ModalHeader>
+      <ModalHeader color="secondary.700">{t('removeSelf.header')}</ModalHeader>
       <ModalBody whiteSpace="pre-wrap" color="secondary.500">
-        <Text>
-          You are removing yourself as a collaborator and will lose all access
-          to this form. This action cannot be undone.
-        </Text>
+        <Text>{t('removeSelf.message')}</Text>
       </ModalBody>
       <ModalFooter>
         <Stack
@@ -46,7 +46,7 @@ export const RemoveSelfScreen = (): JSX.Element | null => {
             colorScheme="danger"
             onClick={handleRemoveSelf}
           >
-            Yes, remove myself
+            {t('removeSelf.button.confirm')}
           </Button>
           <Button
             isFullWidth={isMobile}
@@ -55,7 +55,7 @@ export const RemoveSelfScreen = (): JSX.Element | null => {
             colorScheme="secondary"
             onClick={handleBackToList}
           >
-            Cancel
+            {tCommon('features.common.cancel')}
           </Button>
         </Stack>
       </ModalFooter>