Fix array and links display (#8671)

## Before ![image](https://github.com/user-attachments/assets/ebecb45b-d3c1-4c80-9d90-726e37d2d417) ![image](https://github.com/user-attachments/assets/33e85593-9459-4790-9ae6-a79265f33b5a) ## After ![image](https://github.com/user-attachments/assets/a5174069-bed3-4e02-ae98-550a418243c5) ![image](https://github.com/user-attachments/assets/f2d0dd16-225c-4788-bb90-d47875d8b5f3)
2024-11-22 12:06:31 +01:00
parent aa8b0ff04a
commit 76be1df66a
7 changed files with 25 additions and 118 deletions
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ArrayFieldDisplay.tsx
+++ b/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} />;
 };
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/LinksFieldDisplay.tsx
+++ b/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} />;
 };
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/ArrayFieldMenuItem.tsx
+++ b/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}
    />
  );
--- a/packages/twenty-front/src/modules/ui/field/display/components/ArrayDisplay.tsx
+++ b/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>
  );
 };
--- a/packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx
+++ b/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>
  );
 };
--- a/packages/twenty-front/src/utils/tests/checkUrlType.test.ts
+++ b/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', () => {
--- a/packages/twenty-front/src/utils/checkUrlType.ts
+++ b/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;
  }