feat: enable removing all links from the field (#6185)

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>

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),

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>
                   }
                 />

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);
   });
 });

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(''));