Added multi live config through URL param ('lc' for LiveConfig) (#959)

Author: dlymonkai

apps/demo-app/src/components/App.tsx

@@ -1,5 +1,10 @@
 import { Outlet, useNavigate } from 'react-router-dom';
-import { getEnvOrThrow, MonkProvider } from '@monkvision/common';
+import {
+  getEnvOrThrow,
+  MonkProvider,
+  MonkSearchParam,
+  useMonkSearchParams,
+} from '@monkvision/common';
 import { useTranslation } from 'react-i18next';
 import { LiveConfigAppProvider } from '@monkvision/common-ui-web';
 import { LiveConfig } from '@monkvision/types';
@@ -17,10 +22,14 @@ const localConfig =
 export function App() {
   const navigate = useNavigate();
   const { i18n } = useTranslation();
+  const monkSearchParams = useMonkSearchParams();
 
   return (
     <LiveConfigAppProvider
-      id={getEnvOrThrow('REACT_APP_LIVE_CONFIG_ID')}
+      id={
+        monkSearchParams.get(MonkSearchParam.LIVE_CONFIG) ??
+        getEnvOrThrow('REACT_APP_LIVE_CONFIG_ID')
+      }
       localConfig={localConfig}
       apiDomain={getAuthConfig(authConfigs)?.apiDomain}
       thumbnailDomain={getAuthConfig(authConfigs)?.thumbnailDomain}

packages/common/src/apps/searchParams.ts

@@ -53,6 +53,10 @@ export enum MonkSearchParam {
    * Search parameter used to specify the Auth0 Client ID.
    */
   CLIENT_ID = 'c',
+  /**
+   * Search parameter used to specify the live configuration to use.
+   */
+  LIVE_CONFIG = 'lc',
 }
 
 /**
@@ -65,6 +69,7 @@ export type MonkSearchParamsGetter = {
   (param: MonkSearchParam.STEERING_WHEEL): SteeringWheelPosition | null;
   (param: MonkSearchParam.LANGUAGE): MonkLanguage | null;
   (param: MonkSearchParam.CLIENT_ID): string | null;
+  (param: MonkSearchParam.LIVE_CONFIG): string | null;
 };
 
 function validateParamValue<T extends string>(
@@ -115,6 +120,8 @@ export function useMonkSearchParams({ availableVehicleTypes }: UseMonkSearchPara
           return validateParamValue(value, monkLanguages);
         case MonkSearchParam.CLIENT_ID:
           return value;
+        case MonkSearchParam.LIVE_CONFIG:
+          return value;
         default:
           return null;
       }

packages/common/test/apps/searchParams.test.ts

@@ -180,5 +180,23 @@ describe('MonkSearchParams utils', () => {
 
       unmount();
     });
+
+    it('should return a null live config ID if it is not found in the search params', () => {
+      const { result, unmount } = renderHook(useMonkSearchParams);
+
+      expect(result.current.get(MonkSearchParam.LIVE_CONFIG)).toBeNull();
+
+      unmount();
+    });
+
+    it('should return the live config ID if it is found in the search params', () => {
+      const liveConfigId = 'test-id-test';
+      mockSearchParams({ [MonkSearchParam.LIVE_CONFIG]: liveConfigId });
+      const { result, unmount } = renderHook(useMonkSearchParams);
+
+      expect(result.current.get(MonkSearchParam.LIVE_CONFIG)).toEqual(liveConfigId);
+
+      unmount();
+    });
   });
 });