Add UI version

apps/koku-ui-hccm/fec.config.js

@@ -1,6 +1,7 @@
 // Based on https://github.com/RedHatInsights/frontend-components/blob/master/packages/config/src/bin/dev.webpack.config.ts
 
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const { GitRevisionPlugin } = require('git-revision-webpack-plugin');
 const path = require('path');
 const webpack = require('webpack');
 const { dependencies, insights } = require('./package.json');
@@ -14,6 +15,7 @@ const stats = {
   colors: true,
   modules: false,
 };
+const gitRevisionPlugin = new GitRevisionPlugin();
 
 // Show what files changed since last compilation
 class WatchRunPlugin {
@@ -85,6 +87,11 @@ module.exports = {
         },
       ],
     }),
+    gitRevisionPlugin,
+    new webpack.DefinePlugin({
+      'process.env.COMMITHASH': JSON.stringify(gitRevisionPlugin.commithash()),
+      'process.env.BRANCH': JSON.stringify(gitRevisionPlugin.branch()),
+    }),
   ],
   resolve: {
     modules: [srcDir, path.resolve(__dirname, '../../node_modules')],

apps/koku-ui-hccm/package.json

@@ -115,6 +115,7 @@
     "@types/react-redux": "^7.1.34",
     "@types/react-router-dom": "^5.3.3",
     "copy-webpack-plugin": "^13.0.1",
+    "git-revision-webpack-plugin": "^5.0.0",
     "globals": "^16.5.0",
     "identity-obj-proxy": "^3.0.0",
     "ts-patch": "^3.3.0",

apps/koku-ui-hccm/src/app.tsx

@@ -1,5 +1,6 @@
 import './app.scss';
 
+import UiVersion from '@koku-ui/ui-lib/components/page/uiVersion';
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
 import NotificationsProvider from '@redhat-cloud-services/frontend-components-notifications/NotificationsProvider';
 import { createStore } from '@redhat-cloud-services/frontend-components-notifications/state';
@@ -37,6 +38,7 @@ const App = () => {
       <NotificationsProvider store={store}>
         <Routes />
       </NotificationsProvider>
+      <UiVersion appName={pkg.name} />
     </div>
   );
 };

apps/koku-ui-hccm/src/routes.tsx

@@ -3,7 +3,7 @@ import { userAccess } from 'components/userAccess';
 import React, { lazy, Suspense } from 'react';
 import { Route, Routes as RouterRoutes } from 'react-router-dom';
 
-const NotFound = lazy(() => import(/* webpackChunkName: "NotFound" */ '@koku-ui/ui-lib/components/NotFound/NotFound'));
+const NotFound = lazy(() => import(/* webpackChunkName: "NotFound" */ '@koku-ui/ui-lib/components/page/notFound'));
 const AwsBreakdown = lazy(() => import(/* webpackChunkName: "awsBreakdown" */ 'routes/details/awsBreakdown'));
 const AwsDetails = lazy(() => import(/* webpackChunkName: "awsDetails" */ 'routes/details/awsDetails'));
 const AzureBreakdown = lazy(() => import(/* webpackChunkName: "azureBreakdown" */ 'routes/details/azureBreakdown'));

apps/koku-ui-onprem/src/components/App/App.tsx

@@ -1,4 +1,4 @@
-import NotFound from '@koku-ui/ui-lib/components/NotFound/NotFound';
+import NotFound from '@koku-ui/ui-lib/components/page/notFound';
 import React from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 

apps/koku-ui-ros/fec.config.js

@@ -1,6 +1,7 @@
 // Based on https://github.com/RedHatInsights/frontend-components/blob/master/packages/config/src/bin/dev.webpack.config.ts
 
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const { GitRevisionPlugin } = require('git-revision-webpack-plugin');
 const path = require('path');
 const webpack = require('webpack');
 const { dependencies, insights } = require('./package.json');
@@ -14,6 +15,7 @@ const stats = {
   colors: true,
   modules: false,
 };
