From 17acce3e7bbb0290f0824b4e043a0937e0927923 Mon Sep 17 00:00:00 2001 From: Aditya Toshniwal Date: Wed, 1 Nov 2023 20:52:38 +0530 Subject: [PATCH] Continue fixing multiple UI issues found when testing wcDocker changes. #6479 --- .github/dependabot.yml | 18 ++--- web/pgadmin/browser/static/js/node.js | 9 +-- .../misc/properties/ObjectNodeProperties.jsx | 15 ++--- web/pgadmin/preferences/static/js/store.js | 9 +++ web/pgadmin/static/js/BrowserComponent.jsx | 2 +- web/pgadmin/static/js/PgTreeView/index.jsx | 4 +- web/pgadmin/static/js/Theme/index.jsx | 8 ++- .../js/Theme/overrides/rcdock.override.js | 7 ++ .../static/js/components/CodeMirror.jsx | 65 +++++++++---------- .../static/js/helpers/Layout/index.jsx | 2 + web/pgadmin/static/js/helpers/Notifier.jsx | 1 + .../static/js/helpers/withStandardTabInfo.jsx | 15 ++--- web/pgadmin/tools/erd/static/js/ERDModule.js | 4 +- .../sqleditor/static/js/SQLEditorModule.js | 4 +- .../js/components/QueryToolComponent.jsx | 2 +- 15 files changed, 91 insertions(+), 74 deletions(-) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 4f9a49ea9..ab34885de 100644 --- 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" diff --git a/web/pgadmin/browser/static/js/node.js b/web/pgadmin/browser/static/js/node.js index b69b38965..d3b443313 100644 --- 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); diff --git a/web/pgadmin/misc/properties/ObjectNodeProperties.jsx b/web/pgadmin/misc/properties/ObjectNodeProperties.jsx index 1a8e61aad..3706184c4 100644 --- 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, }; diff --git a/web/pgadmin/preferences/static/js/store.js b/web/pgadmin/preferences/static/js/store.js index 51247b342..f94c5dcb4 100644 --- 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); + }); } diff --git a/web/pgadmin/static/js/BrowserComponent.jsx b/web/pgadmin/static/js/BrowserComponent.jsx index f4170460d..8d9f2588d 100644 --- a/web/pgadmin/static/js/BrowserComponent.jsx +++ b/web/pgadmin/static/js/BrowserComponent.jsx @@ -112,7 +112,7 @@ export default function BrowserComponent({pgAdmin}) { setUiReady(true)}/> {browser != 'Nwjs' && } -
+
{ pgAdmin.Browser.docker = obj; diff --git a/web/pgadmin/static/js/PgTreeView/index.jsx b/web/pgadmin/static/js/PgTreeView/index.jsx index fed62f232..51c022b37 100644 --- 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 ? : } + checkedIcon={isIndeterminate ? : } onChange={onCheckboxSelection}/> : } diff --git a/web/pgadmin/static/js/Theme/index.jsx b/web/pgadmin/static/js/Theme/index.jsx index efba5fa0a..3d36943b1 100644 --- 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', }, } }, diff --git a/web/pgadmin/static/js/Theme/overrides/rcdock.override.js b/web/pgadmin/static/js/Theme/overrides/rcdock.override.js index 6d2653be0..0601be63e 100644 --- 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', diff --git a/web/pgadmin/static/js/components/CodeMirror.jsx b/web/pgadmin/static/js/components/CodeMirror.jsx index dc699e94e..9632c3ee4 100644 --- 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) { diff --git a/web/pgadmin/static/js/helpers/Layout/index.jsx b/web/pgadmin/static/js/helpers/Layout/index.jsx index 3ab99f832..64c4820c2 100644 --- 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, }; diff --git a/web/pgadmin/static/js/helpers/Notifier.jsx b/web/pgadmin/static/js/helpers/Notifier.jsx index f6d05cc5d..7f2034b52 100644 --- 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'), '
')); + onJSONResult(); } alert(title, text, onOkClick, okLabel=gettext('OK')) { diff --git a/web/pgadmin/static/js/helpers/withStandardTabInfo.jsx b/web/pgadmin/static/js/helpers/withStandardTabInfo.jsx index b8aa89208..ed2bf44e9 100644 --- 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 ( setNodeInfo((prev)=>[v, prev[1], prev[2]])} /> ); }; diff --git a/web/pgadmin/tools/erd/static/js/ERDModule.js b/web/pgadmin/tools/erd/static/js/ERDModule.js index 7970ee28a..a78d65f80 100644 --- 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( diff --git a/web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js b/web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js index 38f5b8166..cf4d0ad41 100644 --- 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( diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx index 160c48037..4e6b0d0d5 100644 --- 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);