fix: Worker plugin definitions, optional panel wrapper for Dashboards (#1329)

- Fix up some types for plugins
- Fix up some packaging
- Add an optional panel wrapper to Dashboard

Author: mofojed

packages/app-utils/src/plugins/PluginUtils.tsx

@@ -16,6 +16,14 @@ export interface PluginModule {}
 
 export type PluginModuleMap = Map<string, PluginModule>;
 
+export type PluginManifestPluginInfo = {
+  name: string;
+  main: string;
+  version: string;
+};
+
+export type PluginManifest = { plugins: PluginManifestPluginInfo[] };
+
 /**
  * Load a component plugin from the server.
  * @param baseURL Base URL of the plugin server
@@ -53,7 +61,9 @@ export function loadComponentPlugin(
  * @param pluginUrl The URL of the plugin to load
  * @returns The loaded module
  */
-export async function loadModulePlugin(pluginUrl: string): Promise<unknown> {
+export async function loadModulePlugin(
+  pluginUrl: string
+): Promise<PluginModule> {
   const myModule = await loadRemoteModule(pluginUrl);
   return myModule;
 }
@@ -63,9 +73,7 @@ export async function loadModulePlugin(pluginUrl: string): Promise<unknown> {
  * @param jsonUrl The URL of the JSON file to load
  * @returns The JSON object of the manifest file
  */
-export async function loadJson(
-  jsonUrl: string
-): Promise<{ plugins: { name: string; main: string }[] }> {
+export async function loadJson(jsonUrl: string): Promise<PluginManifest> {
   const res = await fetch(jsonUrl);
   if (!res.ok) {
     throw new Error(res.statusText);
@@ -94,7 +102,7 @@ export async function loadModulePlugins(
     }
 
     log.debug('Plugin manifest loaded:', manifest);
-    const pluginPromises: Promise<unknown>[] = [];
+    const pluginPromises: Promise<PluginModule>[] = [];
     for (let i = 0; i < manifest.plugins.length; i += 1) {
       const { name, main } = manifest.plugins[i];
       const pluginMainUrl = `${modulePluginsUrl}/${name}/${main}`;
@@ -107,7 +115,7 @@ export async function loadModulePlugins(
       const module = pluginModules[i];
       const { name } = manifest.plugins[i];
       if (module.status === 'fulfilled') {
-        pluginMap.set(name, module.value as PluginModule);
+        pluginMap.set(name, module.value);
       } else {
         log.error(`Unable to load plugin ${name}`, module.reason);
       }

packages/code-studio/tsconfig.json

@@ -9,6 +9,7 @@
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"],
   "exclude": ["node_modules", "src/**/*.test.*", "src/**/__mocks__/*"],
   "references": [
+    { "path": "../app-utils" },
     { "path": "../auth-plugins" },
     { "path": "../chart" },
     { "path": "../components" },

packages/dashboard/src/Dashboard.tsx

@@ -1,4 +1,5 @@
 import React, {
+  ComponentType,
   ForwardRefExoticComponent,
   RefAttributes,
   useEffect,
@@ -40,6 +41,9 @@ export type DashboardProps = {
   >;
   hydrate?: PanelHydrateFunction;
   dehydrate?: PanelDehydrateFunction;
+
+  /** Component to wrap each panel with */
+  panelWrapper?: ComponentType;
 };
 
 export function Dashboard({
@@ -54,6 +58,7 @@ export function Dashboard({
   fallbackComponent = PanelPlaceholder,
   hydrate,
   dehydrate,
+  panelWrapper,
 }: DashboardProps): JSX.Element {
   const layoutElement = useRef<HTMLDivElement>(null);
   const [isInitialized, setIsInitialized] = useState(false);
@@ -140,6 +145,7 @@ export function Dashboard({
           onLayoutInitialized={onLayoutInitialized}
           hydrate={hydrate}
           dehydrate={dehydrate}
+          panelWrapper={panelWrapper}
         >
           {children}
         </DashboardLayout>

packages/dashboard/src/DashboardLayout.tsx

@@ -1,4 +1,5 @@
 import React, {
+  ComponentType,
   ReactElement,
   useCallback,
   useEffect,
@@ -63,6 +64,9 @@ interface DashboardLayoutProps {
   data?: DashboardData;
   children?: React.ReactNode | React.ReactNode[];
   emptyDashboard?: React.ReactNode;
+
+  /** Component to wrap each panel with */
+  panelWrapper?: ComponentType;
 }
 
 /**
@@ -78,6 +82,8 @@ export function DashboardLayout({
   onLayoutInitialized = DEFAULT_CALLBACK,
   hydrate = hydrateDefault,
   dehydrate = dehydrateDefault,
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  panelWrapper = ({ children: panelChildren }) => <>{panelChildren}</>,
 }: DashboardLayoutProps): JSX.Element {
   const dispatch = useDispatch();
   const data =
@@ -117,14 +123,19 @@ export function DashboardLayout({
         // ComponentType doesn't seem to work right, ReactNode is also incorrect
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const CType = componentType as any;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const PanelWrapperType = panelWrapper as any;
 
         // Props supplied by GoldenLayout
         // eslint-disable-next-line react/prop-types
         const { glContainer, glEventHub } = props;
         return (
           <PanelErrorBoundary glContainer={glContainer} glEventHub={glEventHub}>
             {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            <CType {...props} ref={ref} />
+            <PanelWrapperType {...props}>
+              {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+              <CType {...props} ref={ref} />
+            </PanelWrapperType>
           </PanelErrorBoundary>
         );
       }
@@ -135,7 +146,7 @@ export function DashboardLayout({
       dehydrateMap.set(name, componentDehydrate);
       return cleanup;
     },
-    [hydrate, dehydrate, hydrateMap, dehydrateMap, layout]
+    [hydrate, dehydrate, hydrateMap, dehydrateMap, layout, panelWrapper]
   );
   const hydrateComponent = useCallback(
     (name, props) => (hydrateMap.get(name) ?? FALLBACK_CALLBACK)(props, id),