@oneuptime/common 12.0.9 → 12.0.11

package/UI/Components/Pagination/PaginationUtil.ts

@@ -0,0 +1,263 @@
+/**
+ * Pure pagination math, kept out of the component so the page-window and
+ * range arithmetic can be unit tested without rendering anything.
+ */
+
+/**
+ * A slot in the rendered page list. Numbers are clickable pages; the two
+ * ellipsis markers are the gaps that were collapsed on either side of the
+ * current page. They are distinct values so the renderer can give them
+ * stable React keys (a list can contain both).
+ */
+export type PageWindowItem = number | "ellipsis-start" | "ellipsis-end";
+
+/**
+ * Page sizes offered in the "rows per page" dropdown. Anything else the
+ * table is already using (a shared link can carry an arbitrary size) is
+ * merged in by `getItemsOnPageOptions` so the select always has a value
+ * that matches what is on screen.
+ */
+export const DefaultItemsOnPageOptions: Array<number> = [10, 20, 25, 50, 100];
+
+/**
+ * How many slots the numbered page list may occupy, ellipses included.
+ * Five is the whole story a page list has to tell - where you are, where
+ * both ends are, and that there is more in between - and it keeps the
+ * control a constant width from page 1 through page 10,000. Stepping to a
+ * neighbour is what the arrows are for; landing somewhere arbitrary is what
+ * the gaps are for.
+ */
+export const DefaultMaxVisiblePages: number = 5;
+
+/**
+ * The narrowest window the collapsing rules can honour: first, gap, current,
+ * gap, last. Anything smaller is raised to this.
+ */
+const MinMaxVisiblePages: number = 5;
+
+export interface ItemRange {
+  firstItemNumber: number;
+  lastItemNumber: number;
+  isEmpty: boolean;
+}
+
+export interface ItemRangeInput {
+  currentPageNumber: number;
+  itemsOnPage: number;
+  totalItemsCount: number;
+  /*
+   * Rows this page actually rendered, when the caller knows. Analytics list
+   * endpoints over-fetch one probe row to derive `hasMore` and count it in
+   * `totalItemsCount` even though the payload dropped it, so the printed
+   * range has to be clamped to rows the page can really show.
+   */
+  itemsOnCurrentPage?: number | undefined;
+}
+
+export default class PaginationUtil {
+  /**
+   * Total pages for a known item count. Always at least 1 — an empty table
+   * still sits on "page 1 of 1" rather than "page 1 of 0".
+   */
+  public static getTotalPageCount(
+    totalItemsCount: number,
+    itemsOnPage: number,
+  ): number {
+    const safeItemsOnPage: number = Math.max(Math.floor(itemsOnPage) || 0, 1);
+    const safeTotalItemsCount: number = Math.max(
+      Math.floor(totalItemsCount) || 0,
+      0,
+    );
+
+    return Math.max(Math.ceil(safeTotalItemsCount / safeItemsOnPage), 1);
+  }
+
+  /**
+   * Clamp a page number into the pages that exist. Used both for what the
+   * control highlights and for what a hand-typed "go to page" is allowed to
+   * request.
+   */
+  public static clampPageNumber(
+    pageNumber: number,
+    totalPageCount: number,
+  ): number {
+    const safeTotalPageCount: number = Math.max(
+      Math.floor(totalPageCount) || 0,
+      1,
+    );
+    const safePageNumber: number = Math.floor(pageNumber) || 1;
+
+    if (safePageNumber < 1) {
+      return 1;
+    }
+
+    return Math.min(safePageNumber, safeTotalPageCount);
+  }
+
+  /**
+   * The page numbers to render, with collapsed gaps marked. When the list
+   * fits it is returned whole; otherwise the first and last pages are always
+   * present (so "jump to the start / end" is one click) and the pages around
+   * the current one fill the remaining slots.
+   */
+  public static getPageWindow(
+    currentPageNumber: number,
+    totalPageCount: number,
+    maxVisiblePages: number = DefaultMaxVisiblePages,
+  ): Array<PageWindowItem> {
+    const safeTotalPageCount: number = Math.max(
+      Math.floor(totalPageCount) || 0,
+      1,
+    );
+    const safeMaxVisiblePages: number = Math.max(
+      Math.floor(maxVisiblePages) || 0,
+      MinMaxVisiblePages,
+    );
+    const currentPage: number = PaginationUtil.clampPageNumber(
+      currentPageNumber,
+      safeTotalPageCount,
+    );
+
+    const allPages: (from: number, to: number) => Array<PageWindowItem> = (
+      from: number,
+      to: number,
+    ): Array<PageWindowItem> => {
+      const pages: Array<PageWindowItem> = [];
+      for (let page: number = from; page <= to; page++) {
+        pages.push(page);
+      }
+      return pages;
+    };
+
+    if (safeTotalPageCount <= safeMaxVisiblePages) {
+      return allPages(1, safeTotalPageCount);
+    }
+
+    /*
+     * Pages kept on each side of the current one. Five slots are already
+     * spent on the first page, the last page, the current page and the two
+     * ellipses, so whatever a wider window is given goes here - and the
+     * rendered width stays at `safeMaxVisiblePages`.
+     */
+    const siblingCount: number = Math.max(
+      Math.floor((safeMaxVisiblePages - 5) / 2),
+      0,
+    );
+
+    /*
+     * A gap has to hide at least two pages to be worth drawing: an ellipsis
+     * standing in for a single page number is both a lie and wider than the
+     * number it replaced. Where only one page would be hidden, the run of
+     * pages is extended to swallow it instead.
+     */
+    const hasGapBefore: boolean = currentPage - siblingCount > 3;
+    const hasGapAfter: boolean =
+      currentPage + siblingCount < safeTotalPageCount - 2;
+
+    if (!hasGapBefore && hasGapAfter) {
+      const headCount: number = safeMaxVisiblePages - 2;
+      return [...allPages(1, headCount), "ellipsis-end", safeTotalPageCount];
+    }
+
+    if (hasGapBefore && !hasGapAfter) {
+      const tailCount: number = safeMaxVisiblePages - 2;
+      return [
+        1,
+        "ellipsis-start",
+        ...allPages(safeTotalPageCount - tailCount + 1, safeTotalPageCount),
+      ];
+    }
+
+    if (hasGapBefore && hasGapAfter) {
+      return [
+        1,
+        "ellipsis-start",
+        ...allPages(currentPage - siblingCount, currentPage + siblingCount),
+        "ellipsis-end",
+        safeTotalPageCount,
+      ];
+    }
+
+    /*
+     * Unreachable for a list longer than the window — with neither gap the
+     * list is at most `safeMaxVisiblePages - 2` pages long — but returning
+     * the whole list is the honest fallback rather than an exception.
+     */
+    return allPages(1, safeTotalPageCount);
+  }
+
+  /**
+   * The "Showing 21-30 of 240" range. `itemsOnCurrentPage`, when given, caps
+   * the range at rows the page really rendered, which is what keeps a short
+   * final page (and the analytics probe row) from being over-reported.
+   */
+  public static getItemRange(input: ItemRangeInput): ItemRange {
+    const itemsOnPage: number = Math.max(Math.floor(input.itemsOnPage) || 0, 1);
+    const totalItemsCount: number = Math.max(
+      Math.floor(input.totalItemsCount) || 0,
+      0,
+    );
+    const currentPageNumber: number = Math.max(
+      Math.floor(input.currentPageNumber) || 1,
+      1,
+    );
+
+    const alreadySeenCount: number = itemsOnPage * (currentPageNumber - 1);
+    const firstItemNumber: number = alreadySeenCount + 1;
+
+    // What the count proves is left after the pages already paged past.
+    const provenOnPage: number = Math.max(
+      totalItemsCount - alreadySeenCount,
+      0,
+    );
+
+    /*
+     * A page can hold no more than its page size, no more than the count
+     * proves is left, and - where the caller says so - no more than it
+     * actually rendered.
+     */
+    const countOnPage: number = Math.min(
+      provenOnPage,
+      itemsOnPage,
+      input.itemsOnCurrentPage === undefined
+        ? Number.POSITIVE_INFINITY
+        : Math.max(input.itemsOnCurrentPage, 0),
+    );
+
+    const lastItemNumber: number = alreadySeenCount + countOnPage;
+
+    return {
+      firstItemNumber: firstItemNumber,
+      lastItemNumber: lastItemNumber,
+      isEmpty: lastItemNumber < firstItemNumber,
+    };
+  }
+
+  /**
+   * The page sizes to offer. The size in use is always present and the list
+   * stays sorted, so a table restored from a link with `itemsOnPage=37`
+   * shows 37 as the selected option instead of silently snapping to 10.
+   */
+  public static getItemsOnPageOptions(
+    itemsOnPage: number,
+    options: Array<number> = DefaultItemsOnPageOptions,
+  ): Array<number> {
+    const validOptions: Array<number> = options.filter((option: number) => {
+      return Number.isFinite(option) && option > 0;
+    });
+
+    const uniqueOptions: Array<number> = Array.from(new Set(validOptions));
+
+    if (
+      Number.isFinite(itemsOnPage) &&
+      itemsOnPage > 0 &&
+      !uniqueOptions.includes(itemsOnPage)
+    ) {
+      uniqueOptions.push(itemsOnPage);
+    }
+
+    return uniqueOptions.sort((a: number, b: number) => {
+      return a - b;
+    });
+  }
+}

