From c182bff3d8921f61a5fec9eda43040c582cc15d1 Mon Sep 17 00:00:00 2001
From: rostaklein <r.klein@make.com>
Date: Wed, 10 Jul 2024 12:33:29 +0200
Subject: [PATCH] feat: enable removing all links from the field (#6185)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes https://github.com/twentyhq/twenty/issues/6041

- enabled removing all dropdown items including the primary one
- primary one can be removed even when it is not the last remaining one
from the list, this will set the next item on the list as the new
primary one (_idk if it was expected to implement this_)



https://github.com/twentyhq/twenty/assets/19856731/405a055d-13de-43f4-b3e8-d6a199bfdf24

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
---
 .../input/components/LinksFieldInput.tsx      | 27 +++++++++++++++++++
 .../input/components/LinksFieldMenuItem.tsx   | 19 +++++++------
 .../__tests__/absoluteUrlSchema.test.ts       |  1 -
 .../validation-schemas/absoluteUrlSchema.ts   |  3 ++-
 4 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx
index bb8c84dd2..3fdbb0abf 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx
@@ -124,6 +124,33 @@ export const LinksFieldInput = ({ onCancel }: LinksFieldInputProps) => {
   };
 
   const handleDeleteLink = (index: number) => {
+    const hasOnlyOneLastLink = links.length === 1;
+
+    if (hasOnlyOneLastLink) {
+      persistLinksField({
+        primaryLinkUrl: '',
+        primaryLinkLabel: '',
+        secondaryLinks: null,
+      });
+
+      handleDropdownClose();
+
+      return;
+    }
+
+    const isRemovingPrimary = index === 0;
+    if (isRemovingPrimary) {
+      const [, nextPrimaryLink, ...nextSecondaryLinks] = links;
+
+      persistLinksField({
+        primaryLinkUrl: nextPrimaryLink.url ?? '',
+        primaryLinkLabel: nextPrimaryLink.label ?? '',
+        secondaryLinks: nextSecondaryLinks,
+      });
+
+      return;
+    }
+
     persistLinksField({
       ...fieldValue,
       secondaryLinks: toSpliced(fieldValue.secondaryLinks ?? [], index - 1, 1),
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldMenuItem.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldMenuItem.tsx
index 39be33237..5b1fedb88 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldMenuItem.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldMenuItem.tsx
@@ -46,6 +46,11 @@ export const LinksFieldMenuItem = ({
   const handleMouseEnter = () => setIsHovered(true);
   const handleMouseLeave = () => setIsHovered(false);
 
+  const handleDeleteClick = () => {
+    setIsHovered(false);
+    onDelete?.();
+  };
+
   // Make sure dropdown closes on unmount.
   useEffect(() => {
     if (isDropdownOpen) {
@@ -86,14 +91,12 @@ export const LinksFieldMenuItem = ({
                         text="Edit"
                         onClick={onEdit}
                       />
-                      {!isPrimary && (
-                        <MenuItem
-                          accent="danger"
-                          LeftIcon={IconTrash}
-                          text="Delete"
-                          onClick={onDelete}
-                        />
-                      )}
+                      <MenuItem
+                        accent="danger"
+                        LeftIcon={IconTrash}
+                        text="Delete"
+                        onClick={handleDeleteClick}
+                      />
                     </DropdownMenuItemsContainer>
                   }
                 />
diff --git a/packages/twenty-front/src/utils/validation-schemas/__tests__/absoluteUrlSchema.test.ts b/packages/twenty-front/src/utils/validation-schemas/__tests__/absoluteUrlSchema.test.ts
index d20f3bcf6..ffb83cfc8 100644
--- a/packages/twenty-front/src/utils/validation-schemas/__tests__/absoluteUrlSchema.test.ts
+++ b/packages/twenty-front/src/utils/validation-schemas/__tests__/absoluteUrlSchema.test.ts
@@ -28,7 +28,6 @@ describe('absoluteUrlSchema', () => {
 
   it('fails for invalid urls', () => {
     expect(absoluteUrlSchema.safeParse('?o').success).toBe(false);
-    expect(absoluteUrlSchema.safeParse('').success).toBe(false);
     expect(absoluteUrlSchema.safeParse('\\').success).toBe(false);
   });
 });
diff --git a/packages/twenty-front/src/utils/validation-schemas/absoluteUrlSchema.ts b/packages/twenty-front/src/utils/validation-schemas/absoluteUrlSchema.ts
index e0c376c74..a0deb4bfa 100644
--- a/packages/twenty-front/src/utils/validation-schemas/absoluteUrlSchema.ts
+++ b/packages/twenty-front/src/utils/validation-schemas/absoluteUrlSchema.ts
@@ -8,4 +8,5 @@ export const absoluteUrlSchema = z
       .string()
       .transform((value) => `https://${value}`)
       .pipe(z.string().url()),
-  );
+  )
+  .or(z.literal(''));