diff --git a/web/pgadmin/browser/server_groups/servers/static/js/server.ui.js b/web/pgadmin/browser/server_groups/servers/static/js/server.ui.js index d0a6ce0bf..c395222d1 100644 --- a/web/pgadmin/browser/server_groups/servers/static/js/server.ui.js +++ b/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; diff --git a/web/pgadmin/dashboard/static/js/Dashboard.jsx b/web/pgadmin/dashboard/static/js/Dashboard.jsx index 17f19812e..fd5ff6e8b 100644 --- a/web/pgadmin/dashboard/static/js/Dashboard.jsx +++ b/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) { diff --git a/web/pgadmin/misc/cloud/static/js/azure.js b/web/pgadmin/misc/cloud/static/js/azure.js index 3da3d76a7..a44ec3a4b 100644 --- a/web/pgadmin/misc/cloud/static/js/azure.js +++ b/web/pgadmin/misc/cloud/static/js/azure.js @@ -85,7 +85,7 @@ export function AzureCredentials(props) { }, 1000); }); } - }); + }, {}, _eventBus); setCloudDBCredInstance(azureCloudDBCredSchema); }, [props.cloudProvider]); diff --git a/web/pgadmin/misc/cloud/static/js/azure_schema.ui.js b/web/pgadmin/misc/cloud/static/js/azure_schema.ui.js index 48a295cbc..1ca0aad29 100644 --- a/web/pgadmin/misc/cloud/static/js/azure_schema.ui.js +++ b/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() { diff --git a/web/pgadmin/static/js/Explain/Analysis.jsx b/web/pgadmin/static/js/Explain/Analysis.jsx index 17ed8479f..1fbdeb7ce 100644 --- 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); }; diff --git a/web/pgadmin/static/js/SchemaView/FieldSetView.jsx b/web/pgadmin/static/js/SchemaView/FieldSetView.jsx index 049683ce2..e4c2b4c8a 100644 --- 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(()=>, [ - 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 <>; diff --git a/web/pgadmin/static/js/SchemaView/FormView.jsx b/web/pgadmin/static/js/SchemaView/FormView.jsx index fe781ab63..a72542a73 100644 --- 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(()=>{ 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(()=>, [sqlTabActive, value]), + , ]; tabsClassname[sqlTabName] = classes.fullSpace; fullTabs.push(sqlTabName); diff --git a/web/pgadmin/static/js/SchemaView/MappedControl.jsx b/web/pgadmin/static/js/SchemaView/MappedControl.jsx index ca62f8477..49a1dad12 100644 --- 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 ; + return useMemo(()=>, memoDeps??[]); }; MappedFormControl.propTypes = { diff --git a/web/pgadmin/static/js/SchemaView/index.jsx b/web/pgadmin/static/js/SchemaView/index.jsx index 827af5650..8c0fd7fe6 100644 --- a/web/pgadmin/static/js/SchemaView/index.jsx +++ b/web/pgadmin/static/js/SchemaView/index.jsx @@ -741,12 +741,12 @@ function SchemaDialogView({ onClose={onErrClose} /> {showFooter && - {useMemo(()=>((!props.disableSqlHelp || !props.disableDialogHelp) && + {(!props.disableSqlHelp || !props.disableDialogHelp) && props.onHelp(true, isNew)} icon={} disabled={props.disableSqlHelp} className={classes.buttonMargin} title="SQL help for this object type."/> props.onHelp(false, isNew)} icon={} title="Help for this dialog." disabled={props.disableDialogHelp}/> - ), [])} + } } className={classes.buttonMargin}> {gettext('Close')} diff --git a/web/pgadmin/static/js/components/PgTable.jsx b/web/pgadmin/static/js/components/PgTable.jsx index dd3062679..32f81d3a2 100644 --- a/web/pgadmin/static/js/components/PgTable.jsx +++ b/web/pgadmin/static/js/components/PgTable.jsx @@ -213,6 +213,83 @@ IndeterminateCheckbox.propTypes = { }; const ROW_HEIGHT = 35; + +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 ( +
+
+
+ {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 ( +
+ {cell.render('Cell')} +
+ ); + })} +
+ {!_.isUndefined(row) && row.isExpanded && ( + + {schema && Promise.resolve({})} + viewHelperProps={{ mode: 'properties' }} + schema={schema[row.id]} + showFooter={false} + onDataChange={()=>{setExpandComplete(true);}} + />} + {ExpandedComponent && setExpandComplete(true)}/>} + + )} +
+
+ ); +} +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(); @@ -370,75 +447,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 ( -
-
-
- {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 ( -
- {cell.render('Cell')} -
- ); - })} -
- {!_.isUndefined(row) && row.isExpanded && ( - - {schema && Promise.resolve({})} - viewHelperProps={{ mode: 'properties' }} - schema={schema[row.id]} - showFooter={false} - onDataChange={()=>{setExpandComplete(true);}} - />} - {ExpandedComponent && setExpandComplete(true)}/>} - - )} -
-
- ); - }, - [prepareRow, rows, selectedRowIds] - ); // Render the UI for your table return ( @@ -507,8 +515,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})=>( + + )} )} diff --git a/web/pgadmin/static/js/pgadmin.js b/web/pgadmin/static/js/pgadmin.js index 3cc9291e1..e4583f81c 100644 --- a/web/pgadmin/static/js/pgadmin.js +++ b/web/pgadmin/static/js/pgadmin.js @@ -41,7 +41,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; diff --git a/web/pgadmin/static/js/validators.js b/web/pgadmin/static/js/validators.js index 6e1fff23c..7db8c2d6c 100644 --- a/web/pgadmin/static/js/validators.js +++ b/web/pgadmin/static/js/validators.js @@ -54,7 +54,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 */ diff --git a/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx b/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx index 0575fe48e..481fe5122 100644 --- a/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx +++ b/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 (
@@ -104,7 +104,7 @@ const columns = [ key: 'type', name: gettext('Type'), width: 30, - formatter({row}) { + formatter: ({row})=>{ const classes = useStyles(); return ( {row.type_label} @@ -114,7 +114,7 @@ const columns = [ key: 'path', name: gettext('Browser path'), sortable: false, - formatter({row}) { + formatter: ({row})=>{ const classes = useStyles(); return ( {row.path} diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx index 23c42a711..dc6b03c39 100644 --- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx +++ b/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 (
{ + onSelectedColumnsChange(new Set()); + onRowSelectionChange({ row: row, checked: !isRowSelected, isShiftClick: false}); + }}> + {rownum} +
); +} +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 (
{ - onSelectedColumnsChange(new Set()); - onRowSelectionChange({ row: row, checked: !isRowSelected, isShiftClick: false}); - }}> - {rownum} -
); + rowNumCol.formatter = (props)=>{ + return ; }; return retColumns; diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx index 018d82c9b..92fc3fa4f 100644 --- a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx +++ b/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()); diff --git a/web/webpack.test.config.js b/web/webpack.test.config.js index 40ef92477..1cca0b48b 100644 --- a/web/webpack.test.config.js +++ b/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/, }, ], },