@oneuptime/common 12.0.30 → 12.0.31

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -32,6 +32,7 @@ import {
   BulkActionOnClickProps,
 } from "../BulkUpdate/BulkUpdateForm";
 import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
+import CopyTextButton from "../CopyTextButton/CopyTextButton";
 import MoreMenu from "../MoreMenu/MoreMenu";
 import MoreMenuItem from "../MoreMenu/MoreMenuItem";
 import Card, {
@@ -418,6 +419,72 @@ export enum ModalType {
   Edit,
 }
 
+/*
+ * The fields a row is worth naming itself by, in the order a human would pick
+ * one. `title` is not decoration here: incidents, alerts and scheduled
+ * maintenance key on `title` rather than `name`, and those are exactly the
+ * tables where deleting the row next to the one you meant hurts most.
+ *
+ * Only the fields the table already selected are present on the row, so this
+ * reads whatever is there and gives up quietly rather than guessing.
+ */
+const ITEM_LABEL_FIELDS: Array<string> = [
+  "name",
+  "title",
+  "slug",
+  "email",
+  "username",
+  "domain",
+];
+
+type ReadLabelFieldFunction = (value: unknown) => string;
+
+/*
+ * Some of these fields arrive as objects with a meaningful toString - Name,
+ * Email, ObjectID all define one. Anything that does not is skipped rather
+ * than rendered as "[object Object]".
+ */
+const readLabelField: ReadLabelFieldFunction = (value: unknown): string => {
+  if (typeof value === "string") {
+    return value.trim();
+  }
+
+  if (value === null || value === undefined) {
+    return "";
+  }
+
+  const text: string = String(value);
+
+  return text === "[object Object]" ? "" : text.trim();
+};
+
+type GetItemLabelFunction = (item: unknown) => string;
+
+/*
+ * Every per-row Delete in the product opened the same dialog: "Are you sure
+ * you want to delete this monitor?" - a sentence equally true of the row that
+ * was clicked and of the twenty either side of it. That is precisely the
+ * moment a user wants to be told which one, and the one moment the dialog
+ * would not say.
+ */
+const getItemLabel: GetItemLabelFunction = (item: unknown): string => {
+  if (!item || typeof item !== "object") {
+    return "";
+  }
+
+  const record: Record<string, unknown> = item as Record<string, unknown>;
+
+  for (const field of ITEM_LABEL_FIELDS) {
+    const label: string = readLabelField(record[field]);
+
+    if (label) {
+      return label;
+    }
+  }
+
+  return "";
+};
+
 const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   props: ComponentProps<TBaseModel>,
 ) => ReactElement = <TBaseModel extends BaseModel | AnalyticsBaseModel>(
@@ -2921,6 +2988,54 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     return isSearchActive() ? false : isLoading;
   };
 
