Generate library version when doing a build (#1385)

* Generate library version when doing a build

* add also prettier version.ts

* resolved comments

* Replaced badge with mouse over tooltip

Author: Georgi2704

.changeset/wicked-crabs-do.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': patch
+---
+
+Display orchestrator-ui-library version in header

packages/orchestrator-ui-components/package.json

@@ -23,7 +23,8 @@
     ],
     "scripts": {
         "test": "jest",
-        "build": "tsup src/index.ts --format esm --dts --tsconfig tsconfig.build.json",
+        "generate-version": "node -p \"'export const ORCHESTRATOR_UI_LIBRARY_VERSION = ' + JSON.stringify(require('./package.json').version) + ';'\" > src/configuration/version.ts && prettier --write src/configuration/version.ts",
+        "build": "npm run generate-version && tsup src/index.ts --format esm --dts --tsconfig tsconfig.build.json",
         "tsc": "tsc --noEmit",
         "lint": "eslint \"src/**/*.ts*\"",
         "dev": "npm run build -- --watch",

packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx

@@ -9,6 +9,7 @@ import {
     EuiHeaderLogo,
     EuiHeaderSection,
     EuiHeaderSectionItem,
+    EuiToolTip,
 } from '@elastic/eui';
 import type { EuiThemeColorMode } from '@elastic/eui';
 
@@ -19,6 +20,7 @@ import {
 } from '@/components';
 import { WfoAppLogo } from '@/components/WfoPageTemplate/WfoPageHeader/WfoAppLogo';
 import { getWfoPageHeaderStyles } from '@/components/WfoPageTemplate/WfoPageHeader/styles';
+import { ORCHESTRATOR_UI_LIBRARY_VERSION } from '@/configuration';
 import {
     useGetOrchestratorConfig,
     useOrchestratorTheme,
@@ -50,11 +52,14 @@ export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
     return (
         <EuiHeader css={getHeaderStyle(navigationHeight)}>
             <EuiHeaderSection>
-                <EuiHeaderSectionItem>
-                    <EuiHeaderLogo iconType={() => <WfoAppLogo />} />
-                    <div css={appNameStyle}>{getAppLogo(navigationHeight)}</div>
-                </EuiHeaderSectionItem>
-
+                <EuiToolTip content={'v' + ORCHESTRATOR_UI_LIBRARY_VERSION}>
+                    <EuiHeaderSectionItem css={{ paddingTop: theme.size.xs }}>
+                        <EuiHeaderLogo iconType={() => <WfoAppLogo />} />
+                        <div css={appNameStyle}>
+                            {getAppLogo(navigationHeight)}
+                        </div>
+                    </EuiHeaderSectionItem>
+                </EuiToolTip>
                 <EuiHeaderSectionItem>
                     <WfoEnvironmentBadge />
                 </EuiHeaderSectionItem>

packages/orchestrator-ui-components/src/configuration/index.ts

@@ -1,2 +1,3 @@
 export * from './constants';
 export * from './policy-resources';
+export * from './version';

packages/orchestrator-ui-components/src/configuration/version.ts

@@ -0,0 +1 @@
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '1.38.0';