Merge pull request #4040 from Zacgoose/default-filter-shared-mailbox

Default filter for table, updated mailbox report

Author: KelvinTegelaar

src/components/CippComponents/CippTablePage.jsx

@@ -4,6 +4,7 @@ import Head from "next/head";
 import { CippDataTable } from "../CippTable/CippDataTable";
 import { useSettings } from "../../hooks/use-settings";
 import { CippHead } from "./CippHead";
+import { useState } from "react";
 
 export const CippTablePage = (props) => {
   const {
@@ -23,10 +24,12 @@ export const CippTablePage = (props) => {
     queryKey,
     tableFilter,
     tenantInTitle = true,
+    filters,
     sx = { flexGrow: 1, py: 4 },
     ...other
   } = props;
   const tenant = useSettings().currentTenant;
+  const [tableFilters] = useState(filters || []);
   return (
     <>
       <CippHead title={title} />
@@ -61,6 +64,13 @@ export const CippTablePage = (props) => {
                 columns={columns}
                 columnsFromApi={columnsFromApi}
                 offCanvas={offCanvas}
+                filters={tableFilters}
+                initialState={{
+                  columnFilters: filters ? filters.map(filter => ({
+                    id: filter.id || filter.columnId,
+                    value: filter.value
+                  })) : []
+                }}
                 {...other}
               />
             </Card>

src/components/CippTable/CippDataTable.js

@@ -66,6 +66,7 @@ export const CippDataTable = (props) => {
   const [actionData, setActionData] = useState({ data: {}, action: {}, ready: false });
   const [graphFilterData, setGraphFilterData] = useState({});
   const [sorting, setSorting] = useState([]);
+  const [columnFilters, setColumnFilters] = useState([]);
   const waitingBool = api?.url ? true : false;
 
   const settings = useSettings();
@@ -78,6 +79,12 @@ export const CippDataTable = (props) => {
     ...graphFilterData,
   });
 
+  useEffect(() => {
+    if (filters && Array.isArray(filters) && filters.length > 0) {
+      setColumnFilters(filters);
+    }
+  }, [filters]);
+
   useEffect(() => {
     if (Array.isArray(data) && !api?.url) {
       if (!isEqual(data, usedData)) {
@@ -208,6 +215,7 @@ export const CippDataTable = (props) => {
     state: {
       columnVisibility,
       sorting,
+      columnFilters,
       showSkeletons: getRequestData.isFetchingNextPage
         ? false
         : getRequestData.isFetching
@@ -217,6 +225,7 @@ export const CippDataTable = (props) => {
     onSortingChange: (newSorting) => {
       setSorting(newSorting ?? []);
     },
+    onColumnFiltersChange: setColumnFilters,
     renderEmptyRowsFallback: ({ table }) =>
       getRequestData.data?.pages?.[0].Metadata?.QueueMessage ? (
         <Box sx={{ py: 4 }}>
@@ -435,6 +444,21 @@ export const CippDataTable = (props) => {
     },
   });
 
+  useEffect(() => {
+    if (filters && Array.isArray(filters) && filters.length > 0 && memoizedColumns.length > 0) {
+      // Make sure the table and columns are ready
+      setTimeout(() => {
+        if (table && typeof table.setColumnFilters === 'function') {
+          const formattedFilters = filters.map(filter => ({
+            id: filter.id || filter.columnId,
+            value: filter.value
+          }));
+          table.setColumnFilters(formattedFilters);
+        }
+      },);
+    }
+  }, [filters, memoizedColumns, table]);
+
   useEffect(() => {
     if (onChange && table.getSelectedRowModel().rows) {
       onChange(table.getSelectedRowModel().rows.map((row) => row.original));

src/pages/email/reports/SharedMailboxEnabledAccount/index.js

@@ -2,15 +2,6 @@ import { Layout as DashboardLayout } from "/src/layouts/index.js";
 import { CippTablePage } from "/src/components/CippComponents/CippTablePage.jsx";
 import { Block } from "@mui/icons-material";
 
-/* 
-  NOTE for Devs:
-  - The original component used a Redux selector (`useSelector`) for tenant data, 
-    which is handled by `CippTablePage` in the refactored version, thus eliminating `useSelector`.
-  - The `ModalService` with `confirm` handling was originally used to confirm blocking sign-in.
-    The action here replaces it with a confirmation text as per current guidelines.
-  - Original button and `FontAwesomeIcon` (faBan) are not used since action confirmation is handled by CippTablePage.
-*/
-
 const Page = () => {
   return (
     <CippTablePage
@@ -23,23 +14,32 @@ const Page = () => {
           icon: <Block />,
           url: "/api/ExecDisableUser",
           data: { ID: "id" },
-          confirmText: "Are you sure you want to block the sign-in for this user?",
+          confirmText: "Are you sure you want to block the sign-in for this mailbox?",
+          condition: (row) => row.accountEnabled && !row.onPremisesSyncEnabled,
         },
       ]}
       offCanvas={{
         extendedInfoFields: [
           "UserPrincipalName",
           "displayName",
           "accountEnabled",
+          "assignedLicenses",
           "onPremisesSyncEnabled",
         ],
       }}
       simpleColumns={[
         "UserPrincipalName",
         "displayName",
         "accountEnabled",
+        "assignedLicenses",
         "onPremisesSyncEnabled",
       ]}
+      filters={[
+        {
+          id: "accountEnabled",
+          value: "Yes"
+        }
+      ]}
     />
   );
 };