build: release v6.163.0

CHANGELOG.md

@@ -4,22 +4,38 @@ 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.162.0](https://github.com/opengovsg/FormSG/compare/v6.161.0...v6.162.0)
-
+#### [v6.163.0](https://github.com/opengovsg/FormSG/compare/v6.162.0...v6.163.0)
+
+- chore: update package-lock [`#7907`](https://github.com/opengovsg/FormSG/pull/7907)
+- fix(deps): bump nodemailer and @types/nodemailer [`#7891`](https://github.com/opengovsg/FormSG/pull/7891)
+- chore(deps-dev): bump lint-staged from 15.2.7 to 15.2.10 [`#7899`](https://github.com/opengovsg/FormSG/pull/7899)
+- feat: switch delete to edit button on logic page [`#7887`](https://github.com/opengovsg/FormSG/pull/7887)
+- fix: replace Question with Field Name for relevant fields in FieldBuilder [`#7901`](https://github.com/opengovsg/FormSG/pull/7901)
+- fix(mrf be val): skip validation for unchanged mrf responses [`#7894`](https://github.com/opengovsg/FormSG/pull/7894)
+- feat(mrf-approvals): improve copy for approvals [`#7902`](https://github.com/opengovsg/FormSG/pull/7902)
+- feat: unify email notification for response copy for storage and email modes   [`#7903`](https://github.com/opengovsg/FormSG/pull/7903)
+- build: merge release v6.162.0 to develop [`#7904`](https://github.com/opengovsg/FormSG/pull/7904)
+- build: release v6.162.0 [`#7897`](https://github.com/opengovsg/FormSG/pull/7897)
 - fix(deps): bump express-rate-limit from 7.4.0 to 7.4.1 [`#7892`](https://github.com/opengovsg/FormSG/pull/7892)
 - chore: remove jest-axios-mock, jest-localstorage-mock [`#7893`](https://github.com/opengovsg/FormSG/pull/7893)
 - fix(mail): failure to render mail [`#7890`](https://github.com/opengovsg/FormSG/pull/7890)
 - fix: replace trash icon in MRF steps [`#7885`](https://github.com/opengovsg/FormSG/pull/7885)
+- chore: bump version to v6.162.0 [`c1b4ecf`](https://github.com/opengovsg/FormSG/commit/c1b4ecf2c9840c5be8af44e791145bb43b1447d0)
+- update trash icon to pencil icon, remove delete functionality in InactiveStepBlock [`ae4db1d`](https://github.com/opengovsg/FormSG/commit/ae4db1d772781b6733deba75eae8442bcd4e33df)
+- removed edit function on entire step box [`7394d00`](https://github.com/opengovsg/FormSG/commit/7394d007a3fa8a92bbf8f2e04f584b57351a35ab)
+
+#### [v6.162.0](https://github.com/opengovsg/FormSG/compare/v6.161.0...v6.162.0)
+
+> 14 November 2024
+
 - chore: update react-email deps [`#7840`](https://github.com/opengovsg/FormSG/pull/7840)
 - build: merge release v6.161 to develop [`#7886`](https://github.com/opengovsg/FormSG/pull/7886)
 - feat(twilio): remove twilio from fe [`#7869`](https://github.com/opengovsg/FormSG/pull/7869)
 - chore(deps): bump webpack from 5.91.0 to 5.96.1 in /react-email-preview [`#7835`](https://github.com/opengovsg/FormSG/pull/7835)
 - feat: upgrade to use v4 of artifacts action [`#7881`](https://github.com/opengovsg/FormSG/pull/7881)
 - feat: remove openssl flag on deployment and build [`#7882`](https://github.com/opengovsg/FormSG/pull/7882)
 - build: release v6.161.0 [`#7884`](https://github.com/opengovsg/FormSG/pull/7884)
-- update trash icon to pencil icon, remove delete functionality in InactiveStepBlock [`ae4db1d`](https://github.com/opengovsg/FormSG/commit/ae4db1d772781b6733deba75eae8442bcd4e33df)
-- removed edit function on entire step box [`7394d00`](https://github.com/opengovsg/FormSG/commit/7394d007a3fa8a92bbf8f2e04f584b57351a35ab)
-- trying to solve formatting issues [`85d66c6`](https://github.com/opengovsg/FormSG/commit/85d66c6d4a7f2f5970821561a5d923350ffa13a1)
+- chore: bump version to v6.162.0 [`a045ec5`](https://github.com/opengovsg/FormSG/commit/a045ec5883b4178b5b87416a7898fced9beb895b)
 
 #### [v6.161.0](https://github.com/opengovsg/FormSG/compare/v6.160.0...v6.161.0)
 

__tests__/e2e/helpers/createForm.ts

@@ -374,7 +374,7 @@ const addAdminEmails = async (
   ).toBeVisible()
 
   if (formSettings.emails) {
-    const emailInput = page.getByLabel('Send an email copy of new responses')
+    const emailInput = page.getByLabel('Notifications for new responses')
     await emailInput.focus()
 
     // Clear the current admin email
@@ -452,7 +452,7 @@ const addBasicField = async (
     }
     // Images and Statements don't have titles
   } else {
-    await page.getByLabel('Question').fill(field.title)
+    await page.getByLabel('Field Name').fill(field.title)
   }
 
   // Toggle required for input fields except Table field (required toggled for individual columns)

frontend/package.json

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

frontend/src/components/FormControl/FormLabel/FormLabel.tsx

@@ -92,7 +92,7 @@ export const FormLabel = ({
           <Tooltip
             placement={tooltipPlacement}
             label={tooltipText}
-            aria-label="Label tooltip"
+            aria-label={`Tooltip content: ${tooltipText}`}
           >
             <Icon
               ml="0.5rem"

frontend/src/components/Toggle/Toggle.tsx

@@ -4,11 +4,17 @@ import {
   CSSObject,
   Flex,
   forwardRef,
+  Icon,
+  Tooltip,
+  TooltipProps,
   useMultiStyleConfig,
 } from '@chakra-ui/react'
 
 import { TOGGLE_THEME_KEY } from '~/theme/components/Toggle'
 
+import { BxsHelpCircle } from '~assets/icons/BxsHelpCircle'
+import { BxsInfoCircle } from '~assets/icons/BxsInfoCircle'
+
 import FormLabel from '../FormControl/FormLabel'
 
 import { Switch, SwitchProps } from './Switch'
@@ -22,6 +28,18 @@ export interface ToggleProps extends Omit<SwitchProps, 'children'> {
    * Secondary description text
    */
   description?: string
+  /**
+   * Tooltip text to be postfixed at the end of each label, if any.
+   */
+  tooltipText?: string
+  /**
+   * Tooltip placement for the tooltip text, if any.
+   */
+  tooltipPlacement?: TooltipProps['placement']
+  /**
+   * Determines Tooltip icon used for the tooltip text. Defaults to help.
+   */
+  tooltipVariant?: 'info' | 'help'
   /**
    * Overriding styles for the container which wraps the text
    * as well as the switch
@@ -49,6 +67,9 @@ export const Toggle = forwardRef<ToggleProps, 'input'>(
       containerStyles,
       labelStyles,
       descriptionStyles,
+      tooltipText,
+      tooltipPlacement,
+      tooltipVariant,
       ...props
     },
     ref,
@@ -58,9 +79,28 @@ export const Toggle = forwardRef<ToggleProps, 'input'>(
       <Flex __css={{ ...styles.overallContainer, ...containerStyles }}>
         {(label || description) && (
           <Box __css={styles.textContainer}>
-            <FormLabel.Label sx={{ ...styles.label, ...labelStyles }}>
-              {label}
-            </FormLabel.Label>
+            <Flex alignItems="center">
+              <FormLabel.Label sx={{ ...styles.label, ...labelStyles }}>
+                {label}
+              </FormLabel.Label>
+              {tooltipText && (
+                <Tooltip
+                  placement={tooltipPlacement}
+                  label={tooltipText}
+                  aria-label={`Tooltip content: ${tooltipText}`}
+                >
+                  <Icon
+                    ml="0.5rem"
+                    mt="0.1rem"
+                    color="secondary.500"
+                    as={
+                      tooltipVariant === 'info' ? BxsInfoCircle : BxsHelpCircle
+                    }
+                    verticalAlign="middle"
+                  />
+                </Tooltip>
+              )}
+            </Flex>
             {description && (
               <FormLabel.Description
                 useMarkdown

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditAttachment/EditAttachment.tsx

@@ -154,7 +154,7 @@ export const EditAttachment = ({ field }: EditAttachmentProps): JSX.Element => {
   return (
     <CreatePageDrawerContentContainer>
       <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
-        <FormLabel>Question</FormLabel>
+        <FormLabel>Field Name</FormLabel>
         <Input autoFocus {...register('title', requiredValidationRule)} />
         <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
       </FormControl>

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditCheckbox/EditCheckbox.tsx

@@ -213,7 +213,7 @@ export const EditCheckbox = ({ field }: EditCheckboxProps): JSX.Element => {
   return (
     <CreatePageDrawerContentContainer>
       <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
-        <FormLabel>Question</FormLabel>
+        <FormLabel>Field Name</FormLabel>
         <Input autoFocus {...register('title', requiredValidationRule)} />
         <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
       </FormControl>

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditCountryRegion/EditCountryRegion.tsx

@@ -69,7 +69,7 @@ export const EditCountryRegion = ({
   return (
     <CreatePageDrawerContentContainer>
       <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
-        <FormLabel>Question</FormLabel>
+        <FormLabel>Field Name</FormLabel>
         <Input autoFocus {...register('title', requiredValidationRule)} />
         <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
       </FormControl>

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditDate/EditDate.tsx

@@ -261,7 +261,7 @@ export const EditDate = ({ field }: EditDateProps): JSX.Element => {
   return (
     <CreatePageDrawerContentContainer>
       <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
-        <FormLabel>Question</FormLabel>
+        <FormLabel>Field Name</FormLabel>
         <Input autoFocus {...register('title', requiredValidationRule)} />
         <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
       </FormControl>

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditDecimal/EditDecimal.tsx

@@ -98,7 +98,7 @@ export const EditDecimal = ({ field }: EditDecimalProps): JSX.Element => {
   return (
     <CreatePageDrawerContentContainer>
       <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
-        <FormLabel>Question</FormLabel>
+        <FormLabel>Field Name</FormLabel>
         <Input autoFocus {...register('title', requiredValidationRule)} />
         <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
       </FormControl>

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditDropdown/EditDropdown.tsx

@@ -75,7 +75,7 @@ export const EditDropdown = ({ field }: EditDropdownProps): JSX.Element => {
   return (
     <CreatePageDrawerContentContainer>
       <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
-        <FormLabel>Question</FormLabel>
+        <FormLabel>Field Name</FormLabel>
         <Input autoFocus {...register('title', requiredValidationRule)} />
         <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
       </FormControl>

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditEmail/EditEmail.tsx

@@ -155,7 +155,7 @@ export const EditEmail = ({ field }: EditEmailProps): JSX.Element => {
   return (
     <CreatePageDrawerContentContainer>
       <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
-        <FormLabel>Question</FormLabel>
+        <FormLabel>Field Name</FormLabel>
         <Input autoFocus {...register('title', requiredValidationRule)} />
         <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
       </FormControl>

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditHomeno/EditHomeno.tsx

@@ -54,7 +54,7 @@ export const EditHomeno = ({ field }: EditHomenoProps): JSX.Element => {
   return (
     <CreatePageDrawerContentContainer>
       <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
-        <FormLabel>Question</FormLabel>
+        <FormLabel>Field Name</FormLabel>
         <Input autoFocus {...register('title', requiredValidationRule)} />
         <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
       </FormControl>

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditLongText/EditLongText.tsx

@@ -130,7 +130,7 @@ export const EditLongText = ({ field }: EditLongTextProps): JSX.Element => {
   return (
     <CreatePageDrawerContentContainer>
       <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
-        <FormLabel>Question</FormLabel>
+        <FormLabel>Field Name</FormLabel>
         <Input autoFocus {...register('title', requiredValidationRule)} />
         <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
       </FormControl>

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/EditMobile.tsx

@@ -60,7 +60,7 @@ export const EditMobile = ({ field }: EditMobileProps): JSX.Element => {
           isReadOnly={isLoading}
           isInvalid={!!errors.title}
         >
-          <FormLabel>Question</FormLabel>
+          <FormLabel>Field Name</FormLabel>
           <Input autoFocus {...register('title', requiredValidationRule)} />
           <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
         </FormControl>

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditNric.tsx

@@ -47,7 +47,7 @@ export const EditNric = ({ field }: EditNricProps): JSX.Element => {
   return (
     <CreatePageDrawerContentContainer>
       <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
-        <FormLabel>Question</FormLabel>
+        <FormLabel>Field Name</FormLabel>
         <Input autoFocus {...register('title', requiredValidationRule)} />
         <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
       </FormControl>

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditRating/EditRating.tsx

@@ -65,7 +65,7 @@ export const EditRating = ({ field }: EditRatingProps): JSX.Element => {
   return (
     <CreatePageDrawerContentContainer>
       <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
-        <FormLabel>Question</FormLabel>
+        <FormLabel>Field Name</FormLabel>
         <Input autoFocus {...register('title', requiredValidationRule)} />
         <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
       </FormControl>

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditShortText/EditShortText.tsx

@@ -175,7 +175,7 @@ export const EditShortText = ({ field }: EditShortTextProps): JSX.Element => {
   return (
     <CreatePageDrawerContentContainer>
       <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
-        <FormLabel>Question</FormLabel>
+        <FormLabel>Field Name</FormLabel>
         <Input autoFocus {...register('title', requiredValidationRule)} />
         <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
       </FormControl>

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditUen.tsx

@@ -47,7 +47,7 @@ export const EditUen = ({ field }: EditUenProps): JSX.Element => {
   return (
     <CreatePageDrawerContentContainer>
       <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
-        <FormLabel>Question</FormLabel>
+        <FormLabel>Field Name</FormLabel>
         <Input autoFocus {...register('title', requiredValidationRule)} />
         <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
       </FormControl>

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditYesNo.tsx

@@ -50,7 +50,7 @@ export const EditYesNo = ({ field }: EditYesNoProps): JSX.Element => {
   return (
     <CreatePageDrawerContentContainer>
       <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
-        <FormLabel>Question</FormLabel>
+        <FormLabel>Field Name</FormLabel>
         <Input autoFocus {...register('title', requiredValidationRule)} />
         <FormErrorMessage>{errors?.title?.message}</FormErrorMessage>
       </FormControl>

frontend/src/features/admin-form/create/logic/components/LogicContent/InactiveLogicBlock/InactiveLogicBlock.tsx

@@ -1,13 +1,6 @@
 import { useCallback, useMemo } from 'react'
-import { BiTrash } from 'react-icons/bi'
-import {
-  Box,
-  chakra,
-  Divider,
-  Stack,
-  StackDivider,
-  Text,
-} from '@chakra-ui/react'
+import { BiPencil } from 'react-icons/bi'
+import { Box, Divider, Stack, StackDivider, Text } from '@chakra-ui/react'
 
 import { LogicDto, LogicType } from '~shared/types/form'
 
@@ -26,12 +19,10 @@ import { LogicConditionValues } from './LogicConditionValues'
 
 interface InactiveLogicBlockProps {
   logic: LogicDto
-  handleOpenDeleteModal: () => void
 }
 
 export const InactiveLogicBlock = ({
   logic,
-  handleOpenDeleteModal,
 }: InactiveLogicBlockProps): JSX.Element | null => {
   const { idToFieldMap } = useAdminFormLogic()
   const setToEditing = useAdminLogicStore(setToEditingSelector)
@@ -98,29 +89,15 @@ export const InactiveLogicBlock = ({
 
   return (
     <Box pos="relative">
-      <chakra.button
-        type="button"
+      <Box
         w="100%"
         textAlign="start"
         borderRadius="4px"
         bg="white"
         border="1px solid"
         borderColor="neutral.300"
-        transitionProperty="common"
-        transitionDuration="normal"
         cursor={isPreventEdit ? 'not-allowed' : 'pointer'}
-        disabled={isPreventEdit}
         aria-disabled={isPreventEdit}
-        _hover={{
-          _disabled: {
-            bg: 'white',
-          },
-          bg: 'primary.100',
-        }}
-        _focus={{
-          boxShadow: `0 0 0 4px var(--chakra-colors-primary-300)`,
-        }}
-        onClick={handleClick}
       >
         <Stack
           spacing="1.5rem"
@@ -161,16 +138,17 @@ export const InactiveLogicBlock = ({
         >
           {renderThenContent}
         </Stack>
-      </chakra.button>
+      </Box>
       <IconButton
         top={{ base: '0.5rem', md: '2rem' }}
         right={{ base: '0.5rem', md: '2rem' }}
         pos="absolute"
         aria-label="Delete logic"
         variant="clear"
-        colorScheme="danger"
-        onClick={handleOpenDeleteModal}
-        icon={<BiTrash fontSize="1.5rem" />}
+        onClick={handleClick}
+        icon={<BiPencil fontSize="1.5rem" />}
+        cursor={isPreventEdit ? 'not-allowed' : 'pointer'}
+        aria-disabled={isPreventEdit}
       />
     </Box>
   )