@oneuptime/common 12.0.7 → 12.0.9

package/UI/Components/Table/TableBody.tsx

@@ -21,6 +21,15 @@ export interface ComponentProps<T extends GenericObject> {
   onItemDeselected?: undefined | ((item: T) => void);
   selectedItems: Array<T>;
   matchBulkSelectedItemByField: keyof T | undefined; // which field to use to match selected items. For exmaple this could be '_id'
+  /*
+   * Which rows may be ticked at all. Absent means every row, so a table that
+   * does not care is unaffected. See TableRow.isItemSelectable.
+   */
+  isItemSelectable?: ((item: T) => boolean) | undefined;
+  /** The accessible name for a row's checkbox: "Select {this}". */
+  bulkItemToString?: ((item: T) => string) | undefined;
+  /** Why a locked row is locked, in the caller's own words. */
+  itemNotSelectableReason?: ((item: T) => string) | undefined;
 
   // responsive
   isMobile?: boolean;
@@ -35,6 +44,48 @@ const TableBody: TableBodyFunction = <T extends GenericObject>(
 ): ReactElement => {
   type GetBodyFunction = (provided?: DroppableProvided) => ReactElement;
 
+  /*
+   * Everything about ONE row's checkbox, computed once and spread into both the
+   * desktop and the mobile TableRow. The selected-ness test used to be written
+   * out twice, identically, a hundred lines apart; adding three more selection
+   * props to both copies is how that kind of duplication turns into a row that
+   * is locked at one breakpoint and not the other.
+   */
+  type SelectionPropsFunction = (item: T) => {
+    isItemSelected: boolean;
+    isItemSelectable: boolean;
+    itemSelectLabel: string | undefined;
+    itemNotSelectableReason: string | undefined;
+  };
+
+  const getSelectionProps: SelectionPropsFunction = (item: T) => {
+    const matchBy: keyof T | undefined = props.matchBulkSelectedItemByField;
+
+    const isItemSelected: boolean = Boolean(
+      matchBy !== undefined &&
+        props.selectedItems?.some((selectedItem: T) => {
+          return (
+            selectedItem[matchBy]?.toString() === item[matchBy]?.toString()
+          );
+        }),
+    );
+
+    const label: string | undefined = props.bulkItemToString
+      ? `Select ${props.bulkItemToString(item)}`
+      : undefined;
+
+    return {
+      isItemSelected: isItemSelected,
+      isItemSelectable: props.isItemSelectable
+        ? props.isItemSelectable(item)
+        : true,
+      itemSelectLabel: label,
+      itemNotSelectableReason: props.itemNotSelectableReason
+        ? props.itemNotSelectableReason(item)
+        : undefined,
+    };
+  };
+
   const getBody: GetBodyFunction = (
     provided?: DroppableProvided,
   ): ReactElement => {
@@ -54,20 +105,7 @@ const TableBody: TableBodyFunction = <T extends GenericObject>(
                   isBulkActionsEnabled={props.isBulkActionsEnabled}
                   onItemSelected={props.onItemSelected}
                   onItemDeselected={props.onItemDeselected}
-                  isItemSelected={
-                    props.selectedItems?.filter((selectedItem: T) => {
-                      if (props.matchBulkSelectedItemByField === undefined) {
-                        return false;
-                      }
-
-                      return (
-                        selectedItem[
-                          props.matchBulkSelectedItemByField
-                        ]?.toString() ===
-                        item[props.matchBulkSelectedItemByField]?.toString()
-                      );
-                    }).length > 0 || false
-                  }
+                  {...getSelectionProps(item)}
                   dragAndDropScope={props.dragAndDropScope}
                   enableDragAndDrop={props.enableDragAndDrop}
                   key={i}
@@ -100,20 +138,7 @@ const TableBody: TableBodyFunction = <T extends GenericObject>(
                 isBulkActionsEnabled={props.isBulkActionsEnabled}
                 onItemSelected={props.onItemSelected}
                 onItemDeselected={props.onItemDeselected}
-                isItemSelected={
-                  props.selectedItems?.filter((selectedItem: T) => {
-                    if (props.matchBulkSelectedItemByField === undefined) {
-                      return false;
-                    }
-
-                    return (
-                      selectedItem[
-                        props.matchBulkSelectedItemByField
-                      ]?.toString() ===
-                      item[props.matchBulkSelectedItemByField]?.toString()
-                    );
-                  }).length > 0 || false
-                }
+                {...getSelectionProps(item)}
                 dragAndDropScope={props.dragAndDropScope}
                 enableDragAndDrop={props.enableDragAndDrop}
                 key={i}

package/UI/Components/Table/TableHeader.tsx

@@ -21,6 +21,8 @@ export interface ComponentProps<T extends GenericObject> {
   onAllItemsDeselected: undefined | (() => void);
   hasTableItems: undefined | boolean;
   isAllItemsOnThePageSelected: undefined | boolean;
+  /** Some but not all of this page is selected - drives the indeterminate box. */
+  isSomeItemsOnThePageSelected?: undefined | boolean;
   sortBy: keyof T | null;
   sortOrder: SortOrder;
 }
@@ -72,6 +74,17 @@ const TableHeader: TableHeaderFunction = <T extends GenericObject>(
               <CheckboxElement
                 disabled={!props.hasTableItems}
                 value={selectBulkSelectCheckbox}
+                ariaLabel={translateString("Select all items")}
+                /*
+                 * Half-filled when only part of the page is selected. Without
+                 * it, a page where some rows cannot be selected at all can
+                 * never reach "all selected", so the box sits permanently
+                 * empty and reads as "your selection was lost".
+                 */
+                isIndeterminate={Boolean(
+                  props.isSomeItemsOnThePageSelected &&
+                    !selectBulkSelectCheckbox,
+                )}
                 onChange={(value: boolean) => {
                   if (value) {
                     if (props.onAllItemsOnThePageSelected) {

package/UI/Components/Table/TableRow.tsx

@@ -29,6 +29,24 @@ export interface ComponentProps<T extends GenericObject> {
   onItemSelected?: undefined | ((item: T) => void);
   onItemDeselected?: undefined | ((item: T) => void);
   isItemSelected?: boolean | undefined;
+  /*
+   * FALSE locks this row's checkbox. Defaulted true by the caller, so a table
+   * that says nothing about selectability keeps behaving exactly as before.
+   *
+   * A locked box is better than an unlocked one that fails afterwards whenever
+   * the reason is knowable up front: the action a bulk selection leads to is
+   * usually irreversible from the user's side (mail sent, rows deleted), and
+   * "you cannot pick this, here is why" costs one hover where "you picked it and
+   * nothing happened" costs a support conversation.
+   */
+  isItemSelectable?: boolean | undefined;
+  /*
+   * The accessible name for this row's checkbox - "Select Ada Lovelace" rather
+   * than an unnamed box repeated once per row.
+   */
+  itemSelectLabel?: string | undefined;
+  /** Hover text for a row whose box is locked. Says why, in the caller's words. */
+  itemNotSelectableReason?: string | undefined;
 
   // responsive
   isMobile?: boolean;
@@ -84,6 +102,44 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
     },
   );
 
+  /*
+   * Absent means selectable, so every existing caller is unaffected. Only an
+   * explicit false locks the box.
+   */
+  const isItemSelectable: boolean = props.isItemSelectable !== false;
+
+  /*
+   * The bulk-select box, identical on the mobile card and the desktop row. It is
+   * one function rather than two copies because the two used to drift: the
+   * mobile copy still has no `disabled` handling of its own, and a locked row
+   * that is only locked at one breakpoint is not locked.
+   */
+  const getBulkSelectCheckbox: () => ReactElement = (): ReactElement => {
+    return (
+      <CheckboxElement
+        value={Boolean(props.isItemSelected)}
+        disabled={!isItemSelectable}
+        ariaLabel={props.itemSelectLabel}
+        hoverText={
+          isItemSelectable
+            ? props.itemSelectLabel
+            : props.itemNotSelectableReason || props.itemSelectLabel
+        }
+        onChange={(value: boolean) => {
+          if (!isItemSelectable) {
+            return;
+          }
+
+          if (value) {
+            props.onItemSelected?.(props.item);
+          } else {
+            props.onItemDeselected?.(props.item);
+          }
+        }}
+      />
+    );
+  };
+
   type GetRowFunction = (provided?: DraggableProvided) => ReactElement;
 
   const getRow: GetRowFunction = (
@@ -113,18 +169,7 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
             )}
 
             {props.isBulkActionsEnabled ? (
-              <div className="mb-3">
-                <CheckboxElement
-                  value={Boolean(props.isItemSelected)}
-                  onChange={(value: boolean) => {
-                    if (value) {
-                      props.onItemSelected?.(props.item);
-                    } else {
-                      props.onItemDeselected?.(props.item);
-                    }
-                  }}
-                />
-              </div>
+              <div className="mb-3">{getBulkSelectCheckbox()}</div>
             ) : (
               <></>
             )}
@@ -329,20 +374,7 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
               className="w-10 py-3.5  align-top"
               {...provided?.dragHandleProps}
             >
-              <div className="ml-5">
-                <CheckboxElement
-                  value={props.isItemSelected}
-                  onChange={(value: boolean) => {
-                    if (value) {
-                      if (props.onItemSelected) {
-                        props.onItemSelected(props.item);
-                      }
-                    } else if (props.onItemDeselected) {
-                      props.onItemDeselected(props.item);
-                    }
-                  }}
-                />
-              </div>
+              <div className="ml-5">{getBulkSelectCheckbox()}</div>
             </td>
           )}
           {props.columns &&

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

@@ -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}
+    />
   );
 };