fix(react-components): Finalize the string for translation (#4711)

* Initial commit

* Add final strings

* Fix shortcut keys on commands so they are according to Cogs standard

* Sync strings

react-components/src/architecture/base/commands/BaseCommand.ts

@@ -163,18 +163,19 @@ export abstract class BaseCommand {
     return translate(key, fallback);
   }
 
-  public getShortCutKeys(): string | undefined {
+  public getShortCutKeys(): string[] | undefined {
     const key = this.shortCutKey;
     if (key === undefined) {
       return undefined;
     }
-    let result = '';
+    const keys: string[] = [];
     if (this.shortCutKeyOnCtrl) {
-      result += 'Ctrl+';
+      keys.push('Ctrl');
     }
     if (this.shortCutKeyOnShift) {
-      result += 'Shift+';
+      keys.push('Shift');
     }
-    return result + key;
+    keys.push(key);
+    return keys;
   }
 }

react-components/src/architecture/base/commands/mocks/MockFilterCommand.ts

@@ -21,7 +21,7 @@ export class MockFilterCommand extends BaseFilterCommand {
   // ==================================================
 
   public override get tooltip(): TranslateKey {
-    return { key: '', fallback: 'Filter' };
+    return { fallback: 'Filter' };
   }
 
   protected override createChildren(): FilterItemCommand[] {

react-components/src/architecture/base/concreteCommands/PointCloudFilterCommand.ts

@@ -22,7 +22,7 @@ export class PointCloudFilterCommand extends BaseFilterCommand {
   // ==================================================
 
   public override get tooltip(): TranslateKey {
-    return { key: 'POINT_FILTER', fallback: 'Points filter' };
+    return { key: 'POINT_FILTER', fallback: 'Point filter' };
   }
 
   public override get isEnabled(): boolean {

react-components/src/architecture/base/concreteCommands/SetPointColorTypeCommand.ts

@@ -80,18 +80,18 @@ function getTranslateKey(type: PointColorType): TranslateKey {
     case PointColorType.Rgb:
       return { key: 'RGB', fallback: 'RGB' };
     case PointColorType.Depth:
-      return { key: 'DEPTH', fallback: 'Depth' };
+      return { key: 'MEASUREMENTS_DEPTH', fallback: 'Depth' };
     case PointColorType.Height:
-      return { key: 'HEIGHT', fallback: 'Height' };
+      return { key: 'MEASUREMENTS_HEIGHT', fallback: 'Height' };
     case PointColorType.Classification:
       return { key: 'CLASSIFICATION', fallback: 'Classification' };
     case PointColorType.Intensity:
       return { key: 'INTENSITY', fallback: 'Intensity' };
     case PointColorType.LevelOfDetail:
-      return { key: 'LEVEL_OF_DETAIL', fallback: 'LevelOfDetail' };
+      return { fallback: 'LevelOfDetail' };
     case PointColorType.PointIndex:
-      return { key: 'POINT_INDEX', fallback: 'PointIndex' };
+      return { fallback: 'PointIndex' };
     default:
-      return { key: 'UNKNOWN', fallback: 'Unknown' };
+      return { fallback: 'Unknown' };
   }
 }

react-components/src/architecture/concrete/clipping/ClipTool.ts

@@ -37,7 +37,7 @@ export class ClipTool extends PrimitiveEditTool {
   }
 
   public override get tooltip(): TranslateKey {
-    return { key: 'CLIP_TOOL', fallback: 'Create or edit crop box and slice planes' };
+    return { key: 'CLIP_TOOL', fallback: 'Create, edit crop boxes, and slice planes' };
   }
 
   public override getToolbar(): Array<BaseCommand | undefined> {

react-components/src/architecture/concrete/clipping/SliceDomainObject.ts

@@ -32,13 +32,13 @@ export class SliceDomainObject extends PlaneDomainObject {
   public override get typeName(): TranslateKey {
     switch (this.primitiveType) {
       case PrimitiveType.PlaneX:
-        return { key: 'SLICE_X', fallback: 'X slice' };
+        return { key: 'SLICE_X', fallback: 'Vertical slice along Y-axis' };
       case PrimitiveType.PlaneY:
-        return { key: 'SLICE_Y', fallback: 'Y slice' };
+        return { key: 'SLICE_Y', fallback: 'Vertical slice along X-axis' };
       case PrimitiveType.PlaneZ:
-        return { key: 'SLICE_Z', fallback: 'Z slice' };
+        return { key: 'SLICE_Z', fallback: 'Horizontal slice' };
       case PrimitiveType.PlaneXY:
-        return { key: 'SLICE_XY', fallback: 'XY slice' };
+        return { key: 'SLICE_XY', fallback: 'Vertical slice' };
       default:
         throw new Error('Unknown PrimitiveType');
     }

react-components/src/architecture/concrete/clipping/commands/ApplyClipCommand.ts

@@ -18,7 +18,7 @@ export class ApplyClipCommand extends RenderTargetCommand {
   public override get tooltip(): TranslateKey {
     return {
       key: 'CLIP_APPLY',
-      fallback: 'Apply selected crop box to the model if any, otherwise apply all slice planes'
+      fallback: 'Apply selected crop box to a model. Otherwise, apply to all slice planes'
     };
   }
 

react-components/src/architecture/concrete/clipping/commands/FlipSliceCommand.ts

@@ -14,7 +14,7 @@ export class FlipSliceCommand extends DomainObjectCommand<SliceDomainObject> {
   // ==================================================
 
   public override get tooltip(): TranslateKey {
-    return { key: 'SLICE_FLIP', fallback: 'Flip side on this slice' };
+    return { key: 'SLICE_FLIP', fallback: 'Flip side' };
   }
 
   public override get icon(): string {

react-components/src/architecture/concrete/clipping/commands/NextClippingCommand.ts

@@ -29,12 +29,12 @@ export class NextOrPrevClippingCommand extends RenderTargetCommand {
     if (this._next) {
       return {
         key: 'CLIP_NEXT',
-        fallback: 'Set the next crop box or slicing plane as global clipping'
+        fallback: 'Set next crop box or slicing plane as global clipping'
       };
     } else {
       return {
         key: 'CLIP_PREV',
-        fallback: 'Set the previous crop box or slicing plane as global clipping'
+        fallback: 'Set previous crop box or slicing plane as global clipping'
       };
     }
   }

react-components/src/architecture/concrete/clipping/commands/SetClipTypeCommand.ts

@@ -113,29 +113,29 @@ function getTooltipByPrimitiveType(primitiveType: PrimitiveType): TranslateKey {
   switch (primitiveType) {
     case PrimitiveType.PlaneX:
       return {
-        key: 'SLICE_X_ADD',
-        fallback: 'Add X slice. Click at one point.'
+        key: 'ADD_SLICE_X',
+        fallback: 'Add vertical slice along Y-axis. Select a point.'
       };
     case PrimitiveType.PlaneY:
       return {
-        key: 'SLICE_Y_ADD',
-        fallback: 'Add Y slice. Click at one point.'
+        key: 'ADD_SLICE_Y',
+        fallback: 'Add vertical slice along X-axis. Select a point.'
       };
     case PrimitiveType.PlaneZ:
       return {
-        key: 'SLICE_Z_ADD',
-        fallback: 'Add Z slice. Click at one point.'
+        key: 'ADD_SLICE_Z',
+        fallback: 'Add horizontal slice. Select a point.'
       };
     case PrimitiveType.PlaneXY:
       return {
-        key: 'SLICE_XY_ADD',
-        fallback: 'Add XY slice. Click at two points.'
+        key: 'ADD_SLICE_XY',
+        fallback: 'Add vertical slice. Select two points.'
       };
     case PrimitiveType.Box:
       return {
-        key: 'CROP_BOX_ADD',
+        key: 'ADD_CROP_BOX',
         fallback:
-          'Create crop box. Click at three points in a horizontal plan and the fourth to give it height.'
+          'Create crop box. Select three points in a horizontal plane, then select a fourth point for height.'
       };
     default:
       throw new Error('Unknown PrimitiveType');

react-components/src/architecture/concrete/clipping/commands/ShowAllClippingCommand.ts

@@ -16,7 +16,7 @@ export class ShowAllClippingCommand extends InstanceCommand {
   public override get tooltip(): TranslateKey {
     return {
       key: 'CLIP_SHOW_SELECTED_ONLY',
-      fallback: 'Show or hide all other slicing planes and crop boxes than selected'
+      fallback: 'Show/hide slicing planes and crop boxes that are not selected'
     };
   }
 

react-components/src/architecture/concrete/clipping/commands/ShowClippingOnTopCommand.ts

@@ -14,7 +14,7 @@ export class ShowClippingOnTopCommand extends ShowDomainObjectsOnTopCommand {
   // ==================================================
 
   public override get tooltip(): TranslateKey {
-    return { key: 'CLIP_SHOW_ON_TOP', fallback: 'Show all crop boxes and slices on top' };
+    return { key: 'CLIP_SHOW_ON_TOP', fallback: 'Show crop boxes and slices on top' };
   }
 
   protected override isInstance(domainObject: DomainObject): boolean {

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

@@ -88,13 +88,13 @@ export abstract class PlaneDomainObject extends VisualDomainObject {
   public override get typeName(): TranslateKey {
     switch (this.primitiveType) {
       case PrimitiveType.PlaneX:
-        return { key: 'PLANE_X', fallback: 'Vertical plane along Y-axis' };
+        return { fallback: 'Vertical plane along Y-axis' };
       case PrimitiveType.PlaneY:
-        return { key: 'PLANE_Y', fallback: 'Vertical plane along X-axis' };
+        return { fallback: 'Vertical plane along X-axis' };
       case PrimitiveType.PlaneZ:
-        return { key: 'PLANE_Z', fallback: 'Horizontal plane' };
+        return { fallback: 'Horizontal plane' };
       case PrimitiveType.PlaneXY:
-        return { key: 'PLANE_XY', fallback: 'Vertical plane' };
+        return { fallback: 'Vertical plane' };
       default:
         throw new Error('Unknown PrimitiveType');
     }

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

@@ -79,5 +79,36 @@
   "TOUCH_ZOOM": "Zoom",
   "WIDGET_WINDOW_CLOSE": "Close",
   "WIDGET_WINDOW_EXPAND": "Expand",
-  "WIDGET_WINDOW_MINIMIZE": "Minimize"
+  "WIDGET_WINDOW_MINIMIZE": "Minimize",
+  "POINTS_FILTER": "Point filter",
+  "POINT_COLOR": "Point color",
+  "POINT_SHAPE": "Point shape",
+  "POINT_SIZE": "Point size",
+  "RGB": "RGB",
+  "CLASSIFICATION": "Classification",
+  "INTENSITY": "Intensity",
+  "CIRCLE": "Circle",
+  "SQUARE": "Square",
+  "PARABOLOID": "Paraboloid",
+  "UNDO": "Undo",
+  "REDO": "Redo",
+  "CROP_BOX": "Crop box",
+  "SLICE_X": "Vertical slice along Y-axis",
+  "SLICE_Y": "Vertical slice along X-axis",
+  "SLICE_Z": "Horizontal slice",
+  "SLICE_XY": "Vertical slice",
+  "SLICE_FLIP": "Flip side",
+  "ADD_SLICE_X": "Add vertical slice along Y-axis. Select a point.",
+  "ADD_SLICE_Y": "Add vertical slice along X-axis. Select a point.",
+  "ADD_SLICE_Z": "Add horizontal slice. Select a point.",
+  "ADD_SLICE_XY": "Add vertical slice. Select two points.",
+  "ADD_CROP_BOX": "Create crop box. Select three points in a horizontal plane, then select a fourth point for height.",
+  "CLIP_TOOL": "Create, edit crop boxes, and slice planes",
+  "CLIP_APPLY": "Apply selected crop box to a model. Otherwise, apply to all slice planes",
+  "CLIP_SHOW_SELECTED_ONLY": "Show/hide slicing planes and crop boxes that are not selected",
+  "CLIP_SHOW_ON_TOP": "Show crop boxes and slices on top",
+  "CLIP_NEXT": "Set next crop box or slicing plane as global clipping",
+  "CLIP_PREV": "Set previous crop box or slicing plane as global clipping"
 }
+
+

react-components/src/components/Architecture/CommandButton.tsx

@@ -48,11 +48,10 @@ export const CommandButton = ({
   }
   const placement = getTooltipPlacement(isHorizontal);
   const label = command.getLabel(t);
-  const shortcut = command.getShortCutKeys();
 
   return (
     <CogsTooltip
-      content={<LabelWithShortcut label={label} shortcut={shortcut} />}
+      content={<LabelWithShortcut label={label} command={command} />}
       disabled={label === undefined}
       appendTo={document.body}
       placement={placement}>

react-components/src/components/Architecture/FilterButton.tsx

@@ -93,7 +93,6 @@ export const FilterButton = ({
   }
   const placement = getTooltipPlacement(isHorizontal);
   const label = usedInSettings ? undefined : command.getLabel(t);
-  const shortcut = command.getShortCutKeys();
   const flexDirection = getFlexDirection(isHorizontal);
 
   const children = command.children;
@@ -102,7 +101,7 @@ export const FilterButton = ({
   }
   return (
     <CogsTooltip
-      content={<LabelWithShortcut label={label} shortcut={shortcut} />}
+      content={<LabelWithShortcut label={label} command={command} />}
       disabled={usedInSettings || label === undefined}
       appendTo={document.body}
       placement={placement}>

react-components/src/components/Architecture/LabelWithShortcut.tsx

@@ -6,20 +6,27 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Shortcut } from '@cognite/cogs.js';
+import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
 
 type LabelWithShortcutProps = {
   label?: string;
-  shortcut?: string;
+  command?: BaseCommand;
+  inverted?: boolean;
 };
 
-export const LabelWithShortcut: React.FC<LabelWithShortcutProps> = ({ label, shortcut }) => {
+export const LabelWithShortcut: React.FC<LabelWithShortcutProps> = ({
+  label,
+  command,
+  inverted = true
+}) => {
   if (label === undefined) {
     return <></>;
   }
+  const keys = command?.getShortCutKeys();
   return (
     <Container key={label}>
       <Label>{label}</Label>
-      {shortcut !== undefined && <Shortcut keys={[shortcut]} inverted />}
+      {keys !== undefined && <Shortcut keys={keys} inverted={inverted} />}
     </Container>
   );
 };

react-components/src/components/Architecture/OptionButton.tsx

@@ -83,14 +83,13 @@ export const OptionButton = ({
   }
   const placement = getTooltipPlacement(isHorizontal);
   const label = usedInSettings ? undefined : command.getLabel(t);
-  const shortcut = command.getShortCutKeys();
   const flexDirection = getFlexDirection(isHorizontal);
   const children = command.children;
   const selectedLabel = command.selectedChild?.getLabel(t);
 
   return (
     <CogsTooltip
-      content={<LabelWithShortcut label={label} shortcut={shortcut} />}
+      content={<LabelWithShortcut label={label} command={command} />}
       disabled={usedInSettings || label === undefined}
       appendTo={document.body}
       placement={placement}>

react-components/src/components/Architecture/SettingsButton.tsx

@@ -71,13 +71,12 @@ export const SettingsButton = ({
   }
   const placement = getTooltipPlacement(isHorizontal);
   const label = command.getLabel(t);
-  const shortcut = command.getShortCutKeys();
   const flexDirection = getFlexDirection(isHorizontal);
   const children = command.children;
 
   return (
     <CogsTooltip
-      content={<LabelWithShortcut label={label} shortcut={shortcut} />}
+      content={<LabelWithShortcut label={label} command={command} />}
       disabled={label === undefined}
       appendTo={document.body}
       placement={placement}>
@@ -157,7 +156,6 @@ function createButton(command: BaseCommand, t: TranslateDelegate): ReactElement
     return <></>;
   }
   const label = command.getLabel(t);
-  const shortcut = command.getShortCutKeys();
   return (
     <Menu.Item
       key={command.uniqueId}
@@ -170,7 +168,7 @@ function createButton(command: BaseCommand, t: TranslateDelegate): ReactElement
         command.invoke();
         setChecked(command.isChecked);
       }}>
-      <LabelWithShortcut label={label} shortcut={shortcut} />
+      <LabelWithShortcut label={label} command={command} inverted={false} />
     </Menu.Item>
   );
 }