diff --git a/client/src/plugins/update-checks/NewVersionInfoView.js b/client/src/plugins/update-checks/NewVersionInfoView.js index 60c3495d37..862e718372 100644 --- a/client/src/plugins/update-checks/NewVersionInfoView.js +++ b/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 { diff --git a/client/src/plugins/update-checks/UpdateAvailableOverlay.js b/client/src/plugins/update-checks/UpdateAvailableOverlay.js index 753790f898..0e309dc1b5 100644 --- a/client/src/plugins/update-checks/UpdateAvailableOverlay.js +++ b/client/src/plugins/update-checks/UpdateAvailableOverlay.js @@ -24,25 +24,29 @@ export function UpdateAvailableOverlay(props) { offset={ OFFSET }> + onOpenNewVersionInfoView={ props.onOpenNewVersionInfoView } + onOpenDownloadUrl={ props.onOpenDownloadUrl } /> ); } -function UpdateAvailableSection({ version, openVersionInfoPage, onGoToDownloadPage }) { +function UpdateAvailableSection(props) { + const { + onOpenDownloadUrl, + onOpenNewVersionInfoView, + version + } = props; + return ( -
-
- - Update available - - -

Camunda Desktop Modeler {version} is available for use.

- Update now - Learn what's new -
-
-
+
+ + Update available + + +

Camunda Desktop Modeler {version} is available for use.

+ Update now + Learn what's new +
+
); } \ No newline at end of file diff --git a/client/src/plugins/update-checks/UpdateChecks.js b/client/src/plugins/update-checks/UpdateChecks.js index f579e8665c..b11fd97d54 100644 --- a/client/src/plugins/update-checks/UpdateChecks.js +++ b/client/src/plugins/update-checks/UpdateChecks.js @@ -57,12 +57,12 @@ export default class UpdateChecks extends PureComponent { this.updateChecksAPI = new UpdateChecksAPI(updateServerUrl); - this._buttonRef = React.createRef(null); + this.updateAvailableButtonRef = React.createRef(null); this.state = { - showModal: false, - openUpdateAvailablePopUp: false, - updateAvailable: false + newVersionInfoViewOpen: false, + updateAvailable: false, + updateAvailableOverlayOpen: false }; } @@ -274,15 +274,15 @@ export default class UpdateChecks extends PureComponent { if (!silentCheck) { this.setState({ - showModal: true + newVersionInfoViewOpen: true }); } } async checkLatestVersion(updateCheckInfo, silentCheck = true) { - log('Checking for update'); + const { config, _getGlobal, @@ -330,30 +330,31 @@ export default class UpdateChecks extends PureComponent { return Math.abs(Date.now() - previousTime) >= TWENTY_FOUR_HOURS_MS; } - onClose = () => { - this.setState({ - showModal: false - }); + openNewVersionInfoView = () => { + this.setState({ newVersionInfoViewOpen: true }); + }; + + closeNewVersionInfoView = () => { + this.setState({ newVersionInfoViewOpen: false }); }; - toggle = () => { - log('toggle'); - if (this.state.openUpdateAvailablePopUp) { - this.close(); + toggleUpdateAvailableOverlay = () => { + if (this.state.updateAvailableOverlayOpen) { + this.closeUpdateAvailableOverlay(); } else { - this.open(); + this.openUpdateAvailableOverlay(); } }; - open = () => { - this.setState({ openUpdateAvailablePopUp: true }); + openUpdateAvailableOverlay = () => { + this.setState({ updateAvailableOverlayOpen: true }); }; - close = () => { - this.setState({ openUpdateAvailablePopUp: false }); + closeUpdateAvailableOverlay = () => { + this.setState({ updateAvailableOverlayOpen: false }); }; - onGoToDownloadPage = () => { + onOpenDownloadUrl = () => { const { latestVersionInfo } = this.state; @@ -363,31 +364,20 @@ export default class UpdateChecks extends PureComponent { } = this.props; _getGlobal('backend').send('external:open-url', { url: latestVersionInfo.downloadURL }); - this.onClose(); - }; - openVersionInfoPage = () => { - this.setState({ - showModal: true, - }); + this.closeNewVersionInfoView(); }; render() { const { - showModal, + newVersionInfoViewOpen, latestVersionInfo, currentVersion, updateChecksEnabled, - openUpdateAvailablePopUp, + updateAvailableOverlayOpen, updateAvailable } = this.state; - const { - toggle, - _buttonRef: buttonRef, - close, - openVersionInfoPage, - } = this; return ( { @@ -395,23 +385,22 @@ export default class UpdateChecks extends PureComponent { + onClick={ this.toggleUpdateAvailableOverlay } + ref={ this.updateAvailableButtonRef }>Update } { - openUpdateAvailablePopUp && } { - showModal && ', function() { it('should go to download page', function() { - const onGoToDownloadPageSpy = spy(); + const onOpenDownloadUrlSpy = spy(); const component = shallow( - + ); const positiveButton = component.find('.btn-primary'); positiveButton.simulate('click'); - expect(onGoToDownloadPageSpy).to.have.been.called; + expect(onOpenDownloadUrlSpy).to.have.been.called; }); diff --git a/client/src/plugins/update-checks/__tests__/UpdateChecksSpec.js b/client/src/plugins/update-checks/__tests__/UpdateChecksSpec.js index aeaee0737e..63aeded001 100644 --- a/client/src/plugins/update-checks/__tests__/UpdateChecksSpec.js +++ b/client/src/plugins/update-checks/__tests__/UpdateChecksSpec.js @@ -396,7 +396,7 @@ describe('', function() { }); - describe('visuals', function() { + describe('UI', function() { it('should show modal for positive server response', async function() { @@ -418,7 +418,7 @@ describe('', function() { await instance.checkLatestVersion(update, false); // then - expect(component.state().showModal).to.be.true; + expect(component.state().newVersionInfoViewOpen).to.be.true; }); @@ -435,7 +435,7 @@ describe('', function() { await tick(component); // then - expect(component.state().showModal).to.be.false; + expect(component.state().newVersionInfoViewOpen).to.be.false; }); diff --git a/client/src/shared/ui/Section.js b/client/src/shared/ui/Section.js index 1dd806f78d..e92880de6b 100644 --- a/client/src/shared/ui/Section.js +++ b/client/src/shared/ui/Section.js @@ -12,13 +12,15 @@ import { isString } from 'min-dash'; import React from 'react'; -import * as css from './Section.less'; +import classNames from 'classnames'; +import * as css from './Section.less'; export function Section(props) { const { children, + className, maxHeight, relativePos } = props; @@ -47,7 +49,9 @@ export function Section(props) { return (
{ children } diff --git a/client/src/shared/ui/__tests__/SectionSpec.js b/client/src/shared/ui/__tests__/SectionSpec.js index 1baa0535ea..daf0c55e66 100644 --- a/client/src/shared/ui/__tests__/SectionSpec.js +++ b/client/src/shared/ui/__tests__/SectionSpec.js @@ -30,7 +30,7 @@ describe('
', function() { it('should render', function() { const wrapper = shallow( -
+
{ 'HEADER' } @@ -44,7 +44,7 @@ describe('
', function() { ); expectHTML(wrapper, ` -
+

HEADER