update mailbox rules

dynamically generate property list for offcanavas
add remove mailbox rule action

Author: JohnDuprey

src/pages/email/administration/mailbox-rules/index.js

@@ -1,10 +1,58 @@
 import { Layout as DashboardLayout } from "/src/layouts/index.js";
 import { CippTablePage } from "/src/components/CippComponents/CippTablePage.jsx";
+import { TrashIcon } from "@heroicons/react/24/outline";
+import { getCippTranslation } from "../../../../utils/get-cipp-translation";
+import { getCippFormatting } from "../../../../utils/get-cipp-formatting";
+import { CippPropertyListCard } from "../../../../components/CippCards/CippPropertyListCard";
 
 const Page = () => {
   const pageTitle = "Mailbox Rules";
+  const simpleColumns = ["Name", "Priority", "Enabled", "UserPrincipalName", "From"];
+  const actions = [
+    {
+      label: "Remove Mailbox Rule",
+      type: "GET",
+      icon: <TrashIcon />,
+      url: "/api/ExecRemoveMailboxRule",
+      data: { ruleId: "Identity", userPrincipalName: "UserPrincipalName" },
+      confirmText: "Are you sure you want to remove this mailbox rule?",
+      multiPost: false,
+    },
+  ];
 
-  return <CippTablePage title={pageTitle} apiUrl="/api/ListMailboxRules" />;
+  const offCanvas = {
+    children: (data) => {
+      const keys = Object.keys(data).filter(
+        (key) => !key.includes("@odata") && !key.includes("@data")
+      );
+      const properties = [];
+      keys.forEach((key) => {
+        if (data[key] && data[key].length > 0) {
+          properties.push({
+            label: getCippTranslation(key),
+            value: getCippFormatting(data[key], key),
+          });
+        }
+      });
+      return (
+        <CippPropertyListCard
+          cardSx={{ p: 0, m: -2 }}
+          title="Rule Details"
+          propertyItems={properties}
+          actionItems={actions}
+        />
+      );
+    },
+  };
+  return (
+    <CippTablePage
+      title={pageTitle}
+      apiUrl="/api/ListMailboxRules"
+      simpleColumns={simpleColumns}
+      offCanvas={offCanvas}
+      actions={actions}
+    />
+  );
 };
 
 Page.getLayout = (page) => <DashboardLayout>{page}</DashboardLayout>;