Live Configurations (#782)

* Create getLiveConfig request

* Created LiveConfigAppProvider component

* Added Live Configs in apps

* Remove automatic Drive App deploy

* Created Checkbox component

* Created TextField component

* Added interactive overlay and label to the Checkbox component

* Added description in the live config interface

* Added theme handling with Live Configs

* Added a no cache URL param in the API request

* Added additionalTasks in CaptureAppConfig

* Fix conflicts

apps/demo-app/.env-cmdrc.json

@@ -4,7 +4,8 @@
     "HTTPS": "true",
     "ESLINT_NO_DEV_ERRORS": "true",
     "REACT_APP_ENVIRONMENT": "local",
-    "REACT_APP_API_DOMAIN": "api.preview.monk.ai/v1",
+    "REACT_APP_LIVE_CONFIG_ID": "demo-app-development",
+    "REACT_APP_USE_LOCAL_CONFIG": "true",
     "REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
     "REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
     "REACT_APP_AUTH_CLIENT_ID": "O7geYcPM6zEJrHw0WvQVzSIzw4WzrAtH",
@@ -14,7 +15,7 @@
   },
   "development": {
     "REACT_APP_ENVIRONMENT": "development",
-    "REACT_APP_API_DOMAIN": "api.preview.monk.ai/v1",
+    "REACT_APP_LIVE_CONFIG_ID": "demo-app-development",
     "REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
     "REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
     "REACT_APP_AUTH_CLIENT_ID": "O7geYcPM6zEJrHw0WvQVzSIzw4WzrAtH",
@@ -23,7 +24,7 @@
   },
   "staging": {
     "REACT_APP_ENVIRONMENT": "staging",
-    "REACT_APP_API_DOMAIN": "api.preview.monk.ai/v1",
+    "REACT_APP_LIVE_CONFIG_ID": "demo-app-staging",
     "REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
     "REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
     "REACT_APP_AUTH_CLIENT_ID": "O7geYcPM6zEJrHw0WvQVzSIzw4WzrAtH",
@@ -32,7 +33,7 @@
   },
   "preview": {
     "REACT_APP_ENVIRONMENT": "preview",
-    "REACT_APP_API_DOMAIN": "api.preview.monk.ai/v1",
+    "REACT_APP_LIVE_CONFIG_ID": "demo-app-preview",
     "REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
     "REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
     "REACT_APP_AUTH_CLIENT_ID": "O7geYcPM6zEJrHw0WvQVzSIzw4WzrAtH",
@@ -41,7 +42,7 @@
   },
   "backend-staging-qa": {
     "REACT_APP_ENVIRONMENT": "backend-staging-qa",
-    "REACT_APP_API_DOMAIN": "api.staging.monk.ai/v1",
+    "REACT_APP_LIVE_CONFIG_ID": "demo-app-backend-staging-qa",
     "REACT_APP_AUTH_DOMAIN": "idp.staging.monk.ai",
     "REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
     "REACT_APP_AUTH_CLIENT_ID": "DAeZWqeeOfgItYBcQzFeFwSrlvmUdN7L",

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

@@ -1,25 +1,32 @@
 import { Outlet, useNavigate } from 'react-router-dom';
-import { MonkAppStateProvider, MonkProvider, useMonkTheme } from '@monkvision/common';
+import { getEnvOrThrow, MonkProvider } from '@monkvision/common';
 import { useTranslation } from 'react-i18next';
+import { LiveConfigAppProvider } from '@monkvision/common-ui-web';
+import { CaptureAppConfig } from '@monkvision/types';
 import { Page } from '../pages';
-import { AppConfig } from '../config';
+import * as config from '../local-config.json';
+import { AppContainer } from './AppContainer';
+
+const localConfig =
+  process.env['REACT_APP_USE_LOCAL_CONFIG'] === 'true' ? (config as CaptureAppConfig) : undefined;
 
 export function App() {
   const navigate = useNavigate();
   const { i18n } = useTranslation();
-  const { rootStyles } = useMonkTheme();
 
   return (
-    <MonkAppStateProvider
-      config={AppConfig}
+    <LiveConfigAppProvider
+      id={getEnvOrThrow('REACT_APP_LIVE_CONFIG_ID')}
+      localConfig={localConfig}
       onFetchAuthToken={() => navigate(Page.CREATE_INSPECTION)}
       onFetchLanguage={(lang) => i18n.changeLanguage(lang)}
+      lang={i18n.language}
     >
       <MonkProvider>
-        <div className='app-container' style={rootStyles}>
+        <AppContainer>
           <Outlet />
-        </div>
+        </AppContainer>
       </MonkProvider>
-    </MonkAppStateProvider>
+    </LiveConfigAppProvider>
   );
 }

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

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react';
+import { MonkThemeProvider, useMonkAppState, useMonkTheme } from '@monkvision/common';
+
+function RootStylesContainer({ children }: PropsWithChildren<unknown>) {
+  const { rootStyles } = useMonkTheme();
+
+  return (
+    <div className='app-container' style={rootStyles}>
+      {children}
+    </div>
+  );
+}
+
+export function AppContainer({ children }: PropsWithChildren<unknown>) {
+  const { config } = useMonkAppState();
+
+  return (
+    <MonkThemeProvider palette={config.palette}>
+      <RootStylesContainer>{children}</RootStylesContainer>
+    </MonkThemeProvider>
+  );
+}

apps/demo-app/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './App';
 export * from './AppRouter';
+export * from './AppContainer';

apps/demo-app/src/index.tsx

@@ -2,7 +2,7 @@ import ReactDOM from 'react-dom';
 import { MonitoringProvider } from '@monkvision/monitoring';
 import { AnalyticsProvider } from '@monkvision/analytics';
 import { Auth0Provider } from '@auth0/auth0-react';
-import { getEnvOrThrow, MonkThemeProvider } from '@monkvision/common';
+import { getEnvOrThrow } from '@monkvision/common';
 import { sentryMonitoringAdapter } from './sentry';
 import { posthogAnalyticsAdapter } from './posthog';
 import { AppRouter } from './components';
@@ -21,9 +21,7 @@ ReactDOM.render(
           prompt: 'login',
         }}
       >
-        <MonkThemeProvider>
-          <AppRouter />
-        </MonkThemeProvider>
+        <AppRouter />
       </Auth0Provider>
     </AnalyticsProvider>
   </MonitoringProvider>,