From 5720312249b654699ad76c83cab4392171ace986 Mon Sep 17 00:00:00 2001
From: Umar Abid <75561750+umrkhn@users.noreply.github.com>
Date: Fri, 1 Dec 2023 21:48:38 +0500
Subject: [PATCH] [FEAT-2496] Add Customize fields button in new column menu
 (#2683)

* feat: add customize-fields btn in new column menu

* fix: refactor onClick

* Add separator

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../menu-item/components/MenuItem.tsx         |  1 +
 .../RecordTableHeaderPlusButtonContent.tsx    | 48 ++++++++++++-------
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx b/front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
index 1a1177ffa..1ac5197a0 100644
--- a/front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
+++ b/front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
@@ -39,6 +39,7 @@ export const MenuItem = ({
   const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
 
   const handleMenuItemClick = (event: MouseEvent<HTMLLIElement>) => {
+    if (!onClick) return;
     event.preventDefault();
     event.stopPropagation();
 
diff --git a/front/src/modules/ui/object/record-table/components/RecordTableHeaderPlusButtonContent.tsx b/front/src/modules/ui/object/record-table/components/RecordTableHeaderPlusButtonContent.tsx
index d47f6fd9e..e90b3c487 100644
--- a/front/src/modules/ui/object/record-table/components/RecordTableHeaderPlusButtonContent.tsx
+++ b/front/src/modules/ui/object/record-table/components/RecordTableHeaderPlusButtonContent.tsx
@@ -1,9 +1,12 @@
 import { useCallback } from 'react';
+import { Link } from 'react-router-dom';
+import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
-import { IconPlus } from '@/ui/display/icon';
+import { IconPlus, IconSettings } from '@/ui/display/icon';
 import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
@@ -31,21 +34,34 @@ export const RecordTableHeaderPlusButtonContent = () => {
     [handleColumnVisibilityChange, closeDropdown],
   );
 
+  const StyledMenuItemLink = styled(Link)`
+    text-decoration: none;
+    width: 100%;
+  `;
+
   return (
-    <DropdownMenuItemsContainer>
-      {hiddenTableColumns.map((column) => (
-        <MenuItem
-          key={column.fieldMetadataId}
-          iconButtons={[
-            {
-              Icon: IconPlus,
-              onClick: () => handleAddColumn(column),
-            },
-          ]}
-          LeftIcon={icons[column.iconName]}
-          text={column.label}
-        />
-      ))}
-    </DropdownMenuItemsContainer>
+    <>
+      <DropdownMenuItemsContainer>
+        {hiddenTableColumns.map((column) => (
+          <MenuItem
+            key={column.fieldMetadataId}
+            iconButtons={[
+              {
+                Icon: IconPlus,
+                onClick: () => handleAddColumn(column),
+              },
+            ]}
+            LeftIcon={icons[column.iconName]}
+            text={column.label}
+          />
+        ))}
+      </DropdownMenuItemsContainer>
+      <DropdownMenuSeparator />
+      <DropdownMenuItemsContainer>
+        <StyledMenuItemLink to="/settings/objects">
+          <MenuItem LeftIcon={IconSettings} text="Customize fields" />
+        </StyledMenuItemLink>
+      </DropdownMenuItemsContainer>
+    </>
   );
 };