feat: Add global shortcut to export logs (#2336)

- Added `Ctrl+Alt+Shift+L/Cmd-Option-Shift-L` as a global shortcut for
exporting support logs
- When pressed in code-studio, it will download logs with the same
contents as logs produced by pressing the 'Export Logs' button in the
settings menu
- When pressed in other contexts: when not logged in, on a reconnect
error, or in embed-widgets, the logs are exported without the plugin and
server info
- Tested by E2E tests that navigate to the various contexts, presses the
shortcut, and checks if a file was downloaded. Can further inspect the
file downloaded in the tests but unsure if that's necessary

Closes #1963

---------

Co-authored-by: Mike Bender <mikebender@deephaven.io>

Author: ericlln

package.json

@@ -34,6 +34,7 @@
     "lint:packages": "eslint \"packages/*/src/**/*.{ts,tsx,js,jsx}\"",
     "preview": "lerna run --scope=@deephaven/{code-studio,embed-widget} preview --stream",
     "preview:app": "lerna run --scope=@deephaven/code-studio preview --stream",
+    "preview:embed-widget": "lerna run --scope=@deephaven/embed-widget preview --stream",
     "prestart": "npm run build:necessary",
     "start": "run-p watch:types start:*",
     "start:app": "lerna run start --scope=@deephaven/code-studio --stream",

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

@@ -5,11 +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 { 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';
@@ -19,6 +20,9 @@ export type AppBootstrapProps = {
   /** URL of the server. */
   serverUrl: string;
 
+  /** Properties included in support logs. */
+  logMetadata?: Record<string, unknown>;
+
   /** URL of the plugins to load. */
   pluginsUrl: string;
 
@@ -43,6 +47,7 @@ export function AppBootstrap({
   pluginsUrl,
   getCorePlugins,
   serverUrl,
+  logMetadata,
   children,
 }: AppBootstrapProps): JSX.Element {
   const clientOptions = useMemo(() => getConnectOptions(), []);
@@ -56,6 +61,12 @@ export function AppBootstrap({
     });
   }, []);
   useBroadcastLoginListener(onLogin, onLogout);
+
+  const contextActions = useMemo(
+    () => [createExportLogsContextAction(logMetadata, true)],
+    [logMetadata]
+  );
+
   return (
     <Provider store={store}>
       <FontBootstrap fontClassNames={fontClassNames}>
@@ -78,10 +89,12 @@ export function AppBootstrap({
                   </UserBootstrap>
                 </ServerConfigBootstrap>
               </AuthBootstrap>
+              <ContextActions actions={contextActions} />
             </ClientBootstrap>
           </ThemeBootstrap>
         </PluginsBootstrap>
       </FontBootstrap>
+      <ContextMenuRoot />
     </Provider>
   );
 }

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,6 +34,10 @@ const pluginsURL = new URL(
   document.baseURI
 );
 
+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(
@@ -69,6 +73,7 @@ ReactDOM.render(
           getCorePlugins={getCorePlugins}
           serverUrl={apiURL.origin}
           pluginsUrl={pluginsURL.href}
+          logMetadata={logMetadata}
         >
           <AppRoot />
         </AppBootstrap>

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

@@ -1,12 +1,11 @@
 import React, { type ReactElement } from 'react';
-import { ContextMenuRoot, ToastContainer } from '@deephaven/components';
+import { ToastContainer } from '@deephaven/components';
 import AppMainContainer from './AppMainContainer';
 
 function App(): ReactElement {
   return (
     <div className="app">
       <AppMainContainer />
-      <ContextMenuRoot />
       <ToastContainer />
     </div>
   );

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

@@ -85,14 +85,18 @@ import {
   AppDashboards,
   type LayoutStorage,
   UserLayoutUtils,
+  createExportLogsContextAction,
 } from '@deephaven/app-utils';
 import JSZip from 'jszip';
 import SettingsMenu from '../settings/SettingsMenu';
 import AppControlsMenu from './AppControlsMenu';
 import { getLayoutStorage, getServerConfigValues } from '../redux';
 import './AppMainContainer.scss';
 import WidgetList, { type WindowMouseEvent } from './WidgetList';
-import { getFormattedVersionInfo } from '../settings/SettingsUtils';
+import {
+  getFormattedPluginInfo,
+  getFormattedVersionInfo,
+} from '../settings/SettingsUtils';
 import EmptyDashboard from './EmptyDashboard';
 
 const log = Log.module('AppMainContainer');
@@ -186,18 +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: [
+        createExportLogsContextAction(
+          {
+            uiVersion: import.meta.env.npm_package_version,
+            userAgent: navigator.userAgent,
+            ...Object.fromEntries(serverConfigValues),
+            pluginInfo: getFormattedPluginInfo(plugins),
+          },
+          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/components/src/shortcuts/GlobalShortcuts.ts

@@ -58,6 +58,13 @@ const GLOBAL_SHORTCUTS = {
     macShortcut: [MODIFIER.CMD, MODIFIER.SHIFT, KEY.I],
     isEditable: true,
   }),
+  EXPORT_LOGS: ShortcutRegistry.createAndAdd({
+    id: 'GLOBAL.EXPORT_LOGS',
+    name: 'Export Logs',
+    shortcut: [MODIFIER.CTRL, MODIFIER.ALT, MODIFIER.SHIFT, KEY.L],
+    macShortcut: [MODIFIER.CMD, MODIFIER.OPTION, MODIFIER.SHIFT, KEY.L],
+    isEditable: true,
+  }),
   NEXT: ShortcutRegistry.createAndAdd({
     id: 'GLOBAL.NEXT',
     name: 'Next',

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