From b11b2a2f50aa6f069d5cb21a6f0b7e8d2393e6ec Mon Sep 17 00:00:00 2001 From: Aditya Toshniwal Date: Fri, 27 Oct 2023 15:51:45 +0530 Subject: [PATCH] Continue fixing multiple UI and SonarQube issues found when testing wcDocker changes. #6479 --- docs/en_US/code_overview.rst | 3 +- docs/en_US/coding_standards.rst | 6 +- web/.yarnrc.yml | 2 + web/config.py | 4 +- web/pgadmin/browser/static/js/browser.js | 2 +- .../misc/bgprocess/static/js/Processes.jsx | 44 +++++------ .../dependencies/static/js/Dependencies.jsx | 1 + .../misc/dependents/static/js/Dependents.jsx | 1 + .../properties/CollectionNodeProperties.jsx | 78 +++++++++---------- web/pgadmin/misc/sql/static/js/SQL.jsx | 2 +- .../misc/statistics/static/js/Statistics.jsx | 3 +- web/pgadmin/static/js/BrowserComponent.jsx | 35 +++++---- web/pgadmin/static/js/SchemaView/index.jsx | 15 ++-- web/pgadmin/static/js/Theme/index.jsx | 3 + .../js/Theme/overrides/rcdock.override.js | 29 ++++++- web/pgadmin/static/js/ToolView.jsx | 2 +- web/pgadmin/static/js/components/Buttons.jsx | 4 +- web/pgadmin/static/js/components/PgTable.jsx | 2 +- .../js/components/PgTree/FileTreeX/index.tsx | 1 - .../static/js/helpers/Layout/index.jsx | 2 +- web/pgadmin/static/js/helpers/Notifier.jsx | 5 +- web/pgadmin/static/scss/_pgadmin.style.scss | 1 + web/pgadmin/templates/base.html | 4 +- .../components/DebuggerArgumentComponent.jsx | 1 + .../js/components/sections/MainToolBar.jsx | 6 +- web/webpack.config.js | 26 ++++++- 26 files changed, 171 insertions(+), 111 deletions(-) diff --git a/docs/en_US/code_overview.rst b/docs/en_US/code_overview.rst index f89f873d8..7dc7b7c97 100644 --- a/docs/en_US/code_overview.rst +++ b/docs/en_US/code_overview.rst @@ -207,8 +207,7 @@ Front End pgAdmin uses javascript extensively for the front-end implementation. It uses require.js to allow the lazy loading (or, say load only when required), -bootstrap and MaterialUI for UI look and feel, React for generating -properties/create dialog for selected node. We have +ReactJS with CSS and MaterialUI for UI look and feel. We have divided each module in small chunks as much as possible. Not all javascript modules are required to be loaded (i.e. loading a javascript module for database will make sense only when a server node is loaded completely.) Please diff --git a/docs/en_US/coding_standards.rst b/docs/en_US/coding_standards.rst index 2986c4539..78ad9ab58 100644 --- a/docs/en_US/coding_standards.rst +++ b/docs/en_US/coding_standards.rst @@ -22,14 +22,12 @@ purpose or how it works if not obvious from a quick review of the code itself. CSS 3 ***** -CSS3 is used for styling and layout throughout the application. Extensive use is -made of the Bootstrap Framework to aid in that process, however additional -styles must still be created from time to time. +CSS3 is used for styling and layout throughout the application. Most custom styling comes from individual modules which may advertise static stylesheets to be included in the module that is loading them via hooks. -Styling overrides (for example, to alter the Bootstrap look and feel) will +Styling overrides (for example, to alter the look and feel) will typically be found in the **overrides.css** file in the main static file directory for the application. diff --git a/web/.yarnrc.yml b/web/.yarnrc.yml index 6413a424d..fae63bed3 100644 --- a/web/.yarnrc.yml +++ b/web/.yarnrc.yml @@ -5,3 +5,5 @@ logFilters: level: discard nodeLinker: node-modules + +yarnPath: .yarn/releases/yarn-3.6.4.cjs diff --git a/web/config.py b/web/config.py index 5c1384215..5fe98f0bf 100644 --- a/web/config.py +++ b/web/config.py @@ -230,8 +230,8 @@ PROXY_X_PREFIX_COUNT = 0 # COMPRESSION COMPRESS_MIMETYPES = [ - 'text/html', 'text/css', 'text/xml', 'application/json', - 'application/javascript' + 'text/html', 'text/css', 'text/xml', 'text/javascript', + 'application/json', 'application/javascript' ] COMPRESS_LEVEL = 9 COMPRESS_MIN_SIZE = 500 diff --git a/web/pgadmin/browser/static/js/browser.js b/web/pgadmin/browser/static/js/browser.js index 13d6a7f03..3b325e0b4 100644 --- a/web/pgadmin/browser/static/js/browser.js +++ b/web/pgadmin/browser/static/js/browser.js @@ -314,7 +314,6 @@ define('pgadmin.browser', [ 'pgadmin:server:disconnect', stop_heartbeat.bind(obj) ); - obj.set_master_password(''); obj.check_corrupted_db_file(); obj.Events.on('pgadmin:browser:tree:add', obj.onAddTreeNode.bind(obj)); obj.Events.on('pgadmin:browser:tree:update', obj.onUpdateTreeNode.bind(obj)); @@ -328,6 +327,7 @@ define('pgadmin.browser', [ obj.start_inactivity_timeout_daemon(); }, uiloaded: function() { + this.set_master_password(''); this.check_version_update(); }, check_corrupted_db_file: function() { diff --git a/web/pgadmin/misc/bgprocess/static/js/Processes.jsx b/web/pgadmin/misc/bgprocess/static/js/Processes.jsx index 30ea73577..df3b71da2 100644 --- a/web/pgadmin/misc/bgprocess/static/js/Processes.jsx +++ b/web/pgadmin/misc/bgprocess/static/js/Processes.jsx @@ -13,7 +13,7 @@ import gettext from 'sources/gettext'; import PropTypes from 'prop-types'; import { makeStyles } from '@material-ui/core/styles'; import { BgProcessManagerEvents, BgProcessManagerProcessState } from './BgProcessConstants'; -import { PgIconButton } from '../../../../static/js/components/Buttons'; +import { PgButtonGroup, PgIconButton } from '../../../../static/js/components/Buttons'; import CancelIcon from '@material-ui/icons/Cancel'; import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined'; import DeleteIcon from '@material-ui/icons/Delete'; @@ -282,27 +282,27 @@ export default function Processes() { CustomHeader={()=>{ return ( - } - aria-label="Acknowledge and Remove" - title={gettext('Acknowledge and Remove')} - onClick={() => { - pgAdmin.Browser.notifier.confirm(gettext('Remove Processes'), gettext('Are you sure you want to remove the selected processes?'), ()=>{ - pgAdmin.Browser.BgProcessManager.acknowledge(selectedRows.map((p)=>p.original.id)); - }); - }} - disabled={selectedRows.length <= 0} - > - } - aria-label="Help" - title={gettext('Help')} - style={{marginLeft: '8px'}} - onClick={() => { - window.open(url_for('help.static', {'filename': 'processes.html'})); - }} - > + + } + aria-label="Acknowledge and Remove" + title={gettext('Acknowledge and Remove')} + onClick={() => { + pgAdmin.Browser.notifier.confirm(gettext('Remove Processes'), gettext('Are you sure you want to remove the selected processes?'), ()=>{ + pgAdmin.Browser.BgProcessManager.acknowledge(selectedRows.map((p)=>p.original.id)); + }); + }} + disabled={selectedRows.length <= 0} + > + } + aria-label="Help" + title={gettext('Help')} + onClick={() => { + window.open(url_for('help.static', {'filename': 'processes.html'})); + }} + > + ); }} diff --git a/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx b/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx index 12d15a74b..c7b0c30d4 100644 --- a/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx +++ b/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx @@ -154,6 +154,7 @@ function Dependencies({ nodeData, nodeItem, node, treeNodeInfo, isActive, isStal if (message != '') { setMsg(message); setLoaderText(''); + setTableData([]); } setIsStale(false); }, [isActive, isStale]); diff --git a/web/pgadmin/misc/dependents/static/js/Dependents.jsx b/web/pgadmin/misc/dependents/static/js/Dependents.jsx index c94c88904..3a7eee207 100644 --- a/web/pgadmin/misc/dependents/static/js/Dependents.jsx +++ b/web/pgadmin/misc/dependents/static/js/Dependents.jsx @@ -152,6 +152,7 @@ function Dependents({ nodeData, nodeItem, node, treeNodeInfo, isActive, isStale, } if (message != '') { setLoaderText(''); + setTableData([]); setMsg(message); } diff --git a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx index 496e83c08..6c3773a53 100644 --- a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx +++ b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx @@ -15,7 +15,7 @@ import gettext from 'sources/gettext'; import PgTable from 'sources/components/PgTable'; import Theme from 'sources/Theme'; import PropTypes from 'prop-types'; -import { PgIconButton } from '../../static/js/components/Buttons'; +import { PgButtonGroup, PgIconButton } from '../../static/js/components/Buttons'; import DeleteIcon from '@material-ui/icons/Delete'; import DeleteSweepIcon from '@material-ui/icons/DeleteSweep'; import DeleteForeverIcon from '@material-ui/icons/DeleteForever'; @@ -64,9 +64,6 @@ const useStyles = makeStyles((theme) => ({ overflow: 'hidden !important', overflowX: 'auto !important' }, - dropButton: { - marginRight: '8px !important' - }, readOnlySwitch: { opacity: 0.75, '& .MuiSwitch-track': { @@ -291,48 +288,47 @@ export default function CollectionNodeProperties({ const canDropForce = evalFunc(node, node.canDropForce, nodeData, nodeItem, treeNodeInfo); return ( - } - aria-label="Delete" - title={gettext('Delete')} - onClick={() => { - onDrop('drop'); - }} - disabled={ - (selectedObject.length > 0) - ? !canDrop - : true - } - > - {node.type !== 'coll-database' ? } - aria-label="Delete Cascade" - title={gettext('Delete (Cascade)')} - onClick={() => { - onDrop('dropCascade'); - }} - disabled={ - (selectedObject.length > 0) - ? !canDropCascade - : true - } - > : + } - aria-label="Delete Force" - title={gettext('Delete (Force)')} + icon={} + aria-label="Delete" + title={gettext('Delete')} onClick={() => { - onDrop('dropForce'); + onDrop('drop'); }} disabled={ (selectedObject.length > 0) - ? !canDropForce + ? !canDrop : true } - >} + > + {node.type !== 'coll-database' ? } + aria-label="Delete Cascade" + title={gettext('Delete (Cascade)')} + onClick={() => { + onDrop('dropCascade'); + }} + disabled={ + (selectedObject.length > 0) + ? !canDropCascade + : true + } + > : + } + aria-label="Delete Force" + title={gettext('Delete (Force)')} + onClick={() => { + onDrop('dropForce'); + }} + disabled={ + (selectedObject.length > 0) + ? !canDropForce + : true + } + >} + ); }; @@ -356,9 +352,7 @@ export default function CollectionNodeProperties({ : (
- {loaderText ? () : - - } +
) } diff --git a/web/pgadmin/misc/sql/static/js/SQL.jsx b/web/pgadmin/misc/sql/static/js/SQL.jsx index e1d4a6ff5..db9151beb 100644 --- a/web/pgadmin/misc/sql/static/js/SQL.jsx +++ b/web/pgadmin/misc/sql/static/js/SQL.jsx @@ -90,7 +90,7 @@ function SQL({nodeData, node, treeNodeInfo, isActive, isStale, setIsStale}) { setNodeSQL(sql); } setIsStale(false); - }, [isStale, isActive]); + }, [isStale, isActive, nodeData?.id]); return ( <> diff --git a/web/pgadmin/misc/statistics/static/js/Statistics.jsx b/web/pgadmin/misc/statistics/static/js/Statistics.jsx index 548a63dca..73bdb2798 100644 --- a/web/pgadmin/misc/statistics/static/js/Statistics.jsx +++ b/web/pgadmin/misc/statistics/static/js/Statistics.jsx @@ -237,10 +237,11 @@ function Statistics({ nodeData, nodeItem, node, treeNodeInfo, isActive, isStale, } } if (message != '') { + setTableData([]); setMsg(message); } setIsStale(false); - }, [isStale, isActive]); + }, [isStale, isActive, nodeData?.id]); return ( <> diff --git a/web/pgadmin/static/js/BrowserComponent.jsx b/web/pgadmin/static/js/BrowserComponent.jsx index 077cfa1eb..f4170460d 100644 --- a/web/pgadmin/static/js/BrowserComponent.jsx +++ b/web/pgadmin/static/js/BrowserComponent.jsx @@ -1,4 +1,4 @@ -import React, {useLayoutEffect, useMemo } from 'react'; +import React, {useEffect, useMemo, useState } from 'react'; import AppMenuBar from './AppMenuBar'; import ObjectBreadcrumbs from './components/ObjectBreadcrumbs'; import Layout, { LayoutDocker, getDefaultGroup } from './helpers/Layout'; @@ -35,27 +35,27 @@ const mainPanelGroup = { }; export const processesPanelData = { - id: BROWSER_PANELS.PROCESSES, title: gettext('Processes'), content: , closable: true, group: 'main' + id: BROWSER_PANELS.PROCESSES, title: gettext('Processes'), content: , closable: true, group: 'playground' }; export const defaultTabsData = [ { - id: BROWSER_PANELS.DASHBOARD, title: gettext('Dashboard'), content: , closable: true, group: 'main' + id: BROWSER_PANELS.DASHBOARD, title: gettext('Dashboard'), content: , closable: true, group: 'playground' }, { - id: BROWSER_PANELS.PROPERTIES, title: gettext('Properties'), content: , closable: true, group: 'main' + id: BROWSER_PANELS.PROPERTIES, title: gettext('Properties'), content: , closable: true, group: 'playground' }, { - id: BROWSER_PANELS.SQL, title: gettext('SQL'), content: , closable: true, group: 'main' + id: BROWSER_PANELS.SQL, title: gettext('SQL'), content: , closable: true, group: 'playground' }, { - id: BROWSER_PANELS.STATISTICS, title: gettext('Statistics'), content: , closable: true, group: 'main' + id: BROWSER_PANELS.STATISTICS, title: gettext('Statistics'), content: , closable: true, group: 'playground' }, { - id: BROWSER_PANELS.DEPENDENCIES, title: gettext('Dependencies'), content: , closable: true, group: 'main' + id: BROWSER_PANELS.DEPENDENCIES, title: gettext('Dependencies'), content: , closable: true, group: 'playground' }, { - id: BROWSER_PANELS.DEPENDENTS, title: gettext('Dependents'), content: , closable: true, group: 'main' + id: BROWSER_PANELS.DEPENDENTS, title: gettext('Dependents'), content: , closable: true, group: 'playground' }, processesPanelData, ]; @@ -81,9 +81,9 @@ export default function BrowserComponent({pgAdmin}) { { size: 80, id: BROWSER_PANELS.MAIN, - group: 'main', + group: 'playground', tabs: defaultTabsData.map((t)=>LayoutDocker.getPanel(t)), - panelLock: {panelStyle: 'main'}, + panelLock: {panelStyle: 'playground'}, } ] }, @@ -92,10 +92,13 @@ export default function BrowserComponent({pgAdmin}) { }; const {isLoading, failed} = usePreferences(); let { name: browser } = useMemo(()=>getBrowser(), []); + const [uiReady, setUiReady] = useState(false); - useLayoutEffect(()=>{ - pgAdmin?.Browser?.uiloaded?.(); - }, []); + useEffect(()=>{ + if(uiReady) { + pgAdmin?.Browser?.uiloaded?.(); + } + }, [uiReady]); if(isLoading) { return <>; @@ -107,9 +110,9 @@ export default function BrowserComponent({pgAdmin}) { return ( - + setUiReady(true)}/> {browser != 'Nwjs' && } -
+
{ pgAdmin.Browser.docker = obj; @@ -119,7 +122,7 @@ export default function BrowserComponent({pgAdmin}) { savedLayout={pgAdmin.Browser.utils.layout} groups={{ 'object-explorer': objectExplorerGroup, - 'main': mainPanelGroup, + 'playground': mainPanelGroup, }} noContextGroups={['object-explorer']} resetToTabPanel={BROWSER_PANELS.MAIN} diff --git a/web/pgadmin/static/js/SchemaView/index.jsx b/web/pgadmin/static/js/SchemaView/index.jsx index 2c7f7153c..9212b8abb 100644 --- a/web/pgadmin/static/js/SchemaView/index.jsx +++ b/web/pgadmin/static/js/SchemaView/index.jsx @@ -39,6 +39,7 @@ import DataGridView from './DataGridView'; import { useIsMounted } from '../custom_hooks'; import ErrorBoundary from '../helpers/ErrorBoundary'; import { usePgAdmin } from '../BrowserComponent'; +import { PgButtonGroup } from '../components/Buttons'; const useDialogStyles = makeStyles((theme)=>({ root: { @@ -866,7 +867,7 @@ const usePropsStyles = makeStyles((theme)=>({ flexGrow: 1, }, toolbar: { - padding: theme.spacing(0.5, 1), + padding: theme.spacing(1), background: theme.palette.background.default, ...theme.mixins.panelBorder.bottom, }, @@ -1000,11 +1001,13 @@ function SchemaPropertiesView({ - props.onHelp(true, false)} icon={} disabled={props.disableSqlHelp} - title="SQL help for this object type." className={classes.buttonMargin} /> - } title={gettext('Edit object...')} /> + + props.onHelp(true, false)} icon={} disabled={props.disableSqlHelp} + title="SQL help for this object type." /> + } title={gettext('Edit object...')} /> + diff --git a/web/pgadmin/static/js/Theme/index.jsx b/web/pgadmin/static/js/Theme/index.jsx index 6b543097a..efba5fa0a 100644 --- a/web/pgadmin/static/js/Theme/index.jsx +++ b/web/pgadmin/static/js/Theme/index.jsx @@ -413,6 +413,9 @@ function getFinalTheme(baseTheme) { MuiAccordion: { root: { ...mixins.panelBorder, + '&.Mui-expanded': { + marginBottom: '8px', + }, } }, MuiAccordionSummary: { diff --git a/web/pgadmin/static/js/Theme/overrides/rcdock.override.js b/web/pgadmin/static/js/Theme/overrides/rcdock.override.js index 2355ba406..6d2653be0 100644 --- a/web/pgadmin/static/js/Theme/overrides/rcdock.override.js +++ b/web/pgadmin/static/js/Theme/overrides/rcdock.override.js @@ -41,10 +41,14 @@ export default function rcdockOverride(theme) { }, '& .dock-tab-active': { color: theme.palette.text.primary, + cursor: 'move', '&::hover': { color: theme.palette.text.primary, } }, + '& .dock-tab-btn': { + pointerEvents: 'none', + } }, '&.dock-style-dialogs': { borderRadius: theme.shape.borderRadius, @@ -159,7 +163,30 @@ export default function rcdockOverride(theme) { }, '& .drag-accept-reject::after': { content: '', + }, + '& .dock-nav-more': { + color: theme.custom.icon.contrastText } - } + }, + '.dock-dropdown': { + zIndex: 1004, + + '& .dock-dropdown-menu': { + padding: '4px 0px', + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, + border: `1px solid ${theme.otherVars.borderColor}`, + }, + '& .dock-dropdown-menu-item': { + display: 'flex', + padding: '3px 12px', + color: theme.palette.text.primary, + transition: 'none', + '&.dock-dropdown-menu-item-active, &:hover': { + backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + } + } + }, }; } diff --git a/web/pgadmin/static/js/ToolView.jsx b/web/pgadmin/static/js/ToolView.jsx index 68425f9cc..b1335e4ca 100644 --- a/web/pgadmin/static/js/ToolView.jsx +++ b/web/pgadmin/static/js/ToolView.jsx @@ -69,7 +69,7 @@ export default function ToolView() { manualClose: true, ...tabParams, cache: false, - group: 'main' + group: 'playground' }, BROWSER_PANELS.MAIN, 'middle', true); } }); diff --git a/web/pgadmin/static/js/components/Buttons.jsx b/web/pgadmin/static/js/components/Buttons.jsx index 73439c8f0..9f1205163 100644 --- a/web/pgadmin/static/js/components/Buttons.jsx +++ b/web/pgadmin/static/js/components/Buttons.jsx @@ -81,11 +81,11 @@ const useStyles = makeStyles((theme)=>({ }, noBorder: { border: 0, - color: 'inherit', backgroundColor: 'transparent', + color: theme.custom.icon.contrastText, '&:hover': { border: 0, - color: 'inherit', + color: theme.custom.icon.contrastText, backgroundColor: 'inherit', filter: 'brightness(85%)', }, diff --git a/web/pgadmin/static/js/components/PgTable.jsx b/web/pgadmin/static/js/components/PgTable.jsx index 3daaf0cae..ddb0d5702 100644 --- a/web/pgadmin/static/js/components/PgTable.jsx +++ b/web/pgadmin/static/js/components/PgTable.jsx @@ -92,7 +92,7 @@ const useStyles = makeStyles((theme) => ({ pgTableHeader: { display: 'flex', background: theme.palette.background.default, - padding: '4px 8px', + padding: '8px 8px 4px', }, tableRowContent:{ display: 'flex', diff --git a/web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx b/web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx index cd767aeba..6ae219b89 100644 --- a/web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx +++ b/web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx @@ -118,7 +118,6 @@ export class FileTreeX extends React.Component { setPseudoActiveFile: this.setPseudoActiveFile, toggleDirectory: this.toggleDirectory, closeDir: this.closeDir, - remove: this.removeDir, newFile: async (dirOrPath: Directory | string) => this.supervisePrompt(await handle.promptNewFile(dirOrPath as string)), newFolder: async (dirOrPath: Directory | string) => this.supervisePrompt(await handle.promptNewDirectory(dirOrPath as string)), onBlur: (callback) => this.events.add(FileTreeXEvent.OnBlur, callback), diff --git a/web/pgadmin/static/js/helpers/Layout/index.jsx b/web/pgadmin/static/js/helpers/Layout/index.jsx index 84ebc5324..11c26ee97 100644 --- a/web/pgadmin/static/js/helpers/Layout/index.jsx +++ b/web/pgadmin/static/js/helpers/Layout/index.jsx @@ -335,7 +335,7 @@ export function getDefaultGroup() { closable: false, maximizable: false, floatable: false, - moreIcon: , + moreIcon: , panelExtra: (panelData, context) => { let icon = ; let title = gettext('Maximise'); diff --git a/web/pgadmin/static/js/helpers/Notifier.jsx b/web/pgadmin/static/js/helpers/Notifier.jsx index b4d054cee..f6d05cc5d 100644 --- a/web/pgadmin/static/js/helpers/Notifier.jsx +++ b/web/pgadmin/static/js/helpers/Notifier.jsx @@ -183,13 +183,14 @@ class Notifier { } } -export function NotifierProvider({ pgAdmin, pgWindow, getInstance, children }) { +export function NotifierProvider({ pgAdmin, pgWindow, getInstance, children, onReady }) { const modal = useModal(); useEffect(()=>{ // if open in an iframe then use top pgAdmin if(window.self != window.top) { pgAdmin.Browser.notifier = new Notifier(modal, pgWindow.pgAdmin.Browser.notifier.snackbar); + onReady?.(); getInstance?.(pgAdmin.Browser.notifier); } }, []); @@ -203,6 +204,7 @@ export function NotifierProvider({ pgAdmin, pgWindow, getInstance, children }) { ref={(obj)=>{ pgAdmin.Browser.notifier = new Notifier(modal, new SnackbarNotifier(obj)); getInstance?.(pgAdmin.Browser.notifier); + onReady?.(); }} > {children} @@ -221,6 +223,7 @@ NotifierProvider.propTypes = { pgWindow: PropTypes.object, getInstance: PropTypes.func, children: CustomPropTypes.children, + onReady: PropTypes.func, }; export default Notifier; diff --git a/web/pgadmin/static/scss/_pgadmin.style.scss b/web/pgadmin/static/scss/_pgadmin.style.scss index 3b744bb03..5ac6a2c89 100644 --- a/web/pgadmin/static/scss/_pgadmin.style.scss +++ b/web/pgadmin/static/scss/_pgadmin.style.scss @@ -960,6 +960,7 @@ table.table-empty-rows{ .dialog-node-icon { margin-right: 2px !important; padding: 0px 10px; + background-position: 50%; } textarea { diff --git a/web/pgadmin/templates/base.html b/web/pgadmin/templates/base.html index c28ae8e2c..67d66283a 100644 --- a/web/pgadmin/templates/base.html +++ b/web/pgadmin/templates/base.html @@ -75,10 +75,10 @@ }); - - + + diff --git a/web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx b/web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx index f64dc7602..e1c7bf38f 100644 --- a/web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx +++ b/web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx @@ -824,6 +824,7 @@ export default function DebuggerArgumentComponent({ debuggerInfo, restartDebug, schema={debuggerArgsSchema.current} showFooter={false} isTabView={false} + Notifier={pgAdmin.Browser.notifier} onDataChange={(isChanged, changedData) => { let isValid = false; let skipStep = false; diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx index 57de88901..59f11d42a 100644 --- a/web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx +++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx @@ -393,19 +393,19 @@ export function MainToolBar({containerRef, onFilterClick, onManageMacros}) { { shortcut: queryToolPref.execute_query, options: { - callback: ()=>{!buttonsDisabled['execute']?executeQuery():null;} + callback: ()=>{!buttonsDisabled['execute']&&executeQuery();} } }, { shortcut: queryToolPref.explain_query, options: { - callback: (e)=>{e.preventDefault(); !buttonsDisabled['explain']?explain():null;} + callback: (e)=>{e.preventDefault(); !buttonsDisabled['explain']&&explain();} } }, { shortcut: queryToolPref.explain_analyze_query, options: { - callback: ()=>{!buttonsDisabled['explain_analyse']?explainAnalyse():null;} + callback: ()=>{!buttonsDisabled['explain_analyse']&&explainAnalyse();} } }, { diff --git a/web/webpack.config.js b/web/webpack.config.js index 8238b3a63..12ac3642b 100644 --- a/web/webpack.config.js +++ b/web/webpack.config.js @@ -580,6 +580,30 @@ module.exports = [{ ] : [], splitChunks: { cacheGroups: { + vendor_sqleditor: { + name: 'vendor_sqleditor', + filename: 'vendor.sqleditor.js', + chunks: 'all', + reuseExistingChunk: true, + priority: 9, + minChunks: 2, + enforce: true, + test(module) { + return webpackShimConfig.matchModules(module, ['jsoneditor', 'leaflet']); + }, + }, + vendor_react: { + name: 'vendor_react', + filename: 'vendor.react.js', + chunks: 'all', + reuseExistingChunk: true, + priority: 8, + minChunks: 2, + enforce: true, + test(module) { + return webpackShimConfig.matchModules(module, ['react', 'react-dom']); + }, + }, vendor_main: { name: 'vendor_main', filename: 'vendor.main.js', @@ -589,7 +613,7 @@ module.exports = [{ minChunks: 2, enforce: true, test(module) { - return webpackShimConfig.matchModules(module, ['react', 'react-dom', 'bootstrap', 'popper']); + return webpackShimConfig.matchModules(module, ['codemirror', 'rc-', '@material-ui']); }, }, vendor_others: {