From 406b76ce255b40c0af4fabd028ca98fa66ee18b5 Mon Sep 17 00:00:00 2001
From: Henry <50559854+Henry8192@users.noreply.github.com>
Date: Tue, 17 Sep 2024 22:14:31 -0400
Subject: [PATCH] Introduce 8px padding to .menu-bar for better spacing. Add
 .menu-bar-filename class to CSS.

---
 .../components/MenuBar/ExportLogsButton.tsx   | 58 +++++++++++++++++++
 .../src/components/MenuBar/index.tsx          | 11 +---
 .../src/contexts/StateContextProvider.tsx     |  8 ++-
 .../src/services/LogExportManager.ts          | 19 ++++--
 4 files changed, 81 insertions(+), 15 deletions(-)
 create mode 100644 new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx

diff --git a/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx b/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
new file mode 100644
index 00000000..161e1e6a
--- /dev/null
+++ b/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
@@ -0,0 +1,58 @@
+import {useContext} from "react";
+
+import {
+    CircularProgress,
+    Typography,
+} from "@mui/joy";
+
+import DownloadIcon from "@mui/icons-material/Download";
+
+import {StateContext} from "../../contexts/StateContextProvider";
+import {
+    EXPORT_LOG_PROGRESS_COMPLETE,
+    EXPORT_LOG_PROGRESS_INITIALIZATION,
+} from "../../services/LogExportManager";
+import SmallIconButton from "./SmallIconButton";
+
+
+/**
+ * Represents a button for triggering log exports and displays the progress.
+ *
+ * @return
+ */
+export const ExportLogsButton = () => {
+    const {exportLogs, exportProgress} = useContext(StateContext);
+    const handleExportLogsButtonClick = () => {
+        exportLogs();
+    };
+
+
+    return (
+        <SmallIconButton
+            disabled={null !== exportProgress && 1 !== exportProgress}
+            onClick={handleExportLogsButtonClick}
+        >
+            {null === exportProgress || EXPORT_LOG_PROGRESS_INITIALIZATION === exportProgress ?
+                <DownloadIcon/> :
+                <CircularProgress
+                    determinate={true}
+                    thickness={3}
+                    value={exportProgress * 100}
+                    variant={"solid"}
+                    color={EXPORT_LOG_PROGRESS_COMPLETE === exportProgress ?
+                        "success" :
+                        "primary"}
+                >
+                    {EXPORT_LOG_PROGRESS_COMPLETE === exportProgress ?
+                        <DownloadIcon
+                            color={"success"}
+                            sx={{fontSize: "14px"}}/> :
+                        <Typography level={"body-xs"}>
+                            {Math.ceil(exportProgress * 100)}
+                        </Typography>}
+                </CircularProgress>}
+        </SmallIconButton>
+    );
+};
+
+export default ExportLogsButton;
diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx
index f3cd059d..1e345069 100644
--- a/new-log-viewer/src/components/MenuBar/index.tsx
+++ b/new-log-viewer/src/components/MenuBar/index.tsx
@@ -11,7 +11,6 @@ import {
 } from "@mui/joy";
 
 import DescriptionIcon from "@mui/icons-material/Description";
-import DownloadIcon from "@mui/icons-material/Download";
 import FileOpenIcon from "@mui/icons-material/FileOpen";
 import SettingsIcon from "@mui/icons-material/Settings";
 
@@ -19,6 +18,7 @@ import {StateContext} from "../../contexts/StateContextProvider";
 import {CURSOR_CODE} from "../../typings/worker";
 import {openFile} from "../../utils/file";
 import SettingsModal from "../modals/SettingsModal";
+import ExportLogsButton from "./ExportLogsButton";
 import NavigationBar from "./NavigationBar";
 import SmallIconButton from "./SmallIconButton";
 
