@oneuptime/common 14.0.11 → 14.0.12

package/UI/Components/BulkUpdate/BulkUpdateForm.tsx

@@ -55,6 +55,11 @@ export interface BulkActionButtonSchema<T extends GenericObject> {
   shortcutKey?: undefined | ShortcutKey;
   confirmMessage?: ((items: Array<T>) => string) | undefined;
   confirmTitle?: ((items: Array<T>) => string) | undefined;
+  /*
+   * Drawn under confirmMessage: which records the action is about to touch,
+   * where the count alone does not say (DeleteItemNames lists them).
+   */
+  confirmDetails?: ((items: Array<T>) => ReactElement | undefined) | undefined;
   confirmButtonStyleType?: ButtonStyleType;
 }
 
@@ -173,6 +178,7 @@ const BulkUpdateForm: <T extends GenericObject>(
           ? button.confirmTitle(props.selectedItems)
           : "Confirm",
         description: button.confirmMessage(props.selectedItems),
+        children: button.confirmDetails?.(props.selectedItems),
         submitButtonType: button.confirmButtonStyleType,
         submitButtonText: button.title,
         onClose: () => {

package/UI/Components/Button/Button.tsx

@@ -133,7 +133,15 @@ const Button: FunctionComponent<ComponentProps> = ({
     }
   };
 
-  let buttonStyleCssClass: string = `inline-flex w-full justify-center rounded-md border border-gray-300 bg-white text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
+  /*
+   * The focus ring is for keyboard focus only (focus-visible). Drawn on every
+   * :focus it also ringed whatever a script focused: a dialog opened with a
+   * click put its initial focus on Cancel, and the ring made Cancel the most
+   * prominent button on the dialog - a plain button wearing the highlight the
+   * action should have. The browser still draws it for anyone moving through
+   * the page with the keyboard, which is who it is for.
+   */
+  let buttonStyleCssClass: string = `inline-flex w-full justify-center rounded-md border border-gray-300 bg-white text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   let loadingIconClassName: string = `w-5 h-5 mr-3 -ml-1 mr-1 animate-spin`;
   let iconClassName: string = `w-5 h-5`;
 
@@ -165,39 +173,39 @@ const Button: FunctionComponent<ComponentProps> = ({
   if (buttonStyle === ButtonStyleType.DANGER) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 text-base font-medium text-white shadow-sm ${
       disabled ? "" : "hover:bg-red-700"
-    } focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
+    } focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.DANGER_OUTLINE) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-red-700 bg-white text-base font-medium text-red-700 shadow-sm ${
       disabled ? "" : "hover:bg-red-50"
-    } focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
+    } focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.PRIMARY) {
     loadingIconClassName += ` text-indigo-100`;
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent ${
       disabled ? "bg-indigo-300" : "bg-indigo-600 hover:bg-indigo-700"
-    } text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
+    } text-base font-medium text-white shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.SECONDARY) {
     loadingIconClassName += ` text-indigo-500`;
     buttonStyleCssClass = `inline-flex rounded-md border border-transparent ${
       disabled ? "bg-indigo-300" : "bg-indigo-100 hover:bg-indigo-200"
-    } text-sm font-medium text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`;
+    } text-sm font-medium text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2`;
   }
 
   if (buttonStyle === ButtonStyleType.ICON_LIGHT) {
     buttonStyleCssClass = `rounded-md bg-white text-gray-400 ${
       disabled ? "" : "hover:text-gray-500"
-    }  focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`;
+    }  focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2`;
   }
 
   if (buttonStyle === ButtonStyleType.ICON) {
     buttonStyleCssClass = `rounded-md bg-transparent text-gray-600 ${
       disabled ? "" : "hover:text-gray-900"
-    }  focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`;
+    }  focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2`;
   }
 
   if (
@@ -224,25 +232,25 @@ const Button: FunctionComponent<ComponentProps> = ({
   if (buttonStyle === ButtonStyleType.SUCCESS) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-green-600 text-base font-medium text-white shadow-sm ${
       disabled ? "" : "hover:bg-green-700"
-    }  focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
+    }  focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.SUCCESS_OUTLINE) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-green-700 bg-white text-base font-medium text-green-700 shadow-sm ${
       disabled ? "" : "hover:bg-green-50"
-    }  focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
+    }  focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.WARNING) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-yellow-600 text-base font-medium text-white shadow-sm  ${
       disabled ? "" : "hover:bg-yellow-700"
-    }  focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
+    }  focus:outline-none focus-visible:ring-2 focus-visible:ring-yellow-500 focus-visible:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.WARNING_OUTLINE) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-yellow-700 bg-white text-base font-medium text-yellow-700 shadow-sm ${
       disabled ? "" : "hover:bg-yellow-50"
-    }   focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
+    }   focus:outline-none focus-visible:ring-2 focus-visible:ring-yellow-500 focus-visible:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   }
 
   // Center the icon against both desktop and taller mobile label lines.

package/UI/Components/Card/Card.tsx

@@ -30,8 +30,16 @@ export interface CardButtonSchema {
  * word or two wide beside the buttons, so "stacked" gives the title and
  * description the whole width and moves the actions onto their own row
  * underneath.
+ *
+ * "inline" keeps what is on the right beside the title at any width they
+ * both fit in, phones included, and is for something small such as a status
+ * badge. Below md the default layout always drops it under the title and
+ * centres it, which suits a row of buttons but leaves a badge alone in the
+ * middle of a phone's card; from md up it also holds it 12px short of the
+ * card's right edge. Inline ends it at the edge the card's content ends at,
+ * and when the two do not fit it goes under the title, at its left edge.
  */
-export type CardHeaderLayout = "default" | "stacked";
+export type CardHeaderLayout = "default" | "stacked" | "inline";
 
 export interface ComponentProps {
   title?: string | ReactElement | undefined;
@@ -91,25 +99,31 @@ const Card: FunctionComponent<ComponentProps> = (
     );
   };
 
+  const titleElement: ReactElement | false | "" | undefined =
+    translatedTitle && (
+      <h2
+        data-testid="card-details-heading"
+        id="card-details-heading"
+        className="text-lg font-semibold leading-6 text-gray-900"
+      >
+        {translatedTitle}
+      </h2>
+    );
+
+  const descriptionElement: ReactElement | false | "" | undefined =
+    translatedDescription && (
+      <p
+        data-testid="card-description"
+        className="mt-1.5 text-sm text-gray-500 w-full max-md:hidden md:block leading-relaxed"
+      >
+        {translatedDescription}
+      </p>
+    );
+
   const titleAndDescription: ReactElement = (
     <React.Fragment>
-      {translatedTitle && (
-        <h2
-          data-testid="card-details-heading"
-          id="card-details-heading"
-          className="text-lg font-semibold leading-6 text-gray-900"
-        >
-          {translatedTitle}
-        </h2>
-      )}
-      {translatedDescription && (
-        <p
-          data-testid="card-description"
-          className="mt-1.5 text-sm text-gray-500 w-full max-md:hidden md:block leading-relaxed"
-        >
-          {translatedDescription}
-        </p>
-      )}
+      {titleElement}
+      {descriptionElement}
     </React.Fragment>
   );
 
@@ -136,6 +150,33 @@ const Card: FunctionComponent<ComponentProps> = (
     </div>
   );
 
+  /*
+   * The title and what is on the right share one row that wraps: beside
+   * each other while both fit, and the right element under the title, at
+   * its left edge, when they do not (a long badge on a phone). The title is
+   * never squeezed into two lines to make room. The description is not part
+   * of that row, so its length cannot push the right element off it.
+   */
+  const inlineHeader: ReactElement = (
+    <div data-testid="card-header" data-header-layout="inline">
+      <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2">
+        {titleElement}
+        {(props.rightElement || hasButtons) && (
+          <div
+            data-testid="card-header-actions"
+            className="flex flex-wrap items-center gap-2 [&_button]:ml-0 [&_button]:md:ml-0"
+          >
+            {props.rightElement && (
+              <div className="flex items-center">{props.rightElement}</div>
+            )}
+            {hasButtons && renderButtons()}
+          </div>
+        )}
+      </div>
+      {descriptionElement}
+    </div>
+  );
+
   const defaultHeader: ReactElement = (
     <div className="flex flex-col md:flex-row md:justify-between md:items-start">
       <div
@@ -163,7 +204,11 @@ const Card: FunctionComponent<ComponentProps> = (
       <div data-testid="card" className={`mb-5 ${props.className || ""}`}>
         <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-visible">
           <div className="py-6 px-5 md:px-6">
-            {isStacked ? stackedHeader : defaultHeader}
+            {isStacked
+              ? stackedHeader
+              : props.headerLayout === "inline"
+                ? inlineHeader
+                : defaultHeader}
 
             {props.children && (
               <div className={props.bodyClassName || "mt-4"}>

package/UI/Components/Charts/ChartGroup/ChartGroup.tsx

@@ -276,10 +276,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
         onClose={() => {
           setMetricInfoModalChart(null);
         }}
-        onSubmit={() => {
-          setMetricInfoModalChart(null);
-        }}
-        submitButtonText="Close"
+        closeButtonText="Close"
         modalWidth={ModalWidth.Normal}
       >
         <div className="space-y-4">

package/UI/Components/CodeEditor/CodeEditor.tsx

@@ -39,6 +39,7 @@ import IconProp from "../../../Types/Icon/IconProp";
 import React, {
   FunctionComponent,
   ReactElement,
+  ReactNode,
   useEffect,
   useId,
   useLayoutEffect,
@@ -93,6 +94,27 @@ export interface ComponentProps {
   maxHeight?: string | undefined;
   /** JSON only: the field is read with JSON5, so judge it by JSON5's rules. */
   allowJSON5?: boolean | undefined;
+  /**
+   * More buttons for the toolbar, handed what they need to put text in the
+   * document - the workflow builder's "Insert value" is one.
+   */
+  toolbarActions?: ((editor: CodeEditorActions) => ReactNode) | undefined;
+}
+
+/**
+ * What a toolbar action can do with the document. The selection is the one
+ * the textarea had before the action's button took the focus: a textarea
+ * keeps it while it is not focused.
+ */
+export interface CodeEditorActions {
+  getText: () => string;
+  getSelection: () => { start: number; end: number };
+  /**
+   * Put text in place of the selection, as one step on the browser's undo
+   * stack, and leave the caret after it.
+   */
+  insertText: (text: string) => void;
+  focus: () => void;
 }
 
 /*
@@ -929,6 +951,52 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
     ? !props.disableSpellCheck
     : false;
 
+  const actions: CodeEditorActions = {
+    getText: (): string => {
+      return textareaRef.current?.value ?? textRef.current;
+    },
+    getSelection: (): { start: number; end: number } => {
+      const textarea: HTMLTextAreaElement | null = textareaRef.current;
+
+      if (!textarea) {
+        return { start: textRef.current.length, end: textRef.current.length };
+      }
+
+      return {
+        start: Math.min(textarea.selectionStart, textarea.selectionEnd),
+        end: Math.max(textarea.selectionStart, textarea.selectionEnd),
+      };
+    },
+    insertText: (insert: string): void => {
+      const textarea: HTMLTextAreaElement | null = textareaRef.current;
+
+      if (!textarea || readOnly) {
+        return;
+      }
+
+      const from: number = Math.min(
+        textarea.selectionStart,
+        textarea.selectionEnd,
+      );
+      const to: number = Math.max(
+        textarea.selectionStart,
+        textarea.selectionEnd,
+      );
+
+      textarea.focus();
+      applyEditToTextarea(textarea, {
+        from: from,
+        to: to,
+        insert: insert,
+        selectionStart: from + insert.length,
+        selectionEnd: from + insert.length,
+      });
+    },
+    focus: (): void => {
+      textareaRef.current?.focus();
+    },
+  };
+
   const describedBy: string =
     [
       props.ariaDescribedby,
@@ -996,6 +1064,7 @@ const CodeEditor: FunctionComponent<ComponentProps> = (
         </div>
 
         <div className="flex shrink-0 items-center gap-0.5">
+          {props.toolbarActions && !readOnly && props.toolbarActions(actions)}
           {showExampleButton && (
             <button
               type="button"

package/UI/Components/CollapsibleSection/CollapsibleSection.tsx

@@ -47,7 +47,9 @@ const CollapsibleSection: FunctionComponent<ComponentProps> = (
   const variant: CollapsibleSectionVariant = props.variant || "default";
 
   // Associate the role="button" header with its visible title text (WCAG 4.1.2).
-  const collapsibleTitleId: string = `collapsible-title-${React.useId()}`;
+  const sectionId: string = React.useId();
+  const collapsibleTitleId: string = `collapsible-title-${sectionId}`;
+  const collapsibleBodyId: string = `collapsible-body-${sectionId}`;
 
   const getContainerClassName: () => string = (): string => {
     const baseClassName: string = props.className || "";
@@ -100,6 +102,7 @@ const CollapsibleSection: FunctionComponent<ComponentProps> = (
           }
         }}
         aria-expanded={!isCollapsed}
+        aria-controls={collapsibleBodyId}
         aria-labelledby={collapsibleTitleId}
       >
         <div className="flex items-center flex-1 min-w-0">
@@ -146,9 +149,22 @@ const CollapsibleSection: FunctionComponent<ComponentProps> = (
         )}
       </div>
 
+      {/*
+       * The body stays mounted while collapsed, so the fields in it keep
+       * their state. Folded, it is also `invisible` (visibility: hidden):
+       * max-h-0 and opacity-0 alone stop the fields being SEEN, but they were
+       * still tab stops and still read out, so a keyboard user filled in an
+       * "Advanced Options" field they could not see. A transition follows
+       * the property list of the state it goes to: folding transitions
+       * visibility with the rest, so it turns invisible once the fold has
+       * finished; opening leaves it out, so the fields are reachable at once.
+       */}
       <div
-        className={`transition-all duration-200 ease-in-out overflow-hidden ${
-          isCollapsed ? "max-h-0 opacity-0" : "max-h-[5000px] opacity-100"
+        id={collapsibleBodyId}
+        className={`duration-200 ease-in-out overflow-hidden ${
+          isCollapsed
+            ? "max-h-0 opacity-0 invisible transition-all"
+            : "max-h-[5000px] opacity-100 transition-[max-height,opacity]"
         }`}
       >
         <div className={getContentClassName()}>{props.children}</div>

package/UI/Components/DeleteConfirmation/DeleteConfirmationMessage.tsx

@@ -0,0 +1,175 @@
+import NamedSentence from "./NamedSentence";
+import { translateTemplate } from "../../Utils/TranslateTemplate";
+import React, { FunctionComponent, ReactElement } from "react";
+
+/*
+ * The sentence every delete confirmation in the product says, naming what is
+ * about to be deleted.
+ *
+ * "Are you sure you want to delete this workflow?" was true of every workflow
+ * in the project, so it told the user nothing at the one moment they wanted to
+ * be sure which one was going. Now the dialog says "Are you sure you want to
+ * delete Notify on-call?", with the name in bold so it reads as the thing and
+ * not as part of the sentence; the dialog's title still says what kind of
+ * thing it is ("Delete Workflow").
+ *
+ * The name is a {{placeholder}} in a whole translated sentence, never a word
+ * glued between translated pieces, so every language puts it where its own
+ * grammar wants it. A record with no name falls back to the sentence about
+ * its kind ("this workflow"), which is what the product said before.
+ */
+
+// The confirmation itself.
+export const DELETE_QUESTION_TEMPLATE: string =
+  "Are you sure you want to delete {{name}}?";
+
+// The card the Delete button sits on, before anything is clicked.
+export const DELETE_STATEMENT_TEMPLATE: string = "Permanently delete {{name}}.";
+
+export const DELETE_IRREVERSIBLE_SENTENCE: string =
+  "This action cannot be undone.";
+
+export type DeleteConfirmationKind = "question" | "statement";
+
+/*
+ * The sentence for a record that has no name, about its kind instead.
+ *
+ * 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
+ * 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.
+ */
+export const getUnnamedDeleteSentence: (data: {
+  typeLabel: string;
+  kind: DeleteConfirmationKind;
+}) => string = (data: {
+  typeLabel: string;
+  kind: DeleteConfirmationKind;
+}): string => {
+  if (data.kind === "statement") {
+    return "";
+  }
+
+  const typeLabel: string = data.typeLabel.trim().toLowerCase() || "item";
+
+  return `Are you sure you want to delete this ${typeLabel}?`;
+};
+
+export interface DeleteConfirmationTextOptions {
+  // The record's name; "" when it has none.
+  name: string;
+  // What kind of thing it is, for a record with no name: "workflow".
+  typeLabel: string;
+  kind?: DeleteConfirmationKind | undefined;
+  // Ends with "This action cannot be undone." unless false.
+  isIrreversible?: boolean | undefined;
+  // A further sentence, after everything else.
+  warning?: string | undefined;
+}
+
+type GetSentencesFunction = (
+  options: DeleteConfirmationTextOptions,
+) => Array<string>;
+
+// Every sentence after the first: the parts that do not name anything.
+const getTrailingSentences: GetSentencesFunction = (
+  options: DeleteConfirmationTextOptions,
+): Array<string> => {
+  const sentences: Array<string> = [];
+
+  if (options.isIrreversible !== false) {
+    sentences.push(translateTemplate(DELETE_IRREVERSIBLE_SENTENCE));
+  }
+
+  if (options.warning?.trim()) {
+    sentences.push(options.warning.trim());
+  }
+
+  return sentences;
+};
+
+/*
+ * The same sentences as plain text, for places that only take a string - an
+ * aria-label, a test's expectation.
+ */
+export const getDeleteConfirmationText: (
+  options: DeleteConfirmationTextOptions,
+) => string = (options: DeleteConfirmationTextOptions): string => {
+  const kind: DeleteConfirmationKind = options.kind || "question";
+  const name: string = options.name.trim();
+
+  const firstSentence: string = name
+    ? translateTemplate(
+        kind === "statement"
+          ? DELETE_STATEMENT_TEMPLATE
+          : DELETE_QUESTION_TEMPLATE,
+        { name: name },
+      )
+    : translateTemplate(
+        getUnnamedDeleteSentence({ typeLabel: options.typeLabel, kind: kind }),
+      );
+
+  return [firstSentence, ...getTrailingSentences(options)]
+    .filter((sentence: string) => {
+      return sentence.length > 0;
+    })
+    .join(" ");
+};
+
+export interface ComponentProps extends DeleteConfirmationTextOptions {
+  // The full name, shown on hover when `name` was shortened to fit.
+  fullName?: string | undefined;
+  dataTestId?: string | undefined;
+}
+
+const DeleteConfirmationMessage: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const kind: DeleteConfirmationKind = props.kind || "question";
+  const name: string = props.name.trim();
+  const fullName: string = props.fullName?.trim() || "";
+
+  const firstSentence: ReactElement | string = name ? (
+    <NamedSentence
+      template={
+        kind === "statement"
+          ? DELETE_STATEMENT_TEMPLATE
+          : DELETE_QUESTION_TEMPLATE
+      }
+      name={name}
+      title={fullName && fullName !== name ? fullName : undefined}
+    />
+  ) : (
+    translateTemplate(
+      getUnnamedDeleteSentence({ typeLabel: props.typeLabel, kind: kind }),
+    )
+  );
+
+  const trailingSentences: Array<string> = getTrailingSentences({
+    name: name,
+    typeLabel: props.typeLabel,
+    isIrreversible: props.isIrreversible,
+    warning: props.warning,
+  });
+
+  return (
+    <span data-testid={props.dataTestId || "delete-confirmation-message"}>
+      {firstSentence}
+      {trailingSentences.map((sentence: string, index: number) => {
+        // A space between sentences, but none before the first thing drawn.
+        const isFirst: boolean = index === 0 && firstSentence === "";
+
+        return (
+          <React.Fragment key={index}>
+            {isFirst ? "" : " "}
+            {sentence}
+          </React.Fragment>
+        );
+      })}
+    </span>
+  );
+};
+
+export default DeleteConfirmationMessage;

