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/SideOver/SideOver.tsx CHANGED Viewed

@@ -1,7 +1,16 @@
 import Button, { ButtonStyleType } from "../Button/Button";
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
-import React, { FunctionComponent, ReactElement } from "react";
+import { lockPageScroll, unlockPageScroll } from "../../Utils/PageScrollLock";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
 export enum SideOverSize {
   Small = "Small",
@@ -19,8 +28,42 @@ export interface ComponentProps {
   submitButtonText?: string | undefined;
   leftFooterElement?: ReactElement | undefined;
   size?: SideOverSize | undefined;
+  /*
+   * Opt out of hiding the page's scrollbar while the panel is open. Only worth
+   * setting for a panel that is a permanent part of its page rather than a
+   * transient drawer — every current caller wants the lock.
+   */
+  disablePageScrollLock?: boolean | undefined;
 }
+type PortalTargetFunction = () => HTMLElement | null;
+/*
+ * Where the panel is appended in the DOM, not where it appears on screen — it
+ * is `position: fixed` either way.
+ *
+ * Two reasons it cannot simply stay where the caller rendered it. First, any
+ * ancestor with a z-index traps the panel in that ancestor's stacking context,
+ * which is how a map's zoom toolbar (z-20) ended up painting on top of an open
+ * device panel. Second, and unfixable by z-index at all: only the fullscreen
+ * element's own subtree reaches the browser's top layer, so a panel appended to
+ * <body> while a chart or map is fullscreen is not painted anywhere. Following
+ * document.fullscreenElement keeps the panel visible in both modes.
+ */
+const getPortalTarget: PortalTargetFunction = (): HTMLElement | null => {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const fullscreenElement: Element | null = document.fullscreenElement;
+  if (fullscreenElement instanceof HTMLElement) {
+    return fullscreenElement;
+  }
+  return document.body;
+};
 const SideOver: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -34,85 +77,169 @@ const SideOver: FunctionComponent<ComponentProps> = (
     widthClass = "max-w-7xl";
   }
-  return (
+  const titleId: string = useId();
+  const descriptionId: string = useId();
+  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(
+    getPortalTarget,
+  );
+  useEffect(() => {
+    const syncPortalTarget: () => void = (): void => {
+      setPortalTarget(getPortalTarget());
+    };
+    /*
+     * Re-read once on mount as well: the first render happens before the
+     * browser has necessarily settled document.fullscreenElement.
+     */
+    syncPortalTarget();
+    document.addEventListener("fullscreenchange", syncPortalTarget);
+    return () => {
+      document.removeEventListener("fullscreenchange", syncPortalTarget);
+    };
+  }, []);
+  /*
+   * A layout effect, not an ordinary one. Hiding the page scrollbar widens the
+   * viewport that `right: 0` resolves against, so a panel that painted before
+   * the lock landed would visibly jump sideways by the scrollbar's width on
+   * every platform that draws a classic scrollbar. Locking before paint means
+   * the panel is only ever drawn in its final position.
+   */
+  useLayoutEffect(() => {
+    if (props.disablePageScrollLock) {
+      return undefined;
+    }
+    lockPageScroll();
+    return () => {
+      unlockPageScroll();
+    };
+  }, [props.disablePageScrollLock]);
+  const sideOver: ReactElement = (
+    /*
+     * z-30 clears every tier of page chrome (sticky headers and table headers
+     * at z-10/z-20, map and log-viewer toolbars at z-20) while staying under
+     * the app-wide overlays that must remain visible over a panel: Toast and
+     * the AI chat panel at z-40, Modal at z-50, portalled dropdown menus at
+     * z-60. Deliberately NOT z-40 — Toast and AIChatPanel are mounted ahead of
+     * the routed page in App.tsx, so an equal z-index would be broken in this
+     * panel's favour by document order and toasts would disappear behind it.
+     *
+     * role="dialog" without aria-modal, because the panel genuinely is not
+     * modal: everything outside it stays clickable by design (both topology
+     * maps let you click straight from one node's panel to the next). Claiming
+     * aria-modal also made this panel the last entry in Modal's dialog stack,
+     * which silently disabled Escape, backdrop-dismissal and initial focus on
+     * any Modal that was already open.
+     */
     <div
-      className="relative z-10"
-      aria-labelledby="slide-over-title"
+      className="relative z-30"
+      aria-labelledby={titleId}
+      aria-describedby={props.description ? descriptionId : undefined}
       role="dialog"
-      aria-modal="true"
+      data-testid="side-over"
     >
-      <div className="inset-0"></div>
-      <div className="inset-0 overflow-hidden">
-        <div className="inset-0 overflow-hidden">
-          <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full">
-            <div className={`pointer-events-auto w-screen ${widthClass}`}>
-              <div className="flex h-full flex-col bg-white shadow-xl">
-                <div className="flex-shrink-0 flex flex-col bg-gray-50 px-4 py-6 sm:px-6">
-                  <div className="flex items-start justify-between space-x-3">
-                    <div className="space-y-1">
-                      <h2
-                        className="text-lg font-medium text-gray-900"
-                        id="slide-over-title"
-                      >
-                        {props.title}
-                      </h2>
-                      <p className="text-sm text-gray-500">
-                        {props.description}
-                      </p>
-                    </div>
-                    <div className="flex h-7 items-center">
-                      <button
-                        onClick={() => {
-                          props.onClose();
-                        }}
-                        type="button"
-                        className="text-gray-400 hover:text-gray-500"
-                      >
-                        <span className="sr-only">Close panel</span>
-                        <Icon className="h-6 w-6" icon={IconProp.Close} />
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <div className="h-full overflow-y-scroll">
-                  <div className="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0 p-5">
-                    {props.children}
-                  </div>
+      <div
+        className="pointer-events-none fixed inset-0 flex justify-end"
+        data-testid="side-over-layer"
+      >
+        <div className={`pointer-events-auto w-full ${widthClass}`}>
+          <div className="flex h-full flex-col bg-white shadow-xl">
+            <div className="flex-shrink-0 flex flex-col bg-gray-50 px-4 py-6 sm:px-6">
+              <div className="flex items-start justify-between space-x-3">
+                <div className="space-y-1">
+                  <h2
+                    className="text-lg font-medium text-gray-900"
+                    id={titleId}
+                    data-testid="side-over-title"
+                  >
+                    {props.title}
+                  </h2>
+                  <p
+                    className="text-sm text-gray-500"
+                    id={descriptionId}
+                    data-testid="side-over-description"
+                  >
+                    {props.description}
+                  </p>
                 </div>
-                <div className="flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6 flex justify-between">
-                  <div className="flex justify-start space-x-3">
-                    {props.leftFooterElement}
-                  </div>
-                  <div className="flex justify-end space-x-3">
-                    <Button
-                      title="Close"
-                      onClick={() => {
-                        props.onClose();
-                      }}
-                      buttonStyle={ButtonStyleType.NORMAL}
-                    />
-                    {props.onSubmit && (
-                      <Button
-                        title={props.submitButtonText || "Save"}
-                        disabled={props.submitButtonDisabled}
-                        onClick={() => {
-                          props.onSubmit!();
-                        }}
-                        buttonStyle={ButtonStyleType.PRIMARY}
-                      />
-                    )}
-                  </div>
+                <div className="flex h-7 items-center">
+                  <button
+                    onClick={() => {
+                      props.onClose();
+                    }}
+                    type="button"
+                    title="Close panel"
+                    data-testid="close-button"
+                    className="text-gray-400 hover:text-gray-500"
+                  >
+                    <span className="sr-only">Close panel</span>
+                    <Icon className="h-6 w-6" icon={IconProp.Close} />
+                  </button>
                 </div>
               </div>
             </div>
+            {/*
+             * overflow-y-auto, not overflow-y-scroll: `scroll` paints a dead
+             * track down the panel's right edge even when the content fits,
+             * immediately beside the page's own scrollbar, which reads as the
+             * page scrollbar bleeding through the panel. overscroll-contain
+             * stops a wheel past the end of the panel from scrolling the page
+             * out from under it.
+             */}
+            <div
+              className="min-h-0 flex-1 overflow-y-auto overscroll-contain"
+              data-testid="side-over-content"
+            >
+              <div className="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0 p-5">
+                {props.children}
+              </div>
+            </div>
+            <div
+              className="flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6 flex justify-between"
+              data-testid="side-over-footer"
+            >
+              <div className="flex justify-start space-x-3">
+                {props.leftFooterElement}
+              </div>
+              <div className="flex justify-end space-x-3">
+                <Button
+                  title="Close"
+                  onClick={() => {
+                    props.onClose();
+                  }}
+                  buttonStyle={ButtonStyleType.NORMAL}
+                />
+                {props.onSubmit && (
+                  <Button
+                    title={props.submitButtonText || "Save"}
+                    disabled={props.submitButtonDisabled}
+                    onClick={() => {
+                      props.onSubmit!();
+                    }}
+                    buttonStyle={ButtonStyleType.PRIMARY}
+                  />
+                )}
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
   );
+  if (!portalTarget) {
+    return sideOver;
+  }
+  return createPortal(sideOver, portalTarget);
 };
 export default SideOver;

package/UI/Components/TelemetryViewer/components/TelemetryTimeRangePicker.tsx CHANGED Viewed

@@ -1,227 +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 TelemetryTimeRangePickerProps {
   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 TIME_RANGE_DROPDOWN_WIDTH_IN_PX: number = 288;
-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 TELEMETRY_TIME_RANGE_PICKER_TEST_ID_PREFIX: string =
+  "telemetry-time-range-picker";
 const TelemetryTimeRangePicker: FunctionComponent<
   TelemetryTimeRangePickerProps
 > = (props: TelemetryTimeRangePickerProps): 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: TIME_RANGE_DROPDOWN_WIDTH_IN_PX,
-    },
-  );
-  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);
-    };
-  }, []);
-  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="telemetry-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="telemetry-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`}
-        >
-          <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>
-                );
-              },
-            )}
-            <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>
-          {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={TELEMETRY_TIME_RANGE_PICKER_TEST_ID_PREFIX}
+      dropdownWidthInPx={TIME_RANGE_DROPDOWN_WIDTH_IN_PX}
+    />
   );
 };