From 168aaa227ac8ac3ea5eca45a6113f5236f244669 Mon Sep 17 00:00:00 2001 From: Aditya Toshniwal Date: Mon, 20 Jan 2025 18:45:51 +0530 Subject: [PATCH] Update the server list on welcome page when workspace is changed to get the latest server connection info. #7708 --- .../browser/templates/browser/index.html | 20 ++++++------ .../workspaces/static/js/AdHocConnection.jsx | 31 ++++++++++++++----- .../static/js/WorkspaceWelcomePage.jsx | 3 +- .../misc/workspaces/static/js/config.jsx | 4 +-- .../tools/psql/static/js/PsqlModule.js | 2 +- 5 files changed, 39 insertions(+), 21 deletions(-) diff --git a/web/pgadmin/browser/templates/browser/index.html b/web/pgadmin/browser/templates/browser/index.html index ad573b78b..4a9c589e9 100644 --- a/web/pgadmin/browser/templates/browser/index.html +++ b/web/pgadmin/browser/templates/browser/index.html @@ -15,15 +15,17 @@ function parseConsoleArgs(args) { return retData?.join(' '); } -for (const method of ['log', 'error']) { - const nativeMethod = window.console[method]; - window.console[method] = function () { - nativeMethod.apply(this, arguments); - setTimeout(()=>{ - window.electronUI?.log(`--------------[UI ${method}]--------------- - ${parseConsoleArgs(arguments)} - ------------[UI End]----------------`); - }); +if(window.electronUI) { + for (const method of ['log', 'error']) { + const nativeMethod = window.console[method]; + window.console[method] = function () { + nativeMethod.apply(this, arguments); + setTimeout(()=>{ + window.electronUI?.log(`--------------[UI ${method}]--------------- + ${parseConsoleArgs(arguments)} + ------------[UI End]----------------`); + }); + } } } try { diff --git a/web/pgadmin/misc/workspaces/static/js/AdHocConnection.jsx b/web/pgadmin/misc/workspaces/static/js/AdHocConnection.jsx index cdaa1e65c..51684a120 100644 --- a/web/pgadmin/misc/workspaces/static/js/AdHocConnection.jsx +++ b/web/pgadmin/misc/workspaces/static/js/AdHocConnection.jsx @@ -7,7 +7,7 @@ // ////////////////////////////////////////////////////////////// -import React, { useMemo, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import gettext from 'sources/gettext'; import url_for from 'sources/url_for'; import _ from 'lodash'; @@ -27,8 +27,10 @@ import * as commonUtils from 'sources/utils'; import * as showQueryTool from '../../../../tools/sqleditor/static/js/show_query_tool'; import { getTitle, generateTitle } from '../../../../tools/sqleditor/static/js/sqleditor_title'; import usePreferences from '../../../../preferences/static/js/store'; -import { BROWSER_PANELS } from '../../../../browser/static/js/constants'; +import { BROWSER_PANELS, WORKSPACES } from '../../../../browser/static/js/constants'; import { isEmptyString } from '../../../../static/js/validators'; +import { getRandomInt } from '../../../../static/js/utils'; +import { useWorkspace } from './WorkspaceProvider'; class AdHocConnectionSchema extends BaseUISchema { constructor(connectExistingServer, initValues={}) { @@ -49,6 +51,7 @@ class AdHocConnectionSchema extends BaseUISchema { {'name': 'sslmode', 'value': 'prefer', 'keyword': 'sslmode'}, {'name': 'connect_timeout', 'value': 10, 'keyword': 'connect_timeout'}], ...initValues, + connection_refresh: 0, }); this.flatServers = []; this.groupedServers = []; @@ -58,6 +61,12 @@ class AdHocConnectionSchema extends BaseUISchema { this.paramSchema = new VariableSchema(getConnectionParameters, null, null, ['name', 'keyword', 'value']); } + refreshServerList() { + // its better to refresh the server list than monkey patching server connected status. + this.groupedServers = []; + this.state.setUnpreparedData(['connection_refresh'], getRandomInt(1, 9999)); + } + setServerConnected(sid, icon) { for(const group of this.groupedServers) { for(const opt of group.options) { @@ -132,12 +141,12 @@ class AdHocConnectionSchema extends BaseUISchema { let self = this; return [ { - id: 'sid', label: gettext('Existing Server (Optional)'), deps: ['connected'], - type: () => ({ + id: 'sid', label: gettext('Existing Server (Optional)'), deps: ['connected', 'connection_refresh'], + type: (state) => ({ type: 'select', options: () => self.getServerList(), optionsLoaded: (res) => self.flatServers = flattenSelectOptions(res), - optionsReloadBasis: self.flatServers.map((s) => s.connected).join(''), + optionsReloadBasis: `${self.flatServers.map((s) => s.connected).join('')}${state.connection_refresh}`, }), depChange: (state)=>{ /* Once the option is selected get the name */ @@ -160,6 +169,7 @@ class AdHocConnectionSchema extends BaseUISchema { }; }, deferredDepChange: (state, source, topState, actionObj) => { + if(source.includes('connection_refresh')) return; return new Promise((resolve) => { let sid = actionObj.value; let selectedServer = _.find(self.flatServers, (s)=>s.value==sid); @@ -323,6 +333,7 @@ export default function AdHocConnection({mode}) { const modal = useModal(); const pgAdmin = usePgAdmin(); const preferencesStore = usePreferences(); + const {currentWorkspace} = useWorkspace(); const connectExistingServer = async (sid, user, formData, connectCallback) => { setConnecting(true); @@ -447,9 +458,9 @@ export default function AdHocConnection({mode}) { data: JSON.stringify(formData) }); setConnecting(false); - if (mode == 'Query Tool') { + if (mode == WORKSPACES.QUERY_TOOL) { openQueryTool(respData, formData); - } else if (mode == 'PSQL') { + } else if (mode == WORKSPACES.PSQL_TOOL) { openPSQLTool(respData, formData); } } catch (error) { @@ -478,12 +489,16 @@ export default function AdHocConnection({mode}) { }; let saveBtnName = gettext('Connect & Open Query Tool'); - if (mode == 'PSQL') { + if (mode == WORKSPACES.PSQL_TOOL) { saveBtnName = gettext('Connect & Open PSQL'); } let adHocConObj = useMemo(() => new AdHocConnectionSchema(connectExistingServer), []); + useEffect(()=>{ + if(currentWorkspace == mode) adHocConObj.refreshServerList(); + }, [currentWorkspace]); + return { /*This is intentional (SonarQube)*/ }} diff --git a/web/pgadmin/misc/workspaces/static/js/WorkspaceWelcomePage.jsx b/web/pgadmin/misc/workspaces/static/js/WorkspaceWelcomePage.jsx index 49bd989b1..c270c09d4 100644 --- a/web/pgadmin/misc/workspaces/static/js/WorkspaceWelcomePage.jsx +++ b/web/pgadmin/misc/workspaces/static/js/WorkspaceWelcomePage.jsx @@ -17,6 +17,7 @@ import WelcomeBG from '../img/welcome_background.svg?svgr'; import { QueryToolIcon } from '../../../../static/js/components/ExternalIcon'; import TerminalRoundedIcon from '@mui/icons-material/TerminalRounded'; import { renderToStaticMarkup } from 'react-dom/server'; +import { WORKSPACES } from '../../../../browser/static/js/constants'; const welcomeBackgroundString = encodeURIComponent(renderToStaticMarkup()); const welcomeBackgroundURI = `url("data:image/svg+xml,${welcomeBackgroundString}")`; @@ -91,7 +92,7 @@ export default function WorkspaceWelcomePage({ mode }) { let welcomeFirst = gettext('The Query Tool is a robust and versatile environment designed for executing SQL commands and reviewing result sets efficiently.'); let welcomeSecond = gettext('In this workspace, you can seamlessly open and manage multiple query tabs, making it easier to organize your work. You can select the existing servers or create a completely new ad-hoc connection to any database server as needed.'); - if (mode == 'PSQL') { + if (mode == WORKSPACES.PSQL_TOOL) { welcomeIcon = ; welcomeTitle = gettext('Welcome to the PSQL Workspace!'); welcomeFirst = gettext('The PSQL tool allows users to connect to PostgreSQL or EDB Advanced server using the psql command line interface.'); diff --git a/web/pgadmin/misc/workspaces/static/js/config.jsx b/web/pgadmin/misc/workspaces/static/js/config.jsx index 4ce0f7875..cf00969b6 100644 --- a/web/pgadmin/misc/workspaces/static/js/config.jsx +++ b/web/pgadmin/misc/workspaces/static/js/config.jsx @@ -13,11 +13,11 @@ import WorkspaceWelcomePage from './WorkspaceWelcomePage'; import React from 'react'; const welcomeQueryToolPanelData = { - id: BROWSER_PANELS.WELCOME_QUERY_TOOL, title: gettext('Welcome'), content: , closable: false, group: 'playground' + id: BROWSER_PANELS.WELCOME_QUERY_TOOL, title: gettext('Welcome'), content: , closable: false, group: 'playground' }; const welcomePSQLPanelData = { - id: BROWSER_PANELS.WELCOME_PSQL_TOOL, title: gettext('Welcome'), content: , closable: false, group: 'playground' + id: BROWSER_PANELS.WELCOME_PSQL_TOOL, title: gettext('Welcome'), content: , closable: false, group: 'playground' }; export const config = [ diff --git a/web/pgadmin/tools/psql/static/js/PsqlModule.js b/web/pgadmin/tools/psql/static/js/PsqlModule.js index 3b309286a..b2d587179 100644 --- a/web/pgadmin/tools/psql/static/js/PsqlModule.js +++ b/web/pgadmin/tools/psql/static/js/PsqlModule.js @@ -189,7 +189,7 @@ export default class Psql { - +