fix: Display hidden columns and separator conditionally (#4982)

Closes #4979 

Hi! `RecordTableHeaderPlusButtonContent.tsx` component displays hidden
columns and separator, only if length of `hiddenTableColumns` array is
greater than zero.

The top right corner looked good.

![add-field1](https://github.com/twentyhq/twenty/assets/41576384/0b75ce42-d524-42ba-a76d-66c3d15d523e)

![add-field2](https://github.com/twentyhq/twenty/assets/41576384/44cf3910-2f99-4e99-8130-5cafa58c5828)

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
This commit is contained in:
Zoltán Völcsey
2024-04-17 14:51:57 +02:00
committed by GitHub
parent 3024e04a1c
commit cf50391b00

View File

@ -38,17 +38,21 @@ export const RecordTableHeaderPlusButtonContent = () => {
return ( return (
<> <>
<DropdownMenuItemsContainer> {hiddenTableColumns.length > 0 && (
{hiddenTableColumns.map((column) => ( <>
<MenuItem <DropdownMenuItemsContainer>
key={column.fieldMetadataId} {hiddenTableColumns.map((column) => (
onClick={() => handleAddColumn(column)} <MenuItem
LeftIcon={getIcon(column.iconName)} key={column.fieldMetadataId}
text={column.label} onClick={() => handleAddColumn(column)}
/> LeftIcon={getIcon(column.iconName)}
))} text={column.label}
</DropdownMenuItemsContainer> />
<DropdownMenuSeparator /> ))}
</DropdownMenuItemsContainer>
<DropdownMenuSeparator />
</>
)}
<DropdownMenuItemsContainer> <DropdownMenuItemsContainer>
<StyledMenuItemLink to="/settings/objects"> <StyledMenuItemLink to="/settings/objects">
<MenuItem LeftIcon={IconSettings} text="Customize fields" /> <MenuItem LeftIcon={IconSettings} text="Customize fields" />