Fix array and links display

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ArrayFieldDisplay.tsx

@@ -1,34 +1,12 @@
-import { THEME_COMMON } from 'twenty-ui';
-
-import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
 import { useArrayFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useArrayFieldDisplay';
 import { ArrayDisplay } from '@/ui/field/display/components/ArrayDisplay';
-import styled from '@emotion/styled';
-
-const spacing1 = THEME_COMMON.spacing(1);
-
-const StyledContainer = styled.div`
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: ${spacing1};
-  justify-content: flex-start;
-  max-width: 100%;
-  overflow: hidden;
-`;
 
 export const ArrayFieldDisplay = () => {
   const { fieldValue } = useArrayFieldDisplay();
 
-  const { isFocused } = useFieldFocus();
-
   if (!Array.isArray(fieldValue)) {
     return <></>;
   }
 
-  return (
-    <StyledContainer>
-      <ArrayDisplay value={fieldValue} isFocused={isFocused} />
-    </StyledContainer>
-  );
+  return <ArrayDisplay value={fieldValue} />;
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/LinksFieldDisplay.tsx

@@ -1,11 +1,8 @@
-import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
 import { useLinksFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useLinksFieldDisplay';
 import { LinksDisplay } from '@/ui/field/display/components/LinksDisplay';
 
 export const LinksFieldDisplay = () => {
   const { fieldValue } = useLinksFieldDisplay();
 
-  const { isFocused } = useFieldFocus();
-
-  return <LinksDisplay value={fieldValue} isFocused={isFocused} />;
+  return <LinksDisplay value={fieldValue} />;
 };

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

@@ -20,7 +20,7 @@ export const ArrayFieldMenuItem = ({
       value={value}
       onEdit={onEdit}
       onDelete={onDelete}
-      DisplayComponent={() => <ArrayDisplay value={[value]} isInputDisplay />}
+      DisplayComponent={() => <ArrayDisplay value={[value]} />}
       hasPrimaryButton={false}
     />
   );

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

@@ -1,62 +1,18 @@
-import {
-  BORDER_COMMON,
-  OverflowingTextWithTooltip,
-  THEME_COMMON,
-} from 'twenty-ui';
+import { Chip, ChipVariant } from 'twenty-ui';
 
 import { FieldArrayValue } from '@/object-record/record-field/types/FieldMetadata';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
-import styled from '@emotion/styled';
 
 type ArrayDisplayProps = {
   value: FieldArrayValue;
-  isFocused?: boolean;
-  isInputDisplay?: boolean;
 };
 
-const themeSpacing = THEME_COMMON.spacingMultiplicator;
-
-const StyledContainer = styled.div`
-  align-items: center;
-  display: flex;
-  gap: ${themeSpacing * 1}px;
-  justify-content: flex-start;
-
-  max-width: 100%;
-
-  overflow: hidden;
-
-  width: 100%;
-`;
-
-const StyledTag = styled.div<{ isInputDisplay?: boolean }>`
-  background-color: ${({ theme, isInputDisplay }) =>
-    isInputDisplay ? 'transparent' : theme.background.tertiary};
-  padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
-  border-radius: ${BORDER_COMMON.radius.sm};
-  font-weight: ${({ theme }) => theme.font.weight.regular};
-`;
-
-export const ArrayDisplay = ({
-  value,
-  isFocused,
-  isInputDisplay = false,
-}: ArrayDisplayProps) => {
-  return isFocused ? (
-    <ExpandableList isChipCountDisplayed>
-      {value?.map((item, index) => (
-        <StyledTag key={index}>
-          <OverflowingTextWithTooltip text={item} />
-        </StyledTag>
+export const ArrayDisplay = ({ value }: ArrayDisplayProps) => {
+  return (
+    <ExpandableList>
+      {value?.map((item) => (
+        <Chip variant={ChipVariant.Highlighted} label={item} />
       ))}
     </ExpandableList>
-  ) : (
-    <StyledContainer>
-      {value?.map((item, index) => (
-        <StyledTag key={index} isInputDisplay={isInputDisplay}>
-          <OverflowingTextWithTooltip text={item} />
-        </StyledTag>
-      ))}
-    </StyledContainer>
   );
 };

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

@@ -1,6 +1,5 @@
-import { styled } from '@linaria/react';
 import { useMemo } from 'react';
-import { LinkType, RoundedLink, SocialLink, THEME_COMMON } from 'twenty-ui';
+import { LinkType, RoundedLink, SocialLink } from 'twenty-ui';
 
 import { FieldLinksValue } from '@/object-record/record-field/types/FieldMetadata';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
@@ -11,25 +10,9 @@ import { getUrlHostName } from '~/utils/url/getUrlHostName';
 
 type LinksDisplayProps = {
   value?: FieldLinksValue;
-  isFocused?: boolean;
 };
 
-const themeSpacing = THEME_COMMON.spacingMultiplicator;
-
-const StyledContainer = styled.div`
-  align-items: center;
-  display: flex;
-  gap: ${themeSpacing * 1}px;
-  justify-content: flex-start;
-
-  max-width: 100%;
-
-  overflow: hidden;
-
-  width: 100%;
-`;
-
-export const LinksDisplay = ({ value, isFocused }: LinksDisplayProps) => {
+export const LinksDisplay = ({ value }: LinksDisplayProps) => {
   const links = useMemo(
     () =>
       [
@@ -53,8 +36,8 @@ export const LinksDisplay = ({ value, isFocused }: LinksDisplayProps) => {
     [value?.primaryLinkLabel, value?.primaryLinkUrl, value?.secondaryLinks],
   );
 
-  return isFocused ? (
-    <ExpandableList isChipCountDisplayed>
+  return (
+    <ExpandableList>
       {links.map(({ url, label, type }, index) =>
         type === LinkType.LinkedIn || type === LinkType.Twitter ? (
           <SocialLink key={index} href={url} type={type} label={label} />
@@ -63,15 +46,5 @@ export const LinksDisplay = ({ value, isFocused }: LinksDisplayProps) => {
         ),
       )}
     </ExpandableList>
-  ) : (
-    <StyledContainer>
-      {links.map(({ url, label, type }, index) =>
-        type === LinkType.LinkedIn || type === LinkType.Twitter ? (
-          <SocialLink key={index} href={url} type={type} label={label} />
-        ) : (
-          <RoundedLink key={index} href={url} label={label} />
-        ),
-      )}
-    </StyledContainer>
   );
 };

packages/twenty-front/src/utils/__tests__/checkUrlType.test.ts

@@ -5,10 +5,17 @@ describe('checkUrlType', () => {
     expect(checkUrlType('https://www.linkedin.com/in/håkan-fisk')).toBe(
       'linkedin',
     );
+    expect(checkUrlType('http://www.linkedin.com/in/håkan-fisk')).toBe(
+      'linkedin',
+    );
+    expect(checkUrlType('https://linkedin.com/in/håkan-fisk')).toBe('linkedin');
+    expect(checkUrlType('http://linkedin.com/in/håkan-fisk')).toBe('linkedin');
+    expect(checkUrlType('linkedin.com/in/håkan-fisk')).toBe('linkedin');
   });
 
   it('should return "twitter", if twitter url', () => {
     expect(checkUrlType('https://www.twitter.com/john-doe')).toBe('twitter');
+    expect(checkUrlType('https://www.x.com/john-doe')).toBe('twitter');
   });
 
   it('should return "url", if neither linkedin nor twitter url', () => {

packages/twenty-front/src/utils/checkUrlType.ts

@@ -1,17 +1,13 @@
 import { LinkType } from 'twenty-ui';
-import { isDefined } from './isDefined';
 
 export const checkUrlType = (url: string) => {
-  if (
-    /^(http|https):\/\/(?:www\.)?linkedin.com(\w+:{0,1}\w*@)?(\S+)(:([0-9])+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(
-      url,
-    )
-  ) {
+  if (/^(https?:\/\/)?(www\.)?linkedin\.com\/.+$/.test(url)) {
     return LinkType.LinkedIn;
   }
-  if (
-    isDefined(/^((http|https):\/\/)?(?:www\.)?twitter\.com\/(\w+)?/i.exec(url))
-  ) {
+  if (/^(https?:\/\/)?(www\.)?twitter\.com\/.+$/.test(url)) {
+    return LinkType.Twitter;
+  }
+  if (/^(https?:\/\/)?(www\.)?x\.com\/.+$/.test(url)) {
     return LinkType.Twitter;
   }