Update the server list on ad-hoc connection page when workpace is changed to get the latest server connection info. #7708

Author: adityatoshniwal

web/pgadmin/browser/templates/browser/index.html

@@ -15,15 +15,17 @@
   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 {

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 <SchemaView
     formType={'dialog'}
     getInitData={() => { /*This is intentional (SonarQube)*/ }}

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(<WelcomeBG />));
 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 = <TerminalRoundedIcon style={{height: '2rem', width: 'unset'}} />;
     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.');

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: <WorkspaceWelcomePage mode={'Query Tool'} />, closable: false, group: 'playground'
+  id: BROWSER_PANELS.WELCOME_QUERY_TOOL, title: gettext('Welcome'), content: <WorkspaceWelcomePage mode={WORKSPACES.QUERY_TOOL} />, closable: false, group: 'playground'
 };
 
 const welcomePSQLPanelData = {
-  id: BROWSER_PANELS.WELCOME_PSQL_TOOL, title: gettext('Welcome'), content: <WorkspaceWelcomePage mode={'PSQL'} />, closable: false, group: 'playground'
+  id: BROWSER_PANELS.WELCOME_PSQL_TOOL, title: gettext('Welcome'), content: <WorkspaceWelcomePage mode={WORKSPACES.PSQL_TOOL} />, closable: false, group: 'playground'
 };
 
 export const config = [

web/pgadmin/tools/psql/static/js/PsqlModule.js

@@ -189,7 +189,7 @@ export default class Psql {
         <PgAdminProvider value={pgAdmin}>
           <ModalProvider>
             <NotifierProvider pgAdmin={pgAdmin} pgWindow={pgWindow} />
-            <PsqlComponent params={JSON.parse(params)} pgAdmin={pgAdmin} />
+            <PsqlComponent params={params} pgAdmin={pgAdmin} />
           </ModalProvider>
         </PgAdminProvider>
       </Theme>