From 357882c395de411d19e3b47a93480ed8eb11e118 Mon Sep 17 00:00:00 2001
From: Marie <51697796+ijreilly@users.noreply.github.com>
Date: Thu, 4 Apr 2024 13:45:15 +0200
Subject: [PATCH] [feat][FE] Enable deletion of custom fields in workspace
 (#4802)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Context**
Fixes https://github.com/twentyhq/twenty/issues/4597
Enables deletion of custom fields that aren't active nor of type
relation ([BE PR](https://github.com/twentyhq/twenty/pull/4780))

**How was it tested?**
Locally tested

<img width="541" alt="Capture d’écran 2024-04-04 à 13 33 18"
src="https://github.com/twentyhq/twenty/assets/51697796/bc462b86-b494-409e-9836-69bdaeb812cb">
<img width="661" alt="Capture d’écran 2024-04-04 à 13 34 25"
src="https://github.com/twentyhq/twenty/assets/51697796/8fe47114-545e-48b5-a107-34be531b7ea5">
---
 ...tingsObjectFieldDisabledActionDropdown.tsx | 32 +++++++++++--------
 .../data-model/SettingsObjectDetail.tsx       |  5 +++
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx
index 0e96ad9fe..432567b13 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx
@@ -1,4 +1,4 @@
-import { IconArchiveOff, IconDotsVertical } from 'twenty-ui';
+import { IconArchiveOff, IconDotsVertical, IconTrash } from 'twenty-ui';
 
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -9,6 +9,7 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsObjectFieldInactiveActionDropdownProps = {
   isCustomField?: boolean;
+  isRelationType?: boolean;
   onActivate: () => void;
   onErase: () => void;
   scopeKey: string;
@@ -17,6 +18,9 @@ type SettingsObjectFieldInactiveActionDropdownProps = {
 export const SettingsObjectFieldInactiveActionDropdown = ({
   onActivate,
   scopeKey,
+  onErase,
+  isCustomField,
+  isRelationType,
 }: SettingsObjectFieldInactiveActionDropdownProps) => {
   const dropdownId = `${scopeKey}-settings-field-disabled-action-dropdown`;
 
@@ -27,10 +31,12 @@ export const SettingsObjectFieldInactiveActionDropdown = ({
     closeDropdown();
   };
 
-  // const handleErase = () => {
-  //   onErase();
-  //   closeDropdown();
-  // };
+  const handleErase = () => {
+    onErase();
+    closeDropdown();
+  };
+
+  const isErasable = isCustomField && !isRelationType;
 
   return (
     <Dropdown
@@ -46,14 +52,14 @@ export const SettingsObjectFieldInactiveActionDropdown = ({
               LeftIcon={IconArchiveOff}
               onClick={handleActivate}
             />
-            {/* {isCustomField && (
-                <MenuItem
-                  text="Erase"
-                  accent="danger"
-                  LeftIcon={IconTrash}
-                  onClick={handleErase}
-                />
-              )} */}
+            {isErasable && (
+              <MenuItem
+                text="Erase"
+                accent="danger"
+                LeftIcon={IconTrash}
+                onClick={handleErase}
+              />
+            )}
           </DropdownMenuItemsContainer>
         </DropdownMenu>
       }
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx
index 26048b9a0..6c8f23d1b 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx
@@ -32,6 +32,7 @@ import { Table } from '@/ui/layout/table/components/Table';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableSection } from '@/ui/layout/table/components/TableSection';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 const StyledDiv = styled.div`
   display: flex;
@@ -188,6 +189,10 @@ export const SettingsObjectDetail = () => {
                     ActionIcon={
                       <SettingsObjectFieldInactiveActionDropdown
                         isCustomField={!!disabledMetadataField.isCustom}
+                        isRelationType={
+                          disabledMetadataField.type ===
+                          FieldMetadataType.Relation
+                        }
                         scopeKey={disabledMetadataField.id}
                         onActivate={() =>
                           activateMetadataField(disabledMetadataField)