dce-reactkit 3.9.4-beta-logreviewer.6 → 3.9.4-beta-logreviewer.8

package/dist/cjs/index.js

@@ -186,6 +186,7 @@ var ModalButtonType$1 = ModalButtonType;
 var ModalType;
 (function (ModalType) {
     ModalType["Okay"] = "okay";
+    ModalType["Cancel"] = "cancel";
     ModalType["OkayCancel"] = "okay-cancel";
     ModalType["YesNo"] = "yes-no";
     ModalType["YesNoCancel"] = "yes-no-cancel";
@@ -316,11 +317,23 @@ const isDarkModeOn = () => {
  * @param opts object containing all arguments
  * @param opts.sendRequest caccl send request functions
  * @param [opts.sessionExpiredMessage] a custom session expired message
+ * @param [opts.darkModeOn] if true, dark mode is enabled
+ * @param [opts.noServer] if true, there is no server for this app
  */
 const initClient = (opts) => {
-    // Store values
-    storedSendRequest = opts.sendRequest;
-    sessionExpiredMessage = opts.sessionExpiredMessage;
+    // Handle separately if there is no server
+    if (opts.noServer) {
+        // Store values
+        storedSendRequest = () => __awaiter(void 0, void 0, void 0, function* () {
+            throw new Error('Cannot send requests because there is no server');
+        });
+    }
+    else {
+        // Store values
+        storedSendRequest = opts.sendRequest;
+        sessionExpiredMessage = opts.sessionExpiredMessage;
+    }
+    // Handle universal parts
     darkModeOn = !!opts.darkModeOn;
     // Mark as initialized
     onInitialized(null);
@@ -340,6 +353,9 @@ const modalTypeToModalButtonTypes = {
     [ModalType$1.Okay]: [
         ModalButtonType$1.Okay,
     ],
+    [ModalType$1.Cancel]: [
+        ModalButtonType$1.Cancel,
+    ],
     [ModalType$1.OkayCancel]: [
         ModalButtonType$1.Okay,
         ModalButtonType$1.Cancel,
@@ -781,6 +797,7 @@ const _setStubResponse = (opts) => {
  */
 const visitServerEndpoint = (opts) => __awaiter(void 0, void 0, void 0, function* () {
     var _a, _b, _c;
+    // Set default method
     const method = ((_a = opts.method) !== null && _a !== void 0 ? _a : 'GET');
     // Handle stubs
     const stubResponse = (_b = stubResponses[method]) === null || _b === void 0 ? void 0 : _b[opts.path];
@@ -1080,6 +1097,92 @@ const confirm = (title, text, opts) => __awaiter(void 0, void 0, void 0, functio
     });
 });
 /*----------------------------------------*/
+/* --------------- Prompt -------------- */
+/*----------------------------------------*/
+// Stored copies of setters
+let setPromptInfo;
+// Function to call when prompt is closed
+let onPromptClosed;
+/**
+ * Show a prompt modal asking the user for input
+ * @author Yuen Ler Chow
+ * @param title the title text to display at the top of the prompt
+ * @param [opts={}] additional options for the prompt dialog
+ * @param [opts.textAboveInputField] the text to display in the prompt
+ * @param [opts.defaultText] the default text for the input field
+ * @param [opts.placeholder] the placeholder text for the input field
+ * @param [opts.confirmButtonText=Okay] the text of the confirm button
+ * @param [opts.confirmButtonVariant=Variant.Dark] the variant of the confirm button
+ * @param [opts.cancelButtonText=Cancel] the text of the cancel button
+ * @param [opts.cancelButtonVariant=Variant.Secondary] the variant of the cancel button
+ * @param [opts.minNumChars] the minimum number of characters required for
+ *   the input to be valid
+ * @param [opts.findValidationError] a function that takes the input text and
+ *   returns an error message if the input is invalid, returns undefined if the
+ *   input is valid
+ * @param [opts.ariaLabel] the aria label for the input field
+ * @returns Promise that resolves with the input string or null if canceled
+ */
+const prompt = (title, opts) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    // Wait for helper to exist
+    yield waitForHelper(() => {
+        return !!setPromptInfo;
+    });
+    // Fallback if prompt is not available
+    if (!setPromptInfo) {
+        const resultPassesValidation = false;
+        while (!resultPassesValidation) {
+            // eslint-disable-next-line no-alert
+            const result = window.prompt(`${title}\n\n${(_a = opts === null || opts === void 0 ? void 0 : opts.textAboveInputField) !== null && _a !== void 0 ? _a : ''}`, (_b = opts === null || opts === void 0 ? void 0 : opts.defaultText) !== null && _b !== void 0 ? _b : '');
+            // Exit loop if user cancels
+            if (result === null) {
+                return null;
+            }
+            // Validate min num chars
+            const minNumCharsValidationError = (((opts === null || opts === void 0 ? void 0 : opts.minNumChars) && result.length < opts.minNumChars)
+                ? `Please enter at least ${opts.minNumChars} characters.`
+                : undefined);
+            // Run custom validation
+            const customValidationError = ((opts === null || opts === void 0 ? void 0 : opts.findValidationError)
+                && opts.findValidationError(result));
+            // Show validation issue
+            if (minNumCharsValidationError || customValidationError) {
+                // Create error message
+                const errorMessage = ([
+                    minNumCharsValidationError,
+                    customValidationError,
+                ]
+                    // Filter out undefined messages
+                    .filter((msg) => {
+                    return !!msg;
+                })
+                    // Join messages with newlines
+                    .join('\n'));
+                // Show alert
+                alert('Invalid Input', errorMessage);
+            }
+            else {
+                return result;
+            }
+        }
+    }
+    // Return promise that resolves with result of prompt
+    return new Promise((resolve) => {
+        var _a;
+        // Setup handler
+        onPromptClosed = (result) => {
+            resolve(result);
+        };
+        // Show the prompt
+        setPromptInfo({
+            title,
+            currentInputFieldText: ((_a = opts === null || opts === void 0 ? void 0 : opts.defaultText) !== null && _a !== void 0 ? _a : ''),
+            opts: (opts !== null && opts !== void 0 ? opts : {}),
+        });
+    });
+});
+/*----------------------------------------*/
 /* ------------- Fatal Error ------------ */
 /*----------------------------------------*/
 // Stored copies of setters
@@ -1095,14 +1198,14 @@ const fatalErrorHandlers = [];
  * @param [errorTitle] title of the error box
  */
 const showFatalError = (error, errorTitle = 'An Error Occurred') => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b;
+    var _c, _d;
     // Determine message and code
     const message = (typeof error === 'string'
         ? error.trim()
-        : String((_a = error.message) !== null && _a !== void 0 ? _a : 'An unknown error occurred.'));
+        : String((_c = error.message) !== null && _c !== void 0 ? _c : 'An unknown error occurred.'));
     const code = (typeof error === 'string'
         ? ReactKitErrorCode$1.NoCode
-        : String((_b = error.code) !== null && _b !== void 0 ? _b : ReactKitErrorCode$1.NoCode));
+        : String((_d = error.code) !== null && _d !== void 0 ? _d : ReactKitErrorCode$1.NoCode));
     // Call all fatal error listeners
     try {
         fatalErrorHandlers.forEach((handler) => {
@@ -1229,6 +1332,9 @@ const AppWrapper = (props) => {
     // Confirm
     const [confirmInfo, setConfirmInfoInner,] = React.useState(undefined);
     setConfirmInfo = setConfirmInfoInner;
+    // Prompt
+    const [promptInfo, setPromptInfoInner] = React.useState(undefined);
+    setPromptInfo = setPromptInfoInner;
     // Session expired
     const [sessionHasExpired, setSessionHasExpiredInner,] = React.useState(false);
     setSessionHasExpired = setSessionHasExpiredInner;
@@ -1259,6 +1365,42 @@ const AppWrapper = (props) => {
                 }
             }, onTopOfOtherModals: true, dontAllowBackdropExit: true }, confirmInfo.text));
     }
+    /* ------------- Prompt ------------ */
+    if (promptInfo) {
+        // Run min char validation
+        const minNumCharsValidationError = ((promptInfo.opts.minNumChars
+            && promptInfo.currentInputFieldText.length < promptInfo.opts.minNumChars)
+            ? `Please enter at least ${promptInfo.opts.minNumChars} characters.`
+            : undefined);
+        // Run custom validation
+        const customValidationError = (promptInfo.opts.findValidationError
+            && promptInfo.opts.findValidationError(promptInfo.currentInputFieldText));
+        modal = (React__default["default"].createElement(Modal, { key: `prompt-${promptInfo.title}`, title: promptInfo.title, 
+            // Don't show ok button if there is a validation error
+            type: ((customValidationError || minNumCharsValidationError)
+                ? ModalType$1.Cancel
+                : ModalType$1.OkayCancel), okayLabel: promptInfo.opts.confirmButtonText, okayVariant: promptInfo.opts.confirmButtonVariant, cancelLabel: promptInfo.opts.cancelButtonText, cancelVariant: promptInfo.opts.cancelButtonVariant, onClose: (buttonType) => {
+                // Get result
+                const result = (buttonType === ModalButtonType$1.Okay
+                    ? promptInfo.currentInputFieldText
+                    : null);
+                // Close prompt
+                setPromptInfo(undefined);
+                // Call handler
+                if (onPromptClosed) {
+                    onPromptClosed(result);
+                }
+            }, onTopOfOtherModals: true, dontAllowBackdropExit: true },
+            React__default["default"].createElement("div", null,
+                promptInfo.opts.textAboveInputField && (React__default["default"].createElement("div", null, promptInfo.opts.textAboveInputField)),
+                React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": promptInfo.opts.ariaLabel, placeholder: promptInfo.opts.placeholder, value: promptInfo.currentInputFieldText, onChange: (e) => {
+                        return setPromptInfo(Object.assign(Object.assign({}, promptInfo), { currentInputFieldText: e.target.value }));
+                    }, 
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
+                    autoFocus: true }),
+                minNumCharsValidationError && (React__default["default"].createElement("div", { className: "text-danger fw-bold mt-2" }, minNumCharsValidationError)),
+                customValidationError && (React__default["default"].createElement("div", { className: "text-danger fw-bold mt-2" }, customValidationError)))));
+    }
     /* ------ Custom Modal Portals ------ */
     // Custom modal portals
     const customModalPortals = [];
