Included JSX files in the linter check.

web/.eslintrc.js

@@ -29,6 +29,7 @@ module.exports = {
     'babelOptions': {
       'plugins': [
         '@babel/plugin-syntax-jsx',
+        '@babel/plugin-proposal-class-properties',
       ],
     },
   },

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",

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,
 };
 

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,

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 => {
           <polyline className="svg-link-ele" points="-8,0 0,15 0,0 0,30 0,15 8,0" fill="none" strokeWidth={props.width} />
         </>
       );
-    } else if (type == 'one') {
+    } else if (itype == 'one') {
       return (
         <polyline className="svg-link-ele" points="-8,15 0,15 0,0 0,30 0,15 8,15" fill="none" strokeWidth={props.width} />
       );
@@ -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;
             },

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);

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);
   }
 
@@ -585,7 +585,7 @@ export default class BodyWidget extends React.Component {
         '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);
@@ -609,7 +609,7 @@ export default class BodyWidget extends React.Component {
           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);
   }
@@ -892,4 +892,5 @@ BodyWidget.propTypes = {
   pgWindow: PropTypes.object.isRequired,
   pgAdmin: PropTypes.object.isRequired,
   alertify: PropTypes.object.isRequired,
+  panel: PropTypes.object,
 };

web/pgadmin/tools/erd/static/js/erd_tool/ui_components/ToolBar.jsx

@@ -28,6 +28,7 @@ const BaseIconButton = forwardRef((props, ref)=>{
     </button>
   );
 });
+BaseIconButton.displayName = 'BaseIconButton';
 
 BaseIconButton.propTypes = {
   icon: PropTypes.string,
@@ -88,6 +89,7 @@ export const IconButton = forwardRef((props, ref) => {
     return <BaseIconButton ref={ref} className='btn btn-sm btn-primary-icon' {...otherProps}/>;
   }
 });
+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
+  ]),
 };