@verdaccio/ui-theme 6.0.0-6-next.9 → 6.0.0-6-next.13

package/src/App/Header/Header.test.tsx

@@ -1,80 +1,77 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-
 import {
-  render,
+  cleanup,
   fireEvent,
-  waitFor,
+  renderWithStore,
   screen,
+  waitFor,
   waitForElementToBeRemoved,
 } from 'verdaccio-ui/utils/test-react-testing-library';
 
-import translationEN from '../../../i18n/translations/en-US.json';
-import { AppContextProvider } from '../../App';
-
+import translationEN from '../../i18n/crowdin/ui.json';
+import { store } from '../../store';
 import Header from './Header';
 
-const props = {
-  user: {
-    username: 'verddacio-user',
-  },
-  packages: [],
-};
-
 /* eslint-disable react/jsx-no-bind*/
 describe('<Header /> component with logged in state', () => {
+  afterEach(cleanup);
+
   test('should load the component in logged out state', () => {
-    render(
+    renderWithStore(
       <Router>
-        <AppContextProvider>
-          <Header />
-        </AppContextProvider>
-      </Router>
+        <Header />
+      </Router>,
+      store
     );
 
-    expect(screen.queryByTestId('header--menu-accountcircle')).toBeNull();
+    expect(screen.queryByTestId('logInDialogIcon')).toBeNull();
     expect(screen.getByText('Login')).toBeTruthy();
     expect(screen.queryByTestId('header--button-login')).toBeInTheDocument();
   });
 
-  test('should load the component in logged in state', () => {
-    const { getByTestId, queryByText } = render(
+  test('should load the component in logged in state', async () => {
+    renderWithStore(
       <Router>
-        <AppContextProvider user={props.user}>
-          <Header />
-        </AppContextProvider>
-      </Router>
+        <Header />
+      </Router>,
+      store
     );
+    store.dispatch.login.logInUser({ username: 'store', token: '12345' });
 
-    expect(getByTestId('header--menu-accountcircle')).toBeTruthy();
-    expect(queryByText('Login')).toBeNull();
+    await waitFor(() => {
+      expect(screen.getByTestId('logInDialogIcon')).toBeTruthy();
+      expect(screen.queryByText('Login')).toBeNull();
+    });
   });
 
   test('should open login dialog', async () => {
-    const { getByTestId } = render(
+    renderWithStore(
       <Router>
-        <AppContextProvider>
-          <Header />
-        </AppContextProvider>
-      </Router>
+        <Header />
+      </Router>,
+      store
     );
 
-    const loginBtn = getByTestId('header--button-login');
+    store.dispatch.login.logOutUser();
+
+    const loginBtn = screen.getByTestId('header--button-login');
     fireEvent.click(loginBtn);
-    const loginDialog = await waitFor(() => getByTestId('login--dialog'));
+    const loginDialog = await waitFor(() => screen.getByTestId('login--dialog'));
     expect(loginDialog).toBeTruthy();
   });
 
   test('should logout the user', async () => {
-    const { getByText, getByTestId } = render(
+    const { getByText, getByTestId } = renderWithStore(
       <Router>
-        <AppContextProvider user={props.user}>
-          <Header />
-        </AppContextProvider>
-      </Router>
+        <Header />
+      </Router>,
+      store
     );
 
-    const headerMenuAccountCircle = getByTestId('header--menu-accountcircle');
+    store.dispatch.login.logInUser({ username: 'store', token: '12345' });
+
+    const headerMenuAccountCircle = getByTestId('logInDialogIcon');
     fireEvent.click(headerMenuAccountCircle);
 
     // wait for button Logout's appearance and return the element
@@ -84,12 +81,11 @@ describe('<Header /> component with logged in state', () => {
   });
 
   test("The question icon should open a new tab of verdaccio's website - installation doc", () => {
-    const { getByTestId } = render(
+    const { getByTestId } = renderWithStore(
       <Router>
-        <AppContextProvider user={props.user}>
-          <Header />
-        </AppContextProvider>
-      </Router>
+        <Header />
+      </Router>,
+      store
     );
 
     const documentationBtn = getByTestId('header--tooltip-documentation');
@@ -99,12 +95,11 @@ describe('<Header /> component with logged in state', () => {
   });
 
   test('should open the registrationInfo modal when clicking on the info icon', async () => {
-    const { getByTestId } = render(
+    const { getByTestId } = renderWithStore(
       <Router>
-        <AppContextProvider user={props.user}>
-          <Header />
-        </AppContextProvider>
-      </Router>
+        <Header />
+      </Router>,
+      store
     );
 
     const infoBtn = getByTestId('header--tooltip-info');
@@ -116,12 +111,11 @@ describe('<Header /> component with logged in state', () => {
   });
 
   test('should close the registrationInfo modal when clicking on the button close', async () => {
-    const { getByTestId, getByText, queryByTestId } = render(
+    const { getByTestId, getByText, queryByTestId } = renderWithStore(
       <Router>
-        <AppContextProvider user={props.user}>
-          <Header />
-        </AppContextProvider>
-      </Router>
+        <Header />
+      </Router>,
+      store
     );
 
     const infoBtn = getByTestId('header--tooltip-info');
@@ -138,17 +132,15 @@ describe('<Header /> component with logged in state', () => {
   });
 
   test('should hide login if is disabled', () => {
-    // @ts-expect-error
     window.__VERDACCIO_BASENAME_UI_OPTIONS = {
       base: 'foo',
       login: false,
     };
-    render(
+    renderWithStore(
       <Router>
-        <AppContextProvider user={props.user}>
-          <Header />
-        </AppContextProvider>
-      </Router>
+        <Header />
+      </Router>,
+      store
     );
 
     expect(screen.queryByTestId('header--button-login')).not.toBeInTheDocument();

package/src/App/Header/Header.tsx

@@ -1,18 +1,16 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-
+import { useDispatch, useSelector } from 'react-redux';
 import Button from 'verdaccio-ui/components/Button';
 import { useConfig } from 'verdaccio-ui/providers/config';
-import storage from 'verdaccio-ui/utils/storage';
-
-import AppContext from '../../App/AppContext';
 
+import { Dispatch, RootState } from '../../store/store';
 import HeaderInfoDialog from './HeaderInfoDialog';
 import HeaderLeft from './HeaderLeft';
 import HeaderRight from './HeaderRight';
 import LoginDialog from './LoginDialog';
 import Search from './Search';
-import { NavBar, InnerNavBar, MobileNavBar, InnerMobileNavBar } from './styles';
+import { InnerMobileNavBar, InnerNavBar, MobileNavBar, NavBar } from './styles';
 
 interface Props {
   withoutSearch?: boolean;
@@ -21,26 +19,15 @@ 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<boolean>(false);
   const [showMobileNavBar, setShowMobileNavBar] = useState<boolean>(false);
   const [showLoginModal, setShowLoginModal] = useState<boolean>(false);
-
-  if (!appContext) {
-    throw Error(t('app-context-not-correct-used'));
-  }
-
-  const { user, scope, setUser } = appContext;
+  const loginStore = useSelector((state: RootState) => state.login);
+  const configStore = useSelector((state: RootState) => state.configuration.config);
   const { configOptions } = useConfig();
-
-  /**
-   * Logouts user
-   * Required by: <Header />
-   */
+  const dispatch = useDispatch<Dispatch>();
   const handleLogout = () => {
-    storage.removeItem('username');
-    storage.removeItem('token');
-    setUser(undefined);
+    dispatch.login.logOutUser();
   };
 
   return (
@@ -54,7 +41,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
             onOpenRegistryInfoDialog={() => setOpenInfoDialog(true)}
             onToggleLogin={() => setShowLoginModal(!showLoginModal)}
             onToggleMobileNav={() => setShowMobileNavBar(!showMobileNavBar)}
-            username={user?.username}
+            username={loginStore?.username}
             withoutSearch={withoutSearch}
           />
         </InnerNavBar>
@@ -62,7 +49,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
           isOpen={isInfoDialogOpen}
           onCloseDialog={() => setOpenInfoDialog(false)}
           registryUrl={configOptions.base}
-          scope={scope}
+          scope={configStore.scope}
         />
       </NavBar>
       {showMobileNavBar && !withoutSearch && (
@@ -75,7 +62,9 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
           </Button>
         </MobileNavBar>
       )}
-      {!user && <LoginDialog onClose={() => setShowLoginModal(false)} open={showLoginModal} />}
+      {!loginStore.username && (
+        <LoginDialog onClose={() => setShowLoginModal(false)} open={showLoginModal} />
+      )}
     </>
   );
 };

package/src/App/Header/HeaderGreetings.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-
 import Label from 'verdaccio-ui/components/Label';
 
 import { Greetings } from './styles';

package/src/App/Header/HeaderLeft.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import React from 'react';
 import { Link } from 'react-router-dom';
-
 import Logo from 'verdaccio-ui/components/Logo';
 
 import Search from './Search';

package/src/App/Header/HeaderMenu.tsx

@@ -1,7 +1,6 @@
-import AccountCircle from '@material-ui/icons/AccountCircle';
+import AccountCircle from '@mui/icons-material/AccountCircle';
 import React, { MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import IconButton from 'verdaccio-ui/components/IconButton';
 import Menu from 'verdaccio-ui/components/Menu';
 import MenuItem from 'verdaccio-ui/components/MenuItem';
@@ -30,9 +29,10 @@ const HeaderMenu: React.FC<Props> = ({
     <>
       <IconButton
         color="inherit"
-        data-testid="header--menu-accountcircle"
+        data-testid="logInDialogIcon"
         id="header--button-account"
-        onClick={onLoggedInMenu}>
+        onClick={onLoggedInMenu}
+        size="large">
         <AccountCircle />
       </IconButton>
       <Menu
@@ -52,8 +52,8 @@ const HeaderMenu: React.FC<Props> = ({
         </MenuItem>
         <MenuItem
           button={true}
-          data-testid="header--button-logout"
-          id="header--button-logout"
+          data-testid="logOutDialogIcon"
+          id="logOutDialogIcon"
           onClick={onLogout}>
           {t('button.logout')}
         </MenuItem>

package/src/App/Header/HeaderRight.tsx

@@ -1,6 +1,5 @@
-import React, { useState, useEffect, useContext, MouseEvent } from 'react';
+import React, { MouseEvent, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import Button from 'verdaccio-ui/components/Button';
 import ThemeContext from 'verdaccio-ui/design-tokens/ThemeContext';
 

package/src/App/Header/HeaderToolTip.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import Tooltip from 'verdaccio-ui/components/Tooltip';
 
 import HeaderToolTipIcon, { TooltipIconType } from './HeaderToolTipIcon';

package/src/App/Header/HeaderToolTipIcon.tsx

@@ -1,10 +1,9 @@
-import Help from '@material-ui/icons/Help';
-import Info from '@material-ui/icons/Info';
-import NightsStay from '@material-ui/icons/NightsStay';
-import Search from '@material-ui/icons/Search';
-import WbSunny from '@material-ui/icons/WbSunny';
+import Help from '@mui/icons-material/Help';
+import Info from '@mui/icons-material/Info';
+import NightsStay from '@mui/icons-material/NightsStay';
+import Search from '@mui/icons-material/Search';
+import WbSunny from '@mui/icons-material/WbSunny';
 import React, { forwardRef } from 'react';
-
 import IconButton from 'verdaccio-ui/components/IconButton';
 
 import { IconSearchButton, StyledLink } from './styles';
@@ -30,7 +29,7 @@ const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function Heade
           data-testid={'header--tooltip-documentation'}
           external={true}
           to={'https://verdaccio.org/docs/en/installation'}>
-          <IconButton color={'inherit'}>
+          <IconButton color={'inherit'} size="large">
             <Help />
           </IconButton>
         </StyledLink>
@@ -42,7 +41,8 @@ const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function Heade
           data-testid={'header--tooltip-info'}
           id="header--button-registryInfo"
           onClick={onClick}
-          ref={ref}>
+          ref={ref}
+          size="large">
           <Info />
         </IconButton>
       );
@@ -55,7 +55,7 @@ const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function Heade
     case 'dark-mode':
       // todo(Priscila): Add Zoom transition effect
       return (
-        <IconButton color="inherit" onClick={onClick} ref={ref}>
+        <IconButton color="inherit" onClick={onClick} ref={ref} size="large">
           <NightsStay />
         </IconButton>
       );
@@ -63,7 +63,7 @@ const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function Heade
     case 'light-mode':
       // todo(Priscila): Add Zoom transition effect
       return (
-        <IconButton color="inherit" onClick={onClick} ref={ref}>
+        <IconButton color="inherit" onClick={onClick} ref={ref} size="large">
           <WbSunny />
         </IconButton>
       );

package/src/App/Header/LanguageSwitch.tsx

@@ -1,86 +1,24 @@
+/* eslint-disable react/jsx-pascal-case */
 import styled from '@emotion/styled';
-import { withStyles } from '@material-ui/core/styles';
-import LanguageIcon from '@material-ui/icons/Language';
-import i18next, { TFunctionKeys } from 'i18next';
-import React, { useCallback, useContext, useState, useMemo } from 'react';
+import LanguageIcon from '@mui/icons-material/Language';
+import withStyles from '@mui/styles/withStyles';
+import i18next from 'i18next';
+import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-
 import { AutoComplete } from 'verdaccio-ui/components/AutoComplete/AutoCompleteV2';
-import {
-  France,
-  Brazil,
-  Germany,
-  Spain,
-  China,
-  Russia,
-  Turkey,
-  Ukraine,
-  Khmer,
-  Japan,
-  Usa,
-  Czech,
-  Taiwan,
-} from 'verdaccio-ui/components/Icons';
 import MenuItem from 'verdaccio-ui/components/MenuItem';
-import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import ThemeContext from 'verdaccio-ui/design-tokens/ThemeContext';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
-import { Language } from '../../../i18n/config';
+import { Language, listLanguages } from '../../i18n/enabledLanguages';
 
-const lngDetails: Record<Language, { translation: TFunctionKeys; icon: React.ReactElement }> = {
-  'fr-FR': {
-    translation: 'lng.french',
-    icon: <France size="md" />,
-  },
-  'pt-BR': {
-    translation: 'lng.portuguese',
-    icon: <Brazil size="md" />,
-  },
-  'de-DE': {
-    translation: 'lng.german',
-    icon: <Germany size="md" />,
-  },
-  'es-ES': {
-    translation: 'lng.spanish',
-    icon: <Spain size="md" />,
-  },
-  'zh-CN': {
-    translation: 'lng.chinese',
-    icon: <China size="md" />,
-  },
-  'ru-RU': {
-    translation: 'lng.russian',
-    icon: <Russia size="md" />,
-  },
-  'tr-TR': {
-    translation: 'lng.turkish',
-    icon: <Turkey size="md" />,
-  },
-  'uk-UA': {
-    translation: 'lng.ukraine',
-    icon: <Ukraine size="md" />,
-  },
-  'km-KH': {
-    translation: 'lng.khmer',
-    icon: <Khmer size="md" />,
-  },
-  'ja-JP': {
-    translation: 'lng.japanese',
-    icon: <Japan size="md" />,
-  },
-  'en-US': {
-    translation: 'lng.english',
-    icon: <Usa size="md" />,
-  },
-  'cs-CZ': {
-    translation: 'lng.czech',
-    icon: <Czech size="md" />,
-  },
-  'zh-TW': {
-    translation: 'lng.chineseTraditional',
-    icon: <Taiwan size="md" />,
-  },
-};
+const listConverted = listLanguages.reduce((prev, item) => {
+  prev[item.lng] = {
+    translation: item.menuKey,
+    icon: item.icon,
+  };
+  return prev;
+}, {});
 
 const LanguageSwitch = () => {
   const themeContext = useContext(ThemeContext);
@@ -104,10 +42,10 @@ const LanguageSwitch = () => {
 
   const getCurrentLngDetails = useCallback(
     (language: Language) => {
-      const { icon, translation } = lngDetails[language] || lngDetails['en-US'];
+      const lng = listConverted[language] || listConverted['en-US'];
       return {
-        icon,
-        translation: t(translation),
+        icon: <lng.icon />,
+        translation: t(lng.translation),
       };
     },
     [t]

package/src/App/Header/LoginDialog/LoginDialog.test.tsx

@@ -1,24 +1,17 @@
 import React from 'react';
-
 import api from 'verdaccio-ui/providers/API/api';
 import {
-  render,
-  waitFor,
-  fireEvent,
+  act,
   cleanup,
+  fireEvent,
+  renderWithStore,
   screen,
-  act,
+  waitFor,
 } from 'verdaccio-ui/utils/test-react-testing-library';
 
-import AppContext, { AppContextProps } from '../../AppContext';
-
+import { store } from '../../../store';
 import LoginDialog from './LoginDialog';
 
-const appContextValue: AppContextProps = {
-  scope: '',
-  setUser: jest.fn(),
-};
-
 describe('<LoginDialog /> component', () => {
   beforeEach(() => {
     jest.resetModules();
@@ -30,11 +23,7 @@ describe('<LoginDialog /> component', () => {
     const props = {
       onClose: jest.fn(),
     };
-    const { container } = render(
-      <AppContext.Provider value={appContextValue}>
-        <LoginDialog onClose={props.onClose} />
-      </AppContext.Provider>
-    );
+    const { container } = renderWithStore(<LoginDialog onClose={props.onClose} />, store);
     expect(container.firstChild).toMatchSnapshot();
   });
 
@@ -44,10 +33,9 @@ describe('<LoginDialog /> component', () => {
       onClose: jest.fn(),
     };
 
-    const { getByTestId } = render(
-      <AppContext.Provider value={appContextValue}>
-        <LoginDialog onClose={props.onClose} open={props.open} />
-      </AppContext.Provider>
+    const { getByTestId } = renderWithStore(
+      <LoginDialog onClose={props.onClose} open={props.open} />,
+      store
     );
 
     const loginDialogHeading = await waitFor(() => getByTestId('login-dialog-form-login-button'));
@@ -60,18 +48,18 @@ describe('<LoginDialog /> component', () => {
       onClose: jest.fn(),
     };
 
-    const { getByTestId } = render(
-      <AppContext.Provider value={appContextValue}>
-        <LoginDialog onClose={props.onClose} open={props.open} />
-      </AppContext.Provider>
+    const { getByTestId } = renderWithStore(
+      <LoginDialog onClose={props.onClose} open={props.open} />,
+      store
     );
 
     const loginDialogButton = await waitFor(() => getByTestId('close-login-dialog-button'));
     expect(loginDialogButton).toBeTruthy();
 
-    act(() => {
+    await act(() => {
       fireEvent.click(loginDialogButton, { open: false });
     });
+
     expect(props.onClose).toHaveBeenCalled();
   });
 
@@ -88,11 +76,9 @@ describe('<LoginDialog /> component', () => {
       })
     );
 
-    render(
-      <AppContext.Provider value={appContextValue}>
-        <LoginDialog onClose={props.onClose} open={props.open} />
-      </AppContext.Provider>
-    );
+    await act(async () => {
+      renderWithStore(<LoginDialog onClose={props.onClose} open={props.open} />, store);
+    });
 
     const userNameInput = screen.getByPlaceholderText('Your username');
     expect(userNameInput).toBeInTheDocument();
@@ -104,13 +90,17 @@ describe('<LoginDialog /> component', () => {
     const passwordInput = screen.getByPlaceholderText('Your strong password');
     expect(userNameInput).toBeInTheDocument();
     fireEvent.focus(passwordInput);
-    fireEvent.change(passwordInput, { target: { value: '1234' } });
 
-    act(async () => {
-      const signInButton = await screen.getByTestId('login-dialog-form-login-button');
-      expect(signInButton).not.toBeDisabled();
+    await act(async () => {
+      fireEvent.change(passwordInput, { target: { value: '1234' } });
+    });
+    const signInButton = screen.getByTestId('login-dialog-form-login-button');
+    expect(signInButton).not.toBeDisabled();
+
+    await act(async () => {
       fireEvent.click(signInButton);
     });
+    expect(props.onClose).toHaveBeenCalledTimes(1);
   });
 
   test.todo('validateCredentials: should validate credentials');