feat(react-component): localization support

.github/workflows/locize-sync.yml

@@ -0,0 +1,49 @@
+name: Translation sync added and deleted keys to locize
+on: workflow_dispatch
+
+jobs:
+  locize-sync:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: 'https://registry.npmjs.org'
+          always-auth: true
+
+      - name: Setup Cognite CICD Yarn
+        run: |
+          echo "
+          npmScopes:
+            cognite:
+              npmAlwaysAuth: true
+              npmAuthToken: \"\${NPM_TOKEN}\"
+              npmRegistryServer: "https://registry.npmjs.org"
+          " >> .yarnrc.yml
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
+
+      - name: Install NPM dependencies
+        working-directory: react-components
+        run: yarn install --immutable
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
+
+      - name: 'Save added keys to locize'
+        working-directory: react-components
+        run: yarn save-missing
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
+          LOCIZE_API_KEY: ${{ secrets.LOCIZE_API_KEY }}
+
+      - name: 'Remove deleted keys from locize'
+        working-directory: react-components
+        run: yarn remove-deleted
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
+          LOCIZE_API_KEY: ${{ secrets.LOCIZE_API_KEY }}

react-components/package.json

@@ -14,7 +14,11 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "tsc": "tsc",
-    "lint": "eslint . --cache"
+    "lint": "eslint . --cache",
+    "pull-keys": "cdf-i18n-utils-cli pull-keys-from-remote --namespace reveal-react-components --path ./src/common/i18n && yarn sort-keys",
+    "remove-deleted": "cdf-i18n-utils-cli remove-deleted-keys-from-remote --namespace reveal-react-components --path ./src/common/i18n",
+    "save-missing": "cdf-i18n-utils-cli save-missing-keys-to-remote --namespace reveal-react-components --path ./src/common/i18n",
+    "sort-keys": "cdf-i18n-utils-cli sort-local-keys --namespace reveal-react-components --path ./src/common/i18n"
   },
   "peerDependencies": {
     "@cognite/cogs.js": ">=9",
@@ -27,6 +31,8 @@
     "@babel/preset-env": "7.22.14",
     "@babel/preset-react": "7.22.5",
     "@babel/preset-typescript": "7.22.11",
+    "@cognite/cdf-i18n-utils": "^0.7.5",
+    "@cognite/cdf-utilities": "^3.4.7",
     "@cognite/cogs.js": "^9.17.0",
     "@cognite/reveal": "4.4.2",
     "@cognite/sdk": "^8.2.0",
@@ -53,11 +59,13 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "latest",
+    "locize-cli": "^7.14.6",
     "moq.ts": "^10.0.6",
     "prettier": "^3.0.0",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-router-dom": "^6.15.0",
     "storybook": "7.3.2",
     "style-loader": "^3.3.3",
     "styled-components": "5.3.11",

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

@@ -0,0 +1,34 @@
+{
+  "CAD_MODELS": "CAD models",
+  "POINT_CLOUDS": "Point clouds",
+  "IMAGES_360": "360 images",
+  "HIGH_FIDELITY": "High fidelity",
+  "PAN": "Pan",
+  "TOUCH_SELECT": "Tap to select",
+  "TOUCH_ZOOM": "Zoom",
+  "MOUSE_ZOOM": "Zoom / scroll",
+  "MOUSE_ROTATE": "Rotate",
+  "MOUSE_INSTRUCTIONS": "Click+drag",
+  "MOUSE_SELECT": "Select Objects",
+  "MOUSE_SELECT_INSTRUCTION": "Click on interactive objects",
+  "KEYBOARD_DOWN": "Down",
+  "KEYBOARD_UP": "Up",
+  "KEYBOARD_FORWARD": "Forward",
+  "KEYBOARD_BACK": "Back",
+  "KEYBOARD_RIGHT": "Right",
+  "KEYBOARD_LEFT": "Left",
+  "KEYBOARD_LOOK_DOWN": "Look Down",
+  "KEYBOARD_LOOK_UP": "Look Up",
+  "KEYBOARD_LOOK_RIGHT": "Look Right",
+  "KEYBOARD_LOOK_LEFT": "Look Left",
+  "KEYBOARD_NAVIGATION_TITLE": "Keyboard",
+  "KEYBOARD_NAVIGATION_SUBTITLE": "Move and look around",
+  "KEYBOARD_NAVIGATION_DESCRIPTION": "Click and hold to move.\nYou can also use mouse in conjunction with keys.",
+  "MOUSE_NAVIGATION_TITLE": "Mouse",
+  "MOUSE_TOUCH_NAVIGATION_SUBTITLE": "Navigate and select",
+  "MOUSE_NAVIGATION_DESCRIPTION": "Click and drag to rotate, and pan the view. Use mouse wheel to zoom the view. Left click to select",
+  "TOUCH_NAVIGATION_TITLE": "Touch",
+  "TOUCH_NAVIGATION_DESCRIPTION": "Use gestures to zoom, pan and select",
+  "IMAGES_360_STATION": "Station :",
+  "IMAGES_360_DETAILS": "Details"
+}

react-components/src/common/i18n/index.tsx

@@ -0,0 +1,15 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+import { useTypedTranslation } from '@cognite/cdf-i18n-utils';
+
+import en from './en/reveal-react-components.json';
+
+export const translations = {
+  en: { 'reveal-react-components': en }
+};
+
+export type TranslationKeys = keyof typeof en;
+
+export const useTranslation = (): ReturnType<typeof useTypedTranslation<TranslationKeys>> =>
+  useTypedTranslation<TranslationKeys>();

react-components/src/components/Image360HistoricalDetails/Panel/Image360HistoricalPanel.tsx

@@ -5,6 +5,7 @@
 import { Chip, Tooltip } from '@cognite/cogs.js';
 import { type ReactElement } from 'react';
 import styled from 'styled-components';
+import { useTranslation } from '../../../common/i18n';
 
 export type Image360HistoricalPanelProps = {
   revisionCount?: number;
@@ -17,6 +18,7 @@ export const Image360HistoricalPanel = ({
   revisionDetailsExpanded,
   setRevisionDetailsExpanded
 }: Image360HistoricalPanelProps): ReactElement => {
+  const { t } = useTranslation();
   const count = revisionCount?.toString();
 
   const onDetailsClick = (): void => {
@@ -29,12 +31,22 @@ export const Image360HistoricalPanel = ({
         <StyledToolBar onClick={onDetailsClick} isExpanded={revisionDetailsExpanded}>
           {!revisionDetailsExpanded && (
             <>
-              <StyledChip icon="History" iconPlacement="right" label="Details" hideTooltip />
+              <StyledChip
+                icon="History"
+                iconPlacement="right"
+                label={t('IMAGES_360_DETAILS')}
+                hideTooltip
+              />
               <StyledChipCount label={count} hideTooltip />
             </>
           )}
           {revisionDetailsExpanded && (
-            <StyledChip icon="PushRight" iconPlacement="right" label="Details" hideTooltip />
+            <StyledChip
+              icon="PushRight"
+              iconPlacement="right"
+              label={t('IMAGES_360_DETAILS')}
+              hideTooltip
+            />
           )}
         </StyledToolBar>
       </Tooltip>

react-components/src/components/Image360HistoricalDetails/Toolbar/Image360HistoricalSummary.tsx

@@ -9,6 +9,7 @@ import { Thumbnail } from '../utils/Thumbnail';
 import { type Cognite3DViewer, type Image360 } from '@cognite/reveal';
 // Using named import to avoid react component creation error when default import is used.
 import { uniqueId } from 'lodash';
+import { useTranslation } from '../../../common/i18n';
 
 export type Image360RevisionDetails = {
   date?: string;
@@ -38,6 +39,7 @@ export const Image360HistoricalSummary = forwardRef(
     }: Image360HistoricalSummaryProps,
     ref: React.ForwardedRef<number>
   ) => {
+    const { t } = useTranslation();
     const gridContainerRef = useRef<HTMLDivElement>(null);
 
     const onRevisionChanged = async (
@@ -74,7 +76,9 @@ export const Image360HistoricalSummary = forwardRef(
       <OverviewContainer>
         <StyledFlex direction="column">
           <StyledSubFlex>{stationName}</StyledSubFlex>
-          <StyledDetail>Station: {stationId}</StyledDetail>
+          <StyledDetail>
+            {t('IMAGES_360_STATION')} {stationId}
+          </StyledDetail>
         </StyledFlex>
 
         <StyledLayoutGridContainer onScroll={onScroll} ref={gridContainerRef}>

react-components/src/components/RevealToolbar/Help/KeyboardNavigation.tsx

@@ -11,19 +11,21 @@ import {
   KeyboardNavigationInstructionGrid,
   ArrowKeyboardNavigationInstructionGrid
 } from './elements';
+import { useTranslation } from '../../../common/i18n';
 
 export const KeyboardNavigation = (): ReactElement => {
+  const { t } = useTranslation();
   return (
     <Section
-      title={'Keyboard'}
-      subTitle={'Move and look around'}
-      description={'Click and hold to move.\nYou can also use mouse in conjunction with keys.'}>
+      title={t('KEYBOARD_NAVIGATION_TITLE')}
+      subTitle={t('KEYBOARD_NAVIGATION_SUBTITLE')}
+      description={t('KEYBOARD_NAVIGATION_DESCRIPTION')}>
       <Flex gap={8} style={{ paddingTop: 12 }}>
         <Flex direction="column">
           <KeyboardNavigationInstructionGrid>
-            <InstructionText>Down</InstructionText>
-            <InstructionText>Forward</InstructionText>
-            <InstructionText>Up</InstructionText>
+            <InstructionText> {t('KEYBOARD_DOWN')} </InstructionText>
+            <InstructionText>{t('KEYBOARD_FORWARD')}</InstructionText>
+            <InstructionText>{t('KEYBOARD_UP')}</InstructionText>
             <QWEASDKeysNavigation.Q />
             <QWEASDKeysNavigation.W />
             <QWEASDKeysNavigation.E />
@@ -32,21 +34,21 @@ export const KeyboardNavigation = (): ReactElement => {
             <QWEASDKeysNavigation.A />
             <QWEASDKeysNavigation.S style={{ marginLeft: 6 }} />
             <QWEASDKeysNavigation.D style={{ marginLeft: 6 }} />
-            <InstructionText>Left</InstructionText>
-            <InstructionText>Back</InstructionText>
-            <InstructionText>Right</InstructionText>
+            <InstructionText>{t('KEYBOARD_LEFT')}</InstructionText>
+            <InstructionText>{t('KEYBOARD_BACK')}</InstructionText>
+            <InstructionText>{t('KEYBOARD_RIGHT')}</InstructionText>
           </KeyboardNavigationInstructionGrid>
         </Flex>
         <ArrowKeyboardNavigationInstructionGrid>
-          <InstructionText>Look Up</InstructionText>
-          <InstructionText>Look Left</InstructionText>
+          <InstructionText>{t('KEYBOARD_LOOK_UP')}</InstructionText>
+          <InstructionText>{t('KEYBOARD_LOOK_LEFT')}</InstructionText>
           <ArrowKeysNavigation.Up />
-          <InstructionText>Look Right</InstructionText>
+          <InstructionText>{t('KEYBOARD_LOOK_RIGHT')}</InstructionText>
           <ArrowKeysNavigation.Left />
           <ArrowKeysNavigation.Down />
           <ArrowKeysNavigation.Right />
           <br />
-          <InstructionText>Look Down</InstructionText>
+          <InstructionText>{t('KEYBOARD_LOOK_DOWN')}</InstructionText>
         </ArrowKeyboardNavigationInstructionGrid>
       </Flex>
     </Section>

react-components/src/components/RevealToolbar/Help/MouseNavigation.tsx

@@ -11,31 +11,31 @@ import {
   MouseNavigationCombinedGridItem
 } from './elements';
 import { Section } from './Section';
+import { useTranslation } from '../../../common/i18n';
 
 export const MouseNavigation = (): ReactElement => {
+  const { t } = useTranslation();
   return (
     <Section
-      title={'Mouse'}
-      subTitle={'Navigate and select'}
-      description={
-        'Click and drag to rotate, and pan the view. Use mouse wheel to zoom the view. Left click to select'
-      }>
+      title={t('MOUSE_NAVIGATION_TITLE')}
+      subTitle={t('MOUSE_TOUCH_NAVIGATION_SUBTITLE')}
+      description={t('MOUSE_NAVIGATION_DESCRIPTION')}>
       <MouseNavigationInstructionGrid>
-        <InstructionText>Zoom / scroll</InstructionText>
+        <InstructionText>{t('MOUSE_ZOOM')}</InstructionText>
         <InstructionText style={{ marginBottom: 30, textAlign: 'right' }}>
-          Rotate
-          <InstructionDetail>Click+drag</InstructionDetail>
+          {t('MOUSE_ROTATE')}
+          <InstructionDetail>{t('MOUSE_INSTRUCTIONS')}</InstructionDetail>
         </InstructionText>
         <MouseNavigationCombinedGridItem>
           <StyledMouse />
         </MouseNavigationCombinedGridItem>
         <InstructionText style={{ marginBottom: 30, textAlign: 'left' }}>
-          Pan
-          <InstructionDetail>Click+drag</InstructionDetail>
+          {t('PAN')}
+          <InstructionDetail>{t('MOUSE_INSTRUCTIONS')}</InstructionDetail>
         </InstructionText>
         <InstructionText style={{ marginTop: -50, textAlign: 'right' }}>
-          Select Objects
-          <InstructionDetail>Click on interactive objects</InstructionDetail>
+          {t('MOUSE_SELECT')}
+          <InstructionDetail>{t('MOUSE_SELECT_INSTRUCTION')}</InstructionDetail>
         </InstructionText>
       </MouseNavigationInstructionGrid>
     </Section>

react-components/src/components/RevealToolbar/Help/TouchNavigation.tsx

@@ -10,25 +10,27 @@ import {
   TouchNavigationInstructionGrid
 } from './elements';
 import { TouchZoom, TouchPan, TouchSelect } from './Graphics/Touch';
+import { useTranslation } from '../../../common/i18n';
 
 export const TouchNavigation = (): ReactElement => {
+  const { t } = useTranslation();
   return (
     <Section
-      title={'Touch'}
-      subTitle={'Navigate and select'}
-      description={'Use gestures to zoom, pan and select'}>
+      title={t('TOUCH_NAVIGATION_TITLE')}
+      subTitle={t('MOUSE_TOUCH_NAVIGATION_SUBTITLE')}
+      description={t('TOUCH_NAVIGATION_DESCRIPTION')}>
       <TouchNavigationInstructionGrid>
         <div>
           <TouchPan />
-          <InstructionText>Pan</InstructionText>
+          <InstructionText>{t('PAN')}</InstructionText>
         </div>
         <TouchNavigationCombinedGridItem>
           <TouchSelect />
-          <InstructionText>Tap to select</InstructionText>
+          <InstructionText>{t('TOUCH_SELECT')}</InstructionText>
         </TouchNavigationCombinedGridItem>
         <div>
           <TouchZoom />
-          <InstructionText>Zoom</InstructionText>
+          <InstructionText>{t('TOUCH_ZOOM')}</InstructionText>
         </div>
       </TouchNavigationInstructionGrid>
     </Section>

react-components/src/components/RevealToolbar/LayersContainer/CadModelLayersContainer.tsx

@@ -10,12 +10,14 @@ import { StyledChipCount, StyledLabel, StyledSubMenu } from './elements';
 import { uniqueId } from 'lodash';
 import { type Reveal3DResourcesLayersProps } from './types';
 import { useRevealContainerElement } from '../../RevealContainer/RevealContainerElementContext';
+import { useTranslation } from '../../../common/i18n';
 
 export const CadModelLayersContainer = ({
   layerProps
 }: {
   layerProps: Reveal3DResourcesLayersProps;
 }): ReactElement => {
+  const { t } = useTranslation();
   const viewer = useReveal();
   const revealContainerElement = useRevealContainerElement();
   const [visible, setVisible] = useState(false);
@@ -109,7 +111,7 @@ export const CadModelLayersContainer = ({
                 setVisible(true);
               }}
             />
-            <StyledLabel> CAD models </StyledLabel>
+            <StyledLabel> {t('CAD_MODELS')} </StyledLabel>
             <StyledChipCount label={count} hideTooltip type="neutral" />
           </Flex>
         </Menu.Submenu>

react-components/src/components/RevealToolbar/LayersContainer/Image360LayersContainer.tsx

@@ -10,12 +10,14 @@ import { type Image360Collection } from '@cognite/reveal';
 import { uniqueId } from 'lodash';
 import { type Reveal3DResourcesLayersProps } from './types';
 import { useRevealContainerElement } from '../../RevealContainer/RevealContainerElementContext';
+import { useTranslation } from '../../../common/i18n';
 
 export const Image360CollectionLayerContainer = ({
   layerProps
 }: {
   layerProps: Reveal3DResourcesLayersProps;
 }): ReactElement => {
+  const { t } = useTranslation();
   const viewer = useReveal();
   const revealContainerElement = useRevealContainerElement();
   const [visible, setVisible] = useState(false);
@@ -105,7 +107,7 @@ export const Image360CollectionLayerContainer = ({
                 setVisible(true);
               }}
             />
-            <StyledLabel> 360 images </StyledLabel>
+            <StyledLabel> {t('IMAGES_360')} </StyledLabel>
             <StyledChipCount label={count} hideTooltip type="neutral" />
           </Flex>
         </Menu.Submenu>