@verdaccio/ui-theme 3.1.0 → 6.0.0-6-next.11

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

@@ -0,0 +1,152 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import {
+  renderWithStore,
+  fireEvent,
+  waitFor,
+  cleanup,
+  screen,
+  waitForElementToBeRemoved,
+} from 'verdaccio-ui/utils/test-react-testing-library';
+
+import translationEN from '../../i18n/crowdin/ui.json';
+import { store } from '../../store';
+
+import Header from './Header';
+
+/* eslint-disable react/jsx-no-bind*/
+describe('<Header /> component with logged in state', () => {
+  afterEach(cleanup);
+
+  test('should load the component in logged out state', () => {
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    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', async () => {
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+    store.dispatch.login.logInUser({ username: 'store', token: '12345' });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('logInDialogIcon')).toBeTruthy();
+      expect(screen.queryByText('Login')).toBeNull();
+    });
+  });
+
+  test('should open login dialog', async () => {
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    store.dispatch.login.logOutUser();
+
+    const loginBtn = screen.getByTestId('header--button-login');
+    fireEvent.click(loginBtn);
+    const loginDialog = await waitFor(() => screen.getByTestId('login--dialog'));
+    expect(loginDialog).toBeTruthy();
+  });
+
+  test('should logout the user', async () => {
+    const { getByText, getByTestId } = renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    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
+    const logoutBtn = await waitFor(() => getByText('Logout'));
+    fireEvent.click(logoutBtn);
+    expect(getByText('Login')).toBeTruthy();
+  });
+
+  test("The question icon should open a new tab of verdaccio's website - installation doc", () => {
+    const { getByTestId } = renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    const documentationBtn = getByTestId('header--tooltip-documentation');
+    expect(documentationBtn.getAttribute('href')).toBe(
+      'https://verdaccio.org/docs/en/installation'
+    );
+  });
+
+  test('should open the registrationInfo modal when clicking on the info icon', async () => {
+    const { getByTestId } = renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    const infoBtn = getByTestId('header--tooltip-info');
+    fireEvent.click(infoBtn);
+
+    // wait for registrationInfo modal appearance and return the element
+    const registrationInfoModal = await waitFor(() => getByTestId('registryInfo--dialog'));
+    expect(registrationInfoModal).toBeTruthy();
+  });
+
+  test('should close the registrationInfo modal when clicking on the button close', async () => {
+    const { getByTestId, getByText, queryByTestId } = renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    const infoBtn = getByTestId('header--tooltip-info');
+    fireEvent.click(infoBtn);
+
+    // wait for Close's button of registrationInfo modal appearance and return the element
+    const closeBtn = await waitFor(() => getByText(translationEN.button.close));
+    fireEvent.click(closeBtn);
+
+    const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() =>
+      queryByTestId('registryInfo--dialog')
+    );
+    expect(hasRegistrationInfoModalBeenRemoved).not.toBeDefined();
+  });
+
+  test('should hide login if is disabled', () => {
+    window.__VERDACCIO_BASENAME_UI_OPTIONS = {
+      base: 'foo',
+      login: false,
+    };
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    expect(screen.queryByTestId('header--button-login')).not.toBeInTheDocument();
+  });
+
+  test.todo('autocompletion should display suggestions according to the type value');
+});

package/src/App/Header/Header.tsx

@@ -0,0 +1,74 @@
+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 { 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';
+
+interface Props {
+  withoutSearch?: boolean;
+}
+
+/* eslint-disable react/jsx-no-bind*/
+const Header: React.FC<Props> = ({ withoutSearch }) => {
+  const { t } = useTranslation();
+  const [isInfoDialogOpen, setOpenInfoDialog] = useState<boolean>(false);
+  const [showMobileNavBar, setShowMobileNavBar] = useState<boolean>(false);
+  const [showLoginModal, setShowLoginModal] = useState<boolean>(false);
+  const loginStore = useSelector((state: RootState) => state.login);
+  const configStore = useSelector((state: RootState) => state.configuration);
+  const { configOptions } = useConfig();
+  const dispatch = useDispatch<Dispatch>();
+  const handleLogout = () => {
+    dispatch.login.logOutUser();
+  };
+
+  return (
+    <>
+      <NavBar data-testid="header" position="static">
+        <InnerNavBar>
+          <HeaderLeft />
+          <HeaderRight
+            hasLogin={configOptions?.login}
+            onLogout={handleLogout}
+            onOpenRegistryInfoDialog={() => setOpenInfoDialog(true)}
+            onToggleLogin={() => setShowLoginModal(!showLoginModal)}
+            onToggleMobileNav={() => setShowMobileNavBar(!showMobileNavBar)}
+            username={loginStore?.username}
+            withoutSearch={withoutSearch}
+          />
+        </InnerNavBar>
+        <HeaderInfoDialog
+          isOpen={isInfoDialogOpen}
+          onCloseDialog={() => setOpenInfoDialog(false)}
+          registryUrl={configOptions.base}
+          scope={configStore.scope}
+        />
+      </NavBar>
+      {showMobileNavBar && !withoutSearch && (
+        <MobileNavBar>
+          <InnerMobileNavBar>
+            <Search />
+          </InnerMobileNavBar>
+          <Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
+            {t('button.cancel')}
+          </Button>
+        </MobileNavBar>
+      )}
+      {!loginStore.user && (
+        <LoginDialog onClose={() => setShowLoginModal(false)} open={showLoginModal} />
+      )}
+    </>
+  );
+};
+
+export default Header;

package/src/App/Header/HeaderGreetings.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Label from 'verdaccio-ui/components/Label';
+
+import { Greetings } from './styles';
+
+interface Props {
+  username: string;
+}
+
+const HeaderGreetings: React.FC<Props> = ({ username }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Greetings>{t('header.greetings')}</Greetings>
+      <Label data-testid="greetings-label" text={username} weight="bold" />
+    </>
+  );
+};
+
+export default HeaderGreetings;

