Change icon buttons to show tooltip even when disabled. #8449

Author: RohitBhati8269

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

@@ -176,23 +176,30 @@ 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>
+        <Tooltip title={shortcutTitle || title || ''} aria-label={title || ''} enterDelay={isDropdown ? 1500 : undefined} placement={tooltipPlacement}>
+          <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 (
-        <DefaultButton ref={ref} style={style}
-          className={['Buttons-iconButton', 'Buttons-iconButtonDefault',(splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
-          accessKey={accesskey} data-label={title || ''} {...props}>
-          {icon}
-        </DefaultButton>
+        <Tooltip title={shortcutTitle || title || ''} aria-label={title || ''} enterDelay={isDropdown ? 1500 : undefined} placement={tooltipPlacement}>
+          <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>
       );
     }
   } else if(color == 'primary') {

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

@@ -18,7 +18,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import CustomPropTypes from '../custom_prop_types';
 import usePreferences from '../../../preferences/static/js/store';
-
+import gettext from 'sources/gettext';
 
 function ToolbarButton({menuItem, ...props}) {
   return (
@@ -73,8 +73,10 @@ export default function ObjectExplorerToolbar() {
     <Box display="flex" alignItems="center" gap="2px">
       <PgButtonGroup size="small">
         <ToolbarButton icon={<QueryToolIcon />} menuItem={menus['query_tool']} shortcut={browserPref?.sub_menu_query_tool} />
-        <ToolbarButton icon={<ViewDataIcon />} menuItem={menus['view_all_rows_context']} shortcut={browserPref?.sub_menu_view_data} />
-        <ToolbarButton icon={<RowFilterIcon />} menuItem={menus['view_filtered_rows_context']} />
+        <ToolbarButton icon={<ViewDataIcon />} menuItem={menus['view_all_rows_context'] ?? 
+          {label :gettext('All Rows')}}
+        shortcut={browserPref?.sub_menu_view_data} />
+        <ToolbarButton icon={<RowFilterIcon />} menuItem={menus['view_filtered_rows_context'] ?? { label : gettext('Filtered Rows...')}} />
         <ToolbarButton icon={<SearchOutlinedIcon style={{height: '1.4rem'}} />} menuItem={menus['search_objects']} shortcut={browserPref?.sub_menu_search_objects} />
         {!_.isUndefined(menus['psql']) && <ToolbarButton icon={<TerminalRoundedIcon style={{height: '1.4rem'}}/>} menuItem={menus['psql']} />}
       </PgButtonGroup>