move message trace

update trace detail dialog box loading indicator
add same to quarantine page

Author: JohnDuprey

src/layouts/config.js

@@ -360,7 +360,6 @@ export const nativeMenuItems = [
             title: "Mailbox Client Access Settings",
             path: "/email/reports/mailbox-cas-settings",
           },
-          { title: "Message Trace", path: "/email/reports/message-trace" },
           {
             title: "Anti-Phishing Filters",
             path: "/email/reports/antiphishing-filters",
@@ -417,6 +416,7 @@ export const nativeMenuItems = [
         title: "Email Tools",
         path: "/email/tools",
         items: [
+          { title: "Message Trace", path: "/email/tools/message-trace" },
           { title: "Mailbox Restores", path: "/email/tools/mailbox-restores" },
           { title: "Message Viewer", path: "/email/tools/message-viewer" },
         ],

src/pages/email/administration/quarantine/index.js

@@ -175,22 +175,30 @@ const Page = () => {
           </IconButton>
         </DialogTitle>
         <DialogContent dividers>
-          <CippDataTable
-            noCard={true}
-            title="Message Trace Details"
-            simpleColumns={detailColumns}
-            data={traceDetails ?? []}
-            refreshFunction={() =>
-              getMessageTraceDetails.mutate({
-                url: "/api/ListMessageTrace",
-                data: {
-                  tenantFilter: tenantFilter,
-                  messageId: traceMessageId,
-                },
-              })
-            }
-            isFetching={getMessageTraceDetails.isPending}
-          />
+          {getMessageTraceDetails.isPending && (
+            <Typography variant="body1" sx={{ py: 4 }}>
+              <CircularProgress size={20} color="inherit" sx={{ mr: 1 }} /> Loading message trace
+              details...
+            </Typography>
+          )}
+          {getMessageTraceDetails.isSuccess && (
+            <CippDataTable
+              noCard={true}
+              title="Message Trace Details"
+              simpleColumns={detailColumns}
+              data={traceDetails ?? []}
+              refreshFunction={() =>
+                getMessageTraceDetails.mutate({
+                  url: "/api/ListMessageTrace",
+                  data: {
+                    tenantFilter: tenantFilter,
+                    messageId: traceMessageId,
+                  },
+                })
+              }
+              isFetching={getMessageTraceDetails.isPending}
+            />
+          )}
         </DialogContent>
       </Dialog>
     </>

src/pages/email/reports/message-trace/index.js renamed to src/pages/email/tools/message-trace/index.js

@@ -7,6 +7,8 @@ import {
   IconButton,
   Container,
   Stack,
+  Typography,
+  CircularProgress,
 } from "@mui/material";
 import { useForm } from "react-hook-form";
 import CippFormComponent from "/src/components/CippComponents/CippFormComponent";
@@ -313,19 +315,27 @@ const Page = () => {
           </IconButton>
         </DialogTitle>
         <DialogContent dividers>
-          <CippDataTable
-            noCard={true}
-            title="Message Trace Details"
-            simpleColumns={detailColumns}
-            data={traceDetails ?? []}
-            refreshFunction={() =>
-              startMessageTraceDetail({
-                MessageTraceId: messageTraceId,
-                RecipientAddress: messageTraceRecipient,
-              })
-            }
-            isFetching={messageTraceDetail.isPending}
-          />
+          {messageTraceDetail.isPending && (
+            <Typography variant="body1" sx={{ py: 4 }}>
+              <CircularProgress size={20} color="inherit" sx={{ mr: 1 }} /> Loading message trace
+              details...
+            </Typography>
+          )}
+          {messageTraceDetail.isSuccess && (
+            <CippDataTable
+              noCard={true}
+              title="Message Trace Details"
+              simpleColumns={detailColumns}
+              data={traceDetails ?? []}
+              refreshFunction={() =>
+                startMessageTraceDetail({
+                  MessageTraceId: messageTraceId,
+                  RecipientAddress: messageTraceRecipient,
+                })
+              }
+              isFetching={messageTraceDetail.isPending}
+            />
+          )}
         </DialogContent>
       </Dialog>
     </>