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" + } + ]} /> ); };