@oneuptime/common 14.0.12 → 14.0.13

package/UI/Components/Date/TimeRangePickerDropdown.tsx

@@ -18,6 +18,8 @@ import {
   getDropdownAlignmentClassName,
   useDropdownHorizontalAlignment,
 } from "../../Utils/DropdownAlignment";
+import { Translator, translationKey } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import Icon from "../Icon/Icon";
 import CustomTimeRangeModal from "./CustomTimeRangeModal";
 
@@ -37,7 +39,8 @@ export interface ComponentProps {
   dropdownWidthInPx: number;
 }
 
-export const CUSTOM_RANGE_OPTION_LABEL: string = "Custom Range...";
+export const CUSTOM_RANGE_OPTION_LABEL: string =
+  translationKey("Custom Range...");
 
 // Preset options to show in the dropdown, ordered shortest window first.
 export const TIME_RANGE_PRESET_OPTIONS: Array<TimeRangePickerPresetOption> = [
@@ -66,6 +69,18 @@ function formatDateShort(date: Date): string {
   return OneUptimeDate.getDateAsLocalShortDateTimeString(date);
 }
 
+/*
+ * A range's English label: its preset's ("Past 5 Minutes"), or the range
+ * itself ("Custom"). Look it up in the reader's language where it is shown.
+ */
+export function getTimeRangeLabel(range: TimeRange): string {
+  const preset: TimeRangePickerPresetOption | undefined =
+    TIME_RANGE_PRESET_OPTIONS.find((opt: TimeRangePickerPresetOption) => {
+      return opt.range === range;
+    });
+  return preset ? preset.label : range;
+}
+
 export function getTimeRangeButtonLabel(
   value: RangeStartAndEndDateTime,
 ): string {
@@ -75,16 +90,13 @@ export function getTimeRangeButtonLabel(
     return `${start} – ${end}`;
   }
 
-  const preset: TimeRangePickerPresetOption | undefined =
-    TIME_RANGE_PRESET_OPTIONS.find((opt: TimeRangePickerPresetOption) => {
-      return opt.range === value.range;
-    });
-  return preset ? preset.label : value.range;
+  return getTimeRangeLabel(value.range);
 }
 
 const TimeRangePickerDropdown: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const [isOpen, setIsOpen] = useState<boolean>(false);
   /*
    * The custom window is edited in a modal rather than inline in this panel.
@@ -174,7 +186,7 @@ const TimeRangePickerDropdown: FunctionComponent<ComponentProps> = (
         }}
       >
         <Icon icon={IconProp.Clock} className="h-3.5 w-3.5" />
-        <span>{buttonLabel}</span>
+        <span>{translator.translateText(buttonLabel)}</span>
         <Icon
           icon={IconProp.ChevronDown}
           className={`h-3 w-3 transition-transform ${isOpen ? "rotate-180" : ""}`}
@@ -209,7 +221,7 @@ const TimeRangePickerDropdown: FunctionComponent<ComponentProps> = (
                       handlePresetSelect(option.range);
                     }}
                   >
-                    {option.label}
+                    {translator.translateText(option.label)}
                   </button>
                 );
               },
@@ -226,7 +238,7 @@ const TimeRangePickerDropdown: FunctionComponent<ComponentProps> = (
               }`}
               onClick={openCustomModal}
             >
-              {CUSTOM_RANGE_OPTION_LABEL}
+              {translator.translateText(CUSTOM_RANGE_OPTION_LABEL)}
             </button>
           </div>
         </div>

package/UI/Components/DeleteConfirmation/DeleteConfirmationMessage.tsx

@@ -1,5 +1,11 @@
 import NamedSentence from "./NamedSentence";
-import { translateTemplate } from "../../Utils/TranslateTemplate";
+import {
+  getGlobalTranslator,
+  translatableTerm,
+  translateTemplate,
+  translationKey,
+  Translator,
+} from "../../Utils/TranslateTemplate";
 import React, { FunctionComponent, ReactElement } from "react";
 
 /*
@@ -29,6 +35,11 @@ export const DELETE_STATEMENT_TEMPLATE: string = "Permanently delete {{name}}.";
 export const DELETE_IRREVERSIBLE_SENTENCE: string =
   "This action cannot be undone.";
 
+// The question about a record with no name, about its kind instead.
+export const DELETE_THIS_QUESTION_TEMPLATE: string = translationKey(
+  "Are you sure you want to delete this {{itemName}}?",
+);
+
 export type DeleteConfirmationKind = "question" | "statement";
 
 /*
@@ -36,8 +47,8 @@ export type DeleteConfirmationKind = "question" | "statement";
  *
  * The question keeps the shape the product has always used, so the
  * translations that exist for it ("Are you sure you want to delete this
- * incident form?") still apply. The card's statement has no such sentence:
- * its title already says "Delete Incident Form", and a sentence built from an
+ * form?") still apply. The card's statement has no such sentence:
+ * its title already says "Delete Form", and a sentence built from an
  * English model name would be the one line of the card left in English - so
  * an unnamed card says only that the delete cannot be undone.
  */
@@ -57,6 +68,37 @@ export const getUnnamedDeleteSentence: (data: {
   return `Are you sure you want to delete this ${typeLabel}?`;
 };
 
+/*
+ * getUnnamedDeleteSentence in the reader's language: the whole sentence for
+ * the kind if a locale words it specially ("Are you sure you want to delete
+ * this form?"), else the template with the kind's name translated into it.
+ */
+export const translateUnnamedDeleteSentence: (data: {
+  typeLabel: string;
+  kind: DeleteConfirmationKind;
+}) => string = (data: {
+  typeLabel: string;
+  kind: DeleteConfirmationKind;
+}): string => {
+  const sentence: string = getUnnamedDeleteSentence(data);
+
+  if (!sentence) {
+    return "";
+  }
+
+  const translator: Translator = getGlobalTranslator();
+
+  if (translator.hasTranslation(sentence)) {
+    return translator.translateText(sentence) || sentence;
+  }
+
+  return translator.translateTemplate(DELETE_THIS_QUESTION_TEMPLATE, {
+    itemName: translatableTerm(data.typeLabel.trim() || "item", {
+      inSentence: true,
+    }),
+  });
+};
+
 export interface DeleteConfirmationTextOptions {
   // The record's name; "" when it has none.
   name: string;
@@ -107,9 +149,10 @@ export const getDeleteConfirmationText: (
           : DELETE_QUESTION_TEMPLATE,
         { name: name },
       )
-    : translateTemplate(
-        getUnnamedDeleteSentence({ typeLabel: options.typeLabel, kind: kind }),
-      );
+    : translateUnnamedDeleteSentence({
+        typeLabel: options.typeLabel,
+        kind: kind,
+      });
 
   return [firstSentence, ...getTrailingSentences(options)]
     .filter((sentence: string) => {
@@ -142,9 +185,7 @@ const DeleteConfirmationMessage: FunctionComponent<ComponentProps> = (
       title={fullName && fullName !== name ? fullName : undefined}
     />
   ) : (
-    translateTemplate(
-      getUnnamedDeleteSentence({ typeLabel: props.typeLabel, kind: kind }),
-    )
+    translateUnnamedDeleteSentence({ typeLabel: props.typeLabel, kind: kind })
   );
 
   const trailingSentences: Array<string> = getTrailingSentences({

package/UI/Components/Detail/BooleanValue.tsx

@@ -0,0 +1,45 @@
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
+import React, { FunctionComponent, ReactElement } from "react";
+
+/*
+ * A yes/no value as details and a form's summary step show it: a green "Yes"
+ * pill, or a grey "No" one. Detail draws every FieldType.Boolean field with
+ * it; a summary element of its own that still needs to say whether a box was
+ * ticked uses it too, so the two cannot drift apart.
+ */
+
+export interface ComponentProps {
+  value: boolean;
+  dataTestId?: string | undefined;
+}
+
+const BooleanValue: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const translator: Translator = useTranslator();
+
+  if (props.value) {
+    return (
+      <span
+        data-testid={props.dataTestId}
+        className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-green-50 text-green-700 text-sm font-medium"
+      >
+        <span className="w-1.5 h-1.5 rounded-full bg-green-500"></span>
+        {translator.translateText("Yes")}
+      </span>
+    );
+  }
+
+  return (
+    <span
+      data-testid={props.dataTestId}
+      className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-gray-100 text-gray-600 text-sm font-medium"
+    >
+      <span className="w-1.5 h-1.5 rounded-full bg-gray-400"></span>
+      {translator.translateText("No")}
+    </span>
+  );
+};
+
+export default BooleanValue;

package/UI/Components/Detail/Detail.tsx

@@ -1,6 +1,9 @@
 import AlignItem from "../../Types/AlignItem";
 import { Logger } from "../../Utils/Logger";
 import useTranslateValue from "../../Utils/Translation";
+import { translatableTerm, Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
+import TranslatedSentence from "../TranslatedSentence/TranslatedSentence";
 import CodeBlock from "../CodeBlock/CodeBlock";
 import ColorViewer from "../ColorViewer/ColorViewer";
 import CopyableButton from "../CopyableButton/CopyableButton";
@@ -12,6 +15,9 @@ import Link from "../Link/Link";
 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 { getRecordIdText, isRecordIdField } from "./DetailRecordId";
 import Field from "./Field";
 import FieldLabelElement from "./FieldLabel";
 import PlaceholderText from "./PlaceholderText";
@@ -52,6 +58,7 @@ const Detail: DetailFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
   const { translateString, translateValue } = useTranslateValue();
+  const translator: Translator = useTranslator();
   // Track mobile view for responsive behavior
   const [isMobile, setIsMobile] = useState<boolean>(false);
 
@@ -94,7 +101,7 @@ const Detail: DetailFunction = <T extends GenericObject>(
     if (!options) {
       return (
         <span className="text-gray-400 italic text-sm">
-          {translateString("No options found") ?? "No options found"}
+          {translateString("No options found")}
         </span>
       );
     }
@@ -384,10 +391,22 @@ const Detail: DetailFunction = <T extends GenericObject>(
             d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
           />
         </svg>
-        <span className="font-semibold text-blue-700">{minutes}</span>
-        <span className="text-xs text-blue-600 font-medium">
-          {minutes > 1 ? "minutes" : "minute"}
-        </span>
+        <TranslatedSentence
+          template={{ one: "{{count}} minute", other: "{{count}} minutes" }}
+          count={minutes}
+          slots={{
+            count: (
+              <span className="font-semibold text-blue-700">{minutes}</span>
+            ),
+          }}
+          renderText={(text: string): ReactElement => {
+            return (
+              <span className="text-xs text-blue-600 font-medium">
+                {text.trim()}
+              </span>
+            );
+          }}
+        />
       </div>
     );
   };
@@ -414,8 +433,14 @@ const Detail: DetailFunction = <T extends GenericObject>(
           >
             <div className="break-words leading-relaxed">{data}</div>
 
+            {/*
+             * Hidden text and an ID bring their own copy control. A second
+             * one here was handed the rendered ID element rather than the ID,
+             * so it copied "[object Object]" (the project ID on an API key).
+             */}
             {field.opts?.isCopyable &&
-              field.fieldType !== FieldType.HiddenText && (
+              field.fieldType !== FieldType.HiddenText &&
+              field.fieldType !== FieldType.ObjectID && (
                 <div className="opacity-0 group-hover/copyable:opacity-100 transition-all duration-200 transform group-hover/copyable:translate-x-0 -translate-x-1">
                   <CopyableButton textToBeCopied={data.toString()} />
                 </div>
@@ -568,21 +593,7 @@ const Detail: DetailFunction = <T extends GenericObject>(
     }
 
     if (field.fieldType === FieldType.Boolean) {
-      if (data) {
-        data = (
-          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-green-50 text-green-700 text-sm font-medium">
-            <span className="w-1.5 h-1.5 rounded-full bg-green-500"></span>
-            Yes
-          </span>
-        );
-      } else {
-        data = (
-          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-gray-100 text-gray-600 text-sm font-medium">
-            <span className="w-1.5 h-1.5 rounded-full bg-gray-400"></span>
-            No
-          </span>
-        );
-      }
+      data = <BooleanValue value={Boolean(data)} />;
     }
 
     if (field.fieldType === FieldType.DateTime) {
@@ -691,7 +702,13 @@ const Detail: DetailFunction = <T extends GenericObject>(
                 style={{
                   height: "100px",
                 }}
-                alt={field.title ? `${field.title} image` : "Uploaded image"}
+                alt={
+                  field.title
+                    ? translator.translateTemplate("{{field}} image", {
+                        field: translatableTerm(field.title),
+                      })
+                    : translator.translateText("Uploaded image")
+                }
               />
             </div>
           </div>
@@ -982,40 +999,90 @@ const Detail: DetailFunction = <T extends GenericObject>(
         : "gap-0 divide-y divide-gray-100";
   }
 
+  const shownFields: Array<Field<T>> = (props.fields || []).filter(
+    (field: Field<T>) => {
+      // Filter out fields with hideOnMobile on mobile devices
+      if (field.hideOnMobile && isMobile) {
+        return false;
+      }
+
+      // check if showIf exists.
+      if (field.showIf) {
+        return field.showIf(props.item);
+      }
+
+      return true;
+    },
+  );
+
+  /*
+   * 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.
+   */
+  const recordIdField: Field<T> | undefined = shownFields.find(
+    (field: Field<T>) => {
+      return isRecordIdField(field);
+    },
+  );
+
+  const recordId: string =
+    recordIdField && props.item
+      ? getRecordIdText(getNestedValue(props.item, String(recordIdField.key)))
+      : "";
+
+  const gridFields: Array<Field<T>> = shownFields.filter((field: Field<T>) => {
+    return !isRecordIdField(field);
+  });
+
+  const gridClassName: string = `grid grid-cols-1 ${gapClasses} sm:grid-cols-${
+    props.showDetailsInNumberOfColumns || 1
+  } w-full`;
+
+  const renderedFields: Array<ReactElement> = gridFields.map(
+    (field: Field<T>, i: number) => {
+      return getField(field, i);
+    },
+  );
+
+  if (!recordId) {
+    return (
+      /*
+       * The id names this detail, so it belongs to the element that holds all
+       * of it. It used to be stamped on every row instead, which put the same
+       * id on as many elements as the detail had fields: invalid HTML, an
+       * anchor or getElementById that reaches only the first row, and a
+       * Playwright locator that resolves to several elements and fails strict
+       * mode - which is how the SLO settings E2E found it.
+       */
+      <div id={props.id} className={gridClassName}>
+        {renderedFields}
+      </div>
+    );
+  }
+
+  /*
+   * 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
+   * divider above it, in the rhythm of the rows: the compact style's rows
+   * are py-3 apart, the others' wider.
+   */
+  const idLineClassName: string =
+    gridFields.length === 0
+      ? ""
+      : styleType === DetailStyle.Compact
+        ? "mt-3 border-t border-gray-100 pt-3"
+        : "mt-4 border-t border-gray-100 pt-3";
+
   return (
-    /*
-     * The id names this detail, so it belongs to the element that holds all of
-     * it. It used to be stamped on every row instead, which put the same id on
-     * as many elements as the detail had fields: invalid HTML, an anchor or
-     * getElementById that reaches only the first row, and a Playwright locator
-     * that resolves to several elements and fails strict mode - which is how
-     * the SLO settings E2E found it.
-     */
-    <div
-      id={props.id}
-      className={`grid grid-cols-1 ${gapClasses} sm:grid-cols-${
-        props.showDetailsInNumberOfColumns || 1
-      } w-full`}
-    >
-      {props.fields &&
-        props.fields.length > 0 &&
-        props.fields
-          .filter((field: Field<T>) => {
-            // Filter out fields with hideOnMobile on mobile devices
-            if (field.hideOnMobile && isMobile) {
-              return false;
-            }
-
-            // check if showIf exists.
-            if (field.showIf) {
-              return field.showIf(props.item);
-            }
-
-            return true;
-          })
-          .map((field: Field<T>, i: number) => {
-            return getField(field, i);
-          })}
+    <div id={props.id} className="w-full">
+      {gridFields.length > 0 ? (
+        <div className={gridClassName}>{renderedFields}</div>
+      ) : (
+        <></>
+      )}
+      <DetailIdLine recordId={recordId} className={idLineClassName} />
     </div>
   );
 };

package/UI/Components/Detail/DetailIdLine.tsx

@@ -0,0 +1,229 @@
+import Icon from "../Icon/Icon";
+import Tooltip from "../Tooltip/Tooltip";
+import IconProp from "../../../Types/Icon/IconProp";
+import Clipboard from "../../Utils/Clipboard";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
+import {
+  RECORD_ID_COPIED_FEEDBACK_MS,
+  SHORT_RECORD_ID_LENGTH,
+  SHORT_RECORD_ID_WIDTH,
+} from "./DetailRecordId";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+/*
+ * The record's own ID, under a details card's fields: "ID", the first
+ * characters of it and a copy button - in place of the full-width field it
+ * used to be, often the first one on the page (see DetailRecordId.ts).
+ *
+ *   - The whole ID is the element's text, clipped to its first group and
+ *     an ellipsis. So a copy, a select-all (one click selects it all) and
+ *     the browser's find-in-page all see the full ID, and so does a screen
+ *     reader.
+ *   - Hovering the ID shows all of it. Clicking it copies it, as clicking
+ *     the old ID pill did; the button beside it copies it too, and is what a
+ *     keyboard reaches.
+ *   - A copy the browser refuses says so instead of showing a tick, and
+ *     unclips the ID so it can be read, selected and copied by hand.
+ *   - The icon is the ID card "Show ID" wears in every table's ⋯ menu, so an
+ *     ID looks the same wherever it is offered.
+ */
+
+export interface ComponentProps {
+  recordId: string;
+  className?: string | undefined;
+}
+
+enum CopyState {
+  Idle = "idle",
+  Copied = "copied",
+  Failed = "failed",
+}
+
+const DetailIdLine: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const translator: Translator = useTranslator();
+  const [copyState, setCopyState] = useState<CopyState>(CopyState.Idle);
+
+  const resetTimerRef: React.MutableRefObject<ReturnType<
+    typeof setTimeout
+  > | null> = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isMountedRef: React.MutableRefObject<boolean> = useRef<boolean>(true);
+  const recordIdRef: React.MutableRefObject<string> = useRef<string>(
+    props.recordId,
+  );
+
+  type ClearResetTimerFunction = () => void;
+
+  const clearResetTimer: ClearResetTimerFunction = (): void => {
+    if (resetTimerRef.current) {
+      clearTimeout(resetTimerRef.current);
+      resetTimerRef.current = null;
+    }
+  };
+
+  useEffect(() => {
+    isMountedRef.current = true;
+
+    return () => {
+      isMountedRef.current = false;
+      clearResetTimer();
+    };
+  }, []);
+
+  /*
+   * The page moved to another record without remounting the card: what was
+   * said about the last one's ID is not true of this one.
+   */
+  useEffect(() => {
+    recordIdRef.current = props.recordId;
+    clearResetTimer();
+    setCopyState(CopyState.Idle);
+  }, [props.recordId]);
+
+  type CopyFunction = () => Promise<void>;
+
+  const copy: CopyFunction = async (): Promise<void> => {
+    const recordId: string = props.recordId;
+    const hasCopied: boolean = await Clipboard.copyToClipboard(recordId);
+
+    // Unmounted, or already showing another record, while the copy ran.
+    if (!isMountedRef.current || recordIdRef.current !== recordId) {
+      return;
+    }
+
+    clearResetTimer();
+
+    if (!hasCopied) {
+      setCopyState(CopyState.Failed);
+      return;
+    }
+
+    setCopyState(CopyState.Copied);
+    resetTimerRef.current = setTimeout(() => {
+      resetTimerRef.current = null;
+
+      if (isMountedRef.current) {
+        setCopyState(CopyState.Idle);
+      }
+    }, RECORD_ID_COPIED_FEEDBACK_MS);
+  };
+
+  const isCopied: boolean = copyState === CopyState.Copied;
+  const isFailed: boolean = copyState === CopyState.Failed;
+
+  const isClipped: boolean =
+    !isFailed && props.recordId.length > SHORT_RECORD_ID_LENGTH;
+
+  /*
+   * The ID and its ellipsis each name font-mono themselves: the Dashboard's
+   * index.ejs sets Inter on `*`, which beats a font inherited from a parent.
+   * An ID reads left to right in every language, and is clipped at its end:
+   * in a right-to-left page the clip would otherwise keep its last group.
+   */
+  const value: ReactElement = (
+    <span
+      data-testid="detail-id-value-wrapper"
+      dir="ltr"
+      className="inline-flex min-w-0 cursor-pointer items-baseline text-gray-600 hover:text-gray-900"
+      onClick={() => {
+        void copy();
+      }}
+    >
+      <code
+        data-testid="detail-id-value"
+        className={`min-w-0 select-all font-mono ${
+          isFailed
+            ? "whitespace-normal break-all"
+            : "overflow-hidden whitespace-nowrap"
+        }`}
+        style={isFailed ? undefined : { maxWidth: SHORT_RECORD_ID_WIDTH }}
+      >
+        {props.recordId}
+      </code>
+      {isClipped ? (
+        <span
+          aria-hidden="true"
+          data-testid="detail-id-ellipsis"
+          className="font-mono"
+        >
+          …
+        </span>
+      ) : (
+        <></>
+      )}
+    </span>
+  );
+
+  let statusText: string = "";
+
+  if (isCopied) {
+    statusText = translator.translateText("Copied to clipboard") || "";
+  } else if (isFailed) {
+    statusText = translator.translateText("Copy failed") || "";
+  }
+
+  return (
+    <div
+      data-testid="detail-id-line"
+      className={`flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-gray-500 ${
+        props.className || ""
+      }`}
+    >
+      <div className="inline-flex shrink-0 items-center gap-1.5 font-medium">
+        <Icon
+          icon={IconProp.Identification}
+          className="h-3.5 w-3.5 text-gray-400"
+        />
+        <span data-testid="detail-id-label">
+          {translator.translateText("ID")}
+        </span>
+      </div>
+
+      {/* Once unclipped, the ID itself is what there is to read. */}
+      {isFailed ? value : <Tooltip text={props.recordId}>{value}</Tooltip>}
+
+      <Tooltip
+        text={isCopied ? "Copied!" : "Copy ID to clipboard"}
+        // The button's own name already says it.
+        isTriggerAlreadyDescribed={true}
+      >
+        <button
+          type="button"
+          data-testid="detail-id-copy"
+          aria-label={translator.translateText("Copy ID to clipboard")}
+          className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
+          onClick={() => {
+            void copy();
+          }}
+        >
+          <Icon
+            icon={isCopied ? IconProp.Check : IconProp.Copy}
+            className={`h-3.5 w-3.5 ${isCopied ? "text-emerald-600" : ""}`}
+          />
+        </button>
+      </Tooltip>
+
+      {/*
+       * Said to a screen reader either way; a failure is shown as well,
+       * since the tick it replaces would otherwise be the only signal.
+       */}
+      <span
+        role="status"
+        data-testid="detail-id-status"
+        className={isFailed ? "text-red-600" : "sr-only"}
+      >
+        {statusText}
+      </span>
+    </div>
+  );
+};
+
+export default DetailIdLine;