✨ #497 - feat: add status indicator for destruction list co review

Author: svenvandescheur

backend/src/openarchiefbeheer/destruction/tests/e2e/features/test_feature_co_review.py

@@ -37,7 +37,7 @@ async def test_scenario_co_reviewer_select_zaken_visible_to_reviewer(self):
             await self.when.user_clicks_button(page, "Destruction list to co-review")
             await self.then.page_should_contain_text(page, "Geaccordeerd")
 
-            # Co-reviewer rejects see second case.
+            # Co-reviewer rejects second case.
             await self.when.user_clicks_button(page, "Uitzonderen")
             await self.when.user_fills_form_field(page, "Reden", "gh-448")
             await self.when.user_clicks_button(page, "Zaak uitzonderen")
@@ -50,3 +50,21 @@ async def test_scenario_co_reviewer_select_zaken_visible_to_reviewer(self):
             await self.when.reviewer_logs_in(page)
             await self.when.user_clicks_button(page, "Destruction list to co-review")
             await self.then.page_should_contain_text(page, "Uitgezonderd")
+
+            # Log out.
+            await self.when.user_logs_out(page)
+
+            # Co-reviewer finishes co-review
+            await self.when.co_reviewer_logs_in(page)
+            await self.when.user_clicks_button(page, "Destruction list to co-review")
+            await self.when.user_clicks_button(page, "Medebeoordeling afronden")
+            await self.when.user_fills_form_field(page, "Opmerking", "gh-497")
+            await self.when.user_clicks_button(page, "Medebeoordeling afronden", 1)
+
+            # Log out.
+            await self.when.user_logs_out(page)
+
+            # Reviewer should see review completed.
+            await self.when.reviewer_logs_in(page)
+            await self.when.user_clicks_button(page, "Destruction list to co-review")
+            await self.then.page_should_contain_element_with_title(page, "Medebeoordelaar is klaar met beoordelen")

backend/src/openarchiefbeheer/utils/tests/gherkin.py

@@ -523,6 +523,10 @@ async def page_should_contain_text(self, page, text, timeout=None):
             element = page.locator(f"text={text}")
             await expect(element.nth(0)).to_be_visible(timeout=timeout)
 
+        async def page_should_contain_element_with_title(self, page, title):
+            element = page.get_by_title(title)
+            await expect(element).to_be_visible()
+
         async def path_should_be(self, page, path):
             await self.url_should_be(page, self.testcase.live_server_url + path)
 

frontend/.storybook/mockData.ts

@@ -1,4 +1,5 @@
 import { auditLogFactory } from "../src/fixtures/auditLog";
+import { coReviewsFactory } from "../src/fixtures/coReview";
 import { destructionListAssigneesFactory } from "../src/fixtures/destructionList";
 import { FIXTURE_SELECTIELIJSTKLASSE_CHOICES } from "../src/fixtures/selectieLijstKlasseChoices";
 import { userFactory, usersFactory } from "../src/fixtures/user";
@@ -11,6 +12,18 @@ export const MOCKS = {
     status: 200,
     response: auditLogFactory(),
   },
