From b0fc1731402512e634d3189fd101ed5c1f472cff Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Thu, 1 Aug 2024 04:36:43 +0300
Subject: [PATCH] New: Display build version in header

---
 frontend/src/Components/Page/Header/PageHeader.css   |  5 +++++
 .../src/Components/Page/Header/PageHeader.css.d.ts   |  1 +
 frontend/src/Components/Page/Header/PageHeader.js    | 12 ++++++++++++
 frontend/src/Components/Page/Page.js                 |  4 ++++
 frontend/src/Components/Page/PageConnector.js        |  3 +++
 5 files changed, 25 insertions(+)

diff --git a/frontend/src/Components/Page/Header/PageHeader.css b/frontend/src/Components/Page/Header/PageHeader.css
index b94bd64b8..464f2eff8 100644
--- a/frontend/src/Components/Page/Header/PageHeader.css
+++ b/frontend/src/Components/Page/Header/PageHeader.css
@@ -37,6 +37,11 @@
   flex-grow: 1;
 }
 
+.version {
+  margin-right: 5px;
+  line-height: 60px;
+}
+
 .donate {
   composes: link from '~Components/Link/Link.css';
 
diff --git a/frontend/src/Components/Page/Header/PageHeader.css.d.ts b/frontend/src/Components/Page/Header/PageHeader.css.d.ts
index 7a982dda7..2b1c39ced 100644
--- a/frontend/src/Components/Page/Header/PageHeader.css.d.ts
+++ b/frontend/src/Components/Page/Header/PageHeader.css.d.ts
@@ -8,6 +8,7 @@ interface CssExports {
   'logoLink': string;
   'right': string;
   'sidebarToggleContainer': string;
+  'version': string;
 }
 export const cssExports: CssExports;
 export default cssExports;
diff --git a/frontend/src/Components/Page/Header/PageHeader.js b/frontend/src/Components/Page/Header/PageHeader.js
index 2af052015..7e06ee1c3 100644
--- a/frontend/src/Components/Page/Header/PageHeader.js
+++ b/frontend/src/Components/Page/Header/PageHeader.js
@@ -46,6 +46,8 @@ class PageHeader extends Component {
 
   render() {
     const {
+      version,
+      isSmallScreen,
       onSidebarToggle
     } = this.props;
 
@@ -75,6 +77,14 @@ class PageHeader extends Component {
         <SeriesSearchInputConnector />
 
         <div className={styles.right}>
+          {
+            !isSmallScreen && version ?
+              <div className={styles.version} title={translate('Version')}>
+                v{version}
+              </div> :
+              null
+          }
+
           <IconButton
             className={styles.donate}
             name={icons.HEART}
@@ -98,6 +108,8 @@ class PageHeader extends Component {
 }
 
 PageHeader.propTypes = {
+  version: PropTypes.string.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
   onSidebarToggle: PropTypes.func.isRequired,
   bindShortcut: PropTypes.func.isRequired
 };
diff --git a/frontend/src/Components/Page/Page.js b/frontend/src/Components/Page/Page.js
index 1386865e8..73c0a340e 100644
--- a/frontend/src/Components/Page/Page.js
+++ b/frontend/src/Components/Page/Page.js
@@ -77,6 +77,7 @@ class Page extends Component {
       isSidebarVisible,
       enableColorImpairedMode,
       authenticationEnabled,
+      version,
       onSidebarToggle,
       onSidebarVisibleChange
     } = this.props;
@@ -87,6 +88,8 @@ class Page extends Component {
           <SignalRConnector />
 
           <PageHeader
+            version={version}
+            isSmallScreen={isSmallScreen}
             onSidebarToggle={onSidebarToggle}
           />
 
@@ -130,6 +133,7 @@ Page.propTypes = {
   isDisconnected: PropTypes.bool.isRequired,
   enableColorImpairedMode: PropTypes.bool.isRequired,
   authenticationEnabled: PropTypes.bool.isRequired,
+  version: PropTypes.string.isRequired,
   onResize: PropTypes.func.isRequired,
   onSidebarToggle: PropTypes.func.isRequired,
   onSidebarVisibleChange: PropTypes.func.isRequired
diff --git a/frontend/src/Components/Page/PageConnector.js b/frontend/src/Components/Page/PageConnector.js
index 95416ea3c..e77e8b0ee 100644
--- a/frontend/src/Components/Page/PageConnector.js
+++ b/frontend/src/Components/Page/PageConnector.js
@@ -259,6 +259,7 @@ class PageConnector extends Component {
       dispatchFetchUISettings,
       dispatchFetchStatus,
       dispatchFetchTranslations,
+      version,
       ...otherProps
     } = this.props;
 
@@ -275,6 +276,7 @@ class PageConnector extends Component {
       return (
         <Page
           {...otherProps}
+          version={version}
           onSidebarToggle={this.onSidebarToggle}
         />
       );
@@ -300,6 +302,7 @@ PageConnector.propTypes = {
   dispatchFetchUISettings: PropTypes.func.isRequired,
   dispatchFetchStatus: PropTypes.func.isRequired,
   dispatchFetchTranslations: PropTypes.func.isRequired,
+  version: PropTypes.string.isRequired,
   onSidebarVisibleChange: PropTypes.func.isRequired
 };