pgadmin4/web/pgadmin/static/js/tree/ObjectExplorer/ObjectExplorerToolbar.jsx

/////////////////////////////////////////////////////////////
//
// pgAdmin 4 - PostgreSQL Tools
//
// Copyright (C) 2013 - 2026, The pgAdmin Development Team
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////

import { useEffect, useState } from 'react';
import { usePgAdmin } from '../../PgAdminProvider';
import { Badge, Box } from '@mui/material';
import { QueryToolIcon, RowFilterIcon, ViewDataIcon } from '../../components/ExternalIcon';
import TerminalRoundedIcon from '@mui/icons-material/TerminalRounded';
import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
import FilterAltRoundedIcon from '@mui/icons-material/FilterAltRounded';
import { PgButtonGroup, PgIconButton } from '../../components/Buttons';
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 (
    <PgIconButton title={menuItem?.label??''} {...props} size="xs"
      disabled={menuItem?.isDisabled??true} onClick={()=>menuItem?.callback()} />
  );
}
ToolbarButton.propTypes = {
  menuItem: PropTypes.object,
  icon: CustomPropTypes.children,
};

export default function ObjectExplorerToolbar() {
  const [menus, setMenus] = useState({
    'query_tool': undefined,
    'view_all_rows_context': undefined,
    'view_filtered_rows_context': undefined,
    'search_objects': undefined,
    'psql': undefined,
  });
  const browserPref = usePreferences().getPreferencesForModule('browser');
  const [hasFilters, setHasFilters] = useState(false);
  const pgAdmin = usePgAdmin();

  const checkMenuState = ()=>{
    const viewMenus = pgAdmin.Browser.MainMenus.
      find((m)=>(m.name=='object'))?.
      menuItems?.
      find((m)=>(m.name=='view_data'))?.
      menu_items;

    const toolsMenus = pgAdmin.Browser.MainMenus.
      find((m)=>(m.name=='tools'))?.
      menuItems;

    setMenus({
      'query_tool': toolsMenus?.find((m)=>(m.name=='query_tool')),
      'view_all_rows_context': viewMenus?.find((m)=>(m.name=='view_all_rows_context_' + m.node)),
      'view_filtered_rows_context': viewMenus?.find((m)=>(m.name=='view_filtered_rows_context_' + m.node)),
      'search_objects': toolsMenus?.find((m)=>(m.name=='search_objects')),
      'psql': toolsMenus?.find((m)=>(m.name=='psql'))
    });
  };

  useEffect(()=>{
    const deregister = pgAdmin.Browser.Events.on('pgadmin:enable-disable-menu-items', _.debounce(checkMenuState, 100));

    const deregisterFilter = pgAdmin.Browser.Events.on('pgadmin:object-explorer:filter:apply', (hasFilters)=>{
      setHasFilters(hasFilters);
    });
    checkMenuState();
    return ()=>{
      deregister();
      deregisterFilter();
    };
  }, []);

  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        gap: '2px'
      }}>
      <PgButtonGroup size="small">
        <ToolbarButton icon={
          <Badge badgeContent=" " overlap="circular" variant='dot' color="success" invisible={!hasFilters}>
            <FilterAltRoundedIcon />
          </Badge>
        } menuItem={{
          label: gettext('Filter Objects'),
          isDisabled: false,
          callback: () => {
            pgAdmin.Browser.Events.trigger('pgadmin:object-explorer:filter:show');
          }
        }} id="filter-objects" isDropdown />
        <ToolbarButton icon={<QueryToolIcon />} menuItem={menus['query_tool']} shortcut={browserPref?.sub_menu_query_tool} />
        <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>
    </Box>
  );
}