build: release v6.152.0

CHANGELOG.md

@@ -4,10 +4,29 @@ 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.152.0](https://github.com/opengovsg/FormSG/compare/v6.151.2...v6.152.0)
+
+- build: release v6.152.0 to develop [`#7774`](https://github.com/opengovsg/FormSG/pull/7774)
+- build: merge release v6.151.2 to develop [`#7770`](https://github.com/opengovsg/FormSG/pull/7770)
+- chore: add paperless form banner [`#7767`](https://github.com/opengovsg/FormSG/pull/7767)
+- fix(workflow): step 2 email subtitle [`#7766`](https://github.com/opengovsg/FormSG/pull/7766)
+- chore: update port number for vite fe in docker compose yml [`#7772`](https://github.com/opengovsg/FormSG/pull/7772)
+- chore(deps-dev): bump dompurify from 2.3.9 to 2.5.7 [`#7768`](https://github.com/opengovsg/FormSG/pull/7768)
+- fix(deps): bump send and express [`#7769`](https://github.com/opengovsg/FormSG/pull/7769)
+- fix(deps): bump jsdom from 24.1.0 to 25.0.1 [`#7730`](https://github.com/opengovsg/FormSG/pull/7730)
+- fix: theme selector radio button UI [`#7765`](https://github.com/opengovsg/FormSG/pull/7765)
+- chore(deps): update date-fns, date-fns-tz [`#7546`](https://github.com/opengovsg/FormSG/pull/7546)
+- build: release v6.151.2 [`#7764`](https://github.com/opengovsg/FormSG/pull/7764)
+- fix(react): remove strict mode, temporarily [`#7755`](https://github.com/opengovsg/FormSG/pull/7755)
+- chore(deps): bump rollup from 4.21.3 to 4.24.0 in /frontend [`#7749`](https://github.com/opengovsg/FormSG/pull/7749)
+
 #### [v6.151.2](https://github.com/opengovsg/FormSG/compare/v6.151.1...v6.151.2)
 
+> 9 October 2024
+
 - fix(DateRangePicker): react migration date range gap [`#7763`](https://github.com/opengovsg/FormSG/pull/7763)
 - build: release v6.151.1 [`#7762`](https://github.com/opengovsg/FormSG/pull/7762)
+- chore: bump version to 6.151.2 [`24825ae`](https://github.com/opengovsg/FormSG/commit/24825aeb677af2d3f61e5b2e68cf765576369fe6)
 
 #### [v6.151.1](https://github.com/opengovsg/FormSG/compare/v6.151.0...v6.151.1)
 

docker-compose.yml

@@ -20,7 +20,7 @@ services:
       - DB_HOST=mongodb://database:27017/formsg?directConnection=true
       - APP_NAME=FormSG
       - APP_URL=http://localhost:5001
-      - FE_APP_URL=http://localhost:3000
+      - FE_APP_URL=http://localhost:5173
       - ATTACHMENT_S3_BUCKET=local-attachment-bucket
       - PAYMENT_PROOF_S3_BUCKET=local-payment-proof-bucket
       - IMAGE_S3_BUCKET=local-image-bucket
@@ -169,7 +169,7 @@ services:
     environment:
       - SERVICES=s3,sqs,secretsmanager
       - DNS_ADDRESS=0
-      - EXTRA_CORS_ALLOWED_ORIGINS=http://localhost:3000
+      - EXTRA_CORS_ALLOWED_ORIGINS=http://localhost:5173
     volumes:
       - ./.localstack/volume:/var/lib/localstack
       - /var/run/docker.sock:/var/run/docker.sock

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-frontend",
-  "version": "6.151.2",
+  "version": "6.152.0",
   "homepage": ".",
   "type": "module",
   "private": true,
@@ -26,8 +26,8 @@
     "country-flag-icons": "^1.4.19",
     "csv-string": "^4.1.0",
     "cuid": "^2.1.8",
-    "date-fns": "^2.27.0",
-    "date-fns-tz": "^1.3.4",
+    "date-fns": "^3.6.0",
+    "date-fns-tz": "^3.1.3",
     "dayjs": "^1.10.7",
     "dayzed": "^3.2.2",
     "dedent": "^0.7.0",

frontend/src/components/DatePicker/types.ts

@@ -1,4 +1,5 @@
 import { InputProps } from '@chakra-ui/react'
+import { Locale } from 'date-fns'
 
 export interface DatePickerBaseProps
   extends Omit<

frontend/src/features/admin-form/common/components/AdminFormNavbar/AdminFormNavbar.tsx

@@ -26,7 +26,7 @@ import {
   useBreakpointValue,
   useDisclosure,
 } from '@chakra-ui/react'
-import format from 'date-fns/format'
+import { format } from 'date-fns'
 
 import { SeenFlags } from '~shared/types'
 import { AdminFormDto, FormResponseMode } from '~shared/types/form/form'

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/DesignDrawer/DesignDrawer.stories.tsx

@@ -0,0 +1,63 @@
+import { Meta, StoryFn } from '@storybook/react'
+
+import { FormColorTheme, FormLogoState, FormStartPage } from '~shared/types'
+
+import { createFormBuilderMocks } from '~/mocks/msw/handlers/admin-form'
+
+import { EditFieldDrawerDecorator, StoryRouter } from '~utils/storybook'
+
+import { CreatePageSidebarProvider } from '~features/admin-form/create/common'
+
+import { DesignDrawer } from './DesignDrawer'
+
+const DEFAULT_START_PAGE: FormStartPage = {
+  logo: { state: FormLogoState.None },
+  colorTheme: FormColorTheme.Blue,
+  estTimeTaken: 15,
+  paragraph:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+}
+
+export default {
+  title: 'Features/AdminForm/DesignDrawer',
+  component: DesignDrawer,
+  decorators: [
+    StoryRouter({
+      initialEntries: ['/61540ece3d4a6e50ac0cc6ff'],
+      path: '/:formId',
+    }),
+    EditFieldDrawerDecorator,
+  ],
+  parameters: {
+    // Required so skeleton "animation" does not hide content.
+    chromatic: { pauseAnimationAtEnd: true },
+    msw: [...createFormBuilderMocks({}, 0)],
+  },
+  args: {
+    startPage: DEFAULT_START_PAGE,
+  },
+} as Meta<StoryArgs>
+
+interface StoryArgs {
+  startPage: FormStartPage
+}
+
+const Template: StoryFn<StoryArgs> = (args) => {
+  return (
+    <CreatePageSidebarProvider>
+      <DesignDrawer {...args} />
+    </CreatePageSidebarProvider>
+  )
+}
+
+export const Default = Template.bind({})
+
+export const WithEmptyParagraph = Template.bind({})
+WithEmptyParagraph.args = {
+  startPage: { ...DEFAULT_START_PAGE, paragraph: undefined },
+}
+
+export const WithEmptyTimeTaken = Template.bind({})
+WithEmptyTimeTaken.args = {
+  startPage: { ...DEFAULT_START_PAGE, estTimeTaken: undefined },
+}

frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignDrawer/DesignDrawer/DesignDrawer.tsx

@@ -305,20 +305,19 @@ export const DesignInput = (): JSX.Element | null => {
               value={color}
               {...register('colorTheme')}
               // CSS for inverted radio button
-              // TODO: anti-aliasing at interface of border and ::before?
               border="2px solid"
               borderRadius="50%"
               borderColor="white"
-              background={getTitleBg(color)}
               _checked={{ borderColor: getTitleBg(color) }}
               _before={{
                 content: '""',
                 display: 'inline-block',
-                width: '20px',
-                height: '20px',
+                width: '16px',
+                height: '16px',
                 border: '2px solid',
                 borderColor: 'white',
                 borderRadius: '50%',
+                background: getTitleBg(color),
               }}
             />
           ))}

frontend/src/features/admin-form/create/workflow/components/WorkflowContent/EditStepBlock/EditStepBlock.stories.tsx

@@ -129,6 +129,61 @@ export const Step2Empty = {
   },
 }
 
+export const Step2FixedEmailDefault = {
+  // due to the double registration of 'workflow_type' there would be a weird interaction
+  // where the default value will be reset
+  // thus we have to manually select the field again
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement)
+    await waitFor(
+      async () =>
+        expect(await canvas.getByText('Save step')).not.toBeDisabled(),
+      {
+        timeout: 5000,
+      },
+    )
+    await waitFor(
+      async () => {
+        await userEvent.click(await canvas.getByText('Fixed email(s)'))
+      },
+      {
+        timeout: 5000,
+      },
+    )
+  },
+  args: {
+    stepNumber: 1,
+    defaultValues: {
+      workflow_type: WorkflowType.Static,
+      emails: ['me@open.gov.sg', 'invalidemail'],
+    },
+  },
+}
+export const Step2FixedEmailEmpty = {
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement)
+    await waitFor(
+      async () =>
+        expect(await canvas.getByText('Save step')).not.toBeDisabled(),
+      {
+        timeout: 5000,
+      },
+    )
+    await waitFor(
+      async () => {
+        await userEvent.click(await canvas.getByText('Fixed email(s)'))
+      },
+      {
+        timeout: 5000,
+      },
+    )
+  },
+
+  args: {
+    stepNumber: 1,
+  },
+}
+
 export const DeletedApprovalFieldSelected = {
   args: {
     stepNumber: 1,

frontend/src/features/admin-form/create/workflow/components/WorkflowContent/EditStepBlock/RespondentBlock.tsx

@@ -99,7 +99,7 @@ const StaticRespondentOption = ({
             />
             <FormErrorMessage>{staticTagInputErrorMessage}</FormErrorMessage>
             {!staticTagInputErrorMessage ? (
-              <Text textStyle="body-2" mt="0.5rem">
+              <Text textStyle="body-2" color="secondary.400" mt="0.5rem">
                 Separate multiple emails with a comma
               </Text>
             ) : null}

frontend/src/features/admin-form/responses/ResponsesPage/storage/utils/EncryptedResponseCsvGenerator/EncryptedResponseCsvGenerator.ts

@@ -1,5 +1,5 @@
 import { compareAsc, isValid, parseISO } from 'date-fns'
-import { formatInTimeZone, zonedTimeToUtc } from 'date-fns-tz'
+import { formatInTimeZone, fromZonedTime } from 'date-fns-tz'
 import type { Dictionary } from 'lodash'
 import { keyBy } from 'lodash'
 import type { Merge } from 'type-fest'
@@ -179,8 +179,8 @@ export class EncryptedResponseCsvGenerator extends CsvGenerator {
    */
   private _dateComparator(firstDate: string, secondDate: string): number {
     // cast to Asia/Singapore to ensure both dates are of the same timezone
-    const first = zonedTimeToUtc(firstDate, 'Asia/Singapore')
-    const second = zonedTimeToUtc(secondDate, 'Asia/Singapore')
+    const first = fromZonedTime(firstDate, 'Asia/Singapore')
+    const second = fromZonedTime(secondDate, 'Asia/Singapore')
     return compareAsc(first, second)
   }
 }

frontend/src/features/workspace/WorkspacePage.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryFn } from '@storybook/react'
 import { times } from 'lodash'
 import { rest } from 'msw'
 
+import { UserId } from '~shared/types'
 import {
   AdminDashboardFormMetaDto,
   FormResponseMode,
@@ -163,8 +164,38 @@ AllOpenDesktop.parameters = {
     ...BASE_MSW_HANDLERS,
   ],
 }
+
+export const AllOpenDesktopNoAnnouncementModal = Template.bind({})
+AllOpenDesktopNoAnnouncementModal.parameters = {
+  ...AllOpenDesktop.parameters,
+  msw: [
+    ...envHandlers,
+    rest.get<AdminDashboardFormMetaDto[]>(
+      '/api/v3/admin/forms',
+      (req, res, ctx) => {
+        return res(ctx.json(THIRTY_FORMS))
+      },
+    ),
+    getWorkspaces(),
+    getUser({
+      delay: 0,
+      mockUser: {
+        ...MOCK_USER,
+        _id: 'undefined' as UserId,
+        email: 'meh@example.com',
+      },
+    }),
+  ],
+}
+
 export const AllOpenMobile = Template.bind({})
 AllOpenMobile.parameters = {
   ...Mobile.parameters,
   ...AllOpenDesktop.parameters,
 }
+
+export const AllOpenMobileNoAnnouncementModal = Template.bind({})
+AllOpenMobileNoAnnouncementModal.parameters = {
+  ...Mobile.parameters,
+  ...AllOpenDesktopNoAnnouncementModal.parameters,
+}

frontend/src/features/workspace/WorkspacePage.tsx

@@ -10,16 +10,20 @@ import {
   Grid,
   GridItem,
   Stack,
+  Text,
   useDisclosure,
 } from '@chakra-ui/react'
 
+import { PAPERLESS_FORMSG_RESEARCH_LINK } from '~shared/constants'
 import { Workspace } from '~shared/types/workspace'
 
 import { AdminNavBar } from '~/app/AdminNavBar/AdminNavBar'
 
 import { useIsMobile } from '~hooks/useIsMobile'
 import { getBannerProps } from '~utils/getBannerProps'
 import { Banner } from '~components/Banner'
+import InlineMessage from '~components/InlineMessage'
+import Link from '~components/Link'
 
 import { useEnv } from '~features/env/queries'
 import { useUser } from '~features/user/queries'
@@ -151,6 +155,18 @@ export const WorkspacePage = (): JSX.Element => {
             defaultWorkspace={DEFAULT_WORKSPACE}
             setCurrentWorkspace={setCurrWorkspaceId}
           >
+            <InlineMessage>
+              <Text>
+                Do you still have paper forms in your agency?{' '}
+                <Link
+                  display="inline"
+                  href={PAPERLESS_FORMSG_RESEARCH_LINK}
+                  target="_blank"
+                >
+                  Tell us more so that we can help you digitalise them.
+                </Link>
+              </Text>
+            </InlineMessage>
             <WorkspaceContent />
           </WorkspaceProvider>
         </GridItem>

frontend/src/index.tsx

@@ -30,8 +30,15 @@ window.gtag = gtag
 // Init dayjs
 dayjs.init()
 
-createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+/**
+ * TODO(FRM-1855): Disable strict mode for validation to work properly
+ * This is not meant to be a permenant solution as the need to disable this
+ * reveals that there could be an existing issue with useEffect cleanup that is prevent
+ * pre-react 18.
+ */
+// createRoot(document.getElementById('root')!).render(
+//   <React.StrictMode>
+//     <App />,
+//   </React.StrictMode>,
+// )
+createRoot(document.getElementById('root')!).render(<App />)