package/UI/Components/Pagination/Screenshots/README.md

@@ -0,0 +1,15 @@
+# Pagination screenshots
+
+What the shared pagination control (`../Pagination.tsx`) looks like in the
+states that are worth arguing about. Rendered from the real component against
+the dashboard's own Tailwind build, on a mock table.
+
+| File                              | Shows                                                                                                                                                                    |
+| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `pagination-before-after.png`     | The control before this change (page size and page number hidden behind a light-grey icon button) and after it (rows per page, the pages and the range all on the page). |
+| `pagination-long-list.png`        | Deep in a 24-page list, with the gaps collapsed; a short final page; and an empty result set.                                                                            |
+| `pagination-go-to-page-modal.png` | The jump-to-a-page dialog, opened by clicking one of the collapsed gaps.                                                                                                 |
+| `pagination-telemetry.png`        | The compact skin used under logs and traces, and has-more mode, where the endpoint skips `COUNT(*)` so there is no last page to link to.                                 |
+| `pagination-mobile.png`           | A narrow screen, where the numbered list gives way to a page-of-pages indicator.                                                                                         |
+
+Re-shoot these when the control's layout changes.

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

@@ -8,6 +8,13 @@ export interface SavedViewsDropdownProps {
   savedViews: Array<SavedViewOption>;
   selectedSavedViewId?: string | null | undefined;
   onSelect: (viewId: string) => void;
+  /*
+   * Deselect the active view and return the explorer to its unfiltered
+   * default. Without this the checkmark is a one-way door: a view can be
+   * applied but never taken off. Hosts that cannot express "no view" simply
+   * omit it, and both clear affordances below disappear with it.
+   */
+  onClear?: (() => void) | undefined;
   onCreate?: (() => void) | undefined;
   onEdit?: ((viewId: string) => void) | undefined;
   onDelete?: ((viewId: string) => void) | undefined;
@@ -32,6 +39,17 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
     },
   );
 
