@oneuptime/common 14.0.13 → 14.0.14

package/UI/Components/CommandPalette/PaletteRow.tsx

@@ -76,6 +76,11 @@ export interface PaletteRowItem {
   description?: string | undefined;
   icon?: IconProp | undefined;
   iconColor?: string | undefined;
+  /**
+   * Where the item lives ("Project Settings", "Advanced"). Shown under the
+   * title in place of the description.
+   */
+  breadcrumb?: Array<string> | undefined;
   shortcut?: Array<KeyboardShortcutKey> | undefined;
 }
 
@@ -152,10 +157,37 @@ const PaletteRow: FunctionComponent<ComponentProps> = (
         <p className="truncate text-sm font-medium text-gray-900">
           {highlightMatch(item.title, props.query)}
         </p>
-        {item.description && (
-          <p className="truncate text-xs text-gray-500">
-            {highlightMatch(item.description, props.query)}
+        {item.breadcrumb && item.breadcrumb.length > 0 ? (
+          <p
+            data-testid={`command-palette-option-${item.id}-breadcrumb`}
+            className="truncate text-xs text-gray-500"
+          >
+            {item.breadcrumb.map((crumb: string, index: number) => {
+              return (
+                <React.Fragment key={index}>
+                  {index > 0 && (
+                    <>
+                      {/*
+                       * The arrow is drawn for the eye; a screen reader
+                       * hears a comma between the names instead.
+                       */}
+                      <span aria-hidden="true" className="px-1 text-gray-400">
+                        ›
+                      </span>
+                      <span className="sr-only">, </span>
+                    </>
+                  )}
+                  {highlightMatch(crumb, props.query)}
+                </React.Fragment>
+              );
+            })}
           </p>
+        ) : (
+          item.description && (
+            <p className="truncate text-xs text-gray-500">
+              {highlightMatch(item.description, props.query)}
+            </p>
+          )
         )}
       </div>
       {item.shortcut && item.shortcut.length > 0 && (

package/UI/Components/CommandPalette/Types.ts

@@ -16,8 +16,44 @@ export interface PaletteCommand {
   iconColor?: string | undefined;
   /** Section the command is grouped under when browsing (e.g. "Essentials"). */
   category: string;
-  /** Extra match terms the user might type that are not in the title. */
+  /**
+   * Other names for the command that are not in its title ("pager" for
+   * On-Call, "delete project" for the Danger Zone). Matched like a weaker
+   * title.
+   */
   keywords?: Array<string> | undefined;
+  /**
+   * The title itself in other words, matched exactly as the title is: the
+   * English title behind a translated one, so "api keys" still opens
+   * "API-Schlüssel" first in German. Never shown.
+   */
+  titleAliases?: Array<string> | undefined;
+  /**
+   * Where the command lives, outermost first: ["Project Settings",
+   * "Advanced"] for API Keys. Shown under the title instead of the
+   * description, so two pages that are both called "Custom Fields" can be
+   * told apart, and searched as context: "incident custom fields" finds the
+   * Incidents one. A command with a breadcrumb is not searched by its
+   * category.
+   */
+  breadcrumb?: Array<string> | undefined;
+  /**
+   * More words for the breadcrumb that are searched but never shown, such as
+   * the English names behind a translated breadcrumb.
+   */
+  breadcrumbKeywords?: Array<string> | undefined;
+  /**
+   * Offered only to someone searching. Browsing lists the catalog without
+   * it (it would be hundreds of rows), but it can still show under Recent.
+   */
+  isSearchOnly?: boolean | undefined;
+  /**
+   * Breaks a tie between two commands that match a search equally well:
+   * the higher goes first (0 when left out). The Dashboard puts its products
+   * above its pages, and pages above actions and quick links, so "pager"
+   * opens On-Call Duty, then On-Call Policies.
+   */
+  searchPriority?: number | undefined;
   /** Optional shortcut hint rendered as keycaps on the row. */
   shortcut?: Array<KeyboardShortcutKey> | undefined;
   onSelect: () => void;

package/UI/Components/CustomFields/CustomFieldsDetail.tsx

@@ -433,6 +433,12 @@ const CustomFieldsDetail: FunctionComponent<ComponentProps> = (
         {!isLoading && !loadError && schemaList.length > 0 && model && (
           <Detail
             id={props.name}
+            /*
+             * The values of the record's custom fields, keyed by the names
+             * people gave them: one called "createdAt" is theirs to read as
+             * that, not the record's own creation time for the ID line.
+             */
+            showRecordLine={false}
             item={getDisplayValues()}
             fields={schemaList.map((schemaItem: BaseModel) => {
               const isDropdown: boolean =

package/UI/Components/Detail/Detail.tsx

@@ -16,8 +16,13 @@ import MarkdownViewer from "../Markdown.tsx/LazyMarkdownViewer";
 import ObjectIDView from "../ObjectID/ObjectIDView";
 import FieldType from "../Types/FieldType";
 import BooleanValue from "./BooleanValue";
-import DetailIdLine from "./DetailIdLine";
+import DetailRecordLine from "./DetailRecordLine";
 import { getRecordIdText, isRecordIdField } from "./DetailRecordId";
+import {
+  getRecordTimes,
+  isRecordTimeField,
+  RecordTime,
+} from "./DetailRecordTime";
 import Field from "./Field";
 import FieldLabelElement from "./FieldLabel";
 import PlaceholderText from "./PlaceholderText";
@@ -48,6 +53,14 @@ export interface ComponentProps<T extends GenericObject> {
   id?: string | undefined;
   showDetailsInNumberOfColumns?: number | undefined;
   style?: DetailStyle | undefined;
+  /*
+   * The item is a record (the default): its own ID, and when it was created
+   * and last updated, go on the small line under the fields rather than in
+   * the grid. False for values that are not a record's own columns - a
+   * record's custom fields, which people name, and could name "createdAt" -
+   * so every field is drawn as the field it is.
+   */
+  showRecordLine?: boolean | undefined;
 }
 
 type DetailFunction = <T extends GenericObject>(
@@ -1015,24 +1028,44 @@ const Detail: DetailFunction = <T extends GenericObject>(
     },
   );
 
+  const showRecordLine: boolean = props.showRecordLine !== false;
+
+  type IsRecordLineFieldFunction = (field: Field<T>) => boolean;
+
   /*
    * The record's own ID is not one of the fields: it goes on one small line
-   * under them, with a copy button (DetailRecordId.ts says why). A card that
-   * declared it twice still gets one line.
+   * under them, with a copy button (DetailRecordId.ts says why). So do when
+   * the record was created and last updated, after the ID
+   * (DetailRecordTime.ts). A card that declared one twice still says it once.
    */
-  const recordIdField: Field<T> | undefined = shownFields.find(
-    (field: Field<T>) => {
-      return isRecordIdField(field);
-    },
-  );
+  const isRecordLineField: IsRecordLineFieldFunction = (
+    field: Field<T>,
+  ): boolean => {
+    return (
+      showRecordLine && (isRecordIdField(field) || isRecordTimeField(field))
+    );
+  };
+
+  const recordIdField: Field<T> | undefined = showRecordLine
+    ? shownFields.find((field: Field<T>) => {
+        return isRecordIdField(field);
+      })
+    : undefined;
 
   const recordId: string =
     recordIdField && props.item
       ? getRecordIdText(getNestedValue(props.item, String(recordIdField.key)))
       : "";
 
+  const recordTimes: Array<RecordTime> =
+    showRecordLine && props.item
+      ? getRecordTimes(shownFields, (field: Field<T>): unknown => {
+          return getNestedValue(props.item, String(field.key));
+        })
+      : [];
+
   const gridFields: Array<Field<T>> = shownFields.filter((field: Field<T>) => {
-    return !isRecordIdField(field);
+    return !isRecordLineField(field);
   });
 
   const gridClassName: string = `grid grid-cols-1 ${gapClasses} sm:grid-cols-${
@@ -1045,7 +1078,7 @@ const Detail: DetailFunction = <T extends GenericObject>(
     },
   );
 
-  if (!recordId) {
+  if (!recordId && recordTimes.length === 0) {
     return (
       /*
        * The id names this detail, so it belongs to the element that holds all
@@ -1062,13 +1095,13 @@ const Detail: DetailFunction = <T extends GenericObject>(
   }
 
   /*
-   * With an ID line the detail is the fields and the line under them, so the
-   * id moves to the element that holds both. The grid inside keeps its own
-   * classes, and its rows their first/last trims; the line draws the one
+   * With a record line the detail is the fields and the line under them, so
+   * the id moves to the element that holds both. The grid inside keeps its
+   * own classes, and its rows their first/last trims; the line draws the one
    * divider above it, in the rhythm of the rows: the compact style's rows
    * are py-3 apart, the others' wider.
    */
-  const idLineClassName: string =
+  const recordLineClassName: string =
     gridFields.length === 0
       ? ""
       : styleType === DetailStyle.Compact
@@ -1082,7 +1115,11 @@ const Detail: DetailFunction = <T extends GenericObject>(
       ) : (
         <></>
       )}
-      <DetailIdLine recordId={recordId} className={idLineClassName} />
+      <DetailRecordLine
+        recordId={recordId}
+        times={recordTimes}
+        className={recordLineClassName}
+      />
     </div>
   );
 };

package/UI/Components/Detail/DetailRecordLine.tsx

@@ -0,0 +1,96 @@
+import Icon from "../Icon/Icon";
+import Tooltip from "../Tooltip/Tooltip";
+import IconProp from "../../../Types/Icon/IconProp";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
+import DetailIdLine from "./DetailIdLine";
+import {
+  getRecordTimeFullText,
+  getRecordTimeText,
+  RecordTime,
+  RecordTimeKind,
+} from "./DetailRecordTime";
+import React, { FunctionComponent, ReactElement } from "react";
+
+/*
+ * The small line a details card ends with: the record's own ID (DetailIdLine)
+ * and when the record was created - and last updated, where the card says -
+ * in place of the rows they used to take (DetailRecordId.ts and
+ * DetailRecordTime.ts say why).
+ *
+ *   - Each piece is one unit: its icon, its word and its value. On a narrow
+ *     card a piece that does not fit moves under the others whole, so the
+ *     line wraps between pieces, never inside "Created Sep 30".
+ *   - A time reads as the row it replaces did, in the reader's time zone;
+ *     hovering it gives it to the second, and its dateTime attribute gives
+ *     it to a machine.
+ *   - Nothing on it is a field: no label element, no row, no divider of its
+ *     own. Detail draws the one divider above it.
+ */
+
+export interface ComponentProps {
+  recordId?: string | undefined;
+  times?: Array<RecordTime> | undefined;
+  className?: string | undefined;
+}
+
+export interface RecordTimeProps {
+  time: RecordTime;
+}
+
+export const DetailRecordTimeElement: FunctionComponent<RecordTimeProps> = (
+  props: RecordTimeProps,
+): ReactElement => {
+  const translator: Translator = useTranslator();
+  const kind: RecordTimeKind = props.time.kind;
+  const testId: string = `detail-${kind}-at`;
+
+  // Each word written out, so the translation tooling finds it.
+  const label: string =
+    (kind === RecordTimeKind.Updated
+      ? translator.translateText("Updated")
+      : translator.translateText("Created")) || "";
+
+  return (
+    <div
+      data-testid={testId}
+      className="inline-flex min-w-0 max-w-full flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs text-gray-500"
+    >
+      <div className="inline-flex shrink-0 items-center gap-1.5 font-medium">
+        <Icon icon={IconProp.Clock} className="h-3.5 w-3.5 text-gray-400" />
+        <span data-testid={`${testId}-label`}>{label}</span>
+      </div>
+      <Tooltip text={getRecordTimeFullText(props.time.date)}>
+        <time
+          data-testid={`${testId}-value`}
+          dateTime={props.time.date.toISOString()}
+          className="min-w-0 text-gray-600"
+        >
+          {getRecordTimeText(props.time.date)}
+        </time>
+      </Tooltip>
+    </div>
+  );
+};
+
+const DetailRecordLine: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const times: Array<RecordTime> = props.times || [];
+
+  return (
+    <div
+      data-testid="detail-record-line"
+      className={`flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-gray-500 ${
+        props.className || ""
+      }`}
+    >
+      {props.recordId ? <DetailIdLine recordId={props.recordId} /> : <></>}
+      {times.map((time: RecordTime): ReactElement => {
+        return <DetailRecordTimeElement key={time.kind} time={time} />;
+      })}
+    </div>
+  );
+};
+
+export default DetailRecordLine;

package/UI/Components/Detail/DetailRecordTime.ts

@@ -0,0 +1,196 @@
+import FieldType from "../Types/FieldType";
+import OneUptimeDate from "../../../Types/Date";
+
+/*
+ * "Can you also show created along the same lines as ID so it doesn't take
+ * space up top. Please do this everywhere."
+ *
+ * When a record was created - and, on the few cards that say so, when it was
+ * last updated - is bookkeeping, like the record's own ID: worth a glance,
+ * rarely why anyone opened the page. Yet a dozen details cards gave it a row
+ * of its own, a label, a clock and a date as tall as the record's name. So
+ * Detail takes it out of the grid, as it does the ID (DetailRecordId.ts),
+ * and draws it on the small line under the fields, after the ID:
+ *
+ *   ID dafafe92… [copy]   Created Sep 30 2026, 14:25 BST
+ *
+ * "The record's creation time" is a FieldType.Date or FieldType.DateTime
+ * field on `createdAt`; its last update, the same on `updatedAt`. Pages keep
+ * declaring the field as they always have, and the line picks it up. A field
+ * drawn by its own getElement is the page's to draw.
+ *
+ * React-free on purpose, so the rule can be read and tested on its own.
+ */
+
+export enum RecordTimeKind {
+  Created = "created",
+  Updated = "updated",
+}
+
+// The column each time is kept in, on every database record.
+export const RECORD_TIME_KEYS: Record<RecordTimeKind, string> = {
+  [RecordTimeKind.Created]: "createdAt",
+  [RecordTimeKind.Updated]: "updatedAt",
+};
+
+// The order the line draws them in, after the ID.
+export const RECORD_TIME_KINDS: Array<RecordTimeKind> = [
+  RecordTimeKind.Created,
+  RecordTimeKind.Updated,
+];
+
+/*
+ * The types a page declares a time with. With a date-only type the line
+ * still gives the time of day: it is one line, read the same on every card.
+ */
+export const RECORD_TIME_FIELD_TYPES: Array<FieldType> = [
+  FieldType.Date,
+  FieldType.DateTime,
+];
+
+export interface RecordTimeFieldLike {
+  key?: unknown;
+  fieldType?: FieldType | undefined;
+  getElement?: unknown;
+}
+
+export interface RecordTime {
+  kind: RecordTimeKind;
+  date: Date;
+}
+
+// Which time a field is, or null when it is a field like any other.
+export const getRecordTimeKind: (
+  field: RecordTimeFieldLike,
+) => RecordTimeKind | null = (
+  field: RecordTimeFieldLike,
+): RecordTimeKind | null => {
+  if (
+    field.getElement ||
+    !field.fieldType ||
+    !RECORD_TIME_FIELD_TYPES.includes(field.fieldType) ||
+    field.key === null ||
+    field.key === undefined
+  ) {
+    return null;
+  }
+
+  const key: string = String(field.key);
+
+  for (const kind of RECORD_TIME_KINDS) {
+    if (RECORD_TIME_KEYS[kind] === key) {
+      return kind;
+    }
+  }
+
+  return null;
+};
+
+export const isRecordTimeField: (field: RecordTimeFieldLike) => boolean = (
+  field: RecordTimeFieldLike,
+): boolean => {
+  return getRecordTimeKind(field) !== null;
+};
+
+/*
+ * A stored time, as text, starts with its date: "2026-09-30T13:25:13.000Z",
+ * or "2026-09-30 13:25:13" as the database hands it back. Other text is not
+ * one, and is not handed to the parser, which would only warn about it.
+ */
+const STORED_TIME_TEXT: RegExp = /^\d{4}-\d{2}-\d{2}/;
+
+/*
+ * The time as a Date, from whatever the item holds: a Date on a loaded
+ * model, an ISO string, or the { _type: "DateTime", value } shape a JSON item
+ * carries. Anything else - nothing, an empty string, text that is no date -
+ * is null, which draws nothing rather than "Invalid date".
+ */
+export const getRecordTimeValue: (value: unknown) => Date | null = (
+  value: unknown,
+): Date | null => {
+  if (value === null || value === undefined || value === "") {
+    return null;
+  }
+
+  if (
+    !(value instanceof Date) &&
+    typeof value !== "string" &&
+    typeof value !== "object"
+  ) {
+    return null;
+  }
+
+  if (typeof value === "string" && !STORED_TIME_TEXT.test(value.trim())) {
+    return null;
+  }
+
+  let date: Date;
+
+  try {
+    date = OneUptimeDate.fromString(value as string | Date);
+  } catch {
+    return null;
+  }
+
+  if (!(date instanceof Date) || isNaN(date.getTime())) {
+    return null;
+  }
+
+  return date;
+};
+
+/*
+ * The times a detail's fields declare, read off its item, in the line's
+ * order. The first field of each kind counts, as with the ID: a card that
+ * declared Created twice still says it once.
+ */
+export const getRecordTimes: <TField extends RecordTimeFieldLike>(
+  fields: Array<TField>,
+  readValue: (field: TField) => unknown,
+) => Array<RecordTime> = <TField extends RecordTimeFieldLike>(
+  fields: Array<TField>,
+  readValue: (field: TField) => unknown,
+): Array<RecordTime> => {
+  const times: Array<RecordTime> = [];
+
+  for (const kind of RECORD_TIME_KINDS) {
+    const field: TField | undefined = fields.find(
+      (candidate: TField): boolean => {
+        return getRecordTimeKind(candidate) === kind;
+      },
+    );
+
+    if (!field) {
+      continue;
+    }
+
+    const date: Date | null = getRecordTimeValue(readValue(field));
+
+    if (date) {
+      times.push({ kind, date });
+    }
+  }
+
+  return times;
+};
+
+/*
+ * What the line shows: the date and the time, in the reader's time zone and
+ * clock, exactly as the row it replaces did ("Sep 30 2026, 14:25 BST").
+ */
+export const getRecordTimeText: (date: Date) => string = (
+  date: Date,
+): string => {
+  return OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(date);
+};
+
+// What hovering the time shows: all of it, to the second.
+export const getRecordTimeFullText: (date: Date) => string = (
+  date: Date,
+): string => {
+  return OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+    date,
+    false,
+    true,
+  );
+};