refactor(webapp): expose startup feature toggle checker via RootContext (#20587)

Inject isFeatureToggleEnabled directly into RootProvider context value

Author: screendriver

apps/webapp/src/script/page/AppMain.tsx

@@ -67,7 +67,7 @@ import {ContentState, useAppState} from './useAppState';
 import {runClientVersionCheck} from '../application-periodic-checks/runClientVersionCheck';
 import {startApplicationPeriodicChecks} from '../application-periodic-checks/startApplicationPeriodicChecks';
 import {createWallClock} from '../clock/wallClock';
-import {StartupFeatureToggleName, StartupFeatureToggles} from '../featureToggles/startupFeatureToggles';
+import {StartupFeatureToggles} from '../featureToggles/startupFeatureToggles';
 import {App} from '../main/app';
 import {initialiseMLSMigrationFlow} from '../mls/MLSMigration';
 import {generateConversationUrl} from '../router/routeGenerator';
@@ -302,10 +302,6 @@ export const AppMain = ({
 
   const showLeftSidebar = (isMobileView && isMobileLeftSidebarView) || (!isMobileView && !isLeftSidebarHidden);
   const showMainContent = currentTab === SidebarTabs.CELLS || !isMobileView || isMobileCentralColumnView;
-  function isFeatureFlagEnabled(featureName: StartupFeatureToggleName): boolean {
-    return startupFeatureToggles.isFeatureToggleEnabled(featureName);
-  }
-
   return (
     <StyledApp
       themeId={THEME_ID.DEFAULT}
@@ -315,7 +311,14 @@ export const AppMain = ({
       data-uie-value="is-loaded"
     >
       {!locked && <WindowTitleUpdater />}
-      <RootProvider value={{mainViewModel: mainView, wallClock, doesApplicationNeedForceReload, isFeatureFlagEnabled}}>
+      <RootProvider
+        value={{
+          mainViewModel: mainView,
+          wallClock,
+          doesApplicationNeedForceReload,
+          isFeatureToggleEnabled: startupFeatureToggles.isFeatureToggleEnabled,
+        }}
+      >
         <ErrorBoundary FallbackComponent={ErrorFallback}>
           <ForceReloadModal reloadApplication={app.refresh} />
           {Config.getConfig().FEATURE.ENABLE_DEBUG && <ConfigToolbar />}

apps/webapp/src/script/page/MainContent/MainContent.test.tsx

@@ -46,7 +46,7 @@ const mockDevicesHandler = {
   currentDeviceId: () => 'mock-device-id',
 } as unknown as MediaDevicesHandler;
 
-function isFeatureFlagDisabledForTest(): boolean {
+function isFeatureToggleDisabledForTest(): boolean {
   return false;
 }
 
@@ -79,7 +79,7 @@ describe('Preferences', () => {
             mainViewModel,
             wallClock,
             doesApplicationNeedForceReload: false,
-            isFeatureFlagEnabled: isFeatureFlagDisabledForTest,
+            isFeatureToggleEnabled: isFeatureToggleDisabledForTest,
           }}
         >
           <MainContent {...defaultParams} />

apps/webapp/src/script/page/RootProvider.test.tsx

@@ -38,7 +38,7 @@ interface WrapperProperties {
 
 interface RootProviderWrapper {
   wrapper: (properties: WrapperProperties) => ReactNode;
-  isFeatureFlagEnabled: jest.Mock<boolean, [StartupFeatureToggleName]>;
+  isFeatureToggleEnabled: jest.Mock<boolean, [StartupFeatureToggleName]>;
   deterministicWallClock: ReturnType<typeof createDeterministicWallClock>;
 }
 
@@ -50,23 +50,30 @@ function createRootProviderWrapper(
   const deterministicWallClock = createDeterministicWallClock({
     initialCurrentTimestampInMilliseconds: wallClockTimestampInMilliseconds,
   });
-  function isFeatureFlagEnabledForTest(featureName: StartupFeatureToggleName): boolean {
+  function isFeatureToggleEnabledForTest(featureName: StartupFeatureToggleName): boolean {
     return featureName === 'reliable-websocket-connection';
   }
 
-  const isFeatureFlagEnabled = jest.fn(isFeatureFlagEnabledForTest);
+  const isFeatureToggleEnabled = jest.fn(isFeatureToggleEnabledForTest);
 
   function wrapper(properties: WrapperProperties): ReactNode {
     const wrappedChildren = (
-      <RootProvider value={{mainViewModel, wallClock: deterministicWallClock, doesApplicationNeedForceReload, isFeatureFlagEnabled}}>
+      <RootProvider
+        value={{
+          mainViewModel,
+          wallClock: deterministicWallClock,
+          doesApplicationNeedForceReload,
+          isFeatureToggleEnabled,
+        }}
+      >
         {properties.children}
       </RootProvider>
     );
 
     return wrappedChildren;
   }
 
-  return {wrapper, deterministicWallClock, isFeatureFlagEnabled};
+  return {wrapper, deterministicWallClock, isFeatureToggleEnabled};
 }
 
 function getRootContextValue(): RootContextValue | null {
@@ -114,12 +121,12 @@ describe('RootProvider', () => {
     expect(result.current.doesApplicationNeedForceReload).toBe(true);
   });
 
-  it('provides startup feature flag helper through useApplicationContext()', function () {
-    const {wrapper, isFeatureFlagEnabled} = createRootProviderWrapper(mainViewModel, 9_999, true);
+  it('provides startup feature toggle helper through useApplicationContext()', function () {
+    const {wrapper, isFeatureToggleEnabled} = createRootProviderWrapper(mainViewModel, 9_999, true);
 
     const {result} = renderHook(useApplicationContext, {wrapper});
 
-    expect(result.current.isFeatureFlagEnabled('reliable-websocket-connection')).toBe(true);
-    expect(isFeatureFlagEnabled).toHaveBeenCalledWith('reliable-websocket-connection');
+    expect(result.current.isFeatureToggleEnabled('reliable-websocket-connection')).toBe(true);
+    expect(isFeatureToggleEnabled).toHaveBeenCalledWith('reliable-websocket-connection');
   });
 });

apps/webapp/src/script/page/RootProvider.tsx

@@ -27,7 +27,7 @@ export type RootContextValue = {
   readonly mainViewModel: MainViewModel;
   readonly wallClock: WallClock;
   readonly doesApplicationNeedForceReload: boolean;
-  readonly isFeatureFlagEnabled: (featureName: StartupFeatureToggleName) => boolean;
+  readonly isFeatureToggleEnabled: (featureName: StartupFeatureToggleName) => boolean;
 };
 
 export const RootContext = createContext<RootContextValue | null>(null);

apps/webapp/src/script/page/components/ForceReloadModal/ForceReloadModal.test.tsx

@@ -37,7 +37,7 @@ interface ForceReloadModalTestContextValue {
   readonly wallClock?: DeterministicWallClock;
 }
 
-function isFeatureFlagDisabledForTest(): boolean {
+function isFeatureToggleDisabledForTest(): boolean {
   return false;
 }
 
@@ -78,7 +78,7 @@ function createForceReloadModalTestElement(
     <RootProvider
       value={{
         doesApplicationNeedForceReload,
-        isFeatureFlagEnabled: isFeatureFlagDisabledForTest,
+        isFeatureToggleEnabled: isFeatureToggleDisabledForTest,
         mainViewModel: createMainViewModelForTest(),
         wallClock,
       }}