Skip to content

Commit 78cb3ce

Browse files
JohnDupreyJohnDuprey
committed
refactor: Update mailbox page to improve readability and add report database toggle
1 parent 6abacb1 commit 78cb3ce

1 file changed

Lines changed: 104 additions & 82 deletions

File tree

  • src/pages/email/administration/mailboxes

‎src/pages/email/administration/mailboxes/index.js‎

Lines changed: 104 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,85 @@
1-
import { Layout as DashboardLayout } from "../../../../layouts/index.js";
2-
import { CippTablePage } from "../../../../components/CippComponents/CippTablePage.jsx";
3-
import CippExchangeActions from "../../../../components/CippComponents/CippExchangeActions";
4-
import { CippHVEUserDrawer } from "../../../../components/CippComponents/CippHVEUserDrawer.jsx";
5-
import { CippSharedMailboxDrawer } from "../../../../components/CippComponents/CippSharedMailboxDrawer.jsx";
6-
import { Sync, Info } from "@mui/icons-material";
7-
import { Button, SvgIcon, IconButton, Tooltip } from "@mui/material";
8-
import { useSettings } from "../../../../hooks/use-settings";
9-
import { Stack } from "@mui/system";
10-
import { useDialog } from "../../../../hooks/use-dialog";
11-
import { CippApiDialog } from "../../../../components/CippComponents/CippApiDialog";
12-
import { useState } from "react";
13-
import { CippQueueTracker } from "../../../../components/CippTable/CippQueueTracker";
1+
import { Layout as DashboardLayout } from '../../../../layouts/index.js'
2+
import { CippTablePage } from '../../../../components/CippComponents/CippTablePage.jsx'
3+
import CippExchangeActions from '../../../../components/CippComponents/CippExchangeActions'
4+
import { CippHVEUserDrawer } from '../../../../components/CippComponents/CippHVEUserDrawer.jsx'
5+
import { CippSharedMailboxDrawer } from '../../../../components/CippComponents/CippSharedMailboxDrawer.jsx'
6+
import { Sync, CloudDone, Bolt } from '@mui/icons-material'
7+
import { Button, SvgIcon, Tooltip, Chip } from '@mui/material'
8+
import { useSettings } from '../../../../hooks/use-settings'
9+
import { Stack } from '@mui/system'
10+
import { useDialog } from '../../../../hooks/use-dialog'
11+
import { CippApiDialog } from '../../../../components/CippComponents/CippApiDialog'
12+
import { useState, useEffect } from 'react'
13+
import { CippQueueTracker } from '../../../../components/CippTable/CippQueueTracker'
1414

1515
const Page = () => {
16-
const pageTitle = "Mailboxes";
17-
const currentTenant = useSettings().currentTenant;
18-
const syncDialog = useDialog();
19-
const [syncQueueId, setSyncQueueId] = useState(null);
16+
const pageTitle = 'Mailboxes'
17+
const currentTenant = useSettings().currentTenant
18+
const syncDialog = useDialog()
19+
const [syncQueueId, setSyncQueueId] = useState(null)
2020

21-
const isAllTenants = currentTenant === "AllTenants";
21+
const isAllTenants = currentTenant === 'AllTenants'
22+
const [useReportDB, setUseReportDB] = useState(true)
2223

23-
const apiData = {
24-
UseReportDB: true,
25-
};
24+
useEffect(() => {
25+
setUseReportDB(true)
26+
}, [currentTenant])
2627

2728
// Define off-canvas details
2829
const offCanvas = {
29-
extendedInfoFields: ["displayName", "UPN", "AdditionalEmailAddresses", "recipientTypeDetails"],
30+
extendedInfoFields: ['displayName', 'UPN', 'AdditionalEmailAddresses', 'recipientTypeDetails'],
3031
actions: CippExchangeActions(),
31-
};
32+
}
3233

3334
const filterList = [
3435
{
35-
filterName: "View User Mailboxes",
36-
value: [{ id: "recipientTypeDetails", value: "UserMailbox" }],
37-
type: "column",
36+
filterName: 'View User Mailboxes',
37+
value: [{ id: 'recipientTypeDetails', value: 'UserMailbox' }],
38+
type: 'column',
3839
},
3940
{
40-
filterName: "View Shared Mailboxes",
41-
value: [{ id: "recipientTypeDetails", value: "SharedMailbox" }],
42-
type: "column",
41+
filterName: 'View Shared Mailboxes',
42+
value: [{ id: 'recipientTypeDetails', value: 'SharedMailbox' }],
43+
type: 'column',
4344
},
4445
{
45-
filterName: "View Room Mailboxes",
46-
value: [{ id: "recipientTypeDetails", value: "RoomMailbox" }],
47-
type: "column",
46+
filterName: 'View Room Mailboxes',
47+
value: [{ id: 'recipientTypeDetails', value: 'RoomMailbox' }],
48+
type: 'column',
4849
},
4950
{
50-
filterName: "View Equipment Mailboxes",
51-
value: [{ id: "recipientTypeDetails", value: "EquipmentMailbox" }],
52-
type: "column",
51+
filterName: 'View Equipment Mailboxes',
52+
value: [{ id: 'recipientTypeDetails', value: 'EquipmentMailbox' }],
53+
type: 'column',
5354
},
54-
];
55+
]
5556

