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

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

@@ -1,14 +1,12 @@
 import i18next from 'i18next';
 import isEmpty from 'lodash/isEmpty';
-import React, { useEffect, useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-
 import Dialog from 'verdaccio-ui/components/Dialog';
 import DialogContent from 'verdaccio-ui/components/DialogContent';
 
 import { LoginBody } from '../../../store/models/login';
 import { Dispatch, RootState } from '../../../store/store';
-
 import LoginDialogCloseButton from './LoginDialogCloseButton';
 import LoginDialogForm, { FormValues } from './LoginDialogForm';
 import LoginDialogHeader from './LoginDialogHeader';
@@ -70,7 +68,7 @@ const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
       onClose={onClose}
       open={open}>
       <LoginDialogCloseButton onClose={onClose} />
-      <DialogContent>
+      <DialogContent data-testid="dialogContentLogin">
         <LoginDialogHeader />
         <LoginDialogForm error={loginStore.error} onSubmit={handleDoLogin} />
       </DialogContent>

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

@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
-import CloseIcon from '@material-ui/icons/Close';
+import CloseIcon from '@mui/icons-material/Close';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-
 import DialogTitle from 'verdaccio-ui/components/DialogTitle';
 import IconButton from 'verdaccio-ui/components/IconButton';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';

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

@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 import React, { memo } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-
 import Button from 'verdaccio-ui/components/Button';
 import TextField from 'verdaccio-ui/components/TextField';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';

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

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
-import Error from '@material-ui/icons/Error';
+import Error from '@mui/icons-material/Error';
 import React, { memo } from 'react';
-
 import Box from 'verdaccio-ui/components/Box';
 import SnackbarContent from 'verdaccio-ui/components/SnackbarContent';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';

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

@@ -1,14 +1,14 @@
 import styled from '@emotion/styled';
-import CloseIcon from '@material-ui/icons/Close';
-import LockOutlined from '@material-ui/icons/LockOutlined';
+import CloseIcon from '@mui/icons-material/Close';
+import LockOutlined from '@mui/icons-material/LockOutlined';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-
 import Avatar from 'verdaccio-ui/components/Avatar';
 import Box from 'verdaccio-ui/components/Box';
 import Heading from 'verdaccio-ui/components/Heading';
 import IconButton from 'verdaccio-ui/components/IconButton';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
+
 interface Props {
   onClose?: () => void;
 }
@@ -36,7 +36,7 @@ export default LoginDialogHeader;
 const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({
   margin: theme?.spacing(1),
   backgroundColor:
-    theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
   color: theme?.palette.white,
 }));
 

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

@@ -1,6 +1,5 @@
 import React from 'react';
-
-import { screen, render, cleanup } from 'verdaccio-ui/utils/test-react-testing-library';
+import { cleanup, render, screen } from 'verdaccio-ui/utils/test-react-testing-library';
 
 import RegistryInfoContent from './RegistryInfoContent';
 

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

@@ -1,21 +1,20 @@
 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 ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 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,
+  getCLISetRegistry,
 } from 'verdaccio-ui/utils/cli-utils';
 import { NODE_MANAGER } from 'verdaccio-ui/utils/constants';
 

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