+const gitRevisionPlugin = new GitRevisionPlugin();
 
 // Show what files changed since last compilation
 class WatchRunPlugin {
@@ -89,6 +91,11 @@ module.exports = {
         },
       ],
     }),
+    gitRevisionPlugin,
+    new webpack.DefinePlugin({
+      'process.env.COMMITHASH': JSON.stringify(gitRevisionPlugin.commithash()),
+      'process.env.BRANCH': JSON.stringify(gitRevisionPlugin.branch()),
+    }),
   ],
   resolve: {
     modules: [srcDir, path.resolve(__dirname, '../../node_modules')],

apps/koku-ui-ros/package.json

@@ -110,6 +110,7 @@
     "@types/react-router-dom": "^5.3.3",
     "copy-webpack-plugin": "^13.0.1",
     "globals": "^16.5.0",
+    "git-revision-webpack-plugin": "^5.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jws": "^4.0.0",
     "ts-patch": "^3.3.0",

apps/koku-ui-ros/src/app.tsx

@@ -1,5 +1,6 @@
 import './app.scss';
 
+import UiVersion from '@koku-ui/ui-lib/components/page/uiVersion';
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
 import NotificationsProvider from '@redhat-cloud-services/frontend-components-notifications/NotificationsProvider';
 import { createStore } from '@redhat-cloud-services/frontend-components-notifications/state';
@@ -37,6 +38,7 @@ const App = () => {
       <NotificationsProvider store={store}>
         <Routes />
       </NotificationsProvider>
+      <UiVersion appName={pkg.name} />
     </div>
   );
 };

apps/koku-ui-ros/src/fed-modules/optimizationsWrapper.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+import UiVersion from '@koku-ui/ui-lib/components/page/uiVersion';
 import IntlProvider from '@redhat-cloud-services/frontend-components-translations/Provider';
 import { getLocale } from 'components/i18n';
 import React from 'react';
@@ -7,6 +8,8 @@ import { rosStore } from 'store';
 
 // eslint-disable-next-line no-restricted-imports
 import messages from '../../locales/data.json';
+// eslint-disable-next-line no-restricted-imports
+import pkg from '../../package.json';
 
 export interface OptimizationsWrapperOwnProps {
   children?: React.ReactNode;
@@ -22,6 +25,7 @@ const OptimizationsWrapper: React.FC<OptimizationsWrapperProps> = ({ children }:
     <IntlProvider defaultLocale="en" locale={locale} messages={messages[locale]} onError={console.log}>
       <Provider store={rosStore as any}>
         <div className="costManagementRos">{children}</div>
+        <UiVersion appName={pkg.name} />
       </Provider>
     </IntlProvider>
   );

apps/koku-ui-ros/src/routes.tsx

@@ -3,7 +3,7 @@ import { userAccess } from 'components/userAccess';
 import React, { lazy, Suspense } from 'react';
 import { Route, Routes as RouterRoutes } from 'react-router-dom';
 
-const NotFound = lazy(() => import(/* webpackChunkName: "NotFound" */ '@koku-ui/ui-lib/components/NotFound/NotFound'));
+const NotFound = lazy(() => import(/* webpackChunkName: "NotFound" */ '@koku-ui/ui-lib/components/page/notFound'));
 const OptimizationsBadgeStaging = lazy(
   () => import(/* webpackChunkName: "recommendations" */ 'routes/staging/optimizations/optimizationsBadgeStaging')
 );

libs/ui-lib/src/components/page/uiVersion/index.ts

@@ -0,0 +1,3 @@
+import UiVersion from './uiVersion';
+
+export default UiVersion;

libs/ui-lib/src/components/page/uiVersion/uiVersion.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface UiVersionProps {
+  appName?: string;
+}
+
+const UiVersion = ({ appName = '@koku-ui' }: UiVersionProps) => {
+  const branch = process.env.BRANCH ?? 'unknown-branch';
+  const commithash = process.env.COMMITHASH ?? 'unknown-commithash';
+
+  return <div id={`${appName}:${branch}:${commithash}`} hidden />;
+};
+
+export default UiVersion;