Merge remote-tracking branch 'origin/develop' into chore/remove-unuse…

…d-deps-2

# Conflicts:
#	package-lock.json
#	package.json

.github/mergify.yml

@@ -6,8 +6,6 @@ pull_request_rules:
     actions:
       review:
         type: APPROVE
-      merge:
-        method: squash
   - name: Approve and merge non-major Snyk.io upgrades
     conditions:
       - author=snyk-bot

frontend/datadog-chunk.ts

@@ -6,14 +6,9 @@
 import { datadogRum, RumInitConfiguration } from '@datadog/browser-rum'
 
 // Discard benign RUM errors.
-export const ddBeforeSend: RumInitConfiguration['beforeSend'] = (event) => {
-  // TODO(#4279): Might want to remove this once we are fully React, since then we will not need to check auth state.
-  // Discard unauth'd errors
-  if (event.type === 'resource' && event.resource.status_code === 404) {
-    return false
-  }
-
-  if (event.type !== 'error') return
+// Ensure that beforeSend returns true to keep the event and false to discard it.
+const ddBeforeSend: RumInitConfiguration['beforeSend'] = (event) => {
+  if (event.type !== 'error') return true
 
   // Caused by @chakra-ui/react@latest-v1 -> @chakra-ui/[email protected] -> [email protected]
   // Already fixed in @chakra-ui/react@latest, but we cannot upgrade until we upgrade to React 18.
@@ -27,6 +22,8 @@ export const ddBeforeSend: RumInitConfiguration['beforeSend'] = (event) => {
   if (event.error.message.includes('ResizeObserver loop limit exceeded')) {
     return false
   }
+
+  return true
 }
 
 // Init Datadog RUM
@@ -41,10 +38,9 @@ datadogRum.init({
 
   // Specify a version number to identify the deployed version of your application in Datadog
   version: '@REACT_APP_VERSION',
-  // TODO/RUM: Update these RUM percentages as we increase the rollout percentage!
-  sampleRate: Number('@REACT_APP_DD_SAMPLE_RATE') || 5,
-  replaySampleRate: 100,
-  trackInteractions: true,
+  sessionSampleRate: Number('@REACT_APP_DD_SAMPLE_RATE') || 5,
+  sessionReplaySampleRate: 100,
+  trackUserInteractions: true,
   defaultPrivacyLevel: 'mask-user-input',
   beforeSend: ddBeforeSend,
 })

frontend/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@chakra-ui/react": "^1.8.6",
     "@datadog/browser-logs": "^4.50.1",
-    "@datadog/browser-rum": "^4.34.1",
+    "@datadog/browser-rum": "^5.27.0",
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
     "@floating-ui/react-dom-interactions": "^0.9.3",

frontend/src/features/admin-form/create/common/CreatePageSidebar/CreatePageSidebar.tsx

@@ -110,27 +110,31 @@ export const CreatePageSidebar = (): JSX.Element | null => {
       <Stack spacing="0.5rem">
         <DrawerTabIcon
           label="Add fields"
+          trackingLabel="create_builder.drawer_tab.add_fields"
           icon={<BxsWidget fontSize="1.5rem" />}
           onClick={handleDrawerBuilderClick}
           isActive={activeTab === DrawerTabs.Builder}
           id={FEATURE_TOUR[0].id}
         />
         <DrawerTabIcon
           label="Edit header and instructions"
+          trackingLabel="create_builder.drawer_tab.edit_header"
           icon={<BxsDockTop fontSize="1.5rem" />}
           onClick={handleDrawerDesignClick}
           isActive={activeTab === DrawerTabs.Design}
           id={FEATURE_TOUR[1].id}
         />
         <DrawerTabIcon
           label="Add logic"
+          trackingLabel="create_builder.drawer_tab.add_logic"
           icon={<BiGitMerge fontSize="1.5rem" />}
           onClick={handleDrawerLogicClick}
           isActive={activeTab === DrawerTabs.Logic}
           id={FEATURE_TOUR[2].id}
         />
         <DrawerTabIcon
           label="Edit Thank you page"
+          trackingLabel="create_builder.drawer_tab.edit_thank_you_page"
           icon={<PhHandsClapping fontSize="1.5rem" />}
           onClick={handleDrawerEndpageClick}
           isActive={activeTab === DrawerTabs.EndPage}
@@ -141,6 +145,7 @@ export const CreatePageSidebar = (): JSX.Element | null => {
             <Divider />
             <DrawerTabIcon
               label="Add workflow"
+              trackingLabel="create_builder.drawer_tab.add_workflow"
               icon={<MultiParty fontSize="1.5rem" />}
               onClick={handleDrawerWorkflowClick}
               isActive={activeTab === DrawerTabs.Workflow}
@@ -157,6 +162,7 @@ export const CreatePageSidebar = (): JSX.Element | null => {
           icon={<BiQuestionMark />}
           borderRadius="full"
           aria-label="Help"
+          data-dd-action-name="create_builder.drawer_tab.help"
           onClick={(e) => {
             e.preventDefault()
             window.open(FORM_GUIDE)

frontend/src/features/admin-form/create/common/CreatePageSidebar/DrawerTabIcon.tsx

@@ -11,6 +11,7 @@ interface DrawerTabIconProps {
   isActive: boolean
   id?: string
   showRedDot?: boolean
+  trackingLabel?: string
 }
 
 export const DrawerTabIcon = ({
@@ -20,13 +21,15 @@ export const DrawerTabIcon = ({
   isActive,
   id,
   showRedDot,
+  trackingLabel,
 }: DrawerTabIconProps): JSX.Element => {
   return (
     <Tooltip label={label} placement="right">
       <Box>
         <IconButton
           variant="reverse"
           aria-label={label}
+          data-dd-action-name={trackingLabel}
           isActive={isActive}
           icon={icon}
           onClick={onClick}

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

@@ -2,6 +2,8 @@ import { useCallback } from 'react'
 
 import { FormWorkflowStep, FormWorkflowStepDto } from '~shared/types'
 
+import { datadogRum } from '~utils/datadog'
+
 import {
   setToInactiveSelector,
   useAdminWorkflowStore,
@@ -15,6 +17,27 @@ export interface ActiveStepBlockProps {
   handleOpenDeleteModal: () => void
 }
 
+const handleTracking = (step: FormWorkflowStep, stepNumber: number) => {
+  // stepNumber is 0-indexed
+  if (stepNumber === 0) {
+    const hasFieldsSelected = step.edit.length > 0
+    if (hasFieldsSelected) {
+      datadogRum.addAction(
+        'workflow_builder.active_step_block.step_one_save_action',
+      )
+    }
+  }
+
+  if (stepNumber === 1) {
+    const hasFieldsSelected = step.edit.length > 0
+    if (hasFieldsSelected) {
+      datadogRum.addAction(
+        'workflow_builder.active_step_block.step_two_save_action',
+      )
+    }
+  }
+}
+
 export const ActiveStepBlock = ({
   stepNumber,
   step,
@@ -24,7 +47,8 @@ export const ActiveStepBlock = ({
   const setToInactive = useAdminWorkflowStore(setToInactiveSelector)
 
   const handleSubmit = useCallback(
-    (step: FormWorkflowStep) =>
+    (step: FormWorkflowStep) => {
+      handleTracking(step, stepNumber)
       updateStepMutation.mutate(
         {
           stepNumber,
@@ -33,7 +57,8 @@ export const ActiveStepBlock = ({
         {
           onSuccess: () => setToInactive(),
         },
-      ),
+      )
+    },
     [updateStepMutation, stepNumber, setToInactive],
   )
 

frontend/src/features/admin-form/template/UseTemplateModal/UseTemplateModal.tsx

@@ -16,6 +16,10 @@ export type UseTemplateModalProps = Pick<
   'onClose' | 'isOpen'
 > & { formId: string }
 
+/**
+ * Note: The word "Use" in "UseTemplateModal" is not referring to React's "use" convention for hooks.
+ * "UseTemplate" is a FormSG functionality referring to the FormSG feature of utilising another form as a starting template.
+ */
 export const UseTemplateModal = ({
   formId,
   isOpen,

frontend/src/features/admin-form/template/UseTemplateModal/UseTemplateWizardProvider.tsx

@@ -116,6 +116,10 @@ interface UseTemplateWizardProviderProps {
   children: React.ReactNode
 }
 
+/**
+ * Note: The word "Use" in "UseTemplateWizardProvider" is not referring to React's "use" convention for hooks.
+ * "UseTemplate" is a FormSG functionality referring to the FormSG feature of utilising another form as a starting template.
+ */
 export const UseTemplateWizardProvider = ({
   formId,
   children,

frontend/src/features/admin-form/template/mutation.ts

@@ -53,6 +53,10 @@ const useCommonHooks = () => {
   }
 }
 
+/**
+ * Note: The word "Use" in "useUseTemplateWizardProvider" is not referring to React's "use" convention for hooks.
+ * "UseTemplate" is a FormSG functionality referring to the FormSG feature of utilising another form as a starting template.
+ */
 export const useUseTemplateMutations = () => {
   const { handleSuccess, handleError } = useCommonHooks()
 

frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormDetailsScreen.tsx

@@ -29,6 +29,24 @@ import { FormResponseOptions } from './FormResponseOptions'
 /** The length of form title to start showing warning text */
 const FORM_TITLE_LENGTH_WARNING = 65
 
+const getTrackingSubmissionActionName = (
+  responseModeValue: FormResponseMode,
+) => {
+  switch (responseModeValue) {
+    case FormResponseMode.Email:
+      return 'dashboard.create.create_email'
+    case FormResponseMode.Encrypt:
+      return 'dashboard.create.create_encrypt'
+    case FormResponseMode.Multirespondent:
+      return 'dashboard.create.create_multirespondent'
+
+    default: {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const _exhaustiveCheck: never = responseModeValue
+    }
+  }
+}
+
 export const CreateFormDetailsScreen = (): JSX.Element => {
   const {
     formMethods,
@@ -112,6 +130,9 @@ export const CreateFormDetailsScreen = (): JSX.Element => {
             isDisabled={isFetching}
             onClick={handleDetailsSubmit}
             isFullWidth
+            data-dd-action-name={getTrackingSubmissionActionName(
+              responseModeValue,
+            )}
           >
             <Text lineHeight="1.5rem">Next step</Text>
           </Button>

frontend/src/typings/window.d.ts

@@ -0,0 +1,7 @@
+import type { RumGlobal } from '@datadog/browser-rum'
+
+declare global {
+  interface Window {
+    DD_RUM: RumGlobal | undefined
+  }
+}