Merge pull request #71 from maykinmedia/feature/#69-link-zaak-to-exte…

…rnal-system ✨ [#69] Support linking to zaken in an external system
maykinmedia · Jun 6, 2024 · e8d4af3 · e8d4af3
2 parents 6ae5de5 + 9a5d5d7
commit e8d4af3
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 6 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -46,6 +46,7 @@ services:
       - CELERY_LOGLEVEL=DEBUG
       - REACT_APP_API_URL=http://localhost:8080
       - REACT_APP_API_PATH=/api/v1
+      - REACT_APP_ZAAK_URL_TEMPLATE=https://www.example.com/zaken/{identificatie}
     ports:
       - 8080:8080
     depends_on:

diff --git a/frontend/.env.example b/frontend/.env.example
@@ -1,2 +1,3 @@
 REACT_APP_API_URL=http://localhost:8080
 REACT_APP_API_PATH=/api/v1
+REACT_APP_ZAAK_URL_TEMPLATE=https://www.example.com/zaken/{identificatie}
diff --git a/frontend/.env.production.template b/frontend/.env.production.template
@@ -1,2 +1,3 @@
 REACT_APP_API_URL=REACT_APP_API_URL_PLACEHOLDER
 REACT_APP_API_PATH=REACT_APP_API_PATH_PLACEHOLDER
+REACT_APP_ZAAK_URL_TEMPLATE=REACT_APP_ZAAK_URL_TEMPLATE_PLACEHOLDER
diff --git a/frontend/scripts/replace-envvars.sh b/frontend/scripts/replace-envvars.sh
@@ -6,4 +6,5 @@ for file in /app/static/js/*.js;
 do
   sed -i 's|REACT_APP_API_URL_PLACEHOLDER|'${REACT_APP_API_URL}'|g' $file
   sed -i 's|REACT_APP_API_PATH_PLACEHOLDER|'${REACT_APP_API_PATH}'|g' $file
+  sed -i 's|REACT_APP_ZAAK_URL_TEMPLATE_PLACEHOLDER|'${REACT_APP_ZAAK_URL_TEMPLATE}'|g' $file
 done
diff --git a/frontend/src/components/DestructionList/DestructionList.tsx b/frontend/src/components/DestructionList/DestructionList.tsx
@@ -3,6 +3,7 @@ import {
   DataGridProps,
   ListTemplate,
   TypedField,
+  formatMessage,
 } from "@maykin-ui/admin-ui";
 import { useEffect, useState } from "react";
 import {
@@ -32,6 +33,9 @@ export type DestructionList = {
   destructionListCreateKey: string;
 };
 
+/** The template used to format urls to an external application providing zaak details. */
+const REACT_APP_ZAAK_URL_TEMPLATE = process.env.REACT_APP_ZAAK_URL_TEMPLATE;
+
 /**
  * Review-destruction-list page
  */
@@ -45,7 +49,10 @@ export function DestructionList({
   const errors = useActionData() || {};
 
   const [searchParams, setSearchParams] = useSearchParams();
-  const objectList = zaken.results as unknown as AttributeData[];
+  const objectList = zaken.results.map((zaak) => ({
+    ...zaak,
+    href: formatMessage(REACT_APP_ZAAK_URL_TEMPLATE || "", zaak),
+  })) as unknown as AttributeData[];
   const { state } = useNavigation();
 
   const [fieldSelectionState, setFieldSelectionState] =
@@ -196,6 +203,9 @@ export function DestructionList({
       errors={Object.values(errors)}
       dataGridProps={
         {
+          aProps: {
+            target: "_blank",
+          },
           count: zaken.count,
           fields: fields,
           loading: state === "loading",

diff --git a/frontend/src/pages/destructionlist/DestructionListCreate.tsx b/frontend/src/pages/destructionlist/DestructionListCreate.tsx
@@ -23,6 +23,7 @@ import {
 import { Zaak } from "../../types";
 import "./DestructionListCreate.css";
 
+/** We need a key to store the zaak selection to, however we don't have a destruction list name yet. */
 const DESTRUCTION_LIST_CREATE_KEY = "destruction-list-create";
 
 export type DestructionListCreateContext = {
@@ -80,11 +81,6 @@ export async function destructionListCreateAction({
   return redirect("/");
 }
 
-export type DestructionListCreateProps = Omit<
-  React.ComponentProps<"main">,
-  "onChange" | "onSelect"
->;
-
 /**
  * Destruction list creation page
  */