Continue fixing multiple UI issues found when testing wcDocker changes. #6479

.github/dependabot.yml

@@ -8,7 +8,7 @@ updates:
       - "Dependencies"
     commit-message:
       prefix: "Docker dependency"
-      
+
   - package-ecosystem: "pip"
     directory: "/"
     schedule:
@@ -17,7 +17,7 @@ updates:
       - "Dependencies"
     commit-message:
       prefix: "Python dependency"
-      
+
   - package-ecosystem: "pip"
     directory: "/tools"
     schedule:
@@ -25,8 +25,8 @@ updates:
     labels:
       - "Dependencies"
     commit-message:
-      prefix: "Python dependency"  
+      prefix: "Python dependency"
-      
+
   - package-ecosystem: "pip"
     directory: "/web/regression"
     schedule:
@@ -34,8 +34,8 @@ updates:
     labels:
       - "Dependencies"
     commit-message:
-      prefix: "Python dependency"  
+      prefix: "Python dependency"
-      
+
   - package-ecosystem: "npm"
     directory: "/runtime"
     schedule:
@@ -43,8 +43,8 @@ updates:
     labels:
       - "Dependencies"
     commit-message:
-      prefix: "Python dependency"  
+      prefix: "Javascript dependency"
-      
+
   - package-ecosystem: "npm"
     directory: "/web"
     schedule:
@@ -52,4 +52,4 @@ updates:
     labels:
       - "Dependencies"
     commit-message:
-      prefix: "Python dependency"  
+      prefix: "Javascript dependency"

web/pgadmin/browser/static/js/node.js

