New: Display build version in header

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';
 

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;

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
 };

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

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
 };