@@ -1328,7 +1470,7 @@ const AppWrapper = (props) => {
         ? `
         .tooltip-inner {
           background-color: white;
-          color: black;
+          color: black !important;
           border: 0.1rem solid black;
           pointer-events: none;
         }
@@ -1341,7 +1483,7 @@ const AppWrapper = (props) => {
         : `
         .tooltip-inner {
           background-color: black;
-          color: white;
+          color: white !important;
           border: 0.1rem solid white;
           pointer-events: none;
         }
@@ -1560,24 +1702,31 @@ const RadioButton = (props) => {
     /* -------------------------------- Setup ------------------------------- */
     /*------------------------------------------------------------------------*/
     /* -------------- Props ------------- */
-    const { text, onSelected, ariaLabel, title, selected, id, noMarginOnRight, selectedVariant = (isDarkModeOn()
+    const { text, onSelected, ariaLabel, title, selected, id, className, noMarginOnRight, selectedVariant = (isDarkModeOn()
         ? Variant$1.Light
         : Variant$1.Secondary), unselectedVariant = (isDarkModeOn()
         ? Variant$1.Secondary
-        : Variant$1.Light), small, } = props;
+        : Variant$1.Light), small, useComplexFormatting, } = props;
     /*------------------------------------------------------------------------*/
     /* ------------------------------- Render ------------------------------- */
     /*------------------------------------------------------------------------*/
     /*----------------------------------------*/
     /* --------------- Main UI -------------- */
     /*----------------------------------------*/
-    return (React__default["default"].createElement("button", { type: "button", id: id, title: title, className: `btn btn-${selected ? selectedVariant : unselectedVariant}${selected ? ' selected' : ''}${small ? ' btn-sm' : ''} m-0${noMarginOnRight ? '' : ' me-1'}`, "aria-label": `${ariaLabel}${selected ? ': currently selected' : ''}`, onClick: () => {
+    return (React__default["default"].createElement("button", { type: "button", id: id, title: title, className: `btn btn-${selected ? selectedVariant : unselectedVariant}${selected ? ' selected' : ''}${small ? ' btn-sm' : ''} m-0${noMarginOnRight ? '' : ' me-1'} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": `${ariaLabel}${selected ? ': currently selected' : ''}`, onClick: () => {
             if (!selected) {
                 onSelected();
             }
         } },
-        React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: selected ? freeSolidSvgIcons.faDotCircle : freeRegularSvgIcons.faCircle, className: "me-1" }),
-        text));
+        React__default["default"].createElement("div", { className: "d-flex flex-row align-items-center" },
+            React__default["default"].createElement("div", { className: "me-1" },
+                React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: selected ? freeSolidSvgIcons.faDotCircle : freeRegularSvgIcons.faCircle })),
+            useComplexFormatting
+                ? (React__default["default"].createElement("pre", { className: "ps-1 text-start text-break", style: {
+                        whiteSpace: 'pre-wrap',
+                        tabSize: 2,
+                    } }, text))
+                : (React__default["default"].createElement("div", { className: "flex-grow-1 text-start text-break" }, text)))));
 };
 
 /**
@@ -1596,7 +1745,7 @@ const CheckboxButton = (props) => {
         ? Variant$1.Light
         : Variant$1.Secondary), uncheckedVariant = (isDarkModeOn()
         ? Variant$1.Secondary
-        : Variant$1.Light), small, dashed, } = props;
+        : Variant$1.Light), small, dashed, useComplexFormatting, } = props;
     /*------------------------------------------------------------------------*/
     /* ------------------------------- Render ------------------------------- */
     /*------------------------------------------------------------------------*/
@@ -1617,10 +1766,15 @@ const CheckboxButton = (props) => {
     return (React__default["default"].createElement("button", { type: "button", id: id, title: title, className: `CheckboxButton-status-${checked ? 'checked' : 'unchecked'} ${dashed ? 'CheckboxButton-dashed ' : ''}btn btn-${checked ? checkedVariant : uncheckedVariant}${checked ? ' selected' : ''}${small ? ' btn-sm' : ''} m-0${noMarginOnRight ? '' : ' me-1'} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": `${ariaLabel}${checked ? ': currently checked' : ''}`, onClick: () => {
             onChanged(!checked);
         } },
-        React__default["default"].createElement("div", { className: "d-flex" },
-            React__default["default"].createElement("div", { className: "align-items-center" },
-                React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: icon, className: "me-1" })),
-            React__default["default"].createElement("div", { className: "flex-grow-1" }, text))));
+        React__default["default"].createElement("div", { className: "d-flex align-items-center" },
+            React__default["default"].createElement("div", { className: "me-1" },
+                React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: icon })),
+            useComplexFormatting
+                ? (React__default["default"].createElement("pre", { className: "ps-1 text-start text-break", style: {
+                        whiteSpace: 'pre-wrap',
+                        tabSize: 2,
+                    } }, text))
+                : (React__default["default"].createElement("div", { className: "flex-grow-1 text-start text-break" }, text)))));
 };
 
 /**
@@ -1801,7 +1955,13 @@ const SimpleDateChooser = (props) => {
         }
         const monthName = getMonthName(month).full;
         // Year is start year +1 for each 12 months
-        const year = (startYear + (Math.floor(unmoddedMonth / 12)));
+        let yearsToAdd = 0;
+        let monthsOfYearsToAdd = unmoddedMonth;
+        while (monthsOfYearsToAdd > 12) {
+            monthsOfYearsToAdd -= 12;
+            yearsToAdd += 1;
+        }
+        const year = startYear + yearsToAdd;
         // Figure out which days are allowed
         const days = [];
         const numDaysInMonth = (new Date(year, month, 0)).getDate();
@@ -1852,7 +2012,7 @@ const SimpleDateChooser = (props) => {
             });
         }
     });
-    return (React__default["default"].createElement("div", { className: "SimpleDateChooser d-inline-block", "aria-label": `date chooser with selected date: ${month} ${day}, ${year}` },
+    return (React__default["default"].createElement("div", { className: "SimpleDateChooser d-inline-block", "aria-label": `date chooser with selected date: ${month}/${day}/${year}` },
         React__default["default"].createElement("select", { "aria-label": `month for ${ariaLabel}`, className: "custom-select d-inline-block mr-1", style: { width: 'auto' }, id: `SimpleDateChooser-${name}-month`, value: `${month}-${year}`, onChange: (e) => {
                 const choice = choices[e.target.selectedIndex];
                 // Change day, month, and year
@@ -3182,6 +3342,55 @@ const IntelliTable = (props) => {
             } }, table)));
 };
 
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Component ----------------------------- */
+/*------------------------------------------------------------------------*/
+const Pagination = ({ currentPage, numPages, loading = false, onPageChanged, }) => {
+    // computes an array of page numbers to display.
+    const getPageNumbers = () => {
+        const pages = [];
+        const delta = 2; // how many pages to show on either side of current
+        let start = Math.max(1, currentPage - delta);
+        let end = Math.min(numPages, currentPage + delta);
+        // If we are too close to the beginning or end, shift the window.
+        if (currentPage - delta < 1) {
+            end = Math.min(numPages, end + (1 - (currentPage - delta)));
+        }
+        if (currentPage + delta > numPages) {
+            start = Math.max(1, start - ((currentPage + delta) - numPages));
+        }
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+        return pages;
+    };
+    const pages = getPageNumbers();
+    return (React__default["default"].createElement("nav", { "aria-label": "Page navigation", className: "mt-3" },
+        React__default["default"].createElement("ul", { className: "pagination justify-content-center" },
+            React__default["default"].createElement("li", { className: `page-item ${(currentPage <= 1 || loading) ? 'disabled' : ''}` },
+                React__default["default"].createElement("button", { type: "button", className: "page-link", onClick: () => { return onPageChanged(currentPage - 1); }, disabled: currentPage <= 1 || loading },
+                    React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faArrowLeft }),
+                    ' ',
+                    "Prev")),
+            currentPage > 3 && (React__default["default"].createElement("li", { className: "page-item" },
+                React__default["default"].createElement("button", { type: "button", className: "page-link", onClick: () => { return onPageChanged(1); }, disabled: loading }, "1"))),
+            currentPage > 4 && (React__default["default"].createElement("li", { className: "page-item disabled" },
+                React__default["default"].createElement("span", { className: "page-link" }, "..."))),
+            pages.map((pageNum) => {
+                return (React__default["default"].createElement("li", { key: pageNum, className: `page-item ${pageNum === currentPage ? 'active' : ''}` },
+                    React__default["default"].createElement("button", { type: "button", className: "page-link", onClick: () => { return onPageChanged(pageNum); }, disabled: loading }, pageNum)));
+            }),
+            currentPage < numPages - 3 && (React__default["default"].createElement("li", { className: "page-item disabled" },
+                React__default["default"].createElement("span", { className: "page-link" }, "..."))),
+            currentPage < numPages - 2 && (React__default["default"].createElement("li", { className: "page-item" },
+                React__default["default"].createElement("button", { type: "button", className: "page-link", onClick: () => { return onPageChanged(numPages); }, disabled: loading }, numPages))),
+            React__default["default"].createElement("li", { className: `page-item ${(currentPage >= numPages || loading) ? 'disabled' : ''}` },
+                React__default["default"].createElement("button", { type: "button", className: "page-link", onClick: () => { return onPageChanged(currentPage + 1); }, disabled: currentPage >= numPages || loading },
+                    "Next",
+                    ' ',
+                    React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faArrowRight }))))));
+};
+
 /**
  * Log reviewer panel that allows users (must be approved admins) to
  *   review logs written by dce-reactkit
@@ -3561,6 +3770,8 @@ var ActionType$6;
     ActionType["SetNumPages"] = "set-num-pages";
     // Set page number
     ActionType["SetPageNumber"] = "set-page-number";
+    // Reset user made filter change indicator
+    ActionType["ResetUserMadeFilterChange"] = "reset-user-made-filter-change";
 })(ActionType$6 || (ActionType$6 = {}));
 /**
  * Reducer that executes actions
@@ -3585,22 +3796,22 @@ const reducer$7 = (state, action) => {
             return Object.assign(Object.assign({}, state), { expandedFilterDrawer: undefined });
         }
         case ActionType$6.ResetFilters: {
-            return Object.assign(Object.assign({}, state), { dateFilterState: action.initDateFilterState, contextFilterState: action.initContextFilterState, tagFilterState: action.initTagFilterState, actionErrorFilterState: action.initActionErrorFilterState, advancedFilterState: action.initAdvancedFilterState, pageNumber: 1 });
+            return Object.assign(Object.assign({}, state), { pendingDateFilterState: action.initDateFilterState, pendingContextFilterState: action.initContextFilterState, pendingTagFilterState: action.initTagFilterState, pendingActionErrorFilterState: action.initActionErrorFilterState, pendingAdvancedFilterState: action.initAdvancedFilterState, pageNumber: 1 });
         }
         case ActionType$6.UpdateDateFilterState: {
-            return Object.assign(Object.assign({}, state), { dateFilterState: action.dateFilterState });
+            return Object.assign(Object.assign({}, state), { pendingDateFilterState: action.dateFilterState, userMadeFilterChange: true });
         }
         case ActionType$6.UpdateContextFilterState: {
-            return Object.assign(Object.assign({}, state), { contextFilterState: action.contextFilterState });
+            return Object.assign(Object.assign({}, state), { pendingContextFilterState: action.contextFilterState, userMadeFilterChange: true });
         }
         case ActionType$6.UpdateTagFilterState: {
-            return Object.assign(Object.assign({}, state), { tagFilterState: action.tagFilterState });
+            return Object.assign(Object.assign({}, state), { pendingTagFilterState: action.tagFilterState, userMadeFilterChange: true });
         }
         case ActionType$6.UpdateActionErrorFilterState: {
-            return Object.assign(Object.assign({}, state), { actionErrorFilterState: action.actionErrorFilterState });
+            return Object.assign(Object.assign({}, state), { pendingActionErrorFilterState: action.actionErrorFilterState, userMadeFilterChange: true });
         }
         case ActionType$6.UpdateAdvancedFilterState: {
-            return Object.assign(Object.assign({}, state), { advancedFilterState: action.advancedFilterState });
+            return Object.assign(Object.assign({}, state), { pendingAdvancedFilterState: action.advancedFilterState, userMadeFilterChange: true });
         }
         case ActionType$6.SetHasAnotherPage: {
             return Object.assign(Object.assign({}, state), { hasAnotherPage: action.hasAnotherPage });
@@ -3611,6 +3822,9 @@ const reducer$7 = (state, action) => {
         case ActionType$6.SetPageNumber: {
             return Object.assign(Object.assign({}, state), { pageNumber: action.pageNumber });
         }
+        case ActionType$6.ResetUserMadeFilterChange: {
+            return Object.assign(Object.assign({}, state), { userMadeFilterChange: false });
+        }
         default: {
             return state;
         }
@@ -3731,19 +3945,29 @@ const LogReviewer = (props) => {
         showSpinner: true,
         logs: [],
         expandedFilterDrawer: undefined,
-        dateFilterState: initDateFilterState,
-        contextFilterState: initContextFilterState,
-        tagFilterState: initTagFilterState,
-        actionErrorFilterState: initActionErrorFilterState,
-        advancedFilterState: initAdvancedFilterState,
+        pendingDateFilterState: initDateFilterState,
+        pendingContextFilterState: initContextFilterState,
+        pendingTagFilterState: initTagFilterState,
+        pendingActionErrorFilterState: initActionErrorFilterState,
+        pendingAdvancedFilterState: initAdvancedFilterState,
         pageNumber: 1,
         hasAnotherPage: false,
         numPages: 1,
+        userMadeFilterChange: false,
     };
     // Initialize state
     const [state, dispatch] = React.useReducer(reducer$7, initialState);
     // Destructure common state
-    const { loading, showSpinner, logs, expandedFilterDrawer, dateFilterState, contextFilterState, tagFilterState, actionErrorFilterState, advancedFilterState, pageNumber, hasAnotherPage, numPages, } = state;
+    const { loading, showSpinner, logs, expandedFilterDrawer, pendingDateFilterState, pendingContextFilterState, pendingTagFilterState, pendingActionErrorFilterState, pendingAdvancedFilterState, pageNumber, numPages, userMadeFilterChange, } = state;
+    /* -------------- Refs -------------- */
+    // Initialize refs
+    const activeFiltersRef = React.useRef({
+        dateFilterState: JSON.parse(JSON.stringify(pendingDateFilterState)),
+        contextFilterState: JSON.parse(JSON.stringify(pendingContextFilterState)),
+        tagFilterState: JSON.parse(JSON.stringify(pendingTagFilterState)),
+        actionErrorFilterState: JSON.parse(JSON.stringify(pendingActionErrorFilterState)),
+        advancedFilterState: JSON.parse(JSON.stringify(pendingAdvancedFilterState)),
+    });
     /*------------------------------------------------------------------------*/
     /* ------------------------- Component Functions ------------------------ */
     /*------------------------------------------------------------------------*/
