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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

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