Fixed a couple of SonarQube issues.

2025-02-25 18:55:31 -06:00 · 2022-09-10 14:04:28 +05:30
parent 43022b7aa2
commit b128ba2f57
16 changed files with 175 additions and 145 deletions
--- a/web/pgadmin/static/js/Explain/Analysis.jsx
+++ b/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);
  };
--- a/web/pgadmin/static/js/SchemaView/FieldSetView.jsx
+++ b/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 <></>;
--- a/web/pgadmin/static/js/SchemaView/FormView.jsx
+++ b/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);
--- a/web/pgadmin/static/js/SchemaView/MappedControl.jsx
+++ b/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 = {
--- a/web/pgadmin/static/js/SchemaView/index.jsx
+++ b/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')}
--- a/web/pgadmin/static/js/components/PgTable.jsx
+++ b/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>
--- a/web/pgadmin/static/js/pgadmin.js
+++ b/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;

--- a/web/pgadmin/static/js/validators.js
+++ b/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 */