feat(package,material-ui) - migrate material ui to latest (#976)

spot-client/package.json

@@ -9,8 +9,9 @@
         "@jitsi/eslint-config": "4.1.5",
         "@jitsi/js-utils": "2.0.5",
         "@jitsi/logger": "2.0.1",
-        "@material-ui/core": "4.12.4",
-        "@material-ui/icons": "4.11.3",
+        "@mui/icons-material": "5.11.0",
+        "@mui/material": "5.11.4",
+        "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
         "babel-core": "7.0.0-bridge.0",
         "babel-jest": "29.3.1",
         "babel-loader": "9.1.0",
@@ -23,7 +24,6 @@
         "dotenv": "16.0.3",
         "dotenv-webpack": "8.0.1",
         "enzyme": "3.11.0",
-        "enzyme-adapter-react-16": "1.15.7",
         "eslint": "8.30.0",
         "eslint-plugin-import": "2.26.0",
         "eslint-plugin-jest": "27.2.1",
@@ -47,11 +47,11 @@
         "lolex": "6.0.0",
         "md5": "2.3.0",
         "prop-types": "15.8.1",
-        "react": "16.12.0",
+        "react": "17.0.2",
         "react-country-flag": "3.0.2",
-        "react-dom": "16.12.0",
+        "react-dom": "17.0.2",
         "react-i18next": "11.18.6",
-        "react-redux": "7.1.3",
+        "react-redux": "8.0.5",
         "react-router-dom": "5.1.2",
         "redux": "4.2.0",
         "redux-thunk": "2.4.2",

spot-client/setupTests.js

@@ -1,5 +1,5 @@
+import EnzymeAdapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme from 'enzyme';
-import EnzymeAdapter from 'enzyme-adapter-react-16';
 
 Enzyme.configure({ adapter: new EnzymeAdapter() });
 

spot-client/src/common/css/_button.scss

@@ -16,6 +16,7 @@
     &.primary {
         background-color: var(--button-color);
         border: 1px solid var(--button-color);
+        text-transform: unset;
 
         &:hover {
             background-color: var(--button-active-color);
@@ -34,9 +35,11 @@
     &.subtle {
         border: 1px solid white;
         color: white;
+        text-transform: unset;
 
         &:hover {
             background-color: var(--container-content-highlight-bg-color);
+            border: 1px solid white;
         }
     }
 
@@ -70,7 +73,7 @@
         border: 1px solid white;
         font-size: 48px;
         padding: 0;
-    
+
         svg {
             font-size: 48px;
             fill: white;

spot-client/src/common/icons/index.js

@@ -25,14 +25,14 @@ export {
     Videocam,
     VideocamOff,
     VolumeUp
-} from '@material-ui/icons';
+} from '@mui/icons-material';
 
-export { default as BorderAllOutlined } from '@material-ui/icons/BorderAllOutlined';
-export { default as MicNoneOutlined } from '@material-ui/icons/MicNoneOutlined';
-export { default as MicOffOutlined } from '@material-ui/icons/MicOffOutlined';
-export { default as ScreenShareOutlined } from '@material-ui/icons/ScreenShareOutlined';
-export { default as VideocamOutlined } from '@material-ui/icons/VideocamOutlined';
-export { default as VideocamOffOutlined } from '@material-ui/icons/VideocamOffOutlined';
+export { default as BorderAllOutlined } from '@mui/icons-material/BorderAllOutlined';
+export { default as MicNoneOutlined } from '@mui/icons-material/MicNoneOutlined';
+export { default as MicOffOutlined } from '@mui/icons-material/MicOffOutlined';
+export { default as ScreenShareOutlined } from '@mui/icons-material/ScreenShareOutlined';
+export { default as VideocamOutlined } from '@mui/icons-material/VideocamOutlined';
+export { default as VideocamOffOutlined } from '@mui/icons-material/VideocamOffOutlined';
 
 export { default as WiredScreenshare } from './wired-screenshare-icon';
 export { default as WirelessScreenshare } from './wireless-screenshare-icon';

spot-client/src/common/ui/components/button/button.js

@@ -1,4 +1,4 @@
-import { Button as MaterialButton } from '@material-ui/core';
+import { Button as MaterialButton } from '@mui/material';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -8,22 +8,18 @@ const classes = {
 const mapActionTypeToStyle = {
     'subtle-danger': {
         className: 'button subtle-danger',
-        color: 'default',
         variant: 'outlined'
     },
     primary: {
         className: 'button primary',
-        color: 'primary',
         variant: 'contained'
     },
     secondary: {
         className: 'button secondary',
-        color: 'default',
         variant: 'contained'
     },
     subtle: {
         className: 'button subtle',
-        color: 'default',
         variant: 'outlined'
     }
 };

spot-client/src/common/ui/components/input/input.js

@@ -1,4 +1,4 @@
-import { Input as MaterialInput } from '@material-ui/core';
+import { Input as MaterialInput } from '@mui/material';
 import PropTypes from 'prop-types';
 import React from 'react';
 

spot-client/src/common/ui/components/select/simple-select.js

@@ -1,4 +1,4 @@
-import { FormControl, Input, MenuItem, Select } from '@material-ui/core';
+import { FormControl, Input, MenuItem, Select } from '@mui/material';
 import PropTypes from 'prop-types';
 import React from 'react';
 

spot-client/src/spot-tv/ui/components/exit-electron/ExitVerification.test.js

@@ -62,13 +62,18 @@ describe('ExitVerification', () => {
             });
         });
         it('and calls onVerified when the confirm button is clicked', () => {
-            selectConfirmButton().simulate('click');
+            const button = selectConfirmButton().find('button');
+
+            button.simulate('click');
 
             expect(onCancel).not.toHaveBeenCalled();
             expect(onVerification).toHaveBeenCalled();
         });
         it('and calls onCancel when the cancel button is clicked', () => {
-            selectCancelButton().simulate('click');
+            // https://github.com/wojtekmaj/enzyme-adapter-react-17/issues/45
+            const button = selectCancelButton().find('button');
+
+            button.simulate('click');
 
             expect(onVerification).not.toHaveBeenCalled();
             expect(onCancel).toHaveBeenCalled();
@@ -110,14 +115,16 @@ describe('ExitVerification', () => {
 
             exitComponent.find(SELECT_PASSWORD_INPUT).simulate('change', { target: { value: `${TEST_PASSWORD}1234` } });
 
-            selectConfirmButton().simulate('click');
+            const button = selectConfirmButton().find('button');
+
+            button.simulate('click');
 
             expect(onVerification).not.toHaveBeenCalled();
             expect(onPasswordInvalid).toHaveBeenCalled();
 
             exitComponent.find(SELECT_PASSWORD_INPUT).simulate('change', { target: { value: TEST_PASSWORD } });
 
-            selectConfirmButton().simulate('click');
+            button.simulate('click');
 
             expect(onVerification).toHaveBeenCalled();
         });

spot-webdriver/page-objects/spot-remote-in-meeting-page.js

@@ -10,8 +10,8 @@ const MORE_BUTTON = '.more';
 const MORE_MODAL = '.more-modal';
 const REMOTE_CONTROL = '.in-call';
 const SKIP_FEEDBACK_BUTTON = '.skip-feedback';
-const START_SHARE_BUTTON = '.start-share';
-const STOP_SHARE_BUTTON = '.stop-share';
+const START_SHARE_BUTTON = '.start-share-button';
+const STOP_SHARE_BUTTON = '.stop-share-button';
 const TILE_VIEW_ENABLE_BUTTON = '.enter-tile-view';
 const TILE_VIEW_DISABLE_BUTTON = '.exit-tile-view';
 const VIDEO_MUTE_BUTTON = '.mute-video';
@@ -185,7 +185,7 @@ class SpotRemoteInMeetingPage extends PageObject {
     async startWirelessScreenshareWithoutPicker() {
         await this.waitForScreensharingStateToBe(false);
 
-        const startShareButton = await this.select(START_SHARE_BUTTON)
+        const startShareButton = await this.select(START_SHARE_BUTTON);
 
         await startShareButton.click();
     }