feat: Add global shortcut to export logs

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

@@ -5,17 +5,12 @@ import '@deephaven/components/scss/BaseStyleSheet.scss';
 import { ClientBootstrap } from '@deephaven/jsapi-bootstrap';
 import { useBroadcastLoginListener } from '@deephaven/jsapi-components';
 import { type Plugin } from '@deephaven/plugin';
-import { exportLogs, logHistory } from '@deephaven/log';
-import {
-  ContextActions,
-  ContextMenuRoot,
-  GLOBAL_SHORTCUTS,
-} from '@deephaven/components';
+import { ContextActions, ContextMenuRoot } from '@deephaven/components';
 import FontBootstrap from './FontBootstrap';
 import PluginsBootstrap from './PluginsBootstrap';
 import AuthBootstrap from './AuthBootstrap';
 import ConnectionBootstrap from './ConnectionBootstrap';
-import { getConnectOptions } from '../utils';
+import { getConnectOptions, createExportLogsContextAction } from '../utils';
 import FontsLoaded from './FontsLoaded';
 import UserBootstrap from './UserBootstrap';
 import ServerConfigBootstrap from './ServerConfigBootstrap';
@@ -25,8 +20,8 @@ export type AppBootstrapProps = {
   /** URL of the server. */
   serverUrl: string;
 
-  /** Version of front-end. */
-  uiVersion: string;
+  /** Properties included in support logs. */
+  logMetadata?: Record<string, unknown>;
 
   /** URL of the plugins to load. */
   pluginsUrl: string;
@@ -52,7 +47,7 @@ export function AppBootstrap({
   pluginsUrl,
   getCorePlugins,
   serverUrl,
-  uiVersion,
+  logMetadata,
   children,
 }: AppBootstrapProps): JSX.Element {
   const clientOptions = useMemo(() => getConnectOptions(), []);
@@ -67,23 +62,10 @@ export function AppBootstrap({
   }, []);
   useBroadcastLoginListener(onLogin, onLogout);
 
-  const contextActions = [
-    {
-      // Exporting logs in a general context
-      action: () => {
-        exportLogs(
-          logHistory,
-          {
-            uiVersion,
-            userAgent: navigator.userAgent,
-          },
-          store.getState()
-        );
-      },
-      shortcut: GLOBAL_SHORTCUTS.EXPORT_LOGS,
-      isGlobal: true,
-    },
-  ];
+  const contextActions = useMemo(
+    () => [createExportLogsContextAction(logMetadata, true)],
+    [logMetadata]
+  );
 
   return (
     <Provider store={store}>

packages/app-utils/src/utils/createExportLogsContextAction.ts

@@ -0,0 +1,25 @@
+import { type ContextAction, GLOBAL_SHORTCUTS } from '@deephaven/components';
+import { exportLogs, logHistory } from '@deephaven/log';
+import { store } from '@deephaven/redux';
+
+export function createExportLogsContextAction(
+  metadata?: Record<string, unknown>,
+  isGlobal = false
+): ContextAction {
+  return {
+    action: () => {
+      exportLogs(
+        logHistory,
+        {
+          ...metadata,
+          userAgent: navigator.userAgent,
+        },
+        store.getState()
+      );
+    },
+    shortcut: GLOBAL_SHORTCUTS.EXPORT_LOGS,
+    isGlobal,
+  };
+}
+
+export default createExportLogsContextAction;

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

@@ -1 +1,2 @@
 export * from './ConnectUtils';
+export * from './createExportLogsContextAction';

packages/code-studio/src/index.tsx

@@ -34,7 +34,9 @@ const pluginsURL = new URL(
   document.baseURI
 );
 
-const uiVersion = import.meta.env.npm_package_version;
+const logMetadata: Record<string, unknown> = {
+  uiVersion: import.meta.env.npm_package_version,
+};
 
 // Lazy load the configs because it breaks initial page loads otherwise
 async function getCorePlugins() {
@@ -71,7 +73,7 @@ ReactDOM.render(
           getCorePlugins={getCorePlugins}
           serverUrl={apiURL.origin}
           pluginsUrl={pluginsURL.href}
-          uiVersion={uiVersion}
+          logMetadata={logMetadata}
         >
           <AppRoot />
         </AppBootstrap>

packages/code-studio/src/main/AppMainContainer.test.tsx

@@ -69,7 +69,7 @@ function renderAppMainContainer({
   setActiveTool = jest.fn(),
   setDashboardIsolatedLinkerPanelId = jest.fn(),
   client = new (dh as any).Client({}),
-  serverConfigValues = {},
+  serverConfigValues = new Map<string, string>(),
   dashboardOpenedPanelMaps = {},
   connection = makeConnection(),
   session = makeSession(),

packages/code-studio/src/main/AppMainContainer.tsx

@@ -56,7 +56,7 @@ import { getVariableDescriptor } from '@deephaven/jsapi-bootstrap';
 import dh from '@deephaven/jsapi-shim';
 import type { dh as DhType } from '@deephaven/jsapi-types';
 import { type SessionConfig } from '@deephaven/jsapi-utils';
-import Log, { exportLogs, logHistory } from '@deephaven/log';
+import Log from '@deephaven/log';
 import {
   getActiveTool,
   getWorkspace,
@@ -70,7 +70,6 @@ import {
   type ServerConfigValues,
   type CustomizableWorkspace,
   type DashboardData,
-  store,
 } from '@deephaven/redux';
 import {
   bindAllMethods,
@@ -86,6 +85,7 @@ import {
   AppDashboards,
   type LayoutStorage,
   UserLayoutUtils,
+  createExportLogsContextAction,
 } from '@deephaven/app-utils';
 import JSZip from 'jszip';
 import SettingsMenu from '../settings/SettingsMenu';
@@ -190,37 +190,26 @@ export class AppMainContainer extends Component<
 
     this.importElement = React.createRef();
 
-    const { allDashboardData } = this.props;
+    const { allDashboardData, serverConfigValues, plugins } = this.props;
 
     this.dashboardLayouts = new Map();
     this.createDashboardListenerRemovers = new Map();
     this.closeDashboardListenerRemovers = new Map();
 
     this.state = {
       contextActions: [
-        {
-          action: () => {
-            // Exports logs with same details as using the button in settings
-            const { serverConfigValues, plugins } = this.props;
-            const pluginInfo = getFormattedPluginInfo(plugins);
-            exportLogs(
-              logHistory,
-              {
-                uiVersion: import.meta.env.npm_package_version,
-                userAgent: navigator.userAgent,
-                ...Object.fromEntries(serverConfigValues),
-                pluginInfo,
-              },
-              store.getState()
-            );
+        createExportLogsContextAction(
+          {
+            uiVersion: import.meta.env.npm_package_version,
+            userAgent: navigator.userAgent,
+            ...Object.fromEntries(serverConfigValues),
+            pluginInfo: getFormattedPluginInfo(plugins),
           },
-          shortcut: GLOBAL_SHORTCUTS.EXPORT_LOGS,
-          // Not global to prevent conflict with action with same shortcut in AppBootstrap.tsx
-        },
+          false // Not global to prevent conflict with export logs action with same shortcut in AppBootstrap.tsx
+        ),
         {
           action: () => {
             // Copies the version info to the clipboard for easy pasting into a ticket
-            const { serverConfigValues } = this.props;
             const versionInfo = getFormattedVersionInfo(serverConfigValues);
             const versionInfoText = Object.entries(versionInfo)
               .map(([key, value]) => `${key}: ${value}`)

packages/embed-widget/src/App.tsx

@@ -12,7 +12,6 @@ import {
 import type GoldenLayout from '@deephaven/golden-layout';
 import type { ItemConfig } from '@deephaven/golden-layout';
 import {
-  ContextMenuRoot,
   ErrorBoundary,
   LoadingOverlay,
   Shortcut,
@@ -241,7 +240,6 @@ function App(): JSX.Element {
           errorMessage={error ?? null}
         />
       )}
-      <ContextMenuRoot />
       <ToastContainer />
     </div>
   );

packages/embed-widget/src/index.tsx

@@ -33,8 +33,9 @@ const pluginsURL = new URL(
   document.baseURI
 );
 
-const uiVersion = import.meta.env.npm_package_version;
-
+const logMetadata: Record<string, unknown> = {
+  uiVersion: import.meta.env.npm_package_version,
+};
 // Lazy load the configs because it breaks initial page loads otherwise
 async function getCorePlugins() {
   const dashboardCorePlugins = await import(
@@ -61,7 +62,7 @@ ReactDOM.render(
         getCorePlugins={getCorePlugins}
         serverUrl={apiURL.origin}
         pluginsUrl={pluginsURL.href}
-        uiVersion={uiVersion}
+        logMetadata={logMetadata}
       >
         <App />
       </AppBootstrap>

tests/shortcuts.spec.ts

@@ -23,7 +23,17 @@ test('shortcut downloads logs in full screen error', async ({ page }) => {
 });
 
 test('shortcut downloads logs in embeded-widget', async ({ page }) => {
+  test.slow(); // Extend timeout to prevent a failure before page loads
+
+  // The embed-widgets page and the table itself have seperate loading spinners,
+  // causing a strict mode violation intermittently when using the goToPage helper
   await gotoPage(page, 'http://localhost:4010?name=all_types');
+  await expect(
+    page.getByRole('progressbar', {
+      name: 'Loading...',
+      exact: true,
+    })
+  ).toHaveCount(0);
 
   const downloadPromise = page.waitForEvent('download');
   await page.keyboard.press('ControlOrMeta+Alt+Shift+KeyL');