Merge pull request #122 from Exabyte-io/update/SOF-6455

SOF-6455: Upgrade Wave to MUI 5 or above
Exabyte-io · Feb 7, 2023 · 7b07f14 · 7b07f14
2 parents 0121fa9 + 7a82d22
commit 7b07f14
Show file tree

Hide file tree

Showing 9 changed files with 596 additions and 378 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,16 +36,18 @@
         "@babel/preset-env": "7.16.4",
         "@babel/preset-react": "7.16.7",
         "@babel/runtime-corejs2": "7.16.7",
+        "@emotion/react": "^11.10.5",
+        "@emotion/styled": "^11.10.5",
         "@exabyte-io/periodic-table.js": "2022.5.5-2",
-        "@material-ui/core": "^4.12.3",
-        "@material-ui/icons": "^4.11.2",
+        "@mui/icons-material": "^5.11.0",
+        "@mui/material": "^5.11.7",
+        "@mui/styles": "^5.11.7",
         "classnames": "2.3.1",
         "enzyme-adapter-react-16": "^1.15.6",
         "jquery": "3.6.0",
         "mixwith": "^0.1.1",
         "prop-types": "^15.8.0",
         "react-bootstrap": "0.32.4",
-        "react-jss": "^8.6.1",
         "react-scripts": "^4.0.3",
         "sass": "1.45.2",
         "sprintf-js": "^1.1.2",

diff --git a/src/MuiClassNameSetup.js b/src/MuiClassNameSetup.js
@@ -0,0 +1,3 @@
+import { unstable_ClassNameGenerator as ClassNameGenerator } from "@mui/material/className";
+
+ClassNameGenerator.configure((componentName) => `wave-${componentName}`);
diff --git a/src/components/AlertDialog.jsx b/src/components/AlertDialog.jsx
@@ -1,10 +1,10 @@
 // TODO: move that component to cove.js and reuse it here
