From e21911b1c675e34700436e8eb26e7e7725e69300 Mon Sep 17 00:00:00 2001 From: Ashesh Vashi Date: Wed, 11 Sep 2024 12:21:41 +0530 Subject: [PATCH] All the issues are fixed reported in #7884 * Show the icon for the 'Reset' button. (Reference #7884) * Reload the server list after connecting to a server in the 'New connection' dialog (QueryTool). (Reference: #7884) * Pass the grid path during the bulk update (click on a radio action) * Don't assign the cell value to the 'rowValue' variable. --- .../js/SchemaView/DataGridView/mappedCell.jsx | 5 +- .../static/js/SchemaView/ResetButton.jsx | 4 +- .../static/js/SchemaView/base_schema.ui.js | 12 +- .../dialogs/NewConnectionDialog.jsx | 140 +++++++++++------- 4 files changed, 96 insertions(+), 65 deletions(-) diff --git a/web/pgadmin/static/js/SchemaView/DataGridView/mappedCell.jsx b/web/pgadmin/static/js/SchemaView/DataGridView/mappedCell.jsx index 92e25c3a6..a8081c697 100644 --- a/web/pgadmin/static/js/SchemaView/DataGridView/mappedCell.jsx +++ b/web/pgadmin/static/js/SchemaView/DataGridView/mappedCell.jsx @@ -27,7 +27,7 @@ export function getMappedCell({field}) { const [key, setKey] = useState(0); const schemaState = useContext(SchemaStateContext); - const { dataDispatch } = useContext(DataGridContext); + const { dataDispatch, accessPath } = useContext(DataGridContext); const { rowAccessPath, row } = useContext(DataGridRowContext); const colAccessPath = schemaState.accessPath(rowAccessPath, field.id); @@ -44,7 +44,6 @@ export function getMappedCell({field}) { colOptions = { disabled: true, readonly: true }; } else { colOptions['readonly'] = !colOptions['editable']; - rowValue = value; } let cellProps = {}; @@ -70,7 +69,7 @@ export function getMappedCell({field}) { if(field.radioType) { dataDispatch({ type: SCHEMA_STATE_ACTIONS.BULK_UPDATE, - path: rowAccessPath, + path: accessPath, value: changeValue, id: field.id }); diff --git a/web/pgadmin/static/js/SchemaView/ResetButton.jsx b/web/pgadmin/static/js/SchemaView/ResetButton.jsx index 3c275eb57..7fb532238 100644 --- a/web/pgadmin/static/js/SchemaView/ResetButton.jsx +++ b/web/pgadmin/static/js/SchemaView/ResetButton.jsx @@ -13,7 +13,7 @@ import { DefaultButton } from 'sources/components/Buttons'; import { SchemaStateContext } from './SchemaState'; -export function ResetButton({label, Icon, onClick}) { +export function ResetButton({label, icon, onClick}) { const [key, setKey] = useState(0); const schemaState = useContext(SchemaStateContext); const checkDisabled = (state) => (state.isSaving || !state.isDirty); @@ -33,7 +33,7 @@ export function ResetButton({label, Icon, onClick}) { return ( { label } diff --git a/web/pgadmin/static/js/SchemaView/base_schema.ui.js b/web/pgadmin/static/js/SchemaView/base_schema.ui.js index 955f1f6ef..d2479ba19 100644 --- a/web/pgadmin/static/js/SchemaView/base_schema.ui.js +++ b/web/pgadmin/static/js/SchemaView/base_schema.ui.js @@ -27,6 +27,7 @@ export default class BaseUISchema { this._state = null; this._id = Date.now(); + this._dynamicFields = false; } /* Top schema is helpful if this is used as child */ @@ -96,9 +97,8 @@ export default class BaseUISchema { */ get fields() { if (!this.__filteredFields) { - // Memoize the results - this.__filteredFields = memoizeFn( - (baseFields, keys, filterGroups) => baseFields.filter((field) => { + const getFields = (baseFields, keys, filterGroups) => baseFields.filter( + (field) => { let retval; // If any groups are to be filtered. @@ -110,8 +110,12 @@ export default class BaseUISchema { } return retval; - }) + } ); + + // Memoize the results (if required) + this.__filteredFields = + this._dynamicFields ? getFields : memoizeFn(getFields); } return this.__filteredFields( diff --git a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/NewConnectionDialog.jsx b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/NewConnectionDialog.jsx index 64ae997c2..fa2884aba 100644 --- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/NewConnectionDialog.jsx +++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/NewConnectionDialog.jsx @@ -18,7 +18,10 @@ class NewConnectionSchema extends BaseUISchema { role: null, server_name: null, database_name: null, + connected: false, }); + // Regenerate the fields on every render. + this._dynamicFields = true; this.flatServers = []; this.groupedServers = []; this.dbs = []; @@ -41,7 +44,7 @@ class NewConnectionSchema extends BaseUISchema { } isServerConnected(sid) { - return _.find(this.flatServers, (s)=>s.value==sid)?.connected; + return _.find(this.flatServers, (s) => s.value == sid)?.connected; } getServerList() { @@ -106,16 +109,21 @@ class NewConnectionSchema extends BaseUISchema { let self = this; return [ { - id: 'sid', label: gettext('Server'), type: 'select', noEmpty: true, - controlProps: { - allowClear: false, - }, options: ()=>this.getServerList(), - optionsLoaded: (res)=>this.flatServers=flattenSelectOptions(res), - optionsReloadBasis: this.flatServers.map((s)=>s.connected).join(''), + id: 'sid', label: gettext('Server'), deps: ['connected'], + noEmpty: true, + controlProps: { allowClear: false }, + type: () => ({ + type: 'select', + options: () => self.getServerList(), + optionsLoaded: (res) => self.flatServers = flattenSelectOptions(res), + optionsReloadBasis: self.flatServers.map((s) => s.connected).join(''), + }), depChange: (state)=>{ /* Once the option is selected get the name */ /* Force sid to null, and set only if connected */ - let selectedServer = _.find(this.flatServers, (s)=>s.value==state.sid); + let selectedServer = _.find( + self.flatServers, (s) => s.value == state.sid + ); return { server_name: selectedServer?.label, did: null, @@ -124,62 +132,74 @@ class NewConnectionSchema extends BaseUISchema { sid: null, fgcolor: selectedServer?.fgcolor, bgcolor: selectedServer?.bgcolor, + connected: selectedServer?.connected, }; }, - deferredDepChange: (state, source, topState, actionObj)=>{ - return new Promise((resolve)=>{ + deferredDepChange: (state, source, topState, actionObj) => { + return new Promise((resolve) => { let sid = actionObj.value; - if(!_.find(this.flatServers, (s)=>s.value==sid)?.connected) { - this.connectServer(sid, state.user, null, (data)=>{ + if(!_.find(self.flatServers, (s) => s.value == sid)?.connected) { + this.connectServer(sid, state.user, null, (data) => { self.setServerConnected(sid, data.icon); - resolve(()=>({sid: sid})); + resolve(() => ({ sid: sid, connected: true })); }); } else { - resolve(()=>({sid: sid})); + resolve(()=>({ sid: sid, connected: true })); } }); }, }, { - id: 'did', label: gettext('Database'), deps: ['sid'], noEmpty: true, + id: 'did', label: gettext('Database'), deps: ['sid', 'connected'], + noEmpty: true, controlProps: { allowClear: false, }, - type: (state)=>({ - type: 'select', - options: ()=>this.getOtherOptions(state.sid, 'get_new_connection_database'), - optionsReloadBasis: `${state.sid} ${this.isServerConnected(state.sid)}`, - }), - optionsLoaded: (res)=>this.dbs=res, - depChange: (state)=>{ + type: (state) => { + return { + type: 'select', + options: () => this.getOtherOptions( + state.sid, 'get_new_connection_database' + ), + optionsReloadBasis: `${state.sid} ${this.isServerConnected(state.sid)}`, + }; + }, + optionsLoaded: (res) => this.dbs = res, + depChange: (state) => { /* Once the option is selected get the name */ - return {database_name: _.find(this.dbs, (s)=>s.value==state.did)?.label}; + return { + database_name: _.find(this.dbs, (s) => s.value == state.did)?.label + }; } - },{ - id: 'user', label: gettext('User'), deps: ['sid'], noEmpty: true, - controlProps: { - allowClear: false, - }, - type: (state)=>({ + }, { + id: 'user', label: gettext('User'), deps: ['sid', 'connected'], + noEmpty: true, controlProps: { allowClear: false }, + type: (state) => ({ type: 'select', - options: ()=>this.getOtherOptions(state.sid, 'get_new_connection_user'), + options: () => this.getOtherOptions( + state.sid, 'get_new_connection_user' + ), optionsReloadBasis: `${state.sid} ${this.isServerConnected(state.sid)}`, }), - },{ - id: 'role', label: gettext('Role'), deps: ['sid'], + }, { + id: 'role', label: gettext('Role'), deps: ['sid', 'connected'], type: (state)=>({ type: 'select', - options: ()=>this.getOtherOptions(state.sid, 'get_new_connection_role'), + options: () => this.getOtherOptions( + state.sid, 'get_new_connection_role' + ), optionsReloadBasis: `${state.sid} ${this.isServerConnected(state.sid)}`, }), - },{ + }, { id: 'server_name', label: '', type: 'text', visible: false, - },{ + }, { id: 'database_name', label: '', type: 'text', visible: false, - },{ + }, { id: 'bgcolor', label: '', type: 'text', visible: false, - },{ + }, { id: 'fgcolor', label: '', type: 'text', visible: false, - }, + }, { + id: 'connected', label: '', type: 'text', visible: false, + } ]; } } @@ -189,7 +209,6 @@ export default function NewConnectionDialog({onClose, onSave}) { const [connecting, setConnecting] = useState(false); const queryToolCtx = React.useContext(QueryToolContext); - const connectServer = async (sid, user, formData, connectCallback) => { setConnecting(true); try { @@ -223,25 +242,34 @@ export default function NewConnectionDialog({onClose, onSave}) { }); } }; + const schema = React.useRef(null); - return Promise.resolve({})} - schema={new NewConnectionSchema(queryToolCtx.api, { + if (!schema.current) + schema.current = new NewConnectionSchema(queryToolCtx.api, { sid: queryToolCtx.params.sid, sgid: 0, - }, connectServer)} - viewHelperProps={{ - mode: 'create', - }} - loadingText={connecting ? 'Connecting...' : ''} - onSave={onSave} - onClose={onClose} - hasSQL={false} - disableSqlHelp={true} - disableDialogHelp={true} - isTabView={false} - Notifier={queryToolCtx.modal} - />; + }, connectServer); + + return <> + { + schema.current && + Promise.resolve({})} + schema={schema.current} + viewHelperProps={{ + mode: 'create', + }} + loadingText={connecting ? 'Connecting...' : ''} + onSave={onSave} + onClose={onClose} + hasSQL={false} + disableSqlHelp={true} + disableDialogHelp={true} + isTabView={false} + Notifier={queryToolCtx.modal} + /> + } + ; } NewConnectionDialog.propTypes = {