feat: update UI to material v5

.github/workflows/testing.yml

@@ -3,7 +3,7 @@ name: Testing
 on: push
 
 jobs:
-  build:
+  testing:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2

package.json

@@ -8,33 +8,31 @@
   },
   "license": "AGPL-3.0",
   "dependencies": {
-    "@babel/preset-env": "^7.21.5",
-    "@babel/preset-react": "^7.18.6",
     "@complat/react-svg-file-zoom-pan": "1.1.1",
-    "@material-ui/core": "^4.10.0",
-    "@material-ui/icons": "^4.10.0",
-    "@mdi/js": "^4.7.95",
-    "@mdi/react": "^1.2.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "12.1.5",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mdi/js": "^7.2.96",
+    "@mdi/react": "^1.6.1",
+    "@mui/icons-material": "^5.14.9",
+    "@mui/material": "^5.14.9",
+    "@mui/styles": "^5.14.9",
     "@types/jest": "^29.5.0",
     "@types/node": "^18.15.11",
     "@types/react": "^18.0.34",
     "@types/react-dom": "^18.0.11",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "browserslist": "^4.21.5",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.2",
     "d3": "^5.16.0",
     "d3-brush": "3.0.0",
     "d3-selection": "^2.0.0",
     "d3-tip": "^0.9.1",
     "jcampconverter": "4.1.0",
     "ml-savitzky-golay-generalized": "1.1.1",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react-dropzone": "^8.0.3",
     "react-quill": "^2.0.0",
     "react-redux": "^7.2.0",
-    "react-svg-inline": "^2.1.1",
     "redux": "^4.1.1",
     "redux-saga": "^1.1.3",
     "redux-undo": "^1.1.0",
@@ -62,6 +60,8 @@
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@storybook/react": "7.0.7",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "12.1.5",
     "@types/enzyme": "^3.10.13",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "babel-loader": "8.2.5",

src/__tests__/units/components/cmd_bar/01_viewer.test.js

@@ -0,0 +1,49 @@
+import configureStore from 'redux-mock-store'
+import { Provider } from 'react-redux'
+import { render } from '@testing-library/react'; 
+import '@testing-library/jest-dom';
+import Viewer from '../../../../components/cmd_bar/01_viewer'
+import { LIST_UI_VIEWER_TYPE } from '../../../../constants/list_ui';
+import { LIST_LAYOUT } from '../../../../constants/list_layout';
+
+const mockStore = configureStore([]);
+const store = mockStore({
+  ui: LIST_UI_VIEWER_TYPE.SPECTRUM,
+  layout: LIST_LAYOUT.H1,
+});
+
+const dispatchMock = () => Promise.resolve({});
+store.dispatch = jest.fn(dispatchMock);
+
+describe('<Viewer />', () => {
+  let AppWrapper;
+  beforeEach(() => {
+    AppWrapper = ({ store, children}) => {
+      return <Provider store={store}> {children} </Provider>
+    }
+  });
+
+  it('Render Viewer', async () => {
+    const renderer = 
+      <AppWrapper store={store}>
+          <Viewer editorOnly={false} />
+      </AppWrapper>
+    ;
+    const { queryByTestId } = render(renderer);
+    const renderResult = queryByTestId('Viewer');
+    expect(renderResult).toBeInTheDocument();
+    expect(renderResult.childElementCount).toEqual(2);
+  });
+
+  it('Render Viewer in editor only mode',  () => {
+    const renderer = 
+      <AppWrapper store={store}>
+          <Viewer editorOnly={true} />
+      </AppWrapper>
+    ;
+    const { queryByTestId } = render(renderer);
+    const renderResult = queryByTestId('Viewer');
+    expect(renderResult).toBeInTheDocument();
+    expect(renderResult.childElementCount).toEqual(1);
+  });
+})

src/__tests__/units/components/cmd_bar/02_zoom.test.js

@@ -0,0 +1,35 @@
+import configureStore from 'redux-mock-store'
+import { Provider } from 'react-redux'
+import { render } from '@testing-library/react'; 
+import '@testing-library/jest-dom';
+import Zoom from '../../../../components/cmd_bar/02_zoom';
+import { LIST_UI_SWEEP_TYPE } from '../../../../constants/list_ui';
+
+const mockStore = configureStore([]);
+const store = mockStore({
+  ui:{ sweepType: LIST_UI_SWEEP_TYPE.ZOOMIN },
+});
+
+const dispatchMock = () => Promise.resolve({});
+store.dispatch = jest.fn(dispatchMock);
+
+describe('<Zoom />', () => {
+  let AppWrapper;
+  beforeEach(() => {
+    AppWrapper = ({ store, children}) => {
+      return <Provider store={store}> {children} </Provider>
+    }
+  });
+
+  it('Render Zoom', async () => {
+    const renderer = 
+      <AppWrapper store={store}>
+          <Zoom editorOnly={false} />
+      </AppWrapper>
+    ;
+    const { queryByTestId } = render(renderer);
+    const renderResult = queryByTestId('Zoom');
+    expect(renderResult).toBeInTheDocument();
+    expect(renderResult.childElementCount).toEqual(2);
+  });
+})

src/__tests__/units/components/common/draw.test.jsx

@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react'; 
+import '@testing-library/jest-dom';
+import { drawMain } from '../../../../components/common/draw';
+import { useEffect } from 'react';
+describe('common/draw', () => {
+  it('.drawMain()', () => {
+    function TestComponent({}) {
+      useEffect(() => {
+        drawMain('.testsvg', 100, 100)
+      }, []);
+      return (
+        <div className='testsvg' data-testid="testsvg"></div>
+      )
+    }
+
+    const { queryByTestId } = render(<TestComponent />);
+    const renderResult = queryByTestId('testsvg');
+    expect(renderResult).toBeInTheDocument();
+    const svgElement = document.querySelector('svg');
+    expect(svgElement).toHaveClass('d3Svg');
+    expect(svgElement).toHaveAttribute('preserveAspectRatio', 'xMinYMin meet');
+    expect(svgElement).toHaveAttribute('viewBox', '0 0 100 100');
+  });
+})

src/__tests__/units/components/panel/peaks.test.js

@@ -5,6 +5,8 @@ import configureStore from 'redux-mock-store'
 import { Provider } from 'react-redux';
 import '@testing-library/jest-dom'
 import { LIST_LAYOUT } from "../../../../constants/list_layout";
+import { createTheme } from "@mui/material";
+import { ThemeProvider } from "@mui/styles";
 
 const mockStore = configureStore([]);
 const store = mockStore({
@@ -48,6 +50,11 @@ const failedStore = mockStore({
 const dispatchMock = () => Promise.resolve({});
 store.dispatch = jest.fn(dispatchMock);
 
+const theme = createTheme({
+  typography: {
+    useNextVariants: true
+  },
+});
 
 describe("<Peaks />", () => {
   let AppWrapper;
@@ -60,7 +67,9 @@ describe("<Peaks />", () => {
   test('Render peaks panel info',  () => {
     const renderer = 
       <AppWrapper store={store}>
-        <Peaks expand={false} onExapnd={() => {}} />
+        <ThemeProvider theme={theme}>
+          <Peaks expand={false} onExapnd={() => {}} />
+        </ThemeProvider>
       </AppWrapper>
     ;
     const {queryByTestId} = render(renderer);
@@ -70,7 +79,9 @@ describe("<Peaks />", () => {
   test('Render peaks panel with invalid store list', () => {
     const renderer = 
       <AppWrapper store={failedStore}>
-        <Peaks expand={false} onExapnd={() => {}} />
+        <ThemeProvider theme={theme}>
+          <Peaks expand={false} onExapnd={() => {}} />
+        </ThemeProvider>
       </AppWrapper>
     ;
     const {queryByTestId} = render(renderer);

src/components/cmd_bar/01_viewer.js

@@ -5,10 +5,10 @@ import { bindActionCreators, compose } from 'redux';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { withStyles } from '@material-ui/core/styles';
-import SpellcheckOutlinedIcon from '@material-ui/icons/SpellcheckOutlined';
-import TimelineOutlinedIcon from '@material-ui/icons/TimelineOutlined';
-import Tooltip from '@material-ui/core/Tooltip';
+import withStyles from '@mui/styles/withStyles';
+import SpellcheckOutlinedIcon from '@mui/icons-material/SpellcheckOutlined';
+import TimelineOutlinedIcon from '@mui/icons-material/TimelineOutlined';
+import Tooltip from '@mui/material/Tooltip';
 
 import { setUiViewerType } from '../../actions/ui';
 import Cfg from '../../helpers/cfg';
@@ -31,7 +31,7 @@ const Viewer = ({
   const onViewAnalysis = () => setUiViewerTypeAct(LIST_UI_VIEWER_TYPE.ANALYSIS);
 
   return (
-    <span className={classes.group}>
+    <span className={classes.group} data-testid="Viewer">
       <Tooltip title={<span className="txt-sv-tp">Spectrum Viewer</span>}>
         <MuButton
           className={

src/components/cmd_bar/02_zoom.js

@@ -5,10 +5,10 @@ import { bindActionCreators, compose } from 'redux';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { withStyles } from '@material-ui/core/styles';
-import ZoomInOutlinedIcon from '@material-ui/icons/ZoomInOutlined';
-import FindReplaceOutlinedIcon from '@material-ui/icons/FindReplaceOutlined';
-import Tooltip from '@material-ui/core/Tooltip';
+import withStyles from '@mui/styles/withStyles';
+import ZoomInOutlinedIcon from '@mui/icons-material/ZoomInOutlined';
+import FindReplaceOutlinedIcon from '@mui/icons-material/FindReplaceOutlined';
+import Tooltip from '@mui/material/Tooltip';
 
 import { setUiSweepType } from '../../actions/ui';
 import { MuButton, commonStyle, focusStyle } from './common';
@@ -28,7 +28,7 @@ const Zoom = ({
   const onSweepZoomReset = () => setUiSweepTypeAct(LIST_UI_SWEEP_TYPE.ZOOMRESET);
 
   return (
-    <span className={classes.group}>
+    <span className={classes.group} data-testid="Zoom">
       <Tooltip title={<span className="txt-sv-tp">Zoom In</span>}>
         <MuButton
           className={

src/components/cmd_bar/03_peak.js

@@ -7,9 +7,9 @@ import { bindActionCreators, compose } from 'redux';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
-import AddLocationOutlinedIcon from '@material-ui/icons/AddLocationOutlined';
+import withStyles from '@mui/styles/withStyles';
+import Tooltip from '@mui/material/Tooltip';
+import AddLocationOutlinedIcon from '@mui/icons-material/AddLocationOutlined';
 
 import { setUiSweepType } from '../../actions/ui';
 import Cfg from '../../helpers/cfg';

src/components/cmd_bar/04_integration.js

@@ -7,9 +7,9 @@ import { bindActionCreators } from 'redux';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
-import TextField from '@material-ui/core/TextField';
+import withStyles from '@mui/styles/withStyles';
+import Tooltip from '@mui/material/Tooltip';
+import TextField from '@mui/material/TextField';
 
 import Icon from '@mdi/react';
 import { mdiReflectVertical, mdiMathIntegral } from '@mdi/js';

src/components/cmd_bar/05_multiplicity.js

@@ -7,8 +7,8 @@ import { bindActionCreators } from 'redux';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
+import withStyles from '@mui/styles/withStyles';
+import Tooltip from '@mui/material/Tooltip';
 
 import { setUiSweepType } from '../../actions/ui';
 import { clearMpyAll } from '../../actions/multiplicity';

src/components/cmd_bar/06_undo_redo.js

@@ -8,10 +8,10 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { ActionCreators as UndoActionCreators } from 'redux-undo';
 
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
-import RedoOutlinedIcon from '@material-ui/icons/RedoOutlined';
-import UndoOutlinedIcon from '@material-ui/icons/UndoOutlined';
+import withStyles from '@mui/styles/withStyles';
+import Tooltip from '@mui/material/Tooltip';
+import RedoOutlinedIcon from '@mui/icons-material/RedoOutlined';
+import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
 import { MuButton, commonStyle } from './common';
 
 const styles = () => (

src/components/cmd_bar/07_pecker.js

@@ -7,8 +7,8 @@ import { bindActionCreators, compose } from 'redux';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
+import withStyles from '@mui/styles/withStyles';
+import Tooltip from '@mui/material/Tooltip';
 
 import { setUiSweepType } from '../../actions/ui';
 

src/components/cmd_bar/common.js

@@ -1,5 +1,5 @@
-import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
+import { withStyles } from '@mui/styles';
+import Button from '@mui/material/Button';
 
 const MuButton = withStyles({
   root: {
@@ -12,6 +12,7 @@ const MuButton = withStyles({
     minWidth: 30,
     padding: 0,
     width: 30,
+    color: 'black',
   },
 })(Button);
 

src/components/cmd_bar/index.js

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
 import PropTypes from 'prop-types';
 
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 
 import { commonStyle } from './common';
 import Viewer from './01_viewer';