Fixed a couple of SonarQube issues.

web/pgadmin/browser/server_groups/servers/static/js/server.ui.js

@@ -466,7 +466,7 @@ export default class ServerSchema extends BaseUISchema {
       /* Hostname, IP address validate */
       if (state.host) {
         // Check for leading and trailing spaces.
-        if (/^\s|\s$/.test(state.host)){
+        if (/(^\s)|(\s$)/.test(state.host)){
           errmsg = gettext('Host name must be valid hostname or IPv4 or IPv6 address.');
           setError('host', errmsg);
           return true;

web/pgadmin/dashboard/static/js/Dashboard.jsx

@@ -134,7 +134,7 @@ export default function Dashboard({
   if (!did) {
     tabs.push(gettext('Configuration'));
   }
-  tabVal == 3 && did && setTabVal(0);
+
   const tabChanged = (e, tabVal) => {
     setTabVal(tabVal);
   };
@@ -725,6 +725,10 @@ export default function Dashboard({
         'Please connect to the selected server to view the dashboard.'
       );
 
+    if(tabVal == 3 && did) {
+      setTabVal(0);
+    }
+
     if (sid && props.serverConnected) {
 
       if (tabVal === 0) {

web/pgadmin/misc/cloud/static/js/azure.js

@@ -85,7 +85,7 @@ export function AzureCredentials(props) {
           }, 1000);
         });
       }
-    });
+    }, {}, _eventBus);
     setCloudDBCredInstance(azureCloudDBCredSchema);
   }, [props.cloudProvider]);
 

web/pgadmin/misc/cloud/static/js/azure_schema.ui.js

@@ -10,12 +10,10 @@
 import gettext from 'sources/gettext';
 import BaseUISchema from 'sources/SchemaView/base_schema.ui';
 import { isEmptyString } from 'sources/validators';