+  type HasFilterAppliedFunction = (
+    dataToCheck: FilterData<TBaseModel>,
+  ) => boolean;
+
+  /*
+   * Lifted out of the onFilterChanged callback below, which is where this test
+   * used to live inline. Two definitions of "a filter is applied" in one
+   * component is exactly the kind of thing that drifts apart.
+   */
+  const hasFilterApplied: HasFilterAppliedFunction = (
+    dataToCheck: FilterData<TBaseModel>,
+  ): boolean => {
+    for (const key in dataToCheck) {
+      if (dataToCheck[key]) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  type GetNoItemsMessageFunction = () => string | ReactElement;
+
+  /*
+   * An empty table has two quite different causes and used to have one
+   * sentence for both. A monitors table with nothing in it said "No monitor"
+   * - ungrammatical, and worse, it said the same thing after a search that
+   * matched nothing, so a typo in the search box looked exactly like an empty
+   * project. A caller's own noItemsMessage is deliberately overridden while a
+   * search or filter is active: those are usually "create your first X"
+   * panels, and offering one to someone whose search just missed is wrong.
+   */
+  const getNoItemsMessage: GetNoItemsMessageFunction = ():
+    | string
+    | ReactElement => {
+    const plural: string = (
+      props.pluralName ||
+      model.pluralName ||
+      "items"
+    ).toLocaleLowerCase();
+
+    if (isSearchActive() || hasFilterApplied(filterData)) {
+      return `${tx("No")} ${plural} ${tx("match your search or filters.")}`;
+    }
+
+    return props.noItemsMessage || `${tx("No")} ${plural} ${tx("yet.")}`;
+  };
+
   const getTable: GetReactElementFunction = (): ReactElement => {
     return (
       <Table
@@ -2929,17 +3044,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           setTableView(null);
 
           // check if there's anything in the filter data and update the isFilterApplied prop.
-          let isFilterApplied: boolean = false;
-
-          for (const key in filterData) {
-            if (filterData[key]) {
-              isFilterApplied = true;
-              break;
-            }
-          }
-
           if (props.onFilterApplied) {
-            props.onFilterApplied(isFilterApplied);
+            props.onFilterApplied(hasFilterApplied(filterData));
           }
         }}
         filterData={filterData}
@@ -3127,9 +3233,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         matchBulkSelectedItemByField={matchBulkSelectedItemByField || "_id"}
         bulkItemToString={(item: TBaseModel) => {
           const label: string = props.singularName || item.singularName || "";
-          const name: string =
-            (item as unknown as Record<string, unknown>)["name"]?.toString() ||
-            "";
+          // Same deriver the delete confirmation uses, so the two cannot drift.
+          const name: string = getItemLabel(item);
           if (name) {
             return label ? `${label}: ${name}` : name;
           }
@@ -3200,7 +3305,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
           setItemsOnPage(newItemsOnPage);
         }}
-        noItemsMessage={props.noItemsMessage || ""}
+        noItemsMessage={getNoItemsMessage()}
         onRefreshClick={async () => {
           await fetchItems();
         }}
@@ -3256,7 +3361,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         shouldAddItemInTheEnd={
           props.orderedStatesListProps.shouldAddItemInTheEnd
         }
-        noItemsMessage={props.noItemsMessage || ""}
+        noItemsMessage={getNoItemsMessage()}
         onRefreshClick={async () => {
           await fetchItems();
         }}
@@ -3343,7 +3448,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
           setItemsOnPage(newItemsOnPage);
         }}
-        noItemsMessage={props.noItemsMessage || ""}
+        noItemsMessage={getNoItemsMessage()}
         onRefreshClick={async () => {
           await fetchItems();
         }}
