@oneuptime/common 12.0.7 → 12.0.9

package/UI/Components/Calendar/Calendar.css

@@ -259,3 +259,46 @@
   color: #9ca3af;
   font-size: 0.875rem;
 }
+
+/* ---------- Background events (uncovered regions) ----------
+   Painted behind the grid to make ABSENCE visible. An on-call schedule with
+   nobody on call used to render as plain whitespace, which reads exactly like a
+   grid that failed to load; the hatch says "we computed this, and it is empty".
+   Kept deliberately low-contrast so real event blocks stay dominant. */
+.oneuptime-calendar .rbc-day-slot .rbc-background-event,
+.oneuptime-calendar .rbc-background-event {
+  background-color: rgba(251, 191, 36, 0.09); /* amber-400 @ 9% */
+  background-image: repeating-linear-gradient(
+    45deg,
+    rgba(217, 119, 6, 0.16) 0,
+    rgba(217, 119, 6, 0.16) 1px,
+    transparent 1px,
+    transparent 7px
+  );
+  border: none;
+  border-left: 2px solid rgba(217, 119, 6, 0.35); /* amber-600 */
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+  pointer-events: none;
+  opacity: 1;
+}
+
+.oneuptime-calendar .rbc-day-slot .rbc-background-event:hover {
+  filter: none;
+  box-shadow: none;
+}
+
+/* Legend swatch that names the hatched bands. Kept in this file so the swatch
+   and the band it describes can never drift apart. */
+.oneuptime-calendar-gap-swatch {
+  background-color: rgba(251, 191, 36, 0.25);
+  background-image: repeating-linear-gradient(
+    45deg,
+    rgba(217, 119, 6, 0.55) 0,
+    rgba(217, 119, 6, 0.55) 1px,
+    transparent 1px,
+    transparent 4px
+  );
+  border: 1px solid rgba(217, 119, 6, 0.4);
+}

package/UI/Components/Calendar/Calendar.tsx

