@verdaccio/ui-components 2.0.0-alpha.0 → 3.0.0-next-7.4

package/src/sections/Header/Header.test.tsx

@@ -0,0 +1,278 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { HeaderInfoDialog, store } from '../../';
+import {
+  act,
+  cleanup,
+  fireEvent,
+  renderWithStore,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} from '../../test/test-react-testing-library';
+import Header from './Header';
+
+function CustomInfoDialog({ onCloseDialog, title, isOpen }) {
+  return (
+    <HeaderInfoDialog
+      dialogTitle={title}
+      isOpen={isOpen}
+      onCloseDialog={onCloseDialog}
+      tabPanels={[
+        { element: <div>{'foo'}</div> },
+        { element: <div>{'bar'}</div> },
+        { element: <div>{'fooBar'}</div> },
+      ]}
+      tabs={[{ label: 'foo' }, { label: 'bar' }, { label: 'barFoo' }]}
+    />
+  );
+}
+
+/* eslint-disable react/jsx-no-bind*/
+describe('<Header /> component with logged in state', () => {
+  beforeEach(() => {
+    store.dispatch.login.logOutUser();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('should load the component n logged out state', () => {
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    expect(screen.queryByTestId('logInDialogIcon')).toBeNull();
+    expect(screen.getByText('button.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('button.login')).toBeNull();
+    });
+  });
+
+  test('should open login dialog', async () => {
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    const loginBtn = screen.getByTestId('header--button-login');
+    fireEvent.click(loginBtn);
+
+    const loginDialog = await waitFor(() => screen.getByTestId('login--dialog'));
+
+    expect(loginDialog).toBeTruthy();
+  });
+
+  test('should login and logout the user', async () => {
+    const { getByText, getByTestId } = renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    fireEvent.click(screen.getByText('button.login'));
+    const userNameInput = screen.getByPlaceholderText('form-placeholder.username');
+    fireEvent.focus(userNameInput);
+    fireEvent.change(userNameInput, { target: { value: 'xyz' } });
+    const passwordInput = screen.getByPlaceholderText('form-placeholder.password');
+    fireEvent.focus(passwordInput);
+    await act(async () => {
+      fireEvent.change(passwordInput, { target: { value: '1234' } });
+    });
+    const signInButton = screen.getByTestId('login-dialog-form-login-button');
+    await act(async () => {
+      fireEvent.click(signInButton);
+    });
+    await waitFor(() => getByTestId('logInDialogIcon'));
+    const headerMenuAccountCircle = getByTestId('logInDialogIcon');
+    fireEvent.click(headerMenuAccountCircle);
+
+    // // wait for button Logout's appearance and return the element
+    const logoutBtn = await waitFor(() => getByText('button.logout'));
+    fireEvent.click(logoutBtn);
+    await waitFor(() => getByText('button.login'));
+    expect(getByText('button.login')).toBeTruthy();
+  });
+
+  test('should display info button', () => {
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+    expect(screen.getByTestId('header--tooltip-info')).toBeInTheDocument();
+  });
+
+  test('should display settings button', () => {
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+    expect(screen.getByTestId('header--tooltip-settings')).toBeInTheDocument();
+  });
+
+  test('should display light button switch', () => {
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+    expect(screen.getByTestId('header--button--light')).toBeInTheDocument();
+  });
+
+  test.todo('should test display dark button switch');
+
+  test('should display search box', () => {
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+    expect(screen.getByTestId('search-container')).toBeInTheDocument();
+  });
+
+  test('should open the registrationInfo modal when clicking on the info icon', async () => {
+    renderWithStore(
+      <Router>
+        <Header HeaderInfoDialog={CustomInfoDialog} />
+      </Router>,
+      store
+    );
+
+    const infoBtn = screen.getByTestId('header--tooltip-info');
+    expect(infoBtn).toBeInTheDocument();
+    fireEvent.click(infoBtn);
+    // wait for registrationInfo modal appearance and return the element
+    const registrationInfoModal = await waitFor(() => screen.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 HeaderInfoDialog={CustomInfoDialog} />
+      </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('button.close'));
+    fireEvent.click(closeBtn);
+
+    const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() =>
+      queryByTestId('registryInfo--dialog')
+    );
+    expect(hasRegistrationInfoModalBeenRemoved).not.toBeDefined();
+  });
+
+  test('should hide login if is disabled', () => {
+    // @ts-expect-error
+    window.__VERDACCIO_BASENAME_UI_OPTIONS = {
+      base: 'foo',
+      login: false,
+    };
+    renderWithStore(
+      <Router>
+        <Header HeaderInfoDialog={CustomInfoDialog} />
+      </Router>,
+      store
+    );
+
+    expect(screen.queryByTestId('header--button-login')).toBeNull();
+  });
+
+  test('should hide search if is disabled', () => {
+    // @ts-expect-error
+    window.__VERDACCIO_BASENAME_UI_OPTIONS = {
+      base: 'foo',
+      showSearch: false,
+    };
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    expect(screen.queryByTestId('search-container')).toBeNull();
+  });
+
+  test('should hide settings if is disabled', () => {
+    // @ts-expect-error
+    window.__VERDACCIO_BASENAME_UI_OPTIONS = {
+      base: 'foo',
+      showSettings: false,
+    };
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    expect(screen.queryByTitle('header--tooltip-settings')).toBeNull();
+  });
+
+  test('should hide info if is disabled', () => {
+    // @ts-expect-error
+    window.__VERDACCIO_BASENAME_UI_OPTIONS = {
+      base: 'foo',
+      showSettings: false,
+    };
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    expect(screen.queryByTitle('header.registry-info')).toBeNull();
+  });
+
+  test('should hide theme switch if is disabled', () => {
+    // @ts-expect-error
+    window.__VERDACCIO_BASENAME_UI_OPTIONS = {
+      base: 'foo',
+      showThemeSwitch: false,
+    };
+    renderWithStore(
+      <Router>
+        <Header />
+      </Router>,
+      store
+    );
+
+    expect(screen.queryByTitle('header.registry-info')).toBeNull();
+  });
+
+  test.todo('autocompletion should display suggestions according to the type value');
+});

package/src/sections/Header/Header.tsx

@@ -0,0 +1,79 @@
+import Button from '@mui/material/Button';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Dispatch, LoginDialog, RootState, Search, useConfig } from '../../';
+import HeaderLeft from './HeaderLeft';
+import HeaderRight from './HeaderRight';
+import HeaderSettingsDialog from './HeaderSettingsDialog';
+import { InnerMobileNavBar, InnerNavBar, MobileNavBar, NavBar } from './styles';
+
+type Props = {
+  // TODO: set correct type here
+  HeaderInfoDialog?: any;
+};
+
+/* eslint-disable react/jsx-no-bind*/
+const Header: React.FC<Props> = ({ HeaderInfoDialog }) => {
+  const { t } = useTranslation();
+  const [isInfoDialogOpen, setOpenInfoDialog] = useState<boolean>(false);
+  const [isSettingsDialogOpen, setSettingsDialogOpen] = useState<boolean>(false);
+  const [showMobileNavBar, setShowMobileNavBar] = useState<boolean>(false);
+  const [showLoginModal, setShowLoginModal] = useState<boolean>(false);
+  const loginStore = useSelector((state: RootState) => state.login);
+  const { configOptions } = useConfig();
+  const dispatch = useDispatch<Dispatch>();
+  const handleLogout = () => {
+    dispatch.login.logOutUser();
+    setShowLoginModal(false);
+  };
+  return (
+    <>
+      <NavBar data-testid="header" position="static">
+        <InnerNavBar>
+          <HeaderLeft showSearch={configOptions.showSearch} />
+          <HeaderRight
+            hasLogin={configOptions?.login}
+            onLogout={handleLogout}
+            onOpenRegistryInfoDialog={() => setOpenInfoDialog(true)}
+            onOpenSettingsDialog={() => setSettingsDialogOpen(true)}
+            onToggleLogin={() => setShowLoginModal(!showLoginModal)}
+            onToggleMobileNav={() => setShowMobileNavBar(!showMobileNavBar)}
+            showInfo={configOptions.showInfo}
+            showSearch={configOptions.showSearch}
+            showSettings={configOptions.showSettings}
+            showThemeSwitch={configOptions.showThemeSwitch}
+            username={loginStore?.username}
+          />
+        </InnerNavBar>
+        <HeaderSettingsDialog
+          isOpen={isSettingsDialogOpen}
+          onCloseDialog={() => setSettingsDialogOpen(false)}
+        />
+        {HeaderInfoDialog ? (
+          <HeaderInfoDialog
+            dialogTitle={t('dialog.registry-info.title')}
+            isOpen={isInfoDialogOpen}
+            onCloseDialog={() => setOpenInfoDialog(false)}
+          />
+        ) : null}
+      </NavBar>
+      {showMobileNavBar && (
+        <MobileNavBar>
+          <InnerMobileNavBar>
+            <Search />
+          </InnerMobileNavBar>
+          <Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
+            {t('button.cancel')}
+          </Button>
+        </MobileNavBar>
+      )}
+      {!loginStore.username && (
+        <LoginDialog onClose={() => setShowLoginModal(false)} open={showLoginModal} />
+      )}
+    </>
+  );
+};
+
+export default Header;

