From 902f6b1eb7e4fe0489a375c95385cda04a0aef22 Mon Sep 17 00:00:00 2001
From: LaviniaStiliadou <livia_16@live.de>
Date: Wed, 15 Nov 2023 11:57:38 +0100
Subject: [PATCH] add links to pattern (#120)

* add links to pattern

* Change link color to blue

---------

Co-authored-by: Benjamin Weder <benjamin.weder@iaas.uni-stuttgart.de>
---
 .../pattern/configTabs/PatternConfigTab.js    | 29 ++++++++++
 .../framework-config/config-manager.js        | 22 ++++++++
 .../pattern/framework-config/config.js        |  1 +
 .../extensions/pattern/styling/pattern.css    |  5 ++
 .../pattern-selection/PatternOverviewModal.js |  1 -
 .../PatternSelectionModal.js                  | 53 +++++++++++++++++--
 components/bpmn-q/webpack.config.js           |  1 +
 7 files changed, 108 insertions(+), 4 deletions(-)

diff --git a/components/bpmn-q/modeler-component/extensions/pattern/configTabs/PatternConfigTab.js b/components/bpmn-q/modeler-component/extensions/pattern/configTabs/PatternConfigTab.js
index ab844fa8..7d6419f2 100644
--- a/components/bpmn-q/modeler-component/extensions/pattern/configTabs/PatternConfigTab.js
+++ b/components/bpmn-q/modeler-component/extensions/pattern/configTabs/PatternConfigTab.js
@@ -24,6 +24,9 @@ export default function PatternAtlasConfigTab() {
   const [patternAtlasEndpoint, setPatternAtlasEndpoint] = useState(
     config.getPatternAtlasEndpoint()
   );
+  const [patternAtlasUIEndpoint, setPatternAtlasUIEndpoint] = useState(
+    config.getPatternAtlasUIEndpoint()
+  );
   const modeler = getModeler();
 
   const editorActions = modeler.get("editorActions");
@@ -39,10 +42,21 @@ export default function PatternAtlasConfigTab() {
     });
   }
 
