♻️ - refactor: migrate detail process review to BaseListView

Author: svenvandescheur

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

@@ -60,8 +60,7 @@ async def test_scenario_record_manager_process_review(self):
             await self.when.user_clicks_button(page, "Destruction list to process")
             await self.then.path_should_be(page, "/destruction-lists/00000000-0000-0000-0000-000000000000")
 
-            # TODO
-            await self.when.user_clicks_checkbox(page, "(de)selecteer rij")
+            await self.when.user_clicks_button(page, "Muteren")
 
             # Fill selectielijstklasse as it's probably missing.
             await self.when.user_clicks_radio(page, "Aanpassen van selectielijstklasse")
@@ -75,7 +74,7 @@ async def test_scenario_record_manager_process_review(self):
             await self.when.user_fills_form_field(page, "Reden", "Andere datum")
             await self.when.user_clicks_button(page, "muteren")
             await self.when.user_clicks_button(page, "Opnieuw indienen")
-            await self.when.user_fills_form_field(page, "Opmerking", "Datum aangepast")
+            await self.when.user_fills_form_field(page, "Opmerking", "Datum aangepast", None, 1)
             await self.when.user_clicks_button(page, "Opnieuw indienen", 1)
             await self.then.path_should_be(page, "/destruction-lists")
 

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

@@ -344,25 +344,31 @@ async def _user_clicks(self, role, page, name, index=0):
             await element.wait_for()
             await element.click()
 
-        async def user_fills_form_field(self, page, label, value, role=None):
-            select = await page.query_selector(f'.mykn-select[title="{label}"]')
-            if select:  # has content so select?
-                await select.click()
-                options = await select.query_selector_all(".mykn-option")
+        async def user_fills_form_field(self, page, label, value, role=None, index=0):
+            selects = await page.query_selector_all(f'.mykn-select[title="{label}"]')
+            try:
+                select = selects[index]
+
+                if select:  # has content so select?
+                    await select.click()
+                    options = await select.query_selector_all(".mykn-option")
 
-                for option in options:
-                    text_content = await option.text_content()
-                    if text_content == value:
-                        return await option.click()
+                    for option in options:
+                        text_content = await option.text_content()
+                        if text_content == value:
+                            return await option.click()
 
-                return
+                    return
+            except IndexError:
+                pass
 
             if role:
                 locator = page.get_by_label(label).and_(page.get_by_role("textbox"))
             else:
                 locator = page.get_by_label(label)
 
-            await locator.fill(value)
+            elements = await locator.all()
+            await elements[index].fill(value)
 
         async def user_filters_zaken(self, page, name, value):
             locator = page.get_by_role("textbox", name=name)

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>
-  );
 }