@@ -20,6 +20,13 @@ const localizer: DateLocalizer = momentLocalizer(moment);
 export interface ComponentProps {
   id?: string | undefined;
   events: Array<CalendarEvent>;
+  /*
+   * Events painted BEHIND the grid rather than as blocks in it. Used to shade
+   * regions that are meaningful by their absence — an on-call schedule's
+   * uncovered hours, for example, which would otherwise be indistinguishable
+   * from a grid that simply failed to load.
+   */
+  backgroundEvents?: Array<CalendarEvent> | undefined;
   defaultCalendarView?: DefaultCalendarView;
   /*
    * Which date the calendar initially opens on. Defaults to "now". Callers that
@@ -81,6 +88,7 @@ const CalendarElement: FunctionComponent<ComponentProps> = (
       <Calendar
         defaultDate={defaultDate}
         events={props.events}
+        backgroundEvents={props.backgroundEvents || []}
         localizer={localizer}
         showMultiDayTimes
         views={CALENDAR_VIEWS}

package/UI/Components/Card/Card.tsx

@@ -17,8 +17,8 @@ export interface CardButtonSchema {
 }
 
 export interface ComponentProps {
-  title?: string | ReactElement;
-  description?: string | ReactElement;
+  title?: string | ReactElement | undefined;
+  description?: string | ReactElement | undefined;
   buttons?: undefined | Array<CardButtonSchema | ReactElement>;
   children?: undefined | Array<ReactElement> | ReactElement;
   className?: string | undefined;

package/UI/Components/Checkbox/Checkbox.tsx

@@ -19,6 +19,20 @@ export interface CategoryProps {
   autoFocus?: boolean | undefined;
   className?: string | undefined;
   isIndeterminate?: boolean | undefined;
+  /*
+   * The accessible name, for a checkbox that has no visible `title` next to it.
+   * A bare box in a table cell is announced as "checkbox" and nothing else, so a
+   * screen reader user hears the same word once per row with no way to tell which
+   * row they are on - and a test cannot address one row's box either.
+   */
+  ariaLabel?: string | undefined;
+  /*
+   * The hover text on the input itself - NOT `title` above, which is the visible
+   * label rendered beside the box. Its most useful job is on a DISABLED box,
+   * where it is the only place the reason can live: a box that cannot be ticked
+   * and does not say why reads as broken rather than as deliberate.
+   */
+  hoverText?: string | undefined;
 }
 
 const CheckboxElement: FunctionComponent<CategoryProps> = (
@@ -67,6 +81,8 @@ const CheckboxElement: FunctionComponent<CategoryProps> = (
             onFocus={props.onFocus}
             onBlur={props.onBlur}
             data-testid={props.dataTestId}
+            aria-label={props.ariaLabel}
+            title={props.hoverText}
             aria-describedby={
               props.description ? "checkbox-description" : undefined
             }

package/UI/Components/Date/CustomTimeRangeModal.tsx

@@ -0,0 +1,278 @@
+import React, { FunctionComponent, ReactElement, useId, useState } from "react";
+import InBetween from "../../../Types/BaseDatabase/InBetween";
+import OneUptimeDate from "../../../Types/Date";
+import IconProp from "../../../Types/Icon/IconProp";
+import Icon from "../Icon/Icon";
+import Input, { InputType } from "../Input/Input";
+import Modal, { ModalWidth } from "../Modal/Modal";
+
+export interface ComponentProps {
+  /*
+   * Window the editor opens on. Callers seed this with the range currently in
+   * effect so switching to "custom" starts from what the user is looking at
+   * rather than from an empty form.
+   */
+  initialValue?: InBetween<Date> | undefined;
+  title?: string | undefined;
+  description?: string | undefined;
+  onClose: () => void;
+  onSave: (value: InBetween<Date>) => void;
+}
+
+export interface QuickFillOption {
+  label: string;
+  minutes: number;
+}
+
+/*
+ * Shortcuts that fill both ends of the form at once, anchored to now. They are
+ * a starting point for a hand-tuned window — picking one does not apply the
+ * range, so the user can still nudge either end before hitting Apply.
+ */
+export const QUICK_FILL_OPTIONS: Array<QuickFillOption> = [
+  { label: "Last 1 hour", minutes: 60 },
+  { label: "Last 6 hours", minutes: 60 * 6 },
+  { label: "Last 12 hours", minutes: 60 * 12 },
+  { label: "Last 24 hours", minutes: 60 * 24 },
+  { label: "Last 7 days", minutes: 60 * 24 * 7 },
+  { label: "Last 30 days", minutes: 60 * 24 * 30 },
+];
+
+export type CustomTimeRangeValidationError = string;
+
+/*
+ * Kept pure and exported so the rules the Apply button is gated on can be
+ * checked directly, and so callers share one definition of "valid window".
+ */
+export function getCustomTimeRangeError(
+  startDate: Date | null,
+  endDate: Date | null,
+): CustomTimeRangeValidationError {
+  if (!startDate) {
+    return "Pick a start date and time.";
+  }
+
+  if (!endDate) {
+    return "Pick an end date and time.";
+  }
+
+  if (!OneUptimeDate.isAfter(endDate, startDate)) {
+    return "The end must be after the start. Adjust either end of the range.";
+  }
+
+  return "";
+}
+
+const CustomTimeRangeModal: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    props.initialValue?.startValue || null,
+  );
+  const [endDate, setEndDate] = useState<Date | null>(
+    props.initialValue?.endValue || null,
+  );
+  // Two pickers can sit on one page, so the field ids cannot be constants.
+  const startFieldId: string = useId();
+  const endFieldId: string = useId();
+
+  const error: CustomTimeRangeValidationError = getCustomTimeRangeError(
+    startDate,
+    endDate,
+  );
+  const isValid: boolean = error === "";
+
+  const durationText: string = isValid
+    ? OneUptimeDate.secondsToFormattedFriendlyTimeString(
+        OneUptimeDate.getDifferenceInSeconds(endDate!, startDate!),
+      ).trim()
+    : "";
+
+  const formatDateTime: (date: Date) => string = (date: Date): string => {
+    return OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+      date,
+      false,
+      true,
+    );
+  };
+
+  const onQuickFill: (minutes: number) => void = (minutes: number): void => {
+    const end: Date = OneUptimeDate.resetSecondsAndMilliseconds(
+      OneUptimeDate.getCurrentDate(),
+    );
+    setStartDate(OneUptimeDate.addRemoveMinutes(end, -minutes));
+    setEndDate(end);
+  };
+
+  /*
+   * `Input` reports a cleared date field as an empty string. Anything else is
+   * an ISO string the field has already resolved in the user's timezone.
+   */
+  const toDate: (changedValue: string | Date) => Date | null = (
+    changedValue: string | Date,
+  ): Date | null => {
+    if (!changedValue) {
+      return null;
+    }
+
+    return OneUptimeDate.fromString(changedValue as string);
+  };
+
+  const isQuickFillActive: (minutes: number) => boolean = (
+    minutes: number,
+  ): boolean => {
+    if (!startDate || !endDate) {
+      return false;
+    }
+
+    return OneUptimeDate.getDifferenceInMinutes(startDate, endDate) === minutes;
+  };
+
+  return (
+    <Modal
+      title={props.title || "Custom Time Range"}
+      description={
+        props.description ||
+        "Choose the exact start and end date & time of the data you want to see."
+      }
+      modalWidth={ModalWidth.Medium}
+      submitButtonText="Apply"
+      closeButtonText="Cancel"
+      disableSubmitButton={!isValid}
+      onClose={props.onClose}
+      onSubmit={() => {
+        if (!isValid) {
+          return;
+        }
+
+        props.onSave(new InBetween<Date>(startDate!, endDate!));
+      }}
+    >
+      <div data-testid="custom-time-range-modal" className="space-y-5">
+        <div>
+          <div className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+            Quick fill
+          </div>
+          <div className="mt-2 flex flex-wrap gap-2">
+            {QUICK_FILL_OPTIONS.map((option: QuickFillOption) => {
+              const isActive: boolean = isQuickFillActive(option.minutes);
+
+              return (
+                <button
+                  key={option.label}
+                  type="button"
+                  aria-pressed={isActive}
+                  onClick={() => {
+                    onQuickFill(option.minutes);
+                  }}
+                  className={`rounded-full border px-3 py-1 text-xs font-medium transition-colors ${
+                    isActive
+                      ? "border-indigo-200 bg-indigo-50 text-indigo-700"
+                      : "border-gray-200 bg-white text-gray-600 hover:border-gray-300 hover:bg-gray-50"
+                  }`}
+                >
+                  {option.label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div className="rounded-lg border border-gray-200 bg-gray-50/60 p-3">
+            <label
+              htmlFor={startFieldId}
+              className="flex items-center gap-1.5 text-sm font-medium text-gray-900"
+            >
+              <Icon
+                icon={IconProp.Calendar}
+                className="h-4 w-4 text-gray-400"
+              />
+              From
+            </label>
+            <Input
+              id={startFieldId}
+              dataTestId="custom-time-range-start"
+              type={InputType.DATETIME_LOCAL}
+              showSecondsForDateTime={true}
+              placeholder="Start date & time"
+              value={startDate || ""}
+              onChange={(changedValue: string | Date) => {
+                setStartDate(toDate(changedValue));
+              }}
+            />
+          </div>
+
+          <div className="rounded-lg border border-gray-200 bg-gray-50/60 p-3">
+            <label
+              htmlFor={endFieldId}
+              className="flex items-center gap-1.5 text-sm font-medium text-gray-900"
+            >
+              <Icon
+                icon={IconProp.Calendar}
+                className="h-4 w-4 text-gray-400"
+              />
+              To
+            </label>
+            <Input
+              id={endFieldId}
+              dataTestId="custom-time-range-end"
+              type={InputType.DATETIME_LOCAL}
+              showSecondsForDateTime={true}
+              placeholder="End date & time"
+              value={endDate || ""}
+              onChange={(changedValue: string | Date) => {
+                setEndDate(toDate(changedValue));
+              }}
+            />
+          </div>
+        </div>
+
+        {isValid ? (
+          <div
+            data-testid="custom-time-range-summary"
+            className="rounded-lg border border-gray-200 bg-white p-3"
+          >
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-gray-500">From</span>
+              <span className="font-medium text-gray-900">
+                {formatDateTime(startDate!)}
+              </span>
+            </div>
+            <div className="mt-2 flex items-center justify-between text-sm">
+              <span className="text-gray-500">To</span>
+              <span className="font-medium text-gray-900">
+                {formatDateTime(endDate!)}
+              </span>
+            </div>
+            <div className="mt-2 flex items-center justify-between border-t border-gray-100 pt-2 text-sm">
+              <span className="flex items-center gap-1.5 text-gray-500">
+                <Icon icon={IconProp.Clock} className="h-3.5 w-3.5" />
+                Duration
+              </span>
+              <span className="font-medium text-gray-900">{durationText}</span>
+            </div>
+          </div>
+        ) : (
+          <div
+            data-testid="custom-time-range-error"
+            role="alert"
+            className="flex items-start gap-2 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700"
+          >
+            <Icon
+              icon={IconProp.ErrorSolid}
+              className="mt-0.5 h-4 w-4 shrink-0 text-red-500"
+            />
+            <span>{error}</span>
+          </div>
+        )}
+
+        <div className="text-xs text-gray-400">
+          Times are shown in {OneUptimeDate.getCurrentTimezoneString()}.
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default CustomTimeRangeModal;

package/UI/Components/Date/TimeRangePickerDropdown.tsx

@@ -0,0 +1,250 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import InBetween from "../../../Types/BaseDatabase/InBetween";
+import IconProp from "../../../Types/Icon/IconProp";
+import RangeStartAndEndDateTime, {
+  RangeStartAndEndDateTimeUtil,
+} from "../../../Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "../../../Types/Time/TimeRange";
+import {
+  DropdownHorizontalAlignment,
+  getDropdownAlignmentClassName,
+  useDropdownHorizontalAlignment,
+} from "../../Utils/DropdownAlignment";
+import Icon from "../Icon/Icon";
+import CustomTimeRangeModal from "./CustomTimeRangeModal";
+
+export interface TimeRangePickerPresetOption {
+  range: TimeRange;
+  label: string;
+}
+
+export interface ComponentProps {
+  value: RangeStartAndEndDateTime;
+  onChange: (value: RangeStartAndEndDateTime) => void;
+  /*
+   * Prefix for the trigger and panel test ids, so each surface embedding this
+   * picker keeps the selector its own tests were written against.
+   */
+  dataTestIdPrefix: string;
+  dropdownWidthInPx: number;
+}
+
+export const CUSTOM_RANGE_OPTION_LABEL: string = "Custom Range...";
+
+// Preset options to show in the dropdown, ordered shortest window first.
+export const TIME_RANGE_PRESET_OPTIONS: Array<TimeRangePickerPresetOption> = [
+  { 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}`;
+}
+
+export function getTimeRangeButtonLabel(
+  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: TimeRangePickerPresetOption | undefined =
+    TIME_RANGE_PRESET_OPTIONS.find((opt: TimeRangePickerPresetOption) => {
+      return opt.range === value.range;
+    });
+  return preset ? preset.label : value.range;
+}
+
+const TimeRangePickerDropdown: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  /*
+   * The custom window is edited in a modal rather than inline in this panel.
+   * Two `datetime-local` fields never fitted the 288px dropdown, and the native
+   * calendar those fields open renders outside this container — so the
+   * click-outside handler below tore the panel down the moment a date was
+   * clicked, which is what made "Custom Range..." look broken.
+   */
+  const [customSeedValue, setCustomSeedValue] =
+    useState<InBetween<Date> | null>(null);
+  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: props.dropdownWidthInPx,
+    },
+  );
+
+  // 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);
+    };
+  }, []);
+
+  const handlePresetSelect: (range: TimeRange) => void = useCallback(
+    (range: TimeRange): void => {
+      props.onChange({ range });
+      setIsOpen(false);
+    },
+    [props],
+  );
+
+  const openCustomModal: () => void = useCallback((): void => {
+    /*
+     * Seed the editor with the window currently on screen — the custom range
+     * if one is already applied, otherwise the absolute bounds of the selected
+     * preset, so the user edits what they are looking at.
+     */
+    setCustomSeedValue(
+      props.value.range === TimeRange.CUSTOM && props.value.startAndEndDate
+        ? props.value.startAndEndDate
+        : RangeStartAndEndDateTimeUtil.getStartAndEndDate(props.value),
+    );
+    setIsOpen(false);
+  }, [props.value]);
+
+  const buttonLabel: string = getTimeRangeButtonLabel(props.value);
+
+  return (
+    <div ref={containerRef} className="relative">
+      <button
+        ref={buttonRef}
+        type="button"
+        data-testid={`${props.dataTestIdPrefix}-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={`${props.dataTestIdPrefix}-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">
+            {TIME_RANGE_PRESET_OPTIONS.map(
+              (option: TimeRangePickerPresetOption) => {
+                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 — opens the editor in a modal */}
+            <button
+              type="button"
+              data-testid={`${props.dataTestIdPrefix}-custom-option`}
+              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={openCustomModal}
+            >
+              {CUSTOM_RANGE_OPTION_LABEL}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {customSeedValue && (
+        <CustomTimeRangeModal
+          initialValue={customSeedValue}
+          onClose={() => {
+            setCustomSeedValue(null);
+          }}
+          onSave={(startAndEndDate: InBetween<Date>) => {
+            setCustomSeedValue(null);
+            props.onChange({
+              range: TimeRange.CUSTOM,
+              startAndEndDate: startAndEndDate,
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TimeRangePickerDropdown;