feat: added shortcut for copying version info and added browser/os to…

… info (#1739) - Adds a shortcut for copying version info to clipboard to make it easier when making tickets. - Adds a new package for parsing UA strings - Adds browser/os to version info for copying
deephaven · Jan 25, 2024 · 3312133 · 3312133
1 parent 47f53dc
commit 3312133
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/code-studio/package.json b/packages/code-studio/package.json
@@ -39,6 +39,7 @@
     "@deephaven/utils": "file:../utils",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "bowser": "^2.11.0",
     "classnames": "^2.3.1",
     "event-target-shim": "^6.0.2",
     "jszip": "3.10.1",

diff --git a/packages/code-studio/src/main/AppMainContainer.tsx b/packages/code-studio/src/main/AppMainContainer.tsx
@@ -78,7 +78,11 @@ import {
   ServerConfigValues,
   CustomizableWorkspace,
 } from '@deephaven/redux';
-import { bindAllMethods, PromiseUtils } from '@deephaven/utils';
+import {
+  bindAllMethods,
+  copyToClipboard,
+  PromiseUtils,
+} from '@deephaven/utils';
 import GoldenLayout from '@deephaven/golden-layout';
 import type { ItemConfigType } from '@deephaven/golden-layout';
 import {
@@ -97,6 +101,7 @@ import WidgetList, { WindowMouseEvent } from './WidgetList';
 import EmptyDashboard from './EmptyDashboard';
 import UserLayoutUtils from './UserLayoutUtils';
 import LayoutStorage from '../storage/LayoutStorage';
+import { getFormattedVersionInfo } from '../settings/SettingsUtils';
 
 const log = Log.module('AppMainContainer');
 
@@ -186,6 +191,19 @@ export class AppMainContainer extends Component<
 
     this.state = {
       contextActions: [
+        {
+          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}`)
+              .join('\n');
+            copyToClipboard(versionInfoText);
+          },
+          shortcut: GLOBAL_SHORTCUTS.COPY_VERSION_INFO,
+          isGlobal: true,
+        },
         {
           action: () => {
             this.handleToolSelect(ToolType.LINKER);

diff --git a/packages/code-studio/src/settings/SettingsMenu.tsx b/packages/code-studio/src/settings/SettingsMenu.tsx
@@ -13,6 +13,7 @@ import {
 import {
   Button,
   CopyButton,
+  GLOBAL_SHORTCUTS,
   Logo,
   ThemeContext,
   ThemePicker,
@@ -32,6 +33,7 @@ import ShortcutSectionContent from './ShortcutsSectionContent';
 import { exportLogs } from '../log/LogExport';
 import './SettingsMenu.scss';
 import ColumnSpecificSectionContent from './ColumnSpecificSectionContent';
+import { getFormattedVersionInfo } from './SettingsUtils';
 
 interface SettingsMenuProps {
   serverConfigValues: ServerConfigValues;
@@ -128,14 +130,13 @@ export class SettingsMenu extends Component<
   }
 
   render(): ReactElement {
-    const uiVersion = import.meta.env.npm_package_version;
     const supportLink = import.meta.env.VITE_SUPPORT_LINK;
     const docsLink = import.meta.env.VITE_DOCS_LINK;
 
     const { serverConfigValues, user } = this.props;
-    const barrageVersion = serverConfigValues.get('barrage.version');
-    const javaVersion = serverConfigValues.get('java.version');
+    const versionInfo = getFormattedVersionInfo(serverConfigValues);
     const deephavenVersion = serverConfigValues.get('deephaven.version');
+    const copyShortcut = GLOBAL_SHORTCUTS.COPY_VERSION_INFO.getDisplayText();
 
     const getRow = (text: string, ver?: string): JSX.Element => (
       <>
@@ -327,16 +328,19 @@ export class SettingsMenu extends Component<
                   {deephavenVersion} <FontAwesomeIcon icon={vsInfo} />
                   <Tooltip interactive>
                     <div className="detailed-server-config">
-                      {getRow('Engine Version', deephavenVersion)}
-                      {getRow('Web UI Version', uiVersion)}
-                      {getRow('Java Version', javaVersion)}
-                      {getRow('Barrage Version', barrageVersion)}
+                      {Object.entries(versionInfo).map(([key, value]) =>
+                        getRow(key, value)
+                      )}
                     </div>
                     <CopyButton
+                      kind="inline"
                       tooltip="Copy version numbers"
-                      copy={`Engine Version: ${deephavenVersion}\nWeb UI Version: ${uiVersion}\nJava Version: ${javaVersion}\nBarrage Version: ${barrageVersion}`}
+                      copy={Object.entries(versionInfo)
+                        .map(([key, value]) => `${key}: ${value}`)
+                        .join('\n')}
                     >
                       Copy Versions
+                      <small className="text-muted">({copyShortcut})</small>
                     </CopyButton>
                   </Tooltip>
                 </span>

diff --git a/packages/code-studio/src/settings/SettingsUtils.test.tsx b/packages/code-studio/src/settings/SettingsUtils.test.tsx
@@ -0,0 +1,51 @@
+import { getFormattedVersionInfo } from './SettingsUtils';
+
+describe('getFormattedVersionInfo', () => {
+  it('should return the formatted version information', () => {
+    const serverConfigValues = new Map<string, string>();
+    serverConfigValues.set('deephaven.version', '1.0.0');
+    serverConfigValues.set('java.version', '11.0.1');
+    serverConfigValues.set('barrage.version', '2.3.4');
+
+    Object.defineProperty(window, 'navigator', {
+      value: {
+        userAgent:
+          'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36',
+      },
+      writable: true,
+    });
+
+    const result = getFormattedVersionInfo(serverConfigValues);
+
+    expect(result).toEqual({
+      'Engine Version': '1.0.0',
+      'Web UI Version': '0.0.1',
+      'Java Version': '11.0.1',
+      'Barrage Version': '2.3.4',
+      'Browser Name': 'Chrome 96',
+      'OS Name': 'Windows NT 10.0',
+    });
+  });
+
+  it('should return "Unknown" for missing version information', () => {
+    const serverConfigValues = new Map<string, string>();
+
+    Object.defineProperty(window, 'navigator', {
+      value: {
+        userAgent: 'Garbage User Agent String',
+      },
+      writable: true,
+    });
+
+    const result = getFormattedVersionInfo(serverConfigValues);
+
+    expect(result).toEqual({
+      'Engine Version': 'Unknown',
+      'Web UI Version': '0.0.1',
+      'Java Version': 'Unknown',
+      'Barrage Version': 'Unknown',
+      'Browser Name': 'Unknown',
+      'OS Name': 'Unknown',
+    });
+  });
+});
diff --git a/packages/code-studio/src/settings/SettingsUtils.tsx b/packages/code-studio/src/settings/SettingsUtils.tsx
@@ -8,6 +8,8 @@ import {
 } from '@deephaven/jsapi-utils';
 import type { dh as DhType } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
+import type { ServerConfigValues } from '@deephaven/redux';
+import Bowser from 'bowser';
 
 const log = Log.module('SettingsUtils');
 
@@ -32,6 +34,30 @@ function isFormatStringFormat(
   );
 }
 
+/**
+ * Get an object containing all version information formatted for display
+ * @param serverConfigValues The server config values
+ * @returns The formatted version info or "Unknown" for any value not available
+ */
+export function getFormattedVersionInfo(
+  serverConfigValues: ServerConfigValues
+): Record<string, string> {
+  const ua = Bowser.parse(window.navigator.userAgent);
+  const browser = `${ua.browser.name ?? ''} ${
+    // use only the major version and minor version, rest is usually empty 120.1.0.0 -> 120.1
+    Number(parseFloat(ua.browser.version ?? '')) || ''
+  }`;
+  const os = `${ua.os.name ?? ''} ${ua.os.version ?? ''}`;
+  return {
+    'Engine Version': serverConfigValues.get('deephaven.version') ?? 'Unknown',
+    'Web UI Version': import.meta.env.npm_package_version ?? 'Unknown',
+    'Java Version': serverConfigValues.get('java.version') ?? 'Unknown',
+    'Barrage Version': serverConfigValues.get('barrage.version') ?? 'Unknown',
+    'Browser Name': browser.trim() || 'Unknown',
+    'OS Name': os.trim() || 'Unknown',
+  };
+}
+
 export function focusFirstInputInContainer(
   container: HTMLElement | null
 ): void {

diff --git a/packages/components/src/shortcuts/GlobalShortcuts.ts b/packages/components/src/shortcuts/GlobalShortcuts.ts
@@ -43,6 +43,14 @@ const GLOBAL_SHORTCUTS = {
     macShortcut: [KEY.ESCAPE],
     isEditable: false,
   }),
+  COPY_VERSION_INFO: ShortcutRegistry.createAndAdd({
+    id: 'GLOBAL.COPY_VERSION_INFO',
+    name: 'Copy Version Info',
+    // alt vs shift to not be the devtools shortcut on each platform
+    shortcut: [MODIFIER.CTRL, MODIFIER.ALT, KEY.I],
+    macShortcut: [MODIFIER.CMD, MODIFIER.SHIFT, KEY.I],
+    isEditable: true,
+  }),
   NEXT: ShortcutRegistry.createAndAdd({
     id: 'GLOBAL.NEXT',
     name: 'Next',