dynamic cockpit link resolution via well known endpoint

client/src/plugins/camunda-plugin/deployment-tool/DeploymentConfigOverlay.js

@@ -30,6 +30,7 @@ import {
   Formik,
   Field
 } from 'formik';
+import { GenericApiErrors } from '../shared/RestAPI';
 
 export default class DeploymentConfigOverlay extends React.PureComponent {
 
@@ -153,7 +154,7 @@ export default class DeploymentConfigOverlay extends React.PureComponent {
         code
       } = connectionValidation;
 
-      if (code === 'UNAUTHORIZED') {
+      if (code === GenericApiErrors.UNAUTHORIZED) {
         this.setState({
           isAuthNeeded: true
         });
@@ -213,7 +214,7 @@ export default class DeploymentConfigOverlay extends React.PureComponent {
       if (!result) {
         this.onAuthDetection(false);
       } else if (!result.isExpired) {
-        this.onAuthDetection(!!result && (result.code === 'UNAUTHORIZED'));
+        this.onAuthDetection(!!result && (result.code === GenericApiErrors.UNAUTHORIZED));
       }
     });
   };

client/src/plugins/camunda-plugin/deployment-tool/DeploymentTool.js

@@ -14,12 +14,14 @@ import { omit } from 'min-dash';
 
 import classNames from 'classnames';
 
-import { default as CamundaAPI, ApiErrors, ConnectionError } from '../shared/CamundaAPI';
+import { default as CamundaAPI, DeploymentError } from '../shared/CamundaAPI';
+import { ConnectionError, GenericApiErrors } from '../shared/RestAPI';
 import AUTH_TYPES from '../shared/AuthTypes';
 
+import CockpitDeploymentLink from '../shared/ui/CockpitDeploymentLink';
+
 import DeploymentConfigOverlay from './DeploymentConfigOverlay';
 import DeploymentConfigValidator from './validation/DeploymentConfigValidator';
-import { DeploymentError } from '../shared/CamundaAPI';
 
 import * as css from './DeploymentTool.less';
 
@@ -32,6 +34,7 @@ import { Fill } from '../../../app/slot-fill';
 import DeployIcon from 'icons/Deploy.svg';
 
 import { ENGINES } from '../../../util/Engines';
+import { determineCockpitUrl } from '../shared/webAppUrls';
 
 const DEPLOYMENT_DETAILS_CONFIG_KEY = 'deployment-tool';
 const ENGINE_ENDPOINTS_CONFIG_KEY = 'camundaEngineEndpoints';
@@ -175,7 +178,7 @@ export default class DeploymentTool extends PureComponent {
     }
   }
 