@@ -3802,11 +4026,11 @@ const LogReviewer = (props) => {
     React.useEffect(() => {
         fetchLogs({
             filters: {
-                dateFilterState,
-                contextFilterState,
-                tagFilterState,
-                actionErrorFilterState,
-                advancedFilterState,
+                dateFilterState: pendingDateFilterState,
+                contextFilterState: pendingContextFilterState,
+                tagFilterState: pendingTagFilterState,
+                actionErrorFilterState: pendingActionErrorFilterState,
+                advancedFilterState: pendingAdvancedFilterState,
             },
             pageNum: 1,
             filtersChanged: true,
@@ -3829,51 +4053,25 @@ const LogReviewer = (props) => {
     /*----------------------------------------*/
     /* ------------ Pagination -------------- */
     /*----------------------------------------*/
-    const paginationControls = logs.length > 0 && (React__default["default"].createElement("div", { className: "text-center mt-3" },
-        React__default["default"].createElement("button", { type: "button", className: "btn btn-secondary me-2", disabled: pageNumber <= 1 || loading, onClick: () => {
-                fetchLogs({
-                    filters: {
-                        dateFilterState,
-                        contextFilterState,
-                        tagFilterState,
-                        actionErrorFilterState,
-                        advancedFilterState,
-                    },
-                    pageNum: pageNumber - 1,
-                    filtersChanged: false,
-                });
-            } },
-            React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faArrowLeft, className: "me-2" }),
-            "Previous Page"),
-        React__default["default"].createElement("span", { className: "mx-3" },
-            "Page",
-            ' ',
-            pageNumber,
-            ' ',
-            "of",
-            ' ',
-            numPages),
-        React__default["default"].createElement("button", { type: "button", className: "btn btn-secondary ms-2", disabled: !hasAnotherPage || loading, onClick: () => {
-                fetchLogs({
-                    filters: {
-                        dateFilterState,
-                        contextFilterState,
-                        tagFilterState,
-                        actionErrorFilterState,
-                        advancedFilterState,
-                    },
-                    pageNum: pageNumber + 1,
-                    filtersChanged: false,
-                });
-            } },
-            "Next Page",
-            React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faArrowRight, className: "ms-2" }))));
+    const paginationControls = logs.length > 0 && (React__default["default"].createElement(Pagination, { currentPage: pageNumber, numPages: numPages, loading: loading, onPageChanged: (targetPage) => {
+            const { current: activeFilters } = activeFiltersRef;
+            fetchLogs({
+                filters: {
+                    dateFilterState: activeFilters.dateFilterState,
+                    contextFilterState: activeFilters.contextFilterState,
+                    tagFilterState: activeFilters.tagFilterState,
+                    actionErrorFilterState: activeFilters.actionErrorFilterState,
+                    advancedFilterState: activeFilters.advancedFilterState,
+                },
+                pageNum: targetPage,
+                filtersChanged: false,
+            });
+        } }));
     /*----------------------------------------*/
     /* --------------- Filters -------------- */
     /*----------------------------------------*/
     // Filter toggle
     const filterToggles = (React__default["default"].createElement("div", { className: "LogReviewer-filter-toggles" },
-        React__default["default"].createElement("h3", { className: "m-0" }, "Filters:"),
         React__default["default"].createElement("div", { className: "LogReviewer-filter-toggle-buttons alert alert-secondary p-2 m-0" },
             React__default["default"].createElement("button", { type: "button", id: "LogReviewer-toggle-date-filter-drawer", className: `btn btn-${FilterDrawer.Date === expandedFilterDrawer ? 'warning' : 'light'} me-2`, "aria-label": "toggle date filter drawer", onClick: () => {
                     dispatch({
@@ -3942,17 +4140,29 @@ const LogReviewer = (props) => {
                 React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faTimes }),
                 ' ',
                 "Reset"),
-            React__default["default"].createElement("button", { type: "button", id: "LogReviewer-submit-filters-button", className: "btn btn-primary ms-2", "aria-label": "submit filters", onClick: () => {
+            userMadeFilterChange && (React__default["default"].createElement("button", { type: "button", id: "LogReviewer-submit-filters-button", className: "btn btn-primary ms-2", "aria-label": "submit filters", onClick: () => {
                     dispatch({
                         type: ActionType$6.HideFilterDrawer,
                     });
+                    // Reset user made filter change indicator
+                    dispatch({
+                        type: ActionType$6.ResetUserMadeFilterChange,
+                    });
+                    // Save active filters
+                    activeFiltersRef.current = {
+                        dateFilterState: JSON.parse(JSON.stringify(pendingDateFilterState)),
+                        contextFilterState: JSON.parse(JSON.stringify(pendingContextFilterState)),
+                        tagFilterState: JSON.parse(JSON.stringify(pendingTagFilterState)),
+                        actionErrorFilterState: JSON.parse(JSON.stringify(pendingActionErrorFilterState)),
+                        advancedFilterState: JSON.parse(JSON.stringify(pendingAdvancedFilterState)),
+                    };
                     fetchLogs({
                         filters: {
-                            dateFilterState,
-                            contextFilterState,
-                            tagFilterState,
-                            actionErrorFilterState,
-                            advancedFilterState,
+                            dateFilterState: pendingDateFilterState,
+                            contextFilterState: pendingContextFilterState,
+                            tagFilterState: pendingTagFilterState,
+                            actionErrorFilterState: pendingActionErrorFilterState,
+                            advancedFilterState: pendingAdvancedFilterState,
                         },
                         pageNum: 1,
                         filtersChanged: true,
@@ -3960,35 +4170,35 @@ const LogReviewer = (props) => {
                 } },
                 React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faSearch }),
                 ' ',
-                "Filter"))));
+                "Apply Filters")))));
     // Filter drawer
     let filterDrawer;
     if (expandedFilterDrawer) {
         if (expandedFilterDrawer === FilterDrawer.Date) {
             filterDrawer = (React__default["default"].createElement(TabBox, { title: "Date" },
-                React__default["default"].createElement(SimpleDateChooser, { ariaLabel: "filter start date", name: "filter-start-date", year: dateFilterState.startDate.year, month: dateFilterState.startDate.month, day: dateFilterState.startDate.day, chooseFromPast: true, numMonthsToShow: 36, onChange: (month, day, year) => {
-                        dateFilterState.startDate = { month, day, year };
+                React__default["default"].createElement(SimpleDateChooser, { ariaLabel: "filter start date", name: "filter-start-date", year: pendingDateFilterState.startDate.year, month: pendingDateFilterState.startDate.month, day: pendingDateFilterState.startDate.day, chooseFromPast: true, numMonthsToShow: 36, onChange: (month, day, year) => {
+                        pendingDateFilterState.startDate = { month, day, year };
                         dispatch({
                             type: ActionType$6.UpdateDateFilterState,
-                            dateFilterState,
+                            dateFilterState: pendingDateFilterState,
                         });
                     } }),
                 ' ',
                 "to",
                 ' ',
-                React__default["default"].createElement(SimpleDateChooser, { ariaLabel: "filter end date", name: "filter-end-date", year: dateFilterState.endDate.year, month: dateFilterState.endDate.month, day: dateFilterState.endDate.day, chooseFromPast: true, numMonthsToShow: 12, onChange: (month, day, year) => {
-                        if (year < dateFilterState.startDate.year
-                            || (year === dateFilterState.startDate.year
-                                && month < dateFilterState.startDate.month)
-                            || (year === dateFilterState.startDate.year
-                                && month === dateFilterState.startDate.month
-                                && day < dateFilterState.startDate.day)) {
+                React__default["default"].createElement(SimpleDateChooser, { ariaLabel: "filter end date", name: "filter-end-date", year: pendingDateFilterState.endDate.year, month: pendingDateFilterState.endDate.month, day: pendingDateFilterState.endDate.day, chooseFromPast: true, numMonthsToShow: 12, onChange: (month, day, year) => {
+                        if (year < pendingDateFilterState.startDate.year
+                            || (year === pendingDateFilterState.startDate.year
+                                && month < pendingDateFilterState.startDate.month)
+                            || (year === pendingDateFilterState.startDate.year
+                                && month === pendingDateFilterState.startDate.month
+                                && day < pendingDateFilterState.startDate.day)) {
                             return alert('Invalid Start Date', 'The start date cannot be before the end date.');
                         }
-                        dateFilterState.endDate = { month, day, year };
+                        pendingDateFilterState.endDate = { month, day, year };
                         dispatch({
                             type: ActionType$6.UpdateDateFilterState,
-                            dateFilterState,
+                            dateFilterState: pendingDateFilterState,
                         });
                     } })));
         }
@@ -4010,7 +4220,7 @@ const LogReviewer = (props) => {
                         id: context,
                         name: genHumanReadableName(context),
                         isGroup: false,
-                        checked: !!contextFilterState[context],
+                        checked: !!pendingContextFilterState[context],
                     };
                     // Add built-in items to its own folder
                     const isBuiltIn = context in LogBuiltInMetadata.Context;
@@ -4036,7 +4246,7 @@ const LogReviewer = (props) => {
                         id: subcontext,
                         name: genHumanReadableName(subcontext),
                         isGroup: false,
-                        checked: contextFilterState[context][subcontext],
+                        checked: pendingContextFilterState[context][subcontext],
                     };
                 }));
                 const item = {
@@ -4059,7 +4269,7 @@ const LogReviewer = (props) => {
                                 // Built-in
                                 // Treat as if these were top-level contexts
                                 pickableItem.children.forEach((subcontextItem) => {
-                                    contextFilterState[subcontextItem.id] = ('checked' in subcontextItem
+                                    pendingContextFilterState[subcontextItem.id] = ('checked' in subcontextItem
                                         && subcontextItem.checked);
                                 });
                             }
@@ -4067,19 +4277,19 @@ const LogReviewer = (props) => {
                                 // Not built-in
                                 pickableItem.children.forEach((subcontextItem) => {
                                     if (!subcontextItem.isGroup) {
-                                        contextFilterState[pickableItem.id][subcontextItem.id] = (subcontextItem.checked);
+                                        pendingContextFilterState[pickableItem.id][subcontextItem.id] = (subcontextItem.checked);
                                     }
                                 });
                             }
                         }
                         else {
                             // No subcontexts
-                            contextFilterState[pickableItem.id] = (pickableItem.checked);
+                            pendingContextFilterState[pickableItem.id] = (pickableItem.checked);
                         }
                     });
                     dispatch({
                         type: ActionType$6.UpdateContextFilterState,
-                        contextFilterState,
+                        contextFilterState: pendingContextFilterState,
                     });
                 } }));
         }
@@ -4090,13 +4300,13 @@ const LogReviewer = (props) => {
                 React__default["default"].createElement("div", { className: "d-flex gap-1 flex-wrap" }, Object.keys((_d = LogMetadata.Tag) !== null && _d !== void 0 ? _d : {})
                     .map((tag) => {
                     const description = genHumanReadableName(tag);
-                    return (React__default["default"].createElement(CheckboxButton, { key: tag, id: `LogReviewer-tag-${tag}-checkbox`, text: description, ariaLabel: `require that logs be tagged with "${description}" or any other selected tag`, checked: tagFilterState[tag], onChanged: (checked) => {
-                            tagFilterState[tag] = checked;
+                    return (React__default["default"].createElement(CheckboxButton, { key: tag, id: `LogReviewer-tag-${tag}-checkbox`, text: description, ariaLabel: `require that logs be tagged with "${description}" or any other selected tag`, checked: pendingTagFilterState[tag], onChanged: (checked) => {
+                            pendingTagFilterState[tag] = checked;
                             dispatch({
                                 type: ActionType$6.UpdateTagFilterState,
-                                tagFilterState,
+                                tagFilterState: pendingTagFilterState,
                             });
-                        } }));
+                        }, checkedVariant: Variant$1.Light, uncheckedVariant: Variant$1.Light }));
                 }))));
         }
         else if (expandedFilterDrawer === FilterDrawer.Action) {
@@ -4104,70 +4314,70 @@ const LogReviewer = (props) => {
             filterDrawer = (React__default["default"].createElement(React__default["default"].Fragment, null,
                 React__default["default"].createElement(TabBox, { title: "Log Type" },
                     React__default["default"].createElement(RadioButton, { id: "LogReviewer-type-all", text: "All Logs", onSelected: () => {
-                            actionErrorFilterState.type = undefined;
+                            pendingActionErrorFilterState.type = undefined;
                             dispatch({
                                 type: ActionType$6.UpdateActionErrorFilterState,
-                                actionErrorFilterState,
+                                actionErrorFilterState: pendingActionErrorFilterState,
                             });
-                        }, ariaLabel: "show logs of all types", selected: actionErrorFilterState.type === undefined }),
+                        }, ariaLabel: "show logs of all types", selected: pendingActionErrorFilterState.type === undefined, unselectedVariant: Variant$1.Light }),
                     React__default["default"].createElement(RadioButton, { id: "LogReviewer-type-action-only", text: "Action Logs Only", onSelected: () => {
-                            actionErrorFilterState.type = LogType$1.Action;
+                            pendingActionErrorFilterState.type = LogType$1.Action;
                             dispatch({
                                 type: ActionType$6.UpdateActionErrorFilterState,
-                                actionErrorFilterState,
+                                actionErrorFilterState: pendingActionErrorFilterState,
                             });
-                        }, ariaLabel: "only show action logs", selected: actionErrorFilterState.type === LogType$1.Action }),
+                        }, ariaLabel: "only show action logs", selected: pendingActionErrorFilterState.type === LogType$1.Action, unselectedVariant: Variant$1.Light }),
                     React__default["default"].createElement(RadioButton, { id: "LogReviewer-type-error-only", text: "Action Error Only", onSelected: () => {
-                            actionErrorFilterState.type = LogType$1.Error;
+                            pendingActionErrorFilterState.type = LogType$1.Error;
                             dispatch({
                                 type: ActionType$6.UpdateActionErrorFilterState,
-                                actionErrorFilterState,
+                                actionErrorFilterState: pendingActionErrorFilterState,
                             });
-                        }, ariaLabel: "only show error logs", selected: actionErrorFilterState.type === LogType$1.Error, noMarginOnRight: true })),
-                (actionErrorFilterState.type === undefined
-                    || actionErrorFilterState.type === LogType$1.Action) && (React__default["default"].createElement(TabBox, { title: "Action Log Details" },
+                        }, ariaLabel: "only show error logs", selected: pendingActionErrorFilterState.type === LogType$1.Error, noMarginOnRight: true, selectedVariant: Variant$1.Light, unselectedVariant: Variant$1.Light })),
+                (pendingActionErrorFilterState.type === undefined
+                    || pendingActionErrorFilterState.type === LogType$1.Action) && (React__default["default"].createElement(TabBox, { title: "Action Log Details" },
                     React__default["default"].createElement(ButtonInputGroup, { label: "Action", className: "mb-2", wrapButtonsAndAddGaps: true }, Object.keys(LogAction$1)
                         .map((action) => {
                         const description = genHumanReadableName(action);
-                        return (React__default["default"].createElement(CheckboxButton, { key: action, id: `LogReviewer-action-${action}-checkbox`, text: description, ariaLabel: `include logs with action type "${description}" in results`, noMarginOnRight: true, checked: actionErrorFilterState.action[action], onChanged: (checked) => {
-                                actionErrorFilterState.action[action] = checked;
+                        return (React__default["default"].createElement(CheckboxButton, { key: action, id: `LogReviewer-action-${action}-checkbox`, text: description, ariaLabel: `include logs with action type "${description}" in results`, noMarginOnRight: true, checked: pendingActionErrorFilterState.action[action], onChanged: (checked) => {
+                                pendingActionErrorFilterState.action[action] = checked;
                                 dispatch({
                                     type: ActionType$6.UpdateActionErrorFilterState,
-                                    actionErrorFilterState,
+                                    actionErrorFilterState: pendingActionErrorFilterState,
                                 });
-                            } }));
+                            }, checkedVariant: Variant$1.Light, uncheckedVariant: Variant$1.Light }));
                     })),
                     React__default["default"].createElement(ButtonInputGroup, { label: "Target", wrapButtonsAndAddGaps: true }, Object.keys(targetMap)
                         .map((target) => {
                         const description = genHumanReadableName(target);
-                        return (React__default["default"].createElement(CheckboxButton, { key: target, id: `LogReviewer-target-${target}-checkbox`, text: description, ariaLabel: `include logs with target "${description}" in results`, checked: actionErrorFilterState.target[target], noMarginOnRight: true, onChanged: (checked) => {
-                                actionErrorFilterState.target[target] = checked;
+                        return (React__default["default"].createElement(CheckboxButton, { key: target, id: `LogReviewer-target-${target}-checkbox`, text: description, ariaLabel: `include logs with target "${description}" in results`, checked: pendingActionErrorFilterState.target[target], noMarginOnRight: true, onChanged: (checked) => {
+                                pendingActionErrorFilterState.target[target] = checked;
                                 dispatch({
                                     type: ActionType$6.UpdateActionErrorFilterState,
-                                    actionErrorFilterState,
+                                    actionErrorFilterState: pendingActionErrorFilterState,
                                 });
-                            } }));
+                            }, checkedVariant: Variant$1.Light, uncheckedVariant: Variant$1.Light }));
                     })))),
