update to react17 and other dependencies on ui (#2295)

.changeset/few-mangos-grow.md

@@ -0,0 +1,5 @@
+---
+'@verdaccio/ui-theme': minor
+---
+
+upgrade to react@17 and other dependencies

packages/plugins/ui-theme/jest/expect-setup.js

@@ -1 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';

packages/plugins/ui-theme/jest/jest.config.js

@@ -12,7 +12,7 @@ module.exports = Object.assign({}, config, {
   moduleFileExtensions: ['js', 'ts', 'tsx'],
   testURL: 'http://localhost',
   rootDir: '..',
-  setupFilesAfterEnv: ['<rootDir>/jest/expect-setup.js'],
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
   setupFiles: ['<rootDir>/jest/setup.ts'],
   transformIgnorePatterns: ['<rootDir>/node_modules/(?!react-syntax-highlighter)'],
   modulePathIgnorePatterns: [

packages/plugins/ui-theme/package.json

@@ -3,7 +3,7 @@
   "version": "6.0.0-6-next.8",
   "description": "Verdaccio User Interface",
   "author": {
-    "name": "Verdaccio Core Team",
+    "name": "Verdaccio Contributors",
     "email": "verdaccio.npm@gmail.com"
   },
   "repository": {
@@ -18,17 +18,17 @@
   },
   "devDependencies": {
     "@emotion/core": "10.1.1",
-    "@emotion/jest": "^11.1.0",
+    "@emotion/jest": "^11.3.0",
     "@emotion/styled": "10.0.27",
     "@emotion/styled-base": "^10.0.31",
     "@htmllinter/basic-config": "^0.5.1",
     "@htmllinter/core": "^0.5.1",
     "@material-ui/core": "4.11.2",
     "@material-ui/icons": "4.11.2",
-    "@material-ui/styles": "^4.11.2",
+    "@material-ui/styles": "^4.11.4",
-    "@testing-library/dom": "^7.29.0",
+    "@testing-library/dom": "7.31.2",
-    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/jest-dom": "5.14.1",
-    "@testing-library/react": "10.4.9",
+    "@testing-library/react": "11.2.7",
     "@verdaccio/node-api": "workspace:6.0.0-6-next.17",
     "autosuggest-highlight": "3.1.1",
     "babel-loader": "^8.2.2",
@@ -41,35 +41,33 @@
     "emotion-theming": "10.0.27",
     "file-loader": "5.1.0",
     "friendly-errors-webpack-plugin": "1.7.0",
-    "get-stdin": "7.0.0",
     "github-markdown-css": "3.0.1",
-    "harmony-reflect": "^1.6.1",
+    "harmony-reflect": "^1.6.2",
     "history": "^4.10.1",
     "html-webpack-plugin": "5.3.1",
-    "i18next": "^19.8.4",
+    "i18next": "^19.9.2",
     "in-publish": "2.0.1",
     "js-base64": "2.5.1",
     "js-yaml": "3.14.0",
     "lint-staged": "9.5.0",
     "localstorage-memory": "1.0.3",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^1.3.3",
+    "mini-css-extract-plugin": "^1.6.0",
     "mutationobserver-shim": "0.3.7",
     "node-mocks-http": "1.9.0",
     "normalize.css": "8.0.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "optimize-css-assets-webpack-plugin": "^5.0.6",
     "ora": "4.0.4",
     "prop-types": "15.7.2",
-    "react": "16.13.1",
+    "react": "17.0.2",
-    "react-autosuggest": "10.0.2",
+    "react-autosuggest": "10.1.0",
-    "react-dom": "16.13.1",
+    "react-dom": "17.0.2",
-    "react-hook-form": "3.29.4",
+    "react-hook-form": "7.8.4",
-    "react-hot-loader": "4.12.21",
+    "react-hot-loader": "4.13.0",
-    "react-i18next": "^11.8.3",
+    "react-i18next": "^11.10.0",
     "react-router": "^5.2.0",
     "react-router-dom": "5.2.0",
-    "react-virtualized": "9.22.2",
+    "react-virtualized": "9.22.3",
-    "request": "2.88.2",
     "resolve-url-loader": "3.1.1",
     "rimraf": "3.0.2",
     "source-map-loader": "1.1.0",
@@ -81,19 +79,19 @@
     "stylelint-processor-styled-components": "1.10.0",
     "stylelint-webpack-plugin": "^2.1.1",
     "supertest": "4.0.2",
-    "terser-webpack-plugin": "^5.0.3",
+    "terser-webpack-plugin": "^5.1.3",
     "url-loader": "^4.1.1",
     "validator": "13.1.1",
     "wait-on": "5.2.0",
     "webpack": "5.33.2",
     "webpack-bundle-analyzer": "3.8.0",
     "webpack-bundle-size-analyzer": "3.1.0",
-    "webpack-manifest-plugin": "^3.0.0",
+    "webpack-cli": "^4.7.2",
-    "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2",
-    "webpack-merge": "^5.7.3",
+    "webpack-manifest-plugin": "^3.1.1",
-    "whatwg-fetch": "^3.4.1",
+    "webpack-merge": "^5.8.0",
-    "xss": "1.0.8"
+    "whatwg-fetch": "^3.6.2",
+    "xss": "1.0.9"
   },
   "keywords": [
     "private",

packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialog.test.tsx

@@ -6,6 +6,7 @@ import {
   waitFor,
   fireEvent,
   cleanup,
+  screen,
   act,
 } from 'verdaccio-ui/utils/test-react-testing-library';
 
@@ -87,29 +88,27 @@ describe('<LoginDialog /> component', () => {
       })
     );
 
-    const { getByPlaceholderText, getByTestId } = render(
+    render(
       <AppContext.Provider value={appContextValue}>
         <LoginDialog onClose={props.onClose} open={props.open} />
       </AppContext.Provider>
     );
 
-    // TODO: the input's value is not being updated in the DOM
+    const userNameInput = screen.getByPlaceholderText('Your username');
-    const userNameInput = getByPlaceholderText('Your username');
+    expect(userNameInput).toBeInTheDocument();
 
     fireEvent.focus(userNameInput);
 
     fireEvent.change(userNameInput, { target: { value: 'xyz' } });
 
-    // TODO: the input's value is not being updated in the DOM
+    const passwordInput = screen.getByPlaceholderText('Your strong password');
-    const passwordInput = getByPlaceholderText('Your strong password');
+    expect(userNameInput).toBeInTheDocument();
-
     fireEvent.focus(passwordInput);
     fireEvent.change(passwordInput, { target: { value: '1234' } });
 
-    // TODO: submitting form does not work
+    act(async () => {
-    const signInButton = getByTestId('login-dialog-form-login-button');
+      const signInButton = await screen.getByTestId('login-dialog-form-login-button');
       expect(signInButton).not.toBeDisabled();
-    act(() => {
       fireEvent.click(signInButton);
     });
   });

packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogForm.tsx

@@ -1,6 +1,7 @@
+/* eslint-disable verdaccio/jsx-spread */
 import styled from '@emotion/styled';
 import React, { memo } from 'react';
-import useForm from 'react-hook-form/dist/react-hook-form.ie11';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import Button from 'verdaccio-ui/components/Button';
@@ -32,9 +33,8 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
   const { t } = useTranslation();
   const {
     register,
-    errors,
     handleSubmit,
-    formState: { isValid },
+    formState: { isValid, errors },
   } = useForm<FormValues>({ mode: 'onChange' });
 
   const onSubmitForm = (formValues: FormValues) => {
@@ -49,7 +49,7 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
         fullWidth={true}
         helperText={errors.username?.message}
         id="login--dialog-username"
-        inputRef={register({
+        {...register('username', {
           required: { value: true, message: t('form-validation.required-field') },
           minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
         })}
@@ -66,7 +66,7 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
         fullWidth={true}
         helperText={errors.password?.message}
         id="login--dialog-password"
-        inputRef={register({
+        {...register('password', {
           required: { value: true, message: t('form-validation.required-field') },
           minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
         })}

packages/plugins/ui-theme/src/App/Header/Search/Search.test.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 
-import '@testing-library/jest-dom/extend-expect';
-
 import api from 'verdaccio-ui/providers/API/api';
 import { render, fireEvent, waitFor } from 'verdaccio-ui/utils/test-react-testing-library';
 
@@ -85,12 +83,11 @@ describe('<Search /> component', () => {
     const { getByPlaceholderText, getByRole } = render(<ComponentToBeRendered />);
 
     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).toBeEmptyDOMElement();
+    expect(listBoxElement.innerHTML).toEqual('');
     expect(api.request).toHaveBeenCalledTimes(0);
   });
 
@@ -103,7 +100,7 @@ describe('<Search /> component', () => {
     fireEvent.change(autoCompleteInput, { target: { value: ' ', method: 'click' } });
     expect(autoCompleteInput).toHaveAttribute('value', '');
     const listBoxElement = await waitFor(() => getByRole('listbox'));
-    expect(listBoxElement).toBeEmptyDOMElement();
+    expect(listBoxElement.innerHTML).toEqual('');
     expect(api.request).toHaveBeenCalledTimes(0);
   });
 
@@ -132,7 +129,7 @@ describe('<Search /> component', () => {
 
     fireEvent.change(autoCompleteInput, { target: { value: ' ' } });
     const listBoxElement = await waitFor(() => getByRole('listbox'));
-    expect(listBoxElement).toBeEmptyDOMElement();
+    expect(listBoxElement.innerHTML).toEqual('');
 
     expect(api.request).toHaveBeenCalledTimes(1);
   });
@@ -152,6 +149,6 @@ describe('<Search /> component', () => {
     fireEvent.click(suggestionsElements[1]);
     const listBoxElement = await waitFor(() => getByRole('listbox'));
     // when the page redirects, the list box should be empty again
-    expect(listBoxElement).toBeEmptyDOMElement();
+    expect(listBoxElement.innerHTML).toEqual('');
   });
 });

packages/plugins/ui-theme/src/components/Author/Author.tsx

@@ -1,3 +1,4 @@
+import Avatar from '@material-ui/core/Avatar';
 import React, { FC, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -5,7 +6,6 @@ import { getAuthorName } from 'verdaccio-ui/utils/package';
 import { isEmail } from 'verdaccio-ui/utils/url';
 
 import { DetailContext } from '../../pages/Version';
-import Avatar from '../Avatar';
 import List from '../List';
 
 import { StyledText, AuthorListItem, AuthorListItemText } from './styles';

packages/plugins/ui-theme/src/components/Avatar.tsx

@@ -1,11 +1,3 @@
-import { default as MaterialUIAvatar, AvatarProps } from '@material-ui/core/Avatar';
+import { default as MaterialUIAvatar } from '@material-ui/core/Avatar';
-import React, { forwardRef } from 'react';
 
-// The default element type of MUI's Avatar is 'div' and we don't allow the change of this prop
+export default MaterialUIAvatar;
-type AvatarRef = HTMLDivElement;
-
-const Avatar = forwardRef<AvatarRef, AvatarProps>(function Avatar(props, ref) {
-  return <MaterialUIAvatar {...props} ref={ref} />;
-});
-
-export default Avatar;

packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Developers/Developers.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
+import Avatar from '@material-ui/core/Avatar';
 import Add from '@material-ui/icons/Add';
 import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Avatar from 'verdaccio-ui/components/Avatar';
 import Box from 'verdaccio-ui/components/Box';
 import FloatingActionButton from 'verdaccio-ui/components/FloatingActionButton';
 import Tooltip from 'verdaccio-ui/components/Tooltip';