dce-reactkit 3.9.4-beta-logreviewer.5 → 3.9.4-beta-logreviewer.7

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
@@ -3555,14 +3715,12 @@ var ActionType$6;
     ActionType["UpdateActionErrorFilterState"] = "update-action-error-filter-state";
     // Update the advanced filter state
     ActionType["UpdateAdvancedFilterState"] = "update-advanced-filter-state";
-    // Increment the page number
-    ActionType["IncrementPageNumber"] = "increment-page-number";
-    // Decrement the page number
-    ActionType["DecrementPageNumber"] = "decrement-page-number";
     // Set has another page
     ActionType["SetHasAnotherPage"] = "set-has-another-page";
     // Set the number of pages
     ActionType["SetNumPages"] = "set-num-pages";
+    // Set page number
+    ActionType["SetPageNumber"] = "set-page-number";
 })(ActionType$6 || (ActionType$6 = {}));
 /**
  * Reducer that executes actions
@@ -3573,10 +3731,10 @@ var ActionType$6;
 const reducer$7 = (state, action) => {
     switch (action.type) {
         case ActionType$6.StartLoading: {
-            return Object.assign(Object.assign({}, state), { loading: true });
+            return Object.assign(Object.assign({}, state), { loading: true, showSpinner: action.filtersChanged });
         }
         case ActionType$6.FinishLoading: {
-            return Object.assign(Object.assign({}, state), { loading: false, logs: action.logs });
+            return Object.assign(Object.assign({}, state), { loading: false, showSpinner: false, logs: action.logs });
         }
         case ActionType$6.ToggleFilterDrawer: {
             return Object.assign(Object.assign({}, state), { expandedFilterDrawer: (state.expandedFilterDrawer === action.filterDrawer
@@ -3604,18 +3762,15 @@ const reducer$7 = (state, action) => {
         case ActionType$6.UpdateAdvancedFilterState: {
             return Object.assign(Object.assign({}, state), { advancedFilterState: action.advancedFilterState });
         }
-        case ActionType$6.IncrementPageNumber: {
-            return Object.assign(Object.assign({}, state), { pageNumber: state.pageNumber + 1 });
-        }
-        case ActionType$6.DecrementPageNumber: {
-            return Object.assign(Object.assign({}, state), { pageNumber: state.pageNumber - 1 });
-        }
         case ActionType$6.SetHasAnotherPage: {
             return Object.assign(Object.assign({}, state), { hasAnotherPage: action.hasAnotherPage });
         }
         case ActionType$6.SetNumPages: {
             return Object.assign(Object.assign({}, state), { numPages: action.numPages });
         }
+        case ActionType$6.SetPageNumber: {
+            return Object.assign(Object.assign({}, state), { pageNumber: action.pageNumber });
+        }
         default: {
             return state;
         }
@@ -3733,6 +3888,7 @@ const LogReviewer = (props) => {
     // Initial state
     const initialState = {
         loading: true,
+        showSpinner: true,
         logs: [],
         expandedFilterDrawer: undefined,
         dateFilterState: initDateFilterState,
@@ -3747,7 +3903,7 @@ const LogReviewer = (props) => {
     // Initialize state
     const [state, dispatch] = React.useReducer(reducer$7, initialState);
     // Destructure common state
-    const { loading, logs, expandedFilterDrawer, dateFilterState, contextFilterState, tagFilterState, actionErrorFilterState, advancedFilterState, pageNumber, hasAnotherPage, numPages, } = state;
+    const { loading, showSpinner, logs, expandedFilterDrawer, dateFilterState, contextFilterState, tagFilterState, actionErrorFilterState, advancedFilterState, pageNumber, hasAnotherPage, numPages, } = state;
     /*------------------------------------------------------------------------*/
     /* ------------------------- Component Functions ------------------------ */
     /*------------------------------------------------------------------------*/