package/UI/Components/DeleteConfirmation/DeleteItemNames.tsx

@@ -0,0 +1,71 @@
+import { NameListSummary, summarizeNames } from "../../Utils/ModelDisplayName";
+import { translateTemplate } from "../../Utils/TranslateTemplate";
+import React, { FunctionComponent, ReactElement } from "react";
+
+/*
+ * Which records a bulk delete is about to remove, under its "Are you sure you
+ * want to delete 12 monitors?".
+ *
+ * A count says how many, not which. The user picked these rows by hand, often
+ * across pages and after a filter, and this is the last moment to notice that
+ * one of them should not be there - so the first few are named, and the rest
+ * are counted ("and 7 more") rather than turning the dialog into the list it
+ * came from.
+ */
+
+export const DELETE_MORE_ITEMS_TEMPLATE: string = "and {{remaining}} more";
+
+export interface ComponentProps {
+  // The names of the selected records that have one, in selection order.
+  names: Array<string>;
+  // How many records are selected, named or not.
+  totalCount: number;
+  maxShown?: number | undefined;
+}
+
+const DeleteItemNames: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const summary: NameListSummary = summarizeNames({
+    names: props.names,
+    totalCount: props.totalCount,
+    maxShown: props.maxShown,
+  });
+
+  // Nothing to name: the count in the sentence above is all there is to say.
+  if (summary.shownNames.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <div data-testid="delete-confirmation-items">
+      <ul className="list-disc space-y-0.5 pl-5 text-sm text-gray-900">
+        {summary.shownNames.map((name: string, index: number) => {
+          return (
+            <li
+              key={`${index}-${name}`}
+              data-testid="delete-confirmation-item"
+              className="break-words font-medium"
+            >
+              {name}
+            </li>
+          );
+        })}
+      </ul>
+      {summary.remainingCount > 0 ? (
+        <p
+          data-testid="delete-confirmation-more-items"
+          className="mt-1 pl-5 text-sm text-gray-500"
+        >
+          {translateTemplate(DELETE_MORE_ITEMS_TEMPLATE, {
+            remaining: summary.remainingCount.toLocaleString(),
+          })}
+        </p>
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+};
+
+export default DeleteItemNames;

package/UI/Components/DeleteConfirmation/NamedSentence.tsx

@@ -0,0 +1,55 @@
+import {
+  TemplateAround,
+  TemplateValues,
+  translateTemplateAround,
+} from "../../Utils/TranslateTemplate";
+import React, { FunctionComponent, ReactElement } from "react";
+
+/*
+ * A translated sentence with one name in it, drawn in bold: "Are you sure you
+ * want to remove {{name}} from this incident?".
+ *
+ * The bold is what makes "Delete Notify on-call?" read as the workflow and not
+ * as two more words of the question, and what lets a name with a question
+ * mark or the word "delete" in it be told apart from the sentence around it.
+ * The name itself never goes through translation; see translateTemplateAround.
+ */
+
+export interface ComponentProps {
+  // English template, also the translation key; holds {{<slot>}} once.
+  template: string;
+  name: string;
+  // The placeholder the name fills. Defaults to "name".
+  slot?: string | undefined;
+  // Other placeholders in the template.
+  values?: TemplateValues | undefined;
+  // Shown on hover, for a name shortened to fit.
+  title?: string | undefined;
+  dataTestId?: string | undefined;
+}
+
+const NamedSentence: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const around: TemplateAround = translateTemplateAround(
+    props.template,
+    props.slot || "name",
+    props.values,
+  );
+
+  return (
+    <>
+      {around.before}
+      <strong
+        data-testid={props.dataTestId || "delete-confirmation-name"}
+        className="break-words font-semibold text-gray-900"
+        title={props.title}
+      >
+        {props.name}
+      </strong>
+      {around.after}
+    </>
+  );
+};
+
+export default NamedSentence;