feat: Add JS Plugin Information (#2002)

Resolves #1374

Changes:
- Added "Plugins" section to Settings sidebar, with the JS plugin and
its corresponding version (see screenshot below)
- Modified the `PluginMap` to be a mapping from a `string` to a
`VersionedPluginModule`: which contains an optional `version` prop

Screenshot of Change:

![image](https://github.com/deephaven/web-client-ui/assets/69530774/22f94c47-1d01-4dd4-b854-7f17576126dd)]
The plugin information looks the same, just now, when we click "Copy
versions", the info about the plugins is also copied

Author: AkshatJawne

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/main/AppMainContainer.tsx

@@ -1002,6 +1002,7 @@ export class AppMainContainer extends Component<
         <SlideTransition in={isSettingsMenuShown} mountOnEnter unmountOnExit>
           <SettingsMenu
             serverConfigValues={serverConfigValues}
+            pluginData={plugins}
             onDone={this.handleSettingsMenuHide}
             user={user}
           />

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

@@ -26,17 +26,22 @@ import {
   makeMessage,
 } from '@deephaven/jsapi-utils';
 import { assertNotNull } from '@deephaven/utils';
+import { PluginModuleMap } from '@deephaven/plugin';
 import FormattingSectionContent from './FormattingSectionContent';
 import LegalNotice from './LegalNotice';
 import SettingsMenuSection from './SettingsMenuSection';
 import ShortcutSectionContent from './ShortcutsSectionContent';
 import { exportLogs } from '../log/LogExport';
 import './SettingsMenu.scss';
 import ColumnSpecificSectionContent from './ColumnSpecificSectionContent';
-import { getFormattedVersionInfo } from './SettingsUtils';
+import {
+  getFormattedPluginInfo,
+  getFormattedVersionInfo,
+} from './SettingsUtils';
 
 interface SettingsMenuProps {
   serverConfigValues: ServerConfigValues;
+  pluginData: PluginModuleMap;
   user: User;
   onDone: () => void;
 }
@@ -125,16 +130,21 @@ export class SettingsMenu extends Component<
   }
 
   handleExportSupportLogs(): void {
-    const { serverConfigValues } = this.props;
-    exportLogs(undefined, Object.fromEntries(serverConfigValues));
+    const { serverConfigValues, pluginData } = this.props;
+    const pluginInfo = getFormattedPluginInfo(pluginData);
+    exportLogs(undefined, {
+      ...Object.fromEntries(serverConfigValues),
+      pluginInfo,
+    });
   }
 
   render(): ReactElement {
     const supportLink = import.meta.env.VITE_SUPPORT_LINK;
     const docsLink = import.meta.env.VITE_DOCS_LINK;
 
-    const { serverConfigValues, user } = this.props;
+    const { serverConfigValues, pluginData, user } = this.props;
     const versionInfo = getFormattedVersionInfo(serverConfigValues);
+    const pluginInfo = getFormattedPluginInfo(pluginData);
     const deephavenVersion = serverConfigValues.get('deephaven.version');
     const copyShortcut = GLOBAL_SHORTCUTS.COPY_VERSION_INFO.getDisplayText();
 
@@ -335,7 +345,10 @@ export class SettingsMenu extends Component<
                     <CopyButton
                       kind="inline"
                       tooltip="Copy version numbers"
-                      copy={Object.entries(versionInfo)
+                      copy={Object.entries({
+                        ...versionInfo,
+                        ...pluginInfo,
+                      })
                         .map(([key, value]) => `${key}: ${value}`)
                         .join('\n')}
                     >
@@ -345,6 +358,26 @@ export class SettingsMenu extends Component<
                   </Tooltip>
                 </span>
               </div>
+              <div className="app-settings-footer-item">
+                <div className="font-weight-bold">Plugins</div>
+                <div className="container">
+                  {Array.from(pluginData.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 text-truncate">{key}</span>
+                        </div>
+                        <div className="col-auto">
+                          <span>{value?.version}</span>
+                        </div>
+                      </div>
+                    ))}
+                </div>
+              </div>
               <div className="app-settings-footer-item">
                 <LegalNotice />
               </div>

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

@@ -10,6 +10,7 @@ import type { dh as DhType } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
 import type { ServerConfigValues } from '@deephaven/redux';
 import Bowser from 'bowser';
+import { PluginModuleMap } from '@deephaven/plugin';
 
 const log = Log.module('SettingsUtils');
 
@@ -58,6 +59,19 @@ export function getFormattedVersionInfo(
   };
 }
 
+/**
+ * Get an object containing all JS plugin information formatted for display
+ * @param serverConfigValues The information for all plugins
+ * @returns The formatted mapping from plugin name to version
+ */
+export function getFormattedPluginInfo(
+  pluginDataValues: PluginModuleMap
+): Record<string, string> {
+  return Array.from(pluginDataValues.entries())
+    .filter(plugin => plugin[1].version !== undefined)
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value.version }), {});
+}
+
 export function focusFirstInputInContainer(
   container: HTMLElement | null
 ): void {

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.