chore(cockpit-links) refactor into a common react

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

@@ -17,6 +17,8 @@ import classNames from 'classnames';
 import { default as CamundaAPI, ApiErrors, ConnectionError } from '../shared/CamundaAPI';
 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';
@@ -192,7 +194,7 @@ export default class DeploymentTool extends PureComponent {
     displayNotification({
       type: 'success',
       title: `${getDeploymentType(tab)} deployed`,
-      content: <CockpitLink endpointUrl={ url } deployment={ deployment } />,
+      content: <CockpitDeploymentLink engineRestUrl={ url } deployment={ deployment } />,
       duration: 8000
     });
 
@@ -597,39 +599,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 +666,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/shared/ui/CockpitDeploymentLink.js

@@ -0,0 +1,42 @@
+/**
+ * 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, { useMemo } from 'react';
+
+import CockpitLink from './CockpitLink';
+
+export default function CockpitDeploymentLink(props) {
+  const {
+    engineRestUrl,
+    deployment
+  } = props;
+
+  const {
+    id,
+    deployedProcessDefinition
+  } = deployment;
+
+  const cockpitPath = useMemo(() => `/repository/?deploymentsQuery=%5B%7B%22type%22:%22id%22,%22operator%22:%22eq%22,%22value%22:%22${id}%22%7D%5D`, [ id ]);
+
+  return (
+    <CockpitLink engineRestUrl={ engineRestUrl } cockpitPath={ cockpitPath }>
+      {
+        deployedProcessDefinition
+          ? (
+            <div>
+              Process definition ID:
+              <code>{deployedProcessDefinition.id} </code>
+            </div>
+          )
+          : null
+      }
+    </CockpitLink>
+  );
+}

client/src/plugins/camunda-plugin/shared/ui/CockpitLink.js

@@ -0,0 +1,54 @@
+/**
+ * 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, { Children, useMemo } from 'react';
+
+import * as css from './CockpitLink.less';
+
+export default function CockpitLink(props) {
+  const {
+    engineRestUrl,
+    cockpitPath,
+    children
+  } = props;
+
+  const cockpitBaseUrl = useMemo(() => {
+
+    // TODO Integrate well known endpoint base url for Camunda Web Apps
+    const webAppsBaseUrl = getWebAppsBaseUrl(engineRestUrl);
+
+    // TODO ensure a single slash between base url and relative path segment
+    return webAppsBaseUrl + '/cockpit/default/#';
+  }, [ engineRestUrl ]);
+
+  // TODO ensure a single slash between base url and relative path segment
+  const link = useMemo(() => `${cockpitBaseUrl}${cockpitPath}`);
+
+  return (
+    <div className={ css.CockpitLink }>
+      { Children.toArray(children) }
+      <a href={ link }>
+        Open in Camunda Cockpit
+      </a>
+    </div>
+  );
+}
+
+// helpers //////////
+
+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/shared/ui/CockpitLink.less

@@ -0,0 +1,15 @@
+:local(.CockpitLink) {
+
+    & > div {
+      margin-bottom: 5px;
+    }
+
+    code {
+      user-select: text;
+      padding-right: 8px;
+      margin-left: 2px;
+      background-color: var(--color-grey-225-10-90);
+      word-break: break-all;
+      border-radius: 3px;
+    }
+}

client/src/plugins/camunda-plugin/shared/ui/CockpitProcessInstanceLink.js

@@ -0,0 +1,35 @@
+/**
+ * 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, { useMemo } from 'react';
+
+import CockpitLink from './CockpitLink';
+
+export default function CockpitProcessInstanceLink(props) {
+  const {
+    engineRestUrl,
+    processInstance
+  } = props;
+
+  const {
+    id
+  } = processInstance;
+
+  const cockpitPath = useMemo(() => `/process-instance/${id}`, [ id ]);
+
+  return (
+    <CockpitLink engineRestUrl={ engineRestUrl } cockpitPath={ cockpitPath }>
+      <div>
+        Process instance ID:
+        <code>{id}</code>
+      </div>
+    </CockpitLink>
+  );
+}

client/src/plugins/camunda-plugin/start-instance-tool/StartInstanceTool.js

@@ -18,6 +18,8 @@ import StartInstanceConfigOverlay from './StartInstanceConfigOverlay';
 
 import { DeploymentError, StartInstanceError } from '../shared/CamundaAPI';
 
+import CockpitProcessInstanceLink from '../shared/ui/CockpitProcessInstanceLink';
+
 import * as css from './StartInstanceTool.less';
 
 import { Fill } from '../../../app/slot-fill';
@@ -412,7 +414,7 @@ export default class StartInstanceTool extends PureComponent {
     displayNotification({
       type: 'success',
       title: 'Process instance started',
-      content: <CockpitLink endpointUrl={ url } processInstance={ processInstance } />,
+      content: <CockpitProcessInstanceLink engineRestUrl={ url } processInstance={ processInstance } />,
       duration: 8000
     });
   }
@@ -562,47 +564,8 @@ export default class StartInstanceTool extends PureComponent {
 
 }
 
-
-function CockpitLink(props) {
-  const {
-    endpointUrl,
-    processInstance
-  } = props;
-
-  const {
-    id
-  } = processInstance;
-
-  const baseUrl = getWebAppsBaseUrl(endpointUrl);
-
-  const cockpitUrl = `${baseUrl}/cockpit/default/#/process-instance/${id}`;
-
-  return (
-    <div className={ css.CockpitLink }>
-      <div>
-        Process instance ID:
-        <code>{id}</code>
-      </div>
-      <a href={ cockpitUrl }>
-        Open in Camunda Cockpit
-      </a>
-    </div>
-  );
-}
-
-
 // helpers //////////
 
 function isBpmnTab(tab) {
   return tab && tab.type === 'bpmn';
-}
-
-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/start-instance-tool/StartInstanceTool.less

@@ -3,20 +3,4 @@
     width: 24px;
     height: 24px;
   }
-}
-
-:local(.CockpitLink) {
-
-  & > div {
-    margin-bottom: 5px;
-  }
-
-  code {
-    user-select: text;
-    padding-right: 8px;
-    margin-left: 2px;
-    background-color: var(--color-grey-225-10-90);
-    word-break: break-all;
-    border-radius: 3px;
-  }
 }