chore: allow overwriting toggles in devtools

Author: karl-run

src/devtools/InternalDevTools.tsx

@@ -9,6 +9,8 @@ import { DataService } from '../data-fetcher/data-service'
 
 import { DevToolItem } from './InternalDevToolItem'
 import { useAPIOverride } from './useAPIOverride'
+import { useFeatureToggleOverride } from './useFeatureToggleOverride'
+import { togglesChangedAction } from './InternalDevToolsAction'
 
 type Props = { onClose: () => void }
 
@@ -28,13 +30,54 @@ export function InternalDevToolsPanel({ onClose }: Props): ReactElement {
                 Collection of actions and utilities used for local development only.
             </BodyShort>
             <div className="grid grid-cols-1 gap-6 mt-6">
+                <FeatureToggles />
                 <ToggleAPIFailures />
                 <ResetSmartContext />
             </div>
         </div>
     )
 }
 
+function FeatureToggles(): ReactElement {
+    const { toggles, toggledToggles, setToggledToggles, resetOverrides } = useFeatureToggleOverride()
+
+    return (
+        <DevToolItem title="Feature toggles" description="Overwrite feature toggles">
+            <CheckboxGroup
+                legend="Enabled toggles"
+                value={toggledToggles}
+                size="small"
+                onChange={(values) => {
+                    setToggledToggles(values)
+                }}
+            >
+                {toggles.map((toggle) => (
+                    <Checkbox key={toggle.name} value={toggle.name}>
+                        {toggle.name}
+                    </Checkbox>
+                ))}
+            </CheckboxGroup>
+
+            <div className="mt-4 flex gap-3">
+                <Button variant="secondary-neutral" size="small" onClick={resetOverrides}>
+                    Clear all overrides
+                </Button>
+                <Button
+                    variant="secondary-neutral"
+                    size="small"
+                    onClick={() => {
+                        startTransition(async () => {
+                            await togglesChangedAction()
+                        })
+                    }}
+                >
+                    Apply changed toggles
+                </Button>
+            </div>
+        </DevToolItem>
+    )
+}
+
 function ResetSmartContext(): ReactElement {
     const resetSmartContext = (postAction?: 'reload' | 're-launch') => () => {
         const key = sessionStorage.getItem('SMART_KEY')

src/devtools/InternalDevToolsAction.ts

@@ -0,0 +1,7 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+
+export async function togglesChangedAction(): Promise<void> {
+    revalidatePath('/fhir')
+}

src/devtools/useFeatureToggleOverride.ts

@@ -0,0 +1,74 @@
+import { useCallback, useMemo, useState } from 'react'
+
+import { localDevelopmentToggles } from '@toggles/env'
+
+type UseFeatureToggleOverride = {
+    /**
+     * All available toggles
+     */
+    toggles: { name: string; enabled: boolean }[]
+    /**
+     * Currently selected toggles state
+     */
+    toggledToggles: string[]
+    /**
+     * Set toggles state and update cookies
+     */
+    setToggledToggles: (value: string[]) => void
+    /**
+     * Reset all overrides back to default
+     */
+    resetOverrides: () => void
+}
+
+export function useFeatureToggleOverride(): UseFeatureToggleOverride {
+    const toggles = useMemo(
+        () =>
+            localDevelopmentToggles.map((it) => ({
+                name: it.name,
+                enabled: getOverrideStatus(it.name) ?? it.enabled,
+            })),
+        [],
+    )
+
+    const [toggledToggles, setInternalToggleState] = useState<string[]>(
+        toggles.filter((it) => it.enabled).map((it) => it.name),
+    )
+
+    const setToggledToggles = useCallback(
+        (value: string[]) => {
+            const togglesToEnable = toggles.filter((it) => value.includes(it.name))
+            const togglesToDisable = toggles.filter((it) => !value.includes(it.name))
+
+            togglesToEnable.forEach((it) => {
+                document.cookie = `${it.name}=true; path=/`
+            })
+            togglesToDisable.forEach((it) => {
+                document.cookie = `${it.name}=false; path=/`
+            })
+
+            setInternalToggleState(value)
+        },
+        [toggles],
+    )
+
+    const resetOverrides = useCallback(() => {
+        toggles.forEach((it) => {
+            document.cookie = `${it.name}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`
+        })
+
+        setInternalToggleState(localDevelopmentToggles.filter((it) => it.enabled).map((it) => it.name))
+    }, [toggles])
+
+    return { toggles, toggledToggles: toggledToggles, setToggledToggles: setToggledToggles, resetOverrides }
+}
+
+function getOverrideStatus(key: string): boolean | null {
+    const currentCookieValue = document.cookie.split(';').find((cookie) => cookie.includes(key))
+
+    if (currentCookieValue == null) {
+        return null
+    }
+
+    return currentCookieValue.includes('true')
+}

src/toggles/env.ts

@@ -2,8 +2,6 @@
 
 import { IToggle } from '@unleash/nextjs'
 
-import { bundledEnv } from '@utils/env'
-
 import { ExpectedToggles } from './toggles'
 
 const on: Omit<IToggle, 'name'> = {
@@ -33,13 +31,4 @@ const devToggles: Record<ExpectedToggles, IToggle> = {
     },
 }
 
-export function localDevelopmentToggles(): IToggle[] {
-    return Object.values(devToggles)
-}
-
-export function getUnleashEnvironment(): 'development' | 'production' {
-    if (bundledEnv.NEXT_PUBLIC_RUNTIME_ENV === 'prod-gcp') {
-        return 'production'
-    }
-    return 'development'
-}
+export const localDevelopmentToggles: IToggle[] = Object.values(devToggles)

src/toggles/unleash.ts

@@ -5,15 +5,17 @@ import { cookies } from 'next/headers'
 import NodeCache from 'node-cache'
 import { connection } from 'next/server'
 
-import { isE2E, isLocalOrDemo } from '@utils/env'
+import { bundledEnv, isE2E, isLocalOrDemo } from '@utils/env'
 import { raise } from '@utils/ts'
 
-import { getUnleashEnvironment, localDevelopmentToggles } from './env'
+import { localDevelopmentToggles } from './env'
 import { EXPECTED_TOGGLES, ExpectedToggles, Toggle, Toggles } from './toggles'
 import { UNLEASH_COOKIE_NAME } from './cookie'
 
 const logger = pinoLogger.child({}, { msgPrefix: '[UNLEASH-TOGGLES] ' })
 
+const unleashEnvironment = bundledEnv.NEXT_PUBLIC_RUNTIME_ENV === 'prod-gcp' ? 'production' : 'development'
+
 export async function getToggles(): Promise<Toggles> {
     await connection()
 
@@ -23,19 +25,23 @@ export async function getToggles(): Promise<Toggles> {
     }
 
     if (isLocalOrDemo || isE2E) {
-        const devToggles = localDevelopmentToggles()
         logger.warn(
-            `Running in local or demo mode, falling back to development toggles, current toggles: \n${devToggles.map((it) => `\t${it.name}: ${it.enabled}`).join('\n')}`,
+            `Running in local or demo mode, falling back to development toggles, current toggles: \n${localDevelopmentToggles.map((it) => `\t${it.name}: ${it.enabled}`).join('\n')}`,
         )
-        return devToggles
+
+        const cookieStore = await cookies()
+        return localDevelopmentToggles.map((it) => ({
+            ...it,
+            enabled: cookieStore.get(it.name)?.value.includes('true') ?? it.enabled,
+        }))
     }
 
     try {
         const sessionId = await getUnleashSessionId()
         const definitions = await getAndValidateDefinitions()
         const evaluatedFlags = evaluateFlags(definitions, {
             sessionId,
-            environment: getUnleashEnvironment(),
+            environment: unleashEnvironment,
         })
         return evaluatedFlags.toggles
     } catch (e) {