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 bb8c84dd26..3fdbb0abf5 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 39be332373..5b1fedb884 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 d20f3bcf63..ffb83cfc8e 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 e0c376c740..a0deb4bfab 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(''));