[COLLAB-22]: Error emails for collaborators (#1280)

## TL;DR
This PR adds the ability to send error notification emails to collaborators based on their role (editor or viewer). 

Owners and Editors of Pipes that have been shared can configure whether to send Editor(s) and/or Viewer(s) email notifications when the Pipe encounters an error.

## Other changes
* Added a "Save" button to the notifications settings so that the flow config is only updated once the frequency and collaborators to notify have been selected

## How to test?
Share a Pipe with Editor(s) and Viewer(s), trigger an error in your Pipe
- [ ] Owner should always receive email
- [ ] Editor should be cc-ed in email if "Notify editor(s)" is checked
- [ ] Viewer should be cc-ed in email if "Notify viewer(s)" is checked

Frequency setting should still be respected
- [ ] Should receive email for every error if frequency is set to always
- [ ] Should only receive email for the first error if frequency is set to once per day

Author: kevinkim-ogp

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

@@ -37,6 +37,7 @@ const duplicateFlow: MutationResolvers['duplicateFlow'] = async (
     delete prevConfig['templateConfig']
     delete prevConfig['showSurvey']
     delete prevConfig['attachments']
+    delete prevConfig['errorConfig']
 
     const duplicatedFlow = await context.currentUser
       .$relatedQuery('flows', trx)

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

@@ -10,6 +10,7 @@ type Params = {
   input: {
     id: string
     notificationFrequency: IFlowErrorConfig['notificationFrequency']
+    notificationRecipients: IFlowErrorConfig['notificationRecipients']
     showSurvey: boolean
     attachments?: IFlowAttachmentsConfig[]
   }
@@ -38,6 +39,13 @@ const updateFlowConfig = async (
     }
   }
 
+  if (params.input.notificationRecipients !== undefined) {
+    newConfig.errorConfig = {
+      ...newConfig.errorConfig, // If ever undefined (should never be), it gets set to an empty object first
+      notificationRecipients: params.input.notificationRecipients,
+    }
+  }
+
   if (params.input.showSurvey !== undefined) {
     newConfig.showSurvey = params.input.showSurvey
   }

packages/backend/src/graphql/schema.graphql

@@ -433,6 +433,7 @@ type FlowConfig {
 
 type FlowErrorConfig {
   notificationFrequency: NotificationFrequency!
+  notificationRecipients: [NotificationRecipients]!
 }
 
 type FlowTemplateConfig {
@@ -526,6 +527,11 @@ enum NotificationFrequency {
   always
 }
 
+enum NotificationRecipients {
+  editor
+  viewer
+}
+
 input FlowAttachmentsConfigInput {
   name: String!
   displayedValue: String!
@@ -537,6 +543,7 @@ input FlowAttachmentsConfigInput {
 input UpdateFlowConfigInput {
   id: String!
   notificationFrequency: NotificationFrequency
+  notificationRecipients: [NotificationRecipients]
   showSurvey: Boolean
   hasLoadedOnce: Boolean
   attachments: [FlowAttachmentsConfigInput]

packages/backend/src/helpers/generate-error-email.ts

@@ -1,3 +1,5 @@
+import { NotificationRecipients } from '@plumber/types'
+
 import { DateTime } from 'luxon'
 
 import appConfig from '@/config/app'
@@ -70,6 +72,25 @@ export async function sendErrorEmail(flow: Flow) {
   const userEmail = flow.user.email
   const errorKey = `error-alert:${flowId}`
   const currDatetime = DateTime.now()
+  const ccList: string[] = []
+
+  // default to notify owner only if no collaborators are specified
+  const notificationRecipients =
+    flow.config?.errorConfig?.notificationRecipients ?? []
+  if (
+    notificationRecipients.length > 0 &&
+    flow.collaborators &&
+    flow.collaborators.length > 0
+  ) {
+    const collaboratorsToCC = flow.collaborators
+      .filter((collaborator) =>
+        notificationRecipients.includes(
+          collaborator.role as NotificationRecipients,
+        ),
+      )
+      .map((collaborator) => collaborator.user.email)
+    ccList.push(...collaboratorsToCC)
+  }
 
   const errorDetails = {
     flowId,
@@ -83,6 +104,7 @@ export async function sendErrorEmail(flow: Flow) {
     body: createBodyErrorMessage(truncatedFlowName, flowId),
     recipient: userEmail,
     replyTo: '[email protected]',
+    ...(ccList.length > 0 && { cc: ccList }),
   })
 
   await redisClient

packages/backend/src/helpers/send-email.ts

@@ -10,13 +10,15 @@ export interface PostmanEmailRequestBody {
   body: string
   recipient: string
   replyTo?: string
+  cc?: string[]
 }
 
 export async function sendEmail({
   subject,
   body,
   recipient,
   replyTo,
+  cc,
 }: PostmanEmailRequestBody): Promise<void> {
   try {
     await axios.post(
@@ -28,6 +30,7 @@ export async function sendEmail({
         from: `Plumber <${appConfig.postman.fromAddress}>`,
         ...(replyTo && { reply_to: replyTo }),
         disable_tracking: true,
+        ...(cc && { cc }),
       },
       {
         headers: {

packages/backend/src/models/flow.ts

@@ -66,6 +66,13 @@ class Flow extends Base {
               notificationFrequency: {
                 type: 'string',
               },
+              notificationRecipients: {
+                type: 'array',
+                items: {
+                  type: 'string',
+                  enum: ['editor', 'viewer'],
+                },
+              },
             },
           },
         },

packages/backend/src/workers/helpers/make-action-worker.ts

@@ -271,7 +271,12 @@ export function makeActionWorker(
 
       const flow = await Flow.query()
         .findById(job.data.flowId)
-        .withGraphFetched('user')
+        .withGraphFetched({
+          user: true,
+          collaborators: {
+            user: true,
+          },
+        })
         .throwIfNotFound()
 
       const shouldAlwaysSendEmail =

packages/frontend/src/components/EditorSettings/Notifications.tsx

@@ -1,8 +1,13 @@
-import { useCallback, useContext, useMemo, useState } from 'react'
+import { NotificationRecipients } from '@plumber/types'
+
+import { useCallback, useContext } from 'react'
+import { Controller, useFormContext } from 'react-hook-form'
 import { useMutation } from '@apollo/client'
-import { Flex, Skeleton, Stack, Text } from '@chakra-ui/react'
-import { Menu, useToast } from '@opengovsg/design-system-react'
+import { Flex, FormControl, Skeleton, Stack, Text } from '@chakra-ui/react'
+import { Button, Checkbox, useToast } from '@opengovsg/design-system-react'
 
+import Form from '@/components/Form'
+import { SingleSelect } from '@/components/SingleSelect'
 import { EditorSettingsContext } from '@/contexts/EditorSettings'
 import { UPDATE_FLOW_CONFIG } from '@/graphql/mutations/update-flow-config'
 
@@ -11,6 +16,11 @@ enum Frequency {
   Always = 'always',
 }
 
+enum Recipient {
+  Editor = 'editor',
+  Viewer = 'viewer',
+}
+
 const frequencyOptions = [
   {
     label: 'First error on this pipe, one email notification per day',
@@ -22,24 +32,110 @@ const frequencyOptions = [
   },
 ]
 
+const recipientOptions = [
+  {
+    label: 'editor(s)',
+    value: 'editor',
+  },
+  {
+    label: 'viewer(s)',
+    value: 'viewer',
+  },
+]
+
+const DEFAULT_RECIPIENTS: NotificationRecipients[] = []
+
 const DEFAULT_FREQUENCY = Frequency.Once
 
+function NotificationFormFields() {
+  const { flow } = useContext(EditorSettingsContext)
+  // NOTE: check is for greater than 1 because collaborators includes the owner
+  const hasCollaborators =
+    flow?.collaborators?.length && flow?.collaborators?.length > 1
+  const isReadOnly = flow?.role === 'viewer'
+
+  const {
+    control,
+    register,
+    formState: { isDirty },
+  } = useFormContext()
+
+  return (
+    <Stack gap={2}>
+      <Text textStyle="subhead-1">Frequency</Text>
+      <FormControl key="frequency">
+        <Skeleton isLoaded={!!flow}>
+          <Controller
+            name="frequency"
+            control={control}
+            render={({ field: { onChange, value, name } }) => (
+              <SingleSelect
+                items={frequencyOptions}
+                isSearchable={false}
+                onChange={onChange}
+                value={value}
+                name={name}
+                isClearable={false}
+                colorScheme="secondary"
+                isDisabled={isReadOnly}
+              />
+            )}
+          />
+        </Skeleton>
+      </FormControl>
+      {hasCollaborators && (
+        <Stack gap={0}>
+          <Text textStyle="subhead-1">Collaborators</Text>
+          {recipientOptions.map((recipient) => (
+            <FormControl key={recipient.value}>
+              <Checkbox {...register(recipient.value)} isDisabled={isReadOnly}>
+                Notify {recipient.label}
+              </Checkbox>
+            </FormControl>
+          ))}
+        </Stack>
+      )}
+      <Button
+        size="sm"
+        w="fit-content"
+        type="submit"
+        isDisabled={!isDirty || isReadOnly}
+        alignSelf="flex-end"
+      >
+        {isDirty ? 'Save' : 'Saved'}
+      </Button>
+    </Stack>
+  )
+}
+
 export default function Notifications() {
   const { flow } = useContext(EditorSettingsContext)
 
   const frequency =
     flow?.config?.errorConfig?.notificationFrequency ?? DEFAULT_FREQUENCY
+  const notificationRecipients =
+    flow?.config?.errorConfig?.notificationRecipients ?? DEFAULT_RECIPIENTS
+
   const [updateFlowConfig] = useMutation(UPDATE_FLOW_CONFIG)
   const toast = useToast()
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+
+  const defaultValues = {
+    frequency,
+    editor: notificationRecipients.includes(Recipient.Editor),
+    viewer: notificationRecipients.includes(Recipient.Viewer),
+  }
 
   const onFlowConfigUpdate = useCallback(
-    async (frequency: Frequency) => {
+    async (
+      frequency: Frequency,
+      notificationRecipients: NotificationRecipients[],
+    ) => {
       await updateFlowConfig({
         variables: {
           input: {
             id: flow.id,
             notificationFrequency: frequency,
+            notificationRecipients,
           },
         },
         optimisticResponse: {
@@ -49,18 +145,15 @@ export default function Notifications() {
             config: {
               errorConfig: {
                 notificationFrequency: frequency,
+                notificationRecipients,
               },
             },
           },
         },
       })
 
-      const displayLabel = frequencyOptions
-        .find((option) => option.value === frequency)
-        ?.label.toLowerCase()
-
       toast({
-        title: `You will now receive an email notification for ${displayLabel}`,
+        title: `Notifications settings saved!`,
         status: 'success',
         duration: 3000,
         isClosable: true,
@@ -70,21 +163,6 @@ export default function Notifications() {
     [flow.id, updateFlowConfig, toast],
   )
 
-  const handleClick = useCallback(
-    (frequencyOption: Frequency) => {
-      // only update flow config if a different option is selected
-      if (frequencyOption !== frequency) {
-        onFlowConfigUpdate(frequencyOption)
-      }
-    },
-    [onFlowConfigUpdate, frequency],
-  )
-
-  const frequencyLabel = useMemo(
-    () => frequencyOptions.find((option) => option.value === frequency)?.label,
-    [frequency],
-  )
-
   return (
     <Flex
       py={{ base: '2rem', md: '3rem' }}
@@ -103,42 +181,22 @@ export default function Notifications() {
         </Text>
       </Stack>
       <Stack>
-        <Text textStyle="subhead-1">Frequency</Text>
-        <Menu isStretch>
-          <Menu.Button variant="outline" colorScheme="secondary">
-            <Skeleton isLoaded={!!flow}>
-              <Text
-                textStyle="body-1"
-                color="base.content.default"
-                whiteSpace="nowrap"
-                overflow="hidden"
-                textOverflow="ellipsis"
-              >
-                {frequencyLabel}
-              </Text>
-            </Skeleton>
-          </Menu.Button>
-          <Menu.List>
-            {frequencyOptions.map((option, index) => (
-              <Menu.Item
-                key={index}
-                onClick={() => handleClick(option.value)}
-                onMouseEnter={() => setHoveredIndex(index)}
-                onMouseLeave={() => setHoveredIndex(null)}
-                sx={{
-                  bg:
-                    hoveredIndex === index ||
-                    (hoveredIndex === null && option.label === frequencyLabel)
-                      ? 'interaction.tinted.main.hover'
-                      : 'transparent',
-                  color: 'base.content.default',
-                }}
-              >
-                {option.label}
-              </Menu.Item>
-            ))}
-          </Menu.List>
-        </Menu>
+        <Form
+          defaultValues={defaultValues}
+          onSubmit={(data) => {
+            const newNotificationRecipients = [
+              ...(data.editor ? [Recipient.Editor] : []),
+              ...(data.viewer ? [Recipient.Viewer] : []),
+            ]
+
+            onFlowConfigUpdate(
+              data.frequency as Frequency,
+              newNotificationRecipients,
+            )
+          }}
+        >
+          <NotificationFormFields />
+        </Form>
       </Stack>
     </Flex>
   )