Add missing eslint React rules and fix the linter errors.

pgadmin-org · Oct 1, 2024 · c6d7a0a · c6d7a0a
1 parent 485c654
commit c6d7a0a
Show file tree

Hide file tree

Showing 19 changed files with 223 additions and 160 deletions.
diff --git a/web/.eslintrc.js b/web/.eslintrc.js
@@ -44,6 +44,8 @@ module.exports = [
             '@babel/plugin-proposal-class-properties',
           ],
         },
+        ...reactjs.configs.recommended.parserOptions,
+        ...reactjs.configs['jsx-runtime'].parserOptions,
       },
       'sourceType': 'module',
       globals: {
@@ -86,8 +88,10 @@ module.exports = [
       'no-prototype-builtins': 'off',
       'no-global-assign': 'off',
       'no-import-assign': 'off',
-      'react/jsx-uses-vars': 'error',
-      'react/jsx-uses-react': 'error'
+      ...reactjs.configs.recommended.rules,
+      ...reactjs.configs['jsx-runtime'].rules,
+      'react/jsx-uses-react': 'error',
+      'react/jsx-uses-vars': 'error'
     },
     'settings': {
       'react': {
@@ -123,5 +127,5 @@ module.exports = [
       'jest/no-conditional-expect': 'off',
       'jest/valid-title': 'off',
     },
-  }
+  },
 ];
diff --git a/web/package.json b/web/package.json
@@ -61,7 +61,7 @@
     "svgo-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.1.1",
     "typescript": "^5.4.5",
-    "typescript-eslint": "^8.3.0",
+    "typescript-eslint": "^8.8.0",
     "url-loader": "^4.1.1",
     "webfonts-loader": "^8.0.1",
     "webpack": "^5.88.2",

