feat: update org feature flags backend

packages/client/modules/userDashboard/components/OrgBilling/OrgDetails.tsx

@@ -24,6 +24,7 @@ const OrgDetails = (props: Props) => {
       fragment OrgDetails_organization on Organization {
         ...OrgBillingDangerZone_organization
         ...EditableOrgName_organization
+        ...OrgFeatureFlags_organization
         orgId: id
         isBillingLeader
         createdAt
@@ -70,7 +71,7 @@ const OrgDetails = (props: Props) => {
       </div>
 
       <OrgFeatures />
-      <OrgFeatureFlags />
+      <OrgFeatureFlags organizationRef={organization} />
       <OrgBillingDangerZone organization={organization} isWide />
     </Suspense>
   )

packages/client/modules/userDashboard/components/OrgBilling/OrgFeatureFlags.tsx

@@ -1,8 +1,14 @@
 import styled from '@emotion/styled'
 import {Info as InfoIcon} from '@mui/icons-material'
-import React, {useState} from 'react'
+import graphql from 'babel-plugin-relay/macro'
+import React from 'react'
+import {useFragment} from 'react-relay'
+import {OrgFeatureFlags_organization$key} from '../../../../__generated__/OrgFeatureFlags_organization.graphql'
 import Panel from '../../../../components/Panel/Panel'
 import Toggle from '../../../../components/Toggle/Toggle'
+import useAtmosphere from '../../../../hooks/useAtmosphere'
+import useMutationProps from '../../../../hooks/useMutationProps'
+import ToggleFeatureFlagMutation from '../../../../mutations/ToggleFeatureFlagMutation'
 import {PALETTE} from '../../../../styles/paletteV3'
 import {ElementWidth, Layout} from '../../../../types/constEnums'
 import {Tooltip} from '../../../../ui/Tooltip/Tooltip'
@@ -28,63 +34,73 @@ const FeatureRow = styled('div')({
 const FeatureNameGroup = styled('div')({
   display: 'flex',
   alignItems: 'center',
-  gap: 4
+  gap: 4,
+  '& svg': {
+    display: 'block'
+  }
 })
 
-const features = [
-  {
-    id: 'suggestGroups',
-    name: 'Suggest Groups',
-    tooltip:
-      'Get AI-powered suggestions for creating new groups based on team activity and collaboration patterns'
-  },
-  {
-    id: 'publicTeams',
-    name: 'Public Teams',
-    tooltip: 'Allow teams to be discoverable by anyone in your organization'
-  },
-  {
-    id: 'standupAISummary',
-    name: 'Stand-Up AI Summary',
-    tooltip: 'Automatically generate summaries of your team standups using AI'
-  },
-  {
-    id: 'relatedDiscussions',
-    name: 'Related Discussions',
-    tooltip: 'See AI-suggested related discussions and threads across your organization'
-  }
-]
+// TODO: create a migration that updates featureName to be a readable string
+// then update the references throughout the app and remove this
+const FEATURE_NAME_LOOKUP: Record<string, string> = {
+  insights: 'Team Insights',
+  publicTeams: 'Public Teams',
+  relatedDiscussions: 'Related Discussions',
+  standupAISummary: 'Standup AI Summary',
+  suggestGroups: 'AI Reflection Group Suggestions'
+}
 
-const OrgFeatureFlags = () => {
-  const [featureStates, setFeatureStates] = useState<Record<string, boolean>>({
-    suggestGroups: false,
-    publicTeams: false,
-    standupAISummary: false,
-    relatedDiscussions: false
-  })
+interface Props {
+  organizationRef: OrgFeatureFlags_organization$key
+}
+
+const OrgFeatureFlags = (props: Props) => {
+  const {organizationRef} = props
+  const atmosphere = useAtmosphere()
+  const {onError, onCompleted} = useMutationProps()
+  const organization = useFragment(
+    graphql`
+      fragment OrgFeatureFlags_organization on Organization {
+        id
+        isOrgAdmin
+        orgFeatureFlags {
+          featureName
+          description
+          enabled
+        }
+      }
+    `,
+    organizationRef
+  )
+  const {isOrgAdmin} = organization
 
-  const handleToggle = (featureId: string) => {
-    setFeatureStates((prev) => ({
-      ...prev,
-      [featureId]: !prev[featureId]
-    }))
+  const handleToggle = async (featureName: string) => {
+    const variables = {
+      featureName,
+      orgId: organization.id
+    }
+    ToggleFeatureFlagMutation(atmosphere, variables, {
+      onError,
+      onCompleted
+    })
   }
 
+  if (!isOrgAdmin) return null
   return (
     <StyledPanel isWide label='Organization Feature Flags'>
       <PanelRow>
-        {features.map((feature) => (
-          <FeatureRow key={feature.id}>
+        {organization.orgFeatureFlags.map((feature) => (
+          <FeatureRow key={feature.featureName}>
             <FeatureNameGroup>
-              <span>{feature.name}</span>
+              <span>{FEATURE_NAME_LOOKUP[feature.featureName] || feature.featureName}</span>
               <Tooltip>
                 <TooltipTrigger className='bg-transparent hover:cursor-pointer'>
                   <InfoIcon className='h-4 w-4 text-slate-600' />
                 </TooltipTrigger>
-                <TooltipContent>{feature.tooltip}</TooltipContent>
+                <TooltipContent>{feature.description}</TooltipContent>
               </Tooltip>
             </FeatureNameGroup>
-            <Toggle active={featureStates[feature.id]!} onClick={() => handleToggle(feature.id)} />
+            <Toggle active={!!feature.enabled} onClick={() => handleToggle(feature.featureName)} />
           </FeatureRow>
         ))}
       </PanelRow>

packages/client/modules/userDashboard/components/OrgBilling/OrgFeatures.tsx

@@ -28,7 +28,10 @@ const FeatureRow = styled('div')({
 const FeatureNameGroup = styled('div')({
   display: 'flex',
   alignItems: 'center',
-  gap: 4
+  gap: 4,
+  '& svg': {
+    display: 'block'
+  }
 })
 
 const OrgFeatures = () => {

packages/client/mutations/ToggleFeatureFlagMutation.ts

@@ -0,0 +1,41 @@
+import graphql from 'babel-plugin-relay/macro'
+import {commitMutation} from 'react-relay'
+import {ToggleFeatureFlagMutation as TToggleFeatureFlagMutation} from '../__generated__/ToggleFeatureFlagMutation.graphql'
+import {StandardMutation} from '../types/relayMutations'
+
+graphql`
+  fragment ToggleFeatureFlagMutation_notification on ToggleFeatureFlagSuccess {
+    featureFlag {
+      featureName
+      enabled
+    }
+  }
+`
+
+const mutation = graphql`
+  mutation ToggleFeatureFlagMutation($featureName: String!, $orgId: ID, $teamId: ID, $userId: ID) {
+    toggleFeatureFlag(featureName: $featureName, orgId: $orgId, teamId: $teamId, userId: $userId) {
+      ... on ErrorPayload {
+        error {
+          message
+        }
+      }
+      ...ToggleFeatureFlagMutation_notification @relay(mask: false)
+    }
+  }
+`
+
+const ToggleFeatureFlagMutation: StandardMutation<TToggleFeatureFlagMutation> = (
+  atmosphere,
+  variables,
+  {onError, onCompleted}
+) => {
+  return commitMutation<TToggleFeatureFlagMutation>(atmosphere, {
+    mutation,
+    variables,
+    onCompleted,
+    onError
+  })
+}
+
+export default ToggleFeatureFlagMutation

packages/client/subscriptions/NotificationSubscription.ts

@@ -167,6 +167,13 @@ const subscription = graphql`
         summary
         descriptionHTML
       }
+
+      ToggleFeatureFlagSuccess {
+        featureFlag {
+          featureName
+          enabled
+        }
+      }
     }
   }
 `

packages/server/database/types/Organization.ts

@@ -15,6 +15,7 @@ interface Input {
   updatedAt?: Date
   showConversionModal?: boolean
   payLaterClickCount?: number
+  useAI?: boolean
 }
 
 export default class Organization {
@@ -37,6 +38,7 @@ export default class Organization {
   trialStartDate?: Date | null
   scheduledLockAt?: Date | null
   lockedAt?: Date | null
+  useAI: boolean
   updatedAt: Date
   constructor(input: Input) {
     const {
@@ -50,7 +52,8 @@ export default class Organization {
       showConversionModal,
       payLaterClickCount,
       picture,
-      tier
+      tier,
+      useAI
     } = input
     this.id = id || generateUID()
     this.activeDomain = activeDomain
@@ -63,5 +66,6 @@ export default class Organization {
     this.picture = picture
     this.showConversionModal = showConversionModal === null ? undefined : showConversionModal
     this.payLaterClickCount = payLaterClickCount || 0
+    this.useAI = useAI ?? true
   }
 }

packages/server/dataloader/customLoaderMakers.ts

@@ -27,7 +27,14 @@ import {
   selectTasks,
   selectTeams
 } from '../postgres/select'
-import {Insight, MeetingSettings, OrganizationUser, Task, Team} from '../postgres/types'
+import {
+  FeatureFlag,
+  Insight,
+  MeetingSettings,
+  OrganizationUser,
+  Task,
+  Team
+} from '../postgres/types'
 import {AnyMeeting, MeetingTypeEnum} from '../postgres/types/Meeting'
 import {TeamMeetingTemplate} from '../postgres/types/pg'
 import {Logger} from '../utils/Logger'
@@ -37,6 +44,7 @@ import NullableDataLoader from './NullableDataLoader'
 import RootDataLoader, {RegisterDependsOn} from './RootDataLoader'
 import normalizeArrayResults from './normalizeArrayResults'
 import normalizeResults from './normalizeResults'
+
 export interface MeetingSettingsKey {
   teamId: string
   meetingType: MeetingTypeEnum
@@ -852,6 +860,7 @@ export const latestInsightByTeamId = (parent: RootDataLoader) => {
   )
 }
 
+// whether a feature flag is enabled for a given owner (user, team, or org)
 export const featureFlagByOwnerId = (parent: RootDataLoader) => {
   return new DataLoader<{ownerId: string; featureName: string}, boolean, string>(
     async (keys) => {
@@ -955,3 +964,64 @@ export const publicTemplatesByType = (parent: RootDataLoader) => {
     }
   )
 }
+
+export const allFeatureFlags = (parent: RootDataLoader) => {
+  return new DataLoader<'Organization' | 'Team' | 'User' | 'all', FeatureFlag[], string>(
+    async (scopes) => {
+      const pg = getKysely()
+      return await Promise.all(
+        scopes.map(async (scope) => {
+          const flags = await pg
+            .selectFrom('FeatureFlag')
+            .selectAll()
+            .where('expiresAt', '>', new Date())
+            .$if(scope !== 'all', (qb) => {
+              const validScope = scope as 'Organization' | 'Team' | 'User'
+              return qb.where('scope', '=', validScope)
+            })
+            .orderBy('featureName')
+            .execute()
+          return flags.map((flag) => ({...flag, isEnabled: true}))
+        })
+      )
+    },
+    {
+      ...parent.dataLoaderOptions,
+      cacheKeyFn: (scope) => scope
+    }
+  )
+}
+
+export const allFeatureFlagsByOwner = (parent: RootDataLoader) => {
+  return new DataLoader<
+    {ownerId: string; scope: 'Organization' | 'Team' | 'User'},
+    FeatureFlag[],
+    string
+  >(
+    async (keys) => {
+      const flagsByOwnerId = await Promise.all(
+        keys.map(async ({ownerId, scope}) => {
+          const allFlags = await parent.get('allFeatureFlags').load(scope)
+          const flags = await Promise.all(
+            allFlags.map(async (flag) => {
+              const isEnabled = await parent
+                .get('featureFlagByOwnerId')
+                .load({ownerId, featureName: flag.featureName})
+              return {
+                ...flag,
+                enabled: isEnabled
+              }
+            })
+          )
+          return flags
+        })
+      )
+
+      return flagsByOwnerId
+    },
+    {
+      ...parent.dataLoaderOptions,
+      cacheKeyFn: (key) => `${key.ownerId}:${key.scope}`
+    }
+  )
+}