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

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

@@ -1,16 +1,12 @@
 import i18next from 'i18next';
 import isEmpty from 'lodash/isEmpty';
-import React, { useState, useContext, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-
+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 { useAPI, LoginBody } from 'verdaccio-ui/providers/API/APIProvider';
-import { LoginError } from 'verdaccio-ui/utils/login';
-import storage from 'verdaccio-ui/utils/storage';
-
-import AppContext from '../../../App/AppContext';
 
+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';
@@ -21,62 +17,48 @@ interface Props {
 }
 
 const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
-  const { t } = useTranslation();
-  const appContext = useContext(AppContext);
-  const { doLogin } = useAPI();
-
+  const loginStore = useSelector((state: RootState) => state.login);
+  const dispatch = useDispatch<Dispatch>();
   const makeLogin = useCallback(
-    async (username?: string, password?: string): Promise<LoginBody> => {
+    async (username?: string, password?: string): Promise<LoginBody | void> => {
       // checks isEmpty
       if (isEmpty(username) || isEmpty(password)) {
-        const error = {
+        dispatch.login.addError({
           type: 'error',
           description: i18next.t('form-validation.username-or-password-cant-be-empty'),
-        };
-        return { error };
+        });
+        return;
       }
 
       try {
-        const response: LoginBody = await doLogin(username as string, password as string);
-
-        return response;
+        dispatch.login.getUser({ username, password });
+        // const response: LoginBody = await doLogin(username as string, password as string);
+        dispatch.login.clearError();
       } catch (e: any) {
-        // eslint-disable-next-line no-console
-        console.error('login error', e.message);
-        const error = {
+        dispatch.login.addError({
           type: 'error',
           description: i18next.t('form-validation.unable-to-sign-in'),
-        };
-        return { error };
+        });
+        // eslint-disable-next-line no-console
+        console.error('login error', e.message);
       }
     },
-    [doLogin]
+    [dispatch]
   );
 
-  if (!appContext) {
-    throw Error(t('app-context-not-correct-used'));
-  }
-
-  const [error, setError] = useState<LoginError>();
-
   const handleDoLogin = useCallback(
     async (data: FormValues) => {
-      const { username, token, error } = await makeLogin(data.username, data.password);
-
-      if (error) {
-        setError(error);
-      }
-
-      if (username && token) {
-        storage.setItem('username', username);
-        storage.setItem('token', token);
-        appContext.setUser({ username });
-        onClose();
-      }
+      await makeLogin(data.username, data.password);
     },
-    [appContext, onClose, makeLogin]
+    [makeLogin]
   );
 
+  useEffect(() => {
+    if (loginStore.token && typeof loginStore.error === 'undefined') {
+      onClose();
+    }
+  }, [loginStore, onClose]);
+
   return (
     <Dialog
       data-testid="login--dialog"
@@ -86,9 +68,9 @@ const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
       onClose={onClose}
       open={open}>
       <LoginDialogCloseButton onClose={onClose} />
-      <DialogContent>
+      <DialogContent data-testid="dialogContentLogin">
         <LoginDialogHeader />
-        <LoginDialogForm error={error} onSubmit={handleDoLogin} />
+        <LoginDialogForm error={loginStore.error} onSubmit={handleDoLogin} />
       </DialogContent>
     </Dialog>
   );

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';
 
@@ -18,7 +17,6 @@ describe('<RegistryInfoContent /> component', () => {
     const props = { registryUrl: 'http://localhost:4872', scope: '@' };
     render(<RegistryInfoContent registryUrl={props.registryUrl} scope={props.scope} />);
 
-    screen.debug();
     expect(screen.getByText('pnpm set @:registry http://localhost:4872')).toBeInTheDocument();
     expect(screen.getByText('pnpm adduser --registry http://localhost:4872')).toBeInTheDocument();
     expect(

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,8 +1,15 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-
 import api from 'verdaccio-ui/providers/API/api';
-import { render, 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) => {
@@ -11,8 +18,6 @@ jest.mock('lodash/debounce', () =>
   })
 );
 
-import Search from './Search';
-
 /* eslint-disable verdaccio/jsx-spread */
 const ComponentToBeRendered: React.FC = () => (
   <Router>
@@ -41,12 +46,15 @@ describe('<Search /> component', () => {
   });
 
   test('should load the component in default state', () => {
-    const { container } = render(<ComponentToBeRendered />);
+    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 } = render(<ComponentToBeRendered />);
+    const { getByPlaceholderText, getAllByText } = renderWithStore(
+      <ComponentToBeRendered />,
+      store
+    );
 
     const autoCompleteInput = getByPlaceholderText('Search Packages');
 
@@ -57,12 +65,15 @@ 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 } = render(<ComponentToBeRendered />);
+    const { getByPlaceholderText, getAllByText } = renderWithStore(
+      <ComponentToBeRendered />,
+      store
+    );
 
     const autoCompleteInput = getByPlaceholderText('Search Packages');
 
@@ -71,53 +82,44 @@ 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 } = render(<ComponentToBeRendered />);
+    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 } = render(<ComponentToBeRendered />);
+    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 } = render(<ComponentToBeRendered />);
-    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 } = render(<ComponentToBeRendered />);
+    const { getByPlaceholderText, getAllByText } = renderWithStore(
+      <ComponentToBeRendered />,
+      store
+    );
     const autoCompleteInput = getByPlaceholderText('Search Packages');
 
     fireEvent.focus(autoCompleteInput);
@@ -125,17 +127,20 @@ 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 } = render(<ComponentToBeRendered />);
+    const { getByPlaceholderText, getAllByText } = renderWithStore(
+      <ComponentToBeRendered />,
+      store
+    );
     const autoCompleteInput = getByPlaceholderText('Search Packages');
 
     fireEvent.focus(autoCompleteInput);
