dce-reactkit 3.9.0-beta-loading-modal.2 → 3.9.0-beta-loading-modal.3

package/src/components/AppWrapper.tsx

@@ -240,6 +240,147 @@ export const confirm = async (
   });
 };
 
+/*----------------------------------------*/
+/* --------------- Prompt -------------- */
+/*----------------------------------------*/
+
+// Stored copies of setters
+let setPromptInfo: (
+  info: (
+    | undefined
+    | {
+      title: string,
+      currentInputFieldText: string,
+      opts: {
+        textAboveInputField?: string,
+        placeholder?: string,
+        defaultText?: string,
+        confirmButtonText?: string,
+        confirmButtonVariant?: Variant,
+        cancelButtonText?: string,
+        cancelButtonVariant?: Variant,
+        minNumChars?: number,
+        findValidationError?: (text: string) => string | undefined,
+        ariaLabel?: string,
+      },
+    }
+  ),
+) => void;
+
+// Function to call when prompt is closed
+let onPromptClosed: (result: string | null) => void;
+
+/**
+ * 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
+ */
+export const prompt = async (
+  title: string,
+  opts?: {
+    textAboveInputField?: string,
+    defaultText?: string,
+    placeholder?: string,
+    confirmButtonText?: string,
+    confirmButtonVariant?: Variant,
+    cancelButtonText?: string,
+    cancelButtonVariant?: Variant,
+    minNumChars?: number,
+    findValidationError?: (text: string) => string | undefined,
+    ariaLabel?: string,
+  },
+): Promise<string | null> => {
+  // Wait for helper to exist
+  await 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${opts?.textAboveInputField ?? ''}`,
+        opts?.defaultText ?? '',
+      );
+
+      // Exit loop if user cancels
+      if (result === null) {
+        return null;
+      }
+
+      // Validate min num chars
+      const minNumCharsValidationError = (
+        (opts?.minNumChars && result.length < opts.minNumChars)
+          ? `Please enter at least ${opts.minNumChars} characters.`
+          : undefined
+      );
+
+      // Run custom validation
+      const customValidationError = (
+        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) => {
+    // Setup handler
+    onPromptClosed = (result: string | null) => {
+      resolve(result);
+    };
+
+    // Show the prompt
+    setPromptInfo({
+      title,
+      currentInputFieldText: (opts?.defaultText ?? ''),
+      opts: (opts ?? {}),
+    });
+  });
+};
+
 /*----------------------------------------*/
 /* ------------- Fatal Error ------------ */
 /*----------------------------------------*/
@@ -465,6 +606,28 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
   >(undefined);
   setConfirmInfo = setConfirmInfoInner;
 
+  // Prompt
+  const [promptInfo, setPromptInfoInner] = useState<
+  | undefined
+  | {
+    title: string,
+    currentInputFieldText: string,
+    opts: {
+      textAboveInputField?: string,
+      placeholder?: string,
+      defaultText?: string,
+      confirmButtonText?: string,
+      confirmButtonVariant?: Variant,
+      cancelButtonText?: string,
+      cancelButtonVariant?: Variant,
+      minNumChars?: number,
+      findValidationError?: (text: string) => string | undefined,
+      ariaLabel?: string,
+    }
+  }
+  >(undefined);
+  setPromptInfo = setPromptInfoInner;
+
   // Session expired
   const [
     sessionHasExpired,
@@ -531,6 +694,99 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
     );
   }
 
+  /* ------------- 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 = (
+      <ModalForWrapper
+        key={`prompt-${promptInfo.title}`}
+        title={promptInfo.title}
+        // Don't show ok button if there is a validation error
+        type={(
+          (customValidationError || minNumCharsValidationError)
+            ? ModalType.Cancel
+            : ModalType.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.Okay
+              ? promptInfo.currentInputFieldText
+              : null
+          );
+
+          // Close prompt
+          setPromptInfo(undefined);
+
+          // Call handler
+          if (onPromptClosed) {
+            onPromptClosed(result);
+          }
+        }}
+        onTopOfOtherModals
+        dontAllowBackdropExit
+      >
+        <div>
+          {/* Message above input field */}
+          {promptInfo.opts.textAboveInputField && (
+            <div>
+              {promptInfo.opts.textAboveInputField}
+            </div>
+          )}
+
+          {/* Input field */}
+          <input
+            type="text"
+            className="form-control"
+            aria-label={promptInfo.opts.ariaLabel}
+            placeholder={promptInfo.opts.placeholder}
+            value={promptInfo.currentInputFieldText}
+            onChange={(e) => {
+              return setPromptInfo({
+                ...promptInfo,
+                currentInputFieldText: e.target.value,
+              });
+            }}
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus
+          />
+
+          {/* Validation errors */}
+          {minNumCharsValidationError && (
+            <div className="text-danger fw-bold mt-2">
+              {minNumCharsValidationError}
+            </div>
+          )}
+          {customValidationError && (
+            <div className="text-danger fw-bold mt-2">
+              {customValidationError}
+            </div>
+          )}
+        </div>
+      </ModalForWrapper>
+    );
+  }
+
   /* ------ Custom Modal Portals ------ */
 
   // Custom modal portals
@@ -662,7 +918,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
       ? `
         .tooltip-inner {
           background-color: white;
-          color: black;
+          color: black !important;
           border: 0.1rem solid black;
           pointer-events: none;
         }
@@ -675,7 +931,7 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
       : `
         .tooltip-inner {
           background-color: black;
-          color: white;
+          color: white !important;
           border: 0.1rem solid white;
           pointer-events: none;
         }

package/src/components/CheckboxButton.tsx

@@ -46,6 +46,8 @@ type Props = {
   small?: boolean,
   // If true, show a dash in the checkbox (only relevant if unchecked)
   dashed?: boolean,
+  // If true, use complex formatting (tabs, newlines) in the text
+  useComplexFormatting?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -80,6 +82,7 @@ const CheckboxButton: React.FC<Props> = (props) => {
     ),
     small,
     dashed,
+    useComplexFormatting,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -114,16 +117,31 @@ const CheckboxButton: React.FC<Props> = (props) => {
         onChanged(!checked);
       }}
     >
-      <div className="d-flex">
-        <div className="align-items-center">
+      <div className="d-flex align-items-center">
+        <div className="me-1">
           <FontAwesomeIcon
             icon={icon}
-            className="me-1"
           />
         </div>
-        <div className="flex-grow-1">
-          {text}
-        </div>
+        {
+          useComplexFormatting
+            ? (
+              <pre
+                className="ps-1 text-start text-break m-0"
+                style={{
+                  whiteSpace: 'pre-wrap',
+                  tabSize: 2,
+                }}
+              >
+                {text}
+              </pre>
+            )
+            : (
+              <div className="flex-grow-1 text-start text-break">
+                {text}
+              </div>
+            )
+        }
       </div>
     </button>
   );

package/src/components/Dropdown.tsx

@@ -0,0 +1,317 @@
+/**
+ * A simple dropdown menu
+ * @author Alessandra De Lucas
+ * @author Yuen Ler Chow
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React, { useEffect, useReducer, useRef } from 'react';
+
+// Import helpers
+import combineClassNames from '../helpers/combineClassNames';
+
+// Import shared types
+import Variant from '../types/Variant';
+import DropdownItemType from '../types/DropdownItemType';
+
+// Check dark mode
+import { isDarkModeOn } from '../client/initClient';
+
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Types ------------------------------- */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = {
+  // List of items in the dropdown menu
+  items: DropdownItem[],
+  // Information about the dropdown button
+  dropdownButton: {
+    // Aria label for accessibility
+    ariaLabel: string,
+    // Unique ID
+    id: string,
+    // Button content
+    content?: React.ReactNode,
+    // Variant
+    variant?: Variant,
+  },
+  // If true, no arrow shows in dropdown
+  // noArrow?: boolean,
+  // Size of dropdown
+  // size?: DropdownSize,
+  // Direction of dropdown
+  // direction?: DropdownDirection,
+};
+
+// Details about a dropdown item
+type DropdownItem = (
+  | {
+    // Header element
+    type: DropdownItemType.Header,
+    // Header content
+    content: React.ReactNode,
+  }
+  | {
+    // Divider element
+    type: DropdownItemType.Divider,
+  }
+  | {
+    // Item from dropdown menu
+    type: DropdownItemType.Item,
+    // Item content
+    content: React.ReactNode,
+    // Item aria label
+    ariaLabel: string,
+    // Unique item ID
+    id: string,
+    // Click function for dropdown item
+    onClick: () => void,
+  }
+);
+
+// Dropdown menu sizes
+// enum DropdownSize {
+//   // Small dropdown size
+//   Small = 'Small',
+//   // Medium dropdown size
+//   Medium = 'Medium',
+//   // Large dropdown size
+//   Large = 'Large',
+// }
+
+// Dropdown menu direction
+// enum DropdownDirection {
+//   // Dropdown menu appears centered
+//   Centered = 'Centered',
+//   // Dropdown menu appears to right of button
+//   Right = 'Right',
+//   // Dropdown menu appears to left of button
+//   Left = 'Left',
+//   // Dropdown menu appears above the button
+//   Up = 'Up',
+//   // Dropdown menu appears below the button
+//   Down = 'Down',
+// }
+
+/*------------------------------------------------------------------------*/
+/* -------------------------------- State ------------------------------- */
+/*------------------------------------------------------------------------*/
+
+/* -------- State Definition -------- */
+
+type State = {
+  // If true, the dropdown menu is open
+  isDropdownOpen: boolean,
+};
+
+/* ------------- Actions ------------ */
+
+// Types of actions
+enum ActionType {
+  // Toggle opening the dropdown menu
+  ToggleDropdown = 'ToggleDropdown',
+  // Close the dropdown menu
+  CloseDropdown = 'CloseDropdown',
+}
+
+// Action definitions
+type Action = (
+  | {
+    type: ActionType.ToggleDropdown,
+  }
+  | {
+    type: ActionType.CloseDropdown,
+  }
+);
+
+/**
+ * Reducer that executes actions
+ * @author Alessandra De Lucas
+ * @author Yuen Ler Chow
+ * @param state current state
+ * @param action action to execute
+ */
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case ActionType.ToggleDropdown: {
+      return {
+        ...state,
+        isDropdownOpen: !state.isDropdownOpen,
+      };
+    }
+    case ActionType.CloseDropdown: {
+      return {
+        ...state,
+        isDropdownOpen: false,
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Component ----------------------------- */
+/*------------------------------------------------------------------------*/
+
+const Dropdown: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /* -------------------------------- Setup ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure all props
+  const {
+    dropdownButton,
+    items,
+  } = props;
+
+  /* -------------- State ------------- */
+
+  // Initial state
+  const initialState: State = {
+    isDropdownOpen: false,
+  };
+
+  // Initialize state
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  // Destructure common state
+  const {
+    isDropdownOpen,
+  } = state;
+
+  /* -------------- Refs -------------- */
+
+  // Initialize refs
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  /*------------------------------------------------------------------------*/
+  /* ------------------------- Component Functions ------------------------ */
+  /*------------------------------------------------------------------------*/
+
+  /**
+   * Handle clicking outside of the dropdown menu to close it
+   * @author Yuen Ler Chow
+   * @param event the mouse event
+   */
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      // Dropdown has been rendered
+      dropdownRef.current
+      // Click occurred outside the dropdown
+      && !dropdownRef.current.contains(event.target as Element)
+    ) {
+      dispatch({ type: ActionType.CloseDropdown });
+    }
+  };
+
+  /*------------------------------------------------------------------------*/
+  /* ------------------------- Lifecycle Functions ------------------------ */
+  /*------------------------------------------------------------------------*/
+
+  /**
+   * Mount
+   * @author Yuen Ler Chow
+   */
+  useEffect(() => {
+    // Add event listener to close dropdown when clicking outside
+    document.addEventListener('mousedown', handleClickOutside);
+
+    // Cleanup
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  /*----------------------------------------*/
+  /* --------------- Main UI -------------- */
+  /*----------------------------------------*/
+
+  return (
+    <div
+      className="dropdown"
+      ref={dropdownRef}
+      data-bs-theme={isDarkModeOn() ? 'dark' : undefined}
+    >
+      <button
+        className={
+          combineClassNames([
+            'btn dropdown-toggle border',
+            isDropdownOpen && 'show',
+            `btn-${dropdownButton.variant}`,
+            dropdownButton.variant === Variant.Light && 'text-dark',
+          ])
+        }
+        type="button"
+        id={dropdownButton.id}
+        aria-expanded={isDropdownOpen}
+        aria-label={dropdownButton.ariaLabel}
+        onClick={() => {
+          dispatch({
+            type: ActionType.ToggleDropdown,
+          });
+        }}
+      >
+        {
+          dropdownButton.content
+        }
+      </button>
+      <ul
+        className={
+          combineClassNames([
+            'dropdown-menu',
+            isDarkModeOn() && 'dropdown-menu-dark',
+            isDropdownOpen && 'show',
+          ])
+        }
+      >
+        {Object.values(items).map((item) => {
+          if (item.type === DropdownItemType.Header) {
+            return (
+              // TODO: Implement header
+              <span />
+            );
+          }
+          if (item.type === DropdownItemType.Divider) {
+            return (
+              // TODO: Implement divider
+              <span />
+            );
+          }
+          return (
+            <li
+              key={item.id}
+            >
+              <button
+                type="button"
+                aria-label={item.ariaLabel}
+                className="dropdown-item"
+                onClick={(e) => {
+                  e.preventDefault();
+                  dispatch({
+                    type: ActionType.CloseDropdown,
+                  });
+                  item.onClick();
+                }}
+              >
+                {item.content}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------- Wrap Up ------------------------------ */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default Dropdown;

package/src/components/IntelliTable.tsx

@@ -315,7 +315,7 @@ const IntelliTable: React.FC<Props> = (props) => {
                 checked={columnVisibilityMap[column.param]}
                 ariaLabel={`show "${column.title}" column in the ${title} table`}
                 checkedVariant={Variant.Light}
-                uncheckedVariant={Variant.Secondary}
+                uncheckedVariant={Variant.Light}
               />
             );
           })

package/src/components/ItemPicker/NestableItemList.tsx

@@ -272,6 +272,7 @@ const NestableItemList: React.FC<Props> = (props) => {
                 }}
                 ariaLabel={`Select ${item.name}`}
                 checkedVariant={Variant.Light}
+                uncheckedVariant={Variant.Light}
               />
 
               {/* Children */}

package/src/components/LogReviewer.tsx

@@ -959,10 +959,23 @@ const LogReviewer: React.FC<Props> = (props) => {
         const { year, month } = toLoad[i];
 
         // Load
-        const logs = await visitServerEndpoint({
-          path: `${LOG_REVIEW_ROUTE_PATH_PREFIX}/years/${year}/months/${month}`,
-          method: 'GET',
-        });
+        let logs: Log[] = [];
+        let pageNumber = 1;
+        let hasAnotherPage = true;
+
+        while (hasAnotherPage) {
+          const response = await visitServerEndpoint({
+            path: `${LOG_REVIEW_ROUTE_PATH_PREFIX}/years/${year}/months/${month}`,
+            method: 'GET',
+            params: {
+              pageNumber,
+            },
+          });
+
+          logs = logs.concat(response.items);
+          hasAnotherPage = response.hasAnotherPage;
+          pageNumber += 1;
+        }
 
         // Add to map
         if (!logMap[year]) {