@oneuptime/common 11.7.3 → 12.0.0

package/UI/Components/Forms/Fields/IconPicker.tsx

@@ -1,4 +1,7 @@
-import useComponentOutsideClick from "../../../Types/UseComponentOutsideClick";
+import useAnchoredFieldPopup, {
+  AnchoredFieldPopup,
+} from "../../../Types/UseAnchoredFieldPopup";
+import DROPDOWN_MENU_Z_INDEX from "../../Dropdown/DropdownMenuZIndex";
 import Icon from "../../Icon/Icon";
 import Input, { InputType } from "../../Input/Input";
 import IconProp from "../../../../Types/Icon/IconProp";
@@ -8,6 +11,10 @@ import React, {
   useEffect,
   useState,
 } from "react";
+import { createPortal } from "react-dom";
+
+const ICON_PICKER_POPUP_WIDTH_PX: number = 320;
+const ICON_PICKER_POPUP_MAX_HEIGHT_PX: number = 400;
 
 export interface ComponentProps {
   onChange: (value: IconProp | null) => void;
@@ -30,8 +37,18 @@ const IconPicker: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   const [selectedIcon, setSelectedIcon] = useState<IconProp | null>(null);
   const [searchQuery, setSearchQuery] = useState<string>("");
-  const { ref, isComponentVisible, setIsComponentVisible } =
-    useComponentOutsideClick(false);
+  const {
+    anchorRef,
+    popupRef,
+    isPopupOpen,
+    popupPosition,
+    portalTarget,
+    closePopup,
+    togglePopup,
+  }: AnchoredFieldPopup = useAnchoredFieldPopup({
+    popupMaxHeight: ICON_PICKER_POPUP_MAX_HEIGHT_PX,
+    popupWidth: ICON_PICKER_POPUP_WIDTH_PX,
+  });
 
   const [isInitialValuesInitialized, setIsInitialValuesInitialized] =
     useState<boolean>(false);
@@ -48,7 +65,7 @@ const IconPicker: FunctionComponent<ComponentProps> = (
   const handleChange: HandleChangeFunction = (icon: IconProp | null): void => {
     setSelectedIcon(icon);
     props.onChange(icon);
-    setIsComponentVisible(false);
+    closePopup(true);
   };
 
   // Get all icons from IconProp enum
@@ -61,11 +78,14 @@ const IconPicker: FunctionComponent<ComponentProps> = (
 
   return (
     <div>
-      <div className="flex block w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
+      <div
+        ref={anchorRef}
+        className="flex block w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
+      >
         <div
           onClick={() => {
             if (!props.readOnly && !props.disabled) {
-              setIsComponentVisible(!isComponentVisible);
+              togglePopup();
             }
           }}
           className="flex items-center justify-center h-5 w-5 cursor-pointer"
@@ -80,7 +100,7 @@ const IconPicker: FunctionComponent<ComponentProps> = (
         <Input
           onClick={() => {
             if (!props.readOnly && !props.disabled) {
-              setIsComponentVisible(!isComponentVisible);
+              togglePopup();
             }
           }}
           disabled={props.disabled}
@@ -108,63 +128,72 @@ const IconPicker: FunctionComponent<ComponentProps> = (
             }}
           />
         )}
-        {isComponentVisible ? (
-          <div
-            ref={ref}
-            className="absolute z-50 mt-8 bg-white border border-gray-200 rounded-lg shadow-lg p-3"
-            style={{
-              width: "320px",
-              maxHeight: "400px",
-            }}
-          >
-            {/* Search input */}
-            <div className="mb-3">
-              <Input
-                type={InputType.TEXT}
-                placeholder="Search icons..."
-                value={searchQuery}
-                onChange={(value: string) => {
-                  setSearchQuery(value);
-                }}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
-              />
-            </div>
-
-            {/* Icons grid */}
+      </div>
+      {/*
+       * Portalled out of the modal body, which is a scroll container capped at
+       * calc(100vh - 3rem) and would otherwise clip the icon grid.
+       */}
+      {isPopupOpen && portalTarget
+        ? createPortal(
             <div
-              className="grid grid-cols-6 gap-2 overflow-y-auto"
-              style={{ maxHeight: "300px" }}
+              ref={popupRef}
+              data-testid="icon-picker-popup"
+              tabIndex={-1}
+              className="fixed flex flex-col overflow-hidden bg-white border border-gray-200 rounded-lg shadow-lg p-3"
+              style={{
+                bottom: popupPosition?.bottom,
+                left: popupPosition?.left ?? 0,
+                maxHeight: popupPosition?.maxHeight,
+                top: popupPosition?.top,
+                visibility: popupPosition ? "visible" : "hidden",
+                width: popupPosition?.width ?? ICON_PICKER_POPUP_WIDTH_PX,
+                zIndex: DROPDOWN_MENU_Z_INDEX,
+              }}
             >
-              {filteredIcons.map((icon: IconProp) => {
-                return (
-                  <div
-                    key={icon}
-                    onClick={() => {
-                      handleChange(icon);
-                    }}
-                    className={`flex items-center justify-center p-2 rounded cursor-pointer hover:bg-gray-100 ${
-                      selectedIcon === icon
-                        ? "bg-indigo-100 ring-2 ring-indigo-500"
-                        : ""
-                    }`}
-                    title={icon}
-                  >
-                    <Icon icon={icon} className="h-5 w-5 text-gray-600" />
-                  </div>
-                );
-              })}
-            </div>
+              {/* Search input */}
+              <div className="mb-3 flex-shrink-0">
+                <Input
+                  type={InputType.TEXT}
+                  placeholder="Search icons..."
+                  value={searchQuery}
+                  onChange={(value: string) => {
+                    setSearchQuery(value);
+                  }}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
+                />
+              </div>
 
-            {filteredIcons.length === 0 && (
-              <div className="text-center text-gray-500 py-4">
-                No icons found
+              {/* Icons grid */}
+              <div className="grid grid-cols-6 gap-2 min-h-0 flex-1 overflow-y-auto">
+                {filteredIcons.map((icon: IconProp) => {
+                  return (
+                    <div
+                      key={icon}
+                      onClick={() => {
+                        handleChange(icon);
+                      }}
+                      className={`flex items-center justify-center p-2 rounded cursor-pointer hover:bg-gray-100 ${
+                        selectedIcon === icon
+                          ? "bg-indigo-100 ring-2 ring-indigo-500"
+                          : ""
+                      }`}
+                      title={icon}
+                    >
+                      <Icon icon={icon} className="h-5 w-5 text-gray-600" />
+                    </div>
+                  );
+                })}
               </div>
-            )}
-          </div>
-        ) : (
-          <></>
-        )}
-      </div>
+
+              {filteredIcons.length === 0 && (
+                <div className="text-center text-gray-500 py-4">
+                  No icons found
+                </div>
+              )}
+            </div>,
+            portalTarget,
+          )
+        : null}
       {props.error && (
         <p data-testid="error-message" className="mt-1 text-sm text-red-400">
           {props.error}

package/UI/Components/Forms/Validation.ts

@@ -157,8 +157,13 @@ export default class Validation {
         }
       }
 
-      if (field.validation.maxValue) {
-        if (content > field.validation?.maxValue) {
+      /*
+       * `!== undefined`, not truthiness: a declared bound of 0 is a real
+       * bound (e.g. "not less than 0" on a milliseconds field), and the
+       * old falsy guard silently skipped it.
+       */
+      if (field.validation.maxValue !== undefined) {
+        if (content > field.validation.maxValue) {
           return translateValidationMessage(
             "{{field}} should not be more than {{maxValue}}.",
             {
@@ -169,8 +174,8 @@ export default class Validation {
         }
       }
 
-      if (field.validation.minValue) {
-        if (content < field.validation?.minValue) {
+      if (field.validation.minValue !== undefined) {
+        if (content < field.validation.minValue) {
           return translateValidationMessage(
             "{{field}} should not be less than {{minValue}}.",
             {

package/UI/Components/InfoCard/InfoCard.tsx

@@ -7,15 +7,72 @@ export interface ComponentProps {
   className?: string;
   textClassName?: string;
   onClick?: (() => void) | undefined;
+  /*
+   * Only meaningful alongside `onClick`: renders the card as a pressed toggle
+   * — outlined, and announced as such. Used by summary strips where clicking a
+   * tile narrows the table below it, so the tile has to show which subset the
+   * user is looking at.
+   *
+   * Leave it undefined on a card that navigates instead of toggling. Most
+   * clickable InfoCards in the product are one-way links, and announcing one
+   * as an unpressed toggle promises a state that activating it never produces.
+   */
+  isSelected?: boolean | undefined;
+  // Announced in place of the title when the card is clickable.
+  ariaLabel?: string | undefined;
 }
 
 const InfoCard: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const isClickable: boolean = Boolean(props.onClick);
+
+  /*
+   * A selected card swaps its border rather than adding one: Tailwind emits
+   * both border-color utilities at the same specificity, so stacking them
+   * leaves the winner up to stylesheet order.
+   */
+  const borderClassName: string =
+    isClickable && props.isSelected
+      ? "border-indigo-500 ring-1 ring-indigo-500"
+      : "border-gray-200";
+
   return (
     <div
       onClick={props.onClick}
-      className={`rounded-xl bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-200 p-5 ${props.onClick ? "cursor-pointer" : ""} ${props.className || ""}`}
+      /*
+       * Click handlers on a div are invisible to the keyboard and to screen
+       * readers. Everything below turns a clickable card into a real toggle
+       * button; a card with no handler is left as the plain container it is.
+       */
+      role={isClickable ? "button" : undefined}
+      tabIndex={isClickable ? 0 : undefined}
+      /*
+       * Gated on the prop being supplied, not merely on clickability: the
+       * cards that were already clickable before toggles existed (the Home
+       * overview stats, the Kubernetes and Proxmox summaries) all navigate,
+       * and `aria-pressed="false"` would announce each of them as a toggle
+       * that is currently off — a state activating it never reaches.
+       */
+      aria-pressed={
+        isClickable && props.isSelected !== undefined
+          ? Boolean(props.isSelected)
+          : undefined
+      }
+      aria-label={isClickable ? props.ariaLabel : undefined}
+      onKeyDown={
+        isClickable
+          ? (event: React.KeyboardEvent<HTMLDivElement>) => {
+              if (event.key !== "Enter" && event.key !== " ") {
+                return;
+              }
+              // Space scrolls the page unless the default is taken away.
+              event.preventDefault();
+              props.onClick?.();
+            }
+          : undefined
+      }
+      className={`rounded-xl bg-white border ${borderClassName} shadow-sm hover:shadow-md transition-shadow duration-200 p-5 ${isClickable ? "cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2" : ""} ${props.className || ""}`}
     >
       <div className="mb-2">
         <FieldLabelElement title={props.title} />

package/UI/Components/List/List.tsx

@@ -155,6 +155,7 @@ const List: ListFunction = <T extends GenericObject>(
                 currentPageNumber={props.currentPageNumber}
                 totalItemsCount={props.totalItemsCount}
                 hasMore={props.hasMore}
+                itemsOnCurrentPage={props.data.length}
                 itemsOnPage={props.itemsOnPage}
                 onNavigateToPage={props.onNavigateToPage}
                 isLoading={props.isLoading}

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

@@ -14,12 +14,20 @@ import InBetween from "../../../../Types/BaseDatabase/InBetween";
 import StartAndEndDate, {
   StartAndEndDateType,
 } from "../../Date/StartAndEndDate";
+import {
+  DropdownHorizontalAlignment,
+  getDropdownAlignmentClassName,
+  useDropdownHorizontalAlignment,
+} from "../../../Utils/DropdownAlignment";
 
 export interface LogTimeRangePickerProps {
   value: RangeStartAndEndDateTime;
   onChange: (value: RangeStartAndEndDateTime) => void;
 }
 
+// Matches the Tailwind `w-72` on the dropdown below (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" },
@@ -68,6 +76,20 @@ const LogTimeRangePicker: FunctionComponent<LogTimeRangePickerProps> = (
   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(() => {
@@ -120,7 +142,11 @@ const LogTimeRangePicker: FunctionComponent<LogTimeRangePickerProps> = (
   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"
@@ -139,7 +165,14 @@ const LogTimeRangePicker: FunctionComponent<LogTimeRangePickerProps> = (
       </button>
 
       {isOpen && (
-        <div className="absolute right-0 top-full z-50 mt-1 w-72 rounded-lg border border-gray-200 bg-white shadow-lg">
+        <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(

package/UI/Components/Modal/Modal.tsx

@@ -1,6 +1,6 @@
 import { ButtonStyleType } from "../Button/Button";
 import ButtonType from "../Button/ButtonTypes";
-import Icon, { IconType, SizeProp, ThickProp } from "../Icon/Icon";
+import Icon from "../Icon/Icon";
 import Loader, { LoaderType } from "../Loader/Loader";
 import ModalBody from "./ModalBody";
 import ModalFooter from "./ModalFooter";
@@ -35,8 +35,6 @@ export interface ComponentProps {
   disableSubmitButton?: undefined | boolean;
   error?: string | undefined;
   isBodyLoading?: boolean | undefined;
-  icon?: IconProp | undefined;
-  iconType?: IconType | undefined;
   modalWidth?: ModalWidth | undefined;
   rightElement?: ReactElement | undefined;
   closeButtonText?: string | undefined;
@@ -172,28 +170,6 @@ const Modal: FunctionComponent<ComponentProps> = (
     };
   }, []);
 
-  let iconBgColor: string = "bg-indigo-50";
-  let iconColor: string = "text-indigo-600";
-  let iconRingColor: string = "ring-indigo-100";
-
-  if (props.iconType === IconType.Info) {
-    iconBgColor = "bg-indigo-50";
-    iconColor = "text-indigo-600";
-    iconRingColor = "ring-indigo-100";
-  } else if (props.iconType === IconType.Warning) {
-    iconBgColor = "bg-yellow-50";
-    iconColor = "text-yellow-700";
-    iconRingColor = "ring-yellow-100";
-  } else if (props.iconType === IconType.Success) {
-    iconBgColor = "bg-green-50";
-    iconColor = "text-green-600";
-    iconRingColor = "ring-green-100";
-  } else if (props.iconType === IconType.Danger) {
-    iconBgColor = "bg-red-50";
-    iconColor = "text-red-600";
-    iconRingColor = "ring-red-100";
-  }
-
   let modalWidthClassName: string = "sm:max-w-lg md:max-w-lg";
 
   if (props.modalWidth === ModalWidth.Medium) {
@@ -224,46 +200,26 @@ const Modal: FunctionComponent<ComponentProps> = (
           >
             <div className="relative flex shrink-0 flex-col gap-4 rounded-t-2xl border-b border-gray-100 bg-white px-5 py-4 sm:flex-row sm:items-start sm:justify-between sm:gap-6 sm:rounded-t-xl sm:px-6">
               <div
-                className={`flex min-w-0 flex-1 items-start gap-3 ${
+                className={`min-w-0 flex-1 ${
                   props.onClose ? "pr-9 sm:pr-0" : ""
                 }`}
               >
-                {props.icon && (
-                  <div
-                    className={`flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg ${iconBgColor} ring-1 ring-inset ${iconRingColor}`}
-                    data-testid="icon"
+                <h3
+                  data-testid="modal-title"
+                  className="text-base font-semibold leading-6 tracking-tight text-gray-900"
+                  id={titleId}
+                >
+                  {translatedTitle}
+                </h3>
+                {translatedDescription && (
+                  <p
+                    id={descriptionId}
+                    data-testid="modal-description"
+                    className="mt-0.5 text-sm leading-5 text-gray-500"
                   >
-                    <Icon
-                      thick={ThickProp.Thick}
-                      type={
-                        props.iconType === undefined
-                          ? IconType.Info
-                          : props.iconType
-                      }
-                      className={`${iconColor} h-5 w-5`}
-                      icon={props.icon}
-                      size={SizeProp.Five}
-                    />
-                  </div>
+                    {translatedDescription}
+                  </p>
                 )}
-                <div className="min-w-0 flex-1">
-                  <h3
-                    data-testid="modal-title"
-                    className="text-base font-semibold leading-6 tracking-tight text-gray-900"
-                    id={titleId}
-                  >
-                    {translatedTitle}
-                  </h3>
-                  {translatedDescription && (
-                    <p
-                      id={descriptionId}
-                      data-testid="modal-description"
-                      className="mt-0.5 text-sm leading-5 text-gray-500"
-                    >
-                      {translatedDescription}
-                    </p>
-                  )}
-                </div>
               </div>
               {props.rightElement && (
                 <div

package/UI/Components/ModelFormModal/ModelFormModal.tsx

@@ -7,10 +7,8 @@ import ModelForm, {
   ComponentProps as ModelFormComponentProps,
 } from "../Forms/ModelForm";
 import FormValues from "../Forms/Types/FormValues";
-import { IconType } from "../Icon/Icon";
 import Modal, { ModalWidth } from "../Modal/Modal";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
-import IconProp from "../../../Types/Icon/IconProp";
 import { JSONObject } from "../../../Types/JSON";
 import ObjectID from "../../../Types/ObjectID";
 import React, { MutableRefObject, ReactElement, useRef, useState } from "react";
@@ -33,12 +31,6 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
     | ((item: TBaseModel, miscDataProps: JSONObject) => Promise<TBaseModel>)
     | undefined;
   footer?: ReactElement | undefined;
-  /*
-   * A header icon (rendered in a colored circle) to make the modal feel
-   * purpose-built. Forwarded to the underlying <Modal> via the props spread.
-   */
-  icon?: IconProp | undefined;
-  iconType?: IconType | undefined;
   formRef?: undefined | MutableRefObject<FormProps<FormValues<TBaseModel>>>;
 }