fix: Worker plugin definitions, optional panel wrapper for Dashboards

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),