PLU-432: feat: add survey for pipe publishing (#896)

## Problem

Need a way to get survey feedback for pipe publishing experience.

## Solution

Integrated Lens Survey widget to collect user feedback when a flow is
published.
The survey will appear for every pipe because every pipe has a different
setup experience.

**Features**:

- Added Lens Survey widget that appears when a flow is published
- Automatically sets `showSurvey` flag to true when a flow is published
for the first time
- `showSurvey` flag is set to false after the first time it is published
- Tracks flow ID and user email as attributes in the survey
- Added CSP configuration to allow loading the survey from the Lens
domain

## Before & After Screenshots
**AFTER**:


https://github.com/user-attachments/assets/c9e32062-6340-41fc-ae21-159388a94c30



## Tests
1. Check that already published pipes will not have the survey
2. Upon publishing a pipe for the first time, the survey should appear
at the bottom right
3. Publishing the pipe again afterwards will not pop the survey anymore
4. The survey should appear for other pipes

**Note**
- Created 2 different surveys: 1 is for prod and the other is for
staging/uat/dev to not pollute the responses for prod. To test the
staging survey, need to login to https://lens.hack2025.com.sg and modify
the domain accordingly to https://staging.plumber.gov.sg for staging,
https://uat.plumber.gov.sg for uat and http://localhost:3001 for dev

**New environment variables**:
Frontend app config has a new `lensSurveyClientKey` which is the same
for staging/uat/dev but different for prod because 2 different surveys
created

**New dependencies**:

- `lens-widget`: Widget for collecting user feedback
- Updated `@emotion/react` and `@emotion/styled` to ^11.14.0 (from
11.10.5)
- Updated `react-icons` to ^4.12.0 (from 4.10.1)

Author: m0nggh

package-lock.json

@@ -100,6 +100,9 @@ describe('updateFlowStatus', () => {
     expect(patchSpy).toHaveBeenCalledWith({
       active: true,
       publishedAt: expect.any(String),
+      config: {
+        showSurvey: true,
+      },
     })
 
     // jobName is constructed as "flow-<flow.id>"
@@ -132,6 +135,9 @@ describe('updateFlowStatus', () => {
     expect(patchSpy).toHaveBeenCalledWith({
       active: false,
       publishedAt: null,
+      config: {
+        showSurvey: undefined,
+      },
     })
 
     expect(flowQueue.removeRepeatableByKey).toHaveBeenCalledWith('repeat-key')
@@ -154,6 +160,9 @@ describe('updateFlowStatus', () => {
     expect(patchSpy).toHaveBeenCalledWith({
       active: true,
       publishedAt: expect.any(String),
+      config: {
+        showSurvey: true,
+      },
     })
 
     // But no job should be added when trigger type is webhook.
@@ -175,6 +184,9 @@ describe('updateFlowStatus', () => {
     expect(patchSpy).toHaveBeenCalledWith({
       active: false,
       publishedAt: null,
+      config: {
+        showSurvey: undefined,
+      },
     })
 
     // For webhook triggers no removal of a repeatable job should be attempted.

packages/backend/src/graphql/__tests__/mutations/update-flow-status.test.ts

@@ -90,8 +90,8 @@ const duplicateFlow: MutationResolvers['duplicateFlow'] = async (
 
     // duplicate the flow with the previous config (only keep notification frequency)
     delete prevConfig['duplicateCount']
-    delete prevConfig['demoConfig']
     delete prevConfig['templateConfig']
+    delete prevConfig['showSurvey']
 
     const duplicatedFlow = await context.currentUser
       .$relatedQuery('flows', trx)

packages/backend/src/graphql/mutations/duplicate-flow.ts

@@ -1,16 +1,12 @@
-import type {
-  IFlowConfig,
-  IFlowDemoConfig,
-  IFlowErrorConfig,
-} from '@plumber/types'
+import type { IFlowConfig, IFlowErrorConfig } from '@plumber/types'
 
 import Context from '@/types/express/context'
 
 type Params = {
   input: {
     id: string
     notificationFrequency: IFlowErrorConfig['notificationFrequency']
-    hasLoadedOnce: IFlowDemoConfig['hasLoadedOnce']
+    showSurvey: boolean
   }
 }
 
@@ -37,12 +33,8 @@ const updateFlowConfig = async (
     }
   }
 
-  // TODO (mal): remove demo config
-  if (params.input.hasLoadedOnce !== undefined) {
-    newConfig.demoConfig = {
-      ...newConfig.demoConfig, // If ever undefined (should never be), it gets set to an empty object first
-      hasLoadedOnce: params.input.hasLoadedOnce,
-    }
+  if (params.input.showSurvey !== undefined) {
+    newConfig.showSurvey = params.input.showSurvey
   }
 
   return await flow.$query().patchAndFetch({

packages/backend/src/graphql/mutations/update-flow-config.ts

@@ -41,6 +41,16 @@ const updateFlowStatus: MutationResolvers['updateFlowStatus'] = async (
   await flow.$query().patch({
     active: params.input.active,
     publishedAt: params.input.active ? new Date().toISOString() : null,
+    config: {
+      ...flow.config,
+      // When publishing: set to true if undefined else false
+      // When unpublishing: keep existing value
+      showSurvey: params.input.active
+        ? flow.config?.showSurvey === undefined
+          ? true
+          : false
+        : flow.config?.showSurvey,
+    },
   })
 
   const triggerStep = await flow.getTriggerStep()

packages/backend/src/graphql/mutations/update-flow-status.ts

@@ -43,7 +43,7 @@ type Query {
   getTableConnections(tableIds: [String!]!): JSONObject
   getTables(limit: Int!, offset: Int!, name: String): PaginatedTables!
   # Tiles rows
- getAllRows(tableId: String!, stringifiedCursor: String): GetTableRowsResult!
+  getAllRows(tableId: String!, stringifiedCursor: String): GetTableRowsResult!
   getCurrentUser: User
   healthcheck: AppHealth
   getPlumberStats: Stats
@@ -357,19 +357,14 @@ type Flow {
 type FlowConfig {
   errorConfig: FlowErrorConfig
   duplicateCount: Int
-  demoConfig: FlowDemoConfig
   templateConfig: FlowTemplateConfig
+  showSurvey: Boolean
 }
 
 type FlowErrorConfig {
   notificationFrequency: NotificationFrequency!
 }
 
-type FlowDemoConfig {
-  hasLoadedOnce: Boolean!
-  videoId: String!
-}
-
 type FlowTemplateConfig {
   templateId: String!
   formId: String
@@ -448,7 +443,7 @@ enum NotificationFrequency {
 input UpdateFlowConfigInput {
   id: String!
   notificationFrequency: NotificationFrequency
-  hasLoadedOnce: Boolean
+  showSurvey: Boolean
 }
 
 input ExecuteFlowInput {

packages/backend/src/graphql/schema.graphql

@@ -17,6 +17,8 @@ const helmetOptions: HelmetOptions = {
         'https://*.launchdarkly.com',
         // For proxying datadog rum
         'https://rum-proxy.plumber.gov.sg',
+        // For Lens Survey
+        'https://lens.hack2025.com.sg',
         appConfig.baseUrl,
       ],
       // for google fonts

packages/backend/src/helpers/csp.ts

@@ -16,8 +16,8 @@
     "@dnd-kit/core": "6.1.0",
     "@dnd-kit/modifiers": "7.0.0",
     "@dnd-kit/sortable": "8.0.0",
-    "@emotion/react": "11.10.5",
-    "@emotion/styled": "11.10.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@fontsource/space-grotesk": "4.5.13",
     "@hookform/resolvers": "^2.8.8",
     "@mui/icons-material": "5.11.0",
@@ -41,6 +41,7 @@
     "dedent": "1.5.1",
     "escape-html": "1.0.3",
     "file-saver": "2.0.5",
+    "lens-widget": "1.36.0",
     "lodash": "^4.17.21",
     "lodash.get": "4.4.2",
     "lottie-web": "5.12.2",
@@ -49,7 +50,7 @@
     "notistack": "2.0.8",
     "papaparse": "5.4.1",
     "react-hook-form": "^7.17.2",
-    "react-icons": "4.10.1",
+    "react-icons": "^4.12.0",
     "react-intl": "6.2.7",
     "react-json-tree": "^0.18.0",
     "react-markdown": "8.0.7",

packages/frontend/package.json

@@ -12,18 +12,22 @@ import {
   Flex,
 } from '@chakra-ui/react'
 import { IconButton } from '@opengovsg/design-system-react'
+import { Rating } from 'lens-widget'
 
 import FlowStep from '@/components/FlowStep'
 import FlowStepGroup from '@/components/FlowStepGroup'
+import appConfig from '@/config/app'
 import { EditorContext } from '@/contexts/Editor'
 import {
   StepExecutionsToIncludeContext,
   StepExecutionsToIncludeProvider,
 } from '@/contexts/StepExecutionsToInclude'
 import { CREATE_STEP } from '@/graphql/mutations/create-step'
+import { UPDATE_FLOW_CONFIG } from '@/graphql/mutations/update-flow-config'
 import { UPDATE_STEP } from '@/graphql/mutations/update-step'
 import { GET_APPS } from '@/graphql/queries/get-apps'
 import { GET_FLOW } from '@/graphql/queries/get-flow'
+import useAuthentication from '@/hooks/useAuthentication'
 
 interface AddStepButtonProps {
   onClick: () => void
@@ -97,6 +101,16 @@ export default function Editor(props: EditorProps): React.ReactElement {
   )
 
   const { flow, steps: rawSteps } = props
+  const showSurvey = flow.active && flow.config?.showSurvey
+  const { currentUser } = useAuthentication()
+
+  const [updateFlowConfig] = useMutation(UPDATE_FLOW_CONFIG)
+  const onFlowConfigUpdate = useCallback(async () => {
+    await updateFlowConfig({
+      variables: { input: { id: flow.id, showSurvey: false } },
+    })
+  }, [updateFlowConfig, flow.id])
+
   const steps = useMemo(
     // Populate each step's flowId so that IStep isn't LYING about flowId being
     // non-undefined. We do it here instead of fetching in GraphQL since all
@@ -302,6 +316,20 @@ export default function Editor(props: EditorProps): React.ReactElement {
           )}
         </StepExecutionsToIncludeProvider>
       </Flex>
+
+      {showSurvey && (
+        <Rating
+          clientKey={appConfig.lensSurveyClientKey}
+          brandColour="#cf1a68"
+          attributes={[
+            `FlowId: ${flow.id}`,
+            `UserEmail: ${currentUser?.email}`,
+            ...(appConfig.env !== 'prod' ? [`Env: ${appConfig.env}`] : []),
+          ]}
+          onSubmit={onFlowConfigUpdate}
+          onClose={onFlowConfigUpdate}
+        />
+      )}
     </Flex>
   )
 }

packages/frontend/src/components/Editor/index.tsx

@@ -37,7 +37,9 @@ export default function EditorLayout() {
   const { flowId } = useParams()
   const [searchParams, setSearchParams] = useSearchParams()
   const [updateFlow] = useMutation(UPDATE_FLOW)
-  const [updateFlowStatus] = useMutation(UPDATE_FLOW_STATUS)
+  const [updateFlowStatus] = useMutation(UPDATE_FLOW_STATUS, {
+    refetchQueries: [GET_FLOW],
+  })
   const { data, loading, error } = useQuery(GET_FLOW, {
     variables: { id: flowId },
   })