Update Material UI version to 5.

package.json

@@ -3,16 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.2",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@mui/icons-material": "^5.2.5",
+    "@mui/lab": "^5.0.0-alpha.64",
+    "@mui/material": "^5.2.8",
+    "@mui/styles": "^5.2.3",
     "@types/moment": "^2.13.0",
     "ajv": "^7.0.3",
     "firebase": "^8.2.1",
     "immer": "^8.0.0",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.32",
-    "notistack": "^1.0.3",
+    "notistack": "^2.0.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-draggable": "^4.4.3",

src/App.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import { SnackbarProvider } from 'notistack';
 import './App.css';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { StyledComponentProps, withStyles } from '@material-ui/core/styles';
+import { StyledComponentProps } from '@mui/material/styles';
 import Review from './components/review/Review.container';
 import Top from './components/top/Top.container';
 import Organizations from './components/organizations/Organizations.container';
+import { withStyles } from '@mui/styles';
 
 class App extends React.Component<StyledComponentProps, {}> {
   constructor(

src/components/common/footer/Footer.scss

@@ -15,6 +15,11 @@
 
   a {
     color: $primary-light;
+    margin-right: 16px;
+
+    &:last-child {
+      margin-right: auto;
+    }
   }
   .dev-team {
     text-align: start;

src/components/common/footer/Footer.tsx

@@ -32,12 +32,19 @@ export default class Footer extends React.Component<
         </div>
         <div className="footer-contents">
           <a
-            href="https://docs.google.com/document/d/1Fo2-cbPcTNkckwJOl-YqnBuVeyREuYtyoY8mecdiUxE/edit"
+            href="https://remap-keys.app/docs/terms_of_use"
             target={'_blank'}
             rel={'noreferrer'}
           >
             Terms of Use
           </a>
+          <a
+            href="https://remap-keys.app/docs/review_policy"
+            target={'_blank'}
+            rel={'noreferrer'}
+          >
+            Review Policy
+          </a>
         </div>
         <div className="build-number">Build: {this.props.buildNumber}</div>
       </footer>

src/components/organizations/Organizations.tsx

@@ -5,10 +5,10 @@ import {
 } from './Organizations.container';
 import { ProviderContext, withSnackbar } from 'notistack';
 import { NotificationItem } from '../../actions/actions';
-import { Button, CssBaseline } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
+import CloseIcon from '@mui/icons-material/Close';
 import Header from '../common/header/Header.container';
 import Content from './content/Content.container';
+import { Button, CssBaseline } from '@mui/material';
 
 type OwnProps = {};
 type OrganizationsProps = OwnProps &

src/components/organizations/content/Content.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ContentActionsType, ContentStateType } from './Content.container';
 import './Content.scss';
-import { CircularProgress } from '@material-ui/core';
+import { CircularProgress } from '@mui/material';
 import Footer from '../../common/footer/Footer.container';
 import { IOrganizationsPhase } from '../../../store/state';
 import OrganizationsList from '../organizationslist/OrganizationsList.container';

src/components/organizations/organizationcreate/OrganizationCreate.tsx

@@ -4,8 +4,8 @@ import {
   OrganizationCreateActionsType,
   OrganizationCreateStateType,
 } from './OrganizationCreate.container';
-import { Card, CardContent, TextField } from '@material-ui/core';
-import { Button } from '@material-ui/core';
+import { Card, CardContent, TextField } from '@mui/material';
+import { Button } from '@mui/material';
 
 type OrganizationCreateState = {};
 type OwnProps = {};

src/components/organizations/organizationdetail/OrganizationDetail.tsx

@@ -12,8 +12,8 @@ import {
   ListItemText,
   TextField,
   Typography,
-} from '@material-ui/core';
-import { Button } from '@material-ui/core';
+} from '@mui/material';
+import { Button } from '@mui/material';
 
 type OrganizationDetailState = {};
 type OwnProps = {};

src/components/organizations/organizationslist/OrganizationsList.tsx

@@ -4,7 +4,7 @@ import {
   OrganizationsListActionsType,
   OrganizationsListStateType,
 } from './OrganizationsList.container';
-import { Button, Card, CardContent } from '@material-ui/core';
+import { Button, Card, CardContent } from '@mui/material';
 import moment from 'moment-timezone';
 import { IOrganization } from '../../../services/storage/Storage';
 

src/components/review/Review.tsx

@@ -1,8 +1,8 @@
 import { ReviewActionsType, ReviewStateType } from './Review.container';
 import { ProviderContext, withSnackbar } from 'notistack';
 import { NotificationItem } from '../../actions/actions';
-import { Button, CssBaseline } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
+import { Button, CssBaseline } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
 import React, { useEffect, useState } from 'react';
 import Header from '../common/header/Header.container';
 import Content from './content/Content.container';

src/components/review/content/Content.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ContentActionsType, ContentStateType } from './Content.container';
 import './Content.scss';
-import { CircularProgress } from '@material-ui/core';
+import { CircularProgress } from '@mui/material';
 import Footer from '../../common/footer/Footer.container';
 import { IReviewPhase, ReviewPhase } from '../../../store/state';
 import DefinitionList from '../definitionlist/DefinitionList.container';

src/components/review/definitiondetail/DefinitionDetail.scss

@@ -88,3 +88,8 @@
   flex-direction: row;
   justify-content: space-between;
 }
+
+.edit-keyboard-stepper {
+  margin-top: $space-l;
+  margin-bottom: $space-l;
+}