+  CO_REVIEWS: {
+    url: "http://localhost:8000/api/v1/destruction-list-co-reviews/?destructionList__uuid=00000000-0000-0000-0000-000000000000",
+    method: "GET",
+    status: 200,
+    response: coReviewsFactory(),
+  },
+  CO_REVIEW_CREATE: {
+    url: "http://localhost:8000/api/v1/destruction-list-co-reviews/?destructionList__uuid=00000000-0000-0000-0000-000000000000",
+    method: "POST",
+    status: 201,
+    response: {},
+  },
   DESTRUCTION_LIST_MAKE_FINAL: {
     url: "http://localhost:8000/api/v1/destruction-lists/00000000-0000-0000-0000-000000000000/make_final",
     method: "POST",

frontend/src/components/DestructionListReviewer/DestructionListReviewer.stories.tsx

@@ -1,13 +1,15 @@
 import { Meta, ReactRenderer, StoryObj } from "@storybook/react";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
 import { PlayFunction } from "@storybook/types";
+import exp from "node:constants";
 import { createMock, getMock } from "storybook-addon-module-mock";
 
 import {
   ClearSessionStorageDecorator,
   ReactRouterDecorator,
 } from "../../../.storybook/decorators";
 import { fillForm } from "../../../.storybook/playFunctions";
+import { coReviewFactory } from "../../fixtures/coReview";
 import { destructionListFactory } from "../../fixtures/destructionList";
 import {
   beoordelaarFactory,
@@ -262,3 +264,58 @@ export const ReviewerCanReassignCoReviewers: Story = {
     await assertEditCoReviewers(context);
   },
 };
+
+export const CoReviewStatusVisible: Story = {
+  args: { destructionList: DESTRUCTION_LIST_READY_TO_REVIEW },
+  parameters: {
+    moduleMock: {
+      mock: () => {
+        const reassignDestructionList = createMock(
+          libDestructionList,
+          "reassignDestructionList",
+        );
+        reassignDestructionList.mockImplementation(
+          async () => ({}) as Response,
+        );
+
+        const updateCoReviewers = createMock(
+          libDestructionList,
+          "updateCoReviewers",
+        );
+        updateCoReviewers.mockImplementation(async () => ({}) as Response);
+
+        const useWhoAmI = createMock(hooksUseWhoAmI, "useWhoAmI");
+        useWhoAmI.mockImplementation(() => beoordelaarFactory());
+
+        const useCoReviewers = createMock(hooksUseWhoAmI, "useCoReviewers");
+        useCoReviewers.mockImplementation(() => [
+          REVIEWER2,
+          REVIEWER3,
+          REVIEWER4,
+        ]);
+
+        const useDestructionListCoReviewers = createMock(
+          hooksUseWhoAmI,
+          "useDestructionListCoReviewers",
+        );
+        useDestructionListCoReviewers.mockImplementation(() => [
+          { user: REVIEWER2, role: "co_reviewer" },
+        ]);
+
+        const useCoReviews = createMock(hooksUseWhoAmI, "useCoReviews");
+        useCoReviews.mockImplementation(() => [
+          coReviewFactory({ author: REVIEWER2 }),
+        ]);
+
+        return [reassignDestructionList, updateCoReviewers, useWhoAmI];
+      },
+    },
+  },
+  play: async (context) => {
+    const canvas = within(context.canvasElement);
+    const element = await canvas.getByTitle(
+      "Medebeoordelaar is klaar met beoordelen",
+    );
+    await expect(element).toBeVisible();
+  },
+};

frontend/src/components/DestructionListReviewer/DestructionListReviewer.tsx

@@ -8,11 +8,12 @@ import {
   useAlert,
   useFormDialog,
 } from "@maykin-ui/admin-ui";
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { useNavigation, useRevalidator } from "react-router-dom";
 
 import {
   useCoReviewers,
+  useCoReviews,
   useDestructionListCoReviewers,
   useReviewers,
   useWhoAmI,
@@ -45,6 +46,7 @@ export function DestructionListReviewer({
   const revalidator = useRevalidator();
   const alert = useAlert();
   const formDialog = useFormDialog();
+  const coReviews = useCoReviews(destructionList);
   const reviewers = useReviewers();
   const coReviewers = useCoReviewers();
   const assignedCoReviewers = useDestructionListCoReviewers(destructionList);
@@ -169,9 +171,23 @@ export function DestructionListReviewer({
     () =>
       assignedCoReviewers.reduce((acc, coReviewer, i) => {
         const key = `Medebeoordelaar ${1 + i}`;
+        const hasReview = coReviews.find(
+          (coReview) => coReview.author?.pk === coReviewer.user.pk,
+        );
+        const icon = hasReview && <Solid.CheckCircleIcon />;
+
         return {
           ...acc,
-          [key]: { label: key, value: formatUser(coReviewer.user) },
+          [key]: {
+            label: key,
+            value: (
+              <P title={hasReview && "Medebeoordelaar is klaar met beoordelen"}>
+                {formatUser(coReviewer.user)}
+                &nbsp;
+                {icon}
+              </P>
+            ),
+          },
         };
       }, {}),
     [assignedCoReviewers],

frontend/src/hooks/index.ts

@@ -1,6 +1,7 @@
 export * from "./useAuditLog";
 export * from "./useCombinedSearchParams";
 export * from "./useCoReviewers";
+export * from "./useCoReviews";
 export * from "./useDestructionListCoReviewers";
 export * from "./useFields";
 export * from "./useFilter";

frontend/src/hooks/useCoReviews.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+
+import { CoReview, listCoReviews } from "../lib/api/coReview";
+import { DestructionList } from "../lib/api/destructionLists";
+import { useAlertOnError } from "./useAlertOnError";
+
+/**
+ * Hook resolving co reviews
+ */
+export function useCoReviews(destructionList?: DestructionList): CoReview[] {
+  const alertOnError = useAlertOnError(
+    "Er is een fout opgetreden bij het ophalen van de mede beoordelingen!",
+  );
+
+  const [valueState, setValueState] = useState<CoReview[]>([]);
+  useEffect(() => {
+    if (!destructionList) {
+      setValueState([]);
+      return;
+    }
+
+    listCoReviews({ destructionList__uuid: destructionList.uuid })
+      .then((v) => setValueState(v))
+      .catch(alertOnError);
+  }, [destructionList?.uuid]);
+
+  return valueState;
+}

frontend/src/pages/destructionlist/review/DestructionListReview.action.ts

@@ -1,6 +1,7 @@
 import { ActionFunctionArgs, redirect } from "react-router-dom";
 
 import { TypedAction } from "../../../hooks";
+import { CoReview, createCoReview } from "../../../lib/api/coReview";
 import {
   Review,
   ZaakReview,
@@ -17,22 +18,31 @@ export type DestructionListReviewActionContext = {
 };
 
 export type ReviewDestructionListAction =
-  | TypedAction<"APPROVE_LIST", ReviewDestructionListListApproveActionPayLoad>
-  | TypedAction<"REJECT_LIST", ReviewDestructionListListRejectActionPayLoad>;
+  | TypedAction<"APPROVE_LIST", ReviewDestructionListApproveActionPayLoad>
+  | TypedAction<"REJECT_LIST", ReviewDestructionListRejectActionPayLoad>
+  | TypedAction<
+      "COMPLETE_CO_REVIEW",
+      ReviewDestructionListCompleteCoReviewPayload
+    >;
 
-export type ReviewDestructionListListApproveActionPayLoad = {
+export type ReviewDestructionListApproveActionPayLoad = {
   comment: string;
   destructionList: string;
   status: string;
 };
 
-export type ReviewDestructionListListRejectActionPayLoad = {
+export type ReviewDestructionListRejectActionPayLoad = {
   comment: string;
   destructionList: string;
   status: string;
   zaakReviews?: ZaakReview[];
 };
 
+export type ReviewDestructionListCompleteCoReviewPayload = {
+  comment: string;
+  destructionList: string;
+};
+
 /**
  * React Router action.
  * @param request
@@ -50,6 +60,8 @@ export const destructionListReviewAction = async ({
       return destructionListApproveListAction({ request, params });
     case "REJECT_LIST":
       return destructionListRejectListAction({ request, params });
+    case "COMPLETE_CO_REVIEW":
+      return destructionListCompleteCoReviewAction({ request, params });
   }
 };
 
@@ -63,7 +75,7 @@ export async function destructionListApproveListAction({
 }: ActionFunctionArgs) {
   const { payload } = await request.json();
   const { comment, destructionList, status } =
-    payload as ReviewDestructionListListApproveActionPayLoad;
+    payload as ReviewDestructionListApproveActionPayLoad;
 
   const data: Review = {
     destructionList: destructionList,
@@ -100,7 +112,7 @@ export async function destructionListRejectListAction({
 }: ActionFunctionArgs) {
   const { payload } = await request.json();
   const { comment, destructionList, status, zaakReviews } =
-    payload as ReviewDestructionListListRejectActionPayLoad;
+    payload as ReviewDestructionListRejectActionPayLoad;
 
   const data: Review = {
     destructionList: destructionList,
@@ -127,3 +139,31 @@ export async function destructionListRejectListAction({
   }
   return redirect("/");
 }
+
+/**
+ * React Router action, user intends to complete a co-review.
+ * @param request
+ * @param params
+ */
+export async function destructionListCompleteCoReviewAction({
+  request,
+}: ActionFunctionArgs) {
+  const { payload } = await request.json();
+  const { comment, destructionList } =
+    payload as ReviewDestructionListCompleteCoReviewPayload;
+
+  const data: CoReview = {
+    destructionList: destructionList,
+    listFeedback: comment,
+  };
+
+  try {
+    await createCoReview(data);
+  } catch (e: unknown) {
+    if (e instanceof Response) {
+      return await (e as Response).json();
+    }
+    throw e;
+  }
+  return redirect("/");
+}