feat: choose what to display in Items header

src/components/item/ItemContent.js

@@ -26,6 +26,7 @@ import { LayoutContext } from '../context/LayoutContext';
 import FileUploader from '../main/FileUploader';
 import Items from '../main/Items';
 import { buildDocumentExtra, getDocumentExtra } from '../../utils/itemExtra';
+import NewItemButton from '../main/NewItemButton';
 
 const {
   useChildren,
@@ -169,7 +170,7 @@ const ItemContent = ({ item, enableEdition }) => {
       return (
         <>
           <FileUploader />
-          <Items title={item.get('name')} items={children} />
+          <Items title={item.get('name')} items={children} headerElements={[ <NewItemButton fontSize="small" /> ]} /> 
         </>
       );
 

src/components/main/Home.js

@@ -11,6 +11,7 @@ import { HOME_ERROR_ALERT_ID, OWNED_ITEMS_ID } from '../../config/selectors';
 import Loader from '../common/Loader';
 import ErrorAlert from '../common/ErrorAlert';
 import Main from './Main';
+import NewItemButton from "./NewItemButton";
 
 const Home = () => {
   const { t } = useTranslation();
@@ -29,7 +30,7 @@ const Home = () => {
     <Main>
       <FileUploader />
       <ItemHeader />
-      <Items id={OWNED_ITEMS_ID} title={t('My Items')} items={List(ownItems)} />
+      <Items id={OWNED_ITEMS_ID} title={t('My Items')} items={List(ownItems)} headerElements={[ <NewItemButton fontSize="small" /> ]} />
     </Main>
   );
 };

src/components/main/Items.js

@@ -7,7 +7,7 @@ import { useItemSearch } from '../item/ItemSearch';
 import ItemsGrid from './ItemsGrid';
 import ItemsTable from './ItemsTable';
 
-const Items = ({ items, title, id }) => {
+const Items = ({ items, title, id, headerElements }) => {
   const { mode } = useContext(LayoutContext);
   const itemSearch = useItemSearch(items);
 
@@ -19,6 +19,7 @@ const Items = ({ items, title, id }) => {
           title={title}
           items={itemSearch.results}
           itemSearch={itemSearch}
+          headerElements={headerElements}
         />
       );
     case ITEM_LAYOUT_MODES.LIST:
@@ -29,6 +30,7 @@ const Items = ({ items, title, id }) => {
           tableTitle={title}
           items={itemSearch.results}
           itemSearch={itemSearch}
+          headerElements={headerElements}
         />
       );
   }
@@ -38,10 +40,12 @@ Items.propTypes = {
   items: PropTypes.instanceOf(List).isRequired,
   title: PropTypes.string.isRequired,
   id: PropTypes.string,
+  headerElements: PropTypes.arrayOf(PropTypes.element),
 };
 
 Items.defaultProps = {
   id: null,
+  headerElements: []
 };
 
 export default Items;

src/components/main/ItemsGrid.js

@@ -46,7 +46,7 @@ const styles = (theme) => ({
 });
 
 const ItemsGrid = (props) => {
-  const { classes, items, title, itemSearch } = props;
+  const { classes, items, title, itemSearch, headerElements } = props;
 
   const { t } = useTranslation();
   const [page, setPage] = useState(1);
@@ -87,7 +87,7 @@ const ItemsGrid = (props) => {
 
   return (
     <div>
-      <TableToolbar tableTitle={title} itemSearchInput={itemSearch?.input} />
+      <TableToolbar tableTitle={title} itemSearchInput={itemSearch?.input} headerElements={headerElements} />
       <Grid container spacing={1}>
         {renderItems()}
       </Grid>
@@ -142,10 +142,12 @@ ItemsGrid.propTypes = {
     text: PropTypes.string,
     input: PropTypes.instanceOf(ItemSearchInput),
   }),
+  headerElements: PropTypes.arrayOf(PropTypes.element)
 };
 
 ItemsGrid.defaultProps = {
   itemSearch: null,
+  headerElements: []
 };
 
 const StyledComponent = withStyles(styles)(ItemsGrid);

src/components/main/ItemsTable.js

@@ -83,7 +83,7 @@ const computeReorderedIdList = (list, startIndex, endIndex) => {
   return result.map((i) => i.id);
 };
 
-const ItemsTable = ({ items: rows, tableTitle, id: tableId, itemSearch }) => {
+const ItemsTable = ({ items: rows, tableTitle, id: tableId, itemSearch, headerElements }) => {
   const { itemId } = useParams();
   const { data: parentItem } = useItem(itemId);
   const { data: member, isLoading: isMemberLoading } = hooks.useCurrentMember();
@@ -288,6 +288,7 @@ const ItemsTable = ({ items: rows, tableTitle, id: tableId, itemSearch }) => {
           numSelected={selected.length}
           selected={selected}
           itemSearchInput={itemSearch?.input}
+          headerElements={headerElements}
         />
         <TableContainer>
           <Table
@@ -394,12 +395,14 @@ ItemsTable.propTypes = {
   itemSearch: PropTypes.shape({
     input: PropTypes.element,
   }),
+  headerElements: PropTypes.arrayOf(PropTypes.element)
 };
 
 ItemsTable.defaultProps = {
   id: '',
   items: List(),
   itemSearch: null,
+  headerElements: []
 };
 
 export default ItemsTable;

src/components/main/TableToolbar.js

@@ -11,7 +11,6 @@ import {
   ITEMS_TABLE_COPY_SELECTED_ITEMS_ID 
 } from '../../config/selectors';
 import DeleteButton from '../common/DeleteButton';
-import NewItemButton from './NewItemButton';
 import CopyButton from './CopyButtons';
 import MoveButton from '../common/MoveButton';
 
@@ -34,7 +33,7 @@ const useToolbarStyles = makeStyles((theme) => ({
 const TableToolbar = (props) => {
   const classes = useToolbarStyles();
   const { t } = useTranslation();
-  const { numSelected, tableTitle, selected, itemSearchInput } = props;
+  const { numSelected, tableTitle, selected, itemSearchInput, headerElements } = props;
 
   return (
     <Toolbar
@@ -62,7 +61,7 @@ const TableToolbar = (props) => {
             {tableTitle}
           </Typography>
           {itemSearchInput}
-          <NewItemButton fontSize="small" />
+          {headerElements}
         </>
       )}
 
@@ -96,11 +95,13 @@ TableToolbar.propTypes = {
   tableTitle: PropTypes.string,
   selected: PropTypes.arrayOf(PropTypes.shape({}).isRequired).isRequired,
   itemSearchInput: PropTypes.element,
+  headerElements: PropTypes.arrayOf(PropTypes.element)
 };
 
 TableToolbar.defaultProps = {
   tableTitle: 'Items',
   itemSearchInput: null,
+  headerElements: []
 };
 
 export default TableToolbar;