feat: update version info pop-up with python/groovy version (#2291)

Fixes #2184
Fixes #2289

Updates from tooltip to contextual help button, adds python/grrovy
version and changes OS name to "User Agent OS" to clarify that it is the
user agent reported version (and thus may be different from what you
expect).

Author: dsmmcken

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

@@ -204,4 +204,5 @@ $settings-menu-z-index: $zindex-modal;
   grid-template-columns: auto auto;
   gap: $spacer-1 $spacer-3;
   text-align: left;
+  margin-bottom: $spacer-2;
 }

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

@@ -9,7 +9,6 @@ import {
   vsClose,
   vsWatch,
   vsRecordKeys,
-  vsInfo,
   vsLayers,
   vsPaintcan,
   dhUserIncognito,
@@ -19,10 +18,12 @@ import {
 } from '@deephaven/icons';
 import {
   Button,
+  ContextualHelp,
+  Heading,
+  Content,
   CopyButton,
   GLOBAL_SHORTCUTS,
   Logo,
-  Tooltip,
 } from '@deephaven/components';
 import { type ServerConfigValues, type User, store } from '@deephaven/redux';
 import {
@@ -383,27 +384,30 @@ export class SettingsMenu extends Component<
               <div className="app-settings-footer-item">
                 <div className="font-weight-bold">Version</div>
                 <span className="d-inline-block text-muted">
-                  {deephavenVersion} <FontAwesomeIcon icon={vsInfo} />
-                  <Tooltip interactive>
-                    <div className="detailed-server-config">
-                      {Object.entries(versionInfo).map(([key, value]) =>
-                        getRow(key, value)
-                      )}
-                    </div>
-                    <CopyButton
-                      kind="inline"
-                      tooltip="Copy version numbers"
-                      copy={Object.entries({
-                        ...versionInfo,
-                        ...pluginInfo,
-                      })
-                        .map(([key, value]) => `${key}: ${value}`)
-                        .join('\n')}
-                    >
-                      Copy Versions
-                      <small className="text-muted">({copyShortcut})</small>
-                    </CopyButton>
-                  </Tooltip>
+                  {deephavenVersion}
+                  <ContextualHelp variant="info">
+                    <Heading>Version Info</Heading>
+                    <Content>
+                      <div className="detailed-server-config">
+                        {Object.entries(versionInfo).map(([key, value]) =>
+                          getRow(key, value)
+                        )}
+                      </div>
+                      <CopyButton
+                        kind="inline"
+                        tooltip="Copy version numbers"
+                        copy={Object.entries({
+                          ...versionInfo,
+                          ...pluginInfo,
+                        })
+                          .map(([key, value]) => `${key}: ${value}`)
+                          .join('\n')}
+                      >
+                        Copy Versions
+                        <small className="text-muted">({copyShortcut})</small>
+                      </CopyButton>
+                    </Content>
+                  </ContextualHelp>
                 </span>
               </div>
               <div className="app-settings-footer-item">

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

@@ -4,6 +4,8 @@ describe('getFormattedVersionInfo', () => {
   it('should return the formatted version information', () => {
     const serverConfigValues = new Map<string, string>();
     serverConfigValues.set('deephaven.version', '1.0.0');
+    serverConfigValues.set('python.version', '3.9.7');
+    serverConfigValues.set('groovy.version', '11.0.1');
     serverConfigValues.set('java.version', '11.0.1');
     serverConfigValues.set('barrage.version', '2.3.4');
 
@@ -20,10 +22,12 @@ describe('getFormattedVersionInfo', () => {
     expect(result).toEqual({
       'Engine Version': '1.0.0',
       'Web UI Version': '0.0.1',
+      'Python Version': '3.9.7',
       'Java Version': '11.0.1',
+      'Groovy Version': '11.0.1',
       'Barrage Version': '2.3.4',
       'Browser Name': 'Chrome 96',
-      'OS Name': 'Windows NT 10.0',
+      'User Agent OS': 'Windows NT 10.0',
     });
   });
 
@@ -43,9 +47,10 @@ describe('getFormattedVersionInfo', () => {
       'Engine Version': 'Unknown',
       'Web UI Version': '0.0.1',
       'Java Version': 'Unknown',
+      'Groovy Version': 'Unknown',
       'Barrage Version': 'Unknown',
       'Browser Name': 'Unknown',
-      'OS Name': 'Unknown',
+      'User Agent OS': 'Unknown',
     });
   });
 });

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

@@ -49,13 +49,17 @@ export function getFormattedVersionInfo(
     Number(parseFloat(ua.browser.version ?? '')) || ''
   }`;
   const os = `${ua.os.name ?? ''} ${ua.os.version ?? ''}`;
+  const pythonVersion = serverConfigValues.get('python.version') ?? '';
   return {
     'Engine Version': serverConfigValues.get('deephaven.version') ?? 'Unknown',
     'Web UI Version': import.meta.env.npm_package_version ?? 'Unknown',
+    // Python version is only available in python sessions
+    ...(pythonVersion !== '' ? { 'Python Version': pythonVersion } : {}),
     'Java Version': serverConfigValues.get('java.version') ?? 'Unknown',
+    'Groovy Version': serverConfigValues.get('groovy.version') ?? 'Unknown',
     'Barrage Version': serverConfigValues.get('barrage.version') ?? 'Unknown',
     'Browser Name': browser.trim() || 'Unknown',
-    'OS Name': os.trim() || 'Unknown',
+    'User Agent OS': os.trim() || 'Unknown',
   };
 }