♻️ - refactor: migrate detail process review to BaseListView

frontend/.storybook/playFunctions.ts

@@ -279,20 +279,6 @@ export const fillButtonConfirmationForm: PlayFunction<ReactRenderer> = async (
   });
 };
 
-/**
- * Clicks element at position `elementIndex`, within <tbody> if `inTbody` is truthy.
- * Then fills in dialog form, submits if `submitForm` is truthy.
- * @param context
- */
-export const fillCheckboxConfirmationForm: PlayFunction<ReactRenderer> = async (
-  context,
-) => {
-  await fillConfirmationForm({
-    ...context,
-    parameters: { ...context.parameters, checked: true, role: "checkbox" },
-  });
-};
-
 /**
  * Clicks element at position `elementIndex`, within <tbody> if `inTbody` is truthy.
  * Then fills in dialog form, submits if `submitForm` is truthy.

frontend/src/pages/destructionlist/abstract/BaseListView.tsx

@@ -35,7 +35,8 @@ export type BaseListViewProps = React.PropsWithChildren<{
   paginatedZaken: PaginatedZaken;
   secondaryNavigationItems?: ListTemplateProps["secondaryNavigationItems"];
 
-  selectable?: boolean;
+  // Visible means that no checkboxes appear, but the zaken are marked if selected (via another route).
+  selectable?: boolean | "visible";
   allowSelectAllPages?: boolean;
   selectionActions?: ButtonProps[];
   initiallySelectedZakenOnPage?: Zaak[];
@@ -164,7 +165,7 @@ export function BaseListView({
         fieldsSelectable: true,
         pageSize: 100,
         showPaginator: true,
-        selectable: selectable,
+        selectable: selectable === true,
         filterable: true,
         tableLayout: "fixed",
 

frontend/src/pages/destructionlist/detail/DestructionListDetail.stories.tsx

@@ -6,9 +6,7 @@ import { ReactRouterDecorator } from "../../../../.storybook/decorators";
 import {
   assertColumnSelection,
   clickButton,
-  clickElement,
   fillButtonConfirmationForm,
-  fillCheckboxConfirmationForm,
   fillForm,
 } from "../../../../.storybook/playFunctions";
 import { auditLogFactory } from "../../../fixtures/auditLog";
@@ -25,7 +23,7 @@ import {
   FIXTURE_SELECTIELIJSTKLASSE_CHOICES_MAP,
   selectieLijstKlasseFactory,
 } from "../../../fixtures/selectieLijstKlasseChoices";
-import { usersFactory } from "../../../fixtures/user";
+import { userFactory, usersFactory } from "../../../fixtures/user";
 import {
   clearZaakSelection,
   getZaakSelection,
@@ -83,6 +81,12 @@ const meta: Meta<typeof DestructionListDetailPage> = {
         status: 200,
         response: FIXTURE_SELECTIELIJSTKLASSE_CHOICES,
       },
+      {
+        url: "http://localhost:8000/api/v1/whoami/?",
+        method: "GET",
+        status: 200,
+        response: userFactory(),
+      },
     ],
   },
 };
@@ -240,10 +244,11 @@ export const ProcessReview: Story = {
     },
   },
   play: async (context) => {
-    await fillCheckboxConfirmationForm({
+    await fillButtonConfirmationForm({
       ...context,
       parameters: {
         elementIndex: 0,
+        name: "Muteren",
         formValues: {
           "Aanpassen van selectielijstklasse": true,
           Selectielijstklasse: selectieLijstKlasseFactory()[0].label,
@@ -252,10 +257,11 @@ export const ProcessReview: Story = {
       },
     });
 
-    await fillCheckboxConfirmationForm({
+    await fillButtonConfirmationForm({
       ...context,
       parameters: {
         elementIndex: 1,
+        name: "Muteren",
         formValues: {
           "Aanpassen van selectielijstklasse": true,
           Selectielijstklasse: selectieLijstKlasseFactory()[1].label,
@@ -264,10 +270,11 @@ export const ProcessReview: Story = {
       },
     });
 
-    await fillCheckboxConfirmationForm({
+    await fillButtonConfirmationForm({
       ...context,
       parameters: {
         elementIndex: 2,
+        name: "Muteren",
         formValues: {
           "Aanpassen van selectielijstklasse": true,
           Selectielijstklasse: selectieLijstKlasseFactory()[2].label,
@@ -328,12 +335,10 @@ export const CheckSelectielijstklasseSelection: Story = {
     },
   },
   play: async (context) => {
-    await clickElement({
+    await clickButton({
       ...context,
       parameters: {
-        elementIndex: 0,
-        role: "checkbox",
-        checked: true,
+        name: "Muteren",
       },
     });
 

frontend/src/pages/destructionlist/detail/DestructionListDetail.tsx

@@ -1,31 +1,21 @@
-import { CardBaseTemplate } from "@maykin-ui/admin-ui";
 import React from "react";
 import { useLoaderData } from "react-router-dom";
 
 import { DestructionListDetailContext } from "./DestructionListDetail.loader";
 import { DestructionListEdit } from "./components/DestructionListEdit/DestructionListEdit";
 import { DestructionListProcessReview } from "./components/DestructionListProcessReview/DestructionListProcessReview";
-import { DestructionListToolbar } from "./components/DestructionListToolbar/DestructionListToolbar";
-import { useSecondaryNavigation } from "./hooks/useSecondaryNavigation";
 
 /**
  * Destruction list detail page
  */
 export function DestructionListDetailPage() {
   const { destructionList } = useLoaderData() as DestructionListDetailContext;
   const isInReview = destructionList.status === "changes_requested";
-  const secondaryNavigationItems = useSecondaryNavigation();
 
-  // TODO: SEPARATE ROUTE?
+  // TODO: SEPARATE ROUTES?
   if (!isInReview) {
     return <DestructionListEdit />;
+  } else {
+    return <DestructionListProcessReview />;
   }
-
-  // FIXME: MIGRATE TO NEW APPROACH (NEW URL?)
-  return (
-    <CardBaseTemplate secondaryNavigationItems={secondaryNavigationItems}>
-      <DestructionListToolbar />
-      <DestructionListProcessReview />
-    </CardBaseTemplate>
-  );
 }