package/src/App/Header/HeaderInfoDialog.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import RegistryInfoContent from './RegistryInfoContent';
+import RegistryInfoDialog from './RegistryInfoDialog';
+
+interface Props {
+  isOpen: boolean;
+  onCloseDialog: () => void;
+  registryUrl: string;
+  scope: string;
+}
+
+const HeaderInfoDialog: React.FC<Props> = ({ onCloseDialog, isOpen, registryUrl, scope }) => (
+  <RegistryInfoDialog onClose={onCloseDialog} open={isOpen}>
+    <RegistryInfoContent registryUrl={registryUrl} scope={scope} />
+  </RegistryInfoDialog>
+);
+
+export default HeaderInfoDialog;

package/src/App/Header/HeaderLeft.tsx

@@ -0,0 +1,31 @@
+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';
+import { LeftSide, SearchWrapper } from './styles';
+
+interface Props {
+  withoutSearch?: boolean;
+}
+
+const StyledLink = styled(Link)({
+  marginRight: '1em',
+});
+
+const HeaderLeft: React.FC<Props> = ({ withoutSearch = false }) => (
+  <LeftSide>
+    <StyledLink to={'/'}>
+      <Logo />
+    </StyledLink>
+    {!withoutSearch && (
+      <SearchWrapper>
+        <Search />
+      </SearchWrapper>
+    )}
+  </LeftSide>
+);
+
+export default HeaderLeft;

package/src/App/Header/HeaderMenu.tsx

