@oneuptime/common 14.0.12 → 14.0.13

package/UI/Components/Workflow/RunStatusWatcher.ts

@@ -14,6 +14,7 @@
  */
 
 import WorkflowStatus from "../../../Types/Workflow/WorkflowStatus";
+import { translationKey } from "../../Utils/TranslateTemplate";
 
 /**
  * Statuses a run never moves on from. Waiting is not one of them — a Sleep
@@ -62,6 +63,49 @@ export const isFailedRunStatus: IsFailedRunStatusFunction = (
 export const MAX_RUN_WATCH_POLLS: number = 60;
 export const RUN_WATCH_POLL_INTERVAL_MS: number = 2000;
 
+/*
+ * What the strip says, one whole sentence per status: the builder's page
+ * shows it with translateText, so a language switch re-words it on the spot.
+ */
+export const RUN_STARTING_MESSAGE: string = translationKey("Starting run…");
+
+export const RUN_TAKING_A_WHILE_MESSAGE: string = translationKey(
+  "This run is taking a while. Open the Logs tab to follow it from there.",
+);
+
+export const RUN_SUCCEEDED_MESSAGE: string = translationKey(
+  "Run finished successfully.",
+);
+
+export const RUN_SLEEPING_MESSAGE: string = translationKey(
+  "This run is sleeping and will carry on by itself. Follow it in the Logs tab.",
+);
+
+// A status no message below names: one added after this was written.
+export const RUN_IN_PROGRESS_MESSAGE: string =
+  translationKey("Run in progress…");
+
+export const RUN_FAILED_MESSAGES: Partial<Record<WorkflowStatus, string>> = {
+  [WorkflowStatus.Error]: translationKey(
+    "Run error. Open the run log to see why.",
+  ),
+  [WorkflowStatus.Timeout]: translationKey(
+    "Run timeout. Open the run log to see why.",
+  ),
+  [WorkflowStatus.WorkflowCountExceeded]: translationKey(
+    "Run workflow count exceeded. Open the run log to see why.",
+  ),
+};
+
+export const RUN_FAILED_MESSAGE: string = translationKey(
+  "The run failed. Open the run log to see why.",
+);
+
+export const RUN_GOING_MESSAGES: Partial<Record<WorkflowStatus, string>> = {
+  [WorkflowStatus.Scheduled]: translationKey("Run scheduled…"),
+  [WorkflowStatus.Running]: translationKey("Run running…"),
+};
+
 export interface WatchedRun {
   runId: string;
   status: WorkflowStatus;
@@ -89,34 +133,32 @@ export const decideRunWatch: DecideRunWatchFunction = (params: {
   if (params.pollCount >= MAX_RUN_WATCH_POLLS) {
     return {
       shouldContinue: false,
-      message:
-        "This run is taking a while. Open the Logs tab to follow it from there.",
+      message: RUN_TAKING_A_WHILE_MESSAGE,
     };
   }
 
   if (!params.run) {
-    return { shouldContinue: true, message: "Starting run…" };
+    return { shouldContinue: true, message: RUN_STARTING_MESSAGE };
   }
 
   if (isTerminalRunStatus(params.run.status)) {
     return {
       shouldContinue: false,
       message: isFailedRunStatus(params.run.status)
-        ? `Run ${params.run.status.toLowerCase()}. Open the run log to see why.`
-        : "Run finished successfully.",
+        ? RUN_FAILED_MESSAGES[params.run.status] || RUN_FAILED_MESSAGE
+        : RUN_SUCCEEDED_MESSAGE,
     };
   }
 
   if (params.run.status === WorkflowStatus.Waiting) {
     return {
       shouldContinue: false,
-      message:
-        "This run is sleeping and will carry on by itself. Follow it in the Logs tab.",
+      message: RUN_SLEEPING_MESSAGE,
     };
   }
 
   return {
     shouldContinue: true,
-    message: `Run ${params.run.status.toLowerCase()}…`,
+    message: RUN_GOING_MESSAGES[params.run.status] || RUN_IN_PROGRESS_MESSAGE,
   };
 };

package/UI/Components/Workflow/StepTraceViewer.tsx

@@ -50,6 +50,9 @@ import {
   WorkflowStepTraceWarning,
 } from "../../../Types/Workflow/StepTrace";
 import React, { FunctionComponent, ReactElement, useId, useState } from "react";
+import { Translator, translationKey } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
+import TranslatedSentence from "../TranslatedSentence/TranslatedSentence";
 
 export interface ComponentProps {
   trace: WorkflowStepTrace;
@@ -103,6 +106,7 @@ interface PortChipProps {
 const PortChip: FunctionComponent<PortChipProps> = (
   props: PortChipProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const chip: ReactElement = (
     <span
       className={`inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-semibold ${
@@ -112,7 +116,7 @@ const PortChip: FunctionComponent<PortChipProps> = (
       }`}
       data-testid="workflow-run-step-port"
     >
-      {props.title}
+      {translator.translateText(props.title)}
     </span>
   );
 
@@ -120,7 +124,11 @@ const PortChip: FunctionComponent<PortChipProps> = (
     return chip;
   }
 
-  return <Tooltip text={props.description}>{chip}</Tooltip>;
+  return (
+    <Tooltip text={translator.translateText(props.description) || ""}>
+      {chip}
+    </Tooltip>
+  );
 };
 
 interface NextStepLabelProps {
@@ -139,13 +147,18 @@ interface NextStepLabelProps {
 const NextStepLabel: FunctionComponent<NextStepLabelProps> = (
   props: NextStepLabelProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const didRun: boolean = props.next.stepNumber !== null;
 
   return (
     <span data-testid="workflow-run-step-next">
       {didRun && (
         <>
-          <span className="text-gray-500">Step {props.next.stepNumber}</span>{" "}
+          <span className="text-gray-500">
+            {translator.translateTemplate("Step {{number}}", {
+              number: props.next.stepNumber || 0,
+            })}
+          </span>{" "}
         </>
       )}
       <span className="font-medium text-gray-900">{props.next.title}</span>{" "}
@@ -155,7 +168,9 @@ const NextStepLabel: FunctionComponent<NextStepLabelProps> = (
       {!didRun && (
         <>
           {" "}
-          <span className="text-gray-500">{props.notRunLabel}</span>
+          <span className="text-gray-500">
+            {translator.translateText(props.notRunLabel)}
+          </span>
         </>
       )}
       {props.isFollowed && <span className="text-gray-500">,</span>}
@@ -178,6 +193,7 @@ interface StepOutcomeLineProps {
 const StepOutcomeLine: FunctionComponent<StepOutcomeLineProps> = (
   props: StepOutcomeLineProps,
 ): ReactElement | null => {
+  const translator: Translator = useTranslator();
   const outcome: StepOutcome = props.outcome;
 
   if (outcome.kind === StepOutcomeKind.NoPort || !outcome.portTitle) {
@@ -191,7 +207,7 @@ const StepOutcomeLine: FunctionComponent<StepOutcomeLineProps> = (
         className="text-sm text-gray-600"
         data-testid="workflow-run-step-outcome"
       >
-        Took no output, so the run ended here.
+        {translator.translateText("Took no output, so the run ended here.")}
       </p>
     );
   }
@@ -201,11 +217,32 @@ const StepOutcomeLine: FunctionComponent<StepOutcomeLineProps> = (
       className="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm"
       data-testid="workflow-run-step-outcome"
     >
-      <span className="text-gray-500">Took</span>{" "}
-      <PortChip
-        title={outcome.portTitle}
-        description={outcome.portDescription}
-        tone={outcome.portTone}
+      <TranslatedSentence
+        template="Took {{port}}"
+        slots={{
+          port: (
+            <PortChip
+              title={outcome.portTitle}
+              description={outcome.portDescription}
+              tone={outcome.portTone}
+            />
+          ),
+        }}
+        renderText={(text: string): ReactElement => {
+          /*
+           * The words in a span of their own, so the row's gap spaces them.
+           * The spaces around them stay as text: a flex row does not draw
+           * them, but they keep "Took" and the output apart for anything
+           * that reads the line out.
+           */
+          return (
+            <>
+              {text.trimStart() === text ? "" : " "}
+              <span className="text-gray-500">{text.trim()}</span>
+              {text.trimEnd() === text ? "" : " "}
+            </>
+          );
+        }}
       />
       {outcome.kind === StepOutcomeKind.LedTo && (
         <>
@@ -213,7 +250,9 @@ const StepOutcomeLine: FunctionComponent<StepOutcomeLineProps> = (
           <span aria-hidden="true" className="text-gray-400">
             →
           </span>{" "}
-          <span className="sr-only">which led to</span>{" "}
+          <span className="sr-only">
+            {translator.translateText("which led to")}
+          </span>{" "}
           {outcome.nextSteps.map(
             (next: StepOutcomeNextStep, nextIndex: number) => {
               return (
@@ -234,9 +273,11 @@ const StepOutcomeLine: FunctionComponent<StepOutcomeLineProps> = (
         <>
           {" "}
           <span className="text-gray-600">
-            {props.isLastStep
-              ? "Nothing is connected to it, so the run ended here."
-              : "Nothing is connected to it, so this branch ended here."}
+            {translator.translateText(
+              props.isLastStep
+                ? "Nothing is connected to it, so the run ended here."
+                : "Nothing is connected to it, so this branch ended here.",
+            )}
           </span>
         </>
       )}
@@ -251,6 +292,8 @@ interface StatusBadgeProps {
 const StatusBadge: FunctionComponent<StatusBadgeProps> = (
   props: StatusBadgeProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
+
   return (
     <span
       className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium ${
@@ -260,7 +303,7 @@ const StatusBadge: FunctionComponent<StatusBadgeProps> = (
       }`}
       data-testid="workflow-run-step-status"
     >
-      {props.isFailed ? "Failed" : "Succeeded"}
+      {translator.translateText(props.isFailed ? "Failed" : "Succeeded")}
     </span>
   );
 };
@@ -277,10 +320,15 @@ interface ValueTextProps {
 const ValueText: FunctionComponent<ValueTextProps> = (
   props: ValueTextProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const value: TraceValueDisplay = props.value;
 
   if (value.kind === TraceValueKind.EmptyText) {
-    return <span className="text-xs italic text-gray-500">Empty text</span>;
+    return (
+      <span className="text-xs italic text-gray-500">
+        {translator.translateText("Empty text")}
+      </span>
+    );
   }
 
   if (value.kind === TraceValueKind.Null) {
@@ -347,13 +395,17 @@ interface ValueSectionProps {
 const ValueSection: FunctionComponent<ValueSectionProps> = (
   props: ValueSectionProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
+
   return (
     <div>
       <p className="mb-2 text-[11px] font-semibold uppercase tracking-wider text-gray-500">
-        {props.title}
+        {translator.translateText(props.title)}
       </p>
       {props.rows.length === 0 ? (
-        <p className="text-sm text-gray-500">{props.emptyText}</p>
+        <p className="text-sm text-gray-500">
+          {translator.translateText(props.emptyText)}
+        </p>
       ) : (
         /*
          * Name beside value from sm up, so a step with six short arguments
@@ -380,7 +432,7 @@ const ValueSection: FunctionComponent<ValueSectionProps> = (
                       className="inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[11px] font-medium text-amber-800"
                       data-testid="workflow-run-step-unresolved"
                     >
-                      Did not resolve
+                      {translator.translateText("Did not resolve")}
                     </span>
                   )}
                 </dt>
@@ -391,7 +443,12 @@ const ValueSection: FunctionComponent<ValueSectionProps> = (
                       className="mt-1 text-xs text-gray-500"
                       data-testid="workflow-run-step-template"
                     >
-                      from <TemplateText text={row.template} />
+                      <TranslatedSentence
+                        template="from {{template}}"
+                        slots={{
+                          template: <TemplateText text={row.template} />,
+                        }}
+                      />
                     </p>
                   )}
                 </dd>
@@ -418,6 +475,7 @@ interface StepItemProps {
 const StepItem: FunctionComponent<StepItemProps> = (
   props: StepItemProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const [isOpen, setIsOpen] = useState<boolean>(
     shouldStepStartOpen(props.trace, props.index),
   );
@@ -477,7 +535,11 @@ const StepItem: FunctionComponent<StepItemProps> = (
           }}
         >
           <span className="min-w-0 flex-1">
-            <span className="sr-only">Step {props.index + 1}: </span>
+            <span className="sr-only">
+              {translator.translateTemplate("Step {{number}}:", {
+                number: props.index + 1,
+              })}{" "}
+            </span>
             <span className="block break-words text-sm font-semibold text-gray-900">
               {title}
             </span>
@@ -517,7 +579,9 @@ const StepItem: FunctionComponent<StepItemProps> = (
                 className="mt-0.5 h-4 w-4 shrink-0 text-red-500"
               />
               <div className="min-w-0 text-sm">
-                <p className="font-medium text-red-800">This step failed</p>
+                <p className="font-medium text-red-800">
+                  {translator.translateText("This step failed")}
+                </p>
                 <p className="mt-0.5 whitespace-pre-wrap break-words text-red-700">
                   {errorMessage}
                 </p>
@@ -585,12 +649,15 @@ interface RunStoppedProps {
 const RunStopped: FunctionComponent<RunStoppedProps> = (
   props: RunStoppedProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const note: ReactElement = (
     <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3">
       <p className="text-sm font-semibold text-red-800">
-        {props.hasSteps
-          ? "The run stopped here"
-          : "The run stopped before its first step"}
+        {translator.translateText(
+          props.hasSteps
+            ? "The run stopped here"
+            : "The run stopped before its first step",
+        )}
       </p>
       <p className="mt-0.5 whitespace-pre-wrap break-words text-sm text-red-700">
         {props.message}
@@ -624,19 +691,25 @@ interface RunSleepingProps {
 const RunSleeping: FunctionComponent<RunSleepingProps> = (
   props: RunSleepingProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   return (
     <li className={TIMELINE_ITEM_CLASS} data-testid="workflow-run-sleeping">
       <div aria-hidden="true" className={`${TIMELINE_DOT_CLASS} bg-indigo-500`}>
         <Icon icon={IconProp.Clock} className="h-4 w-4 text-white" />
       </div>
       <div className="rounded-lg border border-indigo-200 bg-indigo-50 px-4 py-3">
-        <p className="text-sm font-semibold text-indigo-800">Sleeping</p>
+        <p className="text-sm font-semibold text-indigo-800">
+          {translator.translateText("Sleeping")}
+        </p>
         <p className="mt-0.5 text-sm text-indigo-700">
-          The run carries on by itself at{" "}
-          {OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
-            props.resumesAt,
+          {translator.translateTemplate(
+            "The run carries on by itself at {{time}}. The steps after the Sleep have not run yet.",
+            {
+              time: OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+                props.resumesAt,
+              ),
+            },
           )}
-          . The steps after the Sleep have not run yet.
         </p>
       </div>
     </li>
@@ -646,6 +719,7 @@ const RunSleeping: FunctionComponent<RunSleepingProps> = (
 const StepTraceViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const steps: Array<WorkflowStepTraceEntry> = getTraceSteps(props.trace);
   const runErrorMessage: string | null =
     typeof props.trace?.runErrorMessage === "string" &&
@@ -663,10 +737,10 @@ const StepTraceViewer: FunctionComponent<ComponentProps> = (
    * and otherwise the run stopped before it.
    */
   const notRunLabel: string = singleStepRun
-    ? "(not run in this test)"
+    ? translationKey("(not run in this test)")
     : resumesAt
-      ? "(not run yet)"
-      : "(did not run)";
+      ? translationKey("(not run yet)")
+      : translationKey("(did not run)");
 
   if (steps.length === 0) {
     if (runErrorMessage) {
@@ -676,15 +750,18 @@ const StepTraceViewer: FunctionComponent<ComponentProps> = (
     if (props.isRunning) {
       return (
         <p className="text-sm text-gray-500">
-          The steps show here once the run finishes.
+          {translator.translateText(
+            "The steps show here once the run finishes.",
+          )}
         </p>
       );
     }
 
     return (
       <p className="text-sm text-gray-500">
-        This run has no recorded steps. Runs from before step recording was
-        added show only their full log.
+        {translator.translateText(
+          "This run has no recorded steps. Runs from before step recording was added show only their full log.",
+        )}
       </p>
     );
   }
@@ -701,11 +778,13 @@ const StepTraceViewer: FunctionComponent<ComponentProps> = (
             className="mt-0.5 h-4 w-4 shrink-0 text-blue-500"
           />
           <div className="min-w-0 text-sm">
-            <p className="font-medium text-blue-800">Only this step ran</p>
+            <p className="font-medium text-blue-800">
+              {translator.translateText("Only this step ran")}
+            </p>
             <p className="mt-0.5 text-blue-700">
-              This was a test of one step. The steps before it did not run, so
-              values it reads from them are missing, and the steps after it were
-              not started. Use Run Workflow to try the whole workflow.
+              {translator.translateText(
+                "This was a test of one step. The steps before it did not run, so values it reads from them are missing, and the steps after it were not started. Use Run Workflow to try the whole workflow.",
+              )}
             </p>
           </div>
         </div>
@@ -713,11 +792,20 @@ const StepTraceViewer: FunctionComponent<ComponentProps> = (
 
       {props.trace.truncated && (
         <p className="text-sm text-amber-700">
-          Only the last {steps.length} steps of this run were kept.
+          {translator.translatePlural(
+            {
+              one: "Only the last {{count}} step of this run was kept.",
+              other: "Only the last {{count}} steps of this run were kept.",
+            },
+            steps.length,
+          )}
         </p>
       )}
 
-      <ol className="space-y-3" aria-label="Steps, in the order they ran">
+      <ol
+        className="space-y-3"
+        aria-label={translator.translateText("Steps, in the order they ran")}
+      >
         {steps.map((step: WorkflowStepTraceEntry, index: number) => {
           const isLastStep: boolean = index === steps.length - 1;
 

package/UI/Components/Workflow/UseRunWatch.ts

@@ -13,6 +13,7 @@ import {
   RunWatchDecision,
   WatchedRun,
   decideRunWatch,
+  RUN_STARTING_MESSAGE,
   isFailedRunStatus,
 } from "./RunStatusWatcher";
 import {
@@ -205,7 +206,7 @@ const useRunWatch: UseRunWatchFunction = (
     watchGeneration.current = watchGeneration.current + 1;
 
     setHasFailed(false);
-    setMessage("Starting run…");
+    setMessage(RUN_STARTING_MESSAGE);
     setLogs("");
     setStepTrace(emptyTrace());
     setWatchedRun(null);

package/UI/Components/Workflow/Utils.ts

@@ -1,4 +1,8 @@
 import { DropdownOption } from "../Dropdown/Dropdown";
+import {
+  translatableTerm,
+  translateTemplate,
+} from "../../Utils/TranslateTemplate";
 import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
 import IconProp from "../../../Types/Icon/IconProp";
 import { JSONObject } from "../../../Types/JSON";
@@ -55,7 +59,9 @@ export const loadComponentsAndCategories: LoadComponentsAndCategoriesFunction =
         name: model.singularName || "Model",
         description:
           model.tableDescription ||
-          `Interact with ${model.singularName} in your workflow.`,
+          translateTemplate("Interact with {{itemName}} in your workflow.", {
+            itemName: translatableTerm(model.singularName || "Model"),
+          }),
         icon: model.icon || IconProp.Database,
         tableName: model.tableName || undefined,
       });

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

@@ -19,6 +19,8 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { Translator } from "../../../Utils/TranslateTemplate";
+import useTranslator from "../../../Utils/UseTranslator";
 
 export interface InsertValueButtonProps {
   onPick: (reference: string) => void;
@@ -43,6 +45,7 @@ const DEFAULT_CLASS: string =
 const InsertValueButton: FunctionComponent<InsertValueButtonProps> = (
   props: InsertValueButtonProps,
 ): ReactElement | null => {
+  const translator: Translator = useTranslator();
   const picker: ValuePickerContextValue = useValuePicker();
   const anchorRef: React.MutableRefObject<HTMLButtonElement | null> =
     useRef<HTMLButtonElement | null>(null);
@@ -58,10 +61,10 @@ const InsertValueButton: FunctionComponent<InsertValueButtonProps> = (
         ref={anchorRef}
         type="button"
         className={props.className || DEFAULT_CLASS}
-        aria-label={
-          props.ariaLabel || (props.children ? undefined : INSERT_VALUE_LABEL)
-        }
-        title={props.ariaLabel || INSERT_VALUE_LABEL}
+        aria-label={translator.translateText(
+          props.ariaLabel || (props.children ? undefined : INSERT_VALUE_LABEL),
+        )}
+        title={translator.translateText(props.ariaLabel || INSERT_VALUE_LABEL)}
         aria-haspopup="dialog"
         aria-expanded={isOpen}
         data-testid={props.dataTestId || "insert-value-button"}
@@ -75,7 +78,7 @@ const InsertValueButton: FunctionComponent<InsertValueButtonProps> = (
         {props.children || (
           <>
             <span className="font-mono text-[11px] leading-none">{"{ }"}</span>
-            Insert value
+            {translator.translateText("Insert value")}
           </>
         )}
       </button>