-                (actionErrorFilterState.type === undefined
-                    || actionErrorFilterState.type === LogType$1.Error) && (React__default["default"].createElement(TabBox, { title: "Error Log Details" },
+                (pendingActionErrorFilterState.type === undefined
+                    || pendingActionErrorFilterState.type === LogType$1.Error) && (React__default["default"].createElement(TabBox, { title: "Error Log Details" },
                     React__default["default"].createElement("div", { className: "input-group mb-2" },
                         React__default["default"].createElement("span", { className: "input-group-text" }, "Error Message"),
-                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for error message", value: actionErrorFilterState.errorMessage, placeholder: "e.g. undefined is not a function", onChange: (e) => {
-                                actionErrorFilterState.errorMessage = e.target.value;
+                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for error message", value: pendingActionErrorFilterState.errorMessage, placeholder: "e.g. undefined is not a function", onChange: (e) => {
+                                pendingActionErrorFilterState.errorMessage = e.target.value;
                                 dispatch({
                                     type: ActionType$6.UpdateActionErrorFilterState,
-                                    actionErrorFilterState,
+                                    actionErrorFilterState: pendingActionErrorFilterState,
                                 });
                             } })),
                     React__default["default"].createElement("div", { className: "input-group mb-2" },
                         React__default["default"].createElement("span", { className: "input-group-text" }, "Error Code"),
-                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for error code", value: actionErrorFilterState.errorCode, placeholder: "e.g. GC22", onChange: (e) => {
-                                actionErrorFilterState.errorCode = ((e.target.value)
+                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for error code", value: pendingActionErrorFilterState.errorCode, placeholder: "e.g. GC22", onChange: (e) => {
+                                pendingActionErrorFilterState.errorCode = ((e.target.value)
                                     .trim()
                                     .toUpperCase());
                                 dispatch({
                                     type: ActionType$6.UpdateActionErrorFilterState,
-                                    actionErrorFilterState,
+                                    actionErrorFilterState: pendingActionErrorFilterState,
                                 });
                             } }))))));
         }
