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

2024-12-22 15:13:42 -06:00 · 2023-11-01 20:52:38 +05:30 · 2023-11-01 20:52:38 +05:30 · 17acce3e7b
commit 17acce3e7b
parent d3dd5c0b56
15 changed files with 91 additions and 74 deletions
--- a/.github/dependabot.yml
+++ b/.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"
--- a/web/pgadmin/browser/static/js/node.js
+++ b/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);
--- a/web/pgadmin/misc/properties/ObjectNodeProperties.jsx
+++ b/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) {
-      return nodeData?._id + '0';
+    } else {
+      initData = ()=>Promise.resolve({});
+      return nodeData?._id + '-0';
    }
-    return nodeData?._id + '1';
-  }, [isActive, isStale, nodeData?._id]);
+  }, [isActive, 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,
 };
--- a/web/pgadmin/preferences/static/js/store.js
+++ b/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);
+  });
 }
--- a/web/pgadmin/static/js/BrowserComponent.jsx
+++ b/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;
--- a/web/pgadmin/static/js/PgTreeView/index.jsx
+++ b/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>
      }
--- a/web/pgadmin/static/js/Theme/index.jsx
+++ b/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',
          },
        }
      },
--- a/web/pgadmin/static/js/Theme/overrides/rcdock.override.js
+++ b/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',
--- a/web/pgadmin/static/js/components/CodeMirror.jsx
+++ b/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(
-    state => {
-      let pref = state.getPreferencesForModule('sqleditor');
-      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();
+  const autocompKeyup = (cm, event)=>{
+    if (!cm.state.completionActive && (event.key == 'Backspace' || /^[ -~]{1}$/.test(event.key))) {
+      OrigCodeMirror.commands.autocomplete(cm, null, {completeSingle: false});
    }
-  ), []);
+  };
+
+  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) {
--- a/web/pgadmin/static/js/helpers/Layout/index.jsx
+++ b/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,
    };
--- a/web/pgadmin/static/js/helpers/Notifier.jsx
+++ b/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')) {
--- a/web/pgadmin/static/js/helpers/withStandardTabInfo.jsx
+++ b/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)=>{
-        setNodeInfo([item, data]);
-        setIsStale(true);
+      let deregisterTree = pgAdmin.Browser.Events.on('pgadmin-browser:node:selected', (item, data)=>{
+        setNodeInfo([true, item, data]);
      });
      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]])}
      />
    );
  };
--- a/web/pgadmin/tools/erd/static/js/ERDModule.js
+++ b/web/pgadmin/tools/erd/static/js/ERDModule.js
@ -138,8 +138,8 @@ export default class ERDModule {
    return openUrl;
  }

-  loadComponent(container, params) {
-    listenPreferenceBroadcast();
+  async loadComponent(container, params) {
+    await listenPreferenceBroadcast();
    ReactDOM.render(
      <Theme>
        <ModalProvider>
--- a/web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js
+++ b/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}>
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx
+++ b/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);