feat: add secondary links display

packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx

@@ -1,13 +1,66 @@
+import { MouseEventHandler, useMemo } from 'react';
+import styled from '@emotion/styled';
+
 import { FieldLinksValue } from '@/object-record/record-field/types/FieldMetadata';
-import { LinkDisplay } from '@/ui/field/display/components/LinkDisplay';
+import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
+import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink';
+import {
+  LinkType,
+  SocialLink,
+} from '@/ui/navigation/link/components/SocialLink';
+import { checkUrlType } from '~/utils/checkUrlType';
+import { isDefined } from '~/utils/isDefined';
+import { getAbsoluteUrl } from '~/utils/url/getAbsoluteUrl';
+import { getUrlHostName } from '~/utils/url/getUrlHostName';
+
+const StyledContainer = styled(EllipsisDisplay)`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
 
 type LinksDisplayProps = {
   value?: FieldLinksValue;
 };
 
 export const LinksDisplay = ({ value }: LinksDisplayProps) => {
-  const url = value?.primaryLinkUrl || '';
-  const label = value?.primaryLinkLabel || '';
+  const links = useMemo(
+    () =>
+      [
+        value?.primaryLinkUrl
+          ? {
+              url: value.primaryLinkUrl,
+              label: value.primaryLinkLabel,
+            }
+          : null,
+        ...(value?.secondaryLinks ?? []),
+      ]
+        .filter(isDefined)
+        .map(({ url, label }) => {
+          const absoluteUrl = getAbsoluteUrl(url);
+          return {
+            url: absoluteUrl,
+            label: label || getUrlHostName(absoluteUrl),
+            type: checkUrlType(absoluteUrl),
+          };
+        }),
+    [value?.primaryLinkLabel, value?.primaryLinkUrl, value?.secondaryLinks],
+  );
+
+  const handleClick: MouseEventHandler = (event) => event.stopPropagation();
 
-  return <LinkDisplay value={{ url, label }} />;
+  return (
+    <StyledContainer>
+      {links.map(({ url, label, type }, index) =>
+        type === LinkType.LinkedIn || type === LinkType.Twitter ? (
+          <SocialLink key={index} href={url} onClick={handleClick} type={type}>
+            {label}
+          </SocialLink>
+        ) : (
+          <RoundedLink key={index} href={url} onClick={handleClick}>
+            {label}
+          </RoundedLink>
+        ),
+      )}
+    </StyledContainer>
+  );
 };