5657
// Simplified columns for the table
5758
const simpleColumns = isAllTenants
5859
? [
59-
"Tenant", // Tenant
60-
"displayName", // Display Name
61-
"recipientTypeDetails", // Recipient Type Details
62-
"UPN", // User Principal Name
63-
"primarySmtpAddress", // Primary Email Address
64-
"AdditionalEmailAddresses", // Additional Email Addresses
65-
"CacheTimestamp", // Cache Timestamp
60+
'Tenant', // Tenant
61+
'displayName', // Display Name
62+
'recipientTypeDetails', // Recipient Type Details
63+
'UPN', // User Principal Name
64+
'primarySmtpAddress', // Primary Email Address
65+
'AdditionalEmailAddresses', // Additional Email Addresses
66+
'CacheTimestamp', // Cache Timestamp
6667
]
6768
: [
68-
"displayName", // Display Name
69-
"recipientTypeDetails", // Recipient Type Details
70-
"UPN", // User Principal Name
71-
"primarySmtpAddress", // Primary Email Address
72-
"AdditionalEmailAddresses", // Additional Email Addresses
73-
"CacheTimestamp", // Cache Timestamp
74-
];
69+
'displayName', // Display Name
70+
'recipientTypeDetails', // Recipient Type Details
71+
'UPN', // User Principal Name
72+
'primarySmtpAddress', // Primary Email Address
73+
'AdditionalEmailAddresses', // Additional Email Addresses
74+
'CacheTimestamp', // Cache Timestamp
75+
]
7576

7677
return (
7778
<>
7879
<CippTablePage
7980
title={pageTitle}
80-
apiUrl="/api/ListMailboxes"
81-
apiData={apiData}
82-
queryKey={`ListMailboxes-${currentTenant}`}
81+
apiUrl={`/api/ListMailboxes${useReportDB ? '?UseReportDB=true' : ''}`}
82+
queryKey={`ListMailboxes-${currentTenant}-${useReportDB}`}
8383
actions={CippExchangeActions()}
8484
offCanvas={offCanvas}
8585
simpleColumns={simpleColumns}
@@ -88,27 +88,49 @@ const Page = () => {
8888
<Stack direction="row" spacing={1} alignItems="center">
8989
<CippSharedMailboxDrawer />
9090
<CippHVEUserDrawer />
91-
<CippQueueTracker
92-
queueId={syncQueueId}
93-
queryKey={`ListMailboxes-${currentTenant}`}
94-
title="Mailboxes Sync"
95-
/>
96-
<Tooltip title="This report displays cached data from the CIPP reporting database. Click the Sync button to update the cache for the current tenant.">
97-
<IconButton size="small">
98-
<Info fontSize="small" />
99-
</IconButton>
100-
</Tooltip>
101-
<Button
102-
startIcon={
103-
<SvgIcon fontSize="small">
104-
<Sync />
105-
</SvgIcon>
91+
{useReportDB && (
92+
<>
93+
<CippQueueTracker
94+
queueId={syncQueueId}
95+
queryKey={`ListMailboxes-${currentTenant}`}
96+
title="Mailboxes Sync"
97+
/>
98+
<Button
99+
startIcon={
100+
<SvgIcon fontSize="small">
101+
<Sync />
102+
</SvgIcon>
103+
}
104+
size="xs"
105+
onClick={syncDialog.handleOpen}
106+
disabled={isAllTenants}
107+
>
108+
Sync
109+
</Button>
110+
</>
111+
)}
112+
<Tooltip
113+
title={
114+
isAllTenants
115+
? 'AllTenants always uses cached data'
116+
: useReportDB
117+
? 'Showing cached data — click to switch to live'
118+
: 'Showing live data — click to switch to cache'
106119
}
107-
size="xs"
108-
onClick={syncDialog.handleOpen}
109120
>
110-
Sync
111-
</Button>
121+
<span>
122+
<Chip
123+
icon={useReportDB ? <CloudDone /> : <Bolt />}
124+
label={useReportDB ? 'Cached' : 'Live'}
125+
color="primary"
126+
size="small"
127+
onClick={isAllTenants ? undefined : () => setUseReportDB((prev) => !prev)}
128+
clickable={!isAllTenants}
129+
disabled={isAllTenants}
130+
variant="outlined"
131+
/>
132+
</span>
133+
</Tooltip>
112134
</Stack>
113135
}
114136
/>
@@ -117,25 +139,25 @@ const Page = () => {
117139
title="Sync Mailboxes"
118140
fields={[]}
119141
api={{
120-
type: "GET",
121-
url: "/api/ExecCIPPDBCache",
142+
type: 'GET',
143+
url: '/api/ExecCIPPDBCache',
122144
confirmText: `Run mailboxes cache sync for ${currentTenant}? This will update mailbox data immediately.`,
123-
relatedQueryKeys: [`ListMailboxes-${currentTenant}`],
145+
relatedQueryKeys: [`ListMailboxes-${currentTenant}-true`],
124146
data: {
125-
Name: "Mailboxes",
126-
Types: "None",
147+
Name: 'Mailboxes',
148+
Types: 'None',
127149
},
128150
onSuccess: (response) => {
129151
if (response?.Metadata?.QueueId) {
130-
setSyncQueueId(response.Metadata.QueueId);
152+
setSyncQueueId(response.Metadata.QueueId)
131153
}
132154
},
133155
}}
134156
/>
135157
</>
136-
);
137-
};
158+
)
159+
}
138160

139-
Page.getLayout = (page) => <DashboardLayout allTenantsSupport={true}>{page}</DashboardLayout>;
161+
Page.getLayout = (page) => <DashboardLayout allTenantsSupport={true}>{page}</DashboardLayout>
140162

141-
export default Page;
163+
export default Page

0 commit comments

Comments
 (0)