Localize CSV report headers to support other languages

.changeset/localized-csv-headers.md

@@ -0,0 +1,5 @@
+---
+"@itwin/changed-elements-react": patch
+---
+
+Localize column headers of exported Change Report CSV files.

packages/changed-elements-react/public/locales/en/VersionCompare.json

@@ -203,7 +203,29 @@
     "queryingOldNativeIds": "Querying native Ids from older version",
     "noNativeIdsFound": "Native ids not found",
     "success": "Comparison report generated successfully",
-    "failure": "Failed to generate comparison report"
+    "failure": "Failed to generate comparison report",
+    "csvHeaders": {
+      "iModel": "iModel",
+      "currentVersion": "Current Version",
+      "targetVersion": "Target Version",
+      "elementId": "Element Id",
+      "nativeId": "Native Id",
+      "label": "Label",
+      "class": "Class",
+      "elementType": "Element Type",
+      "change": "Change",
+      "geometric": "Geometric",
+      "placement": "Placement",
+      "property": "Property",
+      "hidden": "Hidden",
+      "modelId": "Model Id",
+      "indirect": "Indirect",
+      "childrenIds": "Children Ids",
+      "newProperty": "New - {{label}}",
+      "oldProperty": "Old - {{label}}",
+      "name": "Name",
+      "sourceFile": "Source File"
+    }
   },
   "filters": {
     "save": "Save",

packages/changed-elements-react/src/api/ModelReportGenerator.ts

@@ -117,7 +117,7 @@ export class ModelReportGenerator extends ReportGeneratorBase {
   }
 
   private _getHeader() {
-    return "Model Id,Name,Source File,Change\n";
+    return this._getHeaderRow(["modelId", "name", "sourceFile", "change"]) + "\n";
   }
 
   private _infoToRow(info: ModelInfo | undefined, change: string): string {

packages/changed-elements-react/src/api/ReportGenerator.ts

@@ -81,9 +81,19 @@ export abstract class ReportGeneratorBase {
     return str.replace(/,/g, ";");
   }
 
+  /** Get a localized CSV column header, commas removed so translations can't shift columns */
+  protected _getColumnHeader(key: string, args?: Record<string, string>): string {
+    return this._cleanComma(IModelApp.localization.getLocalizedString(`VersionCompare:report.csvHeaders.${key}`, args));
+  }
+
+  /** Join localized CSV column headers */
+  protected _getHeaderRow(keys: string[]): string {
+    return keys.map((key) => this._getColumnHeader(key)).join(",");
+  }
+
   /** Get CSV Info header for iModel name, etc */
   protected _getInfoHeader(): string {
-    return "iModel,Current Version,Target Version,\n";
+    return this._getHeaderRow(["iModel", "currentVersion", "targetVersion"]) + ",\n";
   }
 
   /** Get IModel Name */
@@ -731,8 +741,8 @@ export class ReportGenerator extends ReportGeneratorBase {
 
     const propRows: string[] = [];
     for (const prop of props) {
-      propRows.push("New - " + prop.label);
-      propRows.push("Old - " + prop.label);
+      propRows.push(this._getColumnHeader("newProperty", { label: prop.label }));
+      propRows.push(this._getColumnHeader("oldProperty", { label: prop.label }));
     }
 
     return propRows
@@ -743,13 +753,13 @@ export class ReportGenerator extends ReportGeneratorBase {
   /** Get CSV header */
   private _getHeader(): string {
     return (
-      "Element Id,Native Id,Label,Class,Element Type,Change," +
+      this._getHeaderRow(["elementId", "nativeId", "label", "class", "elementType", "change"]) + "," +
       (this._options.wantTypeOfChange
-        ? "Geometric,Placement,Property,Hidden,"
+        ? this._getHeaderRow(["geometric", "placement", "property", "hidden"]) + ","
         : "") +
-      "Model Id,Indirect," +
+      this._getHeaderRow(["modelId", "indirect"]) + "," +
       (this._wantProperties() ? this._getPropertyHeader() + "," : "") +
-      "Children Ids,\n"
+      this._getColumnHeader("childrenIds") + ",\n"
     );
   }