Merge pull request #7117 from opengovsg/release_v6.111.0

build: release v6.111.0
opengovsg · Mar 4, 2024 · d37282c · d37282c
2 parents df70ae1 + d71e1bf
commit d37282c
Show file tree

Hide file tree

Showing 21 changed files with 169 additions and 35 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": ["javascript", "typescript"],
   "editor.formatOnSave": true,
@@ -12,7 +12,7 @@
   },
   "[html]": {
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": false
+      "source.fixAll.eslint": "never"
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,8 +4,22 @@ 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.111.0](https://github.com/opengovsg/FormSG/compare/v6.110.0...v6.111.0)
+
+- feat(fe): update copy, copy btn [`#7116`](https://github.com/opengovsg/FormSG/pull/7116)
+- feat(virus-scanner): allow endpoint to be specified [`#7114`](https://github.com/opengovsg/FormSG/pull/7114)
+- chore: remove Anguilla from country listing [`#7108`](https://github.com/opengovsg/FormSG/pull/7108)
+- chore(vscode): update code actions value options [`#7113`](https://github.com/opengovsg/FormSG/pull/7113)
+- feat(mrf): disable unsupported features [`#7106`](https://github.com/opengovsg/FormSG/pull/7106)
+- fix: correct alignment issues in preview mode [`#7109`](https://github.com/opengovsg/FormSG/pull/7109)
+- chore(OSS): add FerretDB migration instructions [`#7107`](https://github.com/opengovsg/FormSG/pull/7107)
+- build: merge v6.110.0 back into develop [`#7105`](https://github.com/opengovsg/FormSG/pull/7105)
+- build: release v6.110.0 [`#7104`](https://github.com/opengovsg/FormSG/pull/7104)
+
 #### [v6.110.0](https://github.com/opengovsg/FormSG/compare/v6.109.0...v6.110.0)
 
+> 21 February 2024
+
 - feat(mrf): retain workflow through a submission lifetime [`#7087`](https://github.com/opengovsg/FormSG/pull/7087)
 - feat(config): allow R2 bucket URLs [`#7097`](https://github.com/opengovsg/FormSG/pull/7097)
 - chore(deps): update ip package [`#7098`](https://github.com/opengovsg/FormSG/pull/7098)
@@ -22,6 +36,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - build: merge release v6.109.0 into develop  [`#7085`](https://github.com/opengovsg/FormSG/pull/7085)
 - chore(dev): update README with clearer virus-scanner install instructions [`#7083`](https://github.com/opengovsg/FormSG/pull/7083)
 - build: release v6.109.0 [`#7081`](https://github.com/opengovsg/FormSG/pull/7081)
+- chore: bump version to v6.110.0 [`102cef3`](https://github.com/opengovsg/FormSG/commit/102cef33d7ae37e95c1b9f93f51712156cef1384)
 
 #### [v6.109.0](https://github.com/opengovsg/FormSG/compare/v6.108.0...v6.109.0)
 

diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@
 ## Table of Contents
 
 - [Contributing](#contributing)
-  - [IMPORTANT NOTE TO ALL CONTRIBUTORS](#important-note-to-all-contributors)
+    - [IMPORTANT NOTE TO ALL CONTRIBUTORS](#important-note-to-all-contributors)
 - [Features](#features)
 - [Local Development (Docker)](#local-development-docker)
   - [Prerequisites](#prerequisites)
@@ -31,6 +31,7 @@
 - [MongoDB Scripts](#mongodb-scripts)
 - [Support](#support)
 - [Database Alternatives](#database-alternatives)
+  - [Migrating from MongoDB to FerretDB](#migrating-from-mongodb-to-ferretdb)
   - [Migrating from Mongoose ODM to Prisma ORM](#migrating-from-mongoose-odm-to-prisma-orm)
     - [Replacing MongoDB with CockroachDB](#replacing-mongodb-with-cockroachdb)
     - [Other Prisma supported DBs](#other-prisma-supported-dbs)
@@ -225,6 +226,51 @@ Please contact FormSG ([email protected]) for any details.
 
 ## Database Alternatives
 
+### Migrating from MongoDB to FerretDB
+[FerretDB](https://ferretdb.io) is an open source MongoDB alternative built on PostgreSQL. MongoDB can be swapped out of FormSG for FerretDB. In order for this to be done, certain changes to the code should be made as described below:
+
+- Add postgres to the list of services in the `docker.compose` file e.g. 
+  ```  pg:
+    image: postgres:15.3-alpine3.18
+    environment:
+      - POSTGRES_USER=<pguser>
+      - POSTGRES_PASSWORD=<pgpassword>
+      - POSTGRES_DB=<pgdbname>
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    ports:
+      - '5432:5432'
+- In the same file, change the "database" image from MongoDB to FerretDB and update the database section to include the lines below:
+    ``` 
+     image: ghcr.io/ferretdb/ferretdb:1.17.0
+     environment:
+       - FERRETDB_TELEMETRY=disable
+       - FERRETDB_POSTGRESQL_URL=postgres://pg:5432/formsg?user=<pguser>&password=<pgpassword>
+     ports:
+       - '8080:8080'
+     depends_on:
+       - pg
+- Lastly, add the *pgdata* volume
+    ``` 
+        volumes:
+            mongodb_data:
+                driver: local
+            pgdata:
+- FerretDB currently has some limitations and [certain database features are not supported](https://docs.ferretdb.io/reference/supported-commands/), these include TTL, database transactions and some aggregration pipelines which are all features used by FormSG. 
+
+    The following changes can be made to mitigate the limitations of FerretDB:
+    
+    - Add the *autoRemove: 'interval'* property to the initializing of the session object in the `session.ts` file.
+    - Remove the unsupported [aggregration pipeline stages](https://docs.ferretdb.io/reference/supported-commands/#aggregation-pipeline-stages) e.g. *lookup* and *project*, in the `submission.server.model.ts` file.
+    - Replace the *findOneAndUpdate* code block in the `user.server.model.ts` file with code similar to the one below:
+        ```  
+         const user = await this.exists({ email: upsertParams.email })
+         if (!user) {
+          await this.create(upsertParams)
+        }
+        return this.findOne({
+          email: upsertParams.email,
+        }).populate({...
 ### Migrating from Mongoose ODM to Prisma ORM
 
 FormSG uses Mongoose as the Object-Document Mapping (ODM) to MongoDB. This means that our code is strongly coupled with MongoDB as Mongoose solely supports it.

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.110.0",
+  "version": "6.111.0",
   "homepage": ".",
   "private": true,
   "dependencies": {

diff --git a/frontend/src/features/admin-form/common/components/PreviewFormBanner/PreviewFormBanner.tsx b/frontend/src/features/admin-form/common/components/PreviewFormBanner/PreviewFormBanner.tsx
@@ -47,7 +47,7 @@ interface PreviewFormBannerProps {
 const textProps: TextProps = {
   textStyle: 'body-2',
   color: 'white',
-  ml: '2rem',
+  mx: '2rem',
   mt: '0.5rem',
   mb: '0.5rem',
 }

diff --git a/...-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditEmail/EditEmail.tsx b/...-and-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditEmail/EditEmail.tsx
@@ -139,6 +139,18 @@ export const EditEmail = ({ field }: EditEmailProps): JSX.Element => {
     }
   }, [isPdfResponseEnabled])
 
+  // vfn is not supported on MRF
+  const isToggleVfnDisabled = useMemo(
+    () => form?.responseMode === FormResponseMode.Multirespondent,
+    [form],
+  )
+
+  // email confirmation is not supported on MRF
+  const isToggleEmailConfirmationDisabled = useMemo(
+    () => form?.responseMode === FormResponseMode.Multirespondent,
+    [form],
+  )
+
   return (
     <CreatePageDrawerContentContainer>
       <FormControl isRequired isReadOnly={isLoading} isInvalid={!!errors.title}>
@@ -158,7 +170,7 @@ export const EditEmail = ({ field }: EditEmailProps): JSX.Element => {
       <FormControl isReadOnly={isLoading}>
         <Toggle {...register('required')} label="Required" />
       </FormControl>
-      <FormControl isReadOnly={isLoading}>
+      <FormControl isReadOnly={isLoading} isDisabled={isToggleVfnDisabled}>
         <Toggle
           {...register('isVerifiable')}
           label="OTP verification"
@@ -193,7 +205,10 @@ export const EditEmail = ({ field }: EditEmailProps): JSX.Element => {
         )}
       </Box>
       <Box>
-        <FormControl isReadOnly={isLoading}>
+        <FormControl
+          isReadOnly={isLoading}
+          isDisabled={isToggleEmailConfirmationDisabled}
+        >
           <Toggle
             {...register('autoReplyOptions.hasAutoReply')}
             description="Customise an email acknowledgement to respondents"

diff --git a/...nd-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/EditMobile.tsx b/...nd-design/BuilderAndDesignDrawer/EditFieldDrawer/edit-fieldtype/EditMobile/EditMobile.tsx
@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { Box, FormControl, useDisclosure } from '@chakra-ui/react'
 import { extend, pick } from 'lodash'
 
+import { FormResponseMode } from '~shared/types'
 import { MobileFieldBase } from '~shared/types/field'
 
 import { createBaseValidationRules } from '~utils/fieldValidation'
@@ -62,13 +63,20 @@ export const EditMobile = ({ field }: EditMobileProps): JSX.Element => {
 
   const { data: freeSmsCount } = useFreeSmsQuota()
   const isToggleVfnDisabled = useMemo(() => {
+    // vfn is not supported on MRF
+    if (form?.responseMode === FormResponseMode.Multirespondent) return true
     if (!freeSmsCount) return true
     return (
       !field.isVerifiable &&
       !hasTwilioCredentials &&
       freeSmsCount.freeSmsCounts >= freeSmsCount.quota
     )
-  }, [field.isVerifiable, freeSmsCount, hasTwilioCredentials])
+  }, [
+    field.isVerifiable,
+    freeSmsCount,
+    hasTwilioCredentials,
+    form?.responseMode,
+  ])
 
   const smsCountsDisclosure = useDisclosure()
 

diff --git a/...uilder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/BasicFieldPanel.tsx b/...uilder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/BasicFieldPanel.tsx
@@ -1,6 +1,9 @@
 import { Droppable } from 'react-beautiful-dnd'
 import { Box } from '@chakra-ui/react'
 
+import { BasicField, FormResponseMode } from '~shared/types'
+
+import { useAdminForm } from '~features/admin-form/common/queries'
 import {
   BASIC_FIELDS_ORDERED,
   CREATE_FIELD_DROP_ID,
@@ -13,20 +16,33 @@ import { FieldSection } from './FieldSection'
 
 export const BasicFieldPanel = () => {
   const { isLoading } = useCreateTabForm()
+  const { data: form } = useAdminForm()
 
   return (
     <Droppable isDropDisabled droppableId={CREATE_FIELD_DROP_ID}>
       {(provided) => (
         <Box ref={provided.innerRef} {...provided.droppableProps}>
           <FieldSection>
-            {BASIC_FIELDS_ORDERED.map((fieldType, index) => (
-              <DraggableBasicFieldListOption
-                index={index}
-                isDisabled={isLoading}
-                key={index}
-                fieldType={fieldType}
-              />
-            ))}
+            {BASIC_FIELDS_ORDERED.map((fieldType, index) => {
+              let shouldDisableField = isLoading
+
+              // Attachment is not supported on MRF
+              if (
+                fieldType === BasicField.Attachment &&
+                form?.responseMode === FormResponseMode.Multirespondent
+              ) {
+                shouldDisableField = true
+              }
+
+              return (
+                <DraggableBasicFieldListOption
+                  index={index}
+                  isDisabled={shouldDisableField}
+                  key={index}
+                  fieldType={fieldType}
+                />
+              )
+            })}
             <Box display="none">{provided.placeholder}</Box>
           </FieldSection>
         </Box>

diff --git a/frontend/src/features/public-form/components/FormEndPage/FormEndPage.stories.tsx b/frontend/src/features/public-form/components/FormEndPage/FormEndPage.stories.tsx
@@ -43,6 +43,8 @@ Default.args = {
     title:
       'Thank you for your submission with some super long backstory about how important the submission is to them',
     paragraph: 'We will get back to you shortly.\n\nOnce again,\r\nthank you.',
+    paymentTitle: '',
+    paymentParagraph: '',
   },
   submissionData: {
     id: 'mockSubmissionId',
@@ -84,7 +86,7 @@ ColorThemeOrange.args = {
 export const FeedbackSubmitted = Template.bind({})
 FeedbackSubmitted.args = {
   ...Default.args,
-  isFeedbackSubmitted: true,
+  isFeedbackSectionHidden: true,
 }
 
 export const Mobile = Template.bind({})

diff --git a/frontend/src/features/public-form/components/FormEndPage/FormEndPage.tsx b/frontend/src/features/public-form/components/FormEndPage/FormEndPage.tsx
@@ -13,13 +13,13 @@ export interface FormEndPageProps {
   endPage: FormDto['endPage']
   submissionData: SubmissionData
   handleSubmitFeedback: (inputs: FeedbackFormInput) => void
-  isFeedbackSubmitted: boolean
+  isFeedbackSectionHidden: boolean
   colorTheme: FormColorTheme
 }
 
 export const FormEndPage = ({
   handleSubmitFeedback,
-  isFeedbackSubmitted,
+  isFeedbackSectionHidden,
   colorTheme,
   ...endPageProps
 }: FormEndPageProps): JSX.Element => {
@@ -40,7 +40,7 @@ export const FormEndPage = ({
             {...endPageProps}
             colorTheme={colorTheme}
           />
-          {isFeedbackSubmitted ? null : (
+          {isFeedbackSectionHidden ? null : (
             <FeedbackBlock
               colorTheme={colorTheme}
               onSubmit={handleSubmitFeedback}

diff --git a/frontend/src/features/public-form/components/FormEndPage/FormEndPageContainer.tsx b/frontend/src/features/public-form/components/FormEndPage/FormEndPageContainer.tsx
@@ -72,14 +72,20 @@ export const FormEndPageContainer = (): JSX.Element | null => {
       />
     )
   }
+
+  const isFeedbackHidden =
+    // Feedback is not supported on MRF
+    form.responseMode === FormResponseMode.Multirespondent ||
+    isFeedbackSubmitted
+
   return (
     <Box py={{ base: '1.5rem', md: '2.5rem' }} w="100%">
       <FormEndPage
         colorTheme={form.startPage.colorTheme}
         submissionData={submissionData}
         formTitle={form.title}
         endPage={form.endPage}
-        isFeedbackSubmitted={isFeedbackSubmitted}
+        isFeedbackSectionHidden={isFeedbackHidden}
         handleSubmitFeedback={handleSubmitFeedback}
       />
     </Box>

diff --git a/...tend/src/features/public-form/components/FormEndPage/components/PaymentEndPagePreview.tsx b/...tend/src/features/public-form/components/FormEndPage/components/PaymentEndPagePreview.tsx
@@ -31,8 +31,9 @@ export const PaymentEndPagePreview = ({
         </Box>
         <Stack
           pt={{ base: '1rem', md: '1.5rem' }}
-          mx={{ base: '1rem', md: '2rem' }}
+          px={{ base: '1rem', md: '4rem' }}
           bg="transparent"
+          w="100%"
         >
           <PaymentEndPageBlock focusOnMount {...endPageProps} />
           {isFeedbackSubmitted ? null : (

diff --git a/frontend/src/features/public-form/components/FormPaymentPage/stripe/StripePaymentElement.tsx b/frontend/src/features/public-form/components/FormPaymentPage/stripe/StripePaymentElement.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react'
 import { useParams } from 'react-router-dom'
-import { Box, Center, Container } from '@chakra-ui/react'
+import { Box, Center, Container, Flex, Stack, Text } from '@chakra-ui/react'
 import { Elements, useStripe } from '@stripe/react-stripe-js'
 import { loadStripe } from '@stripe/stripe-js'
 
@@ -11,6 +11,7 @@ import {
 } from '~shared/types'
 
 import InlineMessage from '~components/InlineMessage'
+import { CopyButton } from '~templates/CopyButton'
 
 import { useEnv } from '~features/env/queries'
 
@@ -155,9 +156,22 @@ const StripePaymentContainer = ({
             <PaymentFormWrapper>
               {secretEnv === 'production' ? null : (
                 <InlineMessage variant="warning" mb="1rem">
-                  Use '4242 4242 4242 4242' as your card number to test payments
-                  on this form. Payments made on this form will only show in
-                  test mode in Stripe.
+                  <Stack>
+                    <Text>
+                      Make a test payment with the card number below! Payments
+                      made on this form will only show in test mode in Stripe.
+                    </Text>
+                    <Flex align="center">
+                      <Text mr="0.25rem">4242 4242 4242 4242</Text>
+                      <Flex boxSize="1.5rem" align="center" justify="center">
+                        <CopyButton
+                          colorScheme="secondary"
+                          stringToCopy={`4242424242424242`}
+                          aria-label="Copy test card number"
+                        />
+                      </Flex>
+                    </Flex>
+                  </Stack>
                 </InlineMessage>
               )}
               <PaymentStack>