@oneuptime/common 12.0.12 → 12.0.14

package/UI/Components/Navbar/NavBar.tsx

@@ -65,6 +65,14 @@ export interface ComponentProps {
     description: string;
     link: URL;
   };
+  /*
+   * When true, the document-level Cmd/Ctrl+K shortcut that toggles the
+   * products menu is not registered — for apps where another surface (e.g. a
+   * command palette) owns that shortcut. The menu itself stays fully usable
+   * via its trigger button. Defaults to false: existing consumers keep the
+   * shortcut.
+   */
+  disableCommandKShortcut?: boolean | undefined;
   className?: string;
   // Legacy support for children-based usage
   children?: ReactElement | Array<ReactElement>;
@@ -165,6 +173,11 @@ const Navbar: FunctionComponent<ComponentProps> = (
 
   // Open/close the products menu with Cmd/Ctrl + K from anywhere.
   useEffect(() => {
+    if (props.disableCommandKShortcut) {
+      // Another surface (e.g. a command palette) owns Cmd/Ctrl+K.
+      return;
+    }
+
     const handleGlobalKeyDown: (event: KeyboardEvent) => void = (
       event: KeyboardEvent,
     ): void => {
@@ -180,7 +193,7 @@ const Navbar: FunctionComponent<ComponentProps> = (
     return () => {
       document.removeEventListener("keydown", handleGlobalKeyDown);
     };
-  }, []);
+  }, [props.disableCommandKShortcut]);
 
   // More menu open/close.
   const openMoreMenu: () => void = (): void => {

package/UI/Components/OrderedStatesList/OrderedStatesList.tsx

@@ -1,8 +1,8 @@
 import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
-import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import Icon, { SizeProp } from "../Icon/Icon";
 import Item from "./Item";
+import Skeleton from "../Skeleton/Skeleton";
 import GenericObject from "../../../Types/GenericObject";
 import IconProp from "../../../Types/Icon/IconProp";
 import React, { ReactElement } from "react";
@@ -33,11 +33,49 @@ type OrderedStatesListFunction = <T extends GenericObject>(
 const OrderedStatesList: OrderedStatesListFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
-  if (props.isLoading) {
-    return <ComponentLoader />;
+  /*
+   * A refetch with states already on screen keeps them visible and dims
+   * them; the skeleton stack is only for a load with nothing to show yet.
+   */
+  const isRefetchingWithData: boolean =
+    Boolean(props.isLoading) && props.data.length > 0;
+
+  if (props.isLoading && props.data.length === 0) {
+    /*
+     * Three card-shaped placeholders where the ordered state cards will
+     * land (matching Item's rounded bordered card), so the page keeps its
+     * shape instead of collapsing to a centered spinner.
+     */
+    return (
+      <div
+        data-testid="ordered-states-list-skeleton-loader"
+        role="status"
+        aria-live="polite"
+        className="m-32 text-center"
+      >
+        <span className="sr-only">Loading...</span>
+        {[0, 1, 2].map((index: number) => {
+          return (
+            <div key={index} className="w-fit m-auto">
+              <Skeleton className="h-32 w-64 rounded p-10" />
+              {index < 2 && (
+                <div className="items-center m-10">
+                  <Skeleton className="m-auto h-5 w-5" />
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
   }
 
-  if (props.error) {
+  /*
+   * Loading still wins over error and empty (same priority as before the
+   * skeletons): while a refetch is in flight the stale states render, never
+   * a stale error or a premature "no items".
+   */
+  if (!props.isLoading && props.error) {
     return (
       <ErrorMessage
         message={props.error}
@@ -82,7 +120,14 @@ const OrderedStatesList: OrderedStatesListFunction = <T extends GenericObject>(
   }
 
   return (
-    <div className="m-32 text-center">
+    <div
+      data-testid="ordered-states-list-content"
+      className={`m-32 text-center${
+        isRefetchingWithData
+          ? " opacity-60 pointer-events-none transition-opacity duration-150"
+          : " transition-opacity duration-150"
+      }`}
+    >
       {props.error && <p>{props.error}</p>}
       {!props.error &&
         props.data &&

package/UI/Components/SideMenu/CountModelSideMenuItem.tsx

@@ -7,7 +7,14 @@ import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/Database
 import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
 import IconProp from "../../../Types/Icon/IconProp";
 import Link from "../../../Types/Link";
-import React, { ReactElement, useEffect, useState, useCallback } from "react";
+import React, {
+  MutableRefObject,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+} from "react";
 import GlobalEvents from "../../Utils/GlobalEvents";
 
 export const REFRESH_SIDEBAR_COUNT_EVENT: string = "REFRESH_SIDEBAR_COUNTS";
@@ -70,7 +77,39 @@ const CountModelSideMenuItem: <TBaseModel extends BaseModel>(
       props.onCountFetchInit,
     ]);
 
+  /*
+   * Side menus rebuild `countQuery` / `requestOptions` as fresh object
+   * literals on every render, so their identity changes on every parent
+   * re-render (which happens on every in-section navigation). Guard the fetch
+   * with a value-level compare - the same JSON.stringify-in-a-ref pattern
+   * BaseModelTable uses for its `props.query` - so only a real change
+   * re-issues the count request. The global refresh event below still forces
+   * a refetch regardless of this guard.
+   */
+  const lastFetchedModelTypeRef: MutableRefObject<
+    { new (): TBaseModel } | undefined
+  > = useRef<{ new (): TBaseModel } | undefined>(undefined);
+  const lastFetchedQueryJsonRef: MutableRefObject<string | null> = useRef<
+    string | null
+  >(null);
+
   useEffect(() => {
+    const queryJson: string = JSON.stringify({
+      countQuery: props.countQuery || null,
+      requestOptions: props.requestOptions || null,
+    });
+
+    // only fetch if the query has changed by value (or on first mount).
+    if (
+      lastFetchedModelTypeRef.current === props.modelType &&
+      lastFetchedQueryJsonRef.current === queryJson
+    ) {
+      return;
+    }
+
+    lastFetchedModelTypeRef.current = props.modelType;
+    lastFetchedQueryJsonRef.current = queryJson;
+
     fetchCount().catch((err: Error) => {
       setError(API.getFriendlyMessage(err));
     });

package/UI/Components/SideOver/SideOver.tsx

@@ -80,6 +80,32 @@ const SideOver: FunctionComponent<ComponentProps> = (
   const titleId: string = useId();
   const descriptionId: string = useId();
 
+  /*
+   * The panel is mounted parked off the right edge and flipped into place one
+   * frame later so the browser has something to transition from — the same
+   * pattern Modal uses for its entrance.
+   */
+  const [hasEntered, setHasEntered] = useState<boolean>(false);
+
+  useEffect(() => {
+    const open: () => void = (): void => {
+      setHasEntered(true);
+    };
+
+    const frame: number = requestAnimationFrame(open);
+
+    /*
+     * A hidden or throttled tab never runs an animation frame; the timer
+     * skips the transition rather than leaving the panel offscreen.
+     */
+    const fallbackTimer: ReturnType<typeof setTimeout> = setTimeout(open, 80);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(fallbackTimer);
+    };
+  }, []);
+
   const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(
     getPortalTarget,
   );
@@ -148,7 +174,16 @@ const SideOver: FunctionComponent<ComponentProps> = (
         className="pointer-events-none fixed inset-0 flex justify-end"
         data-testid="side-over-layer"
       >
-        <div className={`pointer-events-auto w-full ${widthClass}`}>
+        {/*
+         * Settled state carries no transform class at all: a lingering
+         * translate would make the panel the containing block for
+         * position:fixed descendants (the Modal invariant).
+         */}
+        <div
+          className={`pointer-events-auto w-full ${widthClass} transition-transform duration-200 ease-out motion-reduce:transition-none ${
+            hasEntered ? "" : "translate-x-full"
+          }`}
+        >
           <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">
@@ -176,7 +211,7 @@ const SideOver: FunctionComponent<ComponentProps> = (
                     type="button"
                     title="Close panel"
                     data-testid="close-button"
-                    className="text-gray-400 hover:text-gray-500"
+                    className="rounded-md text-gray-400 transition-colors duration-150 ease-out hover:text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
                   >
                     <span className="sr-only">Close panel</span>
 

package/UI/Components/Skeleton/Skeleton.tsx

@@ -0,0 +1,53 @@
+import React, { FunctionComponent, ReactElement } from "react";
+
+/*
+ * Width variants for skeleton lines. Cycled by index (never Math.random) so
+ * the shimmer is stable across re-renders - random widths re-roll on every
+ * render, which reads as flicker - and so tests can assert exact widths.
+ */
+const WIDTH_VARIANTS: Array<string> = ["w-3/4", "w-1/2", "w-2/3"];
+
+export type GetSkeletonWidthClassFunction = (index: number) => string;
+
+export const getSkeletonWidthClass: GetSkeletonWidthClassFunction = (
+  index: number,
+): string => {
+  return WIDTH_VARIANTS[Math.abs(index) % WIDTH_VARIANTS.length] as string;
+};
+
+export interface ComponentProps {
+  className?: string | undefined;
+  /*
+   * When set, a deterministic width variant (w-3/4 / w-1/2 / w-2/3, cycling)
+   * is appended so a stack of lines looks like ragged text instead of a
+   * uniform block. Leave undefined when className already sizes the block.
+   */
+  widthVariantIndex?: number | undefined;
+  dataTestId?: string | undefined;
+}
+
+/*
+ * A single pulsing placeholder block. Purely decorative - the wrapper that
+ * composes skeletons into a loading state owns the role="status" / sr-only
+ * announcement, so each block hides itself from the accessibility tree.
+ */
+const Skeleton: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const widthClass: string =
+    props.widthVariantIndex === undefined
+      ? ""
+      : ` ${getSkeletonWidthClass(props.widthVariantIndex)}`;
+
+  return (
+    <div
+      data-testid={props.dataTestId || "skeleton"}
+      aria-hidden={true}
+      className={`animate-pulse rounded bg-gray-200${
+        props.className ? ` ${props.className}` : ""
+      }${widthClass}`}
+    ></div>
+  );
+};
+
+export default Skeleton;

package/UI/Components/Table/Table.tsx

@@ -7,7 +7,6 @@ import BulkUpdateForm, {
   BulkActionButtonSchema,
   BulkActionOnClickProps,
 } from "../BulkUpdate/BulkUpdateForm";
-import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import FilterViewer from "../Filters/FilterViewer";
 import Filter from "../Filters/Types/Filter";
@@ -15,6 +14,7 @@ import FilterData from "../Filters/Types/FilterData";
 import Pagination from "../Pagination/Pagination";
 import TableBody from "./TableBody";
 import TableHeader from "./TableHeader";
+import TableSkeletonRows from "./TableSkeletonRows";
 import Columns from "./Types/Columns";
 import SortOrder from "../../../Types/BaseDatabase/SortOrder";
 import GenericObject from "../../../Types/GenericObject";
@@ -211,22 +211,34 @@ const Table: TableFunction = <T extends GenericObject>(
     colspan = 1;
   }
 
+  /*
+   * A refetch with rows already on screen (pagination, sort, refresh - the
+   * parent never clears `data` while fetching) keeps those rows visible and
+   * dims them instead of tearing the layout down to placeholders. Skeletons
+   * are only for a load with nothing to show yet.
+   */
+  const isRefetchingWithData: boolean =
+    props.isLoading && props.data.length > 0;
+
   const getTablebody: GetReactElementFunction = (): ReactElement => {
-    if (props.isLoading) {
+    if (props.isLoading && props.data.length === 0) {
       return (
-        <tbody>
-          <tr>
-            <td colSpan={colspan}>
-              <div className="flex justify-center w-full">
-                <ComponentLoader />
-              </div>
-            </td>
-          </tr>
-        </tbody>
+        <TableSkeletonRows
+          columns={props.columns}
+          enableDragAndDrop={props.enableDragAndDrop}
+          isBulkActionsEnabled={isBulkActionsEnabled}
+          itemsOnPage={props.itemsOnPage}
+          isMobile={isMobile}
+        />
       );
     }
 
-    if (props.error) {
+    /*
+     * Loading still wins over error and empty (same priority as before the
+     * skeletons): while a refetch is in flight the stale rows render, never a
+     * stale error or a premature "no items".
+     */
+    if (!props.isLoading && props.error) {
       return (
         <tbody>
           <tr>
@@ -260,7 +272,7 @@ const Table: TableFunction = <T extends GenericObject>(
       );
     }
 
-    if (props.filterError) {
+    if (!props.isLoading && props.filterError) {
       return <></>;
     }
 
@@ -418,38 +430,56 @@ const Table: TableFunction = <T extends GenericObject>(
                   : "overflow-hidden border-t border-gray-200"
               }
             >
-              {isMobile ? (
-                // Mobile view: render as list
-                <div className="min-w-full divide-y divide-gray-200">
-                  {getTablebody()}
-                </div>
-              ) : (
-                // Desktop view: render as table
-                <table className="min-w-full divide-y divide-gray-200">
-                  <TableHeader
-                    id={`${props.id}-header`}
-                    columns={props.columns}
-                    onSortChanged={props.onSortChanged}
-                    enableDragAndDrop={props.enableDragAndDrop}
-                    sortBy={props.sortBy}
-                    sortOrder={props.sortOrder}
-                    isBulkActionsEnabled={isBulkActionsEnabled}
-                    onAllItemsDeselected={() => {
-                      setIsAllItemsSelected(false);
-                      props.onBulkClearAllItems?.();
-                    }}
-                    onAllItemsOnThePageSelected={() => {
-                      if (props.onBulkSelectItemsOnCurrentPage) {
-                        props.onBulkSelectItemsOnCurrentPage();
+              {/*
+               * Dims the stale rows (header included) while a refetch is in
+               * flight and blocks clicks on them - a sort or row action
+               * against data about to be replaced is a race. The wrapper
+               * sits OUTSIDE the <table> because a <div> cannot legally wrap
+               * a <tbody> inside one.
+               */}
+              <div
+                data-testid="table-content"
+                className={
+                  isRefetchingWithData
+                    ? "opacity-60 pointer-events-none transition-opacity duration-150"
+                    : "transition-opacity duration-150"
+                }
+              >
+                {isMobile ? (
+                  // Mobile view: render as list
+                  <div className="min-w-full divide-y divide-gray-200">
+                    {getTablebody()}
+                  </div>
+                ) : (
+                  // Desktop view: render as table
+                  <table className="min-w-full divide-y divide-gray-200">
+                    <TableHeader
+                      id={`${props.id}-header`}
+                      columns={props.columns}
+                      onSortChanged={props.onSortChanged}
+                      enableDragAndDrop={props.enableDragAndDrop}
+                      sortBy={props.sortBy}
+                      sortOrder={props.sortOrder}
+                      isBulkActionsEnabled={isBulkActionsEnabled}
+                      onAllItemsDeselected={() => {
+                        setIsAllItemsSelected(false);
+                        props.onBulkClearAllItems?.();
+                      }}
+                      onAllItemsOnThePageSelected={() => {
+                        if (props.onBulkSelectItemsOnCurrentPage) {
+                          props.onBulkSelectItemsOnCurrentPage();
+                        }
+                      }}
+                      isAllItemsOnThePageSelected={isAllItemsOnThePageSelected}
+                      isSomeItemsOnThePageSelected={
+                        isSomeItemsOnThePageSelected
                       }
-                    }}
-                    isAllItemsOnThePageSelected={isAllItemsOnThePageSelected}
-                    isSomeItemsOnThePageSelected={isSomeItemsOnThePageSelected}
-                    hasTableItems={selectableRowsOnThePage.length > 0}
-                  />
-                  {getTablebody()}
-                </table>
-              )}
+                      hasTableItems={selectableRowsOnThePage.length > 0}
+                    />
+                    {getTablebody()}
+                  </table>
+                )}
+              </div>
             </div>
           </div>
         </div>

package/UI/Components/Table/TableSkeletonRows.tsx

@@ -0,0 +1,141 @@
+import Skeleton from "../Skeleton/Skeleton";
+import Column from "./Types/Column";
+import Columns from "./Types/Columns";
+import GenericObject from "../../../Types/GenericObject";
+import React, { ReactElement } from "react";
+
+export interface ComponentProps<T extends GenericObject> {
+  columns: Columns<T>;
+  /*
+   * The same feature flags TableHeader renders leading cells for. The
+   * skeleton must mirror them exactly or its cells sit misaligned under the
+   * header while loading.
+   */
+  enableDragAndDrop?: undefined | boolean;
+  isBulkActionsEnabled?: undefined | boolean;
+  itemsOnPage: number;
+  /*
+   * Mobile renders card-shaped placeholders inside the table's mobile <div>
+   * wrapper - <tbody> markup is invalid there - and drops hideOnMobile
+   * columns, same as TableHeader and TableRow do.
+   */
+  isMobile: boolean;
+}
+
+type TableSkeletonRowsFunction = <T extends GenericObject>(
+  props: ComponentProps<T>,
+) => ReactElement;
+
+/*
+ * Layout-preserving placeholder rows for the table's first load: one pulsing
+ * cell per visible column (plus the drag-handle / bulk-select extras) so the
+ * page keeps the table's shape instead of collapsing to a centered spinner.
+ */
+const TableSkeletonRows: TableSkeletonRowsFunction = <T extends GenericObject>(
+  props: ComponentProps<T>,
+): ReactElement => {
+  // Enough rows to look like a page of data without painting offscreen ones.
+  const rowCount: number = Math.max(1, Math.min(props.itemsOnPage || 0, 10));
+  const rowIndexes: Array<number> = Array.from(Array(rowCount).keys());
+
+  // Same filter as TableHeader / TableRow so cell counts always agree.
+  const visibleColumns: Columns<T> = props.columns.filter(
+    (column: Column<T>) => {
+      return !(column.hideOnMobile && props.isMobile);
+    },
+  );
+
+  if (props.isMobile) {
+    return (
+      <div
+        data-testid="table-skeleton-loader"
+        role="status"
+        aria-live="polite"
+        className="divide-y divide-gray-200 bg-white"
+      >
+        <span className="sr-only">Loading...</span>
+        {rowIndexes.map((rowIndex: number) => {
+          return (
+            <div
+              key={rowIndex}
+              className="p-4 bg-white border-b border-gray-200"
+            >
+              <div className="space-y-3">
+                {visibleColumns.map(
+                  (_column: Column<T>, columnIndex: number) => {
+                    return (
+                      <div
+                        key={columnIndex}
+                        className="flex flex-col space-y-1"
+                      >
+                        <Skeleton className="h-3 w-24" />
+                        <Skeleton
+                          className="h-4"
+                          widthVariantIndex={rowIndex + columnIndex}
+                        />
+                      </div>
+                    );
+                  },
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <tbody
+      data-testid="table-skeleton-loader"
+      role="status"
+      aria-live="polite"
+      className="divide-y divide-gray-200 bg-white"
+    >
+      {rowIndexes.map((rowIndex: number) => {
+        return (
+          <tr key={rowIndex}>
+            {props.enableDragAndDrop && (
+              <td className="ml-5 py-4 w-10 align-top">
+                <Skeleton className="ml-6 h-5 w-5" />
+              </td>
+            )}
+            {props.isBulkActionsEnabled && (
+              <td className="w-10 py-3.5  align-top">
+                <div className="ml-5">
+                  <Skeleton className="h-4 w-4" />
+                </div>
+              </td>
+            )}
+            {visibleColumns.map((_column: Column<T>, columnIndex: number) => {
+              /*
+               * Cell classes copied from TableRow's real cells so the
+               * skeleton's rhythm and padding match the rows that replace it.
+               */
+              let className: string =
+                "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-500 sm:pl-6 align-top";
+              if (columnIndex === visibleColumns.length - 1) {
+                className =
+                  "whitespace-nowrap py-4 pl-4 pr-6 text-sm font-medium text-gray-500 sm:pl-6 align-top";
+              }
+
+              return (
+                <td key={columnIndex} className={className}>
+                  {rowIndex === 0 && columnIndex === 0 && (
+                    <span className="sr-only">Loading...</span>
+                  )}
+                  <Skeleton
+                    className="h-4"
+                    widthVariantIndex={rowIndex + columnIndex}
+                  />
+                </td>
+              );
+            })}
+          </tr>
+        );
+      })}
+    </tbody>
+  );
+};
+
+export default TableSkeletonRows;

package/UI/Components/Tabs/Tab.tsx

@@ -31,7 +31,7 @@ const TabElement: FunctionComponent<ComponentProps> = (
   const backgroundColor: string = "bg-gray-100";
 
   const baseClasses: string =
-    "rounded-md px-3 py-2 text-sm font-medium cursor-pointer inline-flex whitespace-nowrap flex-shrink-0";
+    "rounded-md px-3 py-2 text-sm font-medium cursor-pointer inline-flex whitespace-nowrap flex-shrink-0 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2";
   const stateClasses: string = props.isSelected
     ? `${backgroundColor} text-gray-700`
     : "text-gray-500 hover:text-gray-700";