♻️ - refactor: move destruction list status badge to secondary navigation

Author: svenvandescheur

frontend/src/components/DestructionListStatusBadge/DestructionListStatusBadge.stories.tsx

@@ -0,0 +1,76 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { within } from "@storybook/test";
+
+import { destructionListFactory } from "../../fixtures/destructionList";
+import { DestructionListStatusBadge } from "./DestructionListStatusBadge";
+
+const meta: Meta<typeof DestructionListStatusBadge> = {
+  title: "Components/DestructionListStatusBadge",
+  component: DestructionListStatusBadge,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DestructionListStatusNew: Story = {
+  args: {
+    destructionList: destructionListFactory({ status: "new" }),
+  },
+  play: async ({ canvasElement }) => {
+    await within(canvasElement).findByText("Nieuw");
+  },
+};
+
+export const DestructionListStatusChangesRequested: Story = {
+  args: {
+    destructionList: destructionListFactory({ status: "changes_requested" }),
+  },
+  play: async ({ canvasElement }) => {
+    await within(canvasElement).findByText("Wijzigingen aangevraagd");
+  },
+};
+
+export const DestructionListStatusReadyToReview: Story = {
+  args: {
+    destructionList: destructionListFactory({ status: "ready_to_review" }),
+  },
+  play: async ({ canvasElement }) => {
+    await within(canvasElement).findByText("Klaar voor beoordeling");
+  },
+};
+
+export const DestructionListStatusInternallyReviewed: Story = {
+  args: {
+    destructionList: destructionListFactory({ status: "internally_reviewed" }),
+  },
+  play: async ({ canvasElement }) => {
+    await within(canvasElement).findByText("Intern beoordeeld");
+  },
+};
+
+export const DestructionListStatusReadyForArchivist: Story = {
+  args: {
+    destructionList: destructionListFactory({ status: "ready_for_archivist" }),
+  },
+  play: async ({ canvasElement }) => {
+    await within(canvasElement).findByText("Klaar voor archivaris");
+  },
+};
+
+export const DestructionListStatusReadyToDelete: Story = {
+  args: {
+    destructionList: destructionListFactory({ status: "ready_to_delete" }),
+  },
+  play: async ({ canvasElement }) => {
+    await within(canvasElement).findByText("Klaar om te vernietigen");
+  },
+};
+
+export const DestructionListStatusDeleted: Story = {
+  args: {
+    destructionList: destructionListFactory({ status: "deleted" }),
+  },
+  play: async ({ canvasElement }) => {
+    await within(canvasElement).findByText("Vernietigd");
+  },
+};

frontend/src/components/DestructionListStatusBadge/DestructionListStatusBadge.tsx

@@ -0,0 +1,19 @@
+import { Badge, ucFirst } from "@maykin-ui/admin-ui";
+import React from "react";
+
+import { DestructionList } from "../../lib/api/destructionLists";
+import { STATUS_LEVEL_MAPPING, STATUS_MAPPING } from "../../pages/constants";
+
+type DestructionListStatusBadgeProps = {
+  destructionList: DestructionList;
+};
+
+export const DestructionListStatusBadge: React.FC<
+  DestructionListStatusBadgeProps
+> = ({ destructionList }) => {
+  return (
+    <Badge key="status" level={STATUS_LEVEL_MAPPING[destructionList.status]}>
+      {ucFirst(STATUS_MAPPING[destructionList.status])}
+    </Badge>
+  );
+};

frontend/src/components/DestructionListStatusBadge/index.ts

@@ -0,0 +1 @@
+export * from "./DestructionListStatusBadge";

frontend/src/components/DestructionListToolbar/DestructionListToolbar.tsx

@@ -72,14 +72,6 @@ export function DestructionListToolbar({
                 label: "Bevat gevoelige informatie",
                 value: destructionList.containsSensitiveInfo,
               },
-              status: {
-                label: "Status",
-                value: (
-                  <Badge level={STATUS_LEVEL_MAPPING[destructionList.status]}>
-                    {ucFirst(STATUS_MAPPING[destructionList.status])}
-                  </Badge>
-                ),
-              },
               aangemaakt: {
                 label: "Aangemaakt",
                 value: formatDate(new Date(destructionList.created)),

frontend/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from "./DestructionListAuditLog";
 export * from "./DestructionListReviewer";
 export * from "./DestructionListToolbar";
+export * from "./DestructionListStatusBadge";
 export * from "./ProcessingStatusBadge";

frontend/src/pages/destructionlist/detail/hooks/useSecondaryNavigation.tsx

@@ -8,7 +8,10 @@ import {
 import { useContext, useMemo } from "react";
 import { useNavigation, useRouteLoaderData } from "react-router-dom";
 
-import { ProcessingStatusBadge } from "../../../../components";
+import {
+  DestructionListStatusBadge,
+  ProcessingStatusBadge,
+} from "../../../../components";
 import { ZaakSelectionContext } from "../../../../contexts";
 import { useSubmitAction } from "../../../../hooks";
 import { ReviewItemResponse } from "../../../../lib/api/reviewResponse";
@@ -19,7 +22,7 @@ import {
   canTriggerDestruction,
 } from "../../../../lib/auth/permissions";
 import { formatUser } from "../../../../lib/format/user";
-import { getFilteredZaakSelection } from "../../../../lib/zaakSelection/zaakSelection";
+import { getFilteredZaakSelection } from "../../../../lib/zaakSelection";
 import {
   UpdateDestructionListAction,
   UpdateDestructionListProcessReviewAction,
@@ -382,6 +385,11 @@ export function useSecondaryNavigation(): ToolbarItem[] {
       // LEFT
       //
 
+      <DestructionListStatusBadge
+        key="status"
+        destructionList={destructionList}
+      />,
+
       // Status: "ready_to_delete", badge and spacer
       getPermittedToolbarItem(
         <ProcessingStatusBadge
@@ -392,7 +400,8 @@ export function useSecondaryNavigation(): ToolbarItem[] {
           canTriggerDestruction(user, destructionList) &&
           destructionList.processingStatus !== "new",
       ),
-      getPermittedToolbarItem("spacer", canTriggerDestruction),
+
+      "spacer",
 
       //
       // Right