VIDSOL-211-adding granular config context

- using granular context for app configuration... avoid re-renders and isolate logic

- adding reusable provider wrappers for unit test

- removing a bunch of mocks in our unit test... mocking our own code downgrades the quality of the test

Author: johnny-quesada-developer

frontend/package.json

@@ -37,15 +37,18 @@
     "autolinker": "^4.0.0",
     "autoprefixer": "^10.4.19",
     "axios": "^1.12.0",
+    "classnames": "^2.5.1",
     "events": "^3.3.0",
     "i18next": "^25.3.2",
     "i18next-browser-languagedetector": "^8.2.0",
+    "json-storage-formatter": "^2.0.9",
     "lodash": "^4.17.21",
     "opentok-layout-js": "^5.4.0",
     "opentok-solutions-logging": "^1.1.5",
     "postcss": "^8.4.38",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-global-state-hooks": "^10.3.0",
     "react-i18next": "^15.6.1",
     "react-router-dom": "^6.11.0",
     "resize-observer-polyfill": "^1.5.1",

frontend/src/App.spec.tsx

@@ -10,31 +10,9 @@ vi.mock('./pages/UnsupportedBrowserPage', () => ({
   default: () => <div>Unsupported Browser</div>,
 }));
 
-// Mock context providers and wrappers
-vi.mock('./Context/PreviewPublisherProvider', () => ({
-  __esModule: true,
-  PreviewPublisherProvider: ({ children }: PropsWithChildren) => children,
-  default: ({ children }: PropsWithChildren) => children,
-}));
-vi.mock('./Context/PublisherProvider', () => ({
-  __esModule: true,
-  PublisherProvider: ({ children }: PropsWithChildren) => children,
-  default: ({ children }: PropsWithChildren) => children,
-}));
-vi.mock('./Context/SessionProvider/session', () => ({
-  default: ({ children }: PropsWithChildren) => children,
-}));
 vi.mock('./components/RedirectToWaitingRoom', () => ({
   default: ({ children }: PropsWithChildren) => children,
 }));
