🐛 #393 - fix: various UI issues related to the selection state

Author: svenvandescheur

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

@@ -144,23 +144,28 @@ export function BaseListView({
 
   // Selection actions.
   const getSelectionActions = useCallback(() => {
-    const fixedItems =
-      selectable && hasSelection
-        ? ([
-            {
-              children: (
-                <>
-                  <Solid.ExclamationTriangleIcon />
-                  Huidige selectie wissen
-                </>
-              ),
-              variant: "warning",
-              wrap: false,
-              onClick: handleClearZaakSelection,
-            },
-          ] as ButtonProps[])
-        : [];
-    return [...(selectionActions || []), ...fixedItems];
+    const disabled = selectable && hasSelection;
+    const dynamicItems = (selectionActions || []).map((props) =>
+      Object.hasOwn(props, "disabled")
+        ? props
+        : { ...props, disabled: selectable && !hasSelection },
+    );
+    const fixedItems = disabled
+      ? ([
+          {
+            children: (
+              <>
+                <Solid.ExclamationTriangleIcon />
+                Huidige selectie wissen
+              </>
+            ),
+            variant: "warning",
+            wrap: false,
+            onClick: handleClearZaakSelection,
+          },
+        ] as ButtonProps[])
+      : [];
+    return [...dynamicItems, ...fixedItems];
   }, [selectable, hasSelection, selectedZakenOnPage, selectionActions]);
 
   return (

frontend/src/pages/destructionlist/create/DestructionListCreate.tsx

@@ -113,8 +113,6 @@ export function DestructionListCreatePage() {
                 Vernietigingslijst opstellen
               </>
             ),
-            disabled: !allPagesSelected && !hasSelection,
-
             variant: "primary",
             wrap: false,
             onClick: handleClick,

frontend/src/pages/destructionlist/detail/components/DestructionListEdit/DestructionListEdit.tsx

@@ -109,6 +109,7 @@ export function DestructionListEdit() {
                   Annuleren
                 </>
               ),
+              disabled: false, // Set explicitly to prevent automatic value based on selection presence.
               wrap: false,
               onClick: () => handleSetEditing(false),
             },

frontend/src/pages/destructionlist/detail/components/DestructionListProcessReview/DestructionListProcessReview.tsx

@@ -142,9 +142,6 @@ export function DestructionListProcessReview() {
     };
   }, [reviewItems, objectList]);
 
-  // Selection actions based on `editingState`.
-  const selectionActions: ButtonProps[] = useMemo(() => [], []);
-
   /**
    * Gets called when te selection is cleared.
    */
@@ -227,7 +224,6 @@ export function DestructionListProcessReview() {
       paginatedZaken={paginatedZaken}
       secondaryNavigationItems={secondaryNavigationItems}
       selectable="visible"
-      selectionActions={selectionActions}
       storageKey={storageKey}
       onClearZaakSelection={handleClearSelection}
     >

frontend/src/pages/destructionlist/hooks/useZaakSelection.ts

@@ -5,7 +5,6 @@ import {
   ZaakSelection,
   addToZaakSelection,
   getAllZakenSelected,
-  getFilteredZaakSelection,
   getZaakSelectionItem,
   getZaakSelectionSize,
   clearZaakSelection as libClearZaakSelection,
@@ -63,9 +62,6 @@ export function useZaakSelection<T = unknown>(
   // All pages selected.
   const [allPagesSelectedState, setAllPagesSelectedState] = useState<boolean>();
 
-  // Has selection items.
-  const [hasSelectionState, setHasSelectionState] = useState<boolean>();
-
   // Selection count
   const [selectionSizeState, setSelectionSizeState] = useState<number>(0);
 
@@ -82,13 +78,6 @@ export function useZaakSelection<T = unknown>(
       }
     });
 
-    getFilteredZaakSelection(storageKey).then((zs) => {
-      const hasSelection = Object.keys(zs).length > 0;
-      if (hasSelection !== hasSelectionState) {
-        setHasSelectionState(hasSelection);
-      }
-    });
-
     getZaakSelectionSize(storageKey).then((size) => {
       if (size !== selectionSizeState) {
         setSelectionSizeState(size);
@@ -281,7 +270,7 @@ export function useZaakSelection<T = unknown>(
     selectedZakenOnPage,
     onSelect,
     {
-      hasSelection: Boolean(hasSelectionState || allPagesSelectedState),
+      hasSelection: Boolean(selectionSizeState || allPagesSelectedState),
       allPagesSelected: Boolean(allPagesSelectedState),
       selectionSize: selectionSizeState,
       deSelectedZakenOnPage,