feat(i18n): enhanced i18n support (#3761)

platform/ui/src/components/SegmentationGroupTable/AddSegmentRow.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import Icon from '../Icon';
+import { useTranslation } from 'react-i18next';
 
 function AddSegmentRow({ onClick }) {
+  const { t } = useTranslation('SegmentationTable');
   return (
     <div
       className="flex hover:cursor-pointer"
@@ -13,7 +15,7 @@ function AddSegmentRow({ onClick }) {
           <div className="grid h-[28px] w-[28px] place-items-center">
             <Icon name="icon-add" />
           </div>
-          <span className="text-[13px]">Add Segment</span>
+          <span className="text-[13px]">{t('Add segment')}</span>
         </div>
       </div>
     </div>

platform/ui/src/components/SegmentationGroupTable/NoSegmentationRow.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import Icon from '../Icon';
+import { useTranslation } from 'react-i18next';
 
 function NoSegmentationRow({ onSegmentationAdd }) {
+  const { t } = useTranslation('SegmentationTable');
   return (
     <div
       className="group"
@@ -11,7 +13,7 @@ function NoSegmentationRow({ onSegmentationAdd }) {
         <div className="grid h-[28px] w-[28px] place-items-center">
           <Icon name="icon-add" />
         </div>
-        <span className="text-[13px]">Add Segmentation</span>
+        <span className="text-[13px]">{t('Add segmentation')}</span>
       </div>
     </div>
   );

platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx

@@ -4,6 +4,7 @@ import InputRange from '../InputRange';
 import CheckBox from '../CheckBox';
 import InputNumber from '../InputNumber';
 import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 
 const getRoundedValue = value => {
   return Math.round(value * 100) / 100;
@@ -17,19 +18,20 @@ const ActiveSegmentationConfig = ({
   setRenderFill,
   setFillAlpha,
 }) => {
+  const { t } = useTranslation('SegmentationTable');
   return (
     <div className="flex justify-between px-3 pt-[13px] text-[12px]">
       <div className="flex flex-col items-start">
-        <div className="mb-[12px] text-white">Active</div>
+        <div className="mb-[12px] text-white">{t('Active')}</div>
         <CheckBox
-          label="Outline"
+          label={t('Outline')}
           checked={config.renderOutline}
           labelClassName="text-[12px] pl-1 pt-1"
           className="mb-[9px]"
           onChange={setRenderOutline}
         />
         <CheckBox
-          label="Fill"
+          label={t('Fill')}
           checked={config.renderFill}
           labelClassName="text-[12px] pl-1 pt-1"
           className="mb-[9px]"
@@ -38,7 +40,7 @@ const ActiveSegmentationConfig = ({
       </div>
 
       <div className="col-span-2 flex flex-col items-center">
-        <div className="mb-[12px] text-[10px] text-[#b3b3b3]">Opacity</div>
+        <div className="mb-[12px] text-[10px] text-[#b3b3b3]">{t('Opacity')}</div>
         <InputRange
           minValue={0}
           maxValue={100}
@@ -64,7 +66,7 @@ const ActiveSegmentationConfig = ({
       </div>
 
       <div className="flex flex-col items-center">
-        <div className="mb-[12px] text-[10px] text-[#b3b3b3]">Size</div>
+        <div className="mb-[12px] text-[10px] text-[#b3b3b3]">{t('Size')}</div>
         <InputNumber
           value={config.outlineWidthActive}
           onChange={setOutlineWidthActive}
@@ -82,10 +84,11 @@ const InactiveSegmentationConfig = ({
   setRenderInactiveSegmentations,
   setFillAlphaInactive,
 }) => {
+  const { t } = useTranslation('SegmentationTable');
   return (
     <div className="px-3">
       <CheckBox
-        label="Display Inactive Segmentations"
+        label={t('Display inactive segmentations')}
         checked={config.renderInactiveSegmentations}
         labelClassName="text-[12px]"
         className="mb-[9px]"
@@ -93,7 +96,7 @@ const InactiveSegmentationConfig = ({
       />
 
       <div className="flex items-center space-x-2 pl-4">
-        <span className="text-[10px] text-[#b3b3b3]">Opacity</span>
+        <span className="text-[10px] text-[#b3b3b3]">{t('Opacity')}</span>
         <InputRange
           minValue={0}
           maxValue={100}
@@ -120,6 +123,7 @@ const SegmentationConfig = ({
   setRenderInactiveSegmentations,
   setRenderOutline,
 }) => {
+  const { t } = useTranslation('SegmentationTable');
   const { initialConfig } = segmentationConfig;
   const [isMinimized, setIsMinimized] = useState(true);
   return (
@@ -144,7 +148,7 @@ const SegmentationConfig = ({
               'rotate-90 transform': !isMinimized,
             })}
           />
-          <span className="text-[12px] font-[300] text-[#d8d8d8]">{'Inactive Segmentations'}</span>
+          <span className="text-[12px] font-[300] text-[#d8d8d8]">{t('Inactive segmentations')}</span>
         </div>
         {!isMinimized && (
           <InactiveSegmentationConfig

platform/ui/src/components/SegmentationGroupTable/SegmentationDropDownRow.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Select, Icon, Dropdown } from '../../components';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 
 function SegmentationDropDownRow({
   segmentations = [],
@@ -23,6 +24,7 @@ function SegmentationDropDownRow({
     value: s.id,
     label: s.label,
   }));
+  const { t } = useTranslation('SegmentationTable');
 
   if (!activeSegmentation) {
     return null;
@@ -46,7 +48,7 @@ function SegmentationDropDownRow({
             ...(!disableEditing
               ? [
                   {
-                    title: 'Add New Segmentation',
+                    title: t('Add new segmentation'),
                     onClick: () => {
                       onSegmentationAdd();
                     },
@@ -56,7 +58,7 @@ function SegmentationDropDownRow({
             ...(!disableEditing
               ? [
                   {
-                    title: 'Rename',
+                    title: t('Rename'),
                     onClick: () => {
                       onSegmentationEdit(activeSegmentation.id);
                     },
@@ -64,7 +66,7 @@ function SegmentationDropDownRow({
                 ]
               : []),
             {
-              title: 'Delete',
+              title: t('Delete'),
               onClick: () => {
                 onSegmentationDelete(activeSegmentation.id);
               },
@@ -72,7 +74,7 @@ function SegmentationDropDownRow({
             ...(!disableEditing
               ? [
                   {
-                    title: 'Export DICOM SEG',
+                    title: t('Export DICOM SEG'),
                     onClick: () => {
                       storeSegmentation(activeSegmentation.id);
                     },
@@ -81,13 +83,13 @@ function SegmentationDropDownRow({
               : []),
             ...[
               {
-                title: 'Download DICOM SEG',
+                title: t('Download DICOM SEG'),
                 onClick: () => {
                   onSegmentationDownload(activeSegmentation.id);
                 },
               },
               {
-                title: 'Download DICOM RTSTRUCT',
+                title: t('Download DICOM RTSTRUCT'),
                 onClick: () => {
                   onSegmentationDownloadRTSS(activeSegmentation.id);
                 },

platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx

@@ -6,6 +6,7 @@ import SegmentationDropDownRow from './SegmentationDropDownRow';
 import NoSegmentationRow from './NoSegmentationRow';
 import AddSegmentRow from './AddSegmentRow';
 import SegmentationGroupSegment from './SegmentationGroupSegment';
+import { useTranslation } from 'react-i18next';
 
 const SegmentationGroupTable = ({
   segmentations,
@@ -70,11 +71,12 @@ const SegmentationGroupTable = ({
   const activeSegmentation = segmentations?.find(
     segmentation => segmentation.id === activeSegmentationId
   );
+  const { t } = useTranslation('SegmentationTable');
 
   return (
     <div className="flex min-h-0 flex-col bg-black text-[13px] font-[300]">
       <PanelSection
-        title="Segmentation"
+        title={t('Segmentation')}
         actionIcons={
           activeSegmentation && [
             {