codekingpro/portable-devtools

1/////////////////////////////////////////////////////////////2//3// pgAdmin 4 - PostgreSQL Tools4//5// Copyright (C) 2013 - 2024, The pgAdmin Development Team6// This software is released under the PostgreSQL Licence7//8//////////////////////////////////////////////////////////////9import { Box } from '@mui/material';10import { makeStyles } from '@mui/styles';11import React, { useState, useEffect } from 'react';12import AccountTreeIcon from '@mui/icons-material/AccountTree';13import CommentIcon from '@mui/icons-material/Comment';14import ArrowForwardIosRoundedIcon from '@mui/icons-material/ArrowForwardIosRounded';15import { usePgAdmin } from '../../../static/js/BrowserComponent';16import usePreferences from '../../../preferences/static/js/store';17 18const useStyles = makeStyles((theme)=>({19  root: {20    position: 'absolute',21    bottom: 0,22    width: 'auto',23    maxWidth: '99%',24    zIndex: 1004,25    padding: '0.25rem 0.5rem',26    fontSize: '0.95em',27    color: theme.palette.background.default,28    backgroundColor: theme.palette.text.primary,29    borderTopRightRadius: theme.shape.borderRadius,30  },31  row: {32    display: 'flex',33    alignItems: 'center'34  },35  overflow: {36    whiteSpace: 'nowrap',37    textOverflow: 'ellipsis',38    overflow: 'hidden',39  }40}));41 42 43export default function ObjectBreadcrumbs() {44  const classes = useStyles();45  const pgAdmin = usePgAdmin();46  const preferences = usePreferences().getPreferencesForModule('browser');47  const [objectData, setObjectData] = useState({48    path: null,49    description: null,50  });51  const onItemHover = (item, _data)=>{52    if(item && !_data?._type.startsWith('coll-')) {53      setObjectData({54        path: pgAdmin.Browser.tree.getNodeDisplayPath(item, false),55        description: item?._metadata?.data.description56      });57    } else {58      setObjectData({59        path: null,60        description: null61      });62    }63  };64 65  useEffect(()=>{66    if(preferences.breadcrumbs_enable) {67      pgAdmin.Browser.Events.on('pgadmin-browser:tree:hovered', onItemHover);68    }69    return ()=>{70      pgAdmin.Browser.Events.off('pgadmin-browser:tree:hovered', onItemHover);71    };72  }, [preferences.breadcrumbs_enable]);73 74  if(!objectData.path) {75    return <></>;76  }77 78  return(79    <Box className={classes.root} data-testid="object-breadcrumbs">80      <div className={classes.row}>81        <AccountTreeIcon style={{height: '1rem', marginRight: '0.125rem'}} data-label="AccountTreeIcon"/>82        <div className={classes.overflow}>83          {84            objectData.path?.reduce((res, item)=>(85              res.concat(<span key={item}>{item}</span>, <ArrowForwardIosRoundedIcon key={item+'-arrow'} style={{height: '0.8rem', width: '1.25rem'}} />)86            ), []).slice(0, -1)87          }88        </div>89      </div>90      {preferences.breadcrumbs_show_comment && objectData.description &&91          <div className={classes.row}>92            <CommentIcon style={{height: '1rem', marginRight: '0.125rem'}} data-label="CommentIcon"/>93            <div className={classes.overflow}>{objectData.description}</div>94          </div>}95    </Box>96  );97}98