feat: set primary link in Links field

Closes #5375

Author: thaisguigon

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx

@@ -14,6 +14,7 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { moveArrayItem } from '~/utils/array/moveArrayItem';
 import { toSpliced } from '~/utils/array/toSpliced';
 import { isDefined } from '~/utils/isDefined';
 
@@ -86,6 +87,19 @@ export const LinksFieldInput = ({
     );
   };
 
+  const handleSetPrimaryLink = (index: number) => {
+    const nextLinks = moveArrayItem(links, { fromIndex: index, toIndex: 0 });
+    const [nextPrimaryLink, ...nextSecondaryLinks] = nextLinks;
+
+    onSubmit?.(() =>
+      persistLinksField({
+        primaryLinkUrl: nextPrimaryLink.url ?? '',
+        primaryLinkLabel: nextPrimaryLink.label ?? '',
+        secondaryLinks: nextSecondaryLinks,
+      }),
+    );
+  };
+
   const handleDeleteLink = (index: number) => {
     onSubmit?.(() =>
       persistLinksField({
@@ -110,6 +124,7 @@ export const LinksFieldInput = ({
                 dropdownId={`${hotkeyScope}-links-${index}`}
                 isPrimary={index === 0}
                 label={label}
+                onSetAsPrimary={() => handleSetPrimaryLink(index)}
                 onDelete={() => handleDeleteLink(index)}
                 url={url}
               />

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldMenuItem.tsx

@@ -1,6 +1,8 @@
+import { useEffect } from 'react';
 import styled from '@emotion/styled';
 import {
   IconBookmark,
+  IconBookmarkPlus,
   IconComponent,
   IconDotsVertical,
   IconTrash,
@@ -16,6 +18,7 @@ type LinksFieldMenuItemProps = {
   dropdownId: string;
   isPrimary?: boolean;
   label: string;
+  onSetAsPrimary: () => void;
   onDelete: () => void;
   url: string;
 };
@@ -30,10 +33,18 @@ export const LinksFieldMenuItem = ({
   dropdownId,
   isPrimary,
   label,
+  onSetAsPrimary,
   onDelete,
   url,
 }: LinksFieldMenuItemProps) => {
-  const { isDropdownOpen } = useDropdown(dropdownId);
+  const { isDropdownOpen, closeDropdown } = useDropdown(dropdownId);
+
+  // Make sure dropdown closes on unmount.
+  useEffect(() => {
+    if (isDropdownOpen) {
+      return () => closeDropdown();
+    }
+  }, [closeDropdown, isDropdownOpen]);
 
   return (
     <MenuItem
@@ -55,6 +66,11 @@ export const LinksFieldMenuItem = ({
                   clickableComponent={iconButton}
                   dropdownComponents={
                     <DropdownMenuItemsContainer>
+                      <MenuItem
+                        LeftIcon={IconBookmarkPlus}
+                        text="Set as Primary"
+                        onClick={onSetAsPrimary}
+                      />
                       <MenuItem
                         accent="danger"
                         LeftIcon={IconTrash}

packages/twenty-ui/src/display/icon/components/TablerIcons.ts

@@ -20,6 +20,7 @@ export {
   IconBolt,
   IconBook2,
   IconBookmark,
+  IconBookmarkPlus,
   IconBox,
   IconBrandGithub,
   IconBrandGoogle,