Show decision requirements diagrams

public/locales/de-DE/translation.json

@@ -404,6 +404,7 @@
     "version-tag": "Versions-Tag",
     "deployment-id": "Deployment-ID",
     "decision-requirements-id": "Entscheidungsanforderungs-Definitions-ID",
+    "decision-requirements-diagram": "Entscheidungsanforderungsdiagramm",
     "history-ttl": "Verlaufs-Aufbewahrungsdauer",
     "sort": {
       "name": "Name",

public/locales/en-US/translation.json

@@ -404,6 +404,7 @@
     "version-tag": "Version Tag",
     "deployment-id": "Deployment ID",
     "decision-requirements-id": "Decision Requirements Definition ID",
+    "decision-requirements-diagram": "Decision Requirements Diagram",
     "history-ttl": "History Time To Live",
     "sort": {
       "name": "Name",

public/locales/es-ES/translation.json

@@ -371,6 +371,7 @@
     "version-tag": "Etiqueta de versión",
     "deployment-id": "ID de despliegue",
     "decision-requirements-id": "ID de definición de requisitos de decisión",
+    "decision-requirements-diagram": "Diagrama de requisitos de decisión",
     "history-ttl": "Tiempo de vida del historial",
     "sort": {
       "name": "Nombre",

public/locales/fr-FR/translation.json

@@ -371,6 +371,7 @@
     "version-tag": "Tag de version",
     "deployment-id": "ID de déploiement",
     "decision-requirements-id": "ID de définition des exigences de décision",
+    "decision-requirements-diagram": "Diagramme des exigences de décision",
     "history-ttl": "Durée de conservation de l'historique",
     "sort": {
       "name": "Nom",

public/locales/nl-NL/translation.json

@@ -371,6 +371,7 @@
     "version-tag": "Versietag",
     "deployment-id": "Deployment-ID",
     "decision-requirements-id": "Beslissingsvereisten-definitie-ID",
+    "decision-requirements-diagram": "Beslissingsvereistendiagram",
     "history-ttl": "Bewaartermijn geschiedenis",
     "sort": {
       "name": "Naam",

src/api/resources/decision.js

@@ -1,4 +1,4 @@
-import { GET, GET_TEXT } from '../helper.jsx'
+import { GET } from '../helper.jsx'
 
 
 const get_decision_definition = (state, id) =>
@@ -13,11 +13,15 @@ const get_decision_definitions = (state, params = {}) => {
 const get_dmn_xml = (state, id) =>
   GET(`/decision-definition/${id}/xml`, state, state.api.decision.dmn)
 
+const get_decision_requirements_xml = (state, id) =>
+  GET(`/decision-requirements-definition/${id}/xml`, state, state.api.decision.drd)
+
 
 const decision = {
   get_decision_definition,
   get_decision_definitions,
   get_dmn_xml,
+  get_decision_requirements_xml,
 }
 
 export default decision

src/api/resources/decision.test.js

@@ -41,4 +41,13 @@ describe("api/resources/decision", () => {
       signal: state.api.decision.dmn,
     });
   });
+
+  it("get_decision_requirements_xml() GETs /decision-requirements-definition/:id/xml", () => {
+    decision.get_decision_requirements_xml(state, "drd-1");
+    expect_api_call(GET, {
+      url: "/decision-requirements-definition/drd-1/xml",
+      state,
+      signal: state.api.decision.drd,
+    });
+  });
 });

src/components/DMNViewer.jsx

@@ -1,9 +1,8 @@
 import DmnJS from 'dmn-js'
-import { useLayoutEffect } from 'preact/hooks'
 
 
 
-export const DmnViewer = ({ xml, container }) => {
+export const DmnViewer = ({ xml, container, table_view_only = true }) => {
 
   document.querySelector(container).innerText = ''
 
@@ -13,7 +12,7 @@ export const DmnViewer = ({ xml, container }) => {
     viewer = new DmnJS({
       container,
       height: 500,
-      tableViewOnly: true,
+      tableViewOnly: table_view_only,
       hideDetails: true,
       drd: {
         drillDown: {
@@ -29,4 +28,4 @@ export const DmnViewer = ({ xml, container }) => {
   })
 
   return <></>
-}
+}

src/components/DMNViewer.test.jsx

@@ -30,6 +30,11 @@ describe("DmnViewer", () => {
     expect(DmnJS.mock.lastCall[0].container).toBe("#diagram");
   });
 
+  it("passes through the table view option", () => {
+    render(<DmnViewer xml="<dmn/>" container="#diagram" table_view_only={false} />);
+    expect(DmnJS.mock.lastCall[0].tableViewOnly).toBe(false);
+  });
+
   it("imports the supplied xml into the viewer", () => {
     render(<DmnViewer xml="<dmn>content</dmn>" container="#diagram" />);
     expect(importXML).toHaveBeenCalled();

src/pages/Decisions.jsx

@@ -63,7 +63,7 @@ const load_decisions = (state, query) => {
 
 const DecisionsPage = () => {
   const state = useContext(AppState),
-    { api: { decision: { definition, dmn } } } = state,
+    { api: { decision: { definition, dmn, drd } } } = state,
     { params: { decision_id }, query } = useRoute()
 
   useEffect(() => {
@@ -86,10 +86,19 @@ const DecisionsPage = () => {
     return () => {
       definition.value = null
       dmn.value = null
+      drd.value = null
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [decision_id])
 
+  useEffect(() => {
+    const drd_id = definition.value?.data?.decisionRequirementsDefinitionId
+    if (drd_id) {
+      void engine_rest.decision.get_decision_requirements_xml(state, drd_id)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [definition.value?.data?.decisionRequirementsDefinitionId])
+
   return (
     <main id="content" class="decisions fade-in">
       <DecisionsList />
@@ -170,8 +179,7 @@ const DecisionsList = () => {
 
 const DecisionDetails = () => {
   const state = useContext(AppState),
-    { api: { decision: { definition, dmn } } } = state,
-    { params: { decision_id } } = useRoute(),
+    { api: { decision: { definition, dmn, drd } } } = state,
     [t] = useTranslation()
 
   return <div id="decision-details">
@@ -182,7 +190,6 @@ const DecisionDetails = () => {
         const {
           id, key, name, version, versionTag, tenantId, deploymentId,
           decisionRequirementsDefinitionId, historyTimeToLive,
-          resource
         } = definition.value.data
 
         return <div>
@@ -203,7 +210,11 @@ const DecisionDetails = () => {
             <dt>{t("decisions.deployment-id")}</dt>
             <dd>{deploymentId}</dd>
             <dt>{t("decisions.decision-requirements-id")}</dt>
-            <dd>{decisionRequirementsDefinitionId}</dd>
+            <dd>
+              {decisionRequirementsDefinitionId
+                ? <a href="#decision-requirements-diagram">{decisionRequirementsDefinitionId}</a>
+                : '-'}
+            </dd>
             <dt>{t("decisions.history-ttl")}</dt>
             <dd>{historyTimeToLive}</dd>
           </dl>
@@ -217,6 +228,16 @@ const DecisionDetails = () => {
       signal={dmn}
       on_nothing={() => <p class="info-box">{t("decisions.select-diagram")}</p>}
       on_success={() => <DmnViewer xml={dmn.value.data.dmnXml} container="#diagram-container" />} />
+
+    {definition.value?.data?.decisionRequirementsDefinitionId
+      ? <>
+        <h3 id="decision-requirements-diagram">{t("decisions.decision-requirements-diagram")}</h3>
+        <div id="drd-container" />
+        <RequestState
+          signal={drd}
+          on_success={() => <DmnViewer xml={drd.value.data.dmnXml} container="#drd-container" table_view_only={false} />} />
+      </>
+      : null}
   </div>
 }
 

src/pages/Decisions.test.jsx

@@ -67,6 +67,20 @@ describe("DecisionsPage", () => {
     expect(engine_rest.decision.get_dmn_xml).toHaveBeenCalled();
   });
 
+  it("fetches the decision requirements xml when the selected decision belongs to a DRD", () => {
+    mockParams = { decision_id: "d1" };
+    signal_response(state.api.decision.definition, {
+      id: "d1",
+      key: "risk",
+      name: "Risk",
+      version: 1,
+      decisionRequirementsDefinitionId: "drd-1",
+    });
+    renderPage(state);
+    expect(engine_rest.decision.get_decision_requirements_xml).toHaveBeenCalled();
+    expect(engine_rest.decision.get_decision_requirements_xml.mock.lastCall[1]).toBe("drd-1");
+  });
+
   it("renders the DMN viewer with the fetched xml", () => {
     mockParams = { decision_id: "d1" };
     signal_response(state.api.decision.definition, {
@@ -79,4 +93,19 @@ describe("DecisionsPage", () => {
     const { getByTestId } = renderPage(state);
     expect(getByTestId("dmn-viewer").textContent).toBe("<dmn>xml</dmn>");
   });
+
+  it("renders the DRD viewer with the fetched decision requirements xml", () => {
+    mockParams = { decision_id: "d1" };
+    signal_response(state.api.decision.definition, {
+      id: "d1",
+      key: "risk",
+      name: "Risk",
+      version: 1,
+      decisionRequirementsDefinitionId: "drd-1",
+    });
+    signal_response(state.api.decision.drd, { dmnXml: "<drd>xml</drd>" });
+    const { getAllByTestId, getByText } = renderPage(state);
+    expect(getByText("decisions.decision-requirements-diagram")).toBeTruthy();
+    expect(getAllByTestId("dmn-viewer").some((node) => node.textContent === "<drd>xml</drd>")).toBe(true);
+  });
 });

src/state.js

@@ -164,6 +164,7 @@ const createAppState = () => {
       definitions: signal(null),
       definition: signal(null),
       dmn: signal(null),
+      drd: signal(null),
       saved_filters: signal(null),
     },
     history: {