-  handleDeploymentSuccess(tab, deployment, version, configuration) {
+  async handleDeploymentSuccess(tab, deployment, version, configuration) {
     const {
       displayNotification,
       triggerAction
@@ -189,10 +192,12 @@ export default class DeploymentTool extends PureComponent {
       url
     } = endpoint;
 
+    const cockpitUrl = await this.getCockpitUrl(url);
+
     displayNotification({
       type: 'success',
       title: `${getDeploymentType(tab)} deployed`,
-      content: <CockpitLink endpointUrl={ url } deployment={ deployment } />,
+      content: <CockpitDeploymentLink cockpitUrl={ cockpitUrl } deployment={ deployment } />,
       duration: 8000
     });
 
@@ -211,6 +216,10 @@ export default class DeploymentTool extends PureComponent {
     });
   }
 
+  async getCockpitUrl(engineUrl) {
+    return await determineCockpitUrl(engineUrl);
+  }
+
   async saveProcessDefinition(tab, deployment) {
 
     if (!deployment || !deployment.deployedProcessDefinition) {
@@ -533,9 +542,9 @@ export default class DeploymentTool extends PureComponent {
 
     const { code } = result;
 
-    return (code !== ApiErrors.NO_INTERNET_CONNECTION &&
-            code !== ApiErrors.CONNECTION_FAILED &&
-              code !== ApiErrors.NOT_FOUND);
+    return (code !== GenericApiErrors.NO_INTERNET_CONNECTION &&
+            code !== GenericApiErrors.CONNECTION_FAILED &&
+              code !== GenericApiErrors.NOT_FOUND);
   }
 
   closeOverlay(overlayState) {
@@ -597,39 +606,6 @@ export default class DeploymentTool extends PureComponent {
 
 }
 
-function CockpitLink(props) {
-  const {
-    endpointUrl,
-    deployment
-  } = props;
-
-  const {
-    id,
-    deployedProcessDefinition
-  } = deployment;
-
-  const baseUrl = getWebAppsBaseUrl(endpointUrl);
-
-  const query = `deploymentsQuery=%5B%7B%22type%22:%22id%22,%22operator%22:%22eq%22,%22value%22:%22${id}%22%7D%5D`;
-  const cockpitUrl = `${baseUrl}/cockpit/default/#/repository/?${query}`;
-
-  return (
-    <div className={ css.CockpitLink }>
-      {deployedProcessDefinition ?
-        (
-          <div>
-            Process definition ID:
-            <code>{deployedProcessDefinition.id} </code>
-          </div>
-        )
-        : null}
-      <a href={ cockpitUrl }>
-        Open in Camunda Cockpit
-      </a>
-    </div>
-  );
-}
-
 // helpers //////////
 
 function withoutExtension(name) {
@@ -697,13 +673,3 @@ function withSerializedAttachments(deployment) {
 function basename(filePath) {
   return filePath.split('\\').pop().split('/').pop();
 }
-
-function getWebAppsBaseUrl(url) {
-  const [ protocol,, host, restRoot ] = url.split('/');
-
-  return isTomcat(restRoot) ? `${protocol}//${host}/camunda/app` : `${protocol}//${host}/app`;
-}
-
-function isTomcat(restRoot) {
-  return restRoot === 'engine-rest';
-}

client/src/plugins/camunda-plugin/deployment-tool/DeploymentTool.less

@@ -4,11 +4,4 @@
     height: 24px;
     fill: var(--status-bar-icon-font-color);
   }
-}
-
-:local(.CockpitLink) {
-
-  & > div {
-    margin-bottom: 5px;
-  }
 }

client/src/plugins/camunda-plugin/deployment-tool/__tests__/DeploymentConfigOverlaySpec.js

@@ -12,7 +12,7 @@
 
 import React from 'react';
 
-import { act } from 'react-dom/test-utils';
+import { waitFor } from '@testing-library/react';
 
 import {
   mount,
@@ -24,6 +24,7 @@ import { merge } from 'min-dash';
 import AUTH_TYPES from '../../shared/AuthTypes';
 import DeploymentConfigOverlay from '../DeploymentConfigOverlay';
 import DeploymentConfigValidator from '../validation/DeploymentConfigValidator';
+import { GenericApiErrors } from '../../shared/RestAPI';
 
 let mounted;
 
@@ -75,7 +76,7 @@ describe('<DeploymentConfigOverlay>', () => {
     });
 
 
-    it('should display hint if the username and password are missing when submitting', (done) => {
+    it('should display hint if the username and password are missing when submitting', async () => {
 
       // given
       const configuration = {
@@ -92,7 +93,7 @@ describe('<DeploymentConfigOverlay>', () => {
       const validator = new MockValidator({
         validateConnection: () => new Promise((resolve, err) => {
           resolve({
-            code: 'UNAUTHORIZED'
+            code: GenericApiErrors.UNAUTHORIZED
           });
         })
       });
@@ -106,7 +107,6 @@ describe('<DeploymentConfigOverlay>', () => {
         validator
       }, mount);
 
-      // when
       setTimeout(() => {
 
         // delayed execution because it is async that the deployment
@@ -116,15 +116,14 @@ describe('<DeploymentConfigOverlay>', () => {
       });
 
       // then
-      setTimeout(() => {
+      await waitFor(() => {
         wrapper.update();
         expect(wrapper.find('.invalid-feedback')).to.have.length(2);
-        done();
-      }, 200);
+      });
     });
 
 
-    it('should display hint if token is missing', (done) => {
+    it('should display hint if token is missing', async () => {
 
       // given
       const configuration = {
@@ -138,43 +137,39 @@ describe('<DeploymentConfigOverlay>', () => {
         }
       };
 
+      const validator = new MockValidator({
+        validateConnection: () => Promise.resolve({
+          code: GenericApiErrors.UNAUTHORIZED
+        })
+      });
+
       const {
         wrapper,
         instance
       } = createOverlay({
         anchor,
-        configuration
+        configuration,
+        validator
       }, mount);
 
-      // when
-      act(() => {
-        instance.setState({ isAuthNeeded: true });
-      });
 
-      instance.isOnBeforeSubmit = true;
-
-      wrapper.update();
+      setTimeout(() => {
 
-      act(() => {
+        // delayed execution because it is async that the deployment
+        // tool knows if the authentication is necessary
+        instance.isOnBeforeSubmit = true;
         wrapper.find('.btn-primary').simulate('submit');
       });
 
       // then
-      setTimeout(() => {
+      await waitFor(() => {
         wrapper.update();
-
-        try {
-          expect(wrapper.find('.invalid-feedback')).to.have.length(1);
-        } catch (err) {
-          return done(err);
-        }
-
-        return done();
-      }, 100);
+        expect(wrapper.find('.invalid-feedback')).to.have.length(1);
+      });
     });
 
 
-    it('should not display hint if the username and password are complete', (done) => {
+    it('should not display hint if the username and password are complete', async () => {
 
       // given
       const configuration = {
@@ -208,15 +203,14 @@ describe('<DeploymentConfigOverlay>', () => {
       wrapper.find('.btn-primary').simulate('submit');
 
       // then
-      setTimeout(() => {
+      await waitFor(() => {
         wrapper.update();
         expect(wrapper.find('.invalid-feedback')).to.have.length(0);
-        done();
       });
     });
 
 
-    it('should not disable deploy button when connection cannot be established', (done) => {
+    it('should not disable deploy button when connection cannot be established', async () => {
 
       // given
       const configuration = {
@@ -250,15 +244,14 @@ describe('<DeploymentConfigOverlay>', () => {
       wrapper.find('.btn-primary').simulate('submit');
 
       // then
-      setTimeout(() => {
+      await waitFor(() => {
         wrapper.setProps({});
         expect(wrapper.find('.btn-primary').props()).to.have.property('disabled', false);
-        done();
       });
     });
 
 
-    it('should hide username password fields if auth is not needed', (done) => {
+    it('should hide username password fields if auth is not needed', async () => {
 
       // given
       const configuration = {
@@ -287,16 +280,15 @@ describe('<DeploymentConfigOverlay>', () => {
       }, mount);
 
       // then
-      setTimeout(() => {
+      await waitFor(() => {
         wrapper.update();
         expect(wrapper.find('[id="endpoint.username"]')).to.have.length(0);
         expect(wrapper.find('[id="endpoint.password"]')).to.have.length(0);
-        done();
       });
     });
 
 
-    it('should hide token field if auth is not needed', (done) => {
+    it('should hide token field if auth is not needed', async () => {
 
       // given
       const configuration = {
@@ -325,16 +317,15 @@ describe('<DeploymentConfigOverlay>', () => {
       }, mount);
 
       // then
-      setTimeout(() => {
+      await waitFor(() => {
         wrapper.update();
         expect(wrapper.find('[id="endpoint.token"]')).to.have.length(0);
-        done();
       });
     });
   });
 
 
-  it('should not disable deploy button when form is invalid', (done) => {
+  it('should not disable deploy button when form is invalid', async () => {
 
     // given
     const configuration = {
@@ -359,10 +350,9 @@ describe('<DeploymentConfigOverlay>', () => {
     wrapper.find('.btn-primary').simulate('click');
 
     // then
-    setTimeout(() => {
+    await waitFor(() => {
       wrapper.update();
       expect(wrapper.find('.btn-primary').props()).to.have.property('disabled', false);
-      done();
     });
   });
 
@@ -400,7 +390,6 @@ describe('<DeploymentConfigOverlay>', () => {
 
     // then
     expect(saveCredentials).to.have.been.called;
-
   });