diff --git a/web/.eslintrc.js b/web/.eslintrc.js index ce89c7b0e..dc5531948 100644 --- a/web/.eslintrc.js +++ b/web/.eslintrc.js @@ -29,6 +29,7 @@ module.exports = { 'babelOptions': { 'plugins': [ '@babel/plugin-syntax-jsx', + '@babel/plugin-proposal-class-properties', ], }, }, diff --git a/web/package.json b/web/package.json index a23a4db31..3befc9aed 100644 --- a/web/package.json +++ b/web/package.json @@ -128,7 +128,7 @@ "wkx": "^0.5.0" }, "scripts": { - "linter": "yarn eslint --no-eslintrc -c .eslintrc.js --ext .js .", + "linter": "yarn eslint --no-eslintrc -c .eslintrc.js --ext .js --ext .jsx .", "webpacker": "yarn run webpack --config webpack.config.js --progress", "webpacker:watch": "yarn run webpack --config webpack.config.js --progress --watch", "bundle:watch": "yarn run linter && yarn run webpacker:watch", diff --git a/web/pgadmin/dashboard/static/js/Graphs.jsx b/web/pgadmin/dashboard/static/js/Graphs.jsx index 7d945d4d3..dd6b1c98a 100644 --- a/web/pgadmin/dashboard/static/js/Graphs.jsx +++ b/web/pgadmin/dashboard/static/js/Graphs.jsx @@ -250,6 +250,7 @@ Graphs.propTypes = { PropTypes.string.isRequired, PropTypes.number.isRequired, ]), + pageVisible: PropTypes.bool, enablePoll: PropTypes.bool, }; @@ -330,40 +331,40 @@ export function GraphsWrapper(props) { return ( <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); } diff --git a/web/pgadmin/static/js/chartjs/index.jsx b/web/pgadmin/static/js/chartjs/index.jsx index 022e63875..dd88b2aba 100644 --- a/web/pgadmin/static/js/chartjs/index.jsx +++ b/web/pgadmin/static/js/chartjs/index.jsx @@ -81,8 +81,10 @@ export default function BaseChart({type='line', id, options, data, redraw=false, BaseChart.propTypes = { type: PropTypes.string.isRequired, + id: PropTypes.string, data: PropTypes.object.isRequired, options: PropTypes.object, + redraw: PropTypes.bool, updateOptions: PropTypes.object, onInit: PropTypes.func, onUpdate: PropTypes.func, diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/links/OneToManyLink.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/links/OneToManyLink.jsx index 0121804d8..cd4e30a8c 100644 --- a/web/pgadmin/tools/erd/static/js/erd_tool/links/OneToManyLink.jsx +++ b/web/pgadmin/tools/erd/static/js/erd_tool/links/OneToManyLink.jsx @@ -18,6 +18,7 @@ import { } from '@projectstorm/react-diagrams'; import {Point} from '@projectstorm/geometry'; import _ from 'lodash'; +import PropTypes from 'prop-types'; export const OneToManyModel = { local_table_uid: undefined, @@ -84,7 +85,7 @@ const CustomLinkEndWidget = props => { ); - } else if (type == 'one') { + } else if (itype == 'one') { return ( ); @@ -102,6 +103,15 @@ const CustomLinkEndWidget = props => { ); }; +CustomLinkEndWidget.propTypes = { + point: PropTypes.instanceOf(PointModel).isRequired, + rotation: PropTypes.number.isRequired, + tx: PropTypes.number.isRequired, + ty: PropTypes.number.isRequired, + type: PropTypes.oneOf(['many', 'one']).isRequired, + width: PropTypes.number, +}; + export class OneToManyLinkWidget extends RightAngleLinkWidget { constructor(props) { super(props); @@ -243,7 +253,7 @@ export class OneToManyLinkWidget extends RightAngleLinkWidget { window.addEventListener('mouseup', this.handleUp); } }, - onMouseEnter: (event) => { + onMouseEnter: () => { this.setState({ selected: true }); this.props.link.lastHoverIndexOfPath = j; }, diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx index 95a624d81..c4c62b4b4 100644 --- a/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx +++ b/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx @@ -8,7 +8,7 @@ ////////////////////////////////////////////////////////////// import React from 'react'; -import { DefaultNodeModel, PortWidget } from '@projectstorm/react-diagrams'; +import { DefaultNodeModel, DiagramEngine, PortWidget } from '@projectstorm/react-diagrams'; import { AbstractReactFactory } from '@projectstorm/react-canvas-core'; import _ from 'lodash'; import { IconButton, DetailsToggleButton } from '../ui_components/ToolBar'; @@ -17,6 +17,7 @@ import TableIcon from 'top/browser/server_groups/servers/databases/schemas/table import PrimaryKeyIcon from 'top/browser/server_groups/servers/databases/schemas/tables/constraints/index_constraint/static/img/primary_key.svg'; import ForeignKeyIcon from 'top/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/static/img/foreign_key.svg'; import ColumnIcon from 'top/browser/server_groups/servers/databases/schemas/tables/columns/static/img/column.svg'; +import PropTypes from 'prop-types'; const TYPE = 'table'; @@ -127,6 +128,11 @@ function RowIcon({icon}) { ); } +RowIcon.propTypes = { + icon: PropTypes.any.isRequired, +}; + + export class TableNodeWidget extends React.Component { constructor(props) { super(props); @@ -206,6 +212,11 @@ export class TableNodeWidget extends React.Component { } } +TableNodeWidget.propTypes = { + node: PropTypes.instanceOf(TableNodeModel), + engine: PropTypes.instanceOf(DiagramEngine), +}; + export class TableNodeFactory extends AbstractReactFactory { constructor() { super(TYPE); diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/BodyWidget.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/BodyWidget.jsx index b79252992..05a55fca6 100644 --- a/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/BodyWidget.jsx +++ b/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/BodyWidget.jsx @@ -292,7 +292,7 @@ export default class BodyWidget extends React.Component { closePanel() { window.onbeforeunload = null; - this.props.panel.off(wcDocker.EVENT.CLOSING); + this.props.panel.off(window.wcDocker.EVENT.CLOSING); this.props.pgWindow.pgAdmin.Browser.docker.removePanel(this.props.panel); } @@ -555,16 +555,16 @@ export default class BodyWidget extends React.Component { let nodesRect = this.diagram.getEngine().getBoundingNodesRect(this.diagram.getModel().getNodes(), 10); let canvasRect = this.canvasEle.getBoundingClientRect(); let canvasTopLeftPoint = { - x: canvasRect.left, - y: canvasRect.top + x: canvasRect.left, + y: canvasRect.top }; let nodeLayerTopLeftPoint = { - x: canvasTopLeftPoint.x + this.diagram.getModel().getOffsetX(), - y: canvasTopLeftPoint.y + this.diagram.getModel().getOffsetY() + x: canvasTopLeftPoint.x + this.diagram.getModel().getOffsetX(), + y: canvasTopLeftPoint.y + this.diagram.getModel().getOffsetY() }; let nodesRectTopLeftPoint = { - x: nodeLayerTopLeftPoint.x + nodesRect.getTopLeft().x, - y: nodeLayerTopLeftPoint.y + nodesRect.getTopLeft().y + x: nodeLayerTopLeftPoint.x + nodesRect.getTopLeft().x, + y: nodeLayerTopLeftPoint.y + nodesRect.getTopLeft().y }; let prevTransform = this.canvasEle.querySelector('div').style.transform; this.canvasEle.childNodes.forEach((ele)=>{ @@ -579,37 +579,37 @@ export default class BodyWidget extends React.Component { /* html2canvas ignores CSS styles, set the CSS styles to inline */ const setSvgInlineStyles = (targetElem) => { const transformProperties = [ - 'fill', - 'color', - 'font-size', - 'stroke', - 'font' + 'fill', + 'color', + 'font-size', + 'stroke', + 'font' ]; - let svgElems = Array.from(targetElem.getElementsByTagName("svg")); + let svgElems = Array.from(targetElem.getElementsByTagName('svg')); for (let svgEle of svgElems) { - svgEle.setAttribute('width', svgEle.clientWidth); - svgEle.setAttribute('height', svgEle.clientHeight); - /* Wrap the SVG in a div tag so that transforms are consistent with html */ - let wrap = document.createElement('div'); - wrap.setAttribute('style', svgEle.getAttribute('style')); - svgEle.setAttribute('style', null); - svgEle.parentNode.appendChild(wrap); - wrap.appendChild(svgEle); - recurseElementChildren(svgEle); + svgEle.setAttribute('width', svgEle.clientWidth); + svgEle.setAttribute('height', svgEle.clientHeight); + /* Wrap the SVG in a div tag so that transforms are consistent with html */ + let wrap = document.createElement('div'); + wrap.setAttribute('style', svgEle.getAttribute('style')); + svgEle.setAttribute('style', null); + svgEle.parentNode.appendChild(wrap); + wrap.appendChild(svgEle); + recurseElementChildren(svgEle); } function recurseElementChildren(node) { - if (!node.style) - return; + if (!node.style) + return; - let styles = getComputedStyle(node); - for (let transformProperty of transformProperties) { - node.style[transformProperty] = styles[transformProperty]; - } - for (let child of Array.from(node.childNodes)) { - recurseElementChildren(child); - } + let styles = getComputedStyle(node); + for (let transformProperty of transformProperties) { + node.style[transformProperty] = styles[transformProperty]; + } + for (let child of Array.from(node.childNodes)) { + recurseElementChildren(child); + } } - } + }; setTimeout(()=>{ html2canvas(this.canvasEle, { @@ -720,7 +720,7 @@ export default class BodyWidget extends React.Component { } } - onNoteClick(e) { + onNoteClick() { let noteNode = this.diagram.getSelectedNodes()[0]; this.showNote(noteNode); } @@ -810,65 +810,65 @@ export default class BodyWidget extends React.Component { render() { return ( <> - - - - {this.onSaveDiagram();}} title={gettext('Save project')} - shortcut={this.state.preferences.save_project} disabled={!this.state.dirty}/> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - {this.canvasEle = ele?.ref?.current;}} engine={this.diagram.getEngine()} /> -
+ + + + {this.onSaveDiagram();}} title={gettext('Save project')} + shortcut={this.state.preferences.save_project} disabled={!this.state.dirty}/> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + {this.canvasEle = ele?.ref?.current;}} engine={this.diagram.getEngine()} /> +
); } @@ -892,4 +892,5 @@ BodyWidget.propTypes = { pgWindow: PropTypes.object.isRequired, pgAdmin: PropTypes.object.isRequired, alertify: PropTypes.object.isRequired, + panel: PropTypes.object, }; diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/ToolBar.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/ToolBar.jsx index fe4280af3..655a4aee9 100644 --- a/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/ToolBar.jsx +++ b/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/ToolBar.jsx @@ -28,6 +28,7 @@ const BaseIconButton = forwardRef((props, ref)=>{ ); }); +BaseIconButton.displayName = 'BaseIconButton'; BaseIconButton.propTypes = { icon: PropTypes.string, @@ -88,6 +89,7 @@ export const IconButton = forwardRef((props, ref) => { return ; } }); +IconButton.displayName = 'IconButton'; IconButton.propTypes = { title: PropTypes.string, @@ -120,6 +122,10 @@ export function ButtonGroup({className, children}) { ButtonGroup.propTypes = { className: PropTypes.string, + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node + ]), }; /* Toolbar container */ @@ -131,6 +137,10 @@ export default function ToolBar({id, children}) { ); } -ButtonGroup.propTypes = { +ToolBar.propTypes = { id: PropTypes.string, + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node + ]), };