fix(i18n): Add and update i18n Translation for Toolbar Tool Names (#5392)

extensions/cornerstone/src/components/WindowLevelActionMenu/Colorbar.tsx

@@ -1,9 +1,11 @@
 import React, { ReactElement, useCallback } from 'react';
 import { Switch } from '@ohif/ui-next';
 import { useViewportRendering } from '../../hooks/useViewportRendering';
+import { useTranslation } from 'react-i18next';
 
 export function Colorbar({ viewportId }: { viewportId?: string } = {}): ReactElement {
   const { hasColorbar, toggleColorbar } = useViewportRendering(viewportId);
+  const { t } = useTranslation('WindowLevelActionMenu');
 
   const handleToggle = useCallback(() => {
     toggleColorbar();
@@ -16,7 +18,7 @@ export function Colorbar({ viewportId }: { viewportId?: string } = {}): ReactEle
         className="flex-grow"
         onClick={handleToggle}
       >
-        Display Color bar
+        {t('Display Color bar')}
       </span>
       <Switch
         className="ml-2 flex-shrink-0"

extensions/cornerstone/src/components/WindowLevelActionMenu/Colormap.tsx

@@ -1,9 +1,11 @@
 import React, { ReactElement, useEffect, useRef, useState } from 'react';
 import { AllInOneMenu, ScrollArea, Switch, Tabs, TabsList, TabsTrigger } from '@ohif/ui-next';
 import { useViewportRendering } from '../../hooks/useViewportRendering';
+import { useTranslation } from 'react-i18next';
 
 export function Colormap({ viewportId }: { viewportId?: string } = {}): ReactElement {
   const { viewportDisplaySets } = useViewportRendering(viewportId);
+  const { t } = useTranslation('WindowLevelActionMenu');
 
   const [activeDisplaySetUID, setActiveDisplaySetUID] = useState<string | undefined>(
     viewportDisplaySets?.[0]?.displaySetInstanceUID
@@ -74,7 +76,7 @@ export function Colormap({ viewportId }: { viewportId?: string } = {}): ReactEle
         className="hover:bg-accent flex h-8 w-full flex-shrink-0 cursor-pointer items-center px-2 text-base hover:rounded"
         onClick={() => setShowPreview(!showPreview)}
       >
-        <span className="flex-shrink-0">Preview in viewport</span>
+        <span className="flex-shrink-0">{t('Preview in viewport')}</span>
         <Switch
           className="ml-auto flex-shrink-0"
           checked={showPreview}

extensions/cornerstone/src/components/WindowLevelActionMenu/WindowLevelActionMenu.tsx

@@ -7,6 +7,7 @@ import { WindowLevel } from './WindowLevel';
 import { VolumeRenderingPresets } from './VolumeRenderingPresets';
 import { VolumeRenderingOptions } from './VolumeRenderingOptions';
 import { useViewportRendering } from '../../hooks/useViewportRendering';
+import i18n from 'i18next';
 
 export type WindowLevelActionMenuProps = {
   viewportId: string;
@@ -58,6 +59,7 @@ export function WindowLevelActionMenuContent({
       isVisible={true}
       align={align}
       side={side}
+      backLabel={i18n.t('WindowLevelActionMenu:Back to Display Options')}
     >
       <AllInOneMenu.ItemPanel>
         {!is3DVolume && <Colorbar viewportId={viewportId} />}
@@ -65,7 +67,7 @@ export function WindowLevelActionMenuContent({
         {colorbarProperties?.colormaps && !is3DVolume && (
           <AllInOneMenu.SubMenu
             key="colorLUTPresets"
-            itemLabel="Color LUT"
+            itemLabel={t('Color LUT')}
             itemIcon="icon-color-lut"
             className="flex h-[calc(100%-32px)] flex-col"
           >
@@ -86,7 +88,7 @@ export function WindowLevelActionMenuContent({
         {volumeRenderingPresets && is3DVolume && <VolumeRenderingPresets viewportId={viewportId} />}
 
         {volumeRenderingQualityRange && is3DVolume && (
-          <AllInOneMenu.SubMenu itemLabel="Rendering Options">
+          <AllInOneMenu.SubMenu itemLabel={t('Rendering Options')}>
             <VolumeRenderingOptions viewportId={viewportId} />
           </AllInOneMenu.SubMenu>
         )}