@@ -1,11 +1,10 @@
 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 { Content, Title } from './styles';
 import { Props } from './types';
 
 const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose }) => {

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

@@ -1,5 +1,4 @@
 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';

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

@@ -1,10 +1,15 @@
 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 {
+  fireEvent,
+  renderWithStore,
+  screen,
+  waitFor,
+} from 'verdaccio-ui/utils/test-react-testing-library';
 
 import { store } from '../../../store/store';
+import Search from './Search';
 
 jest.mock('lodash/debounce', () =>
   jest.fn((fn) => {
@@ -13,8 +18,6 @@ jest.mock('lodash/debounce', () =>
   })
 );
 
-import Search from './Search';
-
 /* eslint-disable verdaccio/jsx-spread */
 const ComponentToBeRendered: React.FC = () => (
   <Router>
@@ -62,12 +65,12 @@ describe('<Search /> component', () => {
 
     const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
 
-    expect(suggestionsElements).toHaveLength(2);
+    expect(suggestionsElements).toHaveLength(1);
     expect(api.request).toHaveBeenCalledTimes(1);
   });
 
   test('onBlur: should cancel all search requests', async () => {
-    const { getByPlaceholderText, getByRole, getAllByText } = renderWithStore(
+    const { getByPlaceholderText, getAllByText } = renderWithStore(
       <ComponentToBeRendered />,
       store
     );
@@ -79,53 +82,41 @@ describe('<Search /> component', () => {
     expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
 
     const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
-    expect(suggestionsElements).toHaveLength(2);
+    expect(suggestionsElements).toHaveLength(1);
     expect(api.request).toHaveBeenCalledTimes(1);
 
     fireEvent.blur(autoCompleteInput);
-    const listBoxElement = await waitFor(() => getByRole('listbox'));
-    expect(listBoxElement).toBeEmptyDOMElement();
+    const listBoxElement = screen.queryAllByRole('listbox');
+    expect(listBoxElement).toHaveLength(0);
   });
 
   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 { getByPlaceholderText } = 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(autoCompleteInput).toHaveAttribute('value', ' ');
+    const listBoxElement = screen.queryAllByRole('listbox');
+    expect(listBoxElement).toHaveLength(0);
     expect(api.request).toHaveBeenCalledTimes(0);
   });
 
   test('handleSearch: when method is not type method', async () => {
-    const { getByPlaceholderText, getByRole } = renderWithStore(<ComponentToBeRendered />, store);
+    const { getByPlaceholderText } = 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(autoCompleteInput).toHaveAttribute('value', ' ');
+    const listBoxElement = screen.queryAllByRole('listbox');
+    expect(listBoxElement).toHaveLength(0);
     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(
+    const { getByPlaceholderText, getAllByText } = renderWithStore(
       <ComponentToBeRendered />,
       store
     );
@@ -136,17 +127,17 @@ describe('<Search /> component', () => {
     expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
 
     const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
-    expect(suggestionsElements).toHaveLength(2);
+    expect(suggestionsElements).toHaveLength(1);
 
     fireEvent.change(autoCompleteInput, { target: { value: ' ' } });
-    const listBoxElement = await waitFor(() => getByRole('listbox'));
-    expect(listBoxElement.innerHTML).toEqual('');
-
+    const listBoxElement = screen.queryAllByRole('listbox');
+    // // when the page redirects, the list box should be empty again
+    expect(listBoxElement).toHaveLength(0);
     expect(api.request).toHaveBeenCalledTimes(1);
   });
 
   test('handleClickSearch: should change the window location on click or return key', async () => {
-    const { getByPlaceholderText, getAllByText, getByRole } = renderWithStore(
+    const { getByPlaceholderText, getAllByText } = renderWithStore(
       <ComponentToBeRendered />,
       store
     );
@@ -157,12 +148,12 @@ describe('<Search /> component', () => {
     expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
 
     const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
-    expect(suggestionsElements).toHaveLength(2);
-
+    // console.log('suggestionsElements', suggestionsElements);
+    expect(suggestionsElements).toHaveLength(1);
     // 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('');
+    fireEvent.click(suggestionsElements[0]);
+    const listBoxElement = screen.queryAllByRole('listbox');
+    // // when the page redirects, the list box should be empty again
+    expect(listBoxElement).toHaveLength(0);
   });
 });

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

@@ -1,15 +1,13 @@
 import debounce from 'lodash/debounce';
-import React, { useState, FormEvent, useCallback } from 'react';
-import { SuggestionSelectedEventData } from 'react-autosuggest';
+import React, { useCallback } from 'react';
 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 { SearchResultWeb } from '@verdaccio/types';
 
-import SearchAdornment from './SearchAdornment';
+import { Dispatch, RootState } from '../../../store/store';
 
 const CONSTANTS = {
   API_DELAY: 300,
@@ -18,10 +16,7 @@ const CONSTANTS = {
 
 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 { suggestions } = useSelector((state: RootState) => state.search);
   const isLoading = useSelector((state: RootState) => state?.loading?.models.search);
   const dispatch = useDispatch<Dispatch>();
   /**
@@ -29,6 +24,7 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
    */
   const cancelAllSearchRequests = useCallback(() => {
     dispatch.search.clearRequestQueue();
+    dispatch.search.saveSearch({ suggestions: [] });
   }, [dispatch]);
 
   /**
@@ -36,7 +32,7 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
    * and set the API state parameters to default boolean values.
    */
   const handleOnBlur = useCallback(
-    (event: FormEvent<HTMLInputElement>) => {
+    (event: React.SyntheticEvent) => {
       // stops event bubbling
       event.stopPropagation();
       cancelAllSearchRequests();
@@ -44,51 +40,16 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
     [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 => {
+    (event: React.SyntheticEvent, value: SearchResultWeb, reason: string): void => {
       // stops event bubbling
       event.stopPropagation();
-      switch (method) {
-        case 'click':
-        case 'enter':
-          setSearch('');
-          history.push(`/-/web/detail/${suggestionValue}`);
+      switch (reason) {
+        case 'selectOption':
+          history.push(`/-/web/detail/${value.name}`);
           break;
       }
     },
@@ -101,25 +62,21 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
    */
   const handleFetchPackages = useCallback(
     ({ value }: { value: string }) => {
-      dispatch.search.getSuggestions({ value });
+      if (value?.trim() !== '') {
+        dispatch.search.getSuggestions({ value });
+      }
     },
     [dispatch]
   );
 
   return (
     <AutoComplete
-      onBlur={handleOnBlur}
-      onChange={handleSearch}
-      onCleanSuggestions={handlePackagesClearRequested}
-      onClick={handleClickSearch}
+      onCleanSuggestions={handleOnBlur}
+      onSelectItem={handleClickSearch}
       onSuggestionsFetch={debounce(handleFetchPackages, CONSTANTS.API_DELAY)}
       placeholder={t('search.packages')}
-      startAdornment={<SearchAdornment />}
       suggestions={suggestions}
-      suggestionsError={isError}
-      suggestionsLoaded={loaded}
       suggestionsLoading={isLoading}
-      value={search}
     />
   );
 };