@oneuptime/common 14.0.12 → 14.0.13

package/UI/Components/Markdown.tsx/MarkdownToolbarLayout.ts

@@ -0,0 +1,260 @@
+/*
+ * Which of the Markdown editor's formatting buttons fit on its toolbar's one
+ * line, and what goes under the More formatting button (...) when they do
+ * not all fit.
+ *
+ * The toolbar used to wrap. In a dialog the width of a note template form
+ * its buttons took two lines, and on a phone five. It now keeps one line at
+ * any width: the formatting buttons stay in their order, those that do not
+ * fit leave from the end into the menu, and the menu button takes their
+ * place. Two things stay on the line, because they are not formatting: the
+ * Markdown / Visual switch and, when the field has template variables,
+ * Insert variable. When even the first group of buttons (Bold, Italic,
+ * Underline, Strikethrough) would not fit beside them, the switch moves into
+ * the menu too: Insert variable is what a template form is for, so it keeps
+ * its place and its words.
+ *
+ * Every formatting button is the same square (TOOLBAR_BUTTON_PX), so where
+ * the line ends is arithmetic: MarkdownEditor measures only the line itself
+ * and the two controls whose words set their width.
+ *
+ * Pure: widths in, a layout out.
+ */
+
+// A formatting button: w-8, a 32px square.
+export const TOOLBAR_BUTTON_PX: number = 32;
+
+// The toolbar's gap-1 between its buttons, dividers and controls.
+export const TOOLBAR_GAP_PX: number = 4;
+
+// The w-px line between two groups of buttons.
+export const TOOLBAR_DIVIDER_PX: number = 1;
+
+/*
+ * Room kept spare, so a line that would fit by a hair - fractional widths,
+ * a zoomed page, a font that arrives late - does not spill instead.
+ */
+export const TOOLBAR_SLACK_PX: number = 2;
+
+/*
+ * The first group's four buttons: fewer than this beside the switch, and the
+ * switch gives up its place on the line before the buttons do.
+ */
+export const TOOLBAR_MIN_BUTTONS: number = 4;
+
+export interface MarkdownToolbarMeasurements {
+  // The width of the toolbar's line, inside its padding.
+  availableWidth: number;
+  // How many formatting buttons each group has, in toolbar order.
+  groupSizes: ReadonlyArray<number>;
+  // The Markdown / Visual switch, as it reads now.
+  modeToggleWidth: number;
+  // Insert variable; 0 when the field has no template variables.
+  variableButtonWidth: number;
+}
+
+export interface MarkdownToolbarLayout {
+  // The first this many formatting buttons are on the line, the rest in the menu.
+  visibleButtonCount: number;
+  // The Markdown / Visual switch is on the line, not in the menu.
+  isModeToggleInBar: boolean;
+  // The More formatting button is there: something is in its menu.
+  hasMoreMenu: boolean;
+}
+
+export type CountToolbarButtonsFunction = (
+  groupSizes: ReadonlyArray<number>,
+) => number;
+
+export const countToolbarButtons: CountToolbarButtonsFunction = (
+  groupSizes: ReadonlyArray<number>,
+): number => {
+  return groupSizes.reduce((total: number, size: number): number => {
+    return total + Math.max(0, size);
+  }, 0);
+};
+
+export type GetFullToolbarLayoutFunction = (
+  groupSizes: ReadonlyArray<number>,
+) => MarkdownToolbarLayout;
+
+/*
+ * Everything on the line, nothing in a menu: the toolbar before it has been
+ * measured, and wherever there is nothing to measure (jsdom, a field inside
+ * something that is not shown).
+ */
+export const getFullToolbarLayout: GetFullToolbarLayoutFunction = (
+  groupSizes: ReadonlyArray<number>,
+): MarkdownToolbarLayout => {
+  return {
+    visibleButtonCount: countToolbarButtons(groupSizes),
+    isModeToggleInBar: true,
+    hasMoreMenu: false,
+  };
+};
+
+export type CountVisibleGroupsFunction = (
+  groupSizes: ReadonlyArray<number>,
+  visibleButtonCount: number,
+) => number;
+
+// How many groups the first `visibleButtonCount` buttons reach into.
+export const countVisibleGroups: CountVisibleGroupsFunction = (
+  groupSizes: ReadonlyArray<number>,
+  visibleButtonCount: number,
+): number => {
+  let groups: number = 0;
+  let start: number = 0;
+
+  for (const size of groupSizes) {
+    if (size <= 0) {
+      continue;
+    }
+
+    if (start >= visibleButtonCount) {
+      break;
+    }
+
+    groups++;
+    start += size;
+  }
+
+  return groups;
+};
+
+export interface ToolbarLineContents {
+  groupSizes: ReadonlyArray<number>;
+  visibleButtonCount: number;
+  hasMoreMenu: boolean;
+  // The switch's width when it is on the line; 0 when it is in the menu.
+  modeToggleWidth: number;
+  // Insert variable's width; 0 when there is none.
+  variableButtonWidth: number;
+}
+
+export type GetToolbarLineWidthFunction = (
+  contents: ToolbarLineContents,
+) => number;
+
+/*
+ * How wide the line is with these things on it, as the toolbar lays it out:
+ * the visible buttons with a divider between groups, the More formatting
+ * button after them, a divider and the switch, then Insert variable - each
+ * a gap apart.
+ */
+export const getToolbarLineWidth: GetToolbarLineWidthFunction = (
+  contents: ToolbarLineContents,
+): number => {
+  let width: number = 0;
+  let items: number = 0;
+
+  const buttons: number = Math.max(0, contents.visibleButtonCount);
+
+  if (buttons > 0) {
+    const dividers: number = Math.max(
+      0,
+      countVisibleGroups(contents.groupSizes, buttons) - 1,
+    );
+
+    width += buttons * TOOLBAR_BUTTON_PX + dividers * TOOLBAR_DIVIDER_PX;
+    items += buttons + dividers;
+  }
+
+  if (contents.hasMoreMenu) {
+    width += TOOLBAR_BUTTON_PX;
+    items += 1;
+  }
+
+  if (contents.modeToggleWidth > 0) {
+    // The divider before the switch, then the switch.
+    width += TOOLBAR_DIVIDER_PX + contents.modeToggleWidth;
+    items += 2;
+  }
+
+  if (contents.variableButtonWidth > 0) {
+    width += contents.variableButtonWidth;
+    items += 1;
+  }
+
+  return width + Math.max(0, items - 1) * TOOLBAR_GAP_PX;
+};
+
+export type FitMarkdownToolbarFunction = (
+  measurements: MarkdownToolbarMeasurements,
+) => MarkdownToolbarLayout;
+
+export const fitMarkdownToolbar: FitMarkdownToolbarFunction = (
+  measurements: MarkdownToolbarMeasurements,
+): MarkdownToolbarLayout => {
+  const total: number = countToolbarButtons(measurements.groupSizes);
+
+  /*
+   * No width at all is no layout, not a toolbar with no room: jsdom, or an
+   * editor inside something that is not shown. Nothing is put away.
+   */
+  if (
+    !Number.isFinite(measurements.availableWidth) ||
+    measurements.availableWidth <= 0
+  ) {
+    return getFullToolbarLayout(measurements.groupSizes);
+  }
+
+  const room: number = measurements.availableWidth - TOOLBAR_SLACK_PX;
+  const enough: number = Math.min(TOOLBAR_MIN_BUTTONS, total);
+
+  // The switch on the line first; then, if that leaves too little, in the menu.
+  let layout: MarkdownToolbarLayout = getFullToolbarLayout(
+    measurements.groupSizes,
+  );
+
+  for (const isModeToggleInBar of [true, false]) {
+    let fits: number = 0;
+
+    // The most buttons that fit, the menu button counted when it is needed.
+    for (let count: number = total; count >= 0; count--) {
+      const hasMoreMenu: boolean = count < total || !isModeToggleInBar;
+
+      const width: number = getToolbarLineWidth({
+        groupSizes: measurements.groupSizes,
+        visibleButtonCount: count,
+        hasMoreMenu: hasMoreMenu,
+        modeToggleWidth: isModeToggleInBar ? measurements.modeToggleWidth : 0,
+        variableButtonWidth: measurements.variableButtonWidth,
+      });
+
+      if (width <= room) {
+        fits = count;
+        break;
+      }
+    }
+
+    layout = {
+      visibleButtonCount: fits,
+      isModeToggleInBar: isModeToggleInBar,
+      hasMoreMenu: fits < total || !isModeToggleInBar,
+    };
+
+    if (fits >= enough) {
+      return layout;
+    }
+  }
+
+  // The switch in the menu, with as many buttons as fit beside it.
+  return layout;
+};
+
+export type IsSameToolbarLayoutFunction = (
+  a: MarkdownToolbarLayout,
+  b: MarkdownToolbarLayout,
+) => boolean;
+
+export const isSameToolbarLayout: IsSameToolbarLayoutFunction = (
+  a: MarkdownToolbarLayout,
+  b: MarkdownToolbarLayout,
+): boolean => {
+  return (
+    a.visibleButtonCount === b.visibleButtonCount &&
+    a.isModeToggleInBar === b.isModeToggleInBar &&
+    a.hasMoreMenu === b.hasMoreMenu
+  );
+};

