chore: ld flags not evaluated (#1254)

## Problem
LD dashboard did not reflect feature flag evaluations.
Cannot tell which user each flag was evaluated for.

## Solution
* use `variation()` to get the flag value instead of reading from all
flags:
  * returns the flag value
  * registers evaluation with LaunchDarkly servers
  * shows up in LaunchDarkly dashboard
* lightweight and fast as it reads from the cache; does not make an
additional API call
* use Datadog RUM's feature flag feature to check evaluations by user

## Tests
Test that flags are being evaluated correctly:
- [ ] Should only see Apps that you are allowed to see (e.g., some users
should not see GatherSG / AISAY etc)
- [ ] Only Plumbers should see the bulk retry button in the Executions
page
- [ ] Only should see the SSO login on OGP wifi
- [ ] Test that banner still works as intended

Author: kevinkim-ogp

packages/frontend/src/components/ExecutionStep/components/RetryAllButton.tsx

@@ -16,7 +16,7 @@ interface RetryAllButtonProps {
 
 export const RetryAllButton = ({ execution }: RetryAllButtonProps) => {
   const flowId = execution.flow?.id
-  const { flags } = useContext(LaunchDarklyContext)
+  const { getFlagValue } = useContext(LaunchDarklyContext)
   const toast = useToast()
   const [isBulkRetrying, setIsBulkRetrying] = useState(false)
   const [hasBulkRetried, setHasBulkRetried] = useState(false)
@@ -53,7 +53,7 @@ export const RetryAllButton = ({ execution }: RetryAllButtonProps) => {
     }
   }, [flowId, bulkRetryExecutions, toast])
 
-  if (!flags?.[BULK_RETRY_EXECUTIONS_FLAG]) {
+  if (!getFlagValue(BULK_RETRY_EXECUTIONS_FLAG, false)) {
     return null
   }
 

packages/frontend/src/components/ExecutionStep/components/RetryAllIterationsButton.tsx

@@ -18,7 +18,7 @@ export const RetryAllIterationsButton = ({
   execution,
 }: RetryAllIterationsButtonProps) => {
   const executionId = execution.id
-  const { flags } = useContext(LaunchDarklyContext)
+  const { getFlagValue } = useContext(LaunchDarklyContext)
   const toast = useToast()
   const [isBulkRetrying, setIsBulkRetrying] = useState(false)
   const [hasBulkRetried, setHasBulkRetried] = useState(false)
@@ -61,7 +61,7 @@ export const RetryAllIterationsButton = ({
     }
   }, [toast, executionId, bulkRetryIterations])
 
-  if (!flags?.[BULK_RETRY_EXECUTIONS_FLAG]) {
+  if (!getFlagValue(BULK_RETRY_EXECUTIONS_FLAG, false)) {
     return null
   }
 

packages/frontend/src/components/FlowStepConfigurationModal/ChooseAppAndEvent/ChooseApp.tsx

@@ -44,7 +44,7 @@ interface ChooseAppProps {
 
 export default function ChooseApp(props: ChooseAppProps) {
   const { apps, onSelectAppEvent } = props
-  const launchDarkly = useContext(LaunchDarklyContext)
+  const { getFlagValue } = useContext(LaunchDarklyContext)
   const { patchModalState, isTrigger, isLastStep, step, prevStepId } =
     useContext(FlowStepConfigurationContext)
 
@@ -55,7 +55,7 @@ export default function ChooseApp(props: ChooseAppProps) {
   })
 
   const [_, isInitializingIfThen] = useIfThenInitializer()
-  const isLoading = launchDarkly.isLoading || isInitializingIfThen
+  const isLoading = isInitializingIfThen
 
   const [searchQuery, setSearchQuery] = useState('')
 
@@ -81,25 +81,25 @@ export default function ChooseApp(props: ChooseAppProps) {
   )
 
   const toolboxActionsToDisplay = useMemo(() => {
-    if (isLoading || !launchDarkly.flags) {
+    if (isLoading) {
       return []
     }
 
     const ldToolboxAppFlag = getAppFlag(TOOLBOX_APP_KEY)
-    if (!launchDarkly.flags[ldToolboxAppFlag]) {
+    if (!getFlagValue(ldToolboxAppFlag, false)) {
       return []
     }
 
     const toolboxActions =
       apps?.find((app) => app.key === TOOLBOX_APP_KEY)?.actions ?? []
     const filteredToolboxActions = toolboxActions.filter((action) => {
       // Filter away actions hidden behind feature flags
-      if (isLoading || !launchDarkly.flags) {
+      if (isLoading) {
         return true
       }
 
       const ldToolboxActionFlag = getAppActionFlag(TOOLBOX_APP_KEY, action.key)
-      return launchDarkly.flags[ldToolboxActionFlag] ?? true
+      return getFlagValue(ldToolboxActionFlag, true)
     })
 
     const fuzzySearchToolboxActions = fuzzysort
@@ -111,17 +111,17 @@ export default function ChooseApp(props: ChooseAppProps) {
       .map((result) => result.obj)
 
     return fuzzySearchToolboxActions
-  }, [apps, isLoading, launchDarkly.flags, searchQuery])
+  }, [apps, isLoading, getFlagValue, searchQuery])
 
   // Combine filtering and grouping logic into a single operation
   const groupedApps = useMemo(() => {
     const filteredApps = apps?.filter((app) => {
       // Filter away apps hidden behind feature flags
-      if (isLoading || !launchDarkly.flags || !app?.key) {
+      if (isLoading || !app?.key) {
         return true
       }
       const ldAppFlag = getAppFlag(app.key)
-      return launchDarkly.flags[ldAppFlag] ?? true
+      return getFlagValue(ldAppFlag, true)
     })
 
     // Note: Separate toolbox app from other apps because we filter toolbox actions separately
@@ -160,13 +160,7 @@ export default function ChooseApp(props: ChooseAppProps) {
       }
       return a[0].localeCompare(b[0])
     })
-  }, [
-    apps,
-    launchDarkly.flags,
-    isLoading,
-    searchQuery,
-    toolboxActionsToDisplay,
-  ])
+  }, [apps, getFlagValue, isLoading, searchQuery, toolboxActionsToDisplay])
 
   return (
     <>

packages/frontend/src/components/FlowStepConfigurationModal/ChooseAppAndEvent/ChooseEvent.tsx

@@ -21,15 +21,13 @@ interface ChooseEventProps {
 export default function ChooseEvent(props: ChooseEventProps): JSX.Element {
   const { onSelectAppEvent } = props
 
-  const launchDarkly = useContext(LaunchDarklyContext)
+  const { getFlagValue } = useContext(LaunchDarklyContext)
 
   const { modalState, isTrigger, patchModalState } = useContext(
     FlowStepConfigurationContext,
   )
   const { selectedApp } = modalState
 
-  const isLoading = launchDarkly.isLoading
-
   const filteredTriggersOrActions = useMemo(() => {
     if (!selectedApp) {
       return []
@@ -40,15 +38,15 @@ export default function ChooseEvent(props: ChooseEventProps): JSX.Element {
       : selectedApp.actions ?? []
     return triggersOrActions?.filter((triggerOrAction: ITrigger | IAction) => {
       // Filter away triggers or actions hidden behind feature flags
-      if (isLoading || !launchDarkly.flags || !selectedApp.key) {
+      if (!selectedApp.key) {
         return true
       }
       const launchDarklyKey = isTrigger
         ? getAppTriggerFlag(selectedApp.key, triggerOrAction.key)
         : getAppActionFlag(selectedApp.key, triggerOrAction.key)
-      return launchDarkly.flags[launchDarklyKey] ?? true
+      return getFlagValue(launchDarklyKey, true)
     })
-  }, [selectedApp, isTrigger, launchDarkly.flags, isLoading])
+  }, [selectedApp, isTrigger, getFlagValue])
 
   const onBack = useCallback(() => {
     patchModalState({

packages/frontend/src/components/FlowStepConfigurationModal/hooks/useIsAppSelectable.ts

@@ -1,7 +1,6 @@
 import { IFlow, IStep } from '@plumber/types'
 
 import { useContext } from 'react'
-import { LDFlagSet } from 'launchdarkly-js-client-sdk'
 
 import { BranchContext } from '@/components/FlowStepGroup/Content/IfThen/BranchContext'
 import { NESTED_IFTHEN_FEATURE_FLAG } from '@/config/flags'
@@ -97,18 +96,21 @@ function isIfThenSelectable({
   depth,
   hasIfThen,
   isLastStep,
-  ldFlags,
+  getFlagValue,
 }: {
   depth: number
   hasIfThen: boolean
   isLastStep: boolean
-  ldFlags: LDFlagSet | null
+  getFlagValue: (
+    flagKey: string,
+    defaultValue?: boolean | string,
+  ) => boolean | string
 }) {
   if (!isLastStep || hasIfThen) {
     return false
   }
 
-  const canUseNestedBranch = ldFlags?.[NESTED_IFTHEN_FEATURE_FLAG] ?? false
+  const canUseNestedBranch = getFlagValue(NESTED_IFTHEN_FEATURE_FLAG, false)
   if (canUseNestedBranch) {
     return true
   }
@@ -128,14 +130,14 @@ export const useIsAppSelectable = ({
 }): Record<string, boolean> => {
   const { depth } = useContext(BranchContext)
   const { flow, hasIfThen } = useContext(EditorContext)
-  const { flags: ldFlags } = useContext(LaunchDarklyContext)
+  const { getFlagValue } = useContext(LaunchDarklyContext)
 
   return {
     [TOOLBOX_ACTIONS.IfThen]: isIfThenSelectable({
       depth,
       hasIfThen,
       isLastStep,
-      ldFlags,
+      getFlagValue,
     }),
     [TOOLBOX_ACTIONS.ForEach]: isForEachSelectable({
       flow,

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

@@ -24,7 +24,7 @@ type FlowSubstepProps = {
 
 function FlowSubstep(props: FlowSubstepProps): JSX.Element {
   const { isTrigger, substep, step, selectedActionOrTrigger } = props
-  const { flags } = useContext(LaunchDarklyContext)
+  const { getFlagValue } = useContext(LaunchDarklyContext)
   const formContext = useFormContext()
   const {
     executeTestStep,
@@ -63,13 +63,14 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
   const argsToDisplay = useMemo(
     () =>
       args?.filter((arg) => {
-        if (!flags) {
-          return true
-        }
-        const flag = getInputFlag(selectedActionOrTrigger?.key ?? '', arg.key)
-        return !flags[flag] || +step.createdAt <= flags[flag]
+        const inputFlag = getInputFlag(
+          selectedActionOrTrigger?.key ?? '',
+          arg.key,
+        )
+        const flagValue = getFlagValue(inputFlag, false)
+        return !flagValue || +step.createdAt <= flagValue
       }) || [],
-    [args, flags, step.createdAt, selectedActionOrTrigger],
+    [args, step.createdAt, selectedActionOrTrigger, getFlagValue],
   )
 
   useEffect(() => {

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

@@ -17,7 +17,7 @@ import SgidLoginSection from './SgidLoginSection'
 import SsoLoginSection from './SsoLoginSection'
 
 export const LoginForm = (): JSX.Element => {
-  const { flags } = useContext(LaunchDarklyContext)
+  const { getFlagValue } = useContext(LaunchDarklyContext)
 
   const headers = useResponseHeaders()
 
@@ -55,12 +55,12 @@ export const LoginForm = (): JSX.Element => {
     }
   }
 
-  const shouldShowSgidLogin = flags?.[SGID_FEATURE_FLAG]
+  const shouldShowSgidLogin = getFlagValue(SGID_FEATURE_FLAG, false)
   // show sso login if request is from OGP office wifi or in dev
   const shouldShowSsoLogin =
     (headers[RESPONSE_HEADERS.OGP_INTERNAL_HEADER] === 'true' ||
       appConfig.isDev) &&
-    flags?.[SSO_FEATURE_FLAG]
+    getFlagValue(SSO_FEATURE_FLAG, false)
 
   return (
     <form onSubmit={handleSubmit}>

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

@@ -10,7 +10,7 @@ const SESSION_STORAGE_HIDE_BANNER_KEY = 'hide-banner'
 
 const SiteWideBanner = (): JSX.Element | null => {
   const [bannerMessage, setBannerMessage] = useState(EMPTY_BANNER_MESSAGE)
-  const launchDarkly = useContext(LaunchDarklyContext)
+  const { getFlagValue } = useContext(LaunchDarklyContext)
 
   const closeBanner = useCallback(() => {
     setBannerMessage(EMPTY_BANNER_MESSAGE)
@@ -19,19 +19,17 @@ const SiteWideBanner = (): JSX.Element | null => {
 
   // check for feature flag (takes time to load) to display banner
   useEffect(() => {
-    if (launchDarkly.flags) {
-      // message needs to be fetched everytime the page is re-rendered
-      const message = launchDarkly.flags[BANNER_TEXT_FLAG]
-      const bannerMessageStored = getItemForSession(
-        SESSION_STORAGE_HIDE_BANNER_KEY,
-      )
-      if (message !== bannerMessageStored) {
-        setBannerMessage(message)
-      } else {
-        setBannerMessage(EMPTY_BANNER_MESSAGE)
-      }
+    // message needs to be fetched everytime the page is re-rendered
+    const message = getFlagValue(BANNER_TEXT_FLAG, '')
+    const bannerMessageStored = getItemForSession(
+      SESSION_STORAGE_HIDE_BANNER_KEY,
+    )
+    if (message !== bannerMessageStored) {
+      setBannerMessage(message)
+    } else {
+      setBannerMessage(EMPTY_BANNER_MESSAGE)
     }
-  }, [launchDarkly])
+  }, [getFlagValue])
 
   if (bannerMessage === EMPTY_BANNER_MESSAGE) {
     return null