@@ -0,0 +1,65 @@
+import AccountCircle from '@material-ui/icons/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';
+
+import HeaderGreetings from './HeaderGreetings';
+
+interface Props {
+  username: string;
+  isMenuOpen: boolean;
+  anchorEl?: Element | ((element: Element) => Element) | null | undefined;
+  onLogout: () => void;
+  onLoggedInMenu: (event: MouseEvent<HTMLButtonElement>) => void;
+  onLoggedInMenuClose: () => void;
+}
+
+const HeaderMenu: React.FC<Props> = ({
+  onLogout,
+  username,
+  isMenuOpen = false,
+  anchorEl,
+  onLoggedInMenu,
+  onLoggedInMenuClose,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <IconButton
+        color="inherit"
+        data-testid="logInDialogIcon"
+        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>
+          <HeaderGreetings username={username} />
+        </MenuItem>
+        <MenuItem
+          button={true}
+          data-testid="logOutDialogIcon"
+          id="logOutDialogIcon"
+          onClick={onLogout}>
+          {t('button.logout')}
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
+
+export default HeaderMenu;

package/src/App/Header/HeaderRight.tsx

@@ -0,0 +1,118 @@
+import React, { useState, useEffect, useContext, MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Button from 'verdaccio-ui/components/Button';
+import ThemeContext from 'verdaccio-ui/design-tokens/ThemeContext';
+
+import HeaderMenu from './HeaderMenu';
+import HeaderToolTip from './HeaderToolTip';
+import LanguageSwitch from './LanguageSwitch';
+import { RightSide } from './styles';
+
+interface Props {
+  withoutSearch?: boolean;
+  username?: string | null;
+  hasLogin?: boolean;
+  onToggleLogin: () => void;
+  onOpenRegistryInfoDialog: () => void;
+  onToggleMobileNav: () => void;
+  onLogout: () => void;
+}
+
+const HeaderRight: React.FC<Props> = ({
+  withoutSearch = false,
+  username,
+  onToggleLogin,
+  hasLogin,
+  onLogout,
+  onToggleMobileNav,
+  onOpenRegistryInfoDialog,
+}) => {
+  const themeContext = useContext(ThemeContext);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
+  const hideLoginSection = hasLogin === false;
+
+  const { t } = useTranslation();
+
+  if (!themeContext) {
+    throw Error(t('theme-context-not-correct-used'));
+  }
+
+  useEffect(() => {
+    setIsMenuOpen(Boolean(anchorEl));
+  }, [anchorEl]);
+
+  /**
+   * opens popover menu for logged in user.
+   */
+  const handleLoggedInMenu = (event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  /**
+   * closes popover menu for logged in user
+   */
+  const handleLoggedInMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  /**
+   * close/open popover menu for logged in users.
+   */
+  const handleToggleLogin = () => {
+    setAnchorEl(null);
+    onToggleLogin();
+  };
+
+  const handleToggleDarkLightMode = () => {
+    setTimeout(() => {
+      themeContext.setIsDarkMode(!themeContext.isDarkMode);
+    }, 300);
+  };
+
+  return (
+    <RightSide data-testid="header-right">
+      {!withoutSearch && (
+        <HeaderToolTip
+          onClick={onToggleMobileNav}
+          title={t('search.packages')}
+          tooltipIconType={'search'}
+        />
+      )}
+      <LanguageSwitch />
+      <HeaderToolTip title={t('header.documentation')} tooltipIconType={'help'} />
+      <HeaderToolTip
+        onClick={onOpenRegistryInfoDialog}
+        title={t('header.registry-info')}
+        tooltipIconType={'info'}
+      />
+      <HeaderToolTip
+        onClick={handleToggleDarkLightMode}
+        title={t('header.documentation')}
+        tooltipIconType={themeContext.isDarkMode ? 'dark-mode' : 'light-mode'}
+      />
+
+      {!hideLoginSection && (
+        <>
+          {username ? (
+            <HeaderMenu
+              anchorEl={anchorEl}
+              isMenuOpen={isMenuOpen}
+              onLoggedInMenu={handleLoggedInMenu}
+              onLoggedInMenuClose={handleLoggedInMenuClose}
+              onLogout={onLogout}
+              username={username}
+            />
+          ) : (
+            <Button color="inherit" data-testid="header--button-login" onClick={handleToggleLogin}>
+              {t('button.login')}
+            </Button>
+          )}
+        </>
+      )}
+    </RightSide>
+  );
+};
+
+export default HeaderRight;

package/src/App/Header/HeaderToolTip.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import Tooltip from 'verdaccio-ui/components/Tooltip';
+
+import HeaderToolTipIcon, { TooltipIconType } from './HeaderToolTipIcon';
+
+interface Props {
+  title: string;
+  tooltipIconType: TooltipIconType;
+  onClick?: () => void;
+}
+
+const HeaderToolTip: React.FC<Props> = ({ tooltipIconType, title, onClick }) => (
+  <Tooltip disableFocusListener={true} title={title}>
+    <HeaderToolTipIcon onClick={onClick} tooltipIconType={tooltipIconType} />
+  </Tooltip>
+);
+
+export default HeaderToolTip;

package/src/App/Header/HeaderToolTipIcon.tsx

@@ -0,0 +1,75 @@
+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 React, { forwardRef } from 'react';
+
+import IconButton from 'verdaccio-ui/components/IconButton';
+
+import { IconSearchButton, StyledLink } from './styles';
+
+export type TooltipIconType = 'search' | 'help' | 'info' | 'dark-mode' | 'light-mode';
+interface Props {
+  tooltipIconType: TooltipIconType;
+  onClick?: () => void;
+}
+
+type HeaderToolTipIconRef = HTMLButtonElement;
+
+/* eslint-disable react/jsx-no-undef */
+/* eslint-disable react/display-name */
+const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function HeaderToolTipIcon(
+  { tooltipIconType, onClick },
+  ref
+) {
+  switch (tooltipIconType) {
+    case 'help':
+      return (
+        <StyledLink
+          data-testid={'header--tooltip-documentation'}
+          external={true}
+          to={'https://verdaccio.org/docs/en/installation'}>
+          <IconButton color={'inherit'}>
+            <Help />
+          </IconButton>
+        </StyledLink>
+      );
+    case 'info':
+      return (
+        <IconButton
+          color="inherit"
+          data-testid={'header--tooltip-info'}
+          id="header--button-registryInfo"
+          onClick={onClick}
+          ref={ref}>
+          <Info />
+        </IconButton>
+      );
+    case 'search':
+      return (
+        <IconSearchButton color="inherit" onClick={onClick}>
+          <Search />
+        </IconSearchButton>
+      );
+    case 'dark-mode':
+      // todo(Priscila): Add Zoom transition effect
+      return (
+        <IconButton color="inherit" onClick={onClick} ref={ref}>
+          <NightsStay />
+        </IconButton>
+      );
+
+    case 'light-mode':
+      // todo(Priscila): Add Zoom transition effect
+      return (
+        <IconButton color="inherit" onClick={onClick} ref={ref}>
+          <WbSunny />
+        </IconButton>
+      );
+    default:
+      return null;
+  }
+});
+
+export default HeaderToolTipIcon;