feat: DH-19307: External theme support (#2425)

DH-19307: External theme support via `postMessage` apis
- Moved common MessageUtils into @deephaven/utils
- External themes can be enabled by setting `theme=[EXTERNAL_THEME_KEY]`
query string param
- ThemeBootstrap now checks if external themes are enabled. If so, the
theme is requested from the parent Window via `MSG_REQUEST_GET_THEME`
postMessage
- Current or parent Window can explicitly set external theme via
`MSG_REQUEST_SET_THEME` postMessage

### Testing
You can download this html file:
https://gist.github.com/bmingles/02451e09d218cdbe61d8c506e556562b . You
should be able to open it in browser from local filesystem, no need for
server.
1. Start DH locally in this branch (assumes port 4000)
1. Open the html file
1. Initial load should show red background color showing DH requesting
theme from the parent
1. Clicking the "Update Theme" button in bottom left should change to
random bg color. Demonstrates explicit setting of theme from parent
Window

Author: bmingles

package-lock.json

@@ -1,5 +1,6 @@
 import { useBroadcastChannel } from '@deephaven/jsapi-components';
-import { BROADCAST_LOGIN_MESSAGE, makeMessage } from '@deephaven/jsapi-utils';
+import { BROADCAST_LOGIN_MESSAGE } from '@deephaven/jsapi-utils';
+import { makeMessage } from '@deephaven/utils';
 import { useEffect } from 'react';
 
 /**

packages/app-utils/src/components/LoginNotifier.tsx

@@ -1,32 +1,30 @@
-import { useContext, useMemo } from 'react';
+import { useContext } from 'react';
 import { ChartThemeProvider } from '@deephaven/chart';
 import { MonacoThemeProvider } from '@deephaven/console';
-import { ThemeProvider } from '@deephaven/components';
+import { isExternalThemeEnabled, ThemeProvider } from '@deephaven/components';
+import { useAppSelector } from '@deephaven/dashboard';
 import { IrisGridThemeProvider } from '@deephaven/iris-grid';
-import { getThemeDataFromPlugins, PluginsContext } from '@deephaven/plugin';
+import { PluginsContext, useCustomThemes } from '@deephaven/plugin';
 import { getSettings } from '@deephaven/redux';
-import { useAppSelector } from '@deephaven/dashboard';
 
 export interface ThemeBootstrapProps {
   children: React.ReactNode;
 }
 
-export function ThemeBootstrap({ children }: ThemeBootstrapProps): JSX.Element {
+export function ThemeBootstrap({
+  children,
+}: ThemeBootstrapProps): JSX.Element | null {
+  const settings = useAppSelector(getSettings);
+
   // The `usePlugins` hook throws if the context value is null. Since this is
   // the state while plugins load asynchronously, we are using `useContext`
   // directly to avoid the exception.
   const pluginModules = useContext(PluginsContext);
-
-  const themes = useMemo(
-    () =>
-      pluginModules == null ? null : getThemeDataFromPlugins(pluginModules),
-    [pluginModules]
-  );
-
-  const settings = useAppSelector(getSettings);
+  const themes = useCustomThemes(pluginModules);
+  const waitForActivation = isExternalThemeEnabled();
 
   return (
-    <ThemeProvider themes={themes}>
+    <ThemeProvider themes={themes} waitForActivation={waitForActivation}>
       <ChartThemeProvider>
         <MonacoThemeProvider>
           <IrisGridThemeProvider density={settings.gridDensity}>

packages/app-utils/src/components/ThemeBootstrap.tsx

@@ -11,6 +11,9 @@ let mockParentResponse: Promise<LoginOptions>;
 jest.mock('@deephaven/jsapi-utils', () => ({
   ...jest.requireActual('@deephaven/jsapi-utils'),
   LOGIN_OPTIONS_REQUEST: 'mock-login-options-request',
+}));
+jest.mock('@deephaven/utils', () => ({
+  ...jest.requireActual('@deephaven/utils'),
   requestParentResponse: jest.fn(() => mockParentResponse),
 }));
 

packages/auth-plugins/src/AuthPluginParent.test.tsx

@@ -1,11 +1,8 @@
 import React from 'react';
 import type { dh } from '@deephaven/jsapi-types';
-import {
-  getWindowParent,
-  LOGIN_OPTIONS_REQUEST,
-  requestParentResponse,
-} from '@deephaven/jsapi-utils';
+import { LOGIN_OPTIONS_REQUEST } from '@deephaven/jsapi-utils';
 import Log from '@deephaven/log';
+import { getWindowParent, requestParentResponse } from '@deephaven/utils';
 import { type AuthPlugin, type AuthPluginProps } from './AuthPlugin';
 import AuthPluginBase from './AuthPluginBase';
 import {

packages/auth-plugins/src/AuthPluginParent.tsx

@@ -29,10 +29,10 @@ import { type ServerConfigValues, type User, store } from '@deephaven/redux';
 import {
   BROADCAST_CHANNEL_NAME,
   BROADCAST_LOGOUT_MESSAGE,
-  makeMessage,
 } from '@deephaven/jsapi-utils';
 import { type PluginModuleMap } from '@deephaven/plugin';
 import { exportLogs, logHistory } from '@deephaven/log';
+import { makeMessage } from '@deephaven/utils';
 import FormattingSectionContent from './FormattingSectionContent';
 import LegalNotice from './LegalNotice';
 import SettingsMenuSection from './SettingsMenuSection';

packages/code-studio/src/settings/SettingsMenu.tsx

@@ -2,6 +2,7 @@ export type BaseThemeType = 'dark' | 'light';
 export type BaseThemeKey = `default-${BaseThemeType}`;
 export type CssVariableStyleContent = `:root{${string}`;
 export type ThemeCssVariableName = `--dh-${string}`;
+export type ThemeCssColorVariableName = `--dh-color-${string}`;
 
 // DHC should only need to preload variables that are required by the empty page
 // with loading spinner that shows while plugins are loading. The rest of the
@@ -43,7 +44,14 @@ export type ThemeIconsRequiringManualColorChanges =
 
 export const DEFAULT_DARK_THEME_KEY = 'default-dark' satisfies BaseThemeKey;
 export const DEFAULT_LIGHT_THEME_KEY = 'default-light' satisfies BaseThemeKey;
-export const THEME_KEY_OVERRIDE_QUERY_PARAM = 'theme';
+export const EXTERNAL_THEME_KEY = 'external-theme' as const;
+export const MSG_REQUEST_GET_THEME =
+  'io.deephaven.message.ThemeModel.requestExternalTheme';
+export const MSG_REQUEST_SET_THEME =
+  'io.deephaven.message.ThemeModel.requestSetTheme';
+export const PRELOAD_TRANSPARENT_THEME_QUERY_PARAM =
+  'preloadTransparentTheme' as const;
+export const THEME_KEY_OVERRIDE_QUERY_PARAM = 'theme' as const;
 
 // Hex versions of some of the default dark theme color palette needed for
 // preload defaults.
@@ -109,6 +117,14 @@ export const DEFAULT_PRELOAD_DATA_VARIABLES: Record<
     DEFAULT_DARK_THEME_PALETTE.gray[300],
 };
 
+export const TRANSPARENT_PRELOAD_DATA_VARIABLES: Partial<
+  Record<ThemePreloadColorVariable, string>
+> = {
+  '--dh-color-bg': 'transparent',
+  '--dh-color-loading-spinner-primary': 'transparent',
+  '--dh-color-loading-spinner-secondary': 'transparent',
+};
+
 /**
  * Some inline SVGs require manually updating their fill color via
  * `updateSVGFillColors`. This object maps these variables to their respective
@@ -142,3 +158,9 @@ export interface ThemeRegistrationData {
   base: ThemeData[];
   custom: ThemeData[];
 }
+
+export interface ExternalThemeData {
+  baseThemeKey?: BaseThemeKey;
+  name: string;
+  cssVars: Record<ThemeCssColorVariableName, string>;
+}

packages/components/src/theme/ThemeModel.ts

@@ -36,12 +36,23 @@ export interface ThemeProviderProps {
    * tell the provider to activate the base themes.
    */
   themes: ThemeData[] | null;
+  // In DHC web, custom themes are typically loaded from plugins. Since these
+  // get loaded after login, we have to be able to render the children containing
+  // the `Login` component before themes are activated. This means that `children`
+  // get loaded before all styles are available. In cases where themes don't require
+  // children to be rendered such as external themes requested from a parent Window,
+  // we can defer the rendering of children until the themes are activated which
+  // is less likely to render initial content with the wrong theme. We can get
+  // rid of this prop if we ever find a way to load themes without depending on
+  // children. See https://deephaven.atlassian.net/browse/DH-19400
+  waitForActivation?: boolean;
   defaultPreloadValues?: Record<string, string>;
   children: ReactNode;
 }
 
 export function ThemeProvider({
   themes: customThemes,
+  waitForActivation = false,
   defaultPreloadValues = DEFAULT_PRELOAD_DATA_VARIABLES,
   children,
 }: ThemeProviderProps): JSX.Element | null {
@@ -108,6 +119,10 @@ export function ThemeProvider({
     });
   }, [activeThemes, selectedThemeKey, themes]);
 
+  if (waitForActivation && activeThemes == null) {
+    return null;
+  }
+
   return (
     <>
       {activeThemes == null ? null : (