@@ -4498,11 +4603,18 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       {showDeleteConfirmModal && (
         <ConfirmModal
           title={`Delete ${props.singularName || model.singularName}`}
-          description={`Are you sure you want to delete this ${(
-            props.singularName ||
-            model.singularName ||
-            "item"
-          )?.toLowerCase()}?`}
+          description={((): string => {
+            const label: string = (
+              props.singularName ||
+              model.singularName ||
+              "item"
+            ).toLowerCase();
+            const name: string = getItemLabel(currentDeleteableItem);
+
+            return `Are you sure you want to delete ${
+              name ? `"${name}"` : `this ${label}`
+            }? This action cannot be undone.`;
+          })()}
           onClose={() => {
             setShowDeleteConfirmModal(false);
           }}
@@ -4535,10 +4647,24 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           description={
             <div>
               <span>
-                ID of this {props.singularName || model.singularName || ""}:{" "}
-                {viewId}
+                ID of this {props.singularName || model.singularName || ""}:
               </span>
-              <br />
+              {/*
+               * Handing over the id is the entire point of this dialog, and it
+               * used to be inline prose the user had to select by hand - an
+               * awkward drag over a 36-character UUID, and easy to clip a
+               * character. It gets its own row and a copy button now.
+               */}
+              <div className="mt-2 flex items-center gap-2 rounded-md border border-gray-200 bg-gray-50 px-3 py-2">
+                <code className="flex-1 break-all font-mono text-xs text-gray-800">
+                  {viewId}
+                </code>
+                <CopyTextButton
+                  textToBeCopied={viewId || ""}
+                  size="sm"
+                  title="Copy ID to clipboard"
+                />
+              </div>
               <br />
 
               <span>

package/UI/Components/Table/TableHeader.tsx

@@ -6,6 +6,7 @@ import Columns from "./Types/Columns";
 import SortOrder, {
   SortOrderToAriaSortMap,
 } from "../../../Types/BaseDatabase/SortOrder";
+import { VoidFunction } from "../../../Types/FunctionTypes";
 import GenericObject from "../../../Types/GenericObject";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
@@ -113,60 +114,75 @@ const TableHeader: TableHeaderFunction = <T extends GenericObject>(
                   ? "none"
                   : undefined;
 
+            const sortColumn: VoidFunction = (): void => {
+              if (!column.key || !canSort) {
+                return;
+              }
+
+              const sortOrder: SortOrder =
+                props.sortOrder === SortOrder.Ascending
+                  ? SortOrder.Descending
+                  : SortOrder.Ascending;
+
+              props.onSortChanged(column.key, sortOrder);
+            };
+
+            const contentClassName: string = `flex w-full px-6 py-3 ${
+              column.type === FieldType.Actions
+                ? "justify-end"
+                : "justify-start"
+            }`;
+
+            const headerContent: ReactElement = (
+              <>
+                {translateString(column.title) ?? column.title}
+                {canSort &&
+                  props.sortBy === column.key &&
+                  props.sortOrder === SortOrder.Ascending && (
+                    <Icon
+                      icon={IconProp.ChevronUp}
+                      thick={ThickProp.Thick}
+                      className="ml-2  p-1 flex-none rounded bg-gray-200 text-gray-500 group-hover:bg-gray-300 h-4 w-4"
+                    />
+                  )}
+                {canSort &&
+                  props.sortBy === column.key &&
+                  props.sortOrder === SortOrder.Descending && (
+                    <Icon
+                      icon={IconProp.ChevronDown}
+                      thick={ThickProp.Thick}
+                      className="ml-2 p-1 flex-none rounded bg-gray-200 text-gray-500 group-hover:bg-gray-300 h-4 w-4"
+                    />
+                  )}
+              </>
+            );
+
             return (
               <th
                 key={i}
                 scope="col"
                 aria-sort={ariaSort}
-                className={`px-6 py-3 text-left text-sm font-semibold text-gray-900 ${
-                  canSort ? "cursor-pointer" : ""
-                }`}
-                onClick={() => {
-                  if (!column.key) {
-                    return;
-                  }
-
-                  if (!canSort) {
-                    return;
-                  }
-
-                  const sortOrder: SortOrder =
-                    props.sortOrder === SortOrder.Ascending
-                      ? SortOrder.Descending
-                      : SortOrder.Ascending;
-
-                  const currentSortColumn: keyof T = column.key;
-
-                  props.onSortChanged(currentSortColumn, sortOrder);
-                }}
+                className="text-left text-sm font-semibold text-gray-900"
               >
-                <div
-                  className={`flex ${
-                    column.type === FieldType.Actions
-                      ? "justify-end"
-                      : "justify-start"
-                  }`}
-                >
-                  {translateString(column.title) ?? column.title}
-                  {canSort &&
-                    props.sortBy === column.key &&
-                    props.sortOrder === SortOrder.Ascending && (
-                      <Icon
-                        icon={IconProp.ChevronUp}
-                        thick={ThickProp.Thick}
-                        className="ml-2  p-1 flex-none rounded bg-gray-200 text-gray-500 group-hover:bg-gray-300 h-4 w-4"
-                      />
-                    )}
-                  {canSort &&
-                    props.sortBy === column.key &&
-                    props.sortOrder === SortOrder.Descending && (
-                      <Icon
-                        icon={IconProp.ChevronDown}
-                        thick={ThickProp.Thick}
-                        className="ml-2 p-1 flex-none rounded bg-gray-200 text-gray-500 group-hover:bg-gray-300 h-4 w-4"
-                      />
-                    )}
-                </div>
+                {/*
+                 * The sort handler used to sit on the <th> itself, which is
+                 * not focusable and does not answer Enter or Space - so
+                 * sorting any table in the product was mouse-only, even though
+                 * aria-sort was already announcing the column as sortable. The
+                 * padding moves onto the button so the clickable area is the
+                 * whole cell, exactly as before.
+                 */}
+                {canSort ? (
+                  <button
+                    type="button"
+                    onClick={sortColumn}
+                    className={`${contentClassName} cursor-pointer text-left font-semibold text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500`}
+                  >
+                    {headerContent}
+                  </button>
+                ) : (
+                  <div className={contentClassName}>{headerContent}</div>
+                )}
               </th>
             );
           })}

package/UI/Components/Table/TableRow.tsx

@@ -95,10 +95,20 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
     };
   }, []);
 
