feat(i18n): added i18next for user interface translations (#432)

src/components/Header/Header.test.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 
 import { render, fireEvent, waitForElement, waitForElementToBeRemoved } from '../../utils/test-react-testing-library';
 import { AppContextProvider } from '../../App';
+import translationEN from '../../../i18n/translations/en-US.json';
 
 import Header from './Header';
 
@@ -44,7 +45,7 @@ describe('<Header /> component with logged in state', () => {
   });
 
   test('should open login dialog', async () => {
-    const { getByText } = render(
+    const { getByTestId } = render(
       <Router>
         <AppContextProvider>
           <Header />
@@ -52,9 +53,9 @@ describe('<Header /> component with logged in state', () => {
       </Router>
     );
 
-    const loginBtn = getByText('Login');
+    const loginBtn = getByTestId('header--button-login');
     fireEvent.click(loginBtn);
-    const loginDialog = await waitForElement(() => getByText('Sign in'));
+    const loginDialog = await waitForElement(() => getByTestId('login--dialog'));
     expect(loginDialog).toBeTruthy();
   });
 
@@ -119,7 +120,7 @@ describe('<Header /> component with logged in state', () => {
     fireEvent.click(infoBtn);
 
     // wait for Close's button of registrationInfo modal appearance and return the element
-    const closeBtn = await waitForElement(() => getByText('CLOSE'));
+    const closeBtn = await waitForElement(() => getByText(translationEN.button.close));
     fireEvent.click(closeBtn);
 
     const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() =>

src/components/Header/Header.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import storage from '../../utils/storage';
 import { getRegistryURL } from '../../utils/url';
@@ -18,13 +19,14 @@ interface Props {
 
 /* eslint-disable react/jsx-no-bind*/
 const Header: React.FC<Props> = ({ withoutSearch }) => {
+  const { t } = useTranslation();
   const appContext = useContext(AppContext);
   const [isInfoDialogOpen, setOpenInfoDialog] = useState();
   const [showMobileNavBar, setShowMobileNavBar] = useState();
   const [showLoginModal, setShowLoginModal] = useState(false);
 
   if (!appContext) {
-    throw Error('The app Context was not correct used');
+    throw Error(t('app-context-not-correct-used'));
   }
 
   const { user, scope, setUser } = appContext;
@@ -67,7 +69,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
             <Search />
           </InnerMobileNavBar>
           <Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
-            {'Cancel'}
+            {t('button.cancel')}
           </Button>
         </MobileNavBar>
       )}

src/components/Header/HeaderGreetings.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import Label from '../Label';
 
@@ -8,11 +9,14 @@ interface Props {
   username: string;
 }
 
-const HeaderGreetings: React.FC<Props> = ({ username }) => (
-  <>
-    <Greetings>{'Hi,'}</Greetings>
-    <Label capitalize={true} data-testid="greetings-label" text={username} weight="bold" />
-  </>
-);
+const HeaderGreetings: React.FC<Props> = ({ username }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Greetings>{t('header.greetings')}</Greetings>
+      <Label capitalize={true} data-testid="greetings-label" text={username} weight="bold" />
+    </>
+  );
+};
 
 export default HeaderGreetings;

src/components/Header/HeaderMenu.tsx

@@ -1,4 +1,5 @@
 import React, { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 import AccountCircle from '@material-ui/icons/AccountCircle';
 
 import IconButton from '../../muiComponents/IconButton';
@@ -23,35 +24,38 @@ const HeaderMenu: React.FC<Props> = ({
   anchorEl,
   onLoggedInMenu,
   onLoggedInMenuClose,
-}) => (
-  <>
-    <IconButton
-      color="inherit"
-      data-testid="header--menu-accountcircle"
-      id="header--button-account"
-      onClick={onLoggedInMenu}>
-      <AccountCircle />
-    </IconButton>
-    <Menu
-      anchorEl={anchorEl}
-      anchorOrigin={{
-        vertical: 'top',
-        horizontal: 'right',
-      }}
-      onClose={onLoggedInMenuClose}
-      open={isMenuOpen}
-      transformOrigin={{
-        vertical: 'top',
-        horizontal: 'right',
-      }}>
-      <MenuItem disabled={true}>
-        <HeaderGreetings username={username} />
-      </MenuItem>
-      <MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>
-        {'Logout'}
-      </MenuItem>
-    </Menu>
-  </>
-);
+}) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <IconButton
+        color="inherit"
+        data-testid="header--menu-accountcircle"
+        id="header--button-account"
+        onClick={onLoggedInMenu}>
+        <AccountCircle />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        onClose={onLoggedInMenuClose}
+        open={isMenuOpen}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}>
+        <MenuItem disabled={true}>
+          <HeaderGreetings username={username} />
+        </MenuItem>
+        <MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>
+          {t('button.logout')}
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
 
 export default HeaderMenu;

src/components/Header/HeaderRight.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import Button from '../../muiComponents/Button';
 
@@ -25,6 +26,7 @@ const HeaderRight: React.FC<Props> = ({
 }) => {
   const [anchorEl, setAnchorEl] = useState();
   const [isMenuOpen, setIsMenuOpen] = useState();
+  const { t } = useTranslation();
 
   useEffect(() => {
     setIsMenuOpen(Boolean(anchorEl));
@@ -55,10 +57,10 @@ const HeaderRight: React.FC<Props> = ({
   return (
     <RightSide data-testid="header-right">
       {!withoutSearch && (
-        <HeaderToolTip onClick={onToggleMobileNav} title={'Search packages'} tooltipIconType={'search'} />
+        <HeaderToolTip onClick={onToggleMobileNav} title={t('search.packages')} tooltipIconType={'search'} />
       )}
-      <HeaderToolTip title={'Documentation'} tooltipIconType={'help'} />
-      <HeaderToolTip onClick={onOpenRegistryInfoDialog} title={'Registry Information'} tooltipIconType={'info'} />
+      <HeaderToolTip title={t('header.documentation')} tooltipIconType={'help'} />
+      <HeaderToolTip onClick={onOpenRegistryInfoDialog} title={t('header.registry-info')} tooltipIconType={'info'} />
       {username ? (
         <HeaderMenu
           anchorEl={anchorEl}
@@ -70,7 +72,7 @@ const HeaderRight: React.FC<Props> = ({
         />
       ) : (
         <Button color="inherit" data-testid="header--button-login" onClick={handleToggleLogin}>
-          {'Login'}
+          {t('button.login')}
         </Button>
       )}
     </RightSide>