Externalise start and end node names (#714)

Author: lewisbirks

src/main/frontend/common/RestClient.tsx

@@ -2,7 +2,7 @@ import {
   Result,
   StageInfo,
 } from "../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx";
-import { ResourceBundle } from "./i18n/messages.ts";
+import { ResourceBundle } from "./i18n/index.ts";
 
 export interface RunStatus {
   stages: StageInfo[];

src/main/frontend/common/i18n/index.ts

@@ -2,4 +2,8 @@ export * from "./i18n-provider.tsx";
 export * from "./locale-provider.tsx";
 export type { MessageContext } from "./message-format.ts";
 export type { ResourceBundle } from "./messages.ts";
-export { Messages, ResourceBundleName } from "./messages.ts";
+export {
+  LocalizedMessageKey,
+  Messages,
+  ResourceBundleName,
+} from "./messages.ts";

src/main/frontend/common/i18n/messages.spec.ts

@@ -1,7 +1,12 @@
 import { Mock, vi } from "vitest";
 
 import { getResourceBundle } from "../RestClient.tsx";
-import { getMessages, Messages, ResourceBundleName } from "./messages.ts";
+import {
+  getMessages,
+  LocalizedMessageKey,
+  Messages,
+  ResourceBundleName,
+} from "./messages.ts";
 
 vi.mock("../RestClient.tsx", () => ({
   getResourceBundle: vi.fn(),
@@ -53,9 +58,15 @@ describe("Messages", () => {
 
       const messages = await getMessages("en", [ResourceBundleName.messages]);
 
-      expect(messages.format("Util.second", { 0: 5 })).toEqual("5 sec");
-      expect(messages.format("Util.day", { 0: 1 })).toEqual("1 day");
-      expect(messages.format("Util.day", { 0: 2 })).toEqual("2 days");
+      expect(messages.format(LocalizedMessageKey.second, { 0: 5 })).toEqual(
+        "5 sec",
+      );
+      expect(messages.format(LocalizedMessageKey.day, { 0: 1 })).toEqual(
+        "1 day",
+      );
+      expect(messages.format(LocalizedMessageKey.day, { 0: 2 })).toEqual(
+        "2 days",
+      );
       expect(messages.format("A.property")).toEqual("");
     });
   });

src/main/frontend/common/i18n/messages.ts

@@ -6,11 +6,11 @@ import {
 } from "./message-format.ts";
 
 export type ResourceBundle = {
-  [key: string]: string;
+  [key: MessageKeyType]: string;
 };
 
 export class Messages {
-  private readonly mapping: Record<string, CompiledMessage>;
+  private readonly mapping: Record<MessageKeyType, CompiledMessage>;
 
   constructor(messages: ResourceBundle, locale: string) {
     const entries = Object.entries(messages);
@@ -23,7 +23,7 @@ export class Messages {
     }
   }
 
-  private get(key: string): CompiledMessage {
+  private get(key: MessageKeyType): CompiledMessage {
     const message = this.mapping[key];
     if (message != null) {
       return message;
@@ -37,7 +37,10 @@ export class Messages {
     };
   }
 
-  format(key: string, args: MessageContext | undefined = undefined): string {
+  format(
+    key: MessageKeyType,
+    args: MessageContext | undefined = undefined,
+  ): string {
     const message = this.get(key);
     return message.format(args);
   }
@@ -63,16 +66,34 @@ export async function getMessages(
   return new Messages(messages, locale);
 }
 
+export type MessageKeyType = LocalizedMessageKey | string;
+
+export enum LocalizedMessageKey {
+  millisecond = "timings.millisecond",
+  second = "timings.second",
+  minute = "timings.minute",
+  hour = "timings.hour",
+  day = "timings.day",
+  month = "timings.month",
+  year = "timings.year",
+  startedAgo = "startedAgo",
+  noBuilds = "noBuilds",
+  start = "node.start",
+  end = "node.end",
+}
+
 const DEFAULT_MESSAGES: ResourceBundle = {
-  "Util.millisecond": "{0} ms",
-  "Util.second": "{0} sec",
-  "Util.minute": "{0} min",
-  "Util.hour": "{0} hr",
-  "Util.day": "{0} {0,choice,0#days|1#day|1<days}",
-  "Util.month": "{0} mo",
-  "Util.year": "{0} yr",
-  startedAgo: "Started {0} ago",
-  noBuilds: "No builds",
+  [LocalizedMessageKey.millisecond]: "{0} ms",
+  [LocalizedMessageKey.second]: "{0} sec",
+  [LocalizedMessageKey.minute]: "{0} min",
+  [LocalizedMessageKey.hour]: "{0} hr",
+  [LocalizedMessageKey.day]: "{0} {0,choice,0#days|1#day|1<days}",
+  [LocalizedMessageKey.month]: "{0} mo",
+  [LocalizedMessageKey.year]: "{0} yr",
+  [LocalizedMessageKey.startedAgo]: "Started {0} ago",
+  [LocalizedMessageKey.noBuilds]: "No builds",
+  [LocalizedMessageKey.start]: "Start",
+  [LocalizedMessageKey.end]: "End",
 };
 
 export function defaultMessages(locale: string): Messages {

src/main/frontend/common/utils/timings.spec.tsx

@@ -3,21 +3,20 @@
 import { render } from "@testing-library/react";
 import { vi } from "vitest";
 
-import { I18NContext } from "../i18n/i18n-provider.tsx";
-import { Messages } from "../i18n/messages.ts";
+import { I18NContext, LocalizedMessageKey, Messages } from "../i18n/index.ts";
 import { Paused, Started, Total } from "./timings.tsx";
 
 describe("Timings", () => {
   const translations = new Messages(
     {
-      "Util.year": "{0} yr",
-      "Util.month": "{0} mo",
-      "Util.day": "{0} day",
-      "Util.hour": "{0} hr",
-      "Util.minute": "{0} min",
-      "Util.second": "{0} sec",
-      "Util.millisecond": "{0} ms",
-      startedAgo: "Started {0} ago",
+      [LocalizedMessageKey.year]: "{0} yr",
+      [LocalizedMessageKey.month]: "{0} mo",
+      [LocalizedMessageKey.day]: "{0} day",
+      [LocalizedMessageKey.hour]: "{0} hr",
+      [LocalizedMessageKey.minute]: "{0} min",
+      [LocalizedMessageKey.second]: "{0} sec",
+      [LocalizedMessageKey.millisecond]: "{0} ms",
+      [LocalizedMessageKey.startedAgo]: "Started {0} ago",
     },
     "en",
   );

src/main/frontend/common/utils/timings.tsx

@@ -1,7 +1,6 @@
 import { useContext } from "react";
 
-import { I18NContext } from "../i18n/i18n-provider";
-import { Messages } from "../i18n/messages";
+import { I18NContext, LocalizedMessageKey, Messages } from "../i18n/index.ts";
 
 const ONE_SECOND_MS: number = 1000;
 const ONE_MINUTE_MS: number = 60 * ONE_SECOND_MS;
@@ -10,15 +9,6 @@ const ONE_DAY_MS: number = 24 * ONE_HOUR_MS;
 const ONE_MONTH_MS: number = 30 * ONE_DAY_MS;
 const ONE_YEAR_MS: number = 365 * ONE_DAY_MS;
 
-const YEAR = "Util.year";
-const MONTH = "Util.month";
-const HOURS = "Util.hour";
-const DAY = "Util.day";
-const MINUTE = "Util.minute";
-const SECOND = "Util.second";
-const MILLIS = "Util.millisecond";
-const STARTED_AGO = "startedAgo";
-
 /**
  * Create a string representation of a time duration.
  * If the quantity of the most significant unit is big (>=10), then we use only that most significant unit in the string representation.
@@ -60,48 +50,50 @@ function getTimeSpanString(duration: number, messages: Messages): string {
   if (years > 0) {
     return makeTimeSpanString(
       years,
-      messages.format(YEAR, { "0": years }),
+      messages.format(LocalizedMessageKey.year, { "0": years }),
       months,
-      messages.format(MONTH, { "0": months }),
+      messages.format(LocalizedMessageKey.month, { "0": months }),
     );
   } else if (months > 0) {
     return makeTimeSpanString(
       months,
-      messages.format(MONTH, { "0": months }),
+      messages.format(LocalizedMessageKey.month, { "0": months }),
       days,
-      messages.format(DAY, { "0": days }),
+      messages.format(LocalizedMessageKey.day, { "0": days }),
     );
   } else if (days > 0) {
     return makeTimeSpanString(
       days,
-      messages.format(DAY, { "0": days }),
+      messages.format(LocalizedMessageKey.day, { "0": days }),
       hours,
-      messages.format(HOURS, { "0": hours }),
+      messages.format(LocalizedMessageKey.hour, { "0": hours }),
     );
   } else if (hours > 0) {
     return makeTimeSpanString(
       hours,
-      messages.format(HOURS, { "0": hours }),
+      messages.format(LocalizedMessageKey.hour, { "0": hours }),
       minutes,
-      messages.format(MINUTE, { "0": minutes }),
+      messages.format(LocalizedMessageKey.minute, { "0": minutes }),
     );
   } else if (minutes > 0) {
     return makeTimeSpanString(
       minutes,
-      messages.format(MINUTE, { "0": minutes }),
+      messages.format(LocalizedMessageKey.minute, { "0": minutes }),
       seconds,
-      messages.format(SECOND, { "0": seconds }),
+      messages.format(LocalizedMessageKey.second, { "0": seconds }),
     );
   } else if (seconds >= 10) {
-    return messages.format(SECOND, { "0": seconds });
+    return messages.format(LocalizedMessageKey.second, { "0": seconds });
   } else if (seconds >= 1) {
-    return messages.format(SECOND, {
+    return messages.format(LocalizedMessageKey.second, {
       "0": seconds + Math.floor(millis / 100) / 10,
     });
   } else if (millis >= 100) {
-    return messages.format(SECOND, { "0": Math.floor(millis / 10) / 100 });
+    return messages.format(LocalizedMessageKey.second, {
+      "0": Math.floor(millis / 10) / 100,
+    });
   } else {
-    return messages.format(MILLIS, { "0": millis });
+    return messages.format(LocalizedMessageKey.millisecond, { "0": millis });
   }
 }
 
@@ -123,7 +115,7 @@ export function Started({ since }: { since: number }) {
 
   return (
     <>
-      {messages.format(STARTED_AGO, {
+      {messages.format(LocalizedMessageKey.startedAgo, {
         "0": getTimeSpanString(Math.abs(since - Date.now()), messages),
       })}
     </>

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraph.tsx

@@ -1,6 +1,10 @@
 import { useContext, useEffect, useState } from "react";
 
-import { I18NContext, LocaleContext } from "../../../common/i18n/index.ts";
+import {
+  I18NContext,
+  LocaleContext,
+  LocalizedMessageKey,
+} from "../../../common/i18n/index.ts";
 import { RunInfo } from "./MultiPipelineGraphModel.ts";
 import SingleRun from "./SingleRun.tsx";
 import startPollingRunsStatus from "./support/startPollingRunsStatus.ts";
@@ -48,7 +52,7 @@ export const MultiPipelineGraph = () => {
       {Object.keys(groupedRuns).length === 0 ? (
         <div className="pgv-stages__group">
           <div className="pgv-stages__heading">
-            {messages.format("noBuilds")}
+            {messages.format(LocalizedMessageKey.noBuilds)}
           </div>
         </div>
       ) : (

src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraph.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 
+import { I18NContext } from "../../../common/i18n/index.ts";
 import { layoutGraph } from "./PipelineGraphLayout";
 import {
   CompositeConnection,
@@ -63,8 +64,15 @@ export function PipelineGraph(props: Props) {
     }
   }, [layout, selectedStage, stages]);
 
+  const messages = useContext(I18NContext);
+
   const updateLayout = (newStages: StageInfo[] = []) => {
-    const newLayout = layoutGraph(newStages, layoutState, collapsed ?? false);
+    const newLayout = layoutGraph(
+      newStages,
+      layoutState,
+      collapsed ?? false,
+      messages,
+    );
     setNodeColumns(newLayout.nodeColumns);
     setConnections(newLayout.connections);
     setBigLabels(newLayout.bigLabels);

src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraphLayout.ts

@@ -1,3 +1,4 @@
+import { LocalizedMessageKey, Messages } from "../../../common/i18n/index.ts";
 import {
   CompositeConnection,
   LayoutInfo,
@@ -27,14 +28,15 @@ export function layoutGraph(
   newStages: Array<StageInfo>,
   layout: LayoutInfo,
   collapsed: boolean,
+  messages: Messages,
 ): PositionedGraph {
   const stageNodeColumns = createNodeColumns(newStages, collapsed);
   const { nodeSpacingH, ypStart } = layout;
 
   const startNode: NodeInfo = {
     x: 0,
     y: 0,
-    name: "Start",
+    name: messages.format(LocalizedMessageKey.start),
     id: -1,
     isPlaceholder: true,
     key: "start-node",
@@ -44,7 +46,7 @@ export function layoutGraph(
   const endNode: NodeInfo = {
     x: 0,
     y: 0,
-    name: "End",
+    name: messages.format(LocalizedMessageKey.end),
     id: -3,
     isPlaceholder: true,
     key: "end-node",

src/main/resources/io/jenkins/plugins/pipelinegraphview/Messages.properties

@@ -23,10 +23,13 @@
 startedAgo=Started {0} ago
 noBuilds=No builds
 
-Util.millisecond={0} ms
-Util.second={0} sec
-Util.minute={0} min
-Util.hour  ={0} hr
-Util.day   ={0} {0,choice,0#days|1#day|1<days}
-Util.month ={0} mo
-Util.year  ={0} yr
+node.start=Start
+node.end=End
+
+timings.millisecond={0} ms
+timings.second={0} sec
+timings.minute={0} min
+timings.hour  ={0} hr
+timings.day   ={0} {0,choice,0#days|1#day|1<days}
+timings.month ={0} mo
+timings.year  ={0} yr

src/main/resources/io/jenkins/plugins/pipelinegraphview/Messages_bg.properties

@@ -23,17 +23,17 @@
 startedAgo=\
  Стартирано преди {0}
 
-Util.millisecond=\
+timings.millisecond=\
  {0} {0,choice,0#милисекунди|1#милисекунда|1<милисекунди}
-Util.second=\
+timings.second=\
  {0} {0,choice,0#секунди|1#секунда|1секунди}
-Util.minute=\
+timings.minute=\
  {0} {0,choice,0#минути|1#минута|1<минути}
-Util.hour  =\
+timings.hour  =\
  {0} {0,choice,0#часа|1#час|1<часа}
-Util.day   =\
+timings.day   =\
  {0} {0,choice,0#дни|1#ден|1<дни}
-Util.month =\
+timings.month =\
  {0} {0,choice,0#месеца|1#месец|1<месеца}
-Util.year  =\
+timings.year  =\
  {0} {0,choice,0#години|1#година|1<години}