+  /*
+   * The local isMobile state above starts false and is only corrected inside
+   * an effect, i.e. after the first paint. TableBody already knows which
+   * layout it is mounting and says so explicitly, so prefer what it passed:
+   * without this, a mobile card renders its hideOnMobile columns for one frame
+   * and then drops them, which is a visible jump on exactly the narrow screens
+   * the flag exists to protect.
+   */
+  const isMobileView: boolean = props.isMobile ?? isMobile;
+
   // The columns this row will actually put on screen.
   const renderedColumns: Array<Column<T>> = (props.columns || []).filter(
     (column: Column<T>) => {
-      return !(column.hideOnMobile && isMobile);
+      return !(column.hideOnMobile && isMobileView);
     },
   );
 
@@ -175,7 +185,7 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
             )}
 
             <div className="space-y-3">
-              {props.columns.map((column: Column<T>, i: number) => {
+              {renderedColumns.map((column: Column<T>, i: number) => {
                 if (column.type === FieldType.Actions) {
                   return (
                     <div key={i} className="flex flex-wrap gap-2">
@@ -520,7 +530,7 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
                           }
 
                           // Hide button on mobile if hideOnMobile is true
-                          if (button.hideOnMobile && isMobile) {
+                          if (button.hideOnMobile && isMobileView) {
                             return <div key={i}></div>;
                           }
 

package/UI/Styles/Theme.css

@@ -24,6 +24,7 @@
   --ou-chart-cursor: #d1d5db;
   --ou-chart-track: #eef2f7;
   --ou-chart-marker-ring: #ffffff;
+  --ou-chart-focus-ring: #4f46e5;
   --ou-flow-mask: rgb(241 245 249 / 70%);
   --ou-accent-soft: #eef2ff;
   --ou-accent-muted: #e0e7ff;
@@ -73,6 +74,7 @@ html.dark {
   --ou-chart-cursor: #64748b;
   --ou-chart-track: #334155;
   --ou-chart-marker-ring: #172033;
+  --ou-chart-focus-ring: #818cf8;
   --ou-flow-mask: rgb(15 23 42 / 72%);
   --ou-accent-soft: #1e1b4b;
   --ou-accent-muted: #312e81;
@@ -1350,6 +1352,42 @@ html.dark ::backdrop {
   background-color: var(--ou-background-primary);
 }
 
+/*
+ * Chart focus rings. Both themes -- the black box this replaces was never a
+ * dark-mode-only problem.
+ *
+ * recharts leaves its accessibility layer on by default, which puts
+ * tabindex="0" on the root <svg> of every chart. Chrome's SVG user-agent
+ * stylesheet rings a focused <svg> on plain :focus -- not on :focus-visible,
+ * the way it treats focusable HTML -- so simply pressing the mouse inside a
+ * chart paints a hard black rectangle around the entire plot. Dragging out a
+ * zoom range on the Logs and Traces volume charts lands focus there every
+ * time, which is how https://github.com/OneUptime/oneuptime/issues/3528 was
+ * reported: a black box around the graph, over the data, for the rest of the
+ * session.
+ *
+ * Dropping the ring and stopping there would take a real affordance with it:
+ * arrow keys walk the tooltip across a focused chart. So it is drawn again
+ * for :focus-visible only, in the app's own accent, which is what a reader
+ * who arrived by keyboard gets and a reader who arrived by mouse does not.
+ *
+ * The descendant half covers the focusable <g> elements the annotation layer
+ * draws inside the plot: event chips and highlighted windows are clickable by
+ * design, so a pointer lands on them routinely, and each one was getting
+ * boxed the same way.
+ */
+.recharts-surface:focus,
+.recharts-surface [tabindex]:focus {
+  outline: none;
+}
+
+.recharts-surface:focus-visible,
+.recharts-surface [tabindex]:focus-visible {
+  outline: 2px solid var(--ou-chart-focus-ring);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
 /*
  * Motion. Tailwind here is the Play-CDN runtime configured inline per app, so
  * a new animate-* utility name would silently generate nothing unless its