feat: Added support for i18n (#2439)

* Added translation for various react components in OHIF-v3

* Added a test language for debugging- test-LNG 

* Added copy for test language to not get overwritten

platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Icon, ButtonGroup, Button, Tooltip, CinePlayer } from '../';
 import useOnClickOutside from '../../utils/useOnClickOutside';
+import { useTranslation } from 'react-i18next';
 
 const classes = {
   infoHeader: 'text-base text-primary-light',
@@ -369,6 +370,8 @@ function PatientInfo({
   isOpen,
   showPatientInfoRef,
 }) {
+  const { t } = useTranslation("PatientInfo")
+
   while (patientAge.charAt(0) === '0') {
     patientAge = patientAge.substr(1);
   }
@@ -394,7 +397,7 @@ function PatientInfo({
                 </span>
                 <div className="flex pb-4 mt-4 mb-4 border-b border-secondary-main">
                   <div className={classnames(classes.firstRow)}>
-                    <span className={classnames(classes.infoHeader)}>Sex</span>
+                    <span className={classnames(classes.infoHeader)}>{t('Sex')}</span>
                     <span
                       className={classnames(classes.infoText)}
                       title={patientSex}
@@ -403,7 +406,7 @@ function PatientInfo({
                     </span>
                   </div>
                   <div className={classnames(classes.row)}>
-                    <span className={classnames(classes.infoHeader)}>Age</span>
+                    <span className={classnames(classes.infoHeader)}>{t('Age')}</span>
                     <span
                       className={classnames(classes.infoText)}
                       title={patientAge}
@@ -412,7 +415,7 @@ function PatientInfo({
                     </span>
                   </div>
                   <div className={classnames(classes.row)}>
-                    <span className={classnames(classes.infoHeader)}>MRN</span>
+                    <span className={classnames(classes.infoHeader)}>{t('MRN')}</span>
                     <span className={classnames(classes.infoText)} title={MRN}>
                       {MRN}
                     </span>
@@ -421,7 +424,7 @@ function PatientInfo({
                 <div className="flex">
                   <div className={classnames(classes.firstRow)}>
                     <span className={classnames(classes.infoHeader)}>
-                      Thickness
+                      {t('Thickness')}
                     </span>
                     <span
                       className={classnames(classes.infoText)}
@@ -432,7 +435,7 @@ function PatientInfo({
                   </div>
                   <div className={classnames(classes.row)}>
                     <span className={classnames(classes.infoHeader)}>
-                      Spacing
+                      {t('Spacing')}
                     </span>
                     <span
                       className={classnames(classes.infoText)}
@@ -443,7 +446,7 @@ function PatientInfo({
                   </div>
                   <div className={classnames(classes.row)}>
                     <span className={classnames(classes.infoHeader)}>
-                      Scanner
+                      {t('Scanner')}
                     </span>
                     <span
                       className={classnames(classes.infoText)}