Merge pull request #7873 from opengovsg/release_v6.160.0

build: release v6.160.0
opengovsg · Nov 11, 2024 · 3c3c91c · 3c3c91c
2 parents 55f8fa6 + e5116ba
commit 3c3c91c
Show file tree

Hide file tree

Showing 13 changed files with 135 additions and 100 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,8 +4,28 @@ 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.160.0](https://github.com/opengovsg/FormSG/compare/v6.160.0...v6.160.0)
+
+- fix: add validation for myinfo child name field  [`#7875`](https://github.com/opengovsg/FormSG/pull/7875)
+- fix: drawer date picker invalid selection bug [`#7866`](https://github.com/opengovsg/FormSG/pull/7866)
+- fix: add validation rules to controller [`#7874`](https://github.com/opengovsg/FormSG/pull/7874)
+
+#### [v6.160.0](https://github.com/opengovsg/FormSG/compare/v6.159.0...v6.160.0)
+
+> 11 November 2024
+
+- fix: make children body input components controlled from the start [`#7871`](https://github.com/opengovsg/FormSG/pull/7871)
+- fix(deps): bump libphonenumber-js from 1.11.13 to 1.11.14 in /shared [`#7872`](https://github.com/opengovsg/FormSG/pull/7872)
+- feat(i18n): add en-sg locale for AddRowFooter [`#7867`](https://github.com/opengovsg/FormSG/pull/7867)
+- build: merge release v6.159.0 to develop [`#7868`](https://github.com/opengovsg/FormSG/pull/7868)
+- fix(deps): bump libphonenumber-js from 1.11.12 to 1.11.13 in /shared [`#7858`](https://github.com/opengovsg/FormSG/pull/7858)
+- build: release v6.159.0 [`#7865`](https://github.com/opengovsg/FormSG/pull/7865)
+- chore: bump version to v6.160.0 [`d795563`](https://github.com/opengovsg/FormSG/commit/d7955630f40aef56e41240cf4a7a5c92ab2781e7)
+
 #### [v6.159.0](https://github.com/opengovsg/FormSG/compare/v6.158.2...v6.159.0)
 
+> 7 November 2024
+
 - chore: log email on error [`#7863`](https://github.com/opengovsg/FormSG/pull/7863)
 - build: merge release v6.158.2 to develop [`#7864`](https://github.com/opengovsg/FormSG/pull/7864)
 - fix: date utc and typing issues [`#7862`](https://github.com/opengovsg/FormSG/pull/7862)
@@ -14,6 +34,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix: handle string response in DTO for date validation object [`#7850`](https://github.com/opengovsg/FormSG/pull/7850)
 - fix: add missed v3 to log [`#7851`](https://github.com/opengovsg/FormSG/pull/7851)
 - fix(deps): bump openai from 4.63.0 to 4.70.3 [`#7841`](https://github.com/opengovsg/FormSG/pull/7841)
+- chore: bump version to v6.159.0 [`02fbd76`](https://github.com/opengovsg/FormSG/commit/02fbd7657959198faef6bc40a11973bc80d19cbb)
 
 #### [v6.158.2](https://github.com/opengovsg/FormSG/compare/v6.158.1...v6.158.2)
 

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "form-frontend",
-  "version": "6.159.0",
+  "version": "6.160.0",
   "homepage": ".",
   "type": "module",
   "private": true,

diff --git a/...er-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditDate/EditDate.tsx b/...er-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditDate/EditDate.tsx
@@ -136,8 +136,8 @@ const transformDateEditFormToField = (
     case DateSelectedValidation.Custom: {
       nextValidationOptions = {
         selectedDateValidation: inputs.dateValidation.selectedDateValidation,
-        customMinDate: inputs.dateValidation.customMinDate,
-        customMaxDate: inputs.dateValidation.customMaxDate,
+        customMinDate: normalizeDateToUtc(inputs.dateValidation.customMinDate),
+        customMaxDate: normalizeDateToUtc(inputs.dateValidation.customMaxDate),
       }
     }
   }

diff --git a/frontend/src/i18n/locales/features/public-form/en-sg.ts b/frontend/src/i18n/locales/features/public-form/en-sg.ts
@@ -1,3 +1,4 @@
+import { enSG as table } from './table'
 import { PublicForm } from '.'
 
 export const enSG: PublicForm = {
@@ -30,5 +31,6 @@ export const enSG: PublicForm = {
       proceedToPay: 'Proceed to pay',
       submitNow: 'Submit now',
     },
+    table,
   },
 }
diff --git a/frontend/src/i18n/locales/features/public-form/index.ts b/frontend/src/i18n/locales/features/public-form/index.ts
@@ -1,3 +1,5 @@
+import { Table } from './table'
+
 export * from './en-sg'
 
 export interface PublicForm {
@@ -24,5 +26,6 @@ export interface PublicForm {
       proceedToPay: string
       submitNow: string
     }
+    table: Table
   }
 }
diff --git a/frontend/src/i18n/locales/features/public-form/table/en-sg.ts b/frontend/src/i18n/locales/features/public-form/table/en-sg.ts
@@ -0,0 +1,9 @@
+import { Table } from '.'
+
+export const enSG: Table = {
+  addAnotherRow: 'Add another row',
+  addAnotherRowAria: 'to the table.',
+  rowAria: 'The table currently has ',
+  row: '{count, plural, =1 {# row} other {# rows}}',
+  rowMax: '{currentRows} out of max {count, plural, =1 {# row} other {# rows}}',
+}
diff --git a/frontend/src/i18n/locales/features/public-form/table/index.ts b/frontend/src/i18n/locales/features/public-form/table/index.ts
@@ -0,0 +1,9 @@
+export * from './en-sg'
+
+export interface Table {
+  addAnotherRow: string
+  addAnotherRowAria: string
+  rowAria: string
+  row: string
+  rowMax: string
+}
diff --git a/frontend/src/templates/Field/ChildrenCompound/ChildrenCompoundField.tsx b/frontend/src/templates/Field/ChildrenCompound/ChildrenCompoundField.tsx
@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import {
+  Controller,
   FieldArrayWithId,
   FieldError,
   useFieldArray,
@@ -35,6 +36,7 @@ import {
 } from '~shared/types'
 import { formatMyinfoDate } from '~shared/utils/dates'
 
+import { REQUIRED_ERROR } from '~constants/validation'
 import { createChildrenValidationRules } from '~utils/fieldValidation'
 import { Button } from '~components/Button/Button'
 import { DatePicker } from '~components/DatePicker'
@@ -201,6 +203,8 @@ interface ChildrenBodyProps {
   error: FieldError[] | undefined
 }
 
+const CHILD_NAME_INDEX = 0
+
 const ChildrenBody = ({
   currChildBodyIdx,
   schema,
@@ -214,33 +218,18 @@ const ChildrenBody = ({
   formContext,
   error,
 }: ChildrenBodyProps): JSX.Element => {
-  const { register, getValues, setValue, watch } = formContext
+  const { register, getValues, setValue, watch, control } = formContext
 
   const childNamePath = useMemo(
     () => `${schema._id}.child.${currChildBodyIdx}.0`,
     [schema._id, currChildBodyIdx],
   )
 
-  const validationRules = useMemo(
+  const childrenValidationRules = useMemo(
     () => createChildrenValidationRules(schema, disableRequiredValidation),
     [schema, disableRequiredValidation],
   )
 
-  const {
-    ref: childNameRegisterRef,
-    onChange: selectOnChange,
-    onBlur: selectOnBlur,
-    ...selectRest
-  } = register(childNamePath, validationRules)
-
-  const childNameRef = useRef<HTMLInputElement | null>(null)
-
-  const childNameError = error
-    ? error.find(
-        (e) => (e?.ref as HTMLInputElement)?.id === childNameRef.current?.id,
-      )
-    : undefined
-
   const childName = watch(childNamePath) as unknown as string
 
   const allChildren = useMemo<string[]>(() => {
@@ -328,30 +317,34 @@ const ChildrenBody = ({
         <FormLabel gridArea="formlabel">Child</FormLabel>
         <Flex align="stretch" alignItems="stretch" justify="space-between">
           <Box flexGrow={10}>
-            <FormControl key={field.id} isRequired isInvalid={!!childNameError}>
-              <SingleSelect
-                isRequired
-                {...selectRest}
-                placeholder={"Select your child's name"}
-                colorScheme={`theme-${colorTheme}`}
-                items={childNameValues}
-                value={childName}
-                isDisabled={isSubmitting}
-                onChange={(name) => {
-                  // This is bad practice but we have no choice because our
-                  // custom Select doesn't forward the event.
-                  // FIXME: Fix types
-                  // @ts-expect-error type inference issue
-                  setValue(childNamePath, name, { shouldValidate: true })
-                }}
-                ref={(e) => {
-                  childNameRegisterRef(e)
-                  if (e) {
-                    childNameRef.current = e
-                  }
+            <FormControl
+              key={field.id}
+              isRequired
+              isInvalid={!!error?.[CHILD_NAME_INDEX]}
+            >
+              <Controller
+                control={control}
+                name={childNamePath}
+                rules={{
+                  required: REQUIRED_ERROR,
                 }}
+                render={({
+                  field: { value, onChange, onBlur, ref, ...rest },
+                }) => (
+                  <SingleSelect
+                    {...rest}
+                    placeholder={"Select your child's name"}
+                    colorScheme={`theme-${colorTheme}`}
+                    items={childNameValues}
+                    value={value as unknown as string}
+                    isDisabled={isSubmitting}
+                    onChange={onChange}
+                  />
+                )}
               />
-              <FormErrorMessage>{childNameError?.message}</FormErrorMessage>
+              <FormErrorMessage>
+                {error?.[CHILD_NAME_INDEX]?.message}
+              </FormErrorMessage>
             </FormControl>
           </Box>
           <IconButton
@@ -409,7 +402,7 @@ const ChildrenBody = ({
                     {MYINFO_ATTRIBUTE_MAP[subField].description}
                   </FormLabel>
                   <ChakraInput
-                    {...register(fieldPath, validationRules)}
+                    {...register(fieldPath, childrenValidationRules)}
                     value={value}
                   />
                   <FormErrorMessage>
@@ -422,7 +415,6 @@ const ChildrenBody = ({
             case MyInfoChildAttributes.ChildGender:
             case MyInfoChildAttributes.ChildRace:
             case MyInfoChildAttributes.ChildSecondaryRace: {
-              const { onBlur, ...rest } = register(fieldPath, validationRules)
               return (
                 <FormControl
                   key={key}
@@ -433,26 +425,23 @@ const ChildrenBody = ({
                   <FormLabel useMarkdownForDescription gridArea="formlabel">
                     {MYINFO_ATTRIBUTE_MAP[subField].description}
                   </FormLabel>
-                  <SingleSelect
-                    {...rest}
-                    value={value}
-                    items={
-                      MYINFO_ATTRIBUTE_MAP[subField].fieldOptions as string[]
-                    }
-                    onChange={(option) => {
-                      // prevent updates if there's no change to the values
-                      // there's an infinite loop on the update
-                      // upgrading to v8.xx, or v9.xx doesn't seem to have resolved the issue
-                      // https://github.com/downshift-js/downshift/issues/1511#issuecomment-1598307130
-
-                      setTimeout(() =>
-                        // This is bad practice but we have no choice because our
-                        // custom Select doesn't forward the event.
-                        // FIXME: Fix types
-                        // @ts-expect-error type inference issue
-                        setValue(fieldPath, option, { shouldValidate: true }),
-                      )
-                    }}
+                  <Controller
+                    control={control}
+                    name={fieldPath}
+                    rules={childrenValidationRules}
+                    render={({
+                      field: { value, onChange, onBlur, ...rest },
+                    }) => (
+                      <SingleSelect
+                        {...rest}
+                        value={value as unknown as string}
+                        items={
+                          MYINFO_ATTRIBUTE_MAP[subField]
+                            .fieldOptions as string[]
+                        }
+                        onChange={onChange}
+                      />
+                    )}
                   />
                   <FormErrorMessage>
                     {childrenSubFieldError?.message}
@@ -461,7 +450,6 @@ const ChildrenBody = ({
               )
             }
             case MyInfoChildAttributes.ChildDateOfBirth: {
-              const { onChange, ...rest } = register(fieldPath, validationRules)
               return (
                 <FormControl
                   key={key}
@@ -472,16 +460,19 @@ const ChildrenBody = ({
                   <FormLabel useMarkdownForDescription gridArea="formlabel">
                     {MYINFO_ATTRIBUTE_MAP[subField].description}
                   </FormLabel>
-                  <DatePicker
-                    {...rest}
-                    displayFormat={DATE_DISPLAY_FORMAT}
-                    inputValue={value}
-                    onInputValueChange={(date) => {
-                      // FIXME: Fix types
-                      // @ts-expect-error type inference issue
-                      setValue(fieldPath, date, { shouldValidate: true })
-                    }}
-                    colorScheme={`theme-${colorTheme}`}
+                  <Controller
+                    control={control}
+                    name={fieldPath}
+                    rules={childrenValidationRules}
+                    render={({ field: { value, onChange, ...rest } }) => (
+                      <DatePicker
+                        {...rest}
+                        displayFormat={DATE_DISPLAY_FORMAT}
+                        inputValue={value as unknown as string}
+                        onInputValueChange={onChange}
+                        colorScheme={`theme-${colorTheme}`}
+                      />
+                    )}
                   />
                   <FormErrorMessage>
                     {childrenSubFieldError?.message}

diff --git a/frontend/src/templates/Field/Table/AddRowFooter.tsx b/frontend/src/templates/Field/Table/AddRowFooter.tsx
@@ -1,7 +1,7 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { BiPlus } from 'react-icons/bi'
 import { Box, Stack, Text, VisuallyHidden } from '@chakra-ui/react'
-import simplur from 'simplur'
 
 import Button from '~components/Button'
 
@@ -18,19 +18,18 @@ export const AddRowFooter = ({
   maxRows,
   handleAddRow: handleAddRowProp,
 }: AddRowFooterProps): JSX.Element => {
+  const { t } = useTranslation()
+
   // State to decide whether to announce row changes to screen readers
   const [hasAddedRows, setHasAddedRows] = useState(false)
-  const maxRowDescription = useMemo(() => {
-    return maxRows
-      ? simplur`${currentRows} out of max ${maxRows} row[|s]`
-      : simplur`${currentRows} row[|s]`
-  }, [currentRows, maxRows])
-
-  const maxRowAriaDescription = useMemo(() => {
-    return maxRows
-      ? simplur`There [is|are] currently ${currentRows} out of max ${maxRows} row[|s].`
-      : simplur`There [is|are] currently ${currentRows} row[|s].`
-  }, [currentRows, maxRows])
+  const maxRowDescription = Number.isInteger(maxRows)
+    ? t('features.publicForm.components.table.rowMax', {
+        currentRows,
+        count: Number(maxRows),
+      })
+    : t('features.publicForm.components.table.row', {
+        count: currentRows,
+      })
 
   const handleAddRow = useCallback(() => {
     handleAddRowProp()
@@ -51,15 +50,16 @@ export const AddRowFooter = ({
         type="button"
         onClick={handleAddRow}
       >
-        Add another row
+        {t('features.publicForm.components.table.addAnotherRow')}
         <VisuallyHidden>
-          to the table field. {maxRowAriaDescription}
+          {t('features.publicForm.components.table.addAnotherRowAria')}
         </VisuallyHidden>
       </Button>
 
       <Box>
         <VisuallyHidden aria-live={hasAddedRows ? 'polite' : 'off'} aria-atomic>
-          The table field currently has {maxRowDescription}
+          {t('features.publicForm.components.table.rowAria')}{' '}
+          {maxRowDescription}
         </VisuallyHidden>
 
         <Text aria-hidden textStyle="body-2" color="secondary.400">