new-log-viewer: Add NotificationContextProvider for managing pop-up messages; add pop-ups for errors and remove status bar dummy message.

new-log-viewer/src/App.tsx

@@ -1,4 +1,5 @@
 import Layout from "./components/Layout";
+import NotificationContextProvider from "./contexts/NotificationContextProvider";
 import StateContextProvider from "./contexts/StateContextProvider";
 import UrlContextProvider from "./contexts/UrlContextProvider";
 
@@ -10,11 +11,13 @@ import UrlContextProvider from "./contexts/UrlContextProvider";
  */
 const App = () => {
     return (
-        <UrlContextProvider>
-            <StateContextProvider>
-                <Layout/>
-            </StateContextProvider>
-        </UrlContextProvider>
+        <NotificationContextProvider>
+            <UrlContextProvider>
+                <StateContextProvider>
+                    <Layout/>
+                </StateContextProvider>
+            </UrlContextProvider>
+        </NotificationContextProvider>
     );
 };
 

new-log-viewer/src/components/Layout.tsx

@@ -1,9 +1,10 @@
-import {CssVarsProvider} from "@mui/joy/styles";
+import {CssVarsProvider} from "@mui/joy";
 
 import {CONFIG_KEY} from "../typings/config";
 import {CONFIG_DEFAULT} from "../utils/config";
 import CentralContainer from "./CentralContainer";
 import MenuBar from "./MenuBar";
+import Popups from "./Popups";
 import StatusBar from "./StatusBar";
 import APP_THEME from "./theme";
 
@@ -23,6 +24,7 @@ const Layout = () => {
             <MenuBar/>
             <CentralContainer/>
             <StatusBar/>
+            <Popups/>
         </CssVarsProvider>
     );
 };

new-log-viewer/src/components/Popups/PopupMessageBox.tsx

@@ -0,0 +1,120 @@
+import {
+    useContext,
+    useEffect,
+    useState,
+} from "react";
+
+import {
+    Alert,
+    Box,
+    CircularProgress,
+    IconButton,
+    Typography,
+} from "@mui/joy";
+
+import CloseIcon from "@mui/icons-material/Close";
+
+import {
+    NotificationContext,
+    PopupMessage,
+} from "../../contexts/NotificationContextProvider";
+import {WithId} from "../../typings/common";
+import {LOG_LEVEL} from "../../typings/logs";
+import {DO_NOT_TIMEOUT_VALUE} from "../../typings/notifications";
+
+
+const AUTO_DISMISS_PERCENT_UPDATE_INTERVAL_MILLIS = 50;
+
+interface PopupMessageProps {
+    message: WithId<PopupMessage>,
+}
+
+/**
+ * Display a pop-up message in an alert box.
+ *
+ * @param props
+ * @param props.message
+ * @return
+ */
+const PopupMessageBox = ({message}: PopupMessageProps) => {
+    const {id, level, message: messageStr, title, timeoutMillis} = message;
+
+    const {handlePopupMessageClose} = useContext(NotificationContext);
+    const [intervalCount, setIntervalCount] = useState<number>(0);
+
+    const handleCloseButtonClick = () => {
+        handlePopupMessageClose(id);
+    };
+
+    useEffect(() => {
+        if (DO_NOT_TIMEOUT_VALUE === timeoutMillis) {
+            return () => {};
+        }
+        const intervalId = setInterval(() => {
+            setIntervalCount((c) => c + 1);
+        }, AUTO_DISMISS_PERCENT_UPDATE_INTERVAL_MILLIS);
+
+        return () => {
+            clearInterval(intervalId);
+        };
+    }, [
+        timeoutMillis,
+        handlePopupMessageClose,
+    ]);
+
+    const color = level >= LOG_LEVEL.ERROR ?
+        "danger" :
+        "primary";
+
+    let percentRemaining = 100;
+    if (DO_NOT_TIMEOUT_VALUE !== timeoutMillis) {
+        const totalIntervals = timeoutMillis / AUTO_DISMISS_PERCENT_UPDATE_INTERVAL_MILLIS;
+        percentRemaining = 100 - (100 * (intervalCount / totalIntervals));
+        if (0 >= percentRemaining) {
+            setTimeout(() => {
+                handlePopupMessageClose(id);
+            }, 0);
+        }
+    }
+
+    return (
+        <Alert
+            className={"pop-up-message-box-alert"}
+            color={color}
+            variant={"outlined"}
+        >
+            <div className={"pop-up-message-box-alert-layout"}>
+                <Box className={"pop-up-message-box-title-container"}>
+                    <Typography
+                        className={"pop-up-message-box-title-text"}
+                        color={color}
+                        level={"title-md"}
+                    >
+                        {title}
+                    </Typography>
+                    <CircularProgress
+                        color={color}
+                        determinate={true}
+                        size={"sm"}
+                        thickness={2}
+                        value={percentRemaining}
+                    >
+                        <IconButton
+                            className={"pop-up-message-box-close-button"}
+                            color={color}
+                            size={"sm"}
+                            onClick={handleCloseButtonClick}
+                        >
+                            <CloseIcon/>
+                        </IconButton>
+                    </CircularProgress>
+                </Box>
+                <Typography level={"body-sm"}>
+                    {messageStr}
+                </Typography>
+            </div>
+        </Alert>
+    );
+};
+
+export default PopupMessageBox;