src/components/review/definitiondetail/DefinitionDetail.tsx

@@ -20,18 +20,19 @@ import {
   Menu,
   MenuItem,
   Select,
+  SelectChangeEvent,
   Step,
   StepLabel,
   Stepper,
   TextField,
-} from '@material-ui/core';
+} from '@mui/material';
 import {
   FirmwareCodePlace,
   IKeyboardDefinitionDetail,
   IKeyboardDefinitionStatus,
   KeyboardDefinitionStatus,
 } from '../../../services/storage/Storage';
-import { MoreVert } from '@material-ui/icons';
+import { MoreVert } from '@mui/icons-material';
 import { hexadecimal } from '../../../utils/StringUtils';
 import { RejectMessages } from './RejectMessages';
 
@@ -123,10 +124,8 @@ export default class DefinitionDetail extends React.Component<
     a.remove();
   };
 
-  handleRejectMessagesChange = (
-    event: React.ChangeEvent<{ name?: string; value: unknown }>
-  ) => {
-    const value = event.target.value as number;
+  handleRejectMessagesChange = (event: SelectChangeEvent) => {
+    const value = Number(event.target.value);
     this.setState({ rejectMessage: value });
     const rejectReason = value !== -1 ? RejectMessages[value].long : '';
     this.props.updateRejectReason!(rejectReason);
@@ -192,7 +191,10 @@ export default class DefinitionDetail extends React.Component<
                       }
                     />
                   </div>
-                  <Stepper activeStep={activeStep}>
+                  <Stepper
+                    activeStep={activeStep}
+                    className="edit-keyboard-stepper"
+                  >
                     {statusSteps.map((label) => {
                       const stepProps = {
                         completed,
@@ -394,6 +396,7 @@ export default class DefinitionDetail extends React.Component<
                           </InputLabel>
                           <Select
                             labelId="definition-detail-status-select-label"
+                            label="Status"
                             id="definition-detail-status-select"
                             value={this.props.keyboardDefinitionStatus}
                             onChange={(event) =>
@@ -424,7 +427,7 @@ export default class DefinitionDetail extends React.Component<
                           label="Reject Reason"
                           placeholder="Please fill in the reason when this review request is rejected."
                           multiline
-                          rowsMax={4}
+                          maxRows={4}
                           value={this.props.rejectReason}
                           onChange={(e) =>
                             this.props.updateRejectReason!(e.target.value)
@@ -492,7 +495,7 @@ type RejectMessageRowProps = {
   rejectMessage: number;
   handleRejectMessagesChange: (
     // eslint-disable-next-line no-unused-vars
-    event: React.ChangeEvent<{ name?: string; value: unknown }>
+    event: SelectChangeEvent
   ) => void;
 };
 
@@ -506,8 +509,9 @@ function RejectMessageRow(props: RejectMessageRowProps) {
           </InputLabel>
           <Select
             labelId="definition-detail-reject-message-select-label"
+            label="Reject Reason Template"
             id="definition-detail-reject-message-select"
-            value={props.rejectMessage}
+            value={String(props.rejectMessage)}
             onChange={props.handleRejectMessagesChange}
           >
             {RejectMessages.map((message, index) => {
@@ -680,11 +684,7 @@ function MenuUI(props: MenuUIProps) {
   const menuItems = [];
   if (props.keyboardDefinitionDetail) {
     menuItems.push(
-      <MenuItem
-        key="1"
-        onClick={props.handleDownloadJsonMenuClick}
-        button={true}
-      >
+      <MenuItem key="1" onClick={props.handleDownloadJsonMenuClick}>
         Download JSON
       </MenuItem>
     );

src/components/review/definitionlist/DefinitionList.tsx

@@ -14,7 +14,7 @@ import {
   MenuItem,
   Select,
   TextField,
-} from '@material-ui/core';
+} from '@mui/material';
 import {
   IKeyboardDefinition,
   IKeyboardDefinitionStatus,
@@ -92,6 +92,7 @@ export default class DefinitionList extends React.Component<
                   </InputLabel>
                   <Select
                     labelId="definition-list-status-select-label"
+                    label="Status"
                     id="definition-list-status-select"
                     value={this.props.status}
                     onChange={this.handleChangeStatus}

src/components/top/Top.tsx

@@ -3,8 +3,8 @@ import { TopActionsType, TopStateType } from './Top.container';
 import { ProviderContext, withSnackbar } from 'notistack';
 import './Top.scss';
 import { NotificationItem } from '../../actions/actions';
-import { Button, CssBaseline } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
+import { Button, CssBaseline } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
 import Header from '../common/header/Header.container';
 import Footer from '../common/footer/Footer.container';
 

src/package.alias.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.2",
-    "@material-ui/icons": "^4.11.2",
+    "@mui/material": "^4.11.2",
+    "@mui/icons-material": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@types/moment": "^2.13.0",
     "ajv": "^7.0.3",
@@ -36,17 +36,10 @@
     "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "extends": ["react-app", "react-app/jest"]
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
@@ -92,13 +85,7 @@
     }
   },
   "lint-staged": {
-    "*.{html,css,scss,md,json,yaml}": [
-      "prettier --write",
-      "git add"
-    ],
-    "*.{js,jsx}": [
-      "prettier --write",
-      "git add"
-    ]
+    "*.{html,css,scss,md,json,yaml}": ["prettier --write", "git add"],
+    "*.{js,jsx}": ["prettier --write", "git add"]
   }
 }