refactor: Convert core DashboardPlugins to new config type (#1519)

Fixes #1507 

Didn't convert `ConsolePlugin` yet. The `notebooksUrl` prop was added
for markdown notebooks, but uses a Vite env variable to set it

Author: mattrunyon

package-lock.json

@@ -5,6 +5,7 @@ import {
   RefreshTokenBootstrap,
   useBroadcastLoginListener,
 } from '@deephaven/jsapi-components';
+import { type DashboardPlugin } from '@deephaven/plugin';
 import FontBootstrap from './FontBootstrap';
 import PluginsBootstrap from './PluginsBootstrap';
 import AuthBootstrap from './AuthBootstrap';
@@ -21,6 +22,9 @@ export type AppBootstrapProps = {
   /** URL of the plugins to load. */
   pluginsUrl: string;
 
+  /** The core plugins to load. */
+  getCorePlugins?: () => Promise<DashboardPlugin[]>;
+
   /** Font class names to load. */
   fontClassNames?: string[];
 
@@ -37,6 +41,7 @@ export type AppBootstrapProps = {
 export function AppBootstrap({
   fontClassNames,
   pluginsUrl,
+  getCorePlugins,
   serverUrl,
   children,
 }: AppBootstrapProps): JSX.Element {
@@ -51,7 +56,7 @@ export function AppBootstrap({
   useBroadcastLoginListener(onLogin, onLogout);
   return (
     <FontBootstrap fontClassNames={fontClassNames}>
-      <PluginsBootstrap pluginsUrl={pluginsUrl}>
+      <PluginsBootstrap getCorePlugins={getCorePlugins} pluginsUrl={pluginsUrl}>
         <ClientBootstrap
           serverUrl={serverUrl}
           options={clientOptions}

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

@@ -1,3 +1,4 @@
+import { type DashboardPlugin } from '@deephaven/plugin';
 import React, { createContext, useEffect, useState } from 'react';
 import { PluginModuleMap, loadModulePlugins } from '../plugins';
 
@@ -9,6 +10,9 @@ export type PluginsBootstrapProps = {
    */
   pluginsUrl: string;
 
+  /** The core plugins to load. */
+  getCorePlugins?: () => Promise<DashboardPlugin[]>;
+
   /**
    * The children to render wrapped with the PluginsContext.
    * Note that it renders the children even if the plugins aren't loaded yet.
@@ -21,24 +25,29 @@ export type PluginsBootstrapProps = {
  */
 export function PluginsBootstrap({
   pluginsUrl,
+  getCorePlugins,
   children,
 }: PluginsBootstrapProps): JSX.Element {
   const [plugins, setPlugins] = useState<PluginModuleMap | null>(null);
   useEffect(
     function initPlugins() {
       let isCanceled = false;
       async function loadPlugins(): Promise<void> {
+        const corePlugins = (await getCorePlugins?.()) ?? [];
         const pluginModules = await loadModulePlugins(pluginsUrl);
         if (!isCanceled) {
-          setPlugins(pluginModules);
+          const corePluginPairs = corePlugins.map(
+            plugin => [plugin.name, plugin] as const
+          );
+          setPlugins(new Map([...corePluginPairs, ...pluginModules]));
         }
       }
       loadPlugins();
       return () => {
         isCanceled = true;
       };
     },
-    [pluginsUrl]
+    [pluginsUrl, getCorePlugins]
   );
 
   return (

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

@@ -8,3 +8,4 @@ export * from './usePlugins';
 export * from './useConnection';
 export * from './useServerConfig';
 export * from './useUser';
+export * from './useLoadTablePlugin';

packages/app-utils/src/components/index.ts

@@ -0,0 +1,42 @@
+import { useCallback } from 'react';
+import {
+  type TablePluginComponent,
+  isTablePlugin,
+  isLegacyTablePlugin,
+} from '@deephaven/plugin';
+import Log from '@deephaven/log';
+import usePlugins from './usePlugins';
+
+const log = Log.module('@deephaven/app-utils/useTablePlugin');
+
+/**
+ * Creates a table plugin loader function.
+ * @returns A function to load a Table plugin element by name
+ */
+export function useLoadTablePlugin(): (name: string) => TablePluginComponent {
+  const plugins = usePlugins();
+
+  const plugin = useCallback(
+    (name: string) => {
+      // First check if we have any plugin modules loaded that match the TablePlugin.
+      const pluginModule = plugins.get(name);
+      if (pluginModule != null) {
+        if (isTablePlugin(pluginModule)) {
+          return pluginModule.component;
+        }
+        if (isLegacyTablePlugin(pluginModule)) {
+          return pluginModule.TablePlugin;
+        }
+      }
+
+      const errorMessage = `Unable to find table plugin ${name}.`;
+      log.error(errorMessage);
+      throw new Error(errorMessage);
+    },
+    [plugins]
+  );
+
+  return plugin;
+}
+
+export default useLoadTablePlugin;

packages/app-utils/src/components/useLoadTablePlugin.ts

@@ -2,12 +2,17 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { MonacoUtils } from '@deephaven/console';
 import { store } from '@deephaven/redux';
+import { DownloadServiceWorkerUtils } from '@deephaven/iris-grid';
 import MonacoWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import AppRouter from './main/AppRouter';
-import DownloadServiceWorkerUtils from './DownloadServiceWorkerUtils';
 
 export function AppRoot(): JSX.Element {
-  DownloadServiceWorkerUtils.registerOnLoaded();
+  DownloadServiceWorkerUtils.register(
+    new URL(
+      `${import.meta.env.BASE_URL ?? ''}download/serviceWorker.js`,
+      window.location.href
+    )
+  );
   MonacoUtils.init({ getWorker: () => new MonacoWorker() });
 
   // disable annoying dnd-react warnings

packages/code-studio/src/AppRoot.tsx

@@ -27,10 +27,39 @@ const pluginsURL = new URL(
   document.baseURI
 );
 
+// Lazy load the configs because it breaks initial page loads otherwise
+async function getCorePlugins() {
+  const dashboardCorePlugins = await import(
+    '@deephaven/dashboard-core-plugins'
+  );
+  const {
+    GridPluginConfig,
+    PandasPluginConfig,
+    ChartPluginConfig,
+    ChartBuilderPluginConfig,
+    FilterPluginConfig,
+    MarkdownPluginConfig,
+    LinkerPluginConfig,
+  } = dashboardCorePlugins;
+  return [
+    GridPluginConfig,
+    PandasPluginConfig,
+    ChartPluginConfig,
+    ChartBuilderPluginConfig,
+    FilterPluginConfig,
+    MarkdownPluginConfig,
+    LinkerPluginConfig,
+  ];
+}
+
 ReactDOM.render(
   <ApiBootstrap apiUrl={apiURL.href} setGlobally>
     <Suspense fallback={<LoadingOverlay />}>
-      <AppBootstrap serverUrl={apiURL.origin} pluginsUrl={pluginsURL.href}>
+      <AppBootstrap
+        getCorePlugins={getCorePlugins}
+        serverUrl={apiURL.origin}
+        pluginsUrl={pluginsURL.href}
+      >
         <AppRoot />
       </AppBootstrap>
     </Suspense>