feat: notification settings UI

packages/client/modules/teamDashboard/components/ProviderRow/MSTeamsPanel.tsx

@@ -20,6 +20,7 @@ import UpdateIntegrationProviderMutation from '../../../../mutations/UpdateInteg
 import {PALETTE} from '../../../../styles/paletteV3'
 import {Layout} from '../../../../types/constEnums'
 import Legitity from '../../../../validation/Legitity'
+import NotificationSettings from './NotificationSettings'
 
 interface Props {
   viewerRef: MSTeamsPanel_viewer$key
@@ -72,6 +73,7 @@ const MSTeamsPanel = (props: Props) => {
           integrations {
             msTeams {
               auth {
+                ...NotificationSettings_auth
                 provider {
                   id
                   webhookUrl
@@ -207,6 +209,7 @@ const MSTeamsPanel = (props: Props) => {
         {fieldError && <StyledError>{fieldError}</StyledError>}
         {!fieldError && mutationError && <StyledError>{mutationError.message}</StyledError>}
       </form>
+      {auth && <NotificationSettings auth={auth} />}
     </MSTeamsPanelStyles>
   )
 }

packages/client/modules/teamDashboard/components/ProviderRow/MSTeamsProviderRow.tsx

@@ -21,6 +21,7 @@ graphql`
   fragment MSTeamsProviderRowTeamMemberIntegrations on TeamMemberIntegrations {
     msTeams {
       auth {
+        ...NotificationSettings_auth
         provider {
           id
         }

packages/client/modules/teamDashboard/components/ProviderRow/MattermostPanel.tsx

@@ -21,6 +21,7 @@ import UpdateIntegrationProviderMutation from '../../../../mutations/UpdateInteg
 import {PALETTE} from '../../../../styles/paletteV3'
 import {Layout} from '../../../../types/constEnums'
 import Legitity from '../../../../validation/Legitity'
+import NotificationSettings from './NotificationSettings'
 
 interface Props {
   viewerRef: MattermostPanel_viewer$key
@@ -86,6 +87,7 @@ const MattermostPanel = (props: Props) => {
           integrations {
             mattermost {
               auth {
+                ...NotificationSettings_auth
                 provider {
                   id
                   webhookUrl
@@ -222,6 +224,7 @@ const MattermostPanel = (props: Props) => {
         {fieldError && <StyledError>{fieldError}</StyledError>}
         {!fieldError && mutationError && <StyledError>{mutationError.message}</StyledError>}
       </form>
+      {auth && <NotificationSettings auth={auth} />}
     </MattermostPanelStyles>
   )
 }

packages/client/modules/teamDashboard/components/ProviderRow/MattermostProviderRow.tsx

@@ -21,6 +21,7 @@ graphql`
   fragment MattermostProviderRowTeamMemberIntegrations on TeamMemberIntegrations {
     mattermost {
       auth {
+        ...NotificationSettings_auth
         provider {
           id
         }

packages/client/modules/teamDashboard/components/ProviderRow/NotificationSettings.tsx

@@ -0,0 +1,87 @@
+import graphql from 'babel-plugin-relay/macro'
+import {useFragment} from 'react-relay'
+import {
+  NotificationSettings_auth$key,
+  SlackNotificationEventEnum
+} from '../../../../__generated__/NotificationSettings_auth.graphql'
+import StyledError from '../../../../components/StyledError'
+import Toggle from '../../../../components/Toggle/Toggle'
+import useAtmosphere from '../../../../hooks/useAtmosphere'
+import useMutationProps from '../../../../hooks/useMutationProps'
+import SetNotificationSettingMutation from '../../../../mutations/SetNotificationSettingMutation'
+import {MeetingLabels} from '../../../../types/constEnums'
+
+const EVENTS = [
+  'MEETING_STAGE_TIME_LIMIT_END',
+  'MEETING_STAGE_TIME_LIMIT_START',
+  'STANDUP_RESPONSE_SUBMITTED',
+  'TOPIC_SHARED',
+  'meetingEnd',
+  'meetingStart'
+] as SlackNotificationEventEnum[]
+
+const labelLookup = {
+  meetingEnd: 'Meeting End',
+  meetingStart: 'Meeting Start',
+  MEETING_STAGE_TIME_LIMIT_END: `Meeting ${MeetingLabels.TIME_LIMIT} Ended`,
+  MEETING_STAGE_TIME_LIMIT_START: `Meeting ${MeetingLabels.TIME_LIMIT} Started`,
+  TOPIC_SHARED: `Topic Shared`,
+  STANDUP_RESPONSE_SUBMITTED: 'Standup Response Submitted'
+} as Record<SlackNotificationEventEnum, string>
+
+interface Props {
+  auth: NotificationSettings_auth$key
+}
+
+const NotificationSettings = (props: Props) => {
+  const {auth: authRef} = props
+  const auth = useFragment(
+    graphql`
+      fragment NotificationSettings_auth on TeamMemberIntegrationAuthWebhook {
+        id
+        events
+      }
+    `,
+    authRef
+  )
+  const {events} = auth
+
+  const atmosphere = useAtmosphere()
+  const {submitting, onError, onCompleted, submitMutation, error} = useMutationProps()
+  const setNotificationSetting = (event: SlackNotificationEventEnum, isEnabled: boolean) => {
+    if (submitting) {
+      return
+    }
+    submitMutation()
+    SetNotificationSettingMutation(
+      atmosphere,
+      {
+        authId: auth.id,
+        event,
+        isEnabled
+      },
+      {
+        onError,
+        onCompleted
+      }
+    )
+  }
+
+  return (
+    <div>
+      {error && <StyledError>{error.message}</StyledError>}
+      {EVENTS.map((event) => {
+        const label = labelLookup[event]
+        const active = events.includes(event)
+        return (
+          <div className='flex items-center py-2'>
+            <div className='mr-4 w-full text-sm'>{label}</div>
+            <Toggle active={active} onClick={() => setNotificationSetting(event, !active)} />
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default NotificationSettings

packages/client/mutations/SetNotificationSettingMutation.ts

@@ -0,0 +1,59 @@
+import graphql from 'babel-plugin-relay/macro'
+import {commitMutation} from 'react-relay'
+import {
+  SlackNotificationEventEnum,
+  SetNotificationSettingMutation as TSetSlackNotificationMutation
+} from '../__generated__/SetNotificationSettingMutation.graphql'
+import {StandardMutation} from '../types/relayMutations'
+
+graphql`
+  fragment SetNotificationSettingMutation_auth on SetNotificationSettingSuccess {
+    auth {
+      id
+      events
+    }
+  }
+`
+
+const mutation = graphql`
+  mutation SetNotificationSettingMutation(
+    $authId: ID!
+    $event: SlackNotificationEventEnum!
+    $isEnabled: Boolean!
+  ) {
+    setNotificationSetting(authId: $authId, event: $event, isEnabled: $isEnabled) {
+      ... on ErrorPayload {
+        error {
+          message
+        }
+      }
+      ...SetNotificationSettingMutation_auth @relay(mask: false)
+    }
+  }
+`
+
+const SetSlackNotificationMutation: StandardMutation<TSetSlackNotificationMutation> = (
+  atmosphere,
+  variables,
+  {onError, onCompleted}
+) => {
+  return commitMutation<TSetSlackNotificationMutation>(atmosphere, {
+    mutation,
+    variables,
+    optimisticUpdater: (store) => {
+      const {authId, event, isEnabled} = variables
+      const auth = store.get(authId)
+      if (!auth) return
+      const enabledEvents = auth.getValue('events') as SlackNotificationEventEnum[]
+      if (!enabledEvents) return
+      const newEvents = isEnabled
+        ? [...enabledEvents, event]
+        : enabledEvents.filter((enabledEvent) => enabledEvent !== event)
+      auth.setValue(newEvents, 'events')
+    },
+    onCompleted,
+    onError
+  })
+}
+
+export default SetSlackNotificationMutation

packages/client/subscriptions/TeamSubscription.ts

@@ -152,6 +152,9 @@ const subscription = graphql`
       SetMeetingSettingsPayload {
         ...SetMeetingSettingsMutation_team @relay(mask: false)
       }
+      SetNotificationSettingSuccess {
+        ...SetNotificationSettingMutation_auth @relay(mask: false)
+      }
       StartCheckInSuccess {
         ...StartCheckInMutation_team @relay(mask: false)
       }

packages/server/graphql/public/typeDefs/SetNotificationSettingSuccess.graphql

@@ -1,7 +1,11 @@
 type SetNotificationSettingSuccess {
   authId: ID!
 
-  auth: TeamMemberIntegrationAuth!
+  """
+  The updated auth object
+  For now this is only implemented for webhook
+  """
+  auth: TeamMemberIntegrationAuthWebhook!
 
   """
   Enabled events for this provider and team