chore: improve naming

camunda · Nov 1, 2024 · fbdc36d · fbdc36d
1 parent 4d1ce1f
commit fbdc36d
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 72 deletions.
diff --git 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 {
             <button className="btn btn-secondary" onClick={ onClose }> { BUTTON_NEGATIVE } </button>
             <button
               className="btn btn-primary"
-              onClick={ onGoToDownloadPage }
+              onClick={ onOpenDownloadUrl }
               autoFocus
             > { BUTTON_POSITIVE } </button>
           </div>

diff --git 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 }>
       <UpdateAvailableSection
         version={ props.version }
-        openVersionInfoPage={ props.openVersionInfoPage }
-        onGoToDownloadPage={ props.onGoToDownloadPage } />
+        onOpenNewVersionInfoView={ props.onOpenNewVersionInfoView }
+        onOpenDownloadUrl={ props.onOpenDownloadUrl } />
     </Overlay>
   );
 }
 
-function UpdateAvailableSection({ version, openVersionInfoPage, onGoToDownloadPage }) {
+function UpdateAvailableSection(props) {
+  const {
+    onOpenDownloadUrl,
+    onOpenNewVersionInfoView,
+    version
+  } = props;
+
   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>
+    <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>
   );
 }
diff --git 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,55 +364,43 @@ 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 (
       <React.Fragment>
         {
           updateAvailable && <Fill slot="status-bar__app" group="9_update_checks">
             <button
               className="btn btn--primary"
               title="Toggle update info"
-              onClick={ toggle }
-              ref={ buttonRef }
-            >Update</button>
+              onClick={ this.toggleUpdateAvailableOverlay }
+              ref={ this.updateAvailableButtonRef }>Update</button>
           </Fill>
         }
         {
-          openUpdateAvailablePopUp && <UpdateAvailableOverlay
-            anchor={ buttonRef.current }
-            openVersionInfoPage={ openVersionInfoPage }
-            onGoToDownloadPage={ this.onGoToDownloadPage }
-            onClose={ close }
+          updateAvailableOverlayOpen && <UpdateAvailableOverlay
+            anchor={ this.updateAvailableButtonRef.current }
+            onOpenNewVersionInfoView={ this.openNewVersionInfoView }
+            onOpenDownloadUrl={ this.onOpenDownloadUrl }
+            onClose={ this.closeUpdateAvailableOverlay }
             version={ latestVersionInfo.latestVersion } />
         }
         {
-          showModal && <NewVersionInfoView
-            onClose={ this.onClose }
-            onGoToDownloadPage={ this.onGoToDownloadPage }
+          newVersionInfoViewOpen && <NewVersionInfoView
+            onClose={ this.closeNewVersionInfoView }
+            onOpenDownloadUrl={ this.onOpenDownloadUrl }
             onOpenPrivacyPreferences={ this.openPrivacyPreferences }
             latestVersionInfo={ latestVersionInfo }
             updateChecksEnabled={ updateChecksEnabled }

diff --git a/client/src/plugins/update-checks/__tests__/NewVersionInfoViewSpec.js b/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;
   });
 
 

diff --git a/client/src/plugins/update-checks/__tests__/UpdateChecksSpec.js b/client/src/plugins/update-checks/__tests__/UpdateChecksSpec.js
@@ -396,7 +396,7 @@ describe('<UpdateChecks>', function() {
   });
 
 
-  describe('visuals', function() {
+  describe('UI', function() {
 
     it('should show modal for positive server response', async function() {
 
@@ -418,7 +418,7 @@ describe('<UpdateChecks>', 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('<UpdateChecks>', 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
@@ -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 (
     <section
-      className={ css.Section }
+      className={ classNames(css.Section, 'section', {
+        [ className ]: className
+      }) }
       style={ style }
     >
       { children }

diff --git a/client/src/shared/ui/__tests__/SectionSpec.js b/client/src/shared/ui/__tests__/SectionSpec.js
@@ -30,7 +30,7 @@ describe('<Section>', function() {
 
   it('should render', function() {
     const wrapper = shallow(
-      <Section>
+      <Section className="foo">
         <Section.Header>
           <span>{ 'HEADER' }</span>
           <Section.Actions>
@@ -44,7 +44,7 @@ describe('<Section>', function() {
     );
 
     expectHTML(wrapper, `
-      <section>
+      <section class="section foo">
         <h3 class="section__header">
           <span>HEADER</span>
           <span class="section__actions">