Add load state in <StateContextProvider/> and disable UI elements based on the state. (#88)

junhaoliao · davemarco · web-flow · commit 2d54b83b78f9 · 2024-10-22T00:36:39.000-04:00
Co-authored-by: davemarco &lt;83603688+davemarco@users.noreply.github.com&gt;
diff --git a/new-log-viewer/src/components/DropFileContainer/index.css b/new-log-viewer/src/components/DropFileContainer/index.css
@@ -28,3 +28,7 @@
 
     background-color: #f3f3f3;
 }
+
+.hover-message-disabled {
+    background-color: #fce4e4;
+}
diff --git a/new-log-viewer/src/components/DropFileContainer/index.tsx b/new-log-viewer/src/components/DropFileContainer/index.tsx
@@ -4,7 +4,9 @@ import React, {
 } from "react";
 
 import {StateContext} from "../../contexts/StateContextProvider";
+import {UI_ELEMENT} from "../../typings/states";
 import {CURSOR_CODE} from "../../typings/worker";
+import {isDisabled} from "../../utils/states";
 
 import "./index.css";
 
@@ -21,8 +23,9 @@ interface DropFileContextProviderProps {
  * @return
  */
 const DropFileContainer = ({children}: DropFileContextProviderProps) => {
-    const {loadFile} = useContext(StateContext);
+    const {loadFile, uiState} = useContext(StateContext);
     const [isFileHovering, setIsFileHovering] = useState(false);
+    const disabled = isDisabled(uiState, UI_ELEMENT.DRAG_AND_DROP);
 
     const handleDrag = (ev: React.DragEvent<HTMLDivElement>) => {
         ev.preventDefault();
@@ -52,6 +55,9 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
         ev.stopPropagation();
 
         setIsFileHovering(false);
+        if (disabled) {
+            return;
+        }
 
         const [file] = ev.dataTransfer.files;
         if ("undefined" === typeof file) {
@@ -78,10 +84,14 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => {
                         onDrop={handleDrop}
                     >
                         <div
-                            className={"hover-message"}
+                            className={`hover-message ${disabled ?
+                                "hover-message-disabled" :
+                                ""}`}
                             onDrop={handleDrop}
                         >
-                            Drop file to view
+                            {disabled ?
+                                "Drop is disabled during loading" :
+                                "Drop file to view"}
                         </div>
                     </div>
                 )}
diff --git a/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx b/new-log-viewer/src/components/MenuBar/ExportLogsButton.tsx
@@ -12,6 +12,11 @@ import {
     EXPORT_LOG_PROGRESS_VALUE_MAX,
     EXPORT_LOG_PROGRESS_VALUE_MIN,
 } from "../../services/LogExportManager";
+import {UI_ELEMENT} from "../../typings/states";
+import {
+    ignorePointerIfFastLoading,
+    isDisabled,
+} from "../../utils/states";
 import SmallIconButton from "./SmallIconButton";
 
 
@@ -21,16 +26,14 @@ import SmallIconButton from "./SmallIconButton";
  * @return
  */
 const ExportLogsButton = () => {
-    const {exportLogs, exportProgress, fileName} = useContext(StateContext);
+    const {exportLogs, exportProgress, uiState} = useContext(StateContext);
 
     return (
         <SmallIconButton
+            className={ignorePointerIfFastLoading(uiState)}
             disabled={
-                // eslint-disable-next-line no-warning-comments
-                // TODO: Replace `"" === fileName` with a more specific context variable that
-                // indicates whether the file has been loaded.
                 (null !== exportProgress && EXPORT_LOG_PROGRESS_VALUE_MAX !== exportProgress) ||
-                    "" === fileName
+                isDisabled(uiState, UI_ELEMENT.EXPORT_LOGS_BUTTON)
             }
             onClick={exportLogs}
         >
diff --git a/new-log-viewer/src/components/MenuBar/NavigationBar.tsx b/new-log-viewer/src/components/MenuBar/NavigationBar.tsx
@@ -1,14 +1,23 @@
 import React, {useContext} from "react";
 
+import {
+    ButtonGroup,
+    IconButton,
+} from "@mui/joy";
+
 import NavigateBefore from "@mui/icons-material/NavigateBefore";
 import NavigateNext from "@mui/icons-material/NavigateNext";
 import SkipNext from "@mui/icons-material/SkipNext";
 import SkipPrevious from "@mui/icons-material/SkipPrevious";
 
 import {StateContext} from "../../contexts/StateContextProvider";
+import {UI_ELEMENT} from "../../typings/states";
 import {ACTION_NAME} from "../../utils/actions";
+import {
+    ignorePointerIfFastLoading,
+    isDisabled,
+} from "../../utils/states";
 import PageNumInput from "./PageNumInput";
-import SmallIconButton from "./SmallIconButton";
 
 
 /**
@@ -17,7 +26,7 @@ import SmallIconButton from "./SmallIconButton";
  * @return
  */
 const NavigationBar = () => {
-    const {loadPageByAction} = useContext(StateContext);
+    const {uiState, loadPageByAction} = useContext(StateContext);
 
     const handleNavButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
         const {actionName} = event.currentTarget.dataset;
@@ -34,35 +43,41 @@ const NavigationBar = () => {
     };
 
     return (
-        <>
-            <SmallIconButton
+        <ButtonGroup
+            className={ignorePointerIfFastLoading(uiState)}
+            disabled={isDisabled(uiState, UI_ELEMENT.NAVIGATION_BAR)}
+            size={"sm"}
+            spacing={0.01}
+            variant={"plain"}
+        >
+            <IconButton
                 data-action-name={ACTION_NAME.FIRST_PAGE}
                 onClick={handleNavButtonClick}
             >
                 <SkipPrevious/>
-            </SmallIconButton>
-            <SmallIconButton
+            </IconButton>
+            <IconButton
                 data-action-name={ACTION_NAME.PREV_PAGE}
                 onClick={handleNavButtonClick}
             >
                 <NavigateBefore/>
-            </SmallIconButton>
+            </IconButton>
 
             <PageNumInput/>
 
-            <SmallIconButton
+            <IconButton
                 data-action-name={ACTION_NAME.NEXT_PAGE}
                 onClick={handleNavButtonClick}
             >
                 <NavigateNext/>
-            </SmallIconButton>
-            <SmallIconButton
+            </IconButton>
+            <IconButton
                 data-action-name={ACTION_NAME.LAST_PAGE}
                 onClick={handleNavButtonClick}
             >
                 <SkipNext/>
-            </SmallIconButton>
-        </>
+            </IconButton>
+        </ButtonGroup>
     );
 };
 
diff --git a/new-log-viewer/src/components/MenuBar/PageNumInput.css b/new-log-viewer/src/components/MenuBar/PageNumInput.css
@@ -13,3 +13,8 @@
 .page-num-input-num-pages-text {
     font-size: inherit !important;
 }
+
+.page-num-input-num-pages-text-disabled {
+    /* stylelint-disable-next-line custom-property-pattern */
+    color: var(--joy-palette-neutral-plainDisabledColor) !important;
+}
diff --git a/new-log-viewer/src/components/MenuBar/PageNumInput.tsx b/new-log-viewer/src/components/MenuBar/PageNumInput.tsx
@@ -11,7 +11,12 @@ import {
 } from "@mui/joy";
 
 import {StateContext} from "../../contexts/StateContextProvider";
+import {UI_ELEMENT} from "../../typings/states";
 import {ACTION_NAME} from "../../utils/actions";
+import {
+    ignorePointerIfFastLoading,
+    isDisabled,
+} from "../../utils/states";
 
 import "./PageNumInput.css";
 
@@ -25,11 +30,13 @@ const PAGE_NUM_INPUT_FIT_EXTRA_WIDTH = 2;
  * @return
  */
 const PageNumInput = () => {
-    const {loadPageByAction, numPages, pageNum} = useContext(StateContext);
+    const {loadPageByAction, numPages, pageNum, uiState} = useContext(StateContext);
 
     const [isEditing, setIsEditing] = useState<boolean>(false);
     const inputRef = useRef<HTMLInputElement>(null);
 
+    const disabled = isDisabled(uiState, UI_ELEMENT.NAVIGATION_BAR);
+
     const handleSubmit = (ev?: React.FormEvent<HTMLFormElement>) => {
         if ("undefined" !== typeof ev) {
             ev.preventDefault();
@@ -80,14 +87,17 @@ const PageNumInput = () => {
             onSubmit={handleSubmit}
         >
             <Input
-                className={"page-num-input"}
+                className={`page-num-input ${ignorePointerIfFastLoading(uiState)}`}
+                disabled={disabled}
                 size={"sm"}
                 slotProps={{input: {ref: inputRef}}}
                 type={"number"}
                 endDecorator={
                     <Typography
-                        className={"page-num-input-num-pages-text"}
                         level={"body-md"}
+                        className={`page-num-input-num-pages-text ${disabled ?
+                            "page-num-input-num-pages-text-disabled" :
+                            ""}`}
                     >
                         {"/ "}
                         {numPages}
diff --git a/new-log-viewer/src/components/MenuBar/index.css b/new-log-viewer/src/components/MenuBar/index.css
@@ -39,3 +39,8 @@
     display: flex !important;
     justify-content: flex-end;
 }
+
+.menu-bar-loading-progress {
+    z-index: var(--ylv-loading-progress-z-index);
+    margin-bottom: -2px;
+}
diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx
@@ -4,6 +4,7 @@ import {
     Box,
     Divider,
     IconButton,
+    LinearProgress,
     Sheet,
     Tooltip,
     Typography,
@@ -12,8 +13,10 @@ import {
 import FolderOpenIcon from "@mui/icons-material/FolderOpen";
 
 import {StateContext} from "../../contexts/StateContextProvider";
+import {UI_ELEMENT} from "../../typings/states";
 import {CURSOR_CODE} from "../../typings/worker";
 import {openFile} from "../../utils/file";
+import {isDisabled} from "../../utils/states";
 import ExportLogsButton from "./ExportLogsButton";
 import NavigationBar from "./NavigationBar";
 
@@ -26,7 +29,7 @@ import "./index.css";
  * @return
  */
 const MenuBar = () => {
-    const {fileName, loadFile} = useContext(StateContext);
+    const {fileName, loadFile, uiState} = useContext(StateContext);
 
     const handleOpenFile = () => {
         openFile((file) => {
@@ -52,6 +55,7 @@ const MenuBar = () => {
                     variant={"outlined"}
                 >
                     <IconButton
+                        disabled={isDisabled(uiState, UI_ELEMENT.OPEN_FILE_BUTTON)}
                         size={"sm"}
                         onClick={handleOpenFile}
                     >
@@ -84,6 +88,11 @@ const MenuBar = () => {
 
                 <ExportLogsButton/>
             </Sheet>
+            {(false === isDisabled(uiState, UI_ELEMENT.PROGRESS_BAR)) &&
+                <LinearProgress
+                    className={"menu-bar-loading-progress"}
+                    size={"sm"}
+                    thickness={2}/>}
         </>
     );
 };
diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css
@@ -15,6 +15,11 @@
     background-color: initial !important;
 }
 
+.log-level-select-render-value-box-label-disabled {
+    /* stylelint-disable-next-line custom-property-pattern */
+    color: var(--joy-palette-neutral-plainDisabledColor) !important;
+}
+
 .log-level-select-listbox {
     /* Disallow width auto-resizing with the `Select` button. */
     max-width: 0;
diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
@@ -32,7 +32,12 @@ import {
     LOG_LEVEL_NAMES,
     MAX_LOG_LEVEL,
 } from "../../../typings/logs";
+import {UI_ELEMENT} from "../../../typings/states";
 import {range} from "../../../utils/data";
+import {
+    ignorePointerIfFastLoading,
+    isDisabled,
+} from "../../../utils/states";
 import LogLevelChip from "./LogLevelChip";
 
 import "./index.css";
@@ -126,26 +131,29 @@ interface ClearFiltersOptionProps {
  * @param props.onClick
  * @return
  */
-const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => (
-    <Option
-        value={INVALID_LOG_LEVEL_VALUE}
-        onClick={onClick}
-    >
-        <ListItemDecorator>
-            <CloseIcon/>
-        </ListItemDecorator>
-        Clear filters
-    </Option>
-);
+const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => {
+    return (
+        <Option
+            value={INVALID_LOG_LEVEL_VALUE}
+            onClick={onClick}
+        >
+            <ListItemDecorator>
+                <CloseIcon/>
+            </ListItemDecorator>
+            Clear filters
+        </Option>
+    );
+};
 
 /**
  * Renders a dropdown box for selecting log levels.
  *
  * @return
  */
 const LogLevelSelect = () => {
+    const {uiState, setLogLevelFilter} = useContext(StateContext);
     const [selectedLogLevels, setSelectedLogLevels] = useState<LOG_LEVEL[]>([]);
-    const {setLogLevelFilter} = useContext(StateContext);
+    const disabled = isDisabled(uiState, UI_ELEMENT.LOG_LEVEL_FILTER);
 
     const handleRenderValue = (selected: SelectValue<SelectOption<LOG_LEVEL>, true>) => (
         <Box className={"log-level-select-render-value-box"}>
@@ -206,7 +214,8 @@ const LogLevelSelect = () => {
 
     return (
         <Select
-            className={"log-level-select"}
+            className={`log-level-select ${ignorePointerIfFastLoading(uiState)}`}
+            disabled={disabled}
             multiple={true}
             renderValue={handleRenderValue}
             size={"sm"}
@@ -223,7 +232,11 @@ const LogLevelSelect = () => {
                     </IconButton>
                 </Tooltip>}
             placeholder={
-                <Chip className={"log-level-select-render-value-box-label"}>
+                <Chip
+                    className={`log-level-select-render-value-box-label ${disabled ?
+                        "log-level-select-render-value-box-label-disabled" :
+                        ""}`}
+                >
                     Log Level
                 </Chip>
             }
diff --git a/new-log-viewer/src/components/StatusBar/index.tsx b/new-log-viewer/src/components/StatusBar/index.tsx
diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx
diff --git a/new-log-viewer/src/index.css b/new-log-viewer/src/index.css
diff --git a/new-log-viewer/src/typings/states.ts b/new-log-viewer/src/typings/states.ts
diff --git a/new-log-viewer/src/utils/states.ts b/new-log-viewer/src/utils/states.ts

Original file line number	Diff line number	Diff line change
`@@ -28,3 +28,7 @@`
`28`	`28`
`29`	`29`	`background-color: #f3f3f3;`
`30`	`30`	`}`
	`31`	`+`
	`32`	`+.hover-message-disabled {`
	`33`	`+ background-color: #fce4e4;`
	`34`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -13,3 +13,8 @@`
`13`	`13`	`.page-num-input-num-pages-text {`
`14`	`14`	`font-size: inherit !important;`
`15`	`15`	`}`
	`16`	`+`
	`17`	`+.page-num-input-num-pages-text-disabled {`
	`18`	`+ /* stylelint-disable-next-line custom-property-pattern */`
	`19`	`+ color: var(--joy-palette-neutral-plainDisabledColor) !important;`
	`20`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -39,3 +39,8 @@`
`39`	`39`	`display: flex !important;`
`40`	`40`	`justify-content: flex-end;`
`41`	`41`	`}`
	`42`	`+`
	`43`	`+.menu-bar-loading-progress {`
	`44`	`+ z-index: var(--ylv-loading-progress-z-index);`
	`45`	`+ margin-bottom: -2px;`
	`46`	`+}`