@@ -4177,157 +4387,157 @@ const LogReviewer = (props) => {
                 React__default["default"].createElement(TabBox, { title: "User" },
                     React__default["default"].createElement("div", { className: "input-group mb-2" },
                         React__default["default"].createElement("span", { className: "input-group-text" }, "User First Name"),
-                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for user first name", value: advancedFilterState.userFirstName, placeholder: "e.g. Divardo", onChange: (e) => {
-                                advancedFilterState.userFirstName = e.target.value;
+                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for user first name", value: pendingAdvancedFilterState.userFirstName, placeholder: "e.g. Divardo", onChange: (e) => {
+                                pendingAdvancedFilterState.userFirstName = e.target.value;
                                 dispatch({
                                     type: ActionType$6.UpdateAdvancedFilterState,
-                                    advancedFilterState,
+                                    advancedFilterState: pendingAdvancedFilterState,
                                 });
                             } })),
                     React__default["default"].createElement("div", { className: "input-group mb-2" },
                         React__default["default"].createElement("span", { className: "input-group-text" }, "User Last Name"),
-                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for user last name", value: advancedFilterState.userLastName, placeholder: "e.g. Calicci", onChange: (e) => {
-                                advancedFilterState.userLastName = e.target.value;
+                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for user last name", value: pendingAdvancedFilterState.userLastName, placeholder: "e.g. Calicci", onChange: (e) => {
+                                pendingAdvancedFilterState.userLastName = e.target.value;
                                 dispatch({
                                     type: ActionType$6.UpdateAdvancedFilterState,
-                                    advancedFilterState,
+                                    advancedFilterState: pendingAdvancedFilterState,
                                 });
                             } })),
                     React__default["default"].createElement("div", { className: "input-group mb-2" },
                         React__default["default"].createElement("span", { className: "input-group-text" }, "User Email"),
-                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for user email", value: advancedFilterState.userEmail, placeholder: "e.g. calicci@fas.harvard.edu", onChange: (e) => {
-                                advancedFilterState.userEmail = ((e.target.value)
+                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for user email", value: pendingAdvancedFilterState.userEmail, placeholder: "e.g. calicci@fas.harvard.edu", onChange: (e) => {
+                                pendingAdvancedFilterState.userEmail = ((e.target.value)
                                     .trim());
                                 dispatch({
                                     type: ActionType$6.UpdateAdvancedFilterState,
-                                    advancedFilterState,
+                                    advancedFilterState: pendingAdvancedFilterState,
                                 });
                             } })),
                     React__default["default"].createElement("div", { className: "input-group mb-2" },
                         React__default["default"].createElement("span", { className: "input-group-text" }, "User Canvas Id"),
-                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for user canvas id", value: advancedFilterState.userId, placeholder: "e.g. 104985", onChange: (e) => {
+                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for user canvas id", value: pendingAdvancedFilterState.userId, placeholder: "e.g. 104985", onChange: (e) => {
                                 const { value } = e.target;
                                 // Only update if value contains only numbers
                                 if (/^\d+$/.test(value) || value === '') {
-                                    advancedFilterState.userId = ((e.target.value)
+                                    pendingAdvancedFilterState.userId = ((e.target.value)
                                         .trim());
                                 }
                                 dispatch({
                                     type: ActionType$6.UpdateAdvancedFilterState,
-                                    advancedFilterState,
+                                    advancedFilterState: pendingAdvancedFilterState,
                                 });
                             } })),
                     React__default["default"].createElement(ButtonInputGroup, { label: "Role" },
                         React__default["default"].createElement(CheckboxButton, { text: "Students", onChanged: (checked) => {
-                                advancedFilterState.includeLearners = checked;
+                                pendingAdvancedFilterState.includeLearners = checked;
                                 dispatch({
                                     type: ActionType$6.UpdateAdvancedFilterState,
-                                    advancedFilterState,
+                                    advancedFilterState: pendingAdvancedFilterState,
                                 });
-                            }, checked: advancedFilterState.includeLearners, ariaLabel: "show logs from students" }),
+                            }, checked: pendingAdvancedFilterState.includeLearners, ariaLabel: "show logs from students", checkedVariant: Variant$1.Light, uncheckedVariant: Variant$1.Light }),
                         React__default["default"].createElement(CheckboxButton, { text: "Teaching Team Members", onChanged: (checked) => {
-                                advancedFilterState.includeTTMs = checked;
+                                pendingAdvancedFilterState.includeTTMs = checked;
                                 dispatch({
                                     type: ActionType$6.UpdateAdvancedFilterState,
-                                    advancedFilterState,
+                                    advancedFilterState: pendingAdvancedFilterState,
                                 });
-                            }, checked: advancedFilterState.includeTTMs, ariaLabel: "show logs from teaching team members" }),
+                            }, checked: pendingAdvancedFilterState.includeTTMs, ariaLabel: "show logs from teaching team members", checkedVariant: Variant$1.Light, uncheckedVariant: Variant$1.Light }),
                         React__default["default"].createElement(CheckboxButton, { text: "Admins", onChanged: (checked) => {
-                                advancedFilterState.includeAdmins = checked;
+                                pendingAdvancedFilterState.includeAdmins = checked;
                                 dispatch({
                                     type: ActionType$6.UpdateAdvancedFilterState,
-                                    advancedFilterState,
+                                    advancedFilterState: pendingAdvancedFilterState,
                                 });
-                            }, checked: advancedFilterState.includeAdmins, ariaLabel: "show logs from admins" }))),
+                            }, checked: pendingAdvancedFilterState.includeAdmins, ariaLabel: "show logs from admins", checkedVariant: Variant$1.Light, uncheckedVariant: Variant$1.Light }))),
                 React__default["default"].createElement(TabBox, { title: "Course" },
                     React__default["default"].createElement("div", { className: "input-group mb-2" },
                         React__default["default"].createElement("span", { className: "input-group-text" }, "Course Name"),
-                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for course name", value: advancedFilterState.courseName, placeholder: "e.g. GLC 200", onChange: (e) => {
-                                advancedFilterState.courseName = e.target.value;
+                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for course name", value: pendingAdvancedFilterState.courseName, placeholder: "e.g. GLC 200", onChange: (e) => {
+                                pendingAdvancedFilterState.courseName = e.target.value;
                                 dispatch({
                                     type: ActionType$6.UpdateAdvancedFilterState,
-                                    advancedFilterState,
+                                    advancedFilterState: pendingAdvancedFilterState,
                                 });
                             } })),
                     React__default["default"].createElement("div", { className: "input-group mb-2" },
                         React__default["default"].createElement("span", { className: "input-group-text" }, "Course Canvas Id"),
-                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for course canvas id", value: advancedFilterState.courseId, placeholder: "e.g. 15948", onChange: (e) => {
+                        React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for course canvas id", value: pendingAdvancedFilterState.courseId, placeholder: "e.g. 15948", onChange: (e) => {
                                 const { value } = e.target;
                                 // Only update if value contains only numbers
                                 if (/^\d+$/.test(value)) {
-                                    advancedFilterState.courseId = ((e.target.value)
+                                    pendingAdvancedFilterState.courseId = ((e.target.value)
                                         .trim());
                                 }
                                 dispatch({
                                     type: ActionType$6.UpdateAdvancedFilterState,
-                                    advancedFilterState,
+                                    advancedFilterState: pendingAdvancedFilterState,
                                 });
                             } }))),
                 React__default["default"].createElement(TabBox, { title: "Device" },
                     React__default["default"].createElement(ButtonInputGroup, { label: "Device Type" },
-                        React__default["default"].createElement(RadioButton, { text: "All Devices", ariaLabel: "show logs from all devices", selected: advancedFilterState.isMobile === undefined, onSelected: () => {
-                                advancedFilterState.isMobile = undefined;
+                        React__default["default"].createElement(RadioButton, { text: "All Devices", ariaLabel: "show logs from all devices", selected: pendingAdvancedFilterState.isMobile === undefined, onSelected: () => {
+                                pendingAdvancedFilterState.isMobile = undefined;
                                 dispatch({
                                     type: ActionType$6.UpdateAdvancedFilterState,
-                                    advancedFilterState,
+                                    advancedFilterState: pendingAdvancedFilterState,
                                 });
-                            } }),
-                        React__default["default"].createElement(RadioButton, { text: "Mobile Only", ariaLabel: "show logs from mobile devices", selected: advancedFilterState.isMobile === true, onSelected: () => {
-                                advancedFilterState.isMobile = true;
+                            }, selectedVariant: Variant$1.Light, unselectedVariant: Variant$1.Light }),
+                        React__default["default"].createElement(RadioButton, { text: "Mobile Only", ariaLabel: "show logs from mobile devices", selected: pendingAdvancedFilterState.isMobile === true, onSelected: () => {
+                                pendingAdvancedFilterState.isMobile = true;
                                 dispatch({
                                     type: ActionType$6.UpdateAdvancedFilterState,
-                                    advancedFilterState,
+                                    advancedFilterState: pendingAdvancedFilterState,
                                 });
-                            } }),
-                        React__default["default"].createElement(RadioButton, { text: "Desktop Only", ariaLabel: "show logs from desktop devices", selected: advancedFilterState.isMobile === false, onSelected: () => {
-                                advancedFilterState.isMobile = false;
+                            }, selectedVariant: Variant$1.Light, unselectedVariant: Variant$1.Light }),
+                        React__default["default"].createElement(RadioButton, { text: "Desktop Only", ariaLabel: "show logs from desktop devices", selected: pendingAdvancedFilterState.isMobile === false, onSelected: () => {
+                                pendingAdvancedFilterState.isMobile = false;
                                 dispatch({
                                     type: ActionType$6.UpdateAdvancedFilterState,
-                                    advancedFilterState,
+                                    advancedFilterState: pendingAdvancedFilterState,
                                 });
-                            }, noMarginOnRight: true }))),
+                            }, noMarginOnRight: true, selectedVariant: Variant$1.Light, unselectedVariant: Variant$1.Light }))),
                 React__default["default"].createElement(TabBox, { title: "Source" },
                     React__default["default"].createElement(ButtonInputGroup, { label: "Source Type" },
-                        React__default["default"].createElement(RadioButton, { text: "Both", ariaLabel: "show logs from all sources", selected: advancedFilterState.source === undefined, onSelected: () => {
-                                advancedFilterState.source = undefined;
+                        React__default["default"].createElement(RadioButton, { text: "Both", ariaLabel: "show logs from all sources", selected: pendingAdvancedFilterState.source === undefined, onSelected: () => {
+                                pendingAdvancedFilterState.source = undefined;
                                 dispatch({
                                     type: ActionType$6.UpdateAdvancedFilterState,
-                                    advancedFilterState,
+                                    advancedFilterState: pendingAdvancedFilterState,
                                 });
-                            } }),
-                        React__default["default"].createElement(RadioButton, { text: "Client Only", ariaLabel: "show logs from client source", selected: advancedFilterState.source === LogSource$1.Client, onSelected: () => {
-                                advancedFilterState.source = LogSource$1.Client;
+                            }, selectedVariant: Variant$1.Light, unselectedVariant: Variant$1.Light }),
+                        React__default["default"].createElement(RadioButton, { text: "Client Only", ariaLabel: "show logs from client source", selected: pendingAdvancedFilterState.source === LogSource$1.Client, onSelected: () => {
+                                pendingAdvancedFilterState.source = LogSource$1.Client;
                                 dispatch({
                                     type: ActionType$6.UpdateAdvancedFilterState,
-                                    advancedFilterState,
+                                    advancedFilterState: pendingAdvancedFilterState,
                                 });
-                            } }),
-                        React__default["default"].createElement(RadioButton, { text: "Server Only", ariaLabel: "show logs from server source", selected: advancedFilterState.source === LogSource$1.Server, onSelected: () => {
-                                advancedFilterState.source = LogSource$1.Server;
+                            }, selectedVariant: Variant$1.Light, unselectedVariant: Variant$1.Light }),
+                        React__default["default"].createElement(RadioButton, { text: "Server Only", ariaLabel: "show logs from server source", selected: pendingAdvancedFilterState.source === LogSource$1.Server, onSelected: () => {
+                                pendingAdvancedFilterState.source = LogSource$1.Server;
                                 dispatch({
                                     type: ActionType$6.UpdateAdvancedFilterState,
-                                    advancedFilterState,
+                                    advancedFilterState: pendingAdvancedFilterState,
                                 });
-                            }, noMarginOnRight: true })),
-                    advancedFilterState.source !== LogSource$1.Client && (React__default["default"].createElement("div", { className: "mt-2" },
+                            }, noMarginOnRight: true, selectedVariant: Variant$1.Light, unselectedVariant: Variant$1.Light })),
+                    pendingAdvancedFilterState.source !== LogSource$1.Client && (React__default["default"].createElement("div", { className: "mt-2" },
                         React__default["default"].createElement("div", { className: "input-group mb-2" },
                             React__default["default"].createElement("span", { className: "input-group-text" }, "Server Route Path"),
-                            React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for server route path", value: advancedFilterState.routePath, placeholder: "e.g. /api/ttm/courses/12345", onChange: (e) => {
-                                    advancedFilterState.courseName = ((e.target.value)
+                            React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for server route path", value: pendingAdvancedFilterState.routePath, placeholder: "e.g. /api/ttm/courses/12345", onChange: (e) => {
+                                    pendingAdvancedFilterState.courseName = ((e.target.value)
                                         .trim());
                                     dispatch({
                                         type: ActionType$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
+                                        advancedFilterState: pendingAdvancedFilterState,
                                     });
                                 } })),
                         React__default["default"].createElement("div", { className: "input-group mb-2" },
                             React__default["default"].createElement("span", { className: "input-group-text" }, "Server Route Template"),
-                            React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for server route template", value: advancedFilterState.routeTemplate, placeholder: "e.g. /api/ttm/courses/:courseId", onChange: (e) => {
-                                    advancedFilterState.courseName = ((e.target.value)
+                            React__default["default"].createElement("input", { type: "text", className: "form-control", "aria-label": "query for server route template", value: pendingAdvancedFilterState.routeTemplate, placeholder: "e.g. /api/ttm/courses/:courseId", onChange: (e) => {
+                                    pendingAdvancedFilterState.courseName = ((e.target.value)
                                         .trim());
                                     dispatch({
                                         type: ActionType$6.UpdateAdvancedFilterState,
-                                        advancedFilterState,
+                                        advancedFilterState: pendingAdvancedFilterState,
                                     });
                                 } })))))));
         }
