From bdd1fe1e98187ea745ea1bd14f76456f96ea7c47 Mon Sep 17 00:00:00 2001
From: Zac Richards <107489668+Zacgoose@users.noreply.github.com>
Date: Sun, 4 May 2025 20:01:26 +0800
Subject: [PATCH] Default filter for table, updated mailbox report
---
.../CippComponents/CippTablePage.jsx | 10 ++++++++
src/components/CippTable/CippDataTable.js | 24 +++++++++++++++++++
.../SharedMailboxEnabledAccount/index.js | 20 ++++++++--------
3 files changed, 44 insertions(+), 10 deletions(-)
diff --git a/src/components/CippComponents/CippTablePage.jsx b/src/components/CippComponents/CippTablePage.jsx
index 37a3a9d44ccc..eb75f6cc1ad1 100644
--- a/src/components/CippComponents/CippTablePage.jsx
+++ b/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 (
<>
@@ -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}
/>
diff --git a/src/components/CippTable/CippDataTable.js b/src/components/CippTable/CippDataTable.js
index 058f97c09772..6c2269f0f6c1 100644
--- a/src/components/CippTable/CippDataTable.js
+++ b/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 ? (
@@ -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));
diff --git a/src/pages/email/reports/SharedMailboxEnabledAccount/index.js b/src/pages/email/reports/SharedMailboxEnabledAccount/index.js
index 4b05494fa344..dbd167e86105 100644
--- a/src/pages/email/reports/SharedMailboxEnabledAccount/index.js
+++ b/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 (
{
icon: ,
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={{
@@ -31,6 +23,7 @@ const Page = () => {
"UserPrincipalName",
"displayName",
"accountEnabled",
+ "assignedLicenses",
"onPremisesSyncEnabled",
],
}}
@@ -38,8 +31,15 @@ const Page = () => {
"UserPrincipalName",
"displayName",
"accountEnabled",
+ "assignedLicenses",
"onPremisesSyncEnabled",
]}
+ filters={[
+ {
+ id: "accountEnabled",
+ value: "Yes"
+ }
+ ]}
/>
);
};