package/src/sections/Header/HeaderGreetings.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Label } from '../../';
+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/sections/Header/HeaderLeft.tsx

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { Logo, Search } from '../../';
+import { LeftSide, SearchWrapper } from './styles';
+
+interface Props {
+  showSearch?: boolean;
+}
+
+const StyledLink = styled(Link)({
+  marginRight: '1em',
+});
+
+const HeaderLeft: React.FC<Props> = ({ showSearch }) => (
+  <LeftSide>
+    <StyledLink to={'/'}>
+      <Logo />
+    </StyledLink>
+    {showSearch && (
+      <SearchWrapper data-testid="search-container">
+        <Search />
+      </SearchWrapper>
+    )}
+  </LeftSide>
+);
+
+export default HeaderLeft;

package/src/sections/Header/HeaderMenu.tsx

@@ -0,0 +1,63 @@
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import React, { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { MenuItem } from '../../';
+import HeaderGreetings from './HeaderGreetings';
+
+interface Props {
+  username: string;
+  isMenuOpen: boolean;
+  anchorEl?: 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}
+        size="large"
+      >
+        <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 data-testid="logOutDialogIcon" id="logOutDialogIcon" onClick={onLogout}>
+          {t('button.logout')}
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
+
+export default HeaderMenu;

package/src/sections/Header/HeaderRight.tsx

@@ -0,0 +1,131 @@
+import Button from '@mui/material/Button';
+import React, { MouseEvent, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useCustomTheme } from '../../';
+import HeaderMenu from './HeaderMenu';
+import HeaderToolTip from './HeaderToolTip';
+import { RightSide } from './styles';
+
+interface Props {
+  showSearch?: boolean;
+  username?: string | null;
+  hasLogin?: boolean;
+  showInfo?: boolean;
+  showSettings?: boolean;
+  showThemeSwitch?: boolean;
+  onToggleLogin: () => void;
+  onOpenRegistryInfoDialog: () => void;
+  onOpenSettingsDialog: () => void;
+  onToggleMobileNav: () => void;
+  onLogout: () => void;
+}
+
+const HeaderRight: React.FC<Props> = ({
+  showSearch,
+  username,
+  onToggleLogin,
+  hasLogin,
+  showInfo,
+  showSettings,
+  showThemeSwitch,
+  onLogout,
+  onToggleMobileNav,
+  onOpenRegistryInfoDialog,
+  onOpenSettingsDialog,
+}) => {
+  // @ts-ignore
+  const { isDarkMode, setIsDarkMode } = useCustomTheme();
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
+  const hideLoginSection = hasLogin === false;
+
+  const { t } = useTranslation();
+
+  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(() => {
+      setIsDarkMode(!isDarkMode);
+    }, 300);
+  };
+
+  return (
+    <RightSide data-testid="header-right">
+      {showSearch === true && (
+        <HeaderToolTip
+          onClick={onToggleMobileNav}
+          title={t('search.packages')}
+          tooltipIconType={'search'}
+        />
+      )}
+
+      {showSettings === true && (
+        <HeaderToolTip
+          onClick={onOpenSettingsDialog}
+          title={t('header.settings')}
+          tooltipIconType={'settings'}
+        />
+      )}
+      {showInfo === true && (
+        <HeaderToolTip
+          onClick={onOpenRegistryInfoDialog}
+          title={t('header.registry-info')}
+          tooltipIconType={'info'}
+        />
+      )}
+      {showThemeSwitch === true && (
+        <HeaderToolTip
+          onClick={handleToggleDarkLightMode}
+          title={t('header.documentation')}
+          tooltipIconType={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/sections/Header/HeaderSettingsDialog.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable verdaccio/jsx-spread */
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import ReactMarkdown from 'react-markdown';
+import { useSelector } from 'react-redux';
+
+import { RootState, Theme } from '../../';
+import LanguageSwitch from './LanguageSwitch';
+import RegistryInfoContent from './RegistryInfoContent';
+import RegistryInfoDialog from './RegistryInfoDialog';
+
+interface Props {
+  isOpen: boolean;
+  onCloseDialog: () => void;
+}
+
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+function TabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      aria-labelledby={`simple-tab-${index}`}
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      role="tabpanel"
+      {...other}
+    >
+      {value === index && <Box sx={{ paddingTop: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+const TextContent = styled('div')<{ theme?: Theme }>(({ theme }) => ({
+  padding: '10px 0',
+  backgroundColor: theme?.palette.background.default,
+}));
+
+const HeaderSettingsDialog: React.FC<Props> = ({ onCloseDialog, isOpen }) => {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (_event, newValue) => {
+    setValue(newValue);
+  };
+  const configStore = useSelector((state: RootState) => state.configuration.config);
+  const { scope, base } = configStore;
+  const { t } = useTranslation();
+  return (
+    <RegistryInfoDialog onClose={onCloseDialog} open={isOpen} title={t('dialog.settings.title')}>
+      <Box sx={{ width: '100%' }}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <Tabs aria-label="basic tabs example" onChange={handleChange} value={value}>
+            <Tab label={t('packageManagers.title')} {...a11yProps(0)} />
+            <Tab label={t('language.title')} {...a11yProps(1)} />
+          </Tabs>
+        </Box>
+        <TabPanel index={0} value={value}>
+          <RegistryInfoContent registryUrl={base} scope={scope} />
+        </TabPanel>
+        <TabPanel index={1} value={value}>
+          <TextContent>{t('language.description')}</TextContent>
+          <LanguageSwitch />
+          <ReactMarkdown>{t('language.contribute')}</ReactMarkdown>
+        </TabPanel>
+      </Box>
+    </RegistryInfoDialog>
+  );
+};
+
+export default HeaderSettingsDialog;

package/src/sections/Header/HeaderToolTip.tsx

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