Fix an issue where view/edit tool is not opening in workspace layout.

Fixed few other theme related issues.

web/pgadmin/misc/workspaces/static/js/WorkspaceToolbar.jsx

@@ -20,6 +20,7 @@ import { styled } from '@mui/material/styles';
 import { WORKSPACES } from '../../../../browser/static/js/constants';
 import { useWorkspace } from './WorkspaceProvider';
 import { LAYOUT_EVENTS } from '../../../../static/js/helpers/Layout';
+import gettext from 'sources/gettext';
 
 const StyledWorkspaceButton = styled(PgIconButton)(({theme}) => ({
   '&.Buttons-iconButtonDefault': {
@@ -28,10 +29,16 @@ const StyledWorkspaceButton = styled(PgIconButton)(({theme}) => ({
     borderRadius: 0,
     padding: '8px 6px',
     height: '40px',
+    backgroundColor: theme.palette.background.default,
+    '&:hover': {
+      borderColor: 'transparent',
+    },
     '&.active': {
-      borderRightColor: theme.otherVars.activeBorder,
+      backgroundColor: theme.otherVars.tree.bgSelected,
+      borderRightColor: theme.palette.primary.main,
     },
     '&.Mui-disabled': {
+      backgroundColor: theme.palette.background.default,
       borderRightColor: 'transparent',
     }
   },
@@ -87,6 +94,14 @@ WorkspaceButton.propTypes = {
   value: PropTypes.string
 };
 
+const Root = styled('div')(({theme}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  ...theme.mixins.panelBorder.top,
+  ...theme.mixins.panelBorder.right,
+}));
+
 export default function WorkspaceToolbar() {
   const [menus, setMenus] = useState({
     'settings': undefined,
@@ -107,15 +122,15 @@ export default function WorkspaceToolbar() {
   }, []);
 
   return (
-    <Box style={{borderTop: '1px solid #dde0e6', borderRight: '1px solid #dde0e6'}} display="flex" flexDirection="column" alignItems="center" gap="2px">
-      <WorkspaceButton icon={<AccountTreeRoundedIcon />} value={WORKSPACES.DEFAULT} />
-      <WorkspaceButton icon={<QueryToolIcon />} value={WORKSPACES.QUERY_TOOL} />
-      <WorkspaceButton icon={<TerminalRoundedIcon style={{height: '1.4rem'}}/>} value={WORKSPACES.PSQL_TOOL} />
-      <WorkspaceButton icon={<SchemaDiffIcon />} value={WORKSPACES.SCHEMA_DIFF_TOOL} />
+    <Root>
+      <WorkspaceButton icon={<AccountTreeRoundedIcon />} value={WORKSPACES.DEFAULT} title={gettext('Default Workspace')} tooltipPlacement="right" />
+      <WorkspaceButton icon={<QueryToolIcon />} value={WORKSPACES.QUERY_TOOL} title={gettext('Query Tool Workspace')} tooltipPlacement="right" />
+      <WorkspaceButton icon={<TerminalRoundedIcon style={{height: '1.4rem'}}/>} value={WORKSPACES.PSQL_TOOL} title={gettext('PSQL Tool Workspace')} tooltipPlacement="right" />
+      <WorkspaceButton icon={<SchemaDiffIcon />} value={WORKSPACES.SCHEMA_DIFF_TOOL} title={gettext('Schema Diff Workspace')} tooltipPlacement="right" />
       <Box marginTop="auto">
-        <WorkspaceButton icon={<SettingsIcon />} menuItem={menus['settings']} />
+        <WorkspaceButton icon={<SettingsIcon />} menuItem={menus['settings']} title={gettext('Preferences')} tooltipPlacement="right" />
       </Box>
-    </Box>
+    </Root>
   );
 }
 

web/pgadmin/static/img/fonticon/compare.svg

@@ -3,7 +3,7 @@
 <svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 26 26" style="enable-background:new 0 0 26 26;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#222222;}
+	.st0{fill:currentColor;}
 </style>
 <path class="st0" d="M21.5,2h-9c-1.1,0-2,0.9-2,2v3h-6c-1.1,0-2,0.9-2,2v13c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2v-3h7c1.1,0,2-0.9,2-2
 	V4C23.5,2.9,22.6,2,21.5,2z M12.5,14.8H8.9l1-1c0.1-0.1,0.1-0.2,0.1-0.3s0-0.2-0.1-0.3l-0.3-0.3c-0.1-0.1-0.2-0.1-0.3-0.1

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

@@ -165,7 +165,7 @@ DefaultButton.propTypes = {
 
 
 /* pgAdmin Icon button, takes Icon component as input */
-export const PgIconButton = forwardRef(({icon, title, shortcut, className, splitButton, style, color, accesskey, isDropdown, ...props}, ref)=>{
+export const PgIconButton = forwardRef(({icon, title, shortcut, className, splitButton, style, color, accesskey, isDropdown, tooltipPlacement, ...props}, ref)=>{
   let shortcutTitle = null;
   if(accesskey || shortcut) {
     shortcutTitle = <ShortcutTitle title={title} accesskey={accesskey} shortcut={shortcut}/>;
@@ -192,7 +192,7 @@ export const PgIconButton = forwardRef(({icon, title, shortcut, className, split
     }
   } else if(color == 'primary') {
     return (
-      <Tooltip title={shortcutTitle || title || ''} aria-label={title || ''} enterDelay={isDropdown ? 1500 : undefined}>
+      <Tooltip title={shortcutTitle || title || ''} aria-label={title || ''} enterDelay={isDropdown ? 1500 : undefined} placement={tooltipPlacement}>
         <PrimaryButton ref={ref} style={style}
           className={['Buttons-iconButton', (splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
           accessKey={accesskey} data-label={title || ''} {...props}>
@@ -203,7 +203,7 @@ export const PgIconButton = forwardRef(({icon, title, shortcut, className, split
     );
   } else {
     return (
-      <Tooltip title={shortcutTitle || title || ''} aria-label={title || ''} enterDelay={isDropdown ? 1500 : undefined}>
+      <Tooltip title={shortcutTitle || title || ''} aria-label={title || ''} enterDelay={isDropdown ? 1500 : undefined} placement={tooltipPlacement}>
         <DefaultButton ref={ref} style={style}
           className={['Buttons-iconButton', 'Buttons-iconButtonDefault',(splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
           accessKey={accesskey} data-label={title || ''} {...props}>
@@ -225,6 +225,7 @@ PgIconButton.propTypes = {
   disabled: PropTypes.bool,
   splitButton: PropTypes.bool,
   isDropdown: PropTypes.bool,
+  tooltipPlacement: PropTypes.string,
 };
 
 export const PgButtonGroup = forwardRef(({children, ...props}, ref)=>{

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

@@ -213,12 +213,15 @@ export default class SQLEditor {
     let browser_preferences = usePreferences.getState().getPreferencesForModule('browser');
     let open_new_tab = browser_preferences.new_browser_tab_open;
     const [icon, tooltip] = panelTitleFunc.getQueryToolIcon(panel_title, is_query_tool);
+    let selectedNodeInfo = pgAdmin.Browser.tree.getTreeNodeHierarchy(
+      pgAdmin.Browser.tree.selected()
+    );
 
     pgAdmin.Browser.Events.trigger(
       'pgadmin:tool:show',
       `${BROWSER_PANELS.QUERY_TOOL}_${trans_id}`,
       panel_url,
-      {...params, title: _.escape(panel_title.replace('\\', '\\\\'))},
+      {...params, title: _.escape(panel_title.replace('\\', '\\\\')), selectedNodeInfo: JSON.stringify(selectedNodeInfo)},
       {title: panel_title, icon: icon, tooltip: tooltip, renamable: true},
       Boolean(open_new_tab?.includes('qt'))
     );
@@ -226,9 +229,7 @@ export default class SQLEditor {
   }
 
   async loadComponent(container, params) {
-    let selectedNodeInfo = pgWindow.pgAdmin.Browser.tree.getTreeNodeHierarchy(
-      pgWindow.pgAdmin.Browser.tree.selected()
-    );
+    const selectedNodeInfo = params.selectedNodeInfo ? JSON.parse(params.selectedNodeInfo) : params.selectedNodeInfo;
     pgAdmin.Browser.keyboardNavigation.init();
     await listenPreferenceBroadcast();
     const root = ReactDOM.createRoot(container);