@@ -4341,10 +4551,10 @@ const LogReviewer = (props) => {
         body = (React__default["default"].createElement(React__default["default"].Fragment, null,
             filters,
             React__default["default"].createElement("div", { className: "mt-2" },
-                React__default["default"].createElement(IntelliTable, { title: "Matching Logs:", csvName: `Logs from ${getHumanReadableDate()}`, id: "logs", data: logs, columns: columns }),
-                logs.length === 0 && (React__default["default"].createElement("div", { className: "alert alert-warning text-center mt-2" },
+                logs.length === 0 ? (React__default["default"].createElement("div", { className: "alert alert-warning text-center mt-2" },
                     React__default["default"].createElement("h4", { className: "m-1" }, "No Logs to Show"),
-                    React__default["default"].createElement("div", null, "Either your filters are too strict or no matching logs have been created yet."))),
+                    React__default["default"].createElement("div", null, "Either your filters are too strict or no matching logs have been created yet.")))
+                    : (React__default["default"].createElement(IntelliTable, { title: "Matching Logs", csvName: `Logs from ${getHumanReadableDate()}`, id: "logs", data: logs, columns: columns })),
                 paginationControls)));
     }
     /* ---------- Wrap in Modal --------- */
@@ -4353,7 +4563,7 @@ const LogReviewer = (props) => {
         React__default["default"].createElement("div", { className: "LogReviewer-inner-container" },
             React__default["default"].createElement("div", { className: "LogReviewer-header" },
                 React__default["default"].createElement("div", { className: "LogReviewer-header-title" },
-                    React__default["default"].createElement("h3", { className: "text-center m-0" }, "Log Review Dashboard")),
+                    React__default["default"].createElement("h3", { className: "text-center" }, "Log Review Dashboard")),
                 React__default["default"].createElement("div", { style: { width: 0 } },
                     React__default["default"].createElement("button", { type: "button", className: "LogReviewer-header-close-button btn btn-dark btn-lg pe-0", "aria-label": "close log reviewer panel", onClick: onClose },
                         React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faTimes })))),
