fix(react-components): Make translation strings for all UX I have don…

…e in this cycle (#4858)

* Init commit

* More translation

* Fixes

react-components/src/architecture/base/concreteCommands/image360Collection/Image360ActionCommand.ts

@@ -41,13 +41,13 @@ export class Image360ActionCommand extends RenderTargetCommand {
   public override get tooltip(): TranslateKey {
     switch (this._action) {
       case Image360Action.Backward:
-        return { fallback: 'Go one 360 image back' }; // @need-translation
+        return { key: 'GO_BACK_360', fallback: 'Go one 360 image back' };
       case Image360Action.Forward:
-        return { fallback: 'Go one 360 image forward' }; // @need-translation
+        return { key: 'GO_FORWARD_360', fallback: 'Go one 360 image forward' };
       case Image360Action.Enter:
-        return { fallback: 'Enter last exited 360 image' }; // @need-translation
+        return { key: 'ENTER_LAST_360', fallback: 'Enter last exited 360 image' };
       case Image360Action.Exit:
-        return { fallback: 'Exit 360 image' }; // @need-translation
+        return { key: 'EXIT_360', fallback: 'Exit 360 image' };
       default:
         throw new Error('Unknown action');
     }

react-components/src/architecture/base/concreteCommands/image360Collection/Set360IconsOccludedVisibleCommand.ts

@@ -12,7 +12,7 @@ export class Set360IconsOccludedVisibleCommand extends RenderTargetCommand {
   // ==================================================
 
   public override get tooltip(): TranslateKey {
-    return { fallback: 'X-ray' }; // @need-translation
+    return { key: 'X_RAY', fallback: 'X-ray' };
   }
 
   public override get isEnabled(): boolean {

react-components/src/architecture/base/concreteCommands/image360Collection/Set360IconsOpacityCommand.ts

@@ -12,7 +12,7 @@ export class Set360IconsOpacityCommand extends FractionSliderCommand {
   // ==================================================
 
   public override get tooltip(): TranslateKey {
-    return { fallback: 'Marker transparency' }; // @need-translation
+    return { key: 'MARKER TRANSPARENCY', fallback: 'Marker transparency' };
   }
 
   public override get isEnabled(): boolean {

react-components/src/architecture/base/concreteCommands/image360Collection/Set360IconsSectionCommand.ts

@@ -10,6 +10,6 @@ export class Set360IconsSectionCommand extends SectionCommand {
   }
 
   public override get tooltip(): TranslateKey {
-    return { fallback: '360 Markers' }; // @need-translation
+    return { key: 'MARKERS_360', fallback: '360 Markers' };
   }
 }

react-components/src/architecture/base/concreteCommands/image360Collection/Set360IconsVisibleCommand.ts

@@ -12,7 +12,7 @@ export class Set360IconsVisibleCommand extends RenderTargetCommand {
   // ==================================================
 
   public override get tooltip(): TranslateKey {
-    return { fallback: 'Visible' }; // @need-translation
+    return { key: 'VISIBLE', fallback: 'Visible' };
   }
 
   public override get isEnabled(): boolean {

react-components/src/architecture/base/concreteCommands/image360Collection/Set360ImagesOpacityCommand.ts

@@ -12,7 +12,7 @@ export class Set360ImagesOpacityCommand extends FractionSliderCommand {
   // ==================================================
 
   public override get tooltip(): TranslateKey {
-    return { fallback: 'Image Transparency' }; // @need-translation
+    return { key: 'IMAGE_TRANSPARENCY', fallback: 'Image Transparency' };
   }
 
   public override get isEnabled(): boolean {

react-components/src/architecture/base/concreteCommands/image360Collection/Set360ImagesSectionCommand.ts

@@ -10,6 +10,6 @@ export class Set360ImagesSectionCommand extends SectionCommand {
   }
 
   public override get tooltip(): TranslateKey {
-    return { fallback: '360 Images' }; // @need-translation
+    return { key: 'IMAGES_360', fallback: '360 images' };
   }
 }

react-components/src/architecture/concrete/example/ExampleDomainObject.ts

@@ -71,13 +71,13 @@ export class ExampleDomainObject extends VisualDomainObject {
     const info = new PanelInfo();
     info.setHeader(this.typeName);
     // In production code, you should add a Key also!
-    add('X coordinate', this.center.x, Quantity.Length);
-    add('Y coordinate', this.center.y, Quantity.Length);
-    add('Z coordinate', this.center.z, Quantity.Length);
+    add('X_COORDINATE', 'X coordinate', this.center.x, Quantity.Length);
+    add('Y_COORDINATE', 'Y coordinate', this.center.y, Quantity.Length);
+    add('Z_COORDINATE', 'Z coordinate', this.center.z, Quantity.Length);
     return info;
 
-    function add(fallback: string, value: number, quantity: Quantity): void {
-      info.add({ fallback, value, quantity });
+    function add(key: string, fallback: string, value: number, quantity: Quantity): void {
+      info.add({ key, fallback, value, quantity });
     }
   }
 

react-components/src/architecture/concrete/pointsOfInterest/PointsOfInterestDomainObject.ts

@@ -60,9 +60,12 @@ export class PointsOfInterestDomainObject<PoIIdType> extends VisualDomainObject
 
     if (this._selectedPointsOfInterest !== undefined) {
       const properties = this._selectedPointsOfInterest.properties;
-      info.add({ fallback: 'X', value: properties.positionX, quantity: Quantity.Length });
-      info.add({ fallback: 'Y', value: properties.positionY, quantity: Quantity.Length });
-      info.add({ fallback: 'Z', value: properties.positionZ, quantity: Quantity.Length });
+      add('X_COORDINATE', 'X coordinate', properties.positionX, Quantity.Length);
+      add('Y_COORDINATE', 'Y coordinate', properties.positionY, Quantity.Length);
+      add('Z_COORDINATE', 'Z coordinate', properties.positionZ, Quantity.Length);
+    }
+    function add(key: string, fallback: string, value: number, quantity: Quantity): void {
+      info.add({ key, fallback, value, quantity });
     }
     return info;
   }

react-components/src/architecture/concrete/primitives/box/BoxDomainObject.ts

@@ -110,13 +110,7 @@ export abstract class BoxDomainObject extends SolidDomainObject {
     }
     // I forgot to add text for rotation angle before the deadline, so I used a icon instead.
     if (box.rotation.z !== 0 && isFinished) {
-      info.add({
-        key: undefined,
-        fallback: '',
-        icon: 'Angle',
-        value: box.zRotationInDegrees,
-        quantity: Quantity.Angle
-      });
+      add('HORIZONTAL_ANGLE', 'Horizontal angle', box.zRotationInDegrees, Quantity.Angle);
     }
     return info;
 

react-components/src/architecture/concrete/primitives/cylinder/CylinderDomainObject.ts

@@ -69,7 +69,7 @@ export abstract class CylinderDomainObject extends SolidDomainObject {
     const hasHeight = Cylinder.isValidSize(cylinder.height);
 
     if (isFinished || hasRadius) {
-      add('MEASUREMENTS_RADIUS', 'Radius', cylinder.radius, Quantity.Length);
+      add('RADIUS', 'Radius', cylinder.radius, Quantity.Length);
     }
     if (isFinished || hasHeight) {
       add('MEASUREMENTS_HEIGHT', 'Height', cylinder.height, Quantity.Length);

react-components/src/architecture/concrete/primitives/plane/PlaneDomainObject.ts

@@ -121,17 +121,17 @@ export abstract class PlaneDomainObject extends VisualDomainObject {
 
     switch (this.primitiveType) {
       case PrimitiveType.PlaneX:
-        add('XCOORDINATE', 'X coordinate', this.coordinate, Quantity.Length);
+        add('X_COORDINATE', 'X coordinate', this.coordinate, Quantity.Length);
         break;
       case PrimitiveType.PlaneY:
-        add('YCOORDINATE', 'Y coordinate', this.coordinate, Quantity.Length);
+        add('Y_COORDINATE', 'Y coordinate', this.coordinate, Quantity.Length);
         break;
       case PrimitiveType.PlaneZ:
-        add('ZCOORDINATE', 'Z coordinate', this.coordinate, Quantity.Length);
+        add('Z_COORDINATE', 'Z coordinate', this.coordinate, Quantity.Length);
         break;
       case PrimitiveType.PlaneXY:
         add('DISTANCE_TO_ORIGIN', 'Distance to origin', this.coordinate, Quantity.Length);
-        add('ANGLE', 'Angle', radToDeg(this.angle), Quantity.Angle);
+        add('HORIZONTAL_ANGLE', 'Horizontal angle', radToDeg(this.angle), Quantity.Angle);
         break;
     }
     return info;

react-components/src/common/i18n/en/reveal-react-components.json

@@ -28,6 +28,7 @@
   "HELP_TOOLTIP": "Help",
   "HIGH_FIDELITY": "High fidelity",
   "IMAGES_360": "360 images",
+  "MARKERS_360": "360 Markers",
   "IMAGES_360_DETAILS": "Details",
   "IMAGES_360_DETAILS_TOOLTIP": "360 Image historical details",
   "IMAGES_360_STATION": "Station :",
@@ -111,5 +112,20 @@
   "UNDO": "Undo",
   "WIDGET_WINDOW_CLOSE": "Close",
   "WIDGET_WINDOW_EXPAND": "Expand",
-  "WIDGET_WINDOW_MINIMIZE": "Minimize"
+  "WIDGET_WINDOW_MINIMIZE": "Minimize",
+  "VISIBLE": "Visible",
+  "IMAGE_TRANSPARENCY": "Image Transparency",
+  "GHOST_MODE": "Ghost mode",
+  "MARKER TRANSPARENCY": "Marker transparency",
+  "X_RAY": "X-ray",
+  "GO_BACK_360": "Go one 360 image back",
+  "GO_FORWARD_360": "Go one 360 image forward",
+  "ENTER_LAST_360": "Enter last exited 360 image",
+  "EXIT_360": "Exit 360 image",
+  "HORIZONTAL_ANGLE": "Horizontal angle",
+  "DISTANCE_TO_ORIGIN": "Distance to origin",
+  "X:COORDINATE": "X coordinate",
+  "Y_COORDINATE": "Y coordinate",
+  "Z_COORDINATE": "Z coordinate",
+  "RADIUS": "Radius"
 }