@@ -3755,8 +3911,11 @@ const LogReviewer = (props) => {
      * Fetch logs from the server based on current filters
      */
     const fetchLogs = (opts) => __awaiter(void 0, void 0, void 0, function* () {
-        const { filters, pageNum, countDocuments, } = opts;
-        dispatch({ type: ActionType$6.StartLoading });
+        const { filters, pageNum, filtersChanged, } = opts;
+        dispatch({
+            type: ActionType$6.StartLoading,
+            filtersChanged,
+        });
         try {
             // Send filters to the server
             let fetchedLogs = [];
@@ -3767,7 +3926,7 @@ const LogReviewer = (props) => {
                 params: {
                     pageNumber: pageNum,
                     filters,
-                    countDocuments,
+                    countDocuments: filtersChanged,
                 },
             });
             fetchedLogs = fetchedLogs.concat(response.items);
@@ -3775,7 +3934,7 @@ const LogReviewer = (props) => {
                 type: ActionType$6.SetHasAnotherPage,
                 hasAnotherPage: response.hasAnotherPage,
             });
-            if (countDocuments && response.numPages) {
+            if (filtersChanged && response.numPages) {
                 dispatch({
                     type: ActionType$6.SetNumPages,
                     numPages: response.numPages,
@@ -3786,12 +3945,34 @@ const LogReviewer = (props) => {
                 type: ActionType$6.FinishLoading,
                 logs: fetchedLogs,
             });
+            // Update page number
+            dispatch({
+                type: ActionType$6.SetPageNumber,
+                pageNumber: pageNum,
+            });
         }
         catch (err) {
             return showFatalError(err);
         }
     });
     /*------------------------------------------------------------------------*/
+    /* ------------------------- Lifecycle Functions ------------------------ */
+    /*------------------------------------------------------------------------*/
+    // Fetch logs on mount
+    React.useEffect(() => {
+        fetchLogs({
+            filters: {
+                dateFilterState,
+                contextFilterState,
+                tagFilterState,
+                actionErrorFilterState,
+                advancedFilterState,
+            },
+            pageNum: 1,
+            filtersChanged: true,
+        });
+    }, []);
+    /*------------------------------------------------------------------------*/
     /* ------------------------------- Render ------------------------------- */
     /*------------------------------------------------------------------------*/
     /*----------------------------------------*/
@@ -3800,7 +3981,7 @@ const LogReviewer = (props) => {
     // Body that will be filled with the contents of the panel
     let body;
     /* ------------- Loading ------------ */
-    if (loading) {
+    if (showSpinner) {
         body = (React__default["default"].createElement("div", { className: "text-center p-5" },
             React__default["default"].createElement(LoadingSpinner, null)));
     }
@@ -3809,7 +3990,7 @@ 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, onClick: () => {
+        React__default["default"].createElement("button", { type: "button", className: "btn btn-secondary me-2", disabled: pageNumber <= 1 || loading, onClick: () => {
                 fetchLogs({
                     filters: {
                         dateFilterState,
@@ -3819,10 +4000,7 @@ const LogReviewer = (props) => {
                         advancedFilterState,
                     },
                     pageNum: pageNumber - 1,
-                    countDocuments: false,
-                });
-                dispatch({
-                    type: ActionType$6.DecrementPageNumber,
+                    filtersChanged: false,
                 });
             } },
             React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faArrowLeft, className: "me-2" }),
@@ -3835,7 +4013,7 @@ const LogReviewer = (props) => {
             "of",
             ' ',
             numPages),
-        React__default["default"].createElement("button", { type: "button", className: "btn btn-secondary ms-2", disabled: !hasAnotherPage, onClick: () => {
+        React__default["default"].createElement("button", { type: "button", className: "btn btn-secondary ms-2", disabled: !hasAnotherPage || loading, onClick: () => {
                 fetchLogs({
                     filters: {
                         dateFilterState,
@@ -3845,10 +4023,7 @@ const LogReviewer = (props) => {
                         advancedFilterState,
                     },
                     pageNum: pageNumber + 1,
-                    countDocuments: false,
-                });
-                dispatch({
-                    type: ActionType$6.IncrementPageNumber,
+                    filtersChanged: false,
                 });
             } },
             "Next Page",
@@ -3910,7 +4085,7 @@ const LogReviewer = (props) => {
                             advancedFilterState: initAdvancedFilterState,
                         },
                         pageNum: 1,
-                        countDocuments: true,
+                        filtersChanged: true,
                     });
                     dispatch({
                         type: ActionType$6.ResetFilters,
@@ -3940,7 +4115,7 @@ const LogReviewer = (props) => {
                             advancedFilterState,
                         },
                         pageNum: 1,
-                        countDocuments: true,
+                        filtersChanged: true,
                     });
                 } },
                 React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faSearch }),
@@ -4322,14 +4497,16 @@ const LogReviewer = (props) => {
         filterToggles,
         filterDrawer && (React__default["default"].createElement(Drawer, { customBackgroundColor: "#eee" }, filterDrawer))));
     // Main body
-    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" },
-                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."))),
-            paginationControls)));
+    if (!showSpinner) {
+        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" },
+                    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."))),
+                paginationControls)));
+    }
     /* ---------- Wrap in Modal --------- */
     return (React__default["default"].createElement("div", { className: "LogReviewer-outer-container" },
         React__default["default"].createElement("style", null, style$2),
@@ -13671,6 +13848,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
@@ -14019,12 +14202,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;
@@ -14842,16 +15025,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,
@@ -15258,6 +15441,11 @@ const initLogCollection = (Collection) => {
             'context',
             'subcontext',
             'tags',
+            'year',
+            'month',
+            'day',
+            'hour',
+            'type',
         ],
     });
 };
@@ -16279,6 +16467,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;