general upgrade (dependencies, partially ant design) (#595)

* dependencies upgrade, according to snyk report * fixed imports, webpack config rewritten to take into account upgraded packages * dependencies cleaning * dependencies cleaning * partial ant design migration v3 -> v4 * dependency cleaning * component positioning * cleaning * cleaning * missing css added * more cleaning
libamtrack · Jan 11, 2021 · 8cdde47 · 8cdde47
1 parent 12725c4
commit 8cdde47
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 121 deletions.
diff --git a/package.json b/package.json
@@ -1,16 +1,17 @@
 {
   "name": "LibamtrackWeb",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "private": false,
   "description": "Libamtrack Web Gui",
   "homepage": "https://libamtrack.github.io/web",
   "repository": "https://github.com/libamtrack/web",
   "scripts": {
-    "start": "webpack-dev-server --compress --mode development --open",
-    "startProd": "webpack-dev-server --compress --mode production --open",
+    "watch": "webpack --watch",
+    "start": "webpack serve --compress --mode development --open",
     "build": "webpack --mode production",
     "transpile": "babel src -d dist --copy-files",
     "predeploy": "npm run build",
+    "dev": "webpack --mode development",
     "deploy": "gh-pages -d dist"
   },
   "keywords": [
@@ -38,54 +39,57 @@
     "provides",
     "auxiliary"
   ],
-  "author": "Arkadiusz Dudzik & Piotr Zmilczak",
+  "author": "Arkadiusz Dudzik, Piotr Zmilczak, Leszek Grzanka",
   "license": "GPL-3.0-or-later",
   "devDependencies": {
-    "babel-loader": "8.1.0",
-    "@babel/cli": "7.8.4",
-    "@babel/core": "7.9.0",
-    "@babel/plugin-proposal-class-properties": "7.8.3",
-    "@babel/polyfill": "7.8.7",
-    "@babel/preset-env": "7.9.0",
-    "@babel/preset-react": "7.9.4",
-    "copy-webpack-plugin": "5.1.1",
-    "css-loader": "3.4.2",
-    "file-loader": "5.1.0",
-    "gh-pages": "2.2.0",
-    "html-webpack-plugin": "4.0.3",
+    "@babel/cli": "7.12.10",
+    "@babel/core": "7.12.10",
+    "@babel/plugin-proposal-class-properties": "7.12.1",
+    "@babel/polyfill": "7.12.1",
+    "@babel/preset-env": "7.12.11",
+    "@babel/preset-react": "7.12.10",
+    "@babel/runtime": "7.12.5",
+    "@webpack-cli/serve": "1.2.1",
+    "babel-loader": "8.2.2",
+    "copy-webpack-plugin": "7.0.0",
+    "clean-webpack-plugin": "3.0.0",
+    "css-loader": "5.0.1",
+    "file-loader": "6.2.0",
+    "gh-pages": "3.1.0",
+    "html-webpack-plugin": "4.5.1",
     "linspace": "1.0.0",
     "logspace": "1.0.1",
-    "react-bootstrap": "^0.32.4",
-    "react-plotly.js": "2.4.0",
-    "plotly.js": "1.52.3",
+    "plotly.js": "1.58.4",
+    "react-bootstrap": "^1.4.3",
+    "react-plotly.js": "^2.5.1",
     "recursive-readdir": "2.2.2",
-    "style-loader": "1.1.3",
-    "terser": "4.6.7",
-    "terser-webpack-plugin": "2.3.5",
-    "uglifyjs-webpack-plugin": "2.2.0",
-    "webpack": "4.42.1",
-    "webpack-bundle-analyzer": "3.6.1",
-    "webpack-cli": "3.3.11",
-    "webpack-dev-server": "3.10.3"
+    "style-loader": "2.0.0",
+    "webpack": "5.12.1",
+    "webpack-bundle-analyzer": "4.3.0",
+    "webpack-cli": "4.3.1",
+    "webpack-dev-server": "3.11.1"
   },
+  "@comment dependencies": [
+    "jquery@1.9.1 - 3 and popper.js@^1.16.1 are peer dependencies of bootstrap@4.5.3",
+    "react@^16.0.0 is a peer dependency of @axetroy/react-download@1.1.1"
+  ],
   "dependencies": {
     "@axetroy/react-download": "1.1.1",
-    "antd": "3.26.12",
-    "axios": "0.19.2",
-    "babel-plugin-wildcard": "6.0.0",
-    "bootstrap": "4.4.1",
-    "jquery": "3.5.0",
-    "npm-check-updates": "^4.1.0",
+    "antd": "^4.10.0",
+    "@ant-design/compatible": "^1.0.8",
+    "@ant-design/icons": "^4.3.0",
+    "babel-plugin-wildcard": "^6.0.0",
+    "bootstrap": "4.5.3",
+    "jquery": "1.9.1 - 3",
     "plotly.js-basic-dist": "1.54.1",
-    "popper.js": "1.16.1",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "popper.js": "^1.16.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "react-load-script": "0.0.6",
-    "react-router": "5.1.2",
-    "react-router-dom": "5.1.2",
-    "webpack-visualizer-plugin": "0.1.11"
+    "react-router": "5.2.0",
+    "react-router-dom": "5.2.0"
   },
   "resolutions": {
-    "@babel/preset-env": "7.5.5"
+    "@babel/runtime": "^7.12.5"
   }
 }
diff --git a/src/components/functions/FunctionsController.js b/src/components/functions/FunctionsController.js
@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
-import {Breadcrumb, Icon, Spin, Tooltip} from 'antd';
+import {Breadcrumb, Spin, Tooltip} from 'antd';
+import {EditOutlined} from '@ant-design/icons';
 import PlotComponent from './plots/PlotComponent.js';
 import MoreOptionsForm from './forms/MoreOptionsForm.js';
 import GenericForm from './forms/GenericForm.js';
@@ -11,7 +12,8 @@ import packageJson from '../../../package.json';
 import {Link} from "react-router-dom";
 import ErrorModal from "./modals/ErrorModal";
 import Script from 'react-load-script'
-import {Col, Row} from "react-bootstrap";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
 import FormItem from "antd/es/form/FormItem";
 
 export default class FunctionsController extends Component {
@@ -95,7 +97,7 @@ export default class FunctionsController extends Component {
                 <h3>{this.state.json.visibleName.concat(" ")}
                     <a href={packageJson.repository.concat("/edit/master/src/".concat(this.props.jsonPath))}>
                         <Tooltip title="Edit this page on GitHub!">
-                            <Icon type="edit" style={{ fontSize: 20, color: 'black' }} theme='twoTone' />
+                            <EditOutlined style={{ fontSize : 'small' }}/>
                         </Tooltip>
                     </a>
                 </h3>

diff --git a/src/components/functions/forms/GenericForm.js b/src/components/functions/forms/GenericForm.js
@@ -1,13 +1,18 @@
 import React from 'react';
 
 import Button from "antd/es/button/button";
-import Form from "antd/es/form/Form";
+
+// temporary workaround, waiting for https://github.com/libamtrack/web/issues/596 to be fixed
+// Form needs to be migrated to ant design v4
+import { Form as LegacyForm } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+
 import Input from "antd/es/input/Input";
 import Tooltip from "antd/es/tooltip/index";
 import Select from "antd/es/select/index";
 
 
-const FormItem = Form.Item;
+const FormItem = LegacyForm.Item;
 const InputGroup = Input.Group;
 const Option = Select.Option;
 
@@ -51,14 +56,14 @@ class FormGenerator extends React.Component {
         }
 
         return (
-            <Form onSubmit={this.handleSubmit} layout='horizontal' >
+            <LegacyForm onSubmit={this.handleSubmit} layout='horizontal' >
                 <div>
                     {generatedForm}
                 </div>
                     <FormItem style={{ margin: 6 }} label={" "} labelCol={{ span: textLabelForInputSpan }} wrapperCol={{ span: inputFieldSpan }} colon={false}>
                         <Button style={{ width: inputFieldWidth }} type='primary' htmlType='submit'>Submit</Button>
                     </FormItem>
-            </Form>
+            </LegacyForm>
         );
     };
 
@@ -107,7 +112,7 @@ class FormGenerator extends React.Component {
 
         return (
             <div>
-                <FormItem style={{ margin: 6 }} label={"Start " + label} labelCol={{ span: textLabelForInputSpan }} wrapperCol={{ span: inputFieldSpan }}>
+                <FormItem style={{ margin: 6 }} label={"Start " + label} labelCol={{ span: textLabelForInputSpan }} wrapperCol={{ span: inputFieldSpan}}>
                     <Tooltip title={"Insert start value"}>
                         {getFieldDecorator(startName, {
                             rules: [{
@@ -358,5 +363,5 @@ class FormGenerator extends React.Component {
     }
 }
 
-const GenericForm = Form.create()(FormGenerator);
+const GenericForm = LegacyForm.create()(FormGenerator);
 export default GenericForm;
diff --git a/src/components/functions/modals/DataSeriesModal.js b/src/components/functions/modals/DataSeriesModal.js
@@ -1,5 +1,6 @@
 import React from "react";
-import { Modal, List, Button, Icon } from 'antd';
+import { Modal, List, Button} from 'antd';
+import {DeleteOutlined, DownloadOutlined, EditTwoTone, TableOutlined} from '@ant-design/icons';
 
 const confirm = Modal.confirm;
 
@@ -36,12 +37,12 @@ export default class DataSeriesModal extends React.Component {
                     renderItem={series => (
                         <List.Item actions={
                             [
-                                <a onClick={() => this.props.showRenameModal(series.name)}>Rename <Icon type="edit" /></a>,
-                                <a onClick={() => this.props.showDataSeries(series.name)}>Show <Icon type="table" /></a>,
-                                <a onClick={() => this.props.downloadDataSeries(series)}>Download <Icon type="download" /></a>,
+                                <a onClick={() => this.props.showRenameModal(series.name)}>Rename <EditTwoTone /></a>,
+                                <a onClick={() => this.props.showDataSeries(series.name)}>Show <TableOutlined /></a>,
+                                <a onClick={() => this.props.downloadDataSeries(series)}>Download <DownloadOutlined /></a>,
                                 <a onClick={() => this.showConfirm(
                                     () => this.props.deleteDataSeries(series.name)
-                                )}>Delete <Icon type="delete" /></a>
+                                )}>Delete <DeleteOutlined /></a>
                             ]}>
                             <List.Item.Meta title={series.name} />
                         </List.Item>

diff --git a/src/components/functions/modals/ShowDataModal.js b/src/components/functions/modals/ShowDataModal.js
@@ -1,5 +1,6 @@
 import React from "react";
-import { Row, Col, Modal, Button, Icon, Tooltip } from 'antd';
+import { Row, Col, Modal, Button, Tooltip } from 'antd';
+import {EditTwoTone} from '@ant-design/icons';
 
 const ShowDataSeriesModal = (props) => {
     let i = 0;
@@ -12,8 +13,8 @@ const ShowDataSeriesModal = (props) => {
                         props.setModalVisible(props.name, false);
                         props.showRenameModal(props.dataSeriesName);
                     }}>
-                        <Tooltip title={"Edit name"}>
-                            <Icon type="edit" />
+                        <Tooltip title="Edit name">
+                            <EditTwoTone/>
                         </Tooltip>
                     </a>
                 </div>
@@ -38,7 +39,7 @@ const ShowDataSeriesModal = (props) => {
                 </div>
             }
         >
-            <Row type='flex' gutter={20} align="center">
+            <Row type='flex' gutter={20} align="middle">
                 <Col span={10} align="center">
                     <p>{"x"}</p>
                     {props.xList.map(x => (

diff --git a/src/components/functions/utils/SearchBox.js b/src/components/functions/utils/SearchBox.js
@@ -1,6 +1,6 @@
 import React from "react";
 import {Link, Redirect} from 'react-router-dom';
-import {AutoComplete, Button, Icon, Input} from 'antd';
+import {AutoComplete, Button, Input} from 'antd';
 
 export default class SearchBox extends React.Component {
     state = {
@@ -39,15 +39,12 @@ export default class SearchBox extends React.Component {
                 filterOption={(inputValue, option) =>
                     option.props.text.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
                 placeholder="Search functions"
-                optionLabelProp="text"
             >
-                <Input
-                    suffix={(
-                        <Button className="search-btn" size={size} style={buttonStyle} type="primary">
-                            <Icon type="search" />
-                        </Button>
-                    )}
-                />
+                <Input suffix={
+                    <Button shape="round" type="primary" size={size} style={buttonStyle}>
+                        Search
+                    </Button>
+                }/>
             </AutoComplete>
         );
     }

diff --git a/src/components/layouts/MainPage.js b/src/components/layouts/MainPage.js
@@ -6,11 +6,8 @@ import FunctionsView from '../layouts/FunctionsView.js';
 import SearchBox from "../functions/utils/SearchBox";
 import Layout from "antd/es/layout/layout";
 import Row from "antd/es/row/index";
-import Col from "react-bootstrap/es/Col";
-import ListGroup from "react-bootstrap/es/ListGroup";
-import ListGroupItem from "react-bootstrap/es/ListGroupItem";
-import Route from "react-router-dom/es/Route";
-import Link from "react-router-dom/es/Link";
+import {Col, ListGroup, ListGroupItem} from "react-bootstrap";
+import {Route, Link} from "react-router-dom";
 import packageJson from '../../../package.json';
 
 const { Header, Content, Footer } = Layout;
@@ -75,14 +72,14 @@ class MainPage extends React.Component {
                     this.state.introText = confData.introText;
                     this.state.dictionariesPaths = confData.dictionaries;
 
-                    let bundleAnalyzeReportOnlyAtWebDev = packageJson.homepage.indexOf("web_dev") === -1 ? "" : <Row><a href="report.html" target="_blank">{"See the bundle.js analyze"}</a></Row>;
+                    let bundleAnalyzeReportOnlyAtWebDev = packageJson.homepage.indexOf("web_dev") === -1 ? "" : <Row justify="center"><a href="report.html" target="_blank">{"See the bundle.js analyze"}</a></Row>;
 
                     this.state.footer = 
                     <Footer key={"footer"} style={{ textAlign: 'center', background: '#fff' }}>
-                        <Row>{confData.footerText1} Find code at
+                        <Row justify="center">{confData.footerText1} Find code at
                         <a href={packageJson.repository}><img key={"githubImg"} src={githubLogo} align="center" style={{ 'height': '25px', 'width': '62px', 'marginLeft': '3px', 'marginBottom': '3px'}}/></a></Row>
-                        <Row style={{  'font-size': '10px', 'font-style': 'italic' }}>{confData.footerText2}</Row>
-                        <Row style={{  'font-size': '10px', 'font-style': 'italic' }}>{"Deploy date: " + confData.deployDate + " from branch: "
+                        <Row justify="center" style={{  'fontSize': '10px', 'fontStyle': 'italic' }}>{confData.footerText2}</Row>
+                        <Row justify="center" style={{  'fontSize': '10px', 'fontStyle': 'italic' }}>{"Deploy date: " + confData.deployDate + " from branch: "
                         + confData.deployBranch + " and commit number: " + confData.deployCommit}</Row>
                         {bundleAnalyzeReportOnlyAtWebDev}
                     </Footer>;
@@ -108,16 +105,16 @@ class MainPage extends React.Component {
                 this.setState({
                     rows:
                         (<div>
-                            <Row key={1} type='flex' gutter={10} align="center" style={{ paddingBottom: 25, paddingLeft: 25, paddingRight: 25 }}>
+                            <Row key={1} type='flex' gutter={10} justify="center" style={{ paddingBottom: 25, paddingLeft: 25, paddingRight: 25 }}>
                                 {this.state.introText}
                             </Row>
-                            <Row key={2} type='flex' gutter={10} align="center" style={{ paddingBottom: 25 }}>
+                            <Row key={2} type='flex' gutter={10} justify="center" style={{ paddingBottom: 25 }}>
                                 <SearchBox
                                     searchFuns={this.state.funs}
                                     searchStyle={searchStyle}
                                 />
                             </Row>
-                            <Row key={3} type='flex' gutter={10} align="center" style={{ paddingBottom: 25 }}>
+                            <Row key={3} type='flex' gutter={10} justify="center" style={{ paddingBottom: 25 }}>
                                 {categoriesForColumns.map((colums, index) => (
                                     <Col span={6} key={index} style={{ paddingLeft: 10, width: 320}}>
                                         {colums.map(category => (
@@ -158,7 +155,7 @@ class MainPage extends React.Component {
                     <Layout key={"mainLayout"} className="layout">
                         {/*LOGO*/}
                         <Header key={"logoHeader"} style={{ background: "#fff", height: "200px" }}>
-                            <Row key={"logoRow"} type='flex' gutter={8} align="center">
+                            <Row key={"logoRow"} type='flex' gutter={8} align="middle" justify="center">
                                 <img key={"logoImg"} src={logo} align="center" className="App-logo" alt="logo" />
                             </Row>
                         </Header>