Refactored all FieldDisplay types for performance optimization (#5768)

This PR is the second part of https://github.com/twentyhq/twenty/pull/5693. It optimizes all remaining field types. The observed improvements are : - x2 loading time improvement on table rows - more consistent render time Here's a summary of measured improvements, what's given here is the average of hundreds of renders with a React Profiler component. (in our Storybook performance stories) | Component | Before (µs) | After (µs) | | ----- | ------------- | --- | | TextFieldDisplay | 127 | 83 | | EmailFieldDisplay | 117 | 83 | | NumberFieldDisplay | 97 | 56 | | DateFieldDisplay | 240 | 52 | | CurrencyFieldDisplay | 236 | 110 | | FullNameFieldDisplay | 131 | 85 | | AddressFieldDisplay | 118 | 81 | | BooleanFieldDisplay | 130 | 100 | | JSONFieldDisplay | 248 | 49 | | LinksFieldDisplay | 1180 | 140 | | LinkFieldDisplay | 140 | 78 | | MultiSelectFieldDisplay | 770 | 130 | | SelectFieldDisplay | 230 | 87 |
2024-06-12 18:36:25 +02:00
parent 007e0e8b0e
commit 03b3c8a67a
101 changed files with 17167 additions and 15795 deletions
--- a/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx
@ -1,36 +1,32 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { IconCheck, IconX } from 'twenty-ui';
+import { styled } from '@linaria/react';
+import { IconCheck, IconX, THEME_COMMON } from 'twenty-ui';

 import { isDefined } from '~/utils/isDefined';

+const spacing = THEME_COMMON.spacingMultiplicator * 1;
+const iconSizeSm = THEME_COMMON.icon.size.sm;
+
 const StyledBooleanFieldValue = styled.div`
-  margin-left: ${({ theme }) => theme.spacing(1)};
+  margin-left: ${spacing}px;
 `;

 type BooleanDisplayProps = {
-  value: boolean | null;
+  value: boolean | null | undefined;
 };

 export const BooleanDisplay = ({ value }: BooleanDisplayProps) => {
-  const theme = useTheme();
+  if (!isDefined(value)) {
+    return <></>;
+  }
+
+  const isTrue = value === true;

  return (
    <>
-      {isDefined(value) ? (
-        <>
-          {value ? (
-            <IconCheck size={theme.icon.size.sm} />
-          ) : (
-            <IconX size={theme.icon.size.sm} />
-          )}
-          <StyledBooleanFieldValue>
-            {value ? 'True' : 'False'}
-          </StyledBooleanFieldValue>
-        </>
-      ) : (
-        <></>
-      )}
+      {isTrue ? <IconCheck size={iconSizeSm} /> : <IconX size={iconSizeSm} />}
+      <StyledBooleanFieldValue>
+        {isTrue ? 'True' : 'False'}
+      </StyledBooleanFieldValue>
    </>
  );
 };
--- a/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx
@ -1,20 +1,23 @@
 import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { styled } from '@linaria/react';

 import { FieldCurrencyValue } from '@/object-record/record-field/types/FieldMetadata';
 import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
 import { formatAmount } from '~/utils/format/formatAmount';
 import { isDefined } from '~/utils/isDefined';

-import { EllipsisDisplay } from './EllipsisDisplay';
-
 type CurrencyDisplayProps = {
  currencyValue: FieldCurrencyValue | null | undefined;
 };

-const StyledEllipsisDisplay = styled(EllipsisDisplay)`
+const StyledEllipsisDisplay = styled.div`
  align-items: center;
  display: flex;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
 `;

 export const CurrencyDisplay = ({ currencyValue }: CurrencyDisplayProps) => {
@ -26,9 +29,7 @@ export const CurrencyDisplay = ({ currencyValue }: CurrencyDisplayProps) => {
    ? SETTINGS_FIELD_CURRENCY_CODES[currencyValue?.currencyCode]?.Icon
    : null;

-  const amountToDisplay = isDefined(currencyValue?.amountMicros)
-    ? currencyValue.amountMicros / 1000000
-    : 0;
+  const amountToDisplay = (currencyValue?.amountMicros ?? 0) / 1000000;

  if (!shouldDisplayCurrency) {
    return <StyledEllipsisDisplay>{0}</StyledEllipsisDisplay>;
--- a/packages/twenty-front/src/modules/ui/field/display/components/DateDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/DateDisplay.tsx
@ -1,11 +1,13 @@
-import { formatToHumanReadableDate } from '~/utils';
+import { formatISOStringToHumanReadableDate } from '~/utils/date-utils';

 import { EllipsisDisplay } from './EllipsisDisplay';

 type DateDisplayProps = {
-  value: Date | string | null | undefined;
+  value: string | null | undefined;
 };

 export const DateDisplay = ({ value }: DateDisplayProps) => (
-  <EllipsisDisplay>{value && formatToHumanReadableDate(value)}</EllipsisDisplay>
+  <EllipsisDisplay>
+    {value ? formatISOStringToHumanReadableDate(value) : ''}
+  </EllipsisDisplay>
 );
--- a/packages/twenty-front/src/modules/ui/field/display/components/DateTimeDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/DateTimeDisplay.tsx
@ -1,13 +1,13 @@
-import { formatToHumanReadableDateTime } from '~/utils';
+import { formatISOStringToHumanReadableDateTime } from '~/utils/date-utils';

 import { EllipsisDisplay } from './EllipsisDisplay';

 type DateTimeDisplayProps = {
-  value: Date | string | null | undefined;
+  value: string | null | undefined;
 };

 export const DateTimeDisplay = ({ value }: DateTimeDisplayProps) => (
  <EllipsisDisplay>
-    {value && formatToHumanReadableDateTime(value)}
+    {value ? formatISOStringToHumanReadableDateTime(value) : ''}
  </EllipsisDisplay>
 );
--- a/packages/twenty-front/src/modules/ui/field/display/components/EmailDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/EmailDisplay.tsx
@ -1,21 +1,39 @@
 import { MouseEvent } from 'react';

 import { ContactLink } from '@/ui/navigation/link/components/ContactLink';
+import { isDefined } from '~/utils/isDefined';

 import { EllipsisDisplay } from './EllipsisDisplay';

 const validateEmail = (email: string) => {
-  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  return emailPattern.test(email.trim());
+  // const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  // return emailPattern.test(email.trim());
+
+  // Record this without using regex
+  const emailParts = email.split('@');
+
+  if (emailParts.length !== 2) {
+    return false;
+  }
+
+  return true;
 };

 type EmailDisplayProps = {
  value: string | null;
 };

-export const EmailDisplay = ({ value }: EmailDisplayProps) => (
-  <EllipsisDisplay>
-    {value && validateEmail(value) ? (
+export const EmailDisplay = ({ value }: EmailDisplayProps) => {
+  if (!isDefined(value)) {
+    return <ContactLink href="#">{value}</ContactLink>;
+  }
+
+  if (!validateEmail(value)) {
+    return <ContactLink href="#">{value}</ContactLink>;
+  }
+
+  return (
+    <EllipsisDisplay>
      <ContactLink
        href={`mailto:${value}`}
        onClick={(event: MouseEvent<HTMLElement>) => {
@ -24,8 +42,6 @@ export const EmailDisplay = ({ value }: EmailDisplayProps) => (
      >
        {value}
      </ContactLink>
-    ) : (
-      <ContactLink href="#">{value}</ContactLink>
-    )}
-  </EllipsisDisplay>
-);
+    </EllipsisDisplay>
+  );
+};
--- a/packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx
@ -1,4 +1,4 @@
-import { MouseEvent } from 'react';
+import { isNonEmptyString } from '@sniptt/guards';

 import { FieldLinkValue } from '@/object-record/record-field/types/FieldMetadata';
 import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink';
@ -6,34 +6,31 @@ import {
  LinkType,
  SocialLink,
 } from '@/ui/navigation/link/components/SocialLink';
-import { checkUrlType } from '~/utils/checkUrlType';
-import { getAbsoluteUrl } from '~/utils/url/getAbsoluteUrl';
-import { getUrlHostName } from '~/utils/url/getUrlHostName';

 type LinkDisplayProps = {
  value?: FieldLinkValue;
 };

 export const LinkDisplay = ({ value }: LinkDisplayProps) => {
-  const handleClick = (event: MouseEvent<HTMLElement>) => {
-    event.stopPropagation();
-  };
+  const url = value?.url;

-  const absoluteUrl = getAbsoluteUrl(value?.url || '');
-  const displayedValue = value?.label || getUrlHostName(absoluteUrl);
-  const type = checkUrlType(absoluteUrl);
-
-  if (type === LinkType.LinkedIn || type === LinkType.Twitter) {
-    return (
-      <SocialLink href={absoluteUrl} onClick={handleClick} type={type}>
-        {displayedValue}
-      </SocialLink>
-    );
+  if (!isNonEmptyString(url)) {
+    return <></>;
  }

-  return (
-    <RoundedLink href={absoluteUrl} onClick={handleClick}>
-      {displayedValue}
-    </RoundedLink>
-  );
+  const displayedValue = isNonEmptyString(value?.label)
+    ? value?.label
+    : url?.replace(/^http[s]?:\/\/(?:[w]+\.)?/gm, '').replace(/^[w]+\./gm, '');
+
+  const type = displayedValue.startsWith('linkedin.')
+    ? LinkType.LinkedIn
+    : displayedValue.startsWith('twitter.')
+      ? LinkType.Twitter
+      : LinkType.Url;
+
+  if (type === LinkType.LinkedIn || type === LinkType.Twitter) {
+    return <SocialLink href={url} type={type} label={displayedValue} />;
+  }
+
+  return <RoundedLink href={url} label={displayedValue} />;
 };
--- 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,4 +1,6 @@
-import { MouseEventHandler, useMemo } from 'react';
+import { useMemo } from 'react';
+import { styled } from '@linaria/react';
+import { THEME_COMMON } from 'twenty-ui';

 import { FieldLinksValue } from '@/object-record/record-field/types/FieldMetadata';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
@ -17,6 +19,21 @@ type LinksDisplayProps = {
  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) => {
  const links = useMemo(
    () =>
@ -41,21 +58,25 @@ export const LinksDisplay = ({ value, isFocused }: LinksDisplayProps) => {
    [value?.primaryLinkLabel, value?.primaryLinkUrl, value?.secondaryLinks],
  );

-  const handleClick: MouseEventHandler = (event) => event.stopPropagation();
-
-  return (
+  return isFocused ? (
    <ExpandableList isChipCountDisplayed={isFocused}>
      {links.map(({ url, label, type }, index) =>
        type === LinkType.LinkedIn || type === LinkType.Twitter ? (
-          <SocialLink key={index} href={url} onClick={handleClick} type={type}>
-            {label}
-          </SocialLink>
+          <SocialLink key={index} href={url} type={type} label={label} />
        ) : (
-          <RoundedLink key={index} href={url} onClick={handleClick}>
-            {label}
-          </RoundedLink>
+          <RoundedLink key={index} href={url} label={label} />
        ),
      )}
    </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/modules/ui/field/display/components/URLDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/URLDisplay.tsx
@ -42,17 +42,22 @@ export const URLDisplay = ({ value }: URLDisplayProps) => {
  if (type === LinkType.LinkedIn || type === LinkType.Twitter) {
    return (
      <EllipsisDisplay>
-        <SocialLink href={absoluteUrl} onClick={handleClick} type={type}>
-          {displayedValue}
-        </SocialLink>
+        <SocialLink
+          href={absoluteUrl}
+          onClick={handleClick}
+          type={type}
+          label={displayedValue}
+        />
      </EllipsisDisplay>
    );
  }
  return (
    <EllipsisDisplay>
-      <StyledRawLink href={absoluteUrl} onClick={handleClick}>
-        {displayedValue}
-      </StyledRawLink>
+      <StyledRawLink
+        href={absoluteUrl}
+        onClick={handleClick}
+        label={displayedValue}
+      />
    </EllipsisDisplay>
  );
 };
--- a/packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx
@ -1,50 +1,71 @@
-import * as React from 'react';
-import { Link as ReactLink } from 'react-router-dom';
-import styled from '@emotion/styled';
-import { Chip, ChipSize, ChipVariant } from 'twenty-ui';
+import { MouseEvent } from 'react';
+import { styled } from '@linaria/react';
+import { isNonEmptyString } from '@sniptt/guards';
+import { FONT_COMMON, THEME_COMMON } from 'twenty-ui';

 type RoundedLinkProps = {
  href: string;
-  children?: React.ReactNode;
-  className?: string;
+  label?: string;
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 };

-const StyledLink = styled(ReactLink)`
-  font-size: ${({ theme }) => theme.font.size.md};
+const fontSizeMd = FONT_COMMON.size.md;
+const spacing1 = THEME_COMMON.spacing(1);
+const spacing3 = THEME_COMMON.spacing(3);
+
+const spacingMultiplicator = THEME_COMMON.spacingMultiplicator;
+
+const StyledLink = styled.a`
+  align-items: center;
+  background-color: var(--twentycrm-background-transparent-light);
+  border: 1px solid var(--twentycrm-border-color-medium);
+
+  border-radius: 50px;
+  color: var(--twentycrm-font-color-primary);
+
+  cursor: pointer;
+  display: inline-flex;
+  font-weight: ${fontSizeMd};
+
+  gap: ${spacing1};
+
+  height: ${spacing3};
+  justify-content: center;
+
+  max-width: calc(100% - ${spacingMultiplicator} * 2px);
+
  max-width: 100%;
-  height: ${({ theme }) => theme.spacing(5)};
+
+  min-width: fit-content;
+
+  overflow: hidden;
+  padding: ${spacing1} ${spacing1};
+
+  text-decoration: none;
+  text-overflow: ellipsis;
+  user-select: none;
+  white-space: nowrap;
 `;

-const StyledChip = styled(Chip)`
-  border-color: ${({ theme }) => theme.border.color.strong};
-  box-sizing: border-box;
-  padding: ${({ theme }) => theme.spacing(0, 2)};
-  max-width: 100%;
-  height: ${({ theme }) => theme.spacing(5)};
-  min-width: 40px;
-`;
+export const RoundedLink = ({ label, href, onClick }: RoundedLinkProps) => {
+  if (!isNonEmptyString(label)) {
+    return <></>;
+  }

-export const RoundedLink = ({
-  children,
-  className,
-  href,
-  onClick,
-}: RoundedLinkProps) => {
-  if (!children) return null;
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+
+    onClick?.(event);
+  };

  return (
    <StyledLink
-      className={className}
+      href={href}
      target="_blank"
-      to={href}
-      onClick={onClick}
+      rel="noreferrer"
+      onClick={handleClick}
    >
-      <StyledChip
-        label={`${children}`}
-        variant={ChipVariant.Rounded}
-        size={ChipSize.Large}
-      />
+      {label}
    </StyledLink>
  );
 };
--- a/packages/twenty-front/src/modules/ui/navigation/link/components/SocialLink.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/link/components/SocialLink.tsx
@ -11,24 +11,15 @@ export enum LinkType {
 }

 type SocialLinkProps = {
+  label: string;
  href: string;
-  children?: React.ReactNode;
  type: LinkType;
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 };

-export const SocialLink = ({
-  children,
-  href,
-  onClick,
-  type,
-}: SocialLinkProps) => {
+export const SocialLink = ({ label, href, onClick, type }: SocialLinkProps) => {
  const displayValue =
-    getDisplayValueByUrlType({ type: type, href: href }) ?? children;
+    getDisplayValueByUrlType({ type: type, href: href }) ?? label;

-  return (
-    <RoundedLink href={href} onClick={onClick}>
-      {displayValue}
-    </RoundedLink>
-  );
+  return <RoundedLink href={href} onClick={onClick} label={displayValue} />;
 };
--- a/packages/twenty-front/src/modules/ui/navigation/link/components/stories/RoundedLink.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/link/components/stories/RoundedLink.stories.tsx
@ -11,7 +11,7 @@ const meta: Meta<typeof RoundedLink> = {
  decorators: [ComponentWithRouterDecorator],
  args: {
    href: '/test',
-    children: 'Rounded chip',
+    label: 'Rounded chip',
  },
 };

--- a/packages/twenty-front/src/modules/ui/navigation/link/components/stories/SocialLink.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/link/components/stories/SocialLink.stories.tsx
@ -11,7 +11,7 @@ const meta: Meta<typeof SocialLink> = {
  decorators: [ComponentWithRouterDecorator],
  args: {
    href: '/test',
-    children: 'Social Link',
+    label: 'Social Link',
  },
 };

@ -25,7 +25,7 @@ const twitter: LinkType = LinkType.Twitter;
 export const LinkedIn: Story = {
  args: {
    href: '/LinkedIn',
-    children: 'LinkedIn',
+    label: 'LinkedIn',
    onClick: clickJestFn,
    type: linkedin,
  },
@ -34,7 +34,7 @@ export const LinkedIn: Story = {
 export const Twitter: Story = {
  args: {
    href: '/Twitter',
-    children: 'Twitter',
+    label: 'Twitter',
    onClick: clickJestFn,
    type: twitter,
  },
--- a/packages/twenty-front/src/modules/ui/theme/components/AppThemeProvider.tsx
+++ b/packages/twenty-front/src/modules/ui/theme/components/AppThemeProvider.tsx
@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { ThemeProvider } from '@emotion/react';
-import { THEME_DARK, THEME_LIGHT } from 'twenty-ui';
+import { THEME_DARK, THEME_LIGHT, ThemeContextProvider } from 'twenty-ui';

 import { useColorScheme } from '../hooks/useColorScheme';
 import { useSystemColorScheme } from '../hooks/useSystemColorScheme';
@ -24,5 +24,9 @@ export const AppThemeProvider = ({ children }: AppThemeProviderProps) => {
      theme.name === 'dark' ? 'dark' : 'light';
  }, [theme]);

-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  return (
+    <ThemeProvider theme={theme}>
+      <ThemeContextProvider theme={theme}>{children}</ThemeContextProvider>
+    </ThemeProvider>
+  );
 };