Update button

client/package.json

@@ -102,7 +102,7 @@
     "mocha": "^10.7.3",
     "mocha-test-container-support": "0.2.0",
     "npm-run-all2": "^7.0.0",
-    "puppeteer": "^23.6.0",
+    "puppeteer": "^23.6.1",
     "react-svg-loader": "^3.0.3",
     "react-test-renderer": "^16.14.0",
     "sinon": "^17.0.1",

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

@@ -10,6 +10,8 @@
   --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-primary-background-color: var(--color-blue-205-100-45);
+  --status-bar-primary-hover-background-color: var(--color-blue-205-100-40);
 }
 
 :local(.StatusBar) {
@@ -95,4 +97,14 @@
   .btn + .btn {
     margin-left: 1px;
   }
+
+  .btn--primary {
+    background-color: var(--status-bar-primary-background-color);
+    color: var(--color-white);
+  }
+
+  .btn--primary:hover,
+  .btn--primary:focus {
+    background-color: var(--status-bar-primary-hover-background-color);
+  }
 }

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/NewVersionInfoView.js

@@ -54,7 +54,7 @@ class NewVersionInfoView extends PureComponent {
       latestVersionInfo,
       currentVersion,
       onClose,
-      onGoToDownloadPage,
+      onOpenDownloadUrl,
       onOpenPrivacyPreferences,
       updateChecksEnabled
     } = this.props;