-import { CloudWizardEventsContext } from './CloudWizard';
-import React from 'react';
 import pgAdmin from 'sources/pgadmin';
 
 class AzureCredSchema extends BaseUISchema {
-  constructor(fieldOptions = {}, initValues = {}) {
+  constructor(fieldOptions = {}, initValues = {}, eventBus) {
     super({
       oid: null,
       auth_type: 'interactive_browser_credential',
@@ -31,7 +29,7 @@ class AzureCredSchema extends BaseUISchema {
       ...fieldOptions,
     };
 
-    this.eventBus = React.useContext(CloudWizardEventsContext);
+    this.eventBus = eventBus;
   }
 
   get idAttribute() {

web/pgadmin/static/js/Explain/Analysis.jsx

@@ -41,8 +41,7 @@ const useStyles = makeStyles((theme)=>({
   },
 }));
 
-function getRowClassname(data, collapseParent) {
-  const classes = useStyles();
+function getRowClassname(classes, data, collapseParent) {
   let className = [];
   if(data['Plans']?.length > 0) {
     className.push(classes.collapsible);
@@ -75,7 +74,7 @@ function ExplainRow({row, show, activeExId, setActiveExId, collapsedExId, toggle
   const exId = `pga_ex_${data['level'].join('_')}`;
   const parentExId = `pga_ex_${data['parent_node']}`;
   const collapsed = collapsedExId.findIndex((v)=>parentExId.startsWith(v)) > -1;
-  const className = getRowClassname(data, collapsedExId.indexOf(exId) > -1);
+  const className = getRowClassname(classes, data, collapsedExId.indexOf(exId) > -1);
   let onRowClick = (e)=>{
     toggleCollapseExId(e.currentTarget.getAttribute('data-ex-id'), data['Plans']?.length);
   };

web/pgadmin/static/js/SchemaView/FieldSetView.jsx

@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React, { useContext, useEffect, useMemo } from 'react';
+import React, { useContext, useEffect } from 'react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 
@@ -47,7 +47,7 @@ export default function FieldSetView({
 
   let viewFields = [];
   /* Prepare the array of components based on the types */
-  schema.fields.forEach((field)=>{
+  for(const field of schema.fields) {
     let {visible, disabled, readonly, modeSupported} =
       getFieldMetaData(field, schema, value, viewHelperProps);
 
@@ -59,7 +59,7 @@ export default function FieldSetView({
         * from there as well.
         */
       viewFields.push(
-        useMemo(()=><MappedFormControl
+        <MappedFormControl
           state={value}
           key={field.id}
           viewHelperProps={viewHelperProps}
@@ -79,18 +79,19 @@ export default function FieldSetView({
           }}
           hasError={hasError}
           className={controlClassName}
-        />, [
-          value[field.id],
-          readonly,
-          disabled,
-          visible,
-          hasError,
-          controlClassName,
-          ...(evalFunc(null, field.deps) || []).map((dep)=>value[dep]),
-        ])
+          memoDeps={[
+            value[field.id],
+            readonly,
+            disabled,
+            visible,
+            hasError,
+            controlClassName,
+            ...(evalFunc(null, field.deps) || []).map((dep)=>value[dep]),
+          ]}
+        />
       );
     }
-  });
+  }
 
   if(!visible) {
     return <></>;

web/pgadmin/static/js/SchemaView/FormView.jsx

@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Box, makeStyles, Tab, Tabs } from '@material-ui/core';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
@@ -163,16 +163,19 @@ export default function FormView({
   const stateUtils = useContext(StateUtilsContext);
 
   let isOnScreen = useOnScreen(formRef);
-  if(isOnScreen) {
-    /* Don't do it when the form is alredy visible */
-    if(!onScreenTracker.current) {
-      /* Re-select the tab. If form is hidden then sometimes it is not selected */
-      setTabValue(tabValue);
-      onScreenTracker.current = true;
+
+  useEffect(()=>{
+    if(isOnScreen) {
+      /* Don't do it when the form is alredy visible */
+      if(!onScreenTracker.current) {
+        /* Re-select the tab. If form is hidden then sometimes it is not selected */
+        setTabValue((prev)=>prev);
+        onScreenTracker.current = true;
+      }
+    } else {
+      onScreenTracker.current = false;
     }
-  } else {
-    onScreenTracker.current = false;
-  }
+  }, [isOnScreen]);
 
   useEffect(()=>{
     /* Calculate the fields which depends on the current field */
@@ -210,7 +213,7 @@ export default function FormView({
   let fullTabs = [];
 
   /* Prepare the array of components based on the types */
-  schemaRef.current.fields.forEach((field)=>{
+  for(const field of schemaRef.current.fields) {
     let {visible, disabled, readonly, canAdd, canEdit, canDelete, canAddRow, modeSupported} =
       getFieldMetaData(field, schema, value, viewHelperProps);
 
@@ -221,7 +224,7 @@ export default function FormView({
         if(!visible) {
           schemaRef.current.filterGroups.push(field.label);
         }
-        return;
+        continue;
       }
       group = groupLabels[group] || group || defaultTab;
 
@@ -297,7 +300,7 @@ export default function FormView({
         }
 
         tabs[group].push(
-          useMemo(()=><MappedFormControl
+          <MappedFormControl
             inputRef={(ele)=>{
               if(firstEleRef && firstEleID.current === field.id) {
                 firstEleRef.current = ele;
@@ -324,19 +327,20 @@ export default function FormView({
             hasError={hasError}
             className={classes.controlRow}
             noLabel={field.isFullTab}
-          />, [
-            value[id],
-            readonly,
-            disabled,
-            visible,
-            hasError,
-            classes.controlRow,
-            ...(evalFunc(null, field.deps) || []).map((dep)=>value[dep]),
-          ])
+            memoDeps={[
+              value[id],
+              readonly,
+              disabled,
+              visible,
+              hasError,
+              classes.controlRow,
+              ...(evalFunc(null, field.deps) || []).map((dep)=>value[dep]),
+            ]}
+          />
         );
       }
     }
-  });
+  }
 
   let finalTabs = _.pickBy(tabs, (v, tabName)=>schemaRef.current.filterGroups.indexOf(tabName) <= -1);
 
@@ -347,7 +351,7 @@ export default function FormView({
     sqlTabActive = (Object.keys(finalTabs).length === tabValue);
     /* Re-render and fetch the SQL tab when it is active */
     finalTabs[sqlTabName] = [
-      useMemo(()=><SQLTab key="sqltab" active={sqlTabActive} getSQLValue={getSQLValue} />, [sqlTabActive, value]),
+      <SQLTab key="sqltab" active={sqlTabActive} getSQLValue={getSQLValue} />,
     ];
     tabsClassname[sqlTabName] = classes.fullSpace;
     fullTabs.push(sqlTabName);

web/pgadmin/static/js/SchemaView/MappedControl.jsx

@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import _ from 'lodash';
 import {
   FormInputText, FormInputSelect, FormInputSwitch, FormInputCheckbox, FormInputColor,
@@ -212,7 +212,7 @@ const ALLOWED_PROPS_FIELD_CELL = [
 ];
 
 
-export const MappedFormControl = (props) => {
+export const MappedFormControl = ({memoDeps, ...props}) => {
   let newProps = { ...props };
   let typeProps = evalFunc(null, newProps.type, newProps.state);
   if (typeof (typeProps) === 'object') {
@@ -233,7 +233,7 @@ export const MappedFormControl = (props) => {
   };
 
   /* Filter out garbage props if any using ALLOWED_PROPS_FIELD */
-  return <MappedFormControlBase {..._.pick(newProps, _.union(ALLOWED_PROPS_FIELD_COMMON, ALLOWED_PROPS_FIELD_FORM))} />;
+  return useMemo(()=><MappedFormControlBase {..._.pick(newProps, _.union(ALLOWED_PROPS_FIELD_COMMON, ALLOWED_PROPS_FIELD_FORM))} />, memoDeps??[]);
 };
 
 MappedFormControl.propTypes = {

web/pgadmin/static/js/SchemaView/index.jsx

@@ -741,12 +741,12 @@ function SchemaDialogView({
               onClose={onErrClose} />
           </Box>
           {showFooter && <Box className={classes.footer}>
-            {useMemo(()=>((!props.disableSqlHelp || !props.disableDialogHelp) && <Box>
+            {(!props.disableSqlHelp || !props.disableDialogHelp) && <Box>
               <PgIconButton data-test="sql-help" onClick={()=>props.onHelp(true, isNew)} icon={<InfoIcon />}
                 disabled={props.disableSqlHelp} className={classes.buttonMargin} title="SQL help for this object type."/>
               <PgIconButton data-test="dialog-help" onClick={()=>props.onHelp(false, isNew)} icon={<HelpIcon />} title="Help for this dialog."
                 disabled={props.disableDialogHelp}/>
-            </Box>), [])}
+            </Box>}
             <Box marginLeft="auto">
               <DefaultButton data-test="Close" onClick={props.onClose} startIcon={<CloseIcon />} className={classes.buttonMargin}>
                 {gettext('Close')}

web/pgadmin/static/js/components/PgTable.jsx

@@ -224,6 +224,83 @@ function SortIcon ({column}) {
 SortIcon.propTypes = {
   column: PropTypes.object
 };
+
+function RenderRow({ index, style, schema, row, prepareRow, setRowHeight, ExpandedComponent }) {
+  const [expandComplete, setExpandComplete] = React.useState(false);
+  const rowRef = React.useRef() ;
+  const classes = useStyles();
+  prepareRow(row);
+
+  React.useEffect(()=>{
+    if(rowRef.current) {
+      if(!expandComplete && rowRef.current.style.height == `${ROW_HEIGHT}px`) {
+        return;
+      }
+      let rowHeight;
+      rowRef.current.style.height = 'unset';
+      if(expandComplete) {
+        rowHeight = rowRef.current.offsetHeight;
+      } else {
+        rowHeight = ROW_HEIGHT;
+        rowRef.current.style.height = ROW_HEIGHT;
+      }
+      rowRef.current.style.height = rowHeight + 'px';
+      setRowHeight(index, rowHeight);
+    }
+  }, [expandComplete]);
+
+  return (
+    <div style={style} key={row.id} ref={rowRef} data-test="row-container">
+      <div className={classes.tableRowContent}>
+        <div {...row.getRowProps()} className={classes.tr}>
+          {row.cells.map((cell) => {
+            let classNames = [classes.tableCell];
+            if(typeof(cell.column.id) == 'string' && cell.column.id.startsWith('btn-')) {
+              classNames.push(classes.btnCell);
+            }
+            if(cell.column.id == 'btn-edit' && row.isExpanded) {
+              classNames.push(classes.expandedIconCell);
+            }
+            if (row.original.row_type === 'warning'){
+              classNames.push(classes.warning);
+            }
+            if (row.original.row_type === 'alert'){
+              classNames.push(classes.alert);
+            }
+            return (
+              <div key={cell.column.id} {...cell.getCellProps()} className={clsx(classNames, cell.column?.dataClassName, row.original.icon?.[cell.column.id], row.original.icon?.[cell.column.id] && classes.cellIcon)}
+                title={_.isUndefined(cell.value) || _.isNull(cell.value) ? '': String(cell.value)}>
+                {cell.render('Cell')}
+              </div>
+            );
+          })}
+        </div>
+        {!_.isUndefined(row) && row.isExpanded && (
+          <Box key={row.id} className={classes.expandedForm}>
+            {schema && <SchemaView
+              getInitData={()=>Promise.resolve({})}
+              viewHelperProps={{ mode: 'properties' }}
+              schema={schema[row.id]}
+              showFooter={false}
+              onDataChange={()=>{setExpandComplete(true);}}
+            />}
+            {ExpandedComponent && <ExpandedComponent row={row} onExpandComplete={()=>setExpandComplete(true)}/>}
+          </Box>
+        )}
+      </div>
+    </div>
+  );
+}
+RenderRow.propTypes = {
+  index: PropTypes.number,
+  style: PropTypes.object,
+  row: PropTypes.object,
+  schema: PropTypes.object,
+  prepareRow: PropTypes.func,
+  setRowHeight: PropTypes.func,
+  ExpandedComponent: PropTypes.node,
+};
+
 export default function PgTable({ columns, data, isSelectRow, caveTable=true, schema, ExpandedComponent, sortOptions, tableProps, ...props }) {
   // Use the state and functions returned from useTable to build your UI
   const classes = useStyles();
@@ -381,75 +458,6 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, sc
     setGlobalFilter(searchVal || undefined);
   }, [searchVal]);
 
-  const RenderRow = React.useCallback(
-    ({ index, style }) => {
-      const row = rows[index];
-      const [expandComplete, setExpandComplete] = React.useState(false);
-      const rowRef = React.useRef() ;
-      prepareRow(row);
-
-      React.useEffect(()=>{
-        if(rowRef.current) {
-          if(!expandComplete && rowRef.current.style.height == `${ROW_HEIGHT}px`) {
-            return;
-          }
-          let rowHeight;
-          rowRef.current.style.height = 'unset';
-          if(expandComplete) {
-            rowHeight = rowRef.current.offsetHeight;
-          } else {
-            rowHeight = ROW_HEIGHT;
-            rowRef.current.style.height = ROW_HEIGHT;
-          }
-          rowRef.current.style.height = rowHeight + 'px';
-          setRowHeight(index, rowHeight);
-        }
-      }, [expandComplete]);
-
-      return (
-        <div style={style} key={row.id} ref={rowRef} data-test="row-container">
-          <div className={classes.tableRowContent}>
-            <div {...row.getRowProps()} className={classes.tr}>
-              {row.cells.map((cell) => {
-                let classNames = [classes.tableCell];
-                if(typeof(cell.column.id) == 'string' && cell.column.id.startsWith('btn-')) {
-                  classNames.push(classes.btnCell);
-                }
-                if(cell.column.id == 'btn-edit' && row.isExpanded) {
-                  classNames.push(classes.expandedIconCell);
-                }
-                if (row.original.row_type === 'warning'){
-                  classNames.push(classes.warning);
-                }
-                if (row.original.row_type === 'alert'){
-                  classNames.push(classes.alert);
-                }
-                return (
-                  <div key={cell.column.id} {...cell.getCellProps()} className={clsx(classNames, cell.column?.dataClassName, row.original.icon?.[cell.column.id], row.original.icon?.[cell.column.id] && classes.cellIcon)}
-                    title={_.isUndefined(cell.value) || _.isNull(cell.value) ? '': String(cell.value)}>
-                    {cell.render('Cell')}
-                  </div>
-                );
-              })}
-            </div>
-            {!_.isUndefined(row) && row.isExpanded && (
-              <Box key={row.id} className={classes.expandedForm}>
-                {schema && <SchemaView
-                  getInitData={()=>Promise.resolve({})}
-                  viewHelperProps={{ mode: 'properties' }}
-                  schema={schema[row.id]}
-                  showFooter={false}
-                  onDataChange={()=>{setExpandComplete(true);}}
-                />}
-                {ExpandedComponent && <ExpandedComponent row={row} onExpandComplete={()=>setExpandComplete(true)}/>}
-              </Box>
-            )}
-          </div>
-        </div>
-      );
-    },
-    [prepareRow, rows, selectedRowIds]
-  );
   // Render the UI for your table
   return (
     <Box className={classes.pgTableContainer} data-test={props['data-test']}>
@@ -514,8 +522,12 @@ export default function PgTable({ columns, data, isSelectRow, caveTable=true, sc
                       height={height}
                       itemCount={rows.length}
                       itemSize={getRowHeight}
+                      itemData={{rows, prepareRow, setRowHeight}}
                     >
-                      {RenderRow}
+                      {({index, style})=>(
+                        <RenderRow index={index} style={style} row={rows[index]} schema={schema} prepareRow={prepareRow}
+                          setRowHeight={setRowHeight} ExpandedComponent={ExpandedComponent} />
+                      )}
                     </VariableSizeList>)}
                 </AutoSizer>
               </div>

web/pgadmin/static/js/pgadmin.js

@@ -45,7 +45,7 @@ define([], function() {
     }
 
     function a(_t, _e) {
-      let _o, _n, _i, _l, _d, _c = /^top|bottom/,
+      let _o, _n, _i, _l, _d, _c = /^(top|bottom)/,
         _f = ['paddingTop', 'paddingBottom', 'borderTop', 'borderBottom'],
         _u = 4;
 

web/pgadmin/static/js/validators.js

@@ -52,7 +52,7 @@ export function emptyValidator(label, value) {
 }
 
 export function isEmptyString(value) {
-  return _.isUndefined(value) || _.isNull(value) || String(value).trim() === '' || String(value).replace(/^\s+|\s+$/g, '') == '';
+  return _.isUndefined(value) || _.isNull(value) || String(value).trim() === '' || String(value).replace(/(^\s+)|(\s+$)/g, '') == '';
 }
 
 /* Validate rows to check for any duplicate rows based on uniqueCols-columns array */

web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx

@@ -86,7 +86,7 @@ const columns = [
     key: 'name',
     name: gettext('Object name'),
     width: 250,
-    formatter({row}) {
+    formatter: ({row})=>{
       const classes = useStyles();
       return (
         <div className='rdg-cell-value'>
@@ -104,7 +104,7 @@ const columns = [
     key: 'type',
     name: gettext('Type'),
     width: 30,
-    formatter({row}) {
+    formatter: ({row})=>{
       const classes = useStyles();
       return (
         <Box className={row.show_node ? '' : classes.cellMuted}>{row.type_label}</Box>
@@ -114,7 +114,7 @@ const columns = [
     key: 'path',
     name: gettext('Browser path'),
     sortable: false,
-    formatter({row}) {
+    formatter: ({row})=>{
       const classes = useStyles();
       return (
         <Box className={row.show_node ? '' : classes.cellMuted}>{row.path}</Box>

web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx

@@ -272,6 +272,32 @@ function initialiseColumns(columns, rows, totalRowCount, columnWidthBy) {
   return retColumns;
 }
 
+function RowNumColFormatter({row, rowKeyGetter, dataChangeStore, onSelectedColumnsChange}) {
+  const {rowIdx} = useContext(RowInfoContext);
+  const [isRowSelected, onRowSelectionChange] = useRowSelection();
+  const classes = useStyles();
+
+  let rowKey = rowKeyGetter(row);
+  let rownum = rowIdx+1;
+  if(rowKey in (dataChangeStore?.added || {})) {
+    rownum = rownum+'+';
+  } else if(rowKey in (dataChangeStore?.deleted || {})) {
+    rownum = rownum+'-';
+  }
+  return (<div className={classes.rowNumCell} onClick={()=>{
+    onSelectedColumnsChange(new Set());
+    onRowSelectionChange({ row: row, checked: !isRowSelected, isShiftClick: false});
+  }}>
+    {rownum}
+  </div>);
+}
+RowNumColFormatter.propTypes = {
+  row: PropTypes.object,
+  rowKeyGetter: PropTypes.func,
+  dataChangeStore: PropTypes.object,
+  onSelectedColumnsChange: PropTypes.func,
+};
+
 function formatColumns(columns, dataChangeStore, selectedColumns, onSelectedColumnsChange, rowKeyGetter, classes) {
   let retColumns = [
     ...columns,
@@ -288,22 +314,8 @@ function formatColumns(columns, dataChangeStore, selectedColumns, onSelectedColu
 
   let rowNumCol = retColumns[0];
   rowNumCol.headerRenderer = SelectAllHeaderRenderer;
-  rowNumCol.formatter = ({row})=>{
-    const {rowIdx} = useContext(RowInfoContext);
-    const [isRowSelected, onRowSelectionChange] = useRowSelection();
-    let rowKey = rowKeyGetter(row);
-    let rownum = rowIdx+1;
-    if(rowKey in (dataChangeStore?.added || {})) {
-      rownum = rownum+'+';
-    } else if(rowKey in (dataChangeStore?.deleted || {})) {
-      rownum = rownum+'-';
-    }
-    return (<div className={classes.rowNumCell} onClick={()=>{
-      onSelectedColumnsChange(new Set());
-      onRowSelectionChange({ row: row, checked: !isRowSelected, isShiftClick: false});
-    }}>
-      {rownum}
-    </div>);
+  rowNumCol.formatter = (props)=>{
+    return <RowNumColFormatter {...props} rowKeyGetter={rowKeyGetter} dataChangeStore={dataChangeStore} onSelectedColumnsChange={onSelectedColumnsChange} />;
   };
 
   return retColumns;

web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx

@@ -1065,7 +1065,7 @@ export function ResultSet() {
             return deletedKeys.indexOf(row[rsu.current.clientPK]) == -1;
           });
         });
-        setColumns(columns);
+        setColumns((prev)=>prev);
       }
       dispatchDataChange({type: 'reset'});
       setSelectedRows(new Set());

web/webpack.test.config.js

@@ -106,7 +106,7 @@ module.exports = {
         options: { esModules: true },
       },
       enforce: 'post',
-      exclude: /node_modules|plugins|bundle|generated|regression|[Tt]est.js|[Ss]pecs.js|[Ss]pec.js|\.spec\.js$/,
+      exclude: /node_modules|plugins|bundle|generated|regression|[Tt]est.js|[Ss]pecs.js|[Ss]pec.js|\.spec\.js/,
     },
     ],
   },