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

platform/ui/src/components/AboutModal/AboutModal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import detect from 'browser-detect';
+import { useTranslation } from 'react-i18next';
 
 import Typography from '../Typography';
 import Icon from '../Icon';
@@ -59,6 +60,7 @@ const Row = ({ title, value, link }) => {
 const AboutModal = ({ buildNumber, versionNumber, commitHash }) => {
   const { os, version, name } = detect();
   const browser = `${name[0].toUpperCase()}${name.substr(1)} ${version}`;
+  const { t } = useTranslation('AboutModal');
 
   const renderRowTitle = title => (
     <div className="mb-3 border-b-2 border-black pb-3">
@@ -73,20 +75,20 @@ const AboutModal = ({ buildNumber, versionNumber, commitHash }) => {
   );
   return (
     <div>
-      {renderRowTitle('Important Links')}
+      {renderRowTitle(t('Important links'))}
       <div className="mb-8 flex">
         <Link
           href="https://community.ohif.org/"
           showIcon={true}
         >
-          Visit the forum
+            {t('Visit the forum')}
         </Link>
         <span className="ml-4">
           <Link
             href="https://github.com/OHIF/Viewers/issues/new/choose"
             showIcon={true}
           >
-            Report an issue
+            {t('Report an issue')}
           </Link>
         </span>
         <span className="ml-4">
@@ -94,50 +96,50 @@ const AboutModal = ({ buildNumber, versionNumber, commitHash }) => {
             href="https://ohif.org/"
             showIcon={true}
           >
-            More details
+          {t('More details')}
           </Link>
         </span>
       </div>
 
-      {renderRowTitle('Version Information')}
+      {renderRowTitle(t('Version information'))}
       <div className="flex flex-col">
         <Row
-          title="Repository URL"
+          title={t('Repository URL')}
           value="https://github.com/OHIF/Viewers/"
           link="https://github.com/OHIF/Viewers/"
         />
         <Row
-          title="Data Citation"
+          title={t('Data citation')}
           value="https://github.com/OHIF/Viewers/blob/master/DATACITATION.md"
           link="https://github.com/OHIF/Viewers/blob/master/DATACITATION.md"
         />
         {/* <Row
-          title="Last Master Commits"
+          title={t('Last master commits')}
           value="https://github.com/OHIF/Viewers/"
           link="https://github.com/OHIF/Viewers/"
         /> */}
         <Row
-          title="Version number"
+          title={t('Version number')}
           value={versionNumber}
         />
         {buildNumber && (
           <Row
-            title="Build number"
+            title={t('Build number')}
             value={buildNumber}
           />
         )}
         {commitHash && (
           <Row
-            title="Commit Hash"
+            title={t('Commit hash')}
             value={commitHash}
           />
         )}
         <Row
-          title="Browser"
+          title={t('Browser')}
           value={browser}
         />
         <Row
-          title="OS"
+          title={t('OS')}
           value={os}
         />
       </div>

platform/ui/src/components/DateRange/DateRange.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';
 
 /** REACT DATES */
 import { DateRangePicker, isInclusivelyBeforeDay } from 'react-dates';
@@ -8,27 +9,6 @@ import 'react-dates/initialize';
 import 'react-dates/lib/css/_datepicker.css';
 import './DateRange.css';
 
-const today = moment();
-const lastWeek = moment().subtract(7, 'day');
-const lastMonth = moment().subtract(1, 'month');
-const studyDatePresets = [
-  {
-    text: 'Today',
-    start: today,
-    end: today,
-  },
-  {
-    text: 'Last 7 days',
-    start: lastWeek,
-    end: today,
-  },
-  {
-    text: 'Last 30 days',
-    start: lastMonth,
-    end: today,
-  },
-];
-
 const renderYearsOptions = () => {
   const currentYear = moment().year();
   const options = [];
@@ -52,6 +32,27 @@ const DateRange = props => {
   const { id, onChange, startDate, endDate } = props;
   const [focusedInput, setFocusedInput] = useState(null);
   const renderYearsOptionsCallback = useCallback(renderYearsOptions, []);
+  const { t } = useTranslation('DatePicker');
+  const today = moment();
+  const lastWeek = moment().subtract(7, 'day');
+  const lastMonth = moment().subtract(1, 'month');
+  const studyDatePresets = [
+    {
+      text: t('Today'),
+      start: today,
+      end: today,
+    },
+    {
+      text: t('Last 7 days'),
+      start: lastWeek,
+      end: today,
+    },
+    {
+      text: t('Last 30 days'),
+      start: lastMonth,
+      end: today,
+    },
+  ];
 
   const renderDatePresets = () => {
     return (
@@ -149,11 +150,11 @@ const DateRange = props => {
       /** OPTIONAL */
       renderCalendarInfo={renderDatePresets}
       renderMonthElement={renderMonthElement}
-      startDatePlaceholderText={'Start Date'}
-      endDatePlaceholderText={'End Date'}
+      startDatePlaceholderText={t('Start Date')}
+      endDatePlaceholderText={t('End Date')}
       phrases={{
-        closeDatePicker: 'Close',
-        clearDates: 'Clear dates',
+        closeDatePicker: t('Close'),
+        clearDates: t('Clear dates'),
       }}
       isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}
       hideKeyboardShortcutsPanel={true}

platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.tsx

@@ -30,7 +30,7 @@ const HotkeysPreferences = ({
   const splitedHotkeys = splitHotkeyDefinitionsAndCreateTuples(visibleHotkeys);
 
   if (!Object.keys(hotkeyDefinitions).length) {
-    return 'No hotkey definitions';
+    return t('No hotkeys found');
   }
 
   const onHotkeyChangeHandler = (id, definition) => {

platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { useTranslation } from 'react-i18next';
 
 import Icon from '../Icon';
 
@@ -21,8 +20,6 @@ const InputLabelWrapper = ({
   className,
   children,
 }) => {
-  const { t } = useTranslation('StudyList');
-
   const onClickHandler = e => {
     if (!isSortable) {
       return;
@@ -40,7 +37,7 @@ const InputLabelWrapper = ({
         onKeyDown={onClickHandler}
         tabIndex="0"
       >
-        {t(label)}
+        {label}
         {isSortable && (
           <Icon
             name={sortIconMap[sortDirection]}

platform/ui/src/components/StudyListExpandedRow/StudyListExpandedRow.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
 
 import Table from '../Table';
 import TableHead from '../TableHead';
@@ -9,8 +8,6 @@ import TableRow from '../TableRow';
 import TableCell from '../TableCell';
 
 const StudyListExpandedRow = ({ seriesTableColumns, seriesTableDataSource, children }) => {
-  const { t } = useTranslation('StudyList');
-
   return (
     <div className="w-full bg-black py-4 pl-12 pr-2">
       <div className="block">{children}</div>
@@ -19,7 +16,7 @@ const StudyListExpandedRow = ({ seriesTableColumns, seriesTableDataSource, child
           <TableHead>
             <TableRow>
               {Object.keys(seriesTableColumns).map(columnKey => {
-                return <TableCell key={columnKey}>{t(seriesTableColumns[columnKey])}</TableCell>;
+                return <TableCell key={columnKey}>{seriesTableColumns[columnKey]}</TableCell>;
               })}
             </TableRow>
           </TableHead>

platform/ui/src/components/StudyListFilter/StudyListFilter.tsx

@@ -78,7 +78,7 @@ const StudyListFilter = ({
                   variant="h6"
                   className="text-primary-light"
                 >
-                  {t('Studies')}
+                  {t('Number of studies')}
                 </Typography>
               </div>
             </div>

platform/ui/src/components/StudyListPagination/StudyListPagination.tsx

@@ -43,7 +43,7 @@ const StudyListPagination = ({ onChangePage, currentPage, perPage, onChangePerPa
               hideSelectedOptions={true}
               onChange={onSelectedRange}
             />
-            <Typography className="text-base opacity-60">{t('ResultsPerPage')}</Typography>
+            <Typography className="text-base opacity-60">{t('Results per page')}</Typography>
           </div>
           <div className="">
             <div className="flex items-center">

platform/ui/src/components/UserPreferences/UserPreferences.tsx

@@ -112,7 +112,7 @@ const UserPreferences = ({
           onClick={onResetHandler}
           disabled={disabled}
         >
-          {t('Reset to Defaults')}
+          {t('Reset to defaults')}
         </Button>
         <div className="flex flex-row">
           <Button