@@ -13688,6 +13898,12 @@ const padZerosLeft = (num, numDigits) => {
  */
 const LOG_REVIEW_STATUS_ROUTE = `${ROUTE_PATH_PREFIX}/logs/access_allowed`;
 
+/**
+ * Log reviewer page size
+ * @author Yuen Ler Chow
+ */
+const LOG_REVIEW_PAGE_SIZE = 100;
+
 // Stored copy of caccl functions
 let _cacclGetLaunchInfo;
 // Stored copy of dce-mango log collection
@@ -14036,12 +14252,12 @@ const initServer = (opts) => {
             // Query for logs
             const response = yield _logCollection.findPaged({
                 query,
-                perPage: 50,
+                perPage: LOG_REVIEW_PAGE_SIZE,
                 pageNumber,
             });
             // Count documents if requested
             if (countDocuments) {
-                response.numPages = Math.ceil((yield _logCollection.count(query)) / 50);
+                response.numPages = Math.ceil((yield _logCollection.count(query)) / LOG_REVIEW_PAGE_SIZE);
             }
             // Return response
             return response;
@@ -14859,16 +15075,16 @@ const genRouteHandler = (opts) => {
                 const { timestamp, year, month, day, hour, minute, } = getTimeInfoInET();
                 // Main log info
                 const mainLogInfo = {
-                    id: `${launchInfo ? 'unknown' : launchInfo.userId}-${Date.now()}-${Math.floor(Math.random() * 100000)}-${Math.floor(Math.random() * 100000)}`,
-                    userFirstName: (launchInfo ? 'unknown' : launchInfo.userFirstName),
-                    userLastName: (launchInfo ? 'unknown' : launchInfo.userLastName),
-                    userEmail: (launchInfo ? 'unknown' : launchInfo.userEmail),
-                    userId: (launchInfo ? 'unknown' : launchInfo.userId),
+                    id: `${launchInfo ? launchInfo.userId : 'unknown'}-${Date.now()}-${Math.floor(Math.random() * 100000)}-${Math.floor(Math.random() * 100000)}`,
+                    userFirstName: (launchInfo ? launchInfo.userFirstName : 'unknown'),
+                    userLastName: (launchInfo ? launchInfo.userLastName : 'unknown'),
+                    userEmail: (launchInfo ? launchInfo.userEmail : 'unknown'),
+                    userId: (launchInfo ? launchInfo.userId : 'unknown'),
                     isLearner: (launchInfo && !!launchInfo.isLearner),
                     isAdmin: (launchInfo && !!launchInfo.isAdmin),
                     isTTM: (launchInfo && !!launchInfo.isTTM),
-                    courseId: (launchInfo ? 'unknown' : launchInfo.courseId),
-                    courseName: (launchInfo ? 'unknown' : launchInfo.contextLabel),
+                    courseId: (launchInfo ? launchInfo.courseId : 'unknown'),
+                    courseName: (launchInfo ? launchInfo.contextLabel : 'unknown'),
                     browser,
                     device,
                     year,
@@ -15275,6 +15491,11 @@ const initLogCollection = (Collection) => {
             'context',
             'subcontext',
             'tags',
+            'year',
+            'month',
+            'day',
+            'hour',
+            'type',
         ],
     });
 };
@@ -16296,6 +16517,7 @@ exports.padDecimalZeros = padDecimalZeros;
 exports.padZerosLeft = padZerosLeft;
 exports.parallelLimit = parallelLimit;
 exports.prefixWithAOrAn = prefixWithAOrAn;
+exports.prompt = prompt;
 exports.roundToNumDecimals = roundToNumDecimals;
 exports.setClientEventMetadataPopulator = setClientEventMetadataPopulator;
 exports.showFatalError = showFatalError;