new-log-viewer/src/components/Popups/index.css

@@ -0,0 +1,47 @@
+.pop-up-messages-container-snackbar {
+    /* Disable pointer events on the transparent container to allow components underneath to be
+      accessed. */
+    pointer-events: none;
+
+    right: 14px !important;
+    bottom: var(--ylv-status-bar-height) !important;
+
+    padding: 0 !important;
+
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+.pop-up-messages-container-stack {
+    scrollbar-width: none;
+    overflow-y: auto;
+    height: calc(100vh - var(--ylv-status-bar-height) - var(--ylv-menu-bar-height));
+}
+
+.pop-up-message-box-alert {
+    /* Restore pointer events on the pou-up messages. See above `pointer-events: none` in
+      `.pop-up-messages-container-snackbar`. */
+    pointer-events: initial;
+    padding-inline: 18px !important;
+}
+
+.pop-up-message-box-alert-layout {
+    width: 300px;
+}
+
+.pop-up-message-box-title-container {
+    display: flex;
+    align-items: center;
+}
+
+.pop-up-message-box-title-text {
+    flex-grow: 1;
+}
+
+.pop-up-message-box-close-button {
+    /* stylelint-disable-next-line custom-property-pattern */
+    --IconButton-size: 18px !important;
+
+    border-radius: 18px !important;
+}

new-log-viewer/src/components/Popups/index.tsx

@@ -0,0 +1,42 @@
+import {useContext} from "react";
+
+import {
+    Snackbar,
+    Stack,
+} from "@mui/joy";
+
+import {NotificationContext} from "../../contexts/NotificationContextProvider";
+import PopupMessageBox from "./PopupMessageBox";
+
+import "./index.css";
+
+
+/**
+ * Displays popups.
+ *
+ * @return
+ */
+const Popups = () => {
+    const {popupMessages} = useContext(NotificationContext);
+
+    return (
+        <Snackbar
+            className={"pop-up-messages-container-snackbar"}
+            open={0 < popupMessages.length}
+        >
+            <Stack
+                className={"pop-up-messages-container-stack"}
+                direction={"column-reverse"}
+                gap={1}
+            >
+                {popupMessages.map((message) => (
+                    <PopupMessageBox
+                        key={message.id}
+                        message={message}/>
+                ))}
+            </Stack>
+        </Snackbar>
+    );
+};
+
+export default Popups;

new-log-viewer/src/components/StatusBar/index.css

@@ -15,5 +15,4 @@
 
 .status-message {
     flex-grow: 1;
-    padding-left: 8px;
 }

new-log-viewer/src/components/StatusBar/index.tsx

@@ -32,11 +32,8 @@ const StatusBar = () => {
 
     return (
         <Sheet className={"status-bar"}>
-            <Typography
-                className={"status-message"}
-                level={"body-sm"}
-            >
-                Status message
+            <Typography className={"status-message"}>
+                {/* This is left blank intentionally until status messages are implemented. */}
             </Typography>
             <Button
                 color={"primary"}