@oneuptime/common 14.0.12 → 14.0.13

package/UI/Components/Workflow/ValuePicker/ValuePickerMenu.tsx

@@ -31,6 +31,9 @@ import {
   suggestionMatches,
 } from "./ValueSuggestion";
 import { NOT_SELECTED_BADGE } from "./StepValueSource";
+import { Translator, translationKey } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
+import TranslatedSentence from "../../TranslatedSentence/TranslatedSentence";
 import React, {
   ReactElement,
   forwardRef,
@@ -52,9 +55,10 @@ export const NOTE_REFRESH_MAX_MS: number = 10 * 60 * 1000;
 // How long "Copied!" stays on a note's Copy button.
 const COPIED_FEEDBACK_MS: number = 2000;
 
-export const HIDDEN_SAMPLE_TEXT: string = "hidden";
-export const HIDDEN_SAMPLE_TITLE: string =
-  "Not shown: it looks like a secret, or the run kept it hidden.";
+export const HIDDEN_SAMPLE_TEXT: string = translationKey("hidden");
+export const HIDDEN_SAMPLE_TITLE: string = translationKey(
+  "Not shown: it looks like a secret, or the run kept it hidden.",
+);
 
 export interface ValuePickerMenuHandle {
   /**
@@ -156,6 +160,7 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
     props: ValuePickerMenuProps,
     ref: React.ForwardedRef<ValuePickerMenuHandle>,
   ): ReactElement => {
+    const translator: Translator = useTranslator();
     const picker: ValuePickerContextValue = useValuePicker();
     const generatedId: string = useId();
     const listboxId: string = props.listboxId || `${generatedId}-values`;
@@ -458,7 +463,9 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
 
       if (!reference) {
         setPathError(
-          "Use names separated by dots, with [0] for a list item - for example title or alerts[0].status.",
+          translator.translateText(
+            "Use names separated by dots, with [0] for a list item - for example title or alerts[0].status.",
+          ) || "",
         );
         return;
       }
@@ -605,7 +612,7 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
             </div>
             {option.description && (
               <div className="truncate text-xs text-gray-500">
-                {option.description}
+                {translator.translateText(option.description)}
               </div>
             )}
           </div>
@@ -616,12 +623,14 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
           {option.isSampleHidden ? (
             <div
               className="mt-0.5 flex max-w-[45%] shrink-0 items-center gap-1 text-xs text-gray-400"
-              title={HIDDEN_SAMPLE_TITLE}
+              title={translator.translateText(HIDDEN_SAMPLE_TITLE)}
               data-testid="value-picker-sample"
               data-hidden="true"
             >
               <Icon icon={IconProp.Lock} className="h-3 w-3 shrink-0" />
-              <span className="truncate">{HIDDEN_SAMPLE_TEXT}</span>
+              <span className="truncate">
+                {translator.translateText(HIDDEN_SAMPLE_TEXT)}
+              </span>
             </div>
           ) : option.sample !== undefined ? (
             <span
@@ -634,7 +643,7 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
           ) : null}
           {option.typeLabel && (
             <span className="mt-0.5 shrink-0 rounded border border-gray-200 px-1.5 text-[10px] font-medium uppercase leading-4 tracking-wide text-gray-500">
-              {option.typeLabel}
+              {translator.translateText(option.typeLabel)}
             </span>
           )}
           {option.opens && (
@@ -649,8 +658,18 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
             <button
               type="button"
               tabIndex={-1}
-              aria-label={`Use a field inside ${option.label}`}
-              title={`Use a field inside ${option.label}`}
+              aria-label={translator.translateTemplate(
+                "Use a field inside {{value}}",
+                {
+                  value: option.label,
+                },
+              )}
+              title={translator.translateTemplate(
+                "Use a field inside {{value}}",
+                {
+                  value: option.label,
+                },
+              )}
               data-testid="value-picker-look-inside"
               className="-my-0.5 flex shrink-0 items-center rounded p-0.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
               onMouseDown={(event: React.MouseEvent<HTMLButtonElement>) => {
@@ -697,7 +716,7 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
               icon={IconProp.Info}
               className="mt-0.5 h-3.5 w-3.5 shrink-0 text-gray-400"
             />
-            <span>{note.text}</span>
+            <span>{translator.translateText(note.text)}</span>
           </div>
           {copyText || note.waitingText ? (
             <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 pl-5">
@@ -724,7 +743,9 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
                     icon={isCopied ? IconProp.Check : IconProp.Copy}
                     className="h-3.5 w-3.5"
                   />
-                  {isCopied ? "Copied!" : note.copyLabel || "Copy"}
+                  {translator.translateText(
+                    isCopied ? "Copied!" : note.copyLabel || "Copy",
+                  )}
                 </button>
               ) : null}
               {note.waitingText ? (
@@ -737,7 +758,7 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
                     aria-hidden="true"
                     className="h-1.5 w-1.5 animate-pulse rounded-full bg-indigo-500"
                   />
-                  {note.waitingText}
+                  {translator.translateText(note.waitingText)}
                 </span>
               ) : null}
             </div>
@@ -764,13 +785,22 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
               onClick={back}
             >
               <Icon icon={IconProp.ChevronLeft} className="h-3.5 w-3.5" />
-              Back
+              {translator.translateText("Back")}
             </button>
             <div className="min-w-0 truncate text-xs text-gray-500">
-              <span className="font-medium text-gray-900">
-                {drill.item.label}
-              </span>{" "}
-              from {drill.group.title}
+              <TranslatedSentence
+                template="{{value}} from {{source}}"
+                slots={{
+                  value: (
+                    <span className="font-medium text-gray-900">
+                      {drill.item.label}
+                    </span>
+                  ),
+                }}
+                values={{
+                  source: translator.translateText(drill.group.title) || "",
+                }}
+              />
             </div>
           </div>
         )}
@@ -794,12 +824,23 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
                 aria-activedescendant={activeOptionId}
                 aria-autocomplete="list"
                 aria-label={
-                  drill ? `Search ${drill.item.label}` : "Search values"
+                  drill
+                    ? translator.translateTemplate("Search {{value}}", {
+                        value: drill.item.label,
+                      })
+                    : translator.translateText("Search values")
                 }
                 placeholder={
                   drill
-                    ? `Search the fields of ${drill.item.label}`
-                    : props.searchPlaceholder || "Search values"
+                    ? translator.translateTemplate(
+                        "Search the fields of {{value}}",
+                        {
+                          value: drill.item.label,
+                        },
+                      )
+                    : translator.translateText(
+                        props.searchPlaceholder || "Search values",
+                      )
                 }
                 data-testid="value-picker-search"
                 spellCheck={false}
@@ -819,7 +860,13 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
         <div
           id={listboxId}
           role="listbox"
-          aria-label={drill ? `Inside ${drill.item.label}` : "Values"}
+          aria-label={
+            drill
+              ? translator.translateTemplate("Inside {{value}}", {
+                  value: drill.item.label,
+                })
+              : translator.translateText("Values")
+          }
           className="min-h-0 flex-1 overflow-y-auto py-1"
         >
           {showNotConnected && (
@@ -832,8 +879,9 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
                 className="mt-0.5 h-3.5 w-3.5 shrink-0 text-gray-400"
               />
               <span>
-                Only the trigger&apos;s values are listed until this step is
-                connected. Connect it after the steps whose values you need.
+                {translator.translateText(
+                  "Only the trigger's values are listed until this step is connected. Connect it after the steps whose values you need.",
+                )}
               </span>
             </div>
           )}
@@ -847,7 +895,7 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
                 icon={IconProp.Info}
                 className="mt-0.5 h-3.5 w-3.5 shrink-0 text-gray-400"
               />
-              <span>{drillNote}</span>
+              <span>{translator.translateText(drillNote)}</span>
             </div>
           )}
 
@@ -873,11 +921,11 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
                       />
                     )}
                     <span className="truncate text-xs font-semibold text-gray-700">
-                      {section.title}
+                      {translator.translateText(section.title)}
                     </span>
                     {section.subtitle && (
                       <span className="truncate text-[11px] text-gray-400">
-                        {section.subtitle}
+                        {translator.translateText(section.subtitle)}
                       </span>
                     )}
                   </div>
@@ -892,14 +940,21 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
 
           {drill && drillChildren?.status === ChildrenStatus.Loading && (
             <div className="px-3 py-2 text-xs text-gray-500">
-              Loading the fields of {drill.item.label}…
+              {translator.translateTemplate(
+                "Loading the fields of {{value}}…",
+                {
+                  value: drill.item.label,
+                },
+              )}
             </div>
           )}
 
           {drill && drillChildren?.status === ChildrenStatus.Failed && (
             <div className="px-3 py-2 text-xs text-amber-700">
-              Couldn&apos;t load the fields of {drill.item.label}:{" "}
-              {drillChildren.error}
+              {translator.translateTemplate(
+                "Couldn't load the fields of {{value}}: {{error}}",
+                { value: drill.item.label, error: drillChildren.error || "" },
+              )}
             </div>
           )}
 
@@ -908,7 +963,9 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
               className="px-3 py-2 text-xs text-gray-500"
               data-testid="value-picker-no-match"
             >
-              No values match &ldquo;{query.trim()}&rdquo;.
+              {translator.translateTemplate("No values match “{{search}}”.", {
+                search: query.trim(),
+              })}
             </div>
           )}
 
@@ -920,16 +977,18 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
                 className="px-3 py-3 text-xs text-gray-500"
                 data-testid="value-picker-empty"
               >
-                {props.emptyMessage ||
-                  (picker.isTrigger
-                    ? "A trigger runs first, so there is nothing before it to use. Workflow and global variables show up here."
-                    : "Nothing to use yet. The values of the steps that run before this one, and the workflow's variables, show up here.")}
+                {translator.translateText(
+                  props.emptyMessage ||
+                    (picker.isTrigger
+                      ? "A trigger runs first, so there is nothing before it to use. Workflow and global variables show up here."
+                      : "Nothing to use yet. The values of the steps that run before this one, and the workflow's variables, show up here."),
+                )}
               </div>
             )}
 
           {!drill && picker.isLoading && (
             <div className="px-3 py-2 text-xs text-gray-500">
-              Loading variables…
+              {translator.translateText("Loading variables…")}
             </div>
           )}
 
@@ -937,7 +996,12 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
             picker.loadErrors.map((error: string) => {
               return (
                 <div key={error} className="px-3 py-2 text-xs text-amber-700">
-                  Couldn&apos;t load the variables: {error}
+                  {translator.translateTemplate(
+                    "Couldn't load the variables: {{error}}",
+                    {
+                      error: error,
+                    },
+                  )}
                 </div>
               );
             })}
@@ -955,7 +1019,9 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
               className="mb-1 block text-xs text-gray-600"
               htmlFor={`${listboxId}-path`}
             >
-              Or a field inside {drill.item.label}
+              {translator.translateTemplate("Or a field inside {{value}}", {
+                value: drill.item.label,
+              })}
             </label>
             <div className="flex gap-1.5">
               <input
@@ -983,7 +1049,7 @@ const ValuePickerMenu: React.ForwardRefExoticComponent<
                 className="shrink-0 rounded-md bg-indigo-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
                 data-testid="value-picker-path-insert"
               >
-                Insert
+                {translator.translateText("Insert")}
               </button>
             </div>
             {pathError && (

package/UI/Components/Workflow/ValuePicker/ValuePickerPopup.tsx

@@ -27,6 +27,8 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 import { createPortal } from "react-dom";
 
 export enum ValuePickerPopupMode {
@@ -127,6 +129,7 @@ export interface ValuePickerPopupProps {
 const ValuePickerPopup: FunctionComponent<ValuePickerPopupProps> = (
   props: ValuePickerPopupProps,
 ): ReactElement | null => {
+  const translator: Translator = useTranslator();
   const popupRef: React.MutableRefObject<HTMLDivElement | null> =
     useRef<HTMLDivElement | null>(null);
   const [position, setPosition] = useState<ValuePickerPosition | null>(null);
@@ -270,7 +273,7 @@ const ValuePickerPopup: FunctionComponent<ValuePickerPopupProps> = (
       ref={popupRef}
       id={props.id}
       role="dialog"
-      aria-label={props.ariaLabel}
+      aria-label={translator.translateText(props.ariaLabel)}
       data-testid={props.dataTestId || "value-picker"}
       data-mode={props.mode}
       className="fixed flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white text-sm shadow-lg"

package/UI/Components/Workflow/ValuePicker/ValueSingleField.tsx

@@ -38,6 +38,8 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { Translator, translationKey } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 
 export enum ValueSingleFieldKind {
   Number = "Number",
@@ -47,7 +49,9 @@ export enum ValueSingleFieldKind {
   DateTime = "DateTime",
 }
 
-export const TYPE_A_VALUE_LABEL: string = "Type a value instead";
+export const TYPE_A_VALUE_LABEL: string = translationKey(
+  "Type a value instead",
+);
 
 const INPUT_TYPE: Partial<Record<ValueSingleFieldKind, InputType>> = {
   [ValueSingleFieldKind.Number]: InputType.NUMBER,
@@ -82,6 +86,7 @@ export interface ValueSingleFieldProps {
 const ValueSingleField: FunctionComponent<ValueSingleFieldProps> = (
   props: ValueSingleFieldProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const picker: ValuePickerContextValue = useValuePicker();
   const dataTestId: string = props.dataTestId || "value-single-field";
 
@@ -145,8 +150,8 @@ const ValueSingleField: FunctionComponent<ValueSingleFieldProps> = (
           <button
             type="button"
             className="mt-1 shrink-0 rounded-md border border-gray-200 px-1.5 py-1 font-mono text-[11px] leading-none text-gray-500 transition-colors hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
-            aria-label={TYPE_A_VALUE_LABEL}
-            title={TYPE_A_VALUE_LABEL}
+            aria-label={translator.translateText(TYPE_A_VALUE_LABEL)}
+            title={translator.translateText(TYPE_A_VALUE_LABEL)}
             data-testid={`${dataTestId}-type-a-value`}
             onClick={() => {
               props.onChange(
@@ -169,8 +174,8 @@ const ValueSingleField: FunctionComponent<ValueSingleFieldProps> = (
           ? INSERT_VALUE_BUTTON_OPEN_CLASS
           : INSERT_VALUE_BUTTON_IDLE_CLASS
       }`}
-      aria-label={INSERT_VALUE_LABEL}
-      title={INSERT_VALUE_LABEL}
+      aria-label={translator.translateText(INSERT_VALUE_LABEL)}
+      title={translator.translateText(INSERT_VALUE_LABEL)}
       aria-haspopup="dialog"
       aria-expanded={isPopoverOpen}
       data-testid={`${dataTestId}-insert-value`}

package/UI/Components/Workflow/ValuePicker/ValueTextField.tsx

@@ -31,9 +31,12 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { Translator, translationKey } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 
-export const INSERT_VALUE_LABEL: string =
-  "Insert a value from an earlier step or a variable";
+export const INSERT_VALUE_LABEL: string = translationKey(
+  "Insert a value from an earlier step or a variable",
+);
 
 /*
  * The { } button, the same in every field that has one. Bordered, so it reads
@@ -72,6 +75,7 @@ export interface ValueTextFieldProps {
 const ValueTextField: FunctionComponent<ValueTextFieldProps> = (
   props: ValueTextFieldProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const picker: ValuePickerContextValue = useValuePicker();
   const id: string = useId();
   const errorId: string = `${id}-error`;
@@ -146,9 +150,9 @@ const ValueTextField: FunctionComponent<ValueTextFieldProps> = (
           onChange={props.onChange}
           multiline={props.multiline}
           describeReference={picker.describeReference}
-          placeholder={props.placeholder}
+          placeholder={translator.translateText(props.placeholder)}
           ariaLabelledby={props.ariaLabelledby}
-          ariaLabel={props.ariaLabel}
+          ariaLabel={translator.translateText(props.ariaLabel)}
           ariaDescribedby={props.error ? errorId : undefined}
           ariaInvalid={Boolean(props.error)}
           ariaControls={isInlineOpen ? inlineListboxId : undefined}
@@ -245,8 +249,8 @@ const ValueTextField: FunctionComponent<ValueTextFieldProps> = (
                 ? INSERT_VALUE_BUTTON_OPEN_CLASS
                 : INSERT_VALUE_BUTTON_IDLE_CLASS
             }`}
-            aria-label={INSERT_VALUE_LABEL}
-            title={INSERT_VALUE_LABEL}
+            aria-label={translator.translateText(INSERT_VALUE_LABEL)}
+            title={translator.translateText(INSERT_VALUE_LABEL)}
             aria-haspopup="dialog"
             aria-expanded={isPopoverOpen}
             data-testid={`${dataTestId}-insert-value`}
@@ -282,7 +286,7 @@ const ValueTextField: FunctionComponent<ValueTextFieldProps> = (
           className="mt-1 text-sm text-red-400"
           role="alert"
         >
-          {props.error}
+          {translator.translateText(props.error)}
         </p>
       )}
 

package/UI/Components/Workflow/WorkflowIssuesModal.tsx

@@ -21,9 +21,13 @@ import {
 import {
   WorkflowIssueGroup,
   getWorkflowLintSeverityLabel,
+  WORKFLOW_LINT_ERROR_COUNT,
+  WORKFLOW_LINT_WARNING_COUNT,
   groupWorkflowLintIssues,
 } from "./GraphLintSummary";
 import React, { FunctionComponent, ReactElement } from "react";
+import { translatableTerm, Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 
 export interface ComponentProps {
   lintResult: WorkflowLintResult;
@@ -70,14 +74,15 @@ const renderSeverityIcon: RenderSeverityIconFunction = (
 
 type RenderCountPillFunction = (params: {
   count: number;
-  singular: string;
+  // The count in words, in the reader's language: "3 errors".
+  label: string;
   className: string;
   testId: string;
 }) => ReactElement | null;
 
 const renderCountPill: RenderCountPillFunction = (params: {
   count: number;
-  singular: string;
+  label: string;
   className: string;
   testId: string;
 }): ReactElement | null => {
@@ -90,8 +95,7 @@ const renderCountPill: RenderCountPillFunction = (params: {
       className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium leading-4 whitespace-nowrap ${params.className}`}
       data-testid={params.testId}
     >
-      {params.count} {params.singular}
-      {params.count === 1 ? "" : "s"}
+      {params.label}
     </span>
   );
 };
@@ -99,6 +103,7 @@ const renderCountPill: RenderCountPillFunction = (params: {
 const WorkflowIssuesModal: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const groups: Array<WorkflowIssueGroup> = groupWorkflowLintIssues({
     issues: props.lintResult.issues,
     stepTitlesByNodeId: props.stepTitlesByNodeId,
@@ -123,10 +128,12 @@ const WorkflowIssuesModal: FunctionComponent<ComponentProps> = (
               className="h-6 w-6 text-emerald-500"
             />
             <p className="text-sm font-medium text-gray-900">
-              Nothing to fix here
+              {translator.translateText("Nothing to fix here")}
             </p>
             <p className="text-sm text-gray-500">
-              The checks found nothing wrong with this workflow.
+              {translator.translateText(
+                "The checks found nothing wrong with this workflow.",
+              )}
             </p>
           </div>
         ) : (
@@ -141,21 +148,32 @@ const WorkflowIssuesModal: FunctionComponent<ComponentProps> = (
             >
               {renderCountPill({
                 count: props.lintResult.errorCount,
-                singular: "error",
+                label: translator.translatePlural(
+                  WORKFLOW_LINT_ERROR_COUNT,
+                  props.lintResult.errorCount,
+                ),
                 className:
                   "bg-red-50 text-red-700 ring-1 ring-inset ring-red-200",
                 testId: "workflow-issues-error-count",
               })}
               {renderCountPill({
                 count: props.lintResult.warningCount,
-                singular: "warning",
+                label: translator.translatePlural(
+                  WORKFLOW_LINT_WARNING_COUNT,
+                  props.lintResult.warningCount,
+                ),
                 className:
                   "bg-amber-50 text-amber-800 ring-1 ring-inset ring-amber-200",
                 testId: "workflow-issues-warning-count",
               })}
               <span className="text-xs text-gray-500">
-                across{" "}
-                {groups.length === 1 ? "1 place" : `${groups.length} places`}
+                {translator.translatePlural(
+                  {
+                    one: "across {{count}} place",
+                    other: "across {{count}} places",
+                  },
+                  groups.length,
+                )}
               </span>
             </div>
 
@@ -173,7 +191,7 @@ const WorkflowIssuesModal: FunctionComponent<ComponentProps> = (
                   <header className="flex items-start justify-between gap-3 border-b border-gray-200 bg-gray-50 px-3 py-2">
                     <div className="min-w-0">
                       <p className="truncate text-sm font-semibold text-gray-900">
-                        {group.title}
+                        {translator.translateText(group.title)}
                       </p>
                       {group.componentId &&
                         group.componentId !== group.title && (
@@ -185,14 +203,20 @@ const WorkflowIssuesModal: FunctionComponent<ComponentProps> = (
                     <div className="flex shrink-0 items-center gap-2">
                       {renderCountPill({
                         count: group.errorCount,
-                        singular: "error",
+                        label: translator.translatePlural(
+                          WORKFLOW_LINT_ERROR_COUNT,
+                          group.errorCount,
+                        ),
                         className:
                           "bg-red-50 text-red-700 ring-1 ring-inset ring-red-200",
                         testId: "workflow-issue-group-error-count",
                       })}
                       {renderCountPill({
                         count: group.warningCount,
-                        singular: "warning",
+                        label: translator.translatePlural(
+                          WORKFLOW_LINT_WARNING_COUNT,
+                          group.warningCount,
+                        ),
                         className:
                           "bg-amber-50 text-amber-800 ring-1 ring-inset ring-amber-200",
                         testId: "workflow-issue-group-warning-count",
@@ -203,11 +227,16 @@ const WorkflowIssuesModal: FunctionComponent<ComponentProps> = (
                           onClick={() => {
                             props.onGoToStep?.(group.nodeId as string);
                           }}
-                          aria-label={`Open settings for ${group.title}`}
+                          aria-label={translator.translateTemplate(
+                            "Open settings for {{step}}",
+                            {
+                              step: translatableTerm(group.title),
+                            },
+                          )}
                           data-testid="workflow-issue-go-to-step"
                           className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1"
                         >
-                          Open step
+                          {translator.translateText("Open step")}
                           <Icon
                             icon={IconProp.ChevronRight}
                             size={SizeProp.ExtraSmall}
@@ -233,7 +262,10 @@ const WorkflowIssuesModal: FunctionComponent<ComponentProps> = (
                             {renderSeverityIcon(issue.severity)}
                             <p className="text-sm leading-5 text-gray-700">
                               <span className="sr-only">
-                                {getWorkflowLintSeverityLabel(issue.severity)}:{" "}
+                                {translator.translateText(
+                                  getWorkflowLintSeverityLabel(issue.severity),
+                                )}
+                                :{" "}
                               </span>
                               {issue.message}
                             </p>

package/UI/Components/Workflow/WorkflowLogModal.tsx

@@ -35,9 +35,12 @@ import {
   WorkflowStepTraceEntry,
 } from "../../../Types/Workflow/StepTrace";
 import React, { FunctionComponent, ReactElement } from "react";
+import { Translator, translationKey } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 
-export const STEPS_TAB_NAME: string = "Steps";
-export const FULL_LOG_TAB_NAME: string = "Full Log";
+// Tab translates its name; these stay English so a caller can pick a tab.
+export const STEPS_TAB_NAME: string = translationKey("Steps");
+export const FULL_LOG_TAB_NAME: string = translationKey("Full Log");
 
 export interface ComponentProps {
   logs: string;
@@ -83,6 +86,7 @@ const TAB_TYPE_BY_ATTENTION: Record<TraceAttention, TabType> = {
 const WorkflowLogModal: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const steps: Array<WorkflowStepTraceEntry> = getTraceSteps(props.stepTrace);
 
   /*
@@ -116,8 +120,8 @@ const WorkflowLogModal: FunctionComponent<ComponentProps> = (
       ) : (
         <p className="text-sm text-gray-500">
           {props.isRunning
-            ? "Nothing has been logged yet."
-            : "This run did not log anything."}
+            ? translator.translateText("Nothing has been logged yet.")
+            : translator.translateText("This run did not log anything.")}
         </p>
       ),
     },
@@ -177,7 +181,7 @@ const WorkflowLogModal: FunctionComponent<ComponentProps> = (
                       : "text-gray-600"
                   }`}
                 >
-                  {props.statusMessage}
+                  {translator.translateText(props.statusMessage || undefined)}
                 </p>
               </div>
             ) : (