npm - @oneuptime/common - Versions diffs - 12.0.6 → 12.0.8 - Mend

@oneuptime/common 12.0.6 → 12.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (594) hide show

package/UI/Components/GanttChart/ChartContainer.tsx CHANGED Viewed

@@ -36,9 +36,10 @@ const ChartContainer: FunctionComponent<ComponentProps> = (
     /*
      * `isolate` creates a new stacking context so the chart's internal
      * z-indexes (e.g. a highlighted/matched bar uses z-30, see Bar/Index.tsx)
-     * stay trapped inside the chart. Without it those bars paint above
-     * page-level overlays like the span-details SideOver (z-10), making a
-     * matched span "show above" the sidebar.
+     * stay trapped inside the chart. Without it those bars compete directly
+     * with page-level overlays such as the span-details SideOver (z-30, and
+     * portalled to the end of <body>), and a matched span would "show above"
+     * the sidebar.
      */
     <div ref={divRef} className={"w-full"} style={{ isolation: "isolate" }}>
       {props.children}

package/UI/Components/Input/Input.tsx CHANGED Viewed

@@ -25,7 +25,20 @@ export interface ComponentProps {
   initialValue?: undefined | string | Date;
   id?: string | undefined;
   ariaLabelledby?: string | undefined;
+  // Set together by fields that open a popup, so the state is on the focusable element.
+  ariaHasPopup?: "dialog" | "listbox" | "menu" | "grid" | "tree" | undefined;
+  ariaExpanded?: boolean | undefined;
+  ariaControls?: string | undefined;
+  /*
+   * For fields that render their own error text - a picker whose message sits
+   * below the whole control rather than below this input.
+   */
+  ariaDescribedby?: string | undefined;
+  ariaInvalid?: boolean | undefined;
   onClick?: undefined | (() => void);
+  onKeyDown?:
+    | undefined
+    | ((event: React.KeyboardEvent<HTMLInputElement>) => void);
   placeholder?: undefined | string;
   className?: undefined | string;
   onChange?: undefined | ((value: string) => void);
@@ -164,8 +177,13 @@ const Input: FunctionComponent<ComponentProps> = (
           spellCheck={!props.disableSpellCheck}
           autoComplete={props.autoComplete}
           aria-labelledby={props.ariaLabelledby}
-          aria-invalid={props.error ? "true" : undefined}
-          aria-describedby={props.error ? "input-error-message" : undefined}
+          aria-haspopup={props.ariaHasPopup}
+          aria-expanded={props.ariaExpanded}
+          aria-controls={props.ariaControls}
+          aria-invalid={props.error || props.ariaInvalid ? "true" : undefined}
+          aria-describedby={
+            props.error ? "input-error-message" : props.ariaDescribedby
+          }
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             const value: string | Date = e.target.value;
@@ -194,8 +212,18 @@ const Input: FunctionComponent<ComponentProps> = (
           }}
           tabIndex={props.tabIndex}
           onKeyDown={
-            props.onEnterPress
+            props.onEnterPress || props.onKeyDown
               ? (event: React.KeyboardEvent<HTMLInputElement>) => {
+                  props.onKeyDown?.(event);
+                  /*
+                   * A handler that claimed the key - a picker opening its popup
+                   * on Enter, say - has already decided what it means.
+                   */
+                  if (event.defaultPrevented) {
+                    return;
+                  }
                   if (event.key === "Enter") {
                     props.onEnterPress?.();
                   }

package/UI/Components/LogsViewer/components/LogTimeRangePicker.tsx CHANGED Viewed

@@ -1,233 +1,28 @@
-import React, {
-  FunctionComponent,
-  ReactElement,
-  useState,
-  useRef,
-  useEffect,
-  useCallback,
-} from "react";
-import Icon from "../../Icon/Icon";
-import IconProp from "../../../../Types/Icon/IconProp";
+import React, { FunctionComponent, ReactElement } from "react";
 import RangeStartAndEndDateTime from "../../../../Types/Time/RangeStartAndEndDateTime";
-import TimeRange from "../../../../Types/Time/TimeRange";
-import InBetween from "../../../../Types/BaseDatabase/InBetween";
-import StartAndEndDate, {
-  StartAndEndDateType,
-} from "../../Date/StartAndEndDate";
-import {
-  DropdownHorizontalAlignment,
-  getDropdownAlignmentClassName,
-  useDropdownHorizontalAlignment,
-} from "../../../Utils/DropdownAlignment";
+import TimeRangePickerDropdown from "../../Date/TimeRangePickerDropdown";
 export interface LogTimeRangePickerProps {
   value: RangeStartAndEndDateTime;
   onChange: (value: RangeStartAndEndDateTime) => void;
 }
-// Matches the Tailwind `w-72` on the dropdown below (18rem).
+// Matches the Tailwind `w-72` on the rendered dropdown (18rem).
 export const LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX: number = 288;
-// Preset options to show in the dropdown (ordered for log investigation use)
-const PRESET_OPTIONS: Array<{ range: TimeRange; label: string }> = [
-  { range: TimeRange.PAST_FIVE_MINS, label: "Past 5 Minutes" },
-  { range: TimeRange.PAST_FIFTEEN_MINS, label: "Past 15 Minutes" },
-  { range: TimeRange.PAST_THIRTY_MINS, label: "Past 30 Minutes" },
-  { range: TimeRange.PAST_ONE_HOUR, label: "Past 1 Hour" },
-  { range: TimeRange.PAST_TWO_HOURS, label: "Past 2 Hours" },
-  { range: TimeRange.PAST_THREE_HOURS, label: "Past 3 Hours" },
-  { range: TimeRange.PAST_ONE_DAY, label: "Past 1 Day" },
-  { range: TimeRange.PAST_TWO_DAYS, label: "Past 2 Days" },
-  { range: TimeRange.PAST_ONE_WEEK, label: "Past 1 Week" },
-  { range: TimeRange.PAST_TWO_WEEKS, label: "Past 2 Weeks" },
-  { range: TimeRange.PAST_ONE_MONTH, label: "Past 1 Month" },
-  { range: TimeRange.PAST_THREE_MONTHS, label: "Past 3 Months" },
-];
-function formatDateShort(date: Date): string {
-  const month: string = date.toLocaleString("en-US", { month: "short" });
-  const day: number = date.getDate();
-  const hours: string = date.getHours().toString().padStart(2, "0");
-  const minutes: string = date.getMinutes().toString().padStart(2, "0");
-  return `${month} ${day}, ${hours}:${minutes}`;
-}
-function getButtonLabel(value: RangeStartAndEndDateTime): string {
-  if (value.range === TimeRange.CUSTOM && value.startAndEndDate) {
-    const start: string = formatDateShort(value.startAndEndDate.startValue);
-    const end: string = formatDateShort(value.startAndEndDate.endValue);
-    return `${start} – ${end}`;
-  }
-  const preset: { range: TimeRange; label: string } | undefined =
-    PRESET_OPTIONS.find((opt: { range: TimeRange; label: string }) => {
-      return opt.range === value.range;
-    });
-  return preset ? preset.label : value.range;
-}
+export const LOG_TIME_RANGE_PICKER_TEST_ID_PREFIX: string =
+  "log-time-range-picker";
 const LogTimeRangePicker: FunctionComponent<LogTimeRangePickerProps> = (
   props: LogTimeRangePickerProps,
 ): ReactElement => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [showCustom, setShowCustom] = useState<boolean>(
-    props.value.range === TimeRange.CUSTOM,
-  );
-  const containerRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
-    null!,
-  );
-  const buttonRef: React.RefObject<HTMLButtonElement> =
-    useRef<HTMLButtonElement>(null!);
-  const dropdownRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
-    null!,
-  );
-  const alignment: DropdownHorizontalAlignment = useDropdownHorizontalAlignment(
-    {
-      isOpen: isOpen,
-      anchorRef: buttonRef,
-      dropdownRef: dropdownRef,
-      dropdownWidthInPx: LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX,
-    },
-  );
-  // Close on click outside
-  useEffect(() => {
-    const handleClickOutside: (e: MouseEvent) => void = (
-      e: MouseEvent,
-    ): void => {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(e.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-  // Sync showCustom when value changes externally (e.g., histogram drag)
-  useEffect(() => {
-    setShowCustom(props.value.range === TimeRange.CUSTOM);
-  }, [props.value.range]);
-  const handlePresetSelect: (range: TimeRange) => void = useCallback(
-    (range: TimeRange): void => {
-      props.onChange({ range });
-      setShowCustom(false);
-      setIsOpen(false);
-    },
-    [props],
-  );
-  const handleCustomDateChange: (dateRange: InBetween<Date> | null) => void =
-    useCallback(
-      (dateRange: InBetween<Date> | null): void => {
-        if (dateRange) {
-          props.onChange({
-            range: TimeRange.CUSTOM,
-            startAndEndDate: dateRange,
-          });
-        }
-      },
-      [props],
-    );
-  const buttonLabel: string = getButtonLabel(props.value);
   return (
-    <div ref={containerRef} className="relative">
-      <button
-        ref={buttonRef}
-        type="button"
-        data-testid="log-time-range-picker-button"
-        aria-haspopup="true"
-        aria-expanded={isOpen}
-        className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-colors ${
-          isOpen
-            ? "border-indigo-300 bg-indigo-50 text-indigo-700"
-            : "border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50"
-        }`}
-        onClick={() => {
-          setIsOpen(!isOpen);
-        }}
-      >
-        <Icon icon={IconProp.Clock} className="h-3.5 w-3.5" />
-        <span>{buttonLabel}</span>
-        <Icon
-          icon={IconProp.ChevronDown}
-          className={`h-3 w-3 transition-transform ${isOpen ? "rotate-180" : ""}`}
-        />
-      </button>
-      {isOpen && (
-        <div
-          ref={dropdownRef}
-          data-testid="log-time-range-picker-dropdown"
-          data-align={alignment}
-          className={`absolute ${getDropdownAlignmentClassName(
-            alignment,
-          )} top-full z-50 mt-1 w-72 max-w-[calc(100vw-1rem)] rounded-lg border border-gray-200 bg-white shadow-lg`}
-        >
-          {/* Preset options */}
-          <div className="max-h-64 overflow-y-auto py-1">
-            {PRESET_OPTIONS.map(
-              (option: { range: TimeRange; label: string }) => {
-                const isActive: boolean = props.value.range === option.range;
-                return (
-                  <button
-                    key={option.range}
-                    type="button"
-                    className={`flex w-full items-center px-3 py-1.5 text-left text-sm transition-colors ${
-                      isActive
-                        ? "bg-indigo-50 font-medium text-indigo-700"
-                        : "text-gray-700 hover:bg-gray-50"
-                    }`}
-                    onClick={() => {
-                      handlePresetSelect(option.range);
-                    }}
-                  >
-                    {option.label}
-                  </button>
-                );
-              },
-            )}
-            {/* Custom option */}
-            <button
-              type="button"
-              className={`flex w-full items-center px-3 py-1.5 text-left text-sm transition-colors ${
-                props.value.range === TimeRange.CUSTOM
-                  ? "bg-indigo-50 font-medium text-indigo-700"
-                  : "text-gray-700 hover:bg-gray-50"
-              }`}
-              onClick={() => {
-                setShowCustom(true);
-              }}
-            >
-              Custom Range...
-            </button>
-          </div>
-          {/* Custom date inputs */}
-          {showCustom && (
-            <div className="border-t border-gray-100 p-3">
-              <StartAndEndDate
-                type={StartAndEndDateType.DateTime}
-                value={props.value.startAndEndDate}
-                hideTimeButtons={true}
-                onValueChanged={handleCustomDateChange}
-              />
-            </div>
-          )}
-        </div>
-      )}
-    </div>
+    <TimeRangePickerDropdown
+      value={props.value}
+      onChange={props.onChange}
+      dataTestIdPrefix={LOG_TIME_RANGE_PICKER_TEST_ID_PREFIX}
+      dropdownWidthInPx={LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX}
+    />
   );
 };

package/UI/Components/Modal/ConfirmModal.tsx CHANGED Viewed

@@ -15,6 +15,8 @@ export interface ComponentProps {
   isLoading?: boolean;
   error?: string | undefined;
   disableSubmitButton?: boolean | undefined;
+  // Rendered under the description - for confirmations that also ask something.
+  children?: ReactElement | undefined;
 }
 const ConfirmModal: FunctionComponent<ComponentProps> = (
@@ -51,11 +53,14 @@ const ConfirmModal: FunctionComponent<ComponentProps> = (
        * a long confirmation two nested scrollbars, and the inner one clipped
        * the text well short of the space the modal had spare.
        */}
-      <div
-        data-testid="confirm-modal-description"
-        className="whitespace-pre-wrap break-words text-sm leading-6 text-gray-600"
-      >
-        {translatedDescription}
+      <div>
+        <div
+          data-testid="confirm-modal-description"
+          className="whitespace-pre-wrap break-words text-sm leading-6 text-gray-600"
+        >
+          {translatedDescription}
+        </div>
+        {props.children ? <div className="mt-4">{props.children}</div> : <></>}
       </div>
     </Modal>
   );

package/UI/Components/Modal/Modal.tsx CHANGED Viewed

@@ -7,6 +7,8 @@ import ModalFooter from "./ModalFooter";
 import { VeryLightGray } from "../../../Types/BrandColors";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
+import { wasPressConsumedByAnAnchoredPopup } from "../../Types/LayeredDismissal";
+import { lockPageScroll, unlockPageScroll } from "../../Utils/PageScrollLock";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -23,52 +25,6 @@ export enum ModalWidth {
   Large,
 }
-/*
- * The page behind a modal must not scroll, and nested modals share a single
- * lock: a counter, rather than a boolean, is what stops the inner modal from
- * handing scrolling back while its parent is still open.
- */
-let openModalCount: number = 0;
-let bodyOverflowBeforeLock: string = "";
-let bodyPaddingRightBeforeLock: string = "";
-type PageScrollLockFunction = () => void;
-const lockPageScroll: PageScrollLockFunction = (): void => {
-  openModalCount++;
-  if (openModalCount > 1 || typeof document === "undefined") {
-    return;
-  }
-  bodyOverflowBeforeLock = document.body.style.overflow;
-  bodyPaddingRightBeforeLock = document.body.style.paddingRight;
-  /*
-   * Hiding the scrollbar reclaims its width, so the page underneath would
-   * jump sideways by exactly that much. Pad it back to hold everything still.
-   */
-  const scrollbarWidth: number =
-    window.innerWidth - document.documentElement.clientWidth;
-  if (scrollbarWidth > 0) {
-    document.body.style.paddingRight = `${scrollbarWidth}px`;
-  }
-  document.body.style.overflow = "hidden";
-};
-const unlockPageScroll: PageScrollLockFunction = (): void => {
-  openModalCount = Math.max(0, openModalCount - 1);
-  if (openModalCount > 0 || typeof document === "undefined") {
-    return;
-  }
-  document.body.style.overflow = bodyOverflowBeforeLock;
-  document.body.style.paddingRight = bodyPaddingRightBeforeLock;
-};
 export interface ComponentProps {
   title: string;
   description?: string | undefined;
@@ -123,6 +79,8 @@ const Modal: FunctionComponent<ComponentProps> = (
   >(props.onClose);
   const backdropPressStartedOutsideRef: React.MutableRefObject<boolean> =
     useRef<boolean>(false);
+  const backdropPressEndedInsideRef: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
   const titleId: string = useId();
   const descriptionId: string = useId();
@@ -346,31 +304,85 @@ const Modal: FunctionComponent<ComponentProps> = (
   ): boolean => {
     const modal: HTMLDivElement | null = modalRef.current;
-    return modal !== null && !modal.contains(event.target as Node);
+    if (modal === null) {
+      return false;
+    }
+    const target: Node = event.target as Node;
+    /*
+     * Dropdown menus inside the body (AutocompleteTextInput, OperatorSelector,
+     * ColorPicker, IconPicker, react-select) portal themselves to document.body
+     * so a scroll container cannot clip them. React dispatches events through
+     * the *React* tree rather than the DOM tree, so picking one of those
+     * options still bubbles into this handler even though the pointer never
+     * touched the backdrop — and because the option is not a DOM descendant of
+     * the panel, the containment check below read it as a click outside and
+     * dismissed the dialog, discarding whatever the user had filled in.
+     *
+     * A press only counts as a backdrop press when it physically landed inside
+     * the backdrop element this handler is attached to. That is a DOM question,
+     * and `contains` is true of the element itself, so a press directly on this
+     * layer or on the flex box it centres the panel in still dismisses.
+     */
+    if (!event.currentTarget.contains(target)) {
+      return false;
+    }
+    return !modal.contains(target);
   };
   const onBackdropMouseDown: BackdropPressHandler = (
     event: React.MouseEvent<HTMLDivElement>,
   ): void => {
+    backdropPressEndedInsideRef.current = false;
+    /*
+     * A press that a portalled popup has already spent on closing itself is
+     * not a dismissal of this dialog. Without this, clicking the backdrop to
+     * put away an open colour picker closed the picker and the form behind it
+     * in one go.
+     */
+    if (wasPressConsumedByAnAnchoredPopup(event.nativeEvent)) {
+      backdropPressStartedOutsideRef.current = false;
+      return;
+    }
     backdropPressStartedOutsideRef.current = isEventOutsideModal(event);
   };
+  const onBackdropMouseUp: BackdropPressHandler = (
+    event: React.MouseEvent<HTMLDivElement>,
+  ): void => {
+    /*
+     * The click that follows is reported against the nearest common ancestor
+     * of press and release — this very layer — so by the time it arrives the
+     * two ends are indistinguishable. Where the release landed has to be
+     * recorded while it is still known.
+     */
+    backdropPressEndedInsideRef.current = !isEventOutsideModal(event);
+  };
   const onBackdropClick: BackdropPressHandler = (
     event: React.MouseEvent<HTMLDivElement>,
   ): void => {
     /*
-     * Both ends of the click have to land on the backdrop. Selecting text in
-     * the body and releasing the mouse past the edge of the panel is a drag,
-     * not a dismissal, and it used to be the fastest way to lose a filled-in
-     * form.
+     * Both ends of the click have to land on the backdrop. A press that
+     * wandered across the edge of the panel in either direction is a drag —
+     * selecting text in the body and releasing outside, or pressing outside and
+     * releasing on the panel — and either used to be the fastest way to lose a
+     * filled-in form.
      */
     const pressStartedOutside: boolean = backdropPressStartedOutsideRef.current;
+    const pressEndedInside: boolean = backdropPressEndedInsideRef.current;
     backdropPressStartedOutsideRef.current = false;
+    backdropPressEndedInsideRef.current = false;
     if (
       props.disableCloseOnBackdropClick ||
       !props.onClose ||
       !pressStartedOutside ||
+      pressEndedInside ||
       !isEventOutsideModal(event) ||
       !isTopmostDialog()
     ) {
@@ -411,6 +423,7 @@ const Modal: FunctionComponent<ComponentProps> = (
       <div
         className="fixed inset-0 z-50 overflow-y-auto"
         onMouseDown={onBackdropMouseDown}
+        onMouseUp={onBackdropMouseUp}
         onClick={onBackdropClick}
       >
         <div className="flex min-h-full items-end justify-center p-0 text-center sm:items-center sm:p-6">

package/UI/Components/ModelDelete/ModelDelete.tsx CHANGED Viewed

@@ -14,6 +14,17 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   modelId: ObjectID;
   modelAPI?: typeof ModelAPI | undefined;
   onDeleteSuccess: () => void;
+  /*
+   * Extra content for the confirmation modal - a field to fill in before
+   * confirming, for example. State for it belongs to the caller.
+   */
+  confirmationContent?: ReactElement | undefined;
+  /*
+   * Replaces the delete request itself, for models whose delete needs more
+   * than an id (see confirmationContent). Throwing surfaces the error in the
+   * same dialog the default request uses.
+   */
+  onDelete?: (() => Promise<void>) | undefined;
 }
 const ModelDelete: <TBaseModel extends BaseModel>(
@@ -30,12 +41,16 @@ const ModelDelete: <TBaseModel extends BaseModel>(
   const deleteItem: PromiseVoidFunction = async (): Promise<void> => {
     setIsLoading(true);
     try {
-      const modelAPI: typeof ModelAPI = props.modelAPI || ModelAPI;
+      if (props.onDelete) {
+        await props.onDelete();
+      } else {
+        const modelAPI: typeof ModelAPI = props.modelAPI || ModelAPI;
-      await modelAPI.deleteItem<TBaseModel>({
-        modelType: props.modelType,
-        id: props.modelId,
-      });
+        await modelAPI.deleteItem<TBaseModel>({
+          modelType: props.modelType,
+          id: props.modelId,
+        });
+      }
       props.onDeleteSuccess?.();
     } catch (err) {
       setError(API.getFriendlyMessage(err));
@@ -76,7 +91,9 @@ const ModelDelete: <TBaseModel extends BaseModel>(
           }}
           submitButtonText={`Delete ${model.singularName}`}
           submitButtonType={ButtonStyleType.DANGER}
-        />
+        >
+          {props.confirmationContent}
+        </ConfirmModal>
       ) : (
         <></>
       )}