@@ -95,7 +95,7 @@ class NewVersionInfoView extends PureComponent {
             <button className="btn btn-secondary" onClick={ onClose }> { BUTTON_NEGATIVE } </button>
             <button
               className="btn btn-primary"
-              onClick={ onGoToDownloadPage }
+              onClick={ onOpenDownloadUrl }
               autoFocus
             > { BUTTON_POSITIVE } </button>
           </div>

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

@@ -0,0 +1,52 @@
+/**
+ * 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 }
+        onOpenNewVersionInfoView={ props.onOpenNewVersionInfoView }
+        onOpenDownloadUrl={ props.onOpenDownloadUrl } />
+    </Overlay>
+  );
+}
+
+function UpdateAvailableSection(props) {
+  const {
+    onOpenDownloadUrl,
+    onOpenNewVersionInfoView,
+    version
+  } = props;
+
+  return (
+    <Section className={ css.UpdateAvailableOverlay } maxHeight="500px">
+      <Section.Header>
+        Update available
+      </Section.Header>
+      <Section.Body>
+        <p>Camunda Desktop Modeler {version} is available for use.</p>
+        <a className="links" onClick={ onOpenDownloadUrl }>Update now</a>
+        <a className="links" onClick={ onOpenNewVersionInfoView }>Learn what&apos;s new</a>
+      </Section.Body>
+    </Section>
+  );
+}

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 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 @@
 
   constructor(props) {
     super(props);
-
     if (Flags.get(DISABLE_REMOTE_INTERACTION)) {
       return new NoopComponent();
     }
@@ -54,8 +57,12 @@
 
     this.updateChecksAPI = new UpdateChecksAPI(updateServerUrl);
 
+    this.updateAvailableButtonRef = React.createRef(null);
+
     this.state = {
-      showModal: false
+      newVersionInfoViewOpen: false,
+      updateAvailable: false,
+      updateAvailableOverlayOpen: false
     };
   }
 
@@ -72,7 +79,6 @@
     subscribe('updateChecks.execute', async () => {
 
       const updateCheckInfo = await config.get(UPDATE_CHECKS_CONFIG_KEY) || {};
-
       self.checkLatestVersion({
         ...updateCheckInfo,
         stagedRollout: false,
@@ -212,7 +218,10 @@
       return this.checkSkipped('not-due');
     }
 
-    return this.checkLatestVersion(updateCheckInfo);
+    return this.checkLatestVersion({
+      ...updateCheckInfo,
+      latestVersion: `v${Metadata.data.version}`
+    });
   }
 
   async handleUpdateCheckSuccess(update, silentCheck = true) {
@@ -254,19 +263,24 @@
 
     this.setState({
       currentVersion,
+      updateAvailable : true,
       latestVersionInfo: {
         latestVersion,
         downloadURL,
         releases
       },
       updateChecksEnabled,
-      showModal: true
     });
 
+    if (!silentCheck) {
+      this.setState({
+        newVersionInfoViewOpen: true
+      });
+    }
+
   }
 
   async checkLatestVersion(updateCheckInfo, silentCheck = true) {
-
     log('Checking for update');
 
     const {
@@ -316,13 +330,31 @@
     return Math.abs(Date.now() - previousTime) >= TWENTY_FOUR_HOURS_MS;
   }
 
-  onClose = () => {
-    this.setState({
-      showModal: false
-    });
+  openNewVersionInfoView = () => {
+    this.setState({ newVersionInfoViewOpen: true });
   };
 
-  onGoToDownloadPage = () => {
+  closeNewVersionInfoView = () => {
+    this.setState({ newVersionInfoViewOpen: false });
+  };
+
+  toggleUpdateAvailableOverlay = () => {
+    if (this.state.updateAvailableOverlayOpen) {
+      this.closeUpdateAvailableOverlay();
+    } else {
+      this.openUpdateAvailableOverlay();
+    }
+  };
+
+  openUpdateAvailableOverlay = () => {
+    this.setState({ updateAvailableOverlayOpen: true });
+  };
+
+  closeUpdateAvailableOverlay = () => {
+    this.setState({ updateAvailableOverlayOpen: false });
+  };
+
+  onOpenDownloadUrl = () => {
     const {
       latestVersionInfo
     } = this.state;
@@ -332,30 +364,50 @@
     } = this.props;
 
     _getGlobal('backend').send('external:open-url', { url: latestVersionInfo.downloadURL });
-    this.onClose();
+
+    this.closeNewVersionInfoView();
   };
 
   render() {
     const {
-      showModal,
+      newVersionInfoViewOpen,
       latestVersionInfo,
       currentVersion,
-      updateChecksEnabled
+      updateChecksEnabled,
+      updateAvailableOverlayOpen,
+      updateAvailable
     } = this.state;
 
     return (
       <React.Fragment>
-        {showModal && (
-          <NewVersionInfoView
-            onClose={ this.onClose }
-            onGoToDownloadPage={ this.onGoToDownloadPage }
+        {
+          updateAvailable && <Fill slot="status-bar__app" group="9_update_checks">
+            <button
+              className="btn btn--primary"
+              title="Toggle update info"
+              onClick={ this.toggleUpdateAvailableOverlay }
+              ref={ this.updateAvailableButtonRef }>Update</button>
+          </Fill>
+        }
+        {
+          updateAvailableOverlayOpen && <UpdateAvailableOverlay
+            anchor={ this.updateAvailableButtonRef.current }
+            onOpenNewVersionInfoView={ this.openNewVersionInfoView }
+            onOpenDownloadUrl={ this.onOpenDownloadUrl }
+            onClose={ this.closeUpdateAvailableOverlay }
+            version={ latestVersionInfo.latestVersion } />
+        }
+        {
+          newVersionInfoViewOpen && <NewVersionInfoView
+            onClose={ this.closeNewVersionInfoView }
+            onOpenDownloadUrl={ this.onOpenDownloadUrl }
             onOpenPrivacyPreferences={ this.openPrivacyPreferences }
             latestVersionInfo={ latestVersionInfo }
             updateChecksEnabled={ updateChecksEnabled }
-            currentVersion={ currentVersion }
-          />
-        )}
+            currentVersion={ currentVersion } />
+        }
       </React.Fragment>
+
     );
   }
 }

client/src/plugins/update-checks/__tests__/NewVersionInfoViewSpec.js

@@ -143,17 +143,17 @@ describe('<NewVersionInfoView>', function() {
 
   it('should go to download page', function() {
 
-    const onGoToDownloadPageSpy = spy();
+    const onOpenDownloadUrlSpy = spy();
 
     const component = shallow(
-      <NewVersionInfoView latestVersionInfo={ {} } onGoToDownloadPage={ onGoToDownloadPageSpy } />
+      <NewVersionInfoView latestVersionInfo={ {} } onOpenDownloadUrl={ onOpenDownloadUrlSpy } />
     );
 
     const positiveButton = component.find('.btn-primary');
 
     positiveButton.simulate('click');
 
-    expect(onGoToDownloadPageSpy).to.have.been.called;
+    expect(onOpenDownloadUrlSpy).to.have.been.called;
   });