feat: Theme Selector (#1661)

- Added a theme selector to settings menu when there are multiple themes available - IrisGrid and Monaco now respond dynamically to selected theme change - Misc moving of theme utils - Added vite config for local plugin dev resolves #1660
deephaven · Dec 6, 2023 · 5e2be64 · 5e2be64
1 parent 4c0200e
commit 5e2be64
Show file tree

Hide file tree

Showing 37 changed files with 459 additions and 233 deletions.
diff --git a/.gitignore b/.gitignore
@@ -41,3 +41,4 @@ packages/*/package-lock.json
 /playwright/.cache/
 /tests/*-snapshots/*
 !/tests/*-snapshots/*-linux*
+vite.config.local.ts
diff --git a/README.md b/README.md
@@ -52,6 +52,45 @@ If your DHC address is different from the default `http://localhost:10000`, edit
 VITE_PROXY_URL=http://<dhc-host>:<port>
 ```
 
+## Local Plugin Development
+The plugins repo supports [serving plugins locally](https://github.com/deephaven/deephaven-plugins/blob/main/README.md#serve-plugins). DHC can be configured to proxy `js-plugins`requests to the local dev server by setting `VITE_JS_PLUGINS_DEV_PORT` in `packages/code-studio/.env.development.local`.
+
+e.g. To point to the default dev port:
+
+```
+VITE_JS_PLUGINS_DEV_PORT=4100
+```
+
+## Local Vite Config
+If you'd like to override the vite config for local dev, you can define a `packages/code-studio/vite.config.local.ts` file that extends from `vite.config.ts`. This file is excluded via `.gitignore` which makes it easy to keep local overrides in tact.
+
+The config can be used by running:
+
+`npm run start:app -- -- -- --config=vite.config.local.ts`
+
+For example, to proxy `js-plugins` requests to a local server, you could use this `vite.config.local.ts`:
+
+```typescript
+export default defineConfig((config: ConfigEnv) => {
+  const baseConfig = (createBaseConfig as UserConfigFn)(config) as UserConfig;
+
+  return {
+    ...baseConfig,
+    server: {
+      ...baseConfig.server,
+      proxy: {
+        ...baseConfig.server?.proxy,
+        '/js-plugins': {
+          target: 'http://localhost:5173',
+          changeOrigin: true,
+          rewrite: path => path.replace(/^\/js-plugins/, ''),
+        },
+      },
+    },
+  };
+});
+```
+
 ## Debugging from VSCode
 
 We have a pre-defined launch config that lets you set breakpoints directly in VSCode for debugging browser code. The `Launch Deephaven` config will launch a new Chrome window that stores its data in your repo workspace. With this setup, you only need to install the React and Redux devtool extensions once. They will persist to future launches using the launch config.

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/app-utils/package.json b/packages/app-utils/package.json
@@ -32,6 +32,7 @@
     "@deephaven/auth-plugins": "file:../auth-plugins",
     "@deephaven/chart": "file:../chart",
     "@deephaven/components": "file:../components",
+    "@deephaven/console": "file:../console",
     "@deephaven/dashboard": "file:../dashboard",
     "@deephaven/icons": "file:../icons",
     "@deephaven/iris-grid": "file:../iris-grid",

diff --git a/packages/app-utils/src/components/AppBootstrap.test.tsx b/packages/app-utils/src/components/AppBootstrap.test.tsx
@@ -1,17 +1,16 @@
 import React, { useContext } from 'react';
+import { act, render, screen } from '@testing-library/react';
 import { AUTH_HANDLER_TYPE_ANONYMOUS } from '@deephaven/auth-plugins';
 import { ApiContext } from '@deephaven/jsapi-bootstrap';
+import { PluginModuleMap, PluginsContext } from '@deephaven/plugin';
 import { BROADCAST_LOGIN_MESSAGE } from '@deephaven/jsapi-utils';
 import type {
   CoreClient,
   IdeConnection,
   dh as DhType,
 } from '@deephaven/jsapi-types';
 import { TestUtils } from '@deephaven/utils';
-import { act, render, screen } from '@testing-library/react';
 import AppBootstrap from './AppBootstrap';
-import { PluginsContext } from './PluginsBootstrap';
-import { PluginModuleMap } from '../plugins';
 
 const { asMock } = TestUtils;
 

diff --git a/packages/app-utils/src/components/ThemeBootstrap.tsx b/packages/app-utils/src/components/ThemeBootstrap.tsx
@@ -1,8 +1,9 @@
 import { useContext, useMemo } from 'react';
 import { ChartThemeProvider } from '@deephaven/chart';
+import { MonacoThemeProvider } from '@deephaven/console';
 import { ThemeProvider } from '@deephaven/components';
-import { PluginsContext } from '@deephaven/plugin';
-import { getThemeDataFromPlugins } from '../plugins';
+import { IrisGridThemeProvider } from '@deephaven/iris-grid';
+import { getThemeDataFromPlugins, PluginsContext } from '@deephaven/plugin';
 
 export interface ThemeBootstrapProps {
   children: React.ReactNode;
@@ -22,7 +23,11 @@ export function ThemeBootstrap({ children }: ThemeBootstrapProps): JSX.Element {
 
   return (
     <ThemeProvider themes={themes}>
-      <ChartThemeProvider>{children}</ChartThemeProvider>
+      <ChartThemeProvider>
+        <MonacoThemeProvider>
+          <IrisGridThemeProvider>{children}</IrisGridThemeProvider>
+        </MonacoThemeProvider>
+      </ChartThemeProvider>
     </ThemeProvider>
   );
 }

diff --git a/packages/app-utils/src/plugins/PluginUtils.test.tsx b/packages/app-utils/src/plugins/PluginUtils.test.tsx
diff --git a/packages/app-utils/src/plugins/PluginUtils.tsx b/packages/app-utils/src/plugins/PluginUtils.tsx
@@ -1,4 +1,3 @@
-import { getThemeKey, ThemeData } from '@deephaven/components';
 import Log from '@deephaven/log';
 import {
   type PluginModuleMap,
@@ -11,8 +10,6 @@ import {
   PluginType,
   isLegacyAuthPlugin,
   isLegacyPlugin,
-  isThemePlugin,
-  ThemePlugin,
 } from '@deephaven/plugin';
 import loadRemoteModule from './loadRemoteModule';
 
@@ -172,37 +169,3 @@ export function getAuthPluginComponent(
 
   return component;
 }
-
-/**
- * Extract theme data from theme plugins in the given plugin map.
- * @param pluginMap
- */
-export function getThemeDataFromPlugins(
-  pluginMap: PluginModuleMap
-): ThemeData[] {
-  const themePluginEntries = [...pluginMap.entries()].filter(
-    (entry): entry is [string, ThemePlugin] => isThemePlugin(entry[1])
-  );
-
-  log.debug('Getting theme data from plugins', themePluginEntries);
-
-  return themePluginEntries
-    .map(([pluginName, plugin]) => {
-      // Normalize to an array since config can be an array of configs or a
-      // single config
-      const configs = Array.isArray(plugin.themes)
-        ? plugin.themes
-        : [plugin.themes];
-
-      return configs.map(
-        ({ name, baseTheme, styleContent }) =>
-          ({
-            baseThemeKey: `default-${baseTheme ?? 'dark'}`,
-            themeKey: getThemeKey(pluginName, name),
-            name,
-            styleContent,
-          }) as const
-      );
-    })
-    .flat();
-}
diff --git a/packages/app-utils/tsconfig.json b/packages/app-utils/tsconfig.json
@@ -10,6 +10,7 @@
     { "path": "../auth-plugins" },
     { "path": "../chart" },
     { "path": "../components" },
+    { "path": "../console" },
     { "path": "../dashboard" },
     { "path": "../iris-grid" },
     { "path": "../jsapi-bootstrap" },

diff --git a/packages/code-studio/src/settings/SettingsMenu.tsx b/packages/code-studio/src/settings/SettingsMenu.tsx
@@ -6,16 +6,24 @@ import {
   vsRecordKeys,
   vsInfo,
   vsLayers,
+  vsPaintcan,
   dhUserIncognito,
   dhUser,
 } from '@deephaven/icons';
-import { Button, CopyButton, Tooltip } from '@deephaven/components';
+import {
+  Button,
+  CopyButton,
+  ThemeContext,
+  ThemePicker,
+  Tooltip,
+} from '@deephaven/components';
 import { ServerConfigValues, User } from '@deephaven/redux';
 import {
   BROADCAST_CHANNEL_NAME,
   BROADCAST_LOGOUT_MESSAGE,
   makeMessage,
 } from '@deephaven/jsapi-utils';
+import { assertNotNull } from '@deephaven/utils';
 import Logo from './community-wordmark-app.svg';
 import FormattingSectionContent from './FormattingSectionContent';
 import LegalNotice from './LegalNotice';
@@ -51,6 +59,8 @@ export class SettingsMenu extends Component<
 
   static SHORTCUT_SECTION_KEY = 'SettingsMenu.shortcuts';
 
+  static THEME_SECTION_KEY = 'SettingsMenu.theme';
+
   static focusFirstInputInContainer(container: HTMLDivElement | null): void {
     const input = container?.querySelector('input, select, textarea');
     if (input) {
@@ -232,6 +242,34 @@ export class SettingsMenu extends Component<
             <ColumnSpecificSectionContent scrollTo={this.handleScrollTo} />
           </SettingsMenuSection>
 
+          <ThemeContext.Consumer>
+            {contextValue => {
+              assertNotNull(contextValue, 'ThemeContext value is null');
+
+              return contextValue.themes.length > 1 ? (
+                <SettingsMenuSection
+                  sectionKey={SettingsMenu.THEME_SECTION_KEY}
+                  isExpanded={this.isSectionExpanded(
+                    SettingsMenu.THEME_SECTION_KEY
+                  )}
+                  onToggle={this.handleSectionToggle}
+                  title={
+                    <>
+                      <FontAwesomeIcon
+                        icon={vsPaintcan}
+                        transform="grow-4"
+                        className="mr-2"
+                      />
+                      Theme
+                    </>
+                  }
+                >
+                  <ThemePicker />
+                </SettingsMenuSection>
+              ) : null;
+            }}
+          </ThemeContext.Consumer>
+
           <SettingsMenuSection
             sectionKey={SettingsMenu.SHORTCUT_SECTION_KEY}
             isExpanded={this.isSectionExpanded(