From 8cdde47c2bfabf30a08d4cf4c289a935762df116 Mon Sep 17 00:00:00 2001 From: Leszek Grzanka Date: Mon, 11 Jan 2021 08:58:32 +0100 Subject: [PATCH] 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 --- package.json | 84 ++++++++++--------- .../functions/FunctionsController.js | 8 +- src/components/functions/forms/GenericForm.js | 17 ++-- .../functions/modals/DataSeriesModal.js | 11 +-- .../functions/modals/ShowDataModal.js | 9 +- src/components/functions/utils/SearchBox.js | 15 ++-- src/components/layouts/MainPage.js | 23 +++-- webpack.config.js | 64 +++++--------- 8 files changed, 110 insertions(+), 121 deletions(-) diff --git a/package.json b/package.json index b3e1d471..02c0a96e 100644 --- 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 index 1b5cabed..1550b68f 100644 --- 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 {

{this.state.json.visibleName.concat(" ")} - +

diff --git a/src/components/functions/forms/GenericForm.js b/src/components/functions/forms/GenericForm.js index 363f8f17..0a203971 100644 --- 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 ( -
+
{generatedForm}
- +
); }; @@ -107,7 +112,7 @@ class FormGenerator extends React.Component { return (
- + {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; \ No newline at end of file diff --git a/src/components/functions/modals/DataSeriesModal.js b/src/components/functions/modals/DataSeriesModal.js index 4c7841e5..cf2347e6 100644 --- 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 => ( this.props.showRenameModal(series.name)}>Rename , - this.props.showDataSeries(series.name)}>Show , - this.props.downloadDataSeries(series)}>Download , + this.props.showRenameModal(series.name)}>Rename , + this.props.showDataSeries(series.name)}>Show , + this.props.downloadDataSeries(series)}>Download , this.showConfirm( () => this.props.deleteDataSeries(series.name) - )}>Delete + )}>Delete ]}> diff --git a/src/components/functions/modals/ShowDataModal.js b/src/components/functions/modals/ShowDataModal.js index b9280574..b4c31784 100644 --- 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); }}> - - + +
@@ -38,7 +39,7 @@ const ShowDataSeriesModal = (props) => { } > - +

{"x"}

{props.xList.map(x => ( diff --git a/src/components/functions/utils/SearchBox.js b/src/components/functions/utils/SearchBox.js index 6bd40220..4de6bd2c 100644 --- 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" > - - - - )} - /> + + Search + + }/> ); } diff --git a/src/components/layouts/MainPage.js b/src/components/layouts/MainPage.js index ad4aeaa5..3226d2f4 100644 --- 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 ? "" : {"See the bundle.js analyze"}; + let bundleAnalyzeReportOnlyAtWebDev = packageJson.homepage.indexOf("web_dev") === -1 ? "" : {"See the bundle.js analyze"}; this.state.footer =
- {confData.footerText1} Find code at + {confData.footerText1} Find code at - {confData.footerText2} - {"Deploy date: " + confData.deployDate + " from branch: " + {confData.footerText2} + {"Deploy date: " + confData.deployDate + " from branch: " + confData.deployBranch + " and commit number: " + confData.deployCommit} {bundleAnalyzeReportOnlyAtWebDev}
; @@ -108,16 +105,16 @@ class MainPage extends React.Component { this.setState({ rows: (
- + {this.state.introText} - + - + {categoriesForColumns.map((colums, index) => ( {colums.map(category => ( @@ -158,7 +155,7 @@ class MainPage extends React.Component { {/*LOGO*/}
- + logo
diff --git a/webpack.config.js b/webpack.config.js index d278e914..8f450a8a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,64 +1,46 @@ -const HtmlWebPackPlugin = require("html-webpack-plugin"); -const CopyWebpackPlugin = require("copy-webpack-plugin"); -const path = require('path'); -const webpack = require("webpack"); +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const { CleanWebpackPlugin } = require('clean-webpack-plugin'); +const CopyPlugin = require("copy-webpack-plugin"); +const path = require("path"); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; -var Visualizer = require('webpack-visualizer-plugin'); -const htmlPlugin = new HtmlWebPackPlugin({ - template: "./src/index.html", - filename: "./index.html" -}); -const copyStatic = new CopyWebpackPlugin([ - { - from: 'src/static/', - to: "static/" - } -]); -const copyWasm = new CopyWebpackPlugin([ - { - from: 'src/libat.wasm', - to: "" - } -]); module.exports = { entry: ['@babel/polyfill', './src/index.js'], - node: { - fs: 'empty' - }, - target: 'web', output: { - path: path.join(__dirname, "dist"), + path: path.resolve(process.cwd(), 'dist'), filename: "bundle.js" }, - module: { rules: [ { test: /\.js$/, exclude: /node_modules/, - use: { - loader: "babel-loader" - } + use: ["babel-loader"] }, { test: /\.css$/, use: ["style-loader", "css-loader"] }, { - test: /\.(png|jpg|gif)$/, - use: [ - { - loader: 'file-loader', - options: {} - } - ] + test: /\.(png|jpg|gif|ico)$/, + loader: 'file-loader', }, ] }, - plugins: [htmlPlugin, copyStatic, copyWasm, new BundleAnalyzerPlugin({"openAnalyzer":false, "analyzerMode":"static"}), - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify('production') - }), new Visualizer({"filename":"report.html"})] + plugins: [ + new CleanWebpackPlugin({ + cleanStaleWebpackAssets: false, + }), + new HtmlWebpackPlugin({ + template: path.resolve(__dirname, "src", "index.html") + }), + new CopyPlugin({ + patterns: [ + { from: "src/static" , to : "static"}, + { from: "src/libat.wasm"}, + ] + }), + new BundleAnalyzerPlugin({"openAnalyzer":false, "analyzerMode":"static"}) + ] }; \ No newline at end of file