feat: Add JS Plugin Information

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

@@ -110,13 +110,13 @@ export async function loadModulePlugins(
     const pluginMap: PluginModuleMap = new Map();
     for (let i = 0; i < pluginModules.length; i += 1) {
       const module = pluginModules[i];
-      const { name } = manifest.plugins[i];
+      const { name, version } = manifest.plugins[i];
       if (module.status === 'fulfilled') {
         const moduleValue = getPluginModuleValue(module.value);
         if (moduleValue == null) {
           log.error(`Plugin '${name}' is missing an exported value.`);
         } else {
-          pluginMap.set(name, moduleValue);
+          pluginMap.set(name, { ...moduleValue, version });
         }
       } else {
         log.error(`Unable to load plugin '${name}'`, module.reason);

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

@@ -0,0 +1,25 @@
+import React, { ReactElement } from 'react';
+import { usePlugins } from '@deephaven/plugin';
+
+export default function PluginInformation(): ReactElement {
+  const plugins = usePlugins();
+  return (
+    <div className="container">
+      {Array.from(plugins.entries())
+        .filter(plugin => plugin[1].version !== undefined)
+        .map(([key, value]) => (
+          <div
+            key={key}
+            className="row justify-content-start align-items-center"
+          >
+            <div className="col pl-0">
+              <span className="my-0">{key}</span>
+            </div>
+            <div className="col-auto">
+              <span>{value?.version}</span>
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+}

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

@@ -34,6 +34,7 @@ import { exportLogs } from '../log/LogExport';
 import './SettingsMenu.scss';
 import ColumnSpecificSectionContent from './ColumnSpecificSectionContent';
 import { getFormattedVersionInfo } from './SettingsUtils';
+import PluginInformation from './PluginInformation';
 
 interface SettingsMenuProps {
   serverConfigValues: ServerConfigValues;
@@ -345,6 +346,10 @@ export class SettingsMenu extends Component<
                   </Tooltip>
                 </span>
               </div>
+              <div className="app-settings-footer-item">
+                <div className="font-weight-bold">Plugins</div>
+                <PluginInformation />
+              </div>
               <div className="app-settings-footer-item">
                 <LegalNotice />
               </div>

packages/plugin/src/PluginTypes.ts

@@ -42,7 +42,7 @@ export function isLegacyAuthPlugin(
   return 'AuthPlugin' in plugin;
 }
 
-export type PluginModuleMap = Map<string, PluginModule>;
+export type PluginModuleMap = Map<string, VersionedPluginModule>;
 
 /**
  * @deprecated Use TablePlugin instead
@@ -75,6 +75,8 @@ export function isLegacyPlugin(plugin: unknown): plugin is LegacyPlugin {
 
 export type PluginModule = Plugin | LegacyPlugin;
 
+export type VersionedPluginModule = PluginModule & { version?: string };
+
 export interface Plugin {
   /**
    * The name of the plugin. This will be used as an identifier for the plugin and should be unique.
@@ -161,7 +163,9 @@ export interface WidgetPlugin<T = unknown> extends Plugin {
   icon?: IconDefinition | React.ReactElement;
 }
 
-export function isWidgetPlugin(plugin: PluginModule): plugin is WidgetPlugin {
+export function isWidgetPlugin(
+  plugin: PluginModule | VersionedPluginModule
+): plugin is WidgetPlugin {
   return 'type' in plugin && plugin.type === PluginType.WIDGET_PLUGIN;
 }
 
@@ -207,7 +211,9 @@ export interface AuthPlugin extends Plugin {
   isAvailable: (authHandlers: string[], authConfig: AuthConfigMap) => boolean;
 }
 
-export function isAuthPlugin(plugin: PluginModule): plugin is AuthPlugin {
+export function isAuthPlugin(
+  plugin: PluginModule | VersionedPluginModule
+): plugin is AuthPlugin {
   return 'type' in plugin && plugin.type === PluginType.AUTH_PLUGIN;
 }
 
@@ -223,7 +229,9 @@ export interface ThemePlugin extends Plugin {
 }
 
 /** Type guard to check if given plugin is a `ThemePlugin` */
-export function isThemePlugin(plugin: PluginModule): plugin is ThemePlugin {
+export function isThemePlugin(
+  plugin: PluginModule | VersionedPluginModule
+): plugin is ThemePlugin {
   return 'type' in plugin && plugin.type === PluginType.THEME_PLUGIN;
 }