feat(deploy): save credentials on overlay close

Closes #2860
camunda · Apr 5, 2022 · 7d24ed3 · 7d24ed3
1 parent 12d63b1
commit 7d24ed3
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 19 deletions.
diff --git a/client/src/plugins/zeebe-plugin/deployment-plugin/DeploymentPlugin.js b/client/src/plugins/zeebe-plugin/deployment-plugin/DeploymentPlugin.js
@@ -262,14 +262,19 @@ export default class DeploymentPlugin extends PureComponent {
 
     const p = pDefer();
 
-    const onClose = (config) => {
+    const onClose = (config, userAction) => {
 
       if (options.onClose) {
         options.onClose();
       }
 
       this.closeOverlay();
 
+      if (userAction === 'cancel') {
+        this.saveConfig(tab, config);
+        return p.resolve(null);
+      }
+
       return p.resolve(config);
     };
 
@@ -531,13 +536,14 @@ export default class DeploymentPlugin extends PureComponent {
     this.setState({ overlayState: null });
   }
 
-  onIconClicked = async () => {
+  onIconClicked = () => {
     const {
       overlayState
     } = this.state;
 
-    if (overlayState && !overlayState.isStart)
+    if (overlayState && !overlayState.isStart) {
       this.closeOverlay();
+    }
 
     else this.deploy();
   }

diff --git a/client/src/plugins/zeebe-plugin/deployment-plugin/DeploymentPluginOverlay.js b/client/src/plugins/zeebe-plugin/deployment-plugin/DeploymentPluginOverlay.js
@@ -68,7 +68,8 @@ export default class DeploymentPluginOverlay extends React.PureComponent {
     super(props);
 
     this.state = {
-      connectionState: { type: CONNECTION_STATE.INITIAL }
+      connectionState: { type: CONNECTION_STATE.INITIAL },
+      configValues: {}
     };
 
     const { validator } = props;
@@ -143,6 +144,16 @@ export default class DeploymentPluginOverlay extends React.PureComponent {
 
   scheduleConnectionCheck = formValues => {
     this.connectionChecker.check(formValues.endpoint);
+
+    const { endpoint } = formValues;
+
+    // Extract clusterId and clusterRegion as required by zeebeAPI for camundaCloud
+    if (endpoint.targetType === CAMUNDA_CLOUD && endpoint.camundaCloudClusterUrl) {
+      endpoint.camundaCloudClusterId = extractClusterId(endpoint.camundaCloudClusterUrl);
+      endpoint.camundaCloudClusterRegion = extractClusterRegion(endpoint.camundaCloudClusterUrl);
+    }
+
+    this.setState({ configValues: formValues });
   }
 
   handleConnectionCheckResult = result => {
@@ -194,7 +205,7 @@ export default class DeploymentPluginOverlay extends React.PureComponent {
       anchor
     } = this.props;
 
-    const onClose = () => closeOverlay(null);
+    const onClose = () => closeOverlay(this.state.configValues, 'cancel');
 
     const {
       validatorFunctionsByFieldNames
@@ -326,14 +337,11 @@ export default class DeploymentPluginOverlay extends React.PureComponent {
                             </React.Fragment>
                           )
                         }
-                        {
-                          (form.values.endpoint.authType !== AUTH_TYPES.NONE || form.values.endpoint.targetType === CAMUNDA_CLOUD) &&
-                            <Field
-                              name={ 'endpoint.rememberCredentials' }
-                              component={ ToggleSwitch }
-                              switcherLabel={ REMEMBER_CREDENTIALS }
-                            />
-                        }
+                        <Field
+                          name={ 'endpoint.rememberCredentials' }
+                          component={ ToggleSwitch }
+                          switcherLabel={ REMEMBER_CREDENTIALS }
+                        />
                       </div>
                     </fieldset>
                     <Section.Actions>
@@ -367,7 +375,8 @@ export default class DeploymentPluginOverlay extends React.PureComponent {
   * @return {string} camundaCloudClusterId
   */
 function extractClusterId(camundaCloudClusterUrl) {
-  return camundaCloudClusterUrl.match(/([a-z\d]+-){2,}[a-z\d]+/g)[0];
+  const matches = camundaCloudClusterUrl.match(/([a-z\d]+-){2,}[a-z\d]+/g);
+  return matches ? matches[0] : null;
 }
 
 
@@ -378,5 +387,6 @@ function extractClusterId(camundaCloudClusterUrl) {
  * @return {type} camundaCloudClusterRegion
  */
 function extractClusterRegion(camundaCloudClusterUrl) {
-  return camundaCloudClusterUrl.match(/(?<=\.)[a-z]+-[\d]+/g)[0];
+  const matches = camundaCloudClusterUrl.match(/(?<=\.)[a-z]+-[\d]+/g);
+  return matches ? matches[0] : null;
 }
diff --git a/client/src/plugins/zeebe-plugin/deployment-plugin/__tests__/DeploymentPluginOverlaySpec.js b/client/src/plugins/zeebe-plugin/deployment-plugin/__tests__/DeploymentPluginOverlaySpec.js
@@ -62,6 +62,44 @@ describe('<DeploymentPluginModal> (Zeebe)', () => {
   });
 
 
+  it('should check connection with updated cluster values on input change', (done) => {
+
+    // given
+    const spy = sinon.stub();
+    const validator = {
+      createConnectionChecker: () => createConnectionChecker({ check: spy })
+    };
+
+    const { wrapper } = createDeploymentPluginModal({
+      anchor,
+      validator,
+      config: {
+        endpoint: {
+          targetType: 'camundaCloud',
+          camundaCloudClusterUrl: '7edda473-891c-4978-aa27-2e727d8560ff.ber-5.zeebe.camunda.io:443'
+        }
+      }
+    });
+
+    // assume
+    expect(spy).to.have.been.calledOnce;
+    expect(spy.getCall(0).args[0].camundaCloudClusterId).to.equal('7edda473-891c-4978-aa27-2e727d8560ff');
+    expect(spy.getCall(0).args[0].camundaCloudClusterRegion).to.equal('ber-5');
+
+    // when
+    const input = wrapper.find('input[id="endpoint.camundaCloudClusterUrl"]');
+    input.instance().value = 'a-b-c.foo-1.zeebe.camunda.io:443';
+    input.simulate('change');
+
+    // then
+    expect(spy).to.have.been.calledTwice;
+    expect(spy.getCall(1).args[0].camundaCloudClusterId).to.equal('a-b-c');
+    expect(spy.getCall(1).args[0].camundaCloudClusterRegion).to.equal('foo-1');
+
+    done();
+  });
+
+
   it('should extract clusterId and clusterRegion', done => {
 
     // given

diff --git a/client/src/plugins/zeebe-plugin/deployment-plugin/__tests__/DeploymentPluginSpec.js b/client/src/plugins/zeebe-plugin/deployment-plugin/__tests__/DeploymentPluginSpec.js
@@ -263,6 +263,20 @@ describe('<DeploymentPlugin> (Zeebe)', () => {
   });
 
 
+  it('should save tab on close', async () => {
+
+    // given
+    const config = { set: sinon.spy() };
+    const { instance } = createDeploymentPlugin({ config, userAction: 'cancel' });
+
+    // when
+    await instance.deploy();
+
+    // then
+    expect(config.set).to.have.been.calledOnce;
+  });
+
+
   describe('ui', () => {
 
     const BUTTON_SELECTOR = '[title="Deploy current diagram"]';
@@ -1328,13 +1342,11 @@ class TestDeploymentPlugin extends DeploymentPlugin {
     } = this.props;
 
     if (overlayState) {
-      const action = userAction || 'deploy';
-
       if (userActionSpy) {
         userActionSpy();
       }
 
-      const config = action !== 'cancel' && {
+      const config = {
         endpoint: {
           ...overlayState.config.endpoint,
           ...endpoint
@@ -1346,7 +1358,7 @@ class TestDeploymentPlugin extends DeploymentPlugin {
       };
 
       if (!keepOpen) {
-        overlayState.onClose(config);
+        overlayState.onClose(config, userAction);
       }
     }
   }