feat: update button

Closes #4407

client/src/app/status-bar/StatusBar.less

@@ -10,6 +10,7 @@
   --status-bar-active-font-color: var(--color-grey-225-10-15);
   --status-bar-active-icon-font-color: var(--color-grey-225-10-35);
   --status-bar-font-size: var(--font-size-default);
+  --status-bar-hover-update-button: var(--color-blue-205-100-45)
 }
 
 :local(.StatusBar) {
@@ -95,4 +96,18 @@
   .btn + .btn {
     margin-left: 1px;
   }
+
+  .update-btn {
+    background-color: rgba(0, 119, 204, 1);
+    color: rgb(254, 254, 254)
+  }
+
+  .update-btn:hover {
+    background-color: var(--status-bar-hover-update-button);
+  }
+
+  .update-btn:focus {
+    background-color: var(--status-bar-hover-update-button);
+  }
+
 }

client/src/plugins/report-feedback/ReportFeedback.js

@@ -100,7 +100,7 @@ export class ReportFeedback extends PureComponent {
 
     return (
       <Fragment>
-        <Fill slot="status-bar__app" group="9_feedback">
+        <Fill slot="status-bar__app" group="8_feedback">
           <button
             className={ classNames('btn', { 'btn--active': open }, css.ReportFeedback) }
             title="Provide Feedback"

client/src/plugins/update-checks/UpdateAvailableOverlay.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information regarding copyright
+ * ownership.
+ *
+ * Camunda licenses this file to you under the MIT; you may not use this file
+ * except in compliance with the MIT License.
+ */
+
+import React from 'react';
+
+import { Overlay, Section } from '../../shared/ui';
+
+import * as css from './UpdateAvailableOverlay.less';
+
+const OFFSET = { right: 0 };
+
+export function UpdateAvailableOverlay(props) {
+
+  return (
+    <Overlay
+      id="update-available-overlay" anchor={ props.anchor } onClose={ props.onClose } offset={ OFFSET }
+    >
+      <UpdateAvailableSection version={ props.version } openVersionInfoPage={ props.openVersionInfoPage } onGoToDownloadPage={ props.onGoToDownloadPage } />
+    </Overlay>
+  );
+}
+
+function UpdateAvailableSection({ version, openVersionInfoPage, onGoToDownloadPage }) {
+
+  return (
+    <div className={ css.UpdateAvailableOverlay }>
+      <Section maxHeight="500px">
+        <Section.Header>
+          Update available
+        </Section.Header>
+        <Section.Body>
+          <p>Camunda Desktop Modeler {version} is available for use.</p>
+          <a className="links" onClick={ onGoToDownloadPage }> Update now </a>
+          <a className="links" onClick={ openVersionInfoPage }>Learn what&apos;s new</a>
+        </Section.Body>
+      </Section>
+    </div>
+  );
+}

client/src/plugins/update-checks/UpdateAvailableOverlay.less

@@ -0,0 +1,9 @@
+:local(.UpdateAvailableOverlay) {
+
+    .links {
+        display: block;
+        padding: 2px;
+        cursor: pointer;
+    }
+  }
+

client/src/plugins/update-checks/UpdateChecks.js

@@ -20,8 +20,12 @@ import UpdateChecksAPI from './UpdateChecksAPI';
 
 import Flags, { DISABLE_REMOTE_INTERACTION, FORCE_UPDATE_CHECKS, UPDATE_SERVER_URL } from '../../util/Flags';
 
+import { Fill } from '../../app/slot-fill';
+
 import Metadata from '../../util/Metadata';
 
+import { UpdateAvailableOverlay } from './UpdateAvailableOverlay';
+
 const log = debug('UpdateChecks');
 
 class NoopComponent extends PureComponent {
@@ -45,7 +49,6 @@ export default class UpdateChecks extends PureComponent {
 
   constructor(props) {
     super(props);
-
     if (Flags.get(DISABLE_REMOTE_INTERACTION)) {
       return new NoopComponent();
     }
@@ -54,8 +57,12 @@ export default class UpdateChecks extends PureComponent {
 
     this.updateChecksAPI = new UpdateChecksAPI(updateServerUrl);
 
+    this._buttonRef = React.createRef(null);
+
     this.state = {
-      showModal: false
+      showModal: false,
+      openUpdateAvailablePopUp: false,
+      updateAvailable: false
     };
   }
 
@@ -72,7 +79,6 @@ export default class UpdateChecks extends PureComponent {
     subscribe('updateChecks.execute', async () => {
 
       const updateCheckInfo = await config.get(UPDATE_CHECKS_CONFIG_KEY) || {};
-
       self.checkLatestVersion({
         ...updateCheckInfo,
         stagedRollout: false,
@@ -212,7 +218,10 @@ export default class UpdateChecks extends PureComponent {
       return this.checkSkipped('not-due');
     }
 
-    return this.checkLatestVersion(updateCheckInfo);
+    return this.checkLatestVersion({
+      ...updateCheckInfo,
+      latestVersion: `v${Metadata.data.version}`
+    });
   }
 
   async handleUpdateCheckSuccess(update, silentCheck = true) {
@@ -254,21 +263,26 @@ export default class UpdateChecks extends PureComponent {
 
     this.setState({
       currentVersion,
+      updateAvailable : true,
       latestVersionInfo: {
         latestVersion,
         downloadURL,
         releases
       },
       updateChecksEnabled,
-      showModal: true
     });
 
+    if (!silentCheck) {
+      this.setState({
+        showModal: true
+      });
+    }
+
   }
 
   async checkLatestVersion(updateCheckInfo, silentCheck = true) {
 
     log('Checking for update');
-
     const {
       config,
       _getGlobal,
@@ -322,6 +336,23 @@ export default class UpdateChecks extends PureComponent {
     });
   };
 
+  toggle = () => {
+    log('toggle');
+    if (this.state.openUpdateAvailablePopUp) {
+      this.close();
+    } else {
+      this.open();
+    }
+  };
+
+  open = () => {
+    this.setState({ openUpdateAvailablePopUp: true });
+  };
+
+  close = () => {
+    this.setState({ openUpdateAvailablePopUp: false });
+  };
+
   onGoToDownloadPage = () => {
     const {
       latestVersionInfo
@@ -335,16 +366,45 @@ export default class UpdateChecks extends PureComponent {
     this.onClose();
   };
 
+  openVersionInfoPage = () => {
+    this.setState({
+      showModal: true,
+    });
+  };
+
   render() {
     const {
       showModal,
       latestVersionInfo,
       currentVersion,
-      updateChecksEnabled
+      updateChecksEnabled,
+      openUpdateAvailablePopUp,
+      updateAvailable
     } = this.state;
 
+    const {
+      toggle,
+      _buttonRef: buttonRef,
+      close,
+      openVersionInfoPage,
+    } = this;
     return (
       <React.Fragment>
+        {updateAvailable && <Fill slot="status-bar__app" group="9_update_checks">
+          <button
+            className="btn btn-primary update-btn"
+            title="Toggle update info"
+            onClick={ toggle }
+            ref={ buttonRef }
+          >{ 'Update' } </button>
+        </Fill>}
+        {openUpdateAvailablePopUp && <UpdateAvailableOverlay
+          anchor={ buttonRef.current }
+          openVersionInfoPage={ openVersionInfoPage }
+          onGoToDownloadPage={ this.onGoToDownloadPage }
+          onClose={ close }
+          version={ latestVersionInfo.latestVersion }
+        />}
         {showModal && (
           <NewVersionInfoView
             onClose={ this.onClose }
@@ -356,6 +416,7 @@ export default class UpdateChecks extends PureComponent {
           />
         )}
       </React.Fragment>
+
     );
   }
 }

client/src/plugins/version-info/VersionInfo.js

@@ -113,7 +113,7 @@ export class VersionInfo extends PureComponent {
 
     return (
       <Fragment>
-        <Fill slot="status-bar__app" group="9_version-info">
+        <Fill slot="status-bar__app" group="8_version-info">
           <button
             className={ classNames('btn', { 'btn--active': open }) }
             title="Toggle version info"