@@ -380,6 +380,7 @@ define('pgadmin.browser.node', [
             return;
           }
 
+          treeNodeInfo = pgBrowser.tree.getTreeNodeHierarchy(nodeItem);
           const panelId = _.uniqueId(BROWSER_PANELS.EDIT_PROPERTIES);
           const onClose = (force=false)=>pgBrowser.docker.close(panelId, force);
           const onSave = (newNodeData)=>{
@@ -694,7 +695,7 @@ define('pgadmin.browser.node', [
         pgBrowser.Node.callbacks.change_server_background(item, data);
       },
       // Callback called - when a node is selected in browser tree.
-      selected: function(item, data, browser) {
+      selected: function(item, data) {
         // Show the information about the selected node in the below panels,
         // which are visible at this time:
         // + Properties
@@ -702,10 +703,10 @@ define('pgadmin.browser.node', [
         // + Dependents
         // + Dependencies
         // + Statistics
-        let b = browser || pgBrowser;
-
         // Update the menu items
-        pgAdmin.Browser.enable_disable_menus.apply(b, [item]);
+        pgAdmin.Browser.enable_disable_menus.apply(pgBrowser, [item]);
+
+        pgBrowser.Events.trigger('pgadmin-browser:node:selected', item, data);
 
         pgBrowser.Events.trigger('pgadmin:browser:tree:update-tree-state',
           item);

web/pgadmin/misc/properties/ObjectNodeProperties.jsx

@@ -20,7 +20,7 @@ import usePreferences from '../../preferences/static/js/store';
 import PropTypes from 'prop-types';
 
 export default function ObjectNodeProperties({panelId, node, treeNodeInfo, nodeData, actionType, formType, onEdit, onSave, onClose,
-  isActive, isStale, setIsStale}) {
+  isActive, setIsStale}) {
   const layoutDocker = React.useContext(LayoutDockerContext);
   const nodeType = nodeData?._type;
   const pgAdmin = usePgAdmin();
@@ -61,7 +61,7 @@ export default function ObjectNodeProperties({panelId, node, treeNodeInfo, nodeD
           resolve(res.data);
         })
         .catch((err)=>{
-          pgAdmin.Browser.notifier.pgNotifier('error', err, '', function(msg) {
+          pgAdmin.Browser.notifier.pgNotifier('error', err, gettext('Failed to fetch data'), function(msg) {
             if (msg == 'CRYPTKEY_SET') {
               return Promise.resolve(initData());
             } else if (msg == 'CRYPTKEY_NOT_SET') {
@@ -198,13 +198,13 @@ export default function ObjectNodeProperties({panelId, node, treeNodeInfo, nodeD
   }
 
   const key = useMemo(()=>{
-    if(!isActive && isStale || actionType != 'properties') {
+    if( actionType != 'properties' || isActive) {
       return nodeData?._id;
-    } else if(isActive && isStale) {
+    } else {
-      return nodeData?._id + '0';
+      initData = ()=>Promise.resolve({});
+      return nodeData?._id + '-0';
     }
-    return nodeData?._id + '1';
+  }, [isActive, nodeData?._id]);
-  }, [isActive, isStale, nodeData?._id]);
 
   /* Fire at will, mount the DOM */
   return (
@@ -242,6 +242,5 @@ ObjectNodeProperties.propTypes = {
   onSave: PropTypes.func,
   onClose: PropTypes.func,
   isActive: PropTypes.bool,
-  isStale: PropTypes.bool,
   setIsStale: PropTypes.func,
 };

web/pgadmin/preferences/static/js/store.js

@@ -78,4 +78,13 @@ export function listenPreferenceBroadcast() {
 
   // initial sync
   preferenceChangeBroadcast.postMessage('sync');
+
+  return new Promise((resolve)=>{
+    const i = setInterval(()=>{
+      if(usePreferences.getState()?.version > 0) {
+        clearInterval(i);
+        resolve();
+      }
+    }, 100);
+  });
 }

web/pgadmin/static/js/BrowserComponent.jsx

@@ -112,7 +112,7 @@ export default function BrowserComponent({pgAdmin}) {
       <ModalProvider>
         <NotifierProvider pgAdmin={pgAdmin} onReady={()=>setUiReady(true)}/>
         {browser != 'Nwjs' && <AppMenuBar />}
-        <div style={{height: 'calc(100% - 30px)'}}>
+        <div style={{height: (browser != 'Nwjs' ? 'calc(100% - 30px)' : '100%')}}>
           <Layout
             getLayoutInstance={(obj)=>{
               pgAdmin.Browser.docker = obj;

web/pgadmin/static/js/PgTreeView/index.jsx

@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme) => ({
   node: {
     display: 'inline-block',
     paddingLeft: '1.5rem',
-    height: '1.5rem'
+    height: '100%',
   },
   checkboxStyle: {
     fill: theme.palette.primary.main
@@ -171,7 +171,7 @@ function Node({ node, style, tree, hasCheckbox, onNodeSelectionChange}) {
       {
         hasCheckbox ? <Checkbox style={{ padding: 0 }} color="primary" className={clsx(!node.isInternal ? classes.leafNode: null)}
           checked={isSelected ? true: false}
-          checkedIcon={isIndeterminate  ? <IndeterminateCheckBoxIcon />: <CheckBoxIcon />}
+          checkedIcon={isIndeterminate  ? <IndeterminateCheckBoxIcon style={{height: '1.4rem'}} />: <CheckBoxIcon style={{height: '1.4rem'}} />}
           onChange={onCheckboxSelection}/> :
           <span className={clsx(node.data.icon)}></span>
       }

web/pgadmin/static/js/Theme/index.jsx

@@ -324,6 +324,12 @@ function getFinalTheme(baseTheme) {
             margin: 0,
             padding: 0,
           },
+          svg: {
+            verticalAlign: 'middle',
+          },
+          img: {
+            verticalAlign: 'middle',
+          },
           ...pickrOverride(baseTheme),
           ...uplotOverride(baseTheme),
           ...rcdockOverride(baseTheme),
@@ -414,7 +420,7 @@ function getFinalTheme(baseTheme) {
         root: {
           ...mixins.panelBorder,
           '&.Mui-expanded': {
-            marginBottom: '8px',
+            margin: '8px 0px',
           },
         }
       },

web/pgadmin/static/js/Theme/overrides/rcdock.override.js

@@ -35,6 +35,13 @@ export default function rcdockOverride(theme) {
         '& .dock':  {
           borderRadius: 'inherit',
         },
+        '&.dock-style-playground':{
+          '&:not([data-dockid="id-main"])': {
+            '& .dock-extra-content': {
+              display: 'none',
+            }
+          }
+        },
         '&.dock-style-object-explorer': {
           '& .dock-ink-bar': {
             height: '0px',

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

@@ -465,16 +465,6 @@ export default function CodeMirror({currEditor, name, value, options, events, re
       editor.current.on(eventName, events[eventName]);
     });
 
-    // Register keyup event if autocomplete is true
-    let pref = preferencesStore.getPreferencesForModule('sqleditor');
-    if (autocomplete && pref.autocomplete_on_key_press) {
-      editor.current.on('keyup', (cm, event)=>{
-        if (!cm.state.completionActive && (event.key == 'Backspace' || /^[ -~]{1}$/.test(event.key))) {
-          OrigCodeMirror.commands.autocomplete(cm, null, {completeSingle: false});
-        }
-      });
-    }
-
     editor.current.on('drop', handleDrop);
     editor.current.on('paste', handlePaste);
     return ()=>{
@@ -482,30 +472,39 @@ export default function CodeMirror({currEditor, name, value, options, events, re
     };
   }, []);
 
-  useEffect(() => usePreferences.subscribe(
+  const autocompKeyup = (cm, event)=>{
-    state => {
+    if (!cm.state.completionActive && (event.key == 'Backspace' || /^[ -~]{1}$/.test(event.key))) {
-      let pref = state.getPreferencesForModule('sqleditor');
+      OrigCodeMirror.commands.autocomplete(cm, null, {completeSingle: false});
-      let wrapEle = editor.current?.getWrapperElement();
-      wrapEle && (wrapEle.style.fontSize = calcFontSize(pref.sql_font_size));
-
-      if(pref.plain_editor_mode) {
-        editor.current?.setOption('mode', 'text/plain');
-        /* Although not required, setting explicitly as codemirror will remove code folding only on next edit */
-        editor.current?.setOption('foldGutter', false);
-      } else {
-        editor.current?.setOption('mode', 'text/x-pgsql');
-        editor.current?.setOption('foldGutter', pref.code_folding);
-      }
-
-      editor.current?.setOption('indentWithTabs', !pref.use_spaces);
-      editor.current?.setOption('indentUnit', pref.tab_size);
-      editor.current?.setOption('tabSize', pref.tab_size);
-      editor.current?.setOption('lineWrapping', pref.wrap_code);
-      editor.current?.setOption('autoCloseBrackets', pref.insert_pair_brackets);
-      editor.current?.setOption('matchBrackets', pref.brace_matching);
-      editor.current?.refresh();
     }
-  ), []);
+  };
+
+  useEffect(()=>{
+    let pref = preferencesStore.getPreferencesForModule('sqleditor');
+    let wrapEle = editor.current?.getWrapperElement();
+    wrapEle && (wrapEle.style.fontSize = calcFontSize(pref.sql_font_size));
+
+    // Register keyup event if autocomplete is true
+    if (autocomplete && pref.autocomplete_on_key_press) {
+      editor.current.on('keyup', autocompKeyup);
+    }
+
+    if(pref.plain_editor_mode) {
+      editor.current?.setOption('mode', 'text/plain');
+      /* Although not required, setting explicitly as codemirror will remove code folding only on next edit */
+      editor.current?.setOption('foldGutter', false);
+    } else {
+      editor.current?.setOption('mode', 'text/x-pgsql');
+      editor.current?.setOption('foldGutter', pref.code_folding);
+    }
+
+    editor.current?.setOption('indentWithTabs', !pref.use_spaces);
+    editor.current?.setOption('indentUnit', pref.tab_size);
+    editor.current?.setOption('tabSize', pref.tab_size);
+    editor.current?.setOption('lineWrapping', pref.wrap_code);
+    editor.current?.setOption('autoCloseBrackets', pref.insert_pair_brackets);
+    editor.current?.setOption('matchBrackets', pref.brace_matching);
+    editor.current?.refresh();
+  }, [preferencesStore]);
 
   useEffect(()=>{
     if(editor.current) {

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

@@ -122,6 +122,8 @@ export class LayoutDocker {
 
   setTitle(panelId, title, icon, tooltip) {
     const panelData = this.find(panelId);
+    if(!panelData) return;
+
     const internal = {
       ...panelData.internal,
     };

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

@@ -164,6 +164,7 @@ class Notifier {
       return onJSONResult();
     }
     this.alert(promptmsg, msg.replace(new RegExp(/\r?\n/, 'g'), '<br />'));
+    onJSONResult();
   }
 
   alert(title, text, onOkClick, okLabel=gettext('OK')) {

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

@@ -15,12 +15,11 @@ import { usePgAdmin } from '../../../static/js/BrowserComponent';
 export default function withStandardTabInfo(Component, tabId) {
   // eslint-disable-next-line react/display-name
   const HOCComponent = (props)=>{
-    const [[nodeItem, nodeData], setNodeInfo] = useState([]);
+    const [[isStale, nodeItem, nodeData], setNodeInfo] = useState([]);
     const pgAdmin = usePgAdmin();
     const node = nodeData && pgAdmin.Browser.Nodes[nodeData?._type];
     const treeNodeInfo = pgAdmin.Browser.tree?.getTreeNodeHierarchy(nodeItem);
     const [isActive, setIsActive] = React.useState(false);
-    const [isStale, setIsStale] = React.useState(true);
     const layoutDocker = useContext(LayoutDockerContext);
 
     useEffect(()=>{
@@ -38,13 +37,11 @@ export default function withStandardTabInfo(Component, tabId) {
         }
       }, 100);
 
-      let deregisterTree = pgAdmin.Browser.Events.on('pgadmin-browser:tree:selected', (item, data)=>{
+      let deregisterTree = pgAdmin.Browser.Events.on('pgadmin-browser:node:selected', (item, data)=>{
-        setNodeInfo([item, data]);
+        setNodeInfo([true, item, data]);
-        setIsStale(true);
       });
       let deregisterTreeUpdate = pgAdmin.Browser.Events.on('pgadmin-browser:tree:updated', (item, data)=>{
         setNodeInfo([item, data]);
-        setIsStale(true);
       });
       let deregisterActive = layoutDocker.eventBus.registerListener(LAYOUT_EVENTS.ACTIVE, onTabActive);
       // if there is any dock changes to the tab and it appears to be active/inactive
@@ -66,10 +63,6 @@ export default function withStandardTabInfo(Component, tabId) {
       };
     }, []);
 
-    useEffect(()=>{
-      setIsStale(true);
-    }, [nodeData]);
-
     return (
       <Component
         {...props}
@@ -79,7 +72,7 @@ export default function withStandardTabInfo(Component, tabId) {
         treeNodeInfo={treeNodeInfo}
         isActive={isActive}
         isStale={isStale}
-        setIsStale={setIsStale}
+        setIsStale={(v)=>setNodeInfo((prev)=>[v, prev[1], prev[2]])}
       />
     );
   };

web/pgadmin/tools/erd/static/js/ERDModule.js

@@ -138,8 +138,8 @@ export default class ERDModule {
     return openUrl;
   }
 
-  loadComponent(container, params) {
+  async loadComponent(container, params) {
-    listenPreferenceBroadcast();
+    await listenPreferenceBroadcast();
     ReactDOM.render(
       <Theme>
         <ModalProvider>

web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js

@@ -222,11 +222,11 @@ export default class SQLEditor {
     return true;
   }
 
-  loadComponent(container, params) {
+  async loadComponent(container, params) {
     let selectedNodeInfo = pgWindow.pgAdmin.Browser.tree.getTreeNodeHierarchy(
       pgWindow.pgAdmin.Browser.tree.selected()
     );
-    listenPreferenceBroadcast();
+    await listenPreferenceBroadcast();
     ReactDOM.render(
       <Theme>
         <PgAdminContext.Provider value={pgAdmin}>

web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx

@@ -338,7 +338,7 @@ export default function QueryToolComponent({params, pgWindow, pgAdmin, selectedN
         if(docker.current.isTabVisible(PANELS.QUERY)) {
           docker.current.focus(PANELS.QUERY);
         } else if(docker.current.isTabVisible(PANELS.HISTORY)) {
-          docker.current.isTabVisible(PANELS.HISTORY);
+          docker.current.focus(PANELS.HISTORY);
         }
 
         eventBus.current.fireEvent(QUERY_TOOL_EVENTS.GOTO_LAST_SCROLL);