-import Button from "@material-ui/core/Button";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogContentText from "@material-ui/core/DialogContentText";
-import DialogTitle from "@material-ui/core/DialogTitle";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
 import React, { useImperativeHandle, useState } from "react";
 
 export const AlertDialog = React.forwardRef((props, ref) => {

diff --git a/src/components/IconToolbar.jsx b/src/components/IconToolbar.jsx
@@ -1,4 +1,4 @@
-import Close from "@material-ui/icons/Close";
+import Close from "@mui/icons-material/Close";
 import setClass from "classnames";
 import PropTypes from "prop-types";
 import React from "react";
@@ -17,7 +17,7 @@ export class IconToolbar extends React.Component {
     }
 
     // eslint-disable-next-line no-unused-vars
-    handleToggleActive(e) {
+    handleToggleActive() {
         const { isActive } = this.state;
         this.setState({ isActive: !isActive });
     }

diff --git a/src/components/LoadingIndicator.jsx b/src/components/LoadingIndicator.jsx
@@ -1,4 +1,4 @@
-import CircularProgress from "@material-ui/core/CircularProgress";
+import CircularProgress from "@mui/material/CircularProgress";
 import React from "react";
 
 export const LoadingIndicator = function LoadingIndicator() {

diff --git a/src/components/RoundIconButton.jsx b/src/components/RoundIconButton.jsx
@@ -1,5 +1,5 @@
-import IconButton from "@material-ui/core/IconButton";
-import Tooltip from "@material-ui/core/Tooltip";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
 import PropTypes from "prop-types";
 import React from "react";
 import _ from "underscore";
@@ -30,7 +30,12 @@ export class RoundIconButton extends React.Component {
         const { id, label, title, onClick, tooltipPlacement, isToggleable } = this.props;
         const { isToggled } = this.state;
         return (
-            <Tooltip id={id} title={title.toUpperCase()} placement={tooltipPlacement}>
+            <Tooltip
+                id={id}
+                title={title.toUpperCase()}
+                placement={tooltipPlacement}
+                disableInteractive
+            >
                 <IconButton
                     aria-checked={isToggleable && isToggled}
                     aria-label={label || title.toLowerCase()}
@@ -49,6 +54,7 @@ export class RoundIconButton extends React.Component {
                         "isToggleable",
                         "isToggled",
                     )}
+                    size="large"
                 />
             </Tooltip>
         );

diff --git a/src/components/ThreeDEditor.jsx b/src/components/ThreeDEditor.jsx
@@ -1,32 +1,34 @@
 /* eslint-disable react/sort-comp */
+// import "../MuiClassNameSetup";
+
 import { Made } from "@exabyte-io/made.js";
-import { createGenerateClassName, Tooltip } from "@material-ui/core";
-import Autorenew from "@material-ui/icons/Autorenew";
-import BubbleChart from "@material-ui/icons/BubbleChart";
-import CloudDownload from "@material-ui/icons/CloudDownload";
-import ControlCameraRounded from "@material-ui/icons/ControlCameraRounded";
-import DeleteIcon from "@material-ui/icons/Delete";
-import Edit from "@material-ui/icons/Edit";
-import FormatShapes from "@material-ui/icons/FormatShapes";
-import GpsFixed from "@material-ui/icons/GpsFixed";
-import HeightIcon from "@material-ui/icons/Height";
-import ImportExport from "@material-ui/icons/ImportExport";
-import LooksIcon from "@material-ui/icons/Looks";
-import Menu from "@material-ui/icons/Menu";
-import NotInterested from "@material-ui/icons/NotInterested";
-import PictureInPicture from "@material-ui/icons/PictureInPicture";
-import PowerSettingsNew from "@material-ui/icons/PowerSettingsNew";
-import RemoveRedEye from "@material-ui/icons/RemoveRedEye";
-import Replay from "@material-ui/icons/Replay";
-import Spellcheck from "@material-ui/icons/Spellcheck";
-import SquareFootIcon from "@material-ui/icons/SquareFoot";
-import SwitchCamera from "@material-ui/icons/SwitchCamera";
-import ThreeDRotation from "@material-ui/icons/ThreeDRotation";
+import Autorenew from "@mui/icons-material/Autorenew";
+import BubbleChart from "@mui/icons-material/BubbleChart";
+import CloudDownload from "@mui/icons-material/CloudDownload";
+import ControlCameraRounded from "@mui/icons-material/ControlCameraRounded";
+import DeleteIcon from "@mui/icons-material/Delete";
+import Edit from "@mui/icons-material/Edit";
+import FormatShapes from "@mui/icons-material/FormatShapes";
+import GpsFixed from "@mui/icons-material/GpsFixed";
+import HeightIcon from "@mui/icons-material/Height";
+import ImportExport from "@mui/icons-material/ImportExport";
+import LooksIcon from "@mui/icons-material/Looks";
+import Menu from "@mui/icons-material/Menu";
+import NotInterested from "@mui/icons-material/NotInterested";
+import PictureInPicture from "@mui/icons-material/PictureInPicture";
+import PowerSettingsNew from "@mui/icons-material/PowerSettingsNew";
+import RemoveRedEye from "@mui/icons-material/RemoveRedEye";
+import Replay from "@mui/icons-material/Replay";
+import Spellcheck from "@mui/icons-material/Spellcheck";
+import SquareFootIcon from "@mui/icons-material/SquareFoot";
+import SwitchCamera from "@mui/icons-material/SwitchCamera";
+import ThreeDRotation from "@mui/icons-material/ThreeDRotation";
+import { Tooltip } from "@mui/material";
+import { StyledEngineProvider } from "@mui/material/styles";
 import setClass from "classnames";
 import $ from "jquery";
 import PropTypes from "prop-types";
 import React from "react";
-import { JssProvider } from "react-jss";
 
 import settings from "../settings";
 import { exportToDisk } from "../utils";
@@ -35,12 +37,6 @@ import { RoundIconButton } from "./RoundIconButton";
 import { ThreejsEditorModal } from "./ThreejsEditorModal";
 import { WaveComponent } from "./WaveComponent";
 
-/**
- * This is to avoid class name conflicts when the component is used inside other material-ui dependent components.
- * See https://material-ui.com/customization/css-in-js/#creategenerateclassname-options-class-name-generator for more information.
- */
-const generateClassName = createGenerateClassName({ productionPrefix: "wave" });
-
 /**
  * Wrapper component containing 3D visualization through `WaveComponent` and the associated controls
  */
@@ -171,10 +167,7 @@ export class ThreeDEditor extends React.Component {
 
     // eslint-disable-next-line class-methods-use-this
     getPrimitiveOrConventionalMaterial(material, isConventionalCellShown = false) {
-        const primitiveOrConventionalMaterial = isConventionalCellShown
-            ? material.getACopyWithConventionalCell()
-            : material.clone();
-        return primitiveOrConventionalMaterial;
+        return isConventionalCellShown ? material.getACopyWithConventionalCell() : material.clone();
     }
 
     handleToggleConventionalCell() {
@@ -450,7 +443,12 @@ export class ThreeDEditor extends React.Component {
                 isToggled={this._getWaveProperty("isDrawBondsEnabled")}
                 onClick={this.handleToggleBonds}
             >
-                <Menu />
+                <Menu
+                    anchorOrigin={{
+                        vertical: "top",
+                        horizontal: "left",
+                    }}
+                />
             </RoundIconButton>,
 
             <RoundIconButton
@@ -572,7 +570,7 @@ export class ThreeDEditor extends React.Component {
     getParametersToolbarItems() {
         const { viewerSettings } = this.state;
         return [
-            <Tooltip key="RADIUS" title="RADIUS" placement="top">
+            <Tooltip key="RADIUS" title="RADIUS" placement="top" disableInteractive>
                 <input
                     className="inverse stepper sphere-radius"
                     id="sphere-radius"
@@ -585,7 +583,7 @@ export class ThreeDEditor extends React.Component {
                 />
             </Tooltip>,
 
-            <Tooltip key="A" title="A" placement="top">
+            <Tooltip key="A" title="A" placement="top" disableInteractive>
                 <input
                     className="inverse stepper cell-repetitions"
                     id="repetitionsAlongLatticeVectorA"
@@ -598,7 +596,7 @@ export class ThreeDEditor extends React.Component {
                 />
             </Tooltip>,
 
-            <Tooltip key="B" title="B" placement="top">
+            <Tooltip key="B" title="B" placement="top" disableInteractive>
                 <input
                     className="inverse stepper cell-repetitions"
                     id="repetitionsAlongLatticeVectorB"
@@ -611,7 +609,7 @@ export class ThreeDEditor extends React.Component {
                 />
             </Tooltip>,
 
-            <Tooltip key="C" title="C" placement="top">
+            <Tooltip key="C" title="C" placement="top" disableInteractive>
                 <input
                     className="inverse stepper cell-repetitions"
                     id="repetitionsAlongLatticeVectorC"
@@ -628,6 +626,7 @@ export class ThreeDEditor extends React.Component {
                 key="CHEMICAL_CONNECTIVITY_FACTOR"
                 title="CHEMICAL CONNECTIVITY FACTOR"
                 placement="top"
+                disableInteractive
             >
                 <input
                     className="inverse stepper cell-repetitions"
@@ -782,9 +781,9 @@ export class ThreeDEditor extends React.Component {
 
     render() {
         return (
-            <JssProvider generateClassName={generateClassName}>
+            <StyledEngineProvider injectFirst>
                 {this.renderWaveOrThreejsEditorModal()}
-            </JssProvider>
+            </StyledEngineProvider>
         );
     }
 }

diff --git a/src/index.jsx b/src/index.jsx
@@ -1,4 +1,5 @@
 import "./stylesheets/main.scss";
+import "./MuiClassNameSetup";
 
 import { Made } from "@exabyte-io/made.js";
 import React from "react";