Dashboard reports its version (eclipse-che#380)

Co-authored-by: Nick Boldt <[email protected]>
SDawley · Oct 25, 2021 · b5c51f0 · b5c51f0
1 parent 9f40713
commit b5c51f0
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 39 deletions.
diff --git a/packages/dashboard-frontend/src/Layout/Header/Tools/__tests__/about-modal.spec.tsx b/packages/dashboard-frontend/src/Layout/Header/Tools/__tests__/about-modal.spec.tsx
@@ -11,7 +11,7 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { AboutModal } from '../about-modal';
 
 jest.mock('detect-browser/index.js', () => {
@@ -32,7 +32,7 @@ describe('About modal', () => {
   const closeModal = jest.fn();
   const component = (<AboutModal
     productName="Che"
-    productVersion="0.0.1"
+    serverVersion="0.0.1"
     closeAboutModal={closeModal}
     isOpen={true}
     logo="./"
@@ -43,39 +43,74 @@ describe('About modal', () => {
     jest.clearAllMocks();
   });
 
-  // todo react-test-renderer doesn't have support for portal: https://github.com/facebook/react/issues/11565
+  // react-test-renderer doesn't have support for portal: https://github.com/facebook/react/issues/11565
   // which makes this fail
   // it('should correctly render the component', () => {
   //   expect(renderer.create(component).toJSON()).toMatchSnapshot();
   // });
 
-  it('should display username', () => {
-    const { getByText } = render(component);
-    expect(getByText('Username')).not.toBeNull();
-    expect(getByText('test-user')).not.toBeNull();
+  it('should display dashboard version', () => {
+    (window as any).process = {
+      env: {
+        DASHBOARD_VERSION: '1.2.3',
+      },
+    };
+    render(component);
+
+    expect(screen.queryByText('Dashboard Version')).not.toBeNull();
+
+    const description = screen.queryByTestId('dashboard-version');
+    expect(description).not.toBeNull();
+    expect(description).toHaveTextContent('1.2.3');
+  });
+
+  it('should display server version', () => {
+    render(component);
+
+    expect(screen.queryByText('Server Version')).not.toBeNull();
+
+    const description = screen.queryByTestId('server-version');
+    expect(description).not.toBeNull();
+    expect(description).toHaveTextContent('0.0.1');
   });
 
-  it('should display product version', () => {
-    const { getByText } = render(component);
-    expect(getByText('Version')).not.toBeNull();
-    expect(getByText('0.0.1')).not.toBeNull();
+  it('should display username', () => {
+    render(component);
+
+    expect(screen.queryByText('Username')).not.toBeNull();
+
+    const description = screen.queryByTestId('username');
+    expect(description).not.toBeNull();
+    expect(description).toHaveTextContent('test-user');
   });
 
   it('should display browser version', () => {
-    const { getByText } = render(component);
-    expect(getByText('Browser Version')).not.toBeNull();
-    expect(getByText('1.0.0')).not.toBeNull();
+    render(component);
+
+    expect(screen.queryByText('Browser Version')).not.toBeNull();
+
+    const description = screen.queryByTestId('browser-version');
+    expect(description).not.toBeNull();
+    expect(description).toHaveTextContent('1.0.0');
   });
 
   it('should display browser os', () => {
-    const { getByText } = render(component);
-    expect(getByText('Browser OS')).not.toBeNull();
-    expect(getByText(/linux/i)).not.toBeNull();
+    render(component);
+
+    expect(screen.queryByText('Browser OS')).not.toBeNull();
+
+    const description = screen.queryByTestId('browser-os');
+    expect(description).not.toBeNull();
+    expect(description).toHaveTextContent('linux');
   });
 
   it('should display browser name', () => {
-    const { getByText } = render(component);
-    expect(getByText('Browser Name')).not.toBeNull();
-    expect(getByText(/chrome/i)).not.toBeNull();
+    render(component);
+
+    expect(screen.queryByText('Browser Name')).not.toBeNull();
+
+    const description = screen.queryByTestId('browser-name');
+    expect(description).not.toBeNull();
+    expect(description).toHaveTextContent('chrome');
   });
 });
diff --git a/packages/dashboard-frontend/src/Layout/Header/Tools/about-modal.tsx b/packages/dashboard-frontend/src/Layout/Header/Tools/about-modal.tsx
@@ -21,7 +21,7 @@ import { detect } from 'detect-browser';
 
 type AboutModalProps = {
   productName: string | undefined;
-  productVersion: string | undefined;
+  serverVersion: string | undefined;
   logo: string;
   isOpen: boolean;
   closeAboutModal: () => void;
@@ -30,7 +30,7 @@ type AboutModalProps = {
 
 type AboutModalItemsProps = {
   username: string | undefined;
-  productVersion: string | undefined;
+  serverVersion: string | undefined;
   browserVersion: string | null | undefined;
   browserOS: string | null | undefined;
   browserName: string | null | undefined;
@@ -39,51 +39,84 @@ type AboutModalItemsProps = {
 const AboutModalItems: React.FC<AboutModalItemsProps> = (
   props: AboutModalItemsProps
 ) => {
-  const productVersion = props.productVersion;
+  const dashboardVersion = process.env.DASHBOARD_VERSION;
+  const serverVersion = props.serverVersion;
   const username = props.username;
   const browserVersion = props.browserVersion;
   const browserOS = props.browserOS;
   const browserName = props.browserName;
   return (
     <>
       <TextContent>
-        <TextList component='dl'>
-          {productVersion && (
+        <TextList component="dl">
+          {dashboardVersion && (
             <>
-              <TextListItem component='dt'>Version</TextListItem>
-              <TextListItem component='dd'>
-                <div className='co-select-to-copy'>{productVersion}</div>
+              <TextListItem component="dt">Dashboard Version</TextListItem>
+              <TextListItem
+                component="dd"
+                className="co-select-to-copy"
+                data-testid="dashboard-version"
+              >
+                {dashboardVersion}
+              </TextListItem>
+            </>
+          )}
+          {serverVersion && (
+            <>
+              <TextListItem component="dt">Server Version</TextListItem>
+              <TextListItem
+                component="dd"
+                className="co-select-to-copy"
+                data-testid="server-version"
+              >
+                {serverVersion}
               </TextListItem>
             </>
           )}
           {username && (
             <>
-              <TextListItem component='dt'>Username</TextListItem>
-              <TextListItem component='dd' className='co-select-to-copy'>
+              <TextListItem component="dt">Username</TextListItem>
+              <TextListItem
+                component="dd"
+                className="co-select-to-copy"
+                data-testid="username"
+              >
                 {username}
               </TextListItem>
             </>
           )}
           {browserName && (
             <>
-              <TextListItem component='dt'>Browser Name</TextListItem>
-              <TextListItem component='dd' className='co-select-to-copy'>
+              <TextListItem component="dt">Browser Name</TextListItem>
+              <TextListItem
+                component="dd"
+                className="co-select-to-copy"
+                data-testid="browser-name"
+              >
                 {browserName}
               </TextListItem>
             </>
           )}
           {browserVersion && (
             <>
-              <TextListItem component='dt'>Browser Version</TextListItem>
-              <TextListItem component='dd' className='co-select-to-copy'>
+              <TextListItem component="dt">Browser Version</TextListItem>
+              <TextListItem
+                component="dd"
+                className="co-select-to-copy"
+                data-testid="browser-version"
+              >
                 {browserVersion}
               </TextListItem>
             </>
           )}
           {browserOS && (
             <>
-              <TextListItem component='dt'>Browser OS</TextListItem>
-              <TextListItem component='dd' className='co-select-to-copy'>
+              <TextListItem component="dt">Browser OS</TextListItem>
+              <TextListItem
+                component="dd"
+                className="co-select-to-copy"
+                data-testid="browser-os"
+              >
                 {browserOS}
               </TextListItem>
             </>
@@ -99,7 +132,7 @@ export class AboutModal extends React.PureComponent<AboutModalProps> {
     const { isOpen, closeAboutModal } = this.props;
     const productName = this.props.productName;
     const logo = this.props.logo;
-    const productVersion = this.props.productVersion;
+    const serverVersion = this.props.serverVersion;
     const userName = this.props.username;
 
     const browser = detect();
@@ -116,7 +149,7 @@ export class AboutModal extends React.PureComponent<AboutModalProps> {
         noAboutModalBoxContentContainer={true}
       >
         <AboutModalItems
-          productVersion={productVersion}
+          serverVersion={serverVersion}
           username={userName}
           browserOS={browserOS}
           browserVersion={browserVersion}

diff --git a/packages/dashboard-frontend/src/Layout/Header/Tools/index.tsx b/packages/dashboard-frontend/src/Layout/Header/Tools/index.tsx
@@ -375,7 +375,7 @@ export class HeaderTools extends React.PureComponent<Props, State> {
           username={username}
           logo={branding.logoFile}
           productName={branding.name}
-          productVersion={branding.productVersion}
+          serverVersion={branding.productVersion}
         />
       </>
     );

diff --git a/packages/dashboard-frontend/webpack.config.common.js b/packages/dashboard-frontend/webpack.config.common.js
@@ -16,6 +16,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const stylus_plugin = require('poststylus');
 const stylusLoader = require('stylus-loader');
 const path = require('path');
+const webpack = require('webpack');
 
 const config = {
   entry: {
@@ -134,6 +135,9 @@ const config = {
     module: 'empty'
   },
   plugins: [
+    new webpack.DefinePlugin({
+      'process.env.DASHBOARD_VERSION': JSON.stringify(require('./package.json').version),
+    }),
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, './index.html'),
       filename: 'index.html',