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

package/src/App/Header/RegistryInfoContent/RegistryInfoContent.tsx

@@ -0,0 +1,155 @@
+import styled from '@emotion/styled';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import Box from '@material-ui/core/Box';
+import Link from '@material-ui/core/Link';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import CopyToClipBoard from 'verdaccio-ui/components/CopyToClipBoard';
+import { useConfig } from 'verdaccio-ui/providers/config';
+import {
+  getCLISetRegistry,
+  getCLIChangePassword,
+  getCLISetConfigRegistry,
+} from 'verdaccio-ui/utils/cli-utils';
+import { NODE_MANAGER } from 'verdaccio-ui/utils/constants';
+
+const renderNpmTab = (scope: string, registryUrl: string): JSX.Element => {
+  return (
+    <Box display="flex" flexDirection="column" p={1}>
+      <CopyToClipBoard
+        text={getCLISetConfigRegistry(`${NODE_MANAGER.npm} set`, scope, registryUrl)}
+      />
+      <CopyToClipBoard text={getCLISetRegistry(`${NODE_MANAGER.npm} adduser`, registryUrl)} />
+      <CopyToClipBoard text={getCLIChangePassword(NODE_MANAGER.npm, registryUrl)} />
+    </Box>
+  );
+};
+
+const renderPnpmTab = (scope: string, registryUrl: string): JSX.Element => {
+  return (
+    <Box display="flex" flexDirection="column" p={1}>
+      <CopyToClipBoard
+        text={getCLISetConfigRegistry(`${NODE_MANAGER.pnpm} set`, scope, registryUrl)}
+      />
+      <CopyToClipBoard text={getCLISetRegistry(`${NODE_MANAGER.pnpm} adduser`, registryUrl)} />
+      <CopyToClipBoard text={getCLIChangePassword(NODE_MANAGER.pnpm, registryUrl)} />
+    </Box>
+  );
+};
+
+const renderYarnTab = (scope: string, registryUrl: string): JSX.Element => {
+  return (
+    <Box display="flex" flexDirection="column" p={1}>
+      <CopyToClipBoard
+        text={getCLISetConfigRegistry(`${NODE_MANAGER.yarn} config set`, scope, registryUrl)}
+      />
+    </Box>
+  );
+};
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+  },
+  heading: {
+    fontSize: theme.typography.pxToRem(15),
+    fontWeight: theme.typography.fontWeightBold,
+  },
+}));
+
+export const AccordionContainer = styled('div')({
+  padding: 30,
+  paddingLeft: 0,
+  paddingRight: 0,
+});
+
+export const CommandContainer = styled('div')({
+  padding: 5,
+});
+
+export const LinkContainer = styled('div')({
+  margin: 10,
+  marginLeft: 0,
+});
+
+export type Props = {
+  registryUrl: string;
+  scope: string;
+};
+
+const RegistryInfoContent: FC<Props> = ({ scope, registryUrl }) => {
+  const { t } = useTranslation();
+  const classes = useStyles();
+  const { configOptions } = useConfig();
+
+  const hasNpm = configOptions?.pkgManagers?.includes('npm');
+  const hasYarn = configOptions?.pkgManagers?.includes('yarn');
+  const hasPnpm = configOptions?.pkgManagers?.includes('pnpm');
+  const hasPkgManagers = hasNpm | hasPnpm | hasYarn;
+  if (!hasPkgManagers || !scope || !registryUrl) {
+    return <AccordionContainer>{t('header.registry-no-conf')}</AccordionContainer>;
+  }
+
+  return hasPkgManagers ? (
+    <AccordionContainer>
+      {hasNpm && (
+        <Accordion>
+          <AccordionSummary
+            aria-controls="panel1a-content"
+            expandIcon={<ExpandMoreIcon />}
+            id="panel1a-header">
+            <Typography className={classes.heading}>{'npm'}</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <CommandContainer data-testid={'tab-content'}>
+              {renderNpmTab(scope, registryUrl)}
+            </CommandContainer>
+          </AccordionDetails>
+        </Accordion>
+      )}
+      {hasYarn && (
+        <Accordion>
+          <AccordionSummary
+            aria-controls="panel2a-content"
+            expandIcon={<ExpandMoreIcon />}
+            id="panel2a-header">
+            <Typography className={classes.heading}>{'yarn'}</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <CommandContainer data-testid={'tab-content'}>
+              {renderYarnTab(scope, registryUrl)}
+            </CommandContainer>
+          </AccordionDetails>
+        </Accordion>
+      )}
+      {hasPnpm && (
+        <Accordion>
+          <AccordionSummary
+            aria-controls="panel3a-content"
+            expandIcon={<ExpandMoreIcon />}
+            id="panel3a-header">
+            {'pnpm'}
+          </AccordionSummary>
+          <AccordionDetails>
+            <CommandContainer data-testid={'tab-content'}>
+              {renderPnpmTab(scope, registryUrl)}
+            </CommandContainer>
+          </AccordionDetails>
+        </Accordion>
+      )}
+      <LinkContainer>
+        <Link href="https://verdaccio.org/docs/en/cli-registry" target="_blank">
+          <Typography>{t('header.registry-info-link')}</Typography>
+        </Link>
+      </LinkContainer>
+    </AccordionContainer>
+  ) : null;
+};
+
+export default RegistryInfoContent;

