Show tooltips when icons are disabled.#8449

Author: RohitBhati8269

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

@@ -176,44 +176,29 @@ export const PgIconButton = forwardRef(({icon, title, shortcut, className, split
     shortcutTitle = <ShortcutTitle title={title} accesskey={accesskey} shortcut={shortcut}/>;
   }
 
-  /* Tooltip does not work for disabled items */
-  if(props.disabled) {
-    if(color == 'primary') {
-      return (
-        <PrimaryButton ref={ref} style={style}
-          className={['Buttons-iconButton', (splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
-          accessKey={accesskey} data-label={title || ''} {...props}>
-          {icon}
-        </PrimaryButton>
-      );
-    } else {
-      return (
-        <DefaultButton ref={ref} style={style}
-          className={['Buttons-iconButton', 'Buttons-iconButtonDefault',(splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
-          accessKey={accesskey} data-label={title || ''} {...props}>
-          {icon}
-        </DefaultButton>
-      );
-    }
-  } else if(color == 'primary') {
+  if(color == 'primary') {
     return (
       <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}>
-          {icon}
-        </PrimaryButton>
+        <span>
+          <PrimaryButton ref={ref} style={style}
+            className={['Buttons-iconButton', (splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
+            accessKey={accesskey} data-label={title || ''} {...props}>
+            {icon}
+          </PrimaryButton>
+        </span>
       </Tooltip>
 
     );
   } else {
     return (
       <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}>
-          {icon}
-        </DefaultButton>
+        <span>    
+          <DefaultButton ref={ref} style={style}
+            className={['Buttons-iconButton', 'Buttons-iconButtonDefault',(splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
+            accessKey={accesskey} data-label={title || ''} {...props}>
+            {icon}
+          </DefaultButton>
+        </span>
       </Tooltip>
     );
   }

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

@@ -42,11 +42,18 @@ export default function ObjectExplorerToolbar() {
   const browserPref = usePreferences().getPreferencesForModule('browser');
   const pgAdmin = usePgAdmin();
   const checkMenuState = ()=>{
-    const viewMenus = pgAdmin.Browser.MainMenus.
-      find((m)=>(m.name=='object'))?.
-      menuItems?.
-      find((m)=>(m.name=='view_data'))?.
-      menu_items;
+    // Find the 'object' menu and get its menuItems & 
+    // Try to find 'view_data' in the object menu and get its menu_items
+    let objectMenu = pgAdmin.Browser.MainMenus.find((m) => (m.name == 'object'))?.menuItems;
+    let viewMenus = objectMenu?.find((m) => (m.name == 'view_data'))?.menu_items;
+
+    // If view_data not found in object menu or it doesn't have menu_items
+    if (_.isUndefined(viewMenus)) {
+      // Find the 'tools' menu and get its menuItems &
+      // Try to find 'view_data' in the tools menu and get its menu_items
+      let toolsMenu = pgAdmin.Browser.MainMenus.find((m) => (m.name == 'tools'))?.menuItems;
+      viewMenus = toolsMenu?.find((m) => (m.name == 'view_data'))?.menu_items;
+    }
 
     const toolsMenus = pgAdmin.Browser.MainMenus.
       find((m)=>(m.name=='tools'))?.

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

@@ -115,7 +115,7 @@ export default class SQLEditor {
         data: {
           mnuid: 3,
         },
-        applies: ['context', 'object'],
+        applies: ['context', 'object', 'tools'],
         callback: 'showViewData',
         enable: this.viewMenuEnabled,
         category: 'view_data',
@@ -154,7 +154,7 @@ export default class SQLEditor {
         data: {
           mnuid: 4,
         },
-        applies: ['context', 'object'],
+        applies: ['context', 'object', 'tools'],
         callback: 'showFilteredRow',
         enable: this.viewMenuEnabled,
         category: 'view_data',

web/regression/javascript/file_manager/FileManager.spec.js

@@ -162,7 +162,7 @@ describe('FileManger', ()=>{
 
       await user.click(ctrl.container.querySelector('[name="menu-shared-storage"]'));
       await user.click(ctrl.container.querySelector('[data-label="Shared Storage"]'));
-      expect(ctrl.container.querySelector('button[aria-label="Shared Storage"]')).not.toBeNull();
+      expect(ctrl.container.querySelector('button[aria-label="Shared Storage"]')).toBeNull();
     });
 
     it('Change Storage to My Storage', async ()=>{
@@ -176,7 +176,7 @@ describe('FileManger', ()=>{
 
       await user.click(ctrl.container.querySelector('[name="menu-shared-storage"]'));
       await user.click(ctrl.container.querySelector('[data-label="My Storage"]'));
-      expect(ctrl.container.querySelector('button[aria-label="My Storage"]')).not.toBeNull();
+      expect(ctrl.container.querySelector('button[aria-label="My Storage"]')).toBeNull();
     });
 
     describe('getComparator', ()=>{