From cf50391b00e21d819ba5eeaaba2ea64513a55270 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zolt=C3=A1n=20V=C3=B6lcsey?=
 <41576384+zvolcsey@users.noreply.github.com>
Date: Wed, 17 Apr 2024 14:51:57 +0200
Subject: [PATCH] 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>
---
 .../RecordTableHeaderPlusButtonContent.tsx    | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx
index 2c7000458..749861c13 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx
@@ -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" />