package/src/App/Header/RegistryInfoContent/index.ts

@@ -0,0 +1 @@
+export { default } from './RegistryInfoContent';

package/src/App/Header/RegistryInfoDialog/RegistryInfoDialog.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Button from 'verdaccio-ui/components/Button';
+import Dialog from 'verdaccio-ui/components/Dialog';
+import DialogActions from 'verdaccio-ui/components/DialogActions';
+
+import { Title, Content } from './styles';
+import { Props } from './types';
+
+const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose }) => {
+  const { t } = useTranslation();
+  return (
+    <Dialog
+      data-testid={'registryInfo--dialog'}
+      id="registryInfo--dialog-container"
+      onClose={onClose}
+      open={open}>
+      <Title disableTypography={true}>{t('dialog.registry-info.title')}</Title>
+      <Content>{children}</Content>
+      <DialogActions>
+        <Button color="inherit" id="registryInfo--dialog-close" onClick={onClose}>
+          {t('button.close')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default RegistryInfoDialog;

package/src/App/Header/RegistryInfoDialog/index.ts

@@ -0,0 +1 @@
+export { default } from './RegistryInfoDialog';

package/src/App/Header/RegistryInfoDialog/styles.ts

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+import DialogContent from 'verdaccio-ui/components/DialogContent';
+import DialogTitle from 'verdaccio-ui/components/DialogTitle';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+export const Title = styled(DialogTitle)<{ theme?: Theme }>((props) => ({
+  backgroundColor: props.theme?.palette.primary.main,
+  color: props.theme?.palette.white,
+  fontSize: props.theme?.fontSize.lg,
+}));
+
+export const Content = styled(DialogContent)<{ theme?: Theme }>(({ theme }) => ({
+  padding: '0 24px',
+  backgroundColor: theme?.palette.background.default,
+}));

package/src/App/Header/RegistryInfoDialog/types.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export interface Props {
+  children: ReactNode;
+  open: boolean;
+  onClose: () => void;
+}

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

@@ -0,0 +1,168 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import api from 'verdaccio-ui/providers/API/api';
+import { renderWithStore, fireEvent, waitFor } from 'verdaccio-ui/utils/test-react-testing-library';
+
+import { store } from '../../../store/store';
+
+jest.mock('lodash/debounce', () =>
+  jest.fn((fn) => {
+    fn.cancel = jest.fn();
+    return fn;
+  })
+);
+
+import Search from './Search';
+
+/* eslint-disable verdaccio/jsx-spread */
+const ComponentToBeRendered: React.FC = () => (
+  <Router>
+    <Search />
+  </Router>
+);
+
+describe('<Search /> component', () => {
+  beforeEach(() => {
+    jest.spyOn(api, 'request').mockImplementation(() =>
+      Promise.resolve([
+        {
+          name: 'verdaccio-ui/types',
+          version: '8.4.2',
+        },
+        {
+          name: 'verdaccio',
+          version: '4.3.5',
+        },
+      ])
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('should load the component in default state', () => {
+    const { container } = renderWithStore(<ComponentToBeRendered />, store);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('handleSearch: when user type package name in search component, show suggestions', async () => {
+    const { getByPlaceholderText, getAllByText } = renderWithStore(
+      <ComponentToBeRendered />,
+      store
+    );
+
+    const autoCompleteInput = getByPlaceholderText('Search Packages');
+
+    fireEvent.focus(autoCompleteInput);
+    fireEvent.change(autoCompleteInput, { target: { value: 'verdaccio' } });
+
+    expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
+
+    const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
+
+    expect(suggestionsElements).toHaveLength(2);
+    expect(api.request).toHaveBeenCalledTimes(1);
+  });
+
+  test('onBlur: should cancel all search requests', async () => {
+    const { getByPlaceholderText, getByRole, getAllByText } = renderWithStore(
+      <ComponentToBeRendered />,
+      store
+    );
+
+    const autoCompleteInput = getByPlaceholderText('Search Packages');
+
+    fireEvent.focus(autoCompleteInput);
+    fireEvent.change(autoCompleteInput, { target: { value: 'verdaccio' } });
+    expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
+
+    const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
+    expect(suggestionsElements).toHaveLength(2);
+    expect(api.request).toHaveBeenCalledTimes(1);
+
+    fireEvent.blur(autoCompleteInput);
+    const listBoxElement = await waitFor(() => getByRole('listbox'));
+    expect(listBoxElement).toBeEmptyDOMElement();
+  });
+
+  test('handleSearch: cancel all search requests when there is no value in search component with type method', async () => {
+    const { getByPlaceholderText, getByRole } = renderWithStore(<ComponentToBeRendered />, store);
+
+    const autoCompleteInput = getByPlaceholderText('Search Packages');
+    fireEvent.focus(autoCompleteInput);
+    fireEvent.change(autoCompleteInput, { target: { value: ' ', method: 'type' } });
+    expect(autoCompleteInput).toHaveAttribute('value', '');
+    const listBoxElement = await waitFor(() => getByRole('listbox'));
+    expect(listBoxElement.innerHTML).toEqual('');
+    expect(api.request).toHaveBeenCalledTimes(0);
+  });
+
+  test('handleSearch: when method is not type method', async () => {
+    const { getByPlaceholderText, getByRole } = renderWithStore(<ComponentToBeRendered />, store);
+
+    const autoCompleteInput = getByPlaceholderText('Search Packages');
+
+    fireEvent.focus(autoCompleteInput);
+    fireEvent.change(autoCompleteInput, { target: { value: ' ', method: 'click' } });
+    expect(autoCompleteInput).toHaveAttribute('value', '');
+    const listBoxElement = await waitFor(() => getByRole('listbox'));
+    expect(listBoxElement.innerHTML).toEqual('');
+    expect(api.request).toHaveBeenCalledTimes(0);
+  });
+
+  test('handleSearch: loading is been displayed', async () => {
+    const { getByPlaceholderText, getByText } = renderWithStore(<ComponentToBeRendered />, store);
+    const autoCompleteInput = getByPlaceholderText('Search Packages');
+
+    fireEvent.focus(autoCompleteInput);
+    fireEvent.change(autoCompleteInput, { target: { value: 'verdaccio' } });
+    expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
+
+    const loadingElement = await waitFor(() => getByText('Loading...'));
+    expect(loadingElement).toBeTruthy();
+  });
+
+  test('handlePackagesClearRequested: should clear suggestions', async () => {
+    const { getByPlaceholderText, getAllByText, getByRole } = renderWithStore(
+      <ComponentToBeRendered />,
+      store
+    );
+    const autoCompleteInput = getByPlaceholderText('Search Packages');
+
+    fireEvent.focus(autoCompleteInput);
+    fireEvent.change(autoCompleteInput, { target: { value: 'verdaccio' } });
+    expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
+
+    const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
+    expect(suggestionsElements).toHaveLength(2);
+
+    fireEvent.change(autoCompleteInput, { target: { value: ' ' } });
+    const listBoxElement = await waitFor(() => getByRole('listbox'));
+    expect(listBoxElement.innerHTML).toEqual('');
+
+    expect(api.request).toHaveBeenCalledTimes(1);
+  });
+
+  test('handleClickSearch: should change the window location on click or return key', async () => {
+    const { getByPlaceholderText, getAllByText, getByRole } = renderWithStore(
+      <ComponentToBeRendered />,
+      store
+    );
+    const autoCompleteInput = getByPlaceholderText('Search Packages');
+
+    fireEvent.focus(autoCompleteInput);
+    fireEvent.change(autoCompleteInput, { target: { value: 'verdaccio' } });
+    expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
+
+    const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
+    expect(suggestionsElements).toHaveLength(2);
+
+    // click on the second suggestion
+    fireEvent.click(suggestionsElements[1]);
+    const listBoxElement = await waitFor(() => getByRole('listbox'));
+    // when the page redirects, the list box should be empty again
+    expect(listBoxElement.innerHTML).toEqual('');
+  });
+});

package/src/App/Header/Search/Search.tsx

@@ -0,0 +1,127 @@
+import debounce from 'lodash/debounce';
+import React, { useState, FormEvent, useCallback } from 'react';
+import { SuggestionSelectedEventData } from 'react-autosuggest';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { RouteComponentProps, withRouter } from 'react-router';
+
+import AutoComplete from 'verdaccio-ui/components/AutoComplete';
+
+import { Dispatch, RootState } from '../../../store/store';
+
+import SearchAdornment from './SearchAdornment';
+
+const CONSTANTS = {
+  API_DELAY: 300,
+  ABORT_ERROR: 'AbortError',
+};
+
+const Search: React.FC<RouteComponentProps> = ({ history }) => {
+  const { t } = useTranslation();
+  const [loaded, setLoaded] = useState(false);
+  const [search, setSearch] = useState('');
+  // const mountedRef = useRef(true);
+  const { isError, suggestions } = useSelector((state: RootState) => state.search);
+  const isLoading = useSelector((state: RootState) => state?.loading?.models.search);
+  const dispatch = useDispatch<Dispatch>();
+  /**
+   * Cancel all the requests which are in pending state.
+   */
+  const cancelAllSearchRequests = useCallback(() => {
+    dispatch.search.clearRequestQueue();
+  }, [dispatch]);
+
+  /**
+   * As user focuses out from input, we cancel all the request from requestList
+   * and set the API state parameters to default boolean values.
+   */
+  const handleOnBlur = useCallback(
+    (event: FormEvent<HTMLInputElement>) => {
+      // stops event bubbling
+      event.stopPropagation();
+      cancelAllSearchRequests();
+    },
+    [cancelAllSearchRequests]
+  );
+
+  /**
+   * onChange method for the input element.
+   */
+  const handleSearch = useCallback(
+    (event: FormEvent<HTMLInputElement>, { newValue, method }) => {
+      // stops event bubbling
+      event.stopPropagation();
+      if (method === 'type') {
+        const value = newValue.trim();
+        setSearch(value);
+        setLoaded(false);
+        /**
+         * A use case where User keeps adding and removing value in input field,
+         * so we cancel all the existing requests when input is empty.
+         */
+        if (value?.length === 0) {
+          cancelAllSearchRequests();
+        }
+      }
+    },
+    [cancelAllSearchRequests]
+  );
+
+  /**
+   * Cancel all the request from list and make request list empty.
+   */
+  const handlePackagesClearRequested = useCallback(() => {
+    dispatch.search.saveSearch({ suggestions: [] });
+  }, [dispatch]);
+
+  /**
+   * When an user select any package by clicking or pressing return key.
+   */
+  const handleClickSearch = useCallback(
+    (
+      event: FormEvent<HTMLInputElement>,
+      { suggestionValue, method }: SuggestionSelectedEventData<unknown>
+    ): void | undefined => {
+      // stops event bubbling
+      event.stopPropagation();
+      switch (method) {
+        case 'click':
+        case 'enter':
+          setSearch('');
+          history.push(`/-/web/detail/${suggestionValue}`);
+          break;
+      }
+    },
+    [history]
+  );
+
+  /**
+   * Fetch packages from API.
+   * For AbortController see: https://developer.mozilla.org/en-US/docs/Web/API/AbortController
+   */
+  const handleFetchPackages = useCallback(
+    ({ value }: { value: string }) => {
+      dispatch.search.getSuggestions({ value });
+    },
+    [dispatch]
+  );
+
+  return (
+    <AutoComplete
+      onBlur={handleOnBlur}
+      onChange={handleSearch}
+      onCleanSuggestions={handlePackagesClearRequested}
+      onClick={handleClickSearch}
+      onSuggestionsFetch={debounce(handleFetchPackages, CONSTANTS.API_DELAY)}
+      placeholder={t('search.packages')}
+      startAdornment={<SearchAdornment />}
+      suggestions={suggestions}
+      suggestionsError={isError}
+      suggestionsLoaded={loaded}
+      suggestionsLoading={isLoading}
+      value={search}
+    />
+  );
+};
+
+export default withRouter(Search);

package/src/App/Header/Search/SearchAdornment.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+import Search from '@material-ui/icons/Search';
+import React from 'react';
+
+import InputAdornment from 'verdaccio-ui/components/InputAdornment';
+import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
+const StyledInputAdornment = styled(InputAdornment)<{ theme?: Theme }>((props) => ({
+  color: props.theme?.palette.white,
+}));
+
+const SearchAdornment: React.FC = () => (
+  <StyledInputAdornment position={'start'}>
+    <Search />
+  </StyledInputAdornment>
+);
+
+export default SearchAdornment;

package/src/App/Header/Search/__snapshots__/Search.test.tsx.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Search /> component should load the component in default state 1`] = `
+.emotion-0 {
+  width: 100%;
+  height: 32px;
+  position: relative;
+  z-index: 1;
+}
+
+.emotion-2 .MuiInputBase-root:before {
+  content: '';
+  border: none;
+}
+
+.emotion-2 .MuiInputBase-root:after {
+  border-color: #fff;
+}
+
+.emotion-2 .MuiInputBase-root:hover:before {
+  content: none;
+}
+
+.emotion-2 .MuiInputBase-root:hover:after {
+  content: none;
+  -webkit-transform: scaleX(1);
+  -ms-transform: scaleX(1);
+  transform: scaleX(1);
+}
+
+@media screen and (min-width:768px) {
+  .emotion-2 .MuiInputBase-root:hover:after {
+    content: '';
+  }
+}
+
+@media screen and (min-width:768px) {
+  .emotion-2 .MuiInputBase-input {
+    color: #fff;
+  }
+}
+
+.emotion-4 {
+  color: #fff;
+}
+
+.emotion-6 {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+<div
+  class="emotion-0 emotion-1"
+>
+  <div
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-owns="react-autowhatever-1"
+    class="react-autosuggest__container"
+    role="combobox"
+  >
+    <div
+      aria-autocomplete="list"
+      aria-controls="react-autowhatever-1"
+      class="MuiFormControl-root MuiTextField-root react-autosuggest__input emotion-2 emotion-3 MuiFormControl-fullWidth"
+    >
+      <div
+        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
+      >
+        <div
+          class="MuiInputAdornment-root emotion-4 emotion-5 MuiInputAdornment-positionStart"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+            />
+          </svg>
+        </div>
+        <input
+          aria-invalid="false"
+          autocomplete="off"
+          class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart"
+          placeholder="Search Packages"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+    <div
+      class="MuiPaper-root react-autosuggest__suggestions-container emotion-6 emotion-7 MuiPaper-elevation1"
+      id="react-autowhatever-1"
+      role="listbox"
+    />
+  </div>
+</div>
+`;

package/src/App/Header/Search/index.ts

@@ -0,0 +1 @@
+export { default } from './Search';

package/src/App/Header/index.ts

@@ -0,0 +1 @@
+export { default } from './Header';