+  if (!editorActions._actions.hasOwnProperty("patternAtlasUIEndpointChanged")) {
+    editorActions.register({
+      patternAtlasUIEndpointChanged: function (patternAtlasUIEndpoint) {
+        self.modeler.config.patternAtlasUIEndpoint = patternAtlasUIEndpoint;
+        eventBus.fire("config.updated", self.modeler.config);
+      },
+    });
+  }
+
   // save changed config entries on close
   PatternAtlasConfigTab.prototype.onClose = () => {
     modeler.config.patternAtlasEndpoint = patternAtlasEndpoint;
+    modeler.config.patternAtlasUIEndpoint = patternAtlasUIEndpoint;
     config.setPatternAtlasEndpoint(patternAtlasEndpoint);
+    config.setPatternAtlasUIEndpoint(patternAtlasUIEndpoint);
   };
 
   return (
@@ -64,6 +78,20 @@ export default function PatternAtlasConfigTab() {
               />
             </td>
           </tr>
+          <tr className="spaceUnder">
+            <td align="right">Pattern Atlas UI Endpoint</td>
+            <td align="left">
+              <input
+                className="qwm-input"
+                type="string"
+                name="patternAtlasUIEndpoint"
+                value={patternAtlasUIEndpoint}
+                onChange={(event) =>
+                  setPatternAtlasUIEndpoint(event.target.value)
+                }
+              />
+            </td>
+          </tr>
         </tbody>
       </table>
     </>
@@ -74,4 +102,5 @@ PatternAtlasConfigTab.prototype.config = () => {
   const modeler = getModeler();
 
   modeler.config.patternAtlasEndpoint = config.getPatternAtlasEndpoint();
+  modeler.config.patternAtlasUIEndpoint = config.getPatternAtlasUIEndpoint();
 };
diff --git a/components/bpmn-q/modeler-component/extensions/pattern/framework-config/config-manager.js b/components/bpmn-q/modeler-component/extensions/pattern/framework-config/config-manager.js
index 63e30502..e6719422 100644
--- a/components/bpmn-q/modeler-component/extensions/pattern/framework-config/config-manager.js
+++ b/components/bpmn-q/modeler-component/extensions/pattern/framework-config/config-manager.js
@@ -35,6 +35,28 @@ export function setPatternAtlasEndpoint(patternAtlasEndpoint) {
     config.patternAtlasEndpoint = patternAtlasEndpoint;
   }
 }
+
+/**
+ * Get the endpoint of the connected Pattern Atlas UI
+ */
+export function getPatternAtlasUIEndpoint() {
+  if (config.patternAtlasUIEndpoint === undefined) {
+    setPatternAtlasUIEndpoint(
+      getPluginConfig("pattern").patternAtlasUIEndpoint ||
+        defaultConfig.patternAtlasUIEndpoint
+    );
+  }
+  return config.patternAtlasUIEndpoint;
+}
+
+/**
+ * Set the endpoint of the connected Pattern Atlas UI
+ */
+export function setPatternAtlasUIEndpoint(patternAtlasUIEndpoint) {
+  if (patternAtlasUIEndpoint !== null && patternAtlasUIEndpoint !== undefined) {
+    config.patternAtlasUIEndpoint = patternAtlasUIEndpoint;
+  }
+}
 /**
  * Reset all saved endpoints and configuration values back to default or the value of the respective plugin config
  * by setting this.comfig to an empty js object.
diff --git a/components/bpmn-q/modeler-component/extensions/pattern/framework-config/config.js b/components/bpmn-q/modeler-component/extensions/pattern/framework-config/config.js
index 22fc8df9..727487f0 100644
--- a/components/bpmn-q/modeler-component/extensions/pattern/framework-config/config.js
+++ b/components/bpmn-q/modeler-component/extensions/pattern/framework-config/config.js
@@ -12,5 +12,6 @@
 // takes either the environment variables or the default values defined in webpack.config
 const defaultConfig = {
   patternAtlasEndpoint: process.env.PATTERN_ATLAS_ENDPOINT,
+  patternAtlasUIEndpoint: process.env.PATTERN_ATLAS_UI_ENDPOINT,
 };
 export default defaultConfig;
diff --git a/components/bpmn-q/modeler-component/extensions/pattern/styling/pattern.css b/components/bpmn-q/modeler-component/extensions/pattern/styling/pattern.css
index a7f2fc15..d4aca5b0 100644
--- a/components/bpmn-q/modeler-component/extensions/pattern/styling/pattern.css
+++ b/components/bpmn-q/modeler-component/extensions/pattern/styling/pattern.css
@@ -56,6 +56,11 @@
   width: 100%;
 }
 
+.pattern-links {
+  color: blue;
+  text-decoration: underline;
+}
+
 .qwm-action {
   min-width: 10px;
   height: 35px;
diff --git a/components/bpmn-q/modeler-component/extensions/pattern/ui/pattern-selection/PatternOverviewModal.js b/components/bpmn-q/modeler-component/extensions/pattern/ui/pattern-selection/PatternOverviewModal.js
index fecc80ef..750c438a 100644
--- a/components/bpmn-q/modeler-component/extensions/pattern/ui/pattern-selection/PatternOverviewModal.js
+++ b/components/bpmn-q/modeler-component/extensions/pattern/ui/pattern-selection/PatternOverviewModal.js
@@ -32,7 +32,6 @@ export default function PatternOverviewModal({ onClose, responseData }) {
   const closeAlgorithmicPatternModal = () => {
     setAlgorithmicPatternModalOpen(false);
   };
-
   const selectAlgorithmicPattern = useCallback(
     (selectedPattern) => {
       if (editRow !== null) {
diff --git a/components/bpmn-q/modeler-component/extensions/pattern/ui/pattern-selection/PatternSelectionModal.js b/components/bpmn-q/modeler-component/extensions/pattern/ui/pattern-selection/PatternSelectionModal.js
index 8a7eae46..7b8aeb64 100644
--- a/components/bpmn-q/modeler-component/extensions/pattern/ui/pattern-selection/PatternSelectionModal.js
+++ b/components/bpmn-q/modeler-component/extensions/pattern/ui/pattern-selection/PatternSelectionModal.js
@@ -16,6 +16,7 @@ import {
   PATTERN_ALGORITHM,
   PATTERN_AUGMENTATION,
 } from "../../Constants";
+import { getModeler } from "../../../../editor/ModelerHandler";
 
 const Title = Modal.Title || (({ children }) => <h4>{children}</h4>);
 const Body = Modal.Body || (({ children }) => <div>{children}</div>);
@@ -97,6 +98,7 @@ export default function PatternSelectionModal({
     (pattern) => pattern.tags && pattern.tags.includes(PATTERN_AUGMENTATION)
   );
 
+  const patternAtlasUIEndpoint = getModeler().config.patternAtlasUIEndpoint;
   return (
     <Modal onClose={onClose}>
       <Title>Patterns</Title>
@@ -121,7 +123,22 @@ export default function PatternSelectionModal({
             <tbody>
               {algorithmPatterns.map((pattern) => (
                 <tr key={pattern.id}>
-                  <td>{pattern.name}</td>
+                  <td>
+                    <a
+                      className="pattern-links"
+                      href={
+                        patternAtlasUIEndpoint +
+                        "/pattern-languages/" +
+                        pattern.patternLanguageId +
+                        "/" +
+                        pattern.id
+                      }
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {pattern.name}
+                    </a>
+                  </td>
                   <td>
                     <img
                       src={pattern.iconUrl}
@@ -162,7 +179,22 @@ export default function PatternSelectionModal({
             <tbody>
               {behavioralPatterns.map((pattern) => (
                 <tr key={pattern.id}>
-                  <td>{pattern.name}</td>
+                  <td>
+                    <a
+                      className="pattern-links"
+                      href={
+                        patternAtlasUIEndpoint +
+                        "/pattern-languages/" +
+                        pattern.patternLanguageId +
+                        "/" +
+                        pattern.id
+                      }
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {pattern.name}
+                    </a>
+                  </td>
                   <td>
                     <img
                       src={pattern.iconUrl}
@@ -202,7 +234,22 @@ export default function PatternSelectionModal({
             <tbody>
               {augmentationPatterns.map((pattern) => (
                 <tr key={pattern.id}>
-                  <td>{pattern.name}</td>
+                  <td>
+                    <a
+                      className="pattern-links"
+                      href={
+                        patternAtlasUIEndpoint +
+                        "/pattern-languages/" +
+                        pattern.patternLanguageId +
+                        "/" +
+                        pattern.id
+                      }
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {pattern.name}
+                    </a>
+                  </td>
                   <td>
                     <img
                       src={pattern.iconUrl}
diff --git a/components/bpmn-q/webpack.config.js b/components/bpmn-q/webpack.config.js
index 80279a55..30140d67 100644
--- a/components/bpmn-q/webpack.config.js
+++ b/components/bpmn-q/webpack.config.js
@@ -21,6 +21,7 @@ let defaultConfig = {
   NISQ_ANALYZER_ENDPOINT: "http://localhost:8098/nisq-analyzer",
   PATTERN_ATLAS_ENDPOINT:
     "http://localhost:1977/patternatlas/patternLanguages/af7780d5-1f97-4536-8da7-4194b093ab1d",
+  PATTERN_ATLAS_UI_ENDPOINT: "http://localhost:1978",
   PROVENANCE_COLLECTION: "false",
   QHANA_GET_PLUGIN_URL: "http://localhost:5006/api/plugins/",
   QHANA_LIST_PLUGINS_URL: "http://localhost:5006/api/plugins/?item-count=100",