More fixes for UI issues found when testing wcDocker changes. #6479

web/pgadmin/browser/server_groups/servers/static/js/server.js

@@ -677,7 +677,7 @@ define('pgadmin.node.server', [
             );
             // Generate the event that database is connected
             pgBrowser.Events.trigger(
-              'pgadmin:database:connected', _data._id, _data.db, _item, _data
+              'pgadmin:database:connected', _item, _data
             );
 
             // Load dashboard

web/pgadmin/misc/statistics/static/js/Statistics.jsx

@@ -80,7 +80,7 @@ function getColumn(data, singleLineStatistics, prettifyFields=[]) {
       {
         Header: 'Value',
         accessor: 'value',
-        sortable: true,
+        sortable: false,
         resizable: true,
         disableGlobalFilter: false,
       },

web/pgadmin/static/js/SchemaView/FormView.jsx

@@ -54,6 +54,9 @@ const useStyles = makeStyles((theme)=>({
   nonTabPanel: {
     padding: 0,
     background: 'inherit',
+  },
+  nonTabPanelContent: {
+    height: 'unset'
   }
 }));
 
@@ -454,7 +457,7 @@ export default function FormView({
         </Box>
       </>);
   } else {
-    let contentClassName = [stateUtils.formErr.message ? classes.errorMargin : null];
+    let contentClassName = [classes.nonTabPanelContent, stateUtils.formErr.message ? classes.errorMargin : null];
     return (
       <>
         <Box height="100%" display="flex" flexDirection="column" className={clsx(className)} ref={formRef} data-test="form-view">

web/pgadmin/static/js/components/FormComponents.jsx

@@ -555,7 +555,7 @@ FormInputSwitch.propTypes = {
   controlGridBasis: PropTypes.number,
 };
 
-export function InputCheckbox({ cid, helpid, value, onChange, controlProps, readonly, ...props }) {
+export function InputCheckbox({ cid, helpid, value, onChange, controlProps, readonly, labelPlacement, ...props }) {
   controlProps = controlProps || {};
   return (
     <FormControlLabel
@@ -569,6 +569,7 @@ export function InputCheckbox({ cid, helpid, value, onChange, controlProps, read
           {...props} />
       }
       label={controlProps.label}
+      labelPlacement={labelPlacement}
     />
   );
 }
@@ -579,6 +580,7 @@ InputCheckbox.propTypes = {
   controlProps: PropTypes.object,
   onChange: PropTypes.func,
   readonly: PropTypes.bool,
+  labelPlacement: PropTypes.string
 };
 
 export function FormInputCheckbox({ hasError, required, label,
@@ -599,7 +601,7 @@ FormInputCheckbox.propTypes = {
   testcid: PropTypes.string,
 };
 
-export function InputRadio({ helpid, value, onChange, controlProps, readonly, ...props }) {
+export function InputRadio({ helpid, value, onChange, controlProps, readonly, labelPlacement, ...props }) {
   const classes = useStyles();
   controlProps = controlProps || {};
   return (
@@ -622,6 +624,7 @@ export function InputRadio({ helpid, value, onChange, controlProps, readonly, ..
 
       }
       label={controlProps.label}
+      labelPlacement={labelPlacement}
       className={(readonly || props.disabled) ? classes.readOnlySwitch : null}
     />
   );

web/pgadmin/static/js/components/TabPanel.jsx

@@ -17,6 +17,9 @@ export const tabPanelStyles = makeStyles((theme)=>({
   root: {
     ...theme.mixins.tabPanel,
   },
+  content: {
+    height: '100%',
+  }
 }));
 
 /* Material UI does not have any tabpanel component, we create one for us */

web/pgadmin/static/js/helpers/Layout/index.jsx

@@ -16,13 +16,14 @@ import { showRenameTab } from '../../Dialogs';
 import usePreferences from '../../../../preferences/static/js/store';
 import _ from 'lodash';
 
-function TabTitle({id, icon, title, closable, tooltip}) {
+function TabTitle({id, closable, defaultInternal}) {
-  const [attrs, setAttrs] = useState({
-    icon: icon,
-    title: title,
-    tooltip: tooltip??title,
-  });
   const layoutDocker = React.useContext(LayoutDockerContext);
+  const internal = layoutDocker?.find(id)?.internal ?? defaultInternal;
+  const [attrs, setAttrs] = useState({
+    icon: internal.icon,
+    title: internal.title,
+    tooltip: internal.tooltip ?? internal.title,
+  });
   const onContextMenu = useCallback((e)=>{
     const g = layoutDocker.find(id)?.group??'';
     if((layoutDocker.noContextGroups??[]).includes(g)) return;
@@ -32,17 +33,21 @@ function TabTitle({id, icon, title, closable, tooltip}) {
   }, []);
 
   useEffect(()=>{
-    const deregister = layoutDocker.eventBus.registerListener(LAYOUT_EVENTS.REFRESH_TITLE, _.debounce((panelId)=>{
+    let deregister;
-      if(panelId == id) {
+    if(internal.renamable) {
-        const p = layoutDocker.find(id)?.internal??{};
+      deregister = layoutDocker.eventBus.registerListener(LAYOUT_EVENTS.REFRESH_TITLE, _.debounce((panelId)=>{
-        setAttrs({
+        if(panelId == id) {
-          icon: p.icon,
+          const internal = layoutDocker?.find(id)?.internal??{};
-          title: p.title,
+          setAttrs({
-          tooltip: p.tooltip??p.title
+            icon: internal.icon,
-        });
+            title: internal.title,
-      }
+            tooltip: internal.tooltip ?? internal.title,
-    }, 100));
+          });
-    return deregister;
+        }
+      }, 100));
+    }
+
+    return ()=>deregister?.();
   }, []);
 
   return (
@@ -58,10 +63,8 @@ function TabTitle({id, icon, title, closable, tooltip}) {
 
 TabTitle.propTypes = {
   id: PropTypes.string,
-  icon: PropTypes.string,
-  title: PropTypes.string,
   closable: PropTypes.bool,
-  tooltip: PropTypes.string
+  defaultInternal: PropTypes.object
 };
 
 export class LayoutDocker {
@@ -259,21 +262,22 @@ export class LayoutDocker {
   }
 
   static getPanel({icon, title, closable, tooltip, renamable, manualClose, ...attrs}) {
+    const internal = {
+      icon: icon,
+      title: title,
+      tooltip: tooltip,
+      closable: _.isUndefined(closable) ? manualClose : closable,
+      renamable: renamable,
+      manualClose: manualClose,
+    };
     return {
       cached: true,
       group: 'default',
       minWidth: 200,
       ...attrs,
       closable: false,
-      title: <TabTitle id={attrs.id} icon={icon} title={title} closable={attrs.group!='dialogs' && closable} tooltip={tooltip} />,
+      title: <TabTitle id={attrs.id} closable={attrs.group!='dialogs' && closable} defaultInternal={internal}/>,
-      internal: {
+      internal: internal
-        icon: icon,
-        title: title,
-        tooltip: tooltip,
-        closable: _.isUndefined(closable) ? manualClose : closable,
-        renamable: renamable,
-        manualClose: manualClose,
-      }
     };
   }
 

web/pgadmin/static/js/helpers/withStandardTabInfo.jsx

@@ -37,10 +37,14 @@ export default function withStandardTabInfo(Component, tabId) {
         }
       }, 100);
 
-      let deregisterTree = pgAdmin.Browser.Events.on('pgadmin-browser:node:selected', (item, data)=>{
+      const onUpdate =  (item, data)=>{
         setNodeInfo([true, item, data]);
-      });
+      };
-      let deregisterTreeUpdate = pgAdmin.Browser.Events.on('pgadmin-browser:tree:updated', (item, data)=>{
+
+      let deregisterTree = pgAdmin.Browser.Events.on('pgadmin-browser:node:selected', onUpdate);
+      let deregisterTreeUpdate = pgAdmin.Browser.Events.on('pgadmin-browser:tree:updated', onUpdate);
+      let deregisterDbConnected = pgAdmin.Browser.Events.on('pgadmin:database:connected', onUpdate);
+      let deregisterServerConnected = pgAdmin.Browser.Events.on('pgadmin:server:connected', (_sid, item, data)=>{
         setNodeInfo([true, item, data]);
       });
       let deregisterActive = layoutDocker.eventBus.registerListener(LAYOUT_EVENTS.ACTIVE, onTabActive);
@@ -51,6 +55,8 @@ export default function withStandardTabInfo(Component, tabId) {
         onTabActive?.cancel();
         deregisterTree();
         deregisterTreeUpdate();
+        deregisterDbConnected();
+        deregisterServerConnected();
         deregisterActive();
         deregisterChange();
       };