+  /*
+   * Clearing is only offered once a view is actually applied — an inert
+   * "Clear view" row sitting above an unfiltered explorer says nothing.
+   */
+  const canClear: boolean = Boolean(props.onClear && selectedView);
+
+  const clearSelection: () => void = (): void => {
+    props.onClear?.();
+    setIsComponentVisible(false);
+  };
+
   return (
     <div className="relative" ref={ref}>
       <button
@@ -77,6 +95,31 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
             props.dropdownAlignment === "right" ? "right-0" : "left-0"
           }`}
         >
+          {/*
+           * Explicit way back to the unfiltered explorer. Clicking the
+           * applied view also clears it, but that is only discoverable once
+           * you try it — this row says so out loud.
+           */}
+          {canClear && (
+            <div className="border-b border-gray-100 py-1">
+              <button
+                type="button"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-gray-50"
+                onClick={clearSelection}
+              >
+                <span
+                  className="w-4 shrink-0 text-center text-xs text-gray-400"
+                  aria-hidden="true"
+                >
+                  ✕
+                </span>
+                <span className="truncate text-sm text-gray-600">
+                  Clear view
+                </span>
+              </button>
+            </div>
+          )}
+
           {/* View list */}
           <div className="max-h-72 overflow-y-auto py-1">
             {props.savedViews.length === 0 && (
@@ -98,13 +141,35 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
                   <button
                     type="button"
                     className="flex min-w-0 flex-1 items-center gap-2 text-left"
+                    /*
+                     * Spelled out so the row announces as its own name: the
+                     * ✓ is aria-hidden, and the "default" tag reads as a word
+                     * rather than a bare token appended to the view name.
+                     */
+                    aria-label={
+                      view.isDefault ? `${view.name} (default)` : view.name
+                    }
+                    /*
+                     * The checkmark reads as a checkbox, so the row behaves
+                     * like one: clicking the applied view takes it off again
+                     * instead of silently re-applying what is already on.
+                     */
+                    aria-pressed={isSelected}
                     onClick={() => {
+                      if (isSelected && props.onClear) {
+                        clearSelection();
+                        return;
+                      }
+
                       props.onSelect(view.id);
                       setIsComponentVisible(false);
                     }}
                   >
                     {/* Checkmark for selected */}
-                    <span className="w-4 shrink-0 text-center text-xs">
+                    <span
+                      className="w-4 shrink-0 text-center text-xs"
+                      aria-hidden="true"
+                    >
                       {isSelected ? (
                         <span className="text-indigo-600">✓</span>
                       ) : (

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

@@ -1,3 +1,4 @@
+import Pagination from "../../Pagination/Pagination";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface TelemetryPaginationProps {
@@ -11,103 +12,48 @@ export interface TelemetryPaginationProps {
   itemLabel?: string | undefined;
 }
 
+/**
+ * The telemetry footer is the shared pagination control in its compact skin,
+ * so "rows per page" and jump-to-page behave the same here as they do under
+ * every table in the product.
+ */
 const TelemetryPagination: FunctionComponent<TelemetryPaginationProps> = (
   props: TelemetryPaginationProps,
 ): ReactElement => {
-  const totalPages: number = Math.max(
-    1,
-    Math.ceil(
-      props.totalItems === 0
-        ? 1
-        : props.totalItems / Math.max(props.pageSize, 1),
-    ),
-  );
-
-  const safeCurrentPage: number = Math.min(props.currentPage, totalPages);
-
-  const firstItemIndex: number =
-    props.totalItems === 0 ? 0 : (safeCurrentPage - 1) * props.pageSize + 1;
-  const lastItemIndex: number =
-    props.totalItems === 0
-      ? 0
-      : Math.min(props.totalItems, safeCurrentPage * props.pageSize);
-
-  const disablePrev: boolean =
-    props.isDisabled || props.totalItems === 0 || safeCurrentPage <= 1;
-  const disableNext: boolean =
-    props.isDisabled || props.totalItems === 0 || safeCurrentPage >= totalPages;
+  /*
+   * Callers pass a plural label ("traces", "spans"). The singular is only
+   * used for a one-row result set, where trimming a trailing "s" is right
+   * for every label these views pass.
+   */
+  const pluralLabel: string = props.itemLabel || "results";
+  const singularLabel: string = pluralLabel.endsWith("s")
+    ? pluralLabel.slice(0, -1)
+    : pluralLabel;
 
   return (
-    <div className="flex flex-col gap-3 border-t border-gray-200 bg-gray-50/50 px-4 py-2.5 text-xs text-gray-500 md:flex-row md:items-center md:justify-between">
-      <div>
-        {props.totalItems === 0 ? (
-          <span className="text-gray-500">
-            No {props.itemLabel || "results"} to display.
-          </span>
-        ) : (
-          <span className="text-gray-500">
-            Showing {firstItemIndex.toLocaleString()}-
-            {lastItemIndex.toLocaleString()} of{" "}
-            {props.totalItems.toLocaleString()}
-          </span>
-        )}
-      </div>
-
-      <div className="flex flex-wrap items-center gap-3">
-        <label className="flex items-center gap-2">
-          <span className="text-[10px] uppercase tracking-wide text-gray-400">
-            Rows
-          </span>
-          <select
-            className="rounded-md border border-gray-200 bg-white px-2 py-1 text-xs text-gray-700 focus:border-indigo-400 focus:outline-none focus:ring-1 focus:ring-indigo-200"
-            value={props.pageSize}
-            onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
-              const size: number = Number(event.target.value) || props.pageSize;
-              props.onPageSizeChange(size);
-            }}
-            disabled={props.isDisabled}
-          >
-            {props.pageSizeOptions.map((option: number) => {
-              return (
-                <option key={option} value={option}>
-                  {option}
-                </option>
-              );
-            })}
-          </select>
-        </label>
-
-        <div className="inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-white p-0.5">
-          <button
-            type="button"
-            className="rounded-md px-3 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300 disabled:cursor-not-allowed disabled:opacity-40"
-            onClick={() => {
-              if (!disablePrev) {
-                props.onPageChange(Math.max(1, safeCurrentPage - 1));
-              }
-            }}
-            disabled={disablePrev}
-          >
-            Previous
-          </button>
-          <span className="px-3 text-[11px] text-gray-400">
-            Page {safeCurrentPage} / {totalPages}
-          </span>
-          <button
-            type="button"
-            className="rounded-md px-3 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300 disabled:cursor-not-allowed disabled:opacity-40"
-            onClick={() => {
-              if (!disableNext) {
-                props.onPageChange(Math.min(totalPages, safeCurrentPage + 1));
-              }
-            }}
-            disabled={disableNext}
-          >
-            Next
-          </button>
-        </div>
-      </div>
-    </div>
+    <Pagination
+      dataTestId="telemetry-pagination"
+      singularLabel={singularLabel}
+      pluralLabel={pluralLabel}
+      currentPageNumber={props.currentPage}
+      totalItemsCount={props.totalItems}
+      itemsOnPage={props.pageSize}
+      itemsOnPageOptions={props.pageSizeOptions}
+      isCompact={true}
+      className="bg-gray-50/50"
+      isLoading={false}
+      isError={false}
+      isDisabled={Boolean(props.isDisabled)}
+      onNavigateToPage={(pageNumber: number, itemsOnPage: number) => {
+        if (itemsOnPage !== props.pageSize) {
+          props.onPageSizeChange(itemsOnPage);
+        }
+
+        if (pageNumber !== props.currentPage) {
+          props.onPageChange(pageNumber);
+        }
+      }}
+    />
   );
 };
 

package/UI/Components/TextArea/TextArea.tsx

@@ -22,6 +22,8 @@ export interface ComponentProps {
   autoFocus?: boolean | undefined;
   dataTestId?: string | undefined;
   disableSpellCheck?: boolean | undefined;
+  /** The id of the element that names this control, when it is labelled elsewhere. */
+  ariaLabelledby?: string | undefined;
 }
 
 const TextArea: FunctionComponent<ComponentProps> = (
@@ -71,6 +73,7 @@ const TextArea: FunctionComponent<ComponentProps> = (
           value={text}
           rows={6}
           spellCheck={!props.disableSpellCheck}
+          aria-labelledby={props.ariaLabelledby}
           aria-invalid={props.error ? "true" : undefined}
           aria-describedby={props.error ? "textarea-error-message" : undefined}
           onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {

package/UI/Components/Workflow/ArgumentsForm.tsx

@@ -6,7 +6,10 @@ import { CustomElementProps } from "../Forms/Types/Field";
 import FormValues from "../Forms/Types/FormValues";
 import ComponentValuePickerModal from "./ComponentValuePickerModal";
 import CronScheduleField from "./CronScheduleField";
-import ModelColumnEditor, { ModelColumnEditorMode } from "./ModelColumnEditor";
+import ModelColumnEditor, {
+  ModelColumnEditorMode,
+  RecordIntent,
+} from "./ModelColumnEditor";
 import ModelFieldPicker from "./ModelFieldPicker";
 import {
   componentInputTypeToFormFieldType,
@@ -488,6 +491,20 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
                           <ModelColumnEditor
                             tableName={component.metadata.tableName as string}
                             mode={columnEditorMode}
+                            /*
+                             * A create writes a whole record, so it opens with a
+                             * row for every column it must be given. An update
+                             * legitimately writes one column, and seeding it
+                             * with six would present five fields nobody asked
+                             * for. The create payload is the argument called
+                             * "json" (BaseModel components); an update's is
+                             * "data".
+                             */
+                            recordIntent={
+                              arg.id === "json"
+                                ? RecordIntent.Create
+                                : RecordIntent.Update
+                            }
                             initialValue={customProps.initialValue}
                             onChange={(value: string) => {
                               void customProps.onChange?.(value);