diff --git a/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx b/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx
@@ -161,6 +161,7 @@ function RightPanel({ schema, refreshKey, ...props }) {
 
 RightPanel.propTypes = {
   schema: PropTypes.object,
+  refreshKey: PropTypes.number,
   initValues: PropTypes.object,
   onDataChange: PropTypes.func
 };

diff --git a/web/pgadmin/static/js/SchemaView/DataGridView/features/reorder.jsx b/web/pgadmin/static/js/SchemaView/DataGridView/features/reorder.jsx
@@ -17,6 +17,7 @@ import { booleanEvaluator, registerOptionEvaluator } from '../../options';
 
 import { ACTION_COLUMN } from './common';
 import Feature from './feature';
+import PropTypes from 'prop-types';
 
 
 // Register the 'canReorder' options for the collection
@@ -61,6 +62,9 @@ export default class Reorder extends Feature {
     };
 
     Cell.displayName = 'ReorderCell';
+    Cell.propTypes = {
+      row: PropTypes.object,
+    };
 
     columns.splice(0, 0, {
       ...ACTION_COLUMN,

diff --git a/web/pgadmin/static/js/SchemaView/FormView.jsx b/web/pgadmin/static/js/SchemaView/FormView.jsx
@@ -59,7 +59,7 @@ const ErrorMessageBox = () => {
 
 // The first component of schema view form.
 export default function FormView({
-  accessPath, schema=null, isNested=false, dataDispatch, className, 
+  accessPath, schema=null, isNested=false, dataDispatch, className,
   hasSQLTab, getSQLValue, isTabView=true, viewHelperProps, field,
   showError=false, resetKey, focusOnFirstInput=false
 }) {
@@ -133,7 +133,7 @@ export default function FormView({
       onScreenTracker.current = false;
     }
   }, [isOnScreen]);
-  
+
   listenDepChanges(
     accessPath, field, schemaState, () => subscriberManager.current?.signal()
   );
@@ -180,7 +180,7 @@ export default function FormView({
               scrollButtons="auto"
               action={(ref) => ref?.updateIndicator()}
             >{
-                finalGroups.map((tabGroup, idx) => 
+                finalGroups.map((tabGroup, idx) =>
                   <Tab
                     key={tabGroup.id}
                     label={tabGroup.label}
@@ -191,14 +191,14 @@ export default function FormView({
                     }
                   />
                 )
-              }{hasSQLTab && 
+              }{hasSQLTab &&
                 <Tab
                   key={'sql-tab'}
                   label={gettext('SQL')}
                   data-test={'SQL'}
                 />
               }</Tabs>
-          </Box> 
+          </Box>
           {
             finalGroups.map((group, idx) => {
               let contentClassName = [
@@ -238,7 +238,7 @@ export default function FormView({
             })
           }
           {
-            hasSQLTab && 
+            hasSQLTab &&
               <TabPanel
                 key={'sql-tab'}
                 value={tabValue}
@@ -313,6 +313,8 @@ FormView.propTypes = {
   className: CustomPropTypes.className,
   field: PropTypes.object,
   showError: PropTypes.bool,
+  resetKey: PropTypes.number,
+  focusOnFirstInput: PropTypes.bool,
 };
 
 registerView(FormView, 'FormView');
diff --git a/web/pgadmin/static/js/SchemaView/InlineView.jsx b/web/pgadmin/static/js/SchemaView/InlineView.jsx
@@ -51,7 +51,8 @@ InlineView.propTypes = {
   children : PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node
-  ])
+  ]),
+  viewHelperProps: PropTypes.object,
 };
 
 registerView(InlineView, 'InlineView');
diff --git a/web/pgadmin/static/js/SchemaView/MappedControl.jsx b/web/pgadmin/static/js/SchemaView/MappedControl.jsx
@@ -177,7 +177,7 @@ MappedFormControlBase.propTypes = {
   type: PropTypes.oneOfType([
     PropTypes.string, PropTypes.func,
   ]).isRequired,
-  value: PropTypes.any,
+  state: PropTypes.any,
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   onChange: PropTypes.func,
   className: PropTypes.oneOfType([
@@ -333,6 +333,10 @@ export const StaticMappedFormControl = ({accessPath, field, ...props}) => {
   );
 };
 
+StaticMappedFormControl.propTypes = {
+  accessPath: PropTypes.array.isRequired,
+  field: PropTypes.object,
+};
 
 export const MappedFormControl = ({
   accessPath, dataDispatch, field, onChange, ...props
@@ -415,6 +419,8 @@ export const MappedFormControl = ({
 };
 
 MappedFormControl.propTypes = {
+  accessPath: PropTypes.array.isRequired,
+  field: PropTypes.object,
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
 };
 

diff --git a/web/pgadmin/static/js/SchemaView/ResetButton.jsx b/web/pgadmin/static/js/SchemaView/ResetButton.jsx
@@ -11,6 +11,7 @@ import React, { useContext, useEffect, useState } from 'react';
 
 import { DefaultButton } from 'sources/components/Buttons';
 import { SchemaStateContext } from './SchemaState';
+import PropTypes from 'prop-types';
 
 
 export function ResetButton({label, icon, onClick}) {
@@ -40,3 +41,9 @@ export function ResetButton({label, icon, onClick}) {
     </DefaultButton>
   );
 }
+
+ResetButton.propTypes = {
+  label: PropTypes.string,
+  icon: PropTypes.any,
+  onClick: PropTypes.func,
+};
diff --git a/web/pgadmin/static/js/SchemaView/SaveButton.jsx b/web/pgadmin/static/js/SchemaView/SaveButton.jsx
@@ -11,10 +11,11 @@ import React, { useContext, useEffect, useState } from 'react';
 
 import { PrimaryButton } from 'sources/components/Buttons';
 import { SchemaStateContext } from './SchemaState';
+import PropTypes from 'prop-types';
 
 
 export function SaveButton({
-  label, Icon, checkDirtyOnEnableSave, onClick, mode,
+  label, icon, checkDirtyOnEnableSave, onClick, mode,
 }) {
   const [key, setKey] = useState(0);
   const schemaState = useContext(SchemaStateContext);
@@ -41,10 +42,18 @@ export function SaveButton({
 
   return (
     <PrimaryButton
-      data-test='Save' onClick={onClick} startIcon={Icon}
+      data-test='Save' onClick={onClick} startIcon={icon}
       disabled={isDisabled}
     >
       {label}
     </PrimaryButton>
   );
 }
+
+SaveButton.propTypes = {
+  label: PropTypes.string,
+  icon: PropTypes.any,
+  onClick: PropTypes.func,
+  checkDirtyOnEnableSave: PropTypes.bool,
+  mode: PropTypes.string,
+};
diff --git a/web/pgadmin/static/js/SchemaView/SchemaDialogView.jsx b/web/pgadmin/static/js/SchemaView/SchemaDialogView.jsx
@@ -172,8 +172,6 @@ export default function SchemaDialogView({
     return <SaveIcon />;
   };
 
-  let ButtonIcon = getButtonIcon();
-
   /* I am Groot */
   return useMemo(() =>
     <StyledBox>
@@ -219,7 +217,7 @@ export default function SchemaDialogView({
                 icon={<SettingsBackupRestoreIcon />}
                 label={ gettext('Reset') }/>
               <SaveButton
-                onClick={onSaveClick} Icon={ButtonIcon}
+                onClick={onSaveClick} icon={getButtonIcon()}
                 label={props.customSaveBtnName || gettext('Save')}
                 checkDirtyOnEnableSave={checkDirtyOnEnableSave}
                 mode={viewHelperProps.mode}

diff --git a/web/pgadmin/static/js/components/SearchInputText.jsx b/web/pgadmin/static/js/components/SearchInputText.jsx
@@ -49,4 +49,5 @@ SearchInputText.propTypes = {
   placeholder: PropTypes.string,
   size: PropTypes.oneOf(Object.values(SEARCH_INPUT_SIZE)),
   alignment: PropTypes.oneOf(Object.values(SEARCH_INPUT_ALIGNMENT)),
+  style: PropTypes.object,
 };
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
@@ -75,7 +75,7 @@ const StyledPgReactDataGrid = styled(PgReactDataGrid)(({theme})=>({
       backgroundColor: theme.palette.grey[600],
     },
     '& .rdg-cell:nth-of-type(1)[aria-selected="true"]':{
-      backgroundColor: theme.palette.primary.main, 
+      backgroundColor: theme.palette.primary.main,
       color: theme.palette.primary.contrastText,
     },
   },
@@ -321,6 +321,7 @@ function RowNumColFormatter({row, rowKeyGetter, rowIdx, dataChangeStore, onSelec
 RowNumColFormatter.propTypes = {
   row: PropTypes.object,
   rowKeyGetter: PropTypes.func,
+  rowIdx: PropTypes.number,
   dataChangeStore: PropTypes.object,
   onSelectedColumnsChange: PropTypes.func,
 };
@@ -460,4 +461,5 @@ QueryToolDataGrid.propTypes = {
   onSelectedColumnsChange: PropTypes.func,
   rowKeyGetter: PropTypes.func,
   columnWidthBy: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  startRowNum: PropTypes.number,
 };
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/GeometryViewer.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/GeometryViewer.jsx
@@ -276,6 +276,7 @@ GeoJsonLayer.propTypes = {
     getPopupContent: PropTypes.func,
     infoList: PropTypes.array,
   }),
+  setHomeCoordinates: PropTypes.func,
 };
 
 function TheMap({data}) {
@@ -311,7 +312,7 @@ function TheMap({data}) {
         this._map.setView(this.options.homeCoordinates.getCenter(), this.options.homeZoom);
       }
     };
-    
+
     zoomControlWithHome.current.onAdd = function (map) {
       let controlName = 'leaflet-control-zoom',
         container = Leaflet.DomUtil.create('div', controlName + ' leaflet-bar'),

diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSetToolbar.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSetToolbar.jsx
@@ -225,6 +225,11 @@ function PaginationInputs({pagination, totalRowCount, clearSelection}) {
     </Box>
   );
 }
+PaginationInputs.propTypes = {
+  pagination: PropTypes.object,
+  totalRowCount: PropTypes.number,
+  clearSelection: PropTypes.func,
+};
 export function ResultSetToolbar({query, canEdit, totalRowCount, pagination, allRowsSelect}) {
   const eventBus = useContext(QueryToolEventsContext);
   const queryToolCtx = useContext(QueryToolContext);
@@ -450,4 +455,6 @@ ResultSetToolbar.propTypes = {
   query: PropTypes.string,
   canEdit: PropTypes.bool,
   totalRowCount: PropTypes.number,
+  allRowsSelect: PropTypes.string,
+  pagination: PropTypes.object,
 };
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/StatusBar.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/StatusBar.jsx
@@ -16,6 +16,7 @@ import { useStopwatch } from '../../../../../../static/js/custom_hooks';
 import { QueryToolEventsContext } from '../QueryToolComponent';
 import gettext from 'sources/gettext';
 import { PgMenu, PgMenuItem, usePgMenuGroup } from '../../../../../../static/js/components/Menu';
+import PropTypes from 'prop-types';
 
 
 const StyledBox = styled(Box)(({theme}) => ({
@@ -110,7 +111,7 @@ export function StatusBar({eol, handleEndOfLineChange}) {
 
   return (
     <StyledBox>
-      {rowsCount && <Box className='StatusBar-padding StatusBar-divider'>{gettext('Total rows: %s', rowsCount)}</Box>}
+      <Box className='StatusBar-padding StatusBar-divider'>{gettext('Total rows: %s', rowsCount)}</Box>
       {lastTaskText &&
         <Box className='StatusBar-padding StatusBar-divider'>{lastTaskText} {hours.toString().padStart(2, '0')}:{minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')}.{msec.toString().padStart(3, '0')}</Box>
       }
@@ -157,3 +158,8 @@ export function StatusBar({eol, handleEndOfLineChange}) {
     </StyledBox>
   );
 }
+
+StatusBar.propTypes = {
+  eol: PropTypes.string,
+  handleEndOfLineChange: PropTypes.func,
+};
diff --git a/web/regression/feature_tests/query_tool_tests.py b/web/regression/feature_tests/query_tool_tests.py
@@ -154,7 +154,8 @@ def _pagination_result(self):
                 QueryToolLocators.pagination_inputs +
                 f' span:nth-of-type(1)')
 
-            self.assertEqual(page_info.text, f"Showing: {page['page_info']}")
+            self.assertEqual(page_info.text,
+                             f"Showing rows: {page['page_info']}")
 
             page_info = self.page.find_by_css_selector(
                 QueryToolLocators.pagination_inputs + ' span:nth-of-type(3)')

diff --git a/web/regression/javascript/fake_theme.js b/web/regression/javascript/fake_theme.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Theme from 'sources/Theme';
 
 export function withTheme(WrappedComp) {
+  /* eslint-disable react/display-name */
   return (props)=>{
     return <Theme><WrappedComp {...props}/></Theme>;
   };

diff --git a/web/regression/javascript/genericFunctions.jsx b/web/regression/javascript/genericFunctions.jsx
@@ -18,6 +18,7 @@ import { act, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 export function withBrowser(WrappedComp) {
+  /* eslint-disable react/display-name */
   return (props)=>{
     return <Theme>
       <PgAdminContext.Provider value={fakePgAdmin}>