-vi.mock('./Context/RoomContext', () => ({
-  default: ({ children }: PropsWithChildren) => children,
-}));
-vi.mock('./Context/ConfigProvider', () => ({
-  __esModule: true,
-  ConfigContextProvider: ({ children }: PropsWithChildren) => children,
-  default: ({ children }: PropsWithChildren) => children,
-}));
 
 describe('App routing', () => {
   it('renders LandingPage on unknown route', () => {

frontend/src/Context/AppConfig/AppConfigContext.spec.tsx

@@ -0,0 +1,132 @@
+import { describe, expect, it, vi } from 'vitest';
+import { act, renderHook as renderHookBase, waitFor } from '@testing-library/react';
+import useAppConfigContext, { AppConfig, AppConfigProvider } from '@Context/AppConfig';
+import defaultAppConfig from './helpers/defaultAppConfig';
+
+describe('AppConfigContext', () => {
+  it('returns the default config when no config.json is loaded', async () => {
+    const { result } = renderHook(() => useAppConfigContext()[0]);
+
+    await waitFor(() => {
+      expect(result.current).toEqual(expect.objectContaining(defaultAppConfig));
+    });
+  });
+
+  it('merges config.json values if loaded (mocked fetch)', async () => {
+    expect.assertions(2);
+
+    // All values in this config should override the defaultConfig
+    const mockConfig: AppConfig = {
+      isAppConfigLoaded: true,
+      videoSettings: {
+        allowCameraControl: false,
+        defaultResolution: '640x480',
+        allowVideoOnJoin: false,
+        allowBackgroundEffects: false,
+      },
+      audioSettings: {
+        allowAdvancedNoiseSuppression: false,
+        allowAudioOnJoin: false,
+        allowMicrophoneControl: false,
+      },
+      waitingRoomSettings: {
+        allowDeviceSelection: false,
+      },
+      meetingRoomSettings: {
+        allowArchiving: false,
+        allowCaptions: false,
+        allowChat: false,
+        allowDeviceSelection: false,
+        allowEmojis: false,
+        allowScreenShare: false,
+        defaultLayoutMode: 'grid',
+        showParticipantList: false,
+      },
+    };
+
+    vi.spyOn(global, 'fetch').mockResolvedValue({
+      json: async () => mockConfig,
+      headers: {
+        get: () => 'application/json',
+      },
+    } as unknown as Response);
+
+    const { result } = renderHook(() => useAppConfigContext());
+    let [appConfig, { loadAppConfig }] = result.current;
+
+    expect(appConfig).not.toEqual(mockConfig);
+
+    await loadAppConfig();
+
+    [appConfig, { loadAppConfig }] = result.current;
+
+    expect(appConfig).toEqual({
+      ...mockConfig,
+      isAppConfigLoaded: true,
+    });
+  });
+
+  it('falls back to defaultConfig if fetch fails', async () => {
+    expect.assertions(4);
+
+    const mockFetchError = new Error('mocking a failure to fetch');
+
+    vi.spyOn(global, 'fetch').mockRejectedValue(mockFetchError as unknown as Response);
+
+    const { result, rerender } = renderHook(() => useAppConfigContext());
+    let [appConfig, { loadAppConfig }] = result.current;
+
+    expect(appConfig.isAppConfigLoaded).toBe(false);
+    expect(loadAppConfig()).rejects.toThrow('mocking a failure to fetch');
+
+    await act(() => {
+      rerender();
+    });
+
+    [appConfig, { loadAppConfig }] = result.current;
+
+    expect(appConfig.isAppConfigLoaded).toBe(true);
+
+    expect(appConfig).toEqual({
+      ...defaultAppConfig,
+      isAppConfigLoaded: true,
+    });
+  });
+
+  it('falls back to defaultConfig if no config.json is found', async () => {
+    expect.assertions(4);
+
+    vi.spyOn(global, 'fetch').mockResolvedValue({
+      ok: false,
+      status: 404,
+      statusText: 'Not Found',
+      headers: {
+        get: () => 'text/html',
+      },
+    } as unknown as Response);
+
+    const { result, rerender } = renderHook(() => useAppConfigContext());
+    let [appConfig, { loadAppConfig }] = result.current;
+
+    expect(appConfig).toEqual(defaultAppConfig);
+
+    expect(loadAppConfig()).rejects.toThrow('No valid JSON found, using default config');
+
+    await act(() => {
+      rerender();
+    });
+
+    [appConfig, { loadAppConfig }] = result.current;
+
+    expect(appConfig.isAppConfigLoaded).toBe(true);
+
+    expect(appConfig).toEqual({
+      ...defaultAppConfig,
+      isAppConfigLoaded: true,
+    });
+  });
+});
+
+function renderHook<Result, Props>(render: (initialProps: Props) => Result) {
+  return renderHookBase(render, { wrapper: AppConfigProvider });
+}

frontend/src/Context/AppConfig/AppConfigContext.ts

@@ -0,0 +1,54 @@
+import createContext, { type InferContextType } from 'react-global-state-hooks/createContext';
+import updateAppConfig from './actions/updateAppConfig';
+import loadAppConfig from './actions/loadAppConfig';
+import initialValue from './helpers/defaultAppConfig';
+
+const [useHook, provider, context] = createContext(initialValue, {
+  actions: {
+    updateAppConfig,
+    loadAppConfig,
+  },
+});
+
+const [useControls] = useHook.stateControls();
+
+/**
+ * The AppConfig context instance.
+ */
+export const AppConfigContext = context;
+
+/**
+ * Provider component that makes the config available across the app.
+ * @param props - The component props.
+ * @param props.value - (optional) Initial value override for the AppConfig state.
+ * @param props.onCreated - (optional) Callback invoked when the provider is created, receives the context as argument.
+ * @returns The AppConfig provider component.
+ */
+export const AppConfigProvider = provider;
+
+/**
+ * Hook to access the AppConfig state with a selector.
+ * @param {Function} selector - (optional) Function to select a part of the AppConfig state.
+ * @param {unknown[]} [dependencies] - Optional dependencies array to control re-selection.
+ * @returns {[Selection, AppConfigActions]} If selector is provided, returns [selected state, actions], otherwise returns [entire state, actions].
+ */
+export const useAppConfigContext = useHook;
+
+/**
+ * Hook to access non-reactive AppConfig state and actions.
+ * Useful for handlers that don't need to re-render on state changes.
+ * @returns [getter, actions] The AppConfig state getter and actions.
+ */
+export const useAppConfigControls = useControls;
+
+/**
+ * The AppConfig context type.
+ * Represents the shape of the context including state and actions.
+ */
+export type AppConfigContextType = InferContextType<typeof provider>;
+
+/**
+ * The AppConfig actions type.
+ * Represents the available actions to modify or interact with the state.
+ */
+export type AppConfigActions = AppConfigContextType['actions'];

frontend/src/Context/AppConfig/AppConfigContext.types.ts

@@ -0,0 +1,48 @@
+import type { LayoutMode } from '@app-types/session';
+
+export type VideoSettings = {
+  allowBackgroundEffects: boolean;
+  allowCameraControl: boolean;
+  allowVideoOnJoin: boolean;
+  defaultResolution:
+    | '1920x1080'
+    | '1280x960'
+    | '1280x720'
+    | '640x480'
+    | '640x360'
+    | '320x240'
+    | '320x180';
+};
+
+export type AudioSettings = {
+  allowAdvancedNoiseSuppression: boolean;
+  allowAudioOnJoin: boolean;
+  allowMicrophoneControl: boolean;
+};
+
+export type WaitingRoomSettings = {
+  allowDeviceSelection: boolean;
+};
+
+export type MeetingRoomSettings = {
+  allowArchiving: boolean;
+  allowCaptions: boolean;
+  allowChat: boolean;
+  allowDeviceSelection: boolean;
+  allowEmojis: boolean;
+  allowScreenShare: boolean;
+  defaultLayoutMode: LayoutMode;
+  showParticipantList: boolean;
+};
+
+export type AppConfig = {
+  isAppConfigLoaded: boolean;
+
+  videoSettings: VideoSettings;
+
+  audioSettings: AudioSettings;
+
+  waitingRoomSettings: WaitingRoomSettings;
+
+  meetingRoomSettings: MeetingRoomSettings;
+};

frontend/src/Context/AppConfig/actions/loadAppConfig.ts

@@ -0,0 +1,35 @@
+import type { AppConfig } from '../AppConfigContext.types';
+
+export type AppConfigActions = import('../AppConfigContext').AppConfigActions;
+export type AppConfigContext = import('../AppConfigContext').AppConfigContextType;
+
+/**
+ * Loads the application configuration from public/config.json file.
+ * If the fetch fails or the content is invalid, it falls back to the default configuration.
+ * Finally, it marks the app config as loaded.
+ * @returns {Function} The thunk action to load the app config.
+ */
+function loadAppConfig(this: AppConfigActions) {
+  return async (_: AppConfigContext) => {
+    try {
+      const response = await fetch('/config.json', {
+        cache: 'no-cache',
+      });
+
+      const contentType = response.headers.get('content-type');
+      if (!contentType || !contentType.includes('application/json')) {
+        throw new Error('No valid JSON found, using default config');
+      }
+
+      const json: Partial<AppConfig> = await response.json();
+
+      this.updateAppConfig(json);
+    } finally {
+      this.updateAppConfig({
+        isAppConfigLoaded: true,
+      });
+    }
+  };
+}
+
+export default loadAppConfig;

frontend/src/Context/AppConfig/actions/updateAppConfig.ts

@@ -0,0 +1,19 @@
+import type { DeepPartial } from '@app-types/index';
+import type { AppConfig } from '../AppConfigContext.types';
+import mergeAppConfigs from '../helpers/mergeAppConfigs';
+
+export type AppConfigActions = import('../AppConfigContext').AppConfigActions;
+export type AppConfigContext = import('../AppConfigContext').AppConfigContextType;
+
+/**
+ * Partially updates the app config state
+ * @param {DeepPartial<AppConfig>} updates - Partial updates to apply to the app config state.
+ * @returns {Function} A function that updates the app config state.
+ */
+function updateAppConfig(this: AppConfigActions, updates: DeepPartial<AppConfig>) {
+  return ({ setState }: AppConfigContext) => {
+    setState((previous) => mergeAppConfigs({ previous, updates }));
+  };
+}
+
+export default updateAppConfig;

frontend/src/Context/AppConfig/helpers/defaultAppConfig.ts

@@ -0,0 +1,35 @@
+import { AppConfig } from '../AppConfigContext.types';
+
+const defaultAppConfig: AppConfig = {
+  isAppConfigLoaded: false,
+
+  videoSettings: {
+    allowBackgroundEffects: true,
+    allowCameraControl: true,
+    allowVideoOnJoin: true,
+    defaultResolution: '1280x720',
+  },
+
+  audioSettings: {
+    allowAdvancedNoiseSuppression: true,
+    allowAudioOnJoin: true,
+    allowMicrophoneControl: true,
+  },
+
+  waitingRoomSettings: {
+    allowDeviceSelection: true,
+  },
+
+  meetingRoomSettings: {
+    allowArchiving: true,
+    allowCaptions: true,
+    allowChat: true,
+    allowDeviceSelection: true,
+    allowEmojis: true,
+    allowScreenShare: true,
+    defaultLayoutMode: 'active-speaker',
+    showParticipantList: true,
+  },
+};
+
+export default defaultAppConfig;