package/UI/Components/Markdown.tsx/MarkdownViewer.tsx

@@ -88,6 +88,12 @@ import DOMPurify from "dompurify";
 import SessionAwareImage from "./SessionAwareImage";
 import OneUptimeDate from "../../../Types/Date";
 import { Theme, useTheme } from "../../Utils/Theme";
+import {
+  translateTemplate,
+  translateText,
+  Translator,
+} from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import {
   InlineReferenceTransformOptions,
   MARKDOWN_INLINE_REFERENCE_COMPONENTS,
@@ -215,7 +221,10 @@ export const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
           const errorMessage: string = String(error);
           const errorEl: HTMLPreElement = document.createElement("pre");
           errorEl.className = "text-red-500";
-          errorEl.textContent = `Error rendering diagram: ${errorMessage}`;
+          errorEl.textContent = translateTemplate(
+            "Error rendering diagram: {{error}}",
+            { error: errorMessage },
+          );
           containerRef.current.innerHTML = "";
           containerRef.current.appendChild(errorEl);
         }
@@ -333,6 +342,12 @@ const langDisplayNames: Record<string, string> = {
   md: "Markdown",
 };
 
+/*
+ * Makes every element inside a code block inherit the block's monospace
+ * font, instead of matching index.ejs's `* { font-family: Inter }`.
+ */
+export const CODE_BLOCK_FONT_CLASS_NAME: string = "[&_*]:[font-family:inherit]";
+
 // Code block with copy button and language label
 const CodeBlock: FunctionComponent<{
   language: string;
@@ -347,6 +362,7 @@ const CodeBlock: FunctionComponent<{
   content: string;
   rest: any;
 }): ReactElement => {
+  const translator: Translator = useTranslator();
   const [copied, setCopied] = useState<boolean>(false);
 
   const handleCopy: () => void = useCallback((): void => {
@@ -402,7 +418,7 @@ const CodeBlock: FunctionComponent<{
               ? "text-green-400"
               : "text-gray-400 hover:text-gray-200 hover:bg-white/10"
           }`}
-          aria-label="Copy code"
+          aria-label={translator.translateText("Copy code")}
           type="button"
         >
           {copied ? (
@@ -431,10 +447,18 @@ const CodeBlock: FunctionComponent<{
               <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
             </svg>
           )}
-          {copied ? "Copied!" : "Copy"}
+          {translator.translateText(copied ? "Copied!" : "Copy")}
         </button>
       </div>
-      {/* Code content */}
+      {/*
+       * Code content. Every frontend's index.ejs sets `* { font-family:
+       * Inter }`, and a rule that matches an element beats what it inherits,
+       * so each highlighted token (a <span>) was drawn in Inter: the code was
+       * proportional and lined-up code (Terraform's `=`, YAML's indentation,
+       * table-like output) came out ragged. Every element inside takes its
+       * font from the <code> instead (CODE_BLOCK_FONT_CLASS_NAME); a class
+       * selector outranks `*`.
+       */}
       <SyntaxHighlighter
         {...rest}
         PreTag="pre"
@@ -444,7 +468,7 @@ const CodeBlock: FunctionComponent<{
         children={content}
         language={language}
         style={vscDarkPlus}
-        className="!rounded-none !mt-0 !mb-0 !bg-gray-900 !pt-3 !pb-3 !px-4 text-sm !border-0"
+        className={`!rounded-none !mt-0 !mb-0 !bg-gray-900 !pt-3 !pb-3 !px-4 text-sm !border-0 ${CODE_BLOCK_FONT_CLASS_NAME}`}
         codeTagProps={{ className: "font-mono" }}
       />
     </div>
@@ -462,6 +486,7 @@ const LocalTime: FunctionComponent<{ isoValue: string }> = ({
 }: {
   isoValue: string;
 }): ReactElement => {
+  const translator: Translator = useTranslator();
   const parsed: Date = new Date(isoValue);
   if (isNaN(parsed.getTime())) {
     return (
@@ -481,7 +506,9 @@ const LocalTime: FunctionComponent<{ isoValue: string }> = ({
   return (
     <time
       dateTime={isoValue}
-      title={`${isoValue} (UTC)`}
+      title={translator.translateTemplate("{{time}} (UTC)", {
+        time: isoValue,
+      })}
       className="text-xs px-1.5 py-0.5 bg-gray-100 border border-gray-200 rounded text-gray-800 font-mono whitespace-nowrap"
     >
       {localFormatted}
@@ -699,7 +726,9 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
            * alt text (already plain, React-escaped) instead.
            */
           return alt ? (
-            <span className="text-gray-500 italic">{`[image: ${alt}]`}</span>
+            <span className="text-gray-500 italic">
+              {translateTemplate("[image: {{alt}}]", { alt: String(alt) })}
+            </span>
           ) : null;
         }
         return (
@@ -773,7 +802,7 @@ const MarkdownViewer: FunctionComponent<ComponentProps> = (
                     "aria-label":
                       existingLabel ||
                       extractTextFromChildren(children).trim() ||
-                      "Task item",
+                      translateText("Task item"),
                   } as any,
                 );
               }

package/UI/Components/MasterPage/MasterPage.tsx

@@ -2,6 +2,8 @@ import PageError from "../Error/PageError";
 import PageLoader from "../Loader/PageLoader";
 import OfflineIndicator from "../Offline/OfflineIndicator";
 import TopSection from "../TopSection/TopSection";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
@@ -26,6 +28,7 @@ export interface ComponentProps {
 const MasterPage: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const [isOnline, setIsOnline] = React.useState(true);
   const topSectionRef: React.RefObject<HTMLDivElement> =
     React.useRef<HTMLDivElement>(null);
@@ -133,7 +136,7 @@ const MasterPage: FunctionComponent<ComponentProps> = (
               href="#main-content"
               className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-indigo-600 focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-white focus:shadow-lg"
             >
-              Skip to main content
+              {translator.translateText("Skip to main content")}
             </a>
           )}
           {hasTopSection && (

package/UI/Components/MemberRoleAssignment/MemberRoleAssignment.tsx

@@ -4,6 +4,8 @@ import React, {
   useState,
   useCallback,
 } from "react";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import Card, { CardHeaderLayout } from "../Card/Card";
 import IconProp from "../../../Types/Icon/IconProp";
 import Color from "../../../Types/Color";
@@ -71,6 +73,7 @@ interface ReassignState {
 const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const [isAssigning, setIsAssigning] = useState<boolean>(false);
   const [isUnassigning, setIsUnassigning] = useState<ObjectID | null>(null);
   const [showConfirmDelete, setShowConfirmDelete] =
@@ -279,11 +282,14 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
               setReassignState({ member, role });
             }}
             className="ml-9 inline-flex flex-shrink-0 items-center gap-1 px-2 py-1 text-xs font-medium text-indigo-600 hover:text-indigo-800 hover:bg-indigo-50 rounded-md transition-colors"
-            title="Reassign"
-            aria-label={`Reassign ${role.name} from ${memberLabel}`}
+            title={translator.translateText("Reassign")}
+            aria-label={translator.translateTemplate(
+              "Reassign {{role}} from {{member}}",
+              { role: role.name, member: memberLabel },
+            )}
           >
             <Icon icon={IconProp.ArrowCircleRight} className="w-3.5 h-3.5" />
-            Reassign
+            {translator.translateText("Reassign")}
           </button>
         ) : (
           <button
@@ -293,8 +299,11 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
             }}
             disabled={isUnassigning?.toString() === member.memberId.toString()}
             className="ml-auto inline-flex flex-shrink-0 items-center p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors disabled:opacity-50"
-            title="Remove"
-            aria-label={`Remove ${memberLabel} from ${role.name}`}
+            title={translator.translateText("Remove")}
+            aria-label={translator.translateTemplate(
+              "Remove {{member}} from {{role}}",
+              { member: memberLabel, role: role.name },
+            )}
           >
             {isUnassigning?.toString() === member.memberId.toString() ? (
               <Icon icon={IconProp.Refresh} className="w-4 h-4 animate-spin" />
@@ -343,11 +352,13 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
                 className="mx-auto h-12 w-12 text-gray-300"
               />
               <h3 className="mt-2 text-sm font-medium text-gray-900">
-                No roles defined
+                {translator.translateText("No roles defined")}
               </h3>
               <p className="mt-1 text-sm text-gray-500">
-                {props.emptyStateMessage ||
-                  "Configure roles in settings to start assigning team members."}
+                {translator.translateText(
+                  props.emptyStateMessage ||
+                    "Configure roles in settings to start assigning team members.",
+                )}
               </p>
             </div>
           ) : (
@@ -406,19 +417,23 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
                             </span>
                             {role.isPrimaryRole && (
                               <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">
-                                Primary
+                                {translator.translateText("Primary")}
                               </span>
                             )}
                             {role.canAssignMultipleUsers && (
                               <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-700">
-                                Multiple
+                                {translator.translateText("Multiple")}
                               </span>
                             )}
                           </div>
                           <p className="text-xs text-gray-500 mt-0.5">
-                            {members.length}{" "}
-                            {members.length === 1 ? "member" : "members"}{" "}
-                            assigned
+                            {translator.translatePlural(
+                              {
+                                one: "{{count}} member assigned",
+                                other: "{{count}} members assigned",
+                              },
+                              members.length,
+                            )}
                           </p>
                         </div>
                       </div>
@@ -433,7 +448,9 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
                           className="ml-12 inline-flex flex-shrink-0 items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-all shadow-sm text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 hover:border-gray-400"
                         >
                           <Icon icon={IconProp.Add} className="w-3.5 h-3.5" />
-                          {members.length === 0 ? "Assign" : "Add More"}
+                          {translator.translateText(
+                            members.length === 0 ? "Assign" : "Add More",
+                          )}
                         </button>
                       )}
                     </div>
@@ -444,7 +461,9 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
                         {availableUsers.length === 0 ? (
                           <div className="flex flex-wrap items-center justify-between gap-2">
                             <p className="min-w-0 text-sm text-red-600">
-                              All users are already assigned to this role.
+                              {translator.translateText(
+                                "All users are already assigned to this role.",
+                              )}
                             </p>
                             <button
                               type="button"
@@ -454,7 +473,7 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
                               }}
                               className="inline-flex items-center px-3 py-1.5 text-xs font-medium text-gray-600 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
                             >
-                              Close
+                              {translator.translateText("Close")}
                             </button>
                           </div>
                         ) : (
@@ -508,7 +527,7 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
                                   className="w-3.5 h-3.5 animate-spin"
                                 />
                               ) : (
-                                "Save"
+                                translator.translateText("Save")
                               )}
                             </button>
                             <button
@@ -519,7 +538,7 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
                               }}
                               className="inline-flex items-center px-3 py-1.5 text-xs font-medium text-gray-600 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
                             >
-                              Cancel
+                              {translator.translateText("Cancel")}
                             </button>
                           </div>
                         )}
@@ -530,7 +549,7 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
                     <div className="px-4 py-2 bg-white">
                       {members.length === 0 ? (
                         <p className="text-sm text-gray-400 italic py-2">
-                          Not assigned
+                          {translator.translateText("Not assigned")}
                         </p>
                       ) : (
                         members.map((member: AssignedMember, index: number) => {
@@ -554,7 +573,14 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
       {showConfirmDelete && (
         <ConfirmModal
           title="Remove Member"
-          description={`Are you sure you want to remove ${showConfirmDelete.userName || showConfirmDelete.userEmail} from the ${showConfirmDelete.roleName} role?`}
+          description={translator.translateTemplate(
+            "Are you sure you want to remove {{member}} from the {{role}} role?",
+            {
+              member:
+                showConfirmDelete.userName || showConfirmDelete.userEmail || "",
+              role: showConfirmDelete.roleName || "",
+            },
+          )}
           submitButtonText="Remove"
           submitButtonType={ButtonStyleType.DANGER}
           onSubmit={() => {
@@ -588,9 +614,16 @@ const MemberRoleAssignment: FunctionComponent<ComponentProps> = (
           }}
         >
           <p className="text-gray-500 text-sm mb-4">
-            Select a new user to reassign the {reassignState.role.name} role
-            from{" "}
-            {reassignState.member.userName || reassignState.member.userEmail}.
+            {translator.translateTemplate(
+              "Select a new user to reassign the {{role}} role from {{member}}.",
+              {
+                role: reassignState.role.name,
+                member:
+                  reassignState.member.userName ||
+                  reassignState.member.userEmail ||
+                  "",
+              },
+            )}
           </p>
           <Dropdown
             options={props.availableUsers

package/UI/Components/ModelDelete/ModelDelete.tsx

@@ -21,6 +21,11 @@ import Select from "../../../Types/BaseDatabase/Select";
 import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
 import IconProp from "../../../Types/Icon/IconProp";
 import ObjectID from "../../../Types/ObjectID";
+import {
+  translateNamedAction,
+  Translator,
+} from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import React, { ReactElement, useEffect, useState } from "react";
 
 export interface ComponentProps<TBaseModel extends BaseModel> {
@@ -74,6 +79,7 @@ const ModelDelete: <TBaseModel extends BaseModel>(
 ) => ReactElement = <TBaseModel extends BaseModel>(
   props: ComponentProps<TBaseModel>,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const model: TBaseModel = new props.modelType();
   /*
    * The delete card used to be rendered for everybody: a viewer got a live
@@ -204,7 +210,10 @@ const ModelDelete: <TBaseModel extends BaseModel>(
   return (
     <>
       <Card
-        title={`Delete ${model.singularName}`}
+        title={translateNamedAction(translator, {
+          template: "Delete {{itemName}}",
+          itemName: model.singularName || "",
+        })}
         description={
           <DeleteConfirmationMessage
             dataTestId="model-delete-card-message"
@@ -216,7 +225,10 @@ const ModelDelete: <TBaseModel extends BaseModel>(
         }
         buttons={[
           {
-            title: `Delete ${model.singularName}`,
+            title: translateNamedAction(translator, {
+              template: "Delete {{itemName}}",
+              itemName: model.singularName || "",
+            }),
             buttonStyle: ButtonStyleType.DANGER,
             disabled: !deleteGate.isAllowed,
             tooltip: deleteGate.disabledReason,
@@ -244,7 +256,10 @@ const ModelDelete: <TBaseModel extends BaseModel>(
               typeLabel={typeLabel}
             />
           }
-          title={`Delete ${model.singularName}`}
+          title={translateNamedAction(translator, {
+            template: "Delete {{itemName}}",
+            itemName: model.singularName || "",
+          })}
           onSubmit={async () => {
             await confirm();
           }}
@@ -252,7 +267,10 @@ const ModelDelete: <TBaseModel extends BaseModel>(
             setShowModal(false);
             setTypedName("");
           }}
-          submitButtonText={`Delete ${model.singularName}`}
+          submitButtonText={translateNamedAction(translator, {
+            template: "Delete {{itemName}}",
+            itemName: model.singularName || "",
+          })}
           submitButtonType={ButtonStyleType.DANGER}
           disableSubmitButton={!isConfirmed}
         >