@@ -143,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,13 +1,13 @@
 import debounce from 'lodash/debounce';
-import React, { useState, FormEvent, useCallback, useRef, useEffect } 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 { useAPI } from 'verdaccio-ui/providers/API/APIProvider';
 
-import SearchAdornment from './SearchAdornment';
+import { SearchResultWeb } from '@verdaccio/types';
+
+import { Dispatch, RootState } from '../../../store/store';
 
 const CONSTANTS = {
   API_DELAY: 300,
@@ -16,87 +16,40 @@ const CONSTANTS = {
 
 const Search: React.FC<RouteComponentProps> = ({ history }) => {
   const { t } = useTranslation();
-  const [suggestions, setSuggestions] = useState([]);
-  const [loaded, setLoaded] = useState(false);
-  const [search, setSearch] = useState('');
-  const [error, setError] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const mountedRef = useRef(true);
-  const [requestList, setRequestList] = useState<{ abort: () => void }[]>([]);
-  const { callSearch } = useAPI();
-
+  const { 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(() => {
-    requestList.forEach((request) => request.abort());
-    setRequestList([]);
-  }, [requestList, setRequestList]);
+    dispatch.search.clearRequestQueue();
+    dispatch.search.saveSearch({ suggestions: [] });
+  }, [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>) => {
+    (event: React.SyntheticEvent) => {
       // stops event bubbling
       event.stopPropagation();
-      setLoaded(false);
-      setLoading(false);
-      setError(false);
       cancelAllSearchRequests();
     },
-    [setLoaded, setLoading, cancelAllSearchRequests, setError]
-  );
-
-  /**
-   * 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();
-
-        setLoading(true);
-        setError(false);
-        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(() => {
-    setSuggestions([]);
-  }, [setSuggestions]);
-
   /**
    * 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;
       }
     },
@@ -108,60 +61,22 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
    * For AbortController see: https://developer.mozilla.org/en-US/docs/Web/API/AbortController
    */
   const handleFetchPackages = useCallback(
-    async ({ value }: { value: string }) => {
-      try {
-        const controller = new window.AbortController();
-        const signal = controller.signal;
-        if (!mountedRef.current) {
-          return null;
-        }
-        // Keep track of search requests.
-        setRequestList([...requestList, controller]);
-        const suggestions = await callSearch(value, signal);
-        // FIXME: Argument of type 'unknown' is not assignable to parameter of type 'SetStateAction<never[]>'
-        setSuggestions(suggestions as any);
-        setLoaded(true);
-      } catch (error: any) {
-        /**
-         * AbortError is not the API error.
-         * It means browser has cancelled the API request.
-         */
-        if (error.name === CONSTANTS.ABORT_ERROR) {
-          setError(false);
-          setLoaded(false);
-        } else {
-          setError(true);
-          setLoaded(false);
-        }
-      } finally {
-        if (mountedRef.current) {
-          setLoading(false);
-        }
+    ({ value }: { value: string }) => {
+      if (value?.trim() !== '') {
+        dispatch.search.getSuggestions({ value });
       }
     },
-    [requestList, setRequestList, setSuggestions, setLoaded, setError, setLoading, callSearch]
+    [dispatch]
   );
 
-  useEffect(() => {
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-
   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={error}
-      suggestionsLoaded={loaded}
-      suggestionsLoading={loading}
-      value={search}
+      suggestionsLoading={isLoading}
     />
   );
 };