@@ -31,7 +31,7 @@ import "./index.css";
  * @return
  */
 const MenuBar = () => {
-    const {fileName, exportLogs, loadFile} = useContext(StateContext);
+    const {fileName, loadFile} = useContext(StateContext);
 
     const [isSettingsModalOpen, setIsSettingsModalOpen] = useState<boolean>(false);
 
@@ -49,9 +49,6 @@ const MenuBar = () => {
         setIsSettingsModalOpen(true);
     };
 
-    const handleExportLogsButtonClick = () => {
-        exportLogs();
-    };
 
     return (
         <>
@@ -81,9 +78,7 @@ const MenuBar = () => {
                 >
                     <SettingsIcon/>
                 </SmallIconButton>
-                <SmallIconButton onClick={handleExportLogsButtonClick}>
-                    <DownloadIcon/>
-                </SmallIconButton>
+                <ExportLogsButton/>
             </Sheet>
             <SettingsModal
                 isOpen={isSettingsModalOpen}
diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
index 0fcb23ac..aa71e706 100644
--- a/new-log-viewer/src/contexts/StateContextProvider.tsx
+++ b/new-log-viewer/src/contexts/StateContextProvider.tsx
@@ -42,6 +42,7 @@ import {
 interface StateContextType {
     beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap,
     fileName: string,
+    exportProgress: Nullable<number>,
     logData: string,
     numEvents: number,
     numPages: number,
@@ -58,6 +59,7 @@ const StateContext = createContext<StateContextType>({} as StateContextType);
  */
 const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
     beginLineNumToLogEventNum: new Map<number, number>(),
+    exportProgress: null,
     fileName: "",
     logData: "Loading...",
     numEvents: 0,
@@ -140,6 +142,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
     const {filePath, logEventNum} = useContext(UrlContext);
 
     const [fileName, setFileName] = useState<string>(STATE_DEFAULT.fileName);
+    const [exportProgress, setExportProgress] =
+        useState<Nullable<number>>(STATE_DEFAULT.exportProgress);
     const [logData, setLogData] = useState<string>(STATE_DEFAULT.logData);
     const [numEvents, setNumEvents] = useState<number>(STATE_DEFAULT.numEvents);
     const beginLineNumToLogEventNumRef =
@@ -157,7 +161,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         switch (code) {
             case WORKER_RESP_CODE.CHUNK_DATA:
                 if (null !== logExportManagerRef.current) {
-                    logExportManagerRef.current.appendChunkData(args.logs);
+                    const progress = logExportManagerRef.current.appendChunkData(args.logs);
+                    setExportProgress(progress);
                 }
                 break;
             case WORKER_RESP_CODE.LOG_FILE_INFO:
@@ -314,6 +319,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         <StateContext.Provider
             value={{
                 beginLineNumToLogEventNum: beginLineNumToLogEventNumRef.current,
+                exportProgress: exportProgress,
                 fileName: fileName,
                 logData: logData,
                 numEvents: numEvents,
diff --git a/new-log-viewer/src/services/LogExportManager.ts b/new-log-viewer/src/services/LogExportManager.ts
index 93a0b44b..5f527381 100644
--- a/new-log-viewer/src/services/LogExportManager.ts
+++ b/new-log-viewer/src/services/LogExportManager.ts
@@ -1,6 +1,9 @@
 import {downloadBlob} from "../utils/file";
 
 
+const EXPORT_LOG_PROGRESS_INITIALIZATION = 0;
+const EXPORT_LOG_PROGRESS_COMPLETE = 1;
+
 /**
  * Manager for exporting logs to a file.
  */
@@ -22,7 +25,8 @@ class LogExportManager {
 
     constructor (numChunks: number, fileName: string) {
         this.#numChunks = numChunks;
-        this.#exportedFileName = fileName;
+        this.#exportedFileName = `${fileName}-exported-${new Date().toISOString()
+            .replace(/[:.]/g, "-")}.log`;
     }
 
     /**
@@ -37,12 +41,14 @@ class LogExportManager {
         if (0 === this.#numChunks) {
             this.#download();
 
-            return 1;
+            return EXPORT_LOG_PROGRESS_COMPLETE;
         }
         this.#chunks.push(chunkData);
         if (this.#chunks.length === this.#numChunks) {
             this.#download();
             this.#chunks.length = 0;
+
+            return EXPORT_LOG_PROGRESS_COMPLETE;
         }
 
         return this.#chunks.length / this.#numChunks;
@@ -53,11 +59,12 @@ class LogExportManager {
      */
     #download () {
         const blob = new Blob(this.#chunks, {type: "text/plain"});
-        const fileNameTimeStamped = `${this.#exportedFileName}-exported-${new Date().toISOString()
-            .replace(/[:.]/g, "-")}.log`;
-
-        downloadBlob(blob, fileNameTimeStamped);
+        downloadBlob(blob, this.#exportedFileName);
     }
 }
 
 export default LogExportManager;
+export {
+    EXPORT_LOG_PROGRESS_COMPLETE,
+    EXPORT_LOG_PROGRESS_INITIALIZATION,
+};