diff --git a/docker-compose.yml b/docker-compose.yml index 7c97ae5a9..75e808496 100644 --- 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 index a1382b298..8e4cd714a 100644 --- 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 index 74c16dccd..251d95211 100644 --- 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 index aca09e80f..297f3f1b6 100755 --- 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 index 5064533ef..372b5370c 100644 --- 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 index d23dc4c9d..4b633dd51 100644 --- 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 */