fix: Links field fixes (#5565)

Related issue: #3607
2024-05-24 17:59:08 +02:00
parent fa3443c05b
commit 736c79afde
9 changed files with 84 additions and 106 deletions
--- a/packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx
@ -136,7 +136,7 @@ export const FieldInput = ({
          onShiftTab={onShiftTab}
        />
      ) : isFieldLinks(fieldDefinition) ? (
-        <LinksFieldInput onCancel={onCancel} onSubmit={onSubmit} />
+        <LinksFieldInput onCancel={onCancel} />
      ) : isFieldCurrency(fieldDefinition) ? (
        <CurrencyFieldInput
          onEnter={onEnter}
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx
@ -5,7 +5,6 @@ import { IconCheck, IconPlus } from 'twenty-ui';

 import { useLinksField } from '@/object-record/record-field/meta-types/hooks/useLinksField';
 import { LinksFieldMenuItem } from '@/object-record/record-field/meta-types/input/components/LinksFieldMenuItem';
-import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput';
@ -27,13 +26,9 @@ const StyledDropdownMenu = styled(DropdownMenu)`

 export type LinksFieldInputProps = {
  onCancel?: () => void;
-  onSubmit?: FieldInputEvent;
 };

-export const LinksFieldInput = ({
-  onCancel,
-  onSubmit,
-}: LinksFieldInputProps) => {
+export const LinksFieldInput = ({ onCancel }: LinksFieldInputProps) => {
  const { persistLinksField, hotkeyScope, fieldValue } = useLinksField();

  const containerRef = useRef<HTMLDivElement>(null);
@ -99,7 +94,6 @@ export const LinksFieldInput = ({
    ) {
      setIsInputDisplayed(false);
      setInputValue('');
-      onCancel?.();
      return;
    }

@ -109,14 +103,11 @@ export const LinksFieldInput = ({
      : toSpliced(links, linkToEditIndex, 1, linkValue);
    const [nextPrimaryLink, ...nextSecondaryLinks] = nextLinks;

-    onSubmit?.(() =>
-      persistLinksField({
-        primaryLinkUrl: nextPrimaryLink.url ?? '',
-        primaryLinkLabel: nextPrimaryLink.label ?? '',
-        secondaryLinks: nextSecondaryLinks,
-      }),
-    );
-
+    persistLinksField({
+      primaryLinkUrl: nextPrimaryLink.url ?? '',
+      primaryLinkLabel: nextPrimaryLink.label ?? '',
+      secondaryLinks: nextSecondaryLinks,
+    });
    setIsInputDisplayed(false);
    setInputValue('');
  };
@ -125,26 +116,18 @@ export const LinksFieldInput = ({
    const nextLinks = moveArrayItem(links, { fromIndex: index, toIndex: 0 });
    const [nextPrimaryLink, ...nextSecondaryLinks] = nextLinks;

-    onSubmit?.(() =>
-      persistLinksField({
-        primaryLinkUrl: nextPrimaryLink.url ?? '',
-        primaryLinkLabel: nextPrimaryLink.label ?? '',
-        secondaryLinks: nextSecondaryLinks,
-      }),
-    );
+    persistLinksField({
+      primaryLinkUrl: nextPrimaryLink.url ?? '',
+      primaryLinkLabel: nextPrimaryLink.label ?? '',
+      secondaryLinks: nextSecondaryLinks,
+    });
  };

  const handleDeleteLink = (index: number) => {
-    onSubmit?.(() =>
-      persistLinksField({
-        ...fieldValue,
-        secondaryLinks: toSpliced(
-          fieldValue.secondaryLinks ?? [],
-          index - 1,
-          1,
-        ),
-      }),
-    );
+    persistLinksField({
+      ...fieldValue,
+      secondaryLinks: toSpliced(fieldValue.secondaryLinks ?? [], index - 1, 1),
+    });
  };

  return (
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldMenuItem.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldMenuItem.tsx
@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import {
  IconBookmark,
@ -40,8 +40,12 @@ export const LinksFieldMenuItem = ({
  onDelete,
  url,
 }: LinksFieldMenuItemProps) => {
+  const [isHovered, setIsHovered] = useState(false);
  const { isDropdownOpen, closeDropdown } = useDropdown(dropdownId);

+  const handleMouseEnter = () => setIsHovered(true);
+  const handleMouseLeave = () => setIsHovered(false);
+
  // Make sure dropdown closes on unmount.
  useEffect(() => {
    if (isDropdownOpen) {
@ -51,13 +55,14 @@ export const LinksFieldMenuItem = ({

  return (
    <MenuItem
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
      text={<LinkDisplay value={{ label, url }} />}
      isIconDisplayedOnHoverOnly={!isPrimary && !isDropdownOpen}
      iconButtons={[
        {
-          Wrapper: isPrimary
-            ? undefined
-            : ({ iconButton }) => (
+          Wrapper: isHovered
+            ? ({ iconButton }) => (
                <Dropdown
                  dropdownId={dropdownId}
                  dropdownHotkeyScope={{
@ -69,31 +74,37 @@ export const LinksFieldMenuItem = ({
                  clickableComponent={iconButton}
                  dropdownComponents={
                    <DropdownMenuItemsContainer>
-                      <MenuItem
-                        LeftIcon={IconBookmarkPlus}
-                        text="Set as Primary"
-                        onClick={onSetAsPrimary}
-                      />
+                      {!isPrimary && (
+                        <MenuItem
+                          LeftIcon={IconBookmarkPlus}
+                          text="Set as Primary"
+                          onClick={onSetAsPrimary}
+                        />
+                      )}
                      <MenuItem
                        LeftIcon={IconPencil}
                        text="Edit"
                        onClick={onEdit}
                      />
-                      <MenuItem
-                        accent="danger"
-                        LeftIcon={IconTrash}
-                        text="Delete"
-                        onClick={onDelete}
-                      />
+                      {!isPrimary && (
+                        <MenuItem
+                          accent="danger"
+                          LeftIcon={IconTrash}
+                          text="Delete"
+                          onClick={onDelete}
+                        />
+                      )}
                    </DropdownMenuItemsContainer>
                  }
                />
-              ),
-          Icon: isPrimary
-            ? (StyledIconBookmark as IconComponent)
-            : IconDotsVertical,
+              )
+            : undefined,
+          Icon:
+            isPrimary && !isHovered
+              ? (StyledIconBookmark as IconComponent)
+              : IconDotsVertical,
          accent: 'tertiary',
-          onClick: isPrimary ? undefined : () => {},
+          onClick: isHovered ? () => {} : undefined,
        },
      ]}
    />
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx
@ -2,7 +2,6 @@ import { useRef, useState } from 'react';
 import styled from '@emotion/styled';

 import { useMultiSelectField } from '@/object-record/record-field/meta-types/hooks/useMultiSelectField';
-import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
@ -18,7 +17,6 @@ const StyledRelationPickerContainer = styled.div`
 `;

 export type MultiSelectFieldInputProps = {
-  onSubmit?: FieldInputEvent;
  onCancel?: () => void;
 };

--- 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,5 +1,4 @@
 import { MouseEvent } from 'react';
-import styled from '@emotion/styled';

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

-import { EllipsisDisplay } from './EllipsisDisplay';
-
-const StyledRawLink = styled(RoundedLink)`
-  a {
-    font-size: ${({ theme }) => theme.font.size.md};
-    white-space: nowrap;
-  }
-`;
-
 type LinkDisplayProps = {
  value?: FieldLinkValue;
 };
@ -35,18 +25,15 @@ export const LinkDisplay = ({ value }: LinkDisplayProps) => {

  if (type === LinkType.LinkedIn || type === LinkType.Twitter) {
    return (
-      <EllipsisDisplay>
-        <SocialLink href={absoluteUrl} onClick={handleClick} type={type}>
-          {displayedValue}
-        </SocialLink>
-      </EllipsisDisplay>
+      <SocialLink href={absoluteUrl} onClick={handleClick} type={type}>
+        {displayedValue}
+      </SocialLink>
    );
  }
+
  return (
-    <EllipsisDisplay>
-      <StyledRawLink href={absoluteUrl} onClick={handleClick}>
-        {displayedValue}
-      </StyledRawLink>
-    </EllipsisDisplay>
+    <RoundedLink href={absoluteUrl} onClick={handleClick}>
+      {displayedValue}
+    </RoundedLink>
  );
 };
--- a/packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx
@ -11,14 +11,18 @@ type RoundedLinkProps = {
 };

 const StyledLink = styled(ReactLink)`
+  font-size: ${({ theme }) => theme.font.size.md};
  max-width: 100%;
+  height: ${({ theme }) => theme.spacing(5)};
 `;

 const StyledChip = styled(Chip)`
  border-color: ${({ theme }) => theme.border.color.strong};
  box-sizing: border-box;
-  padding: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(0, 2)};
  max-width: 100%;
+  height: ${({ theme }) => theme.spacing(5)};
+  min-width: 40px;
 `;

 export const RoundedLink = ({
@ -39,7 +43,7 @@ export const RoundedLink = ({
      <StyledChip
        label={`${children}`}
        variant={ChipVariant.Rounded}
-        size={ChipSize.Small}
+        size={ChipSize.Large}
      />
    </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
@ -1,5 +1,4 @@
 import * as React from 'react';
-import styled from '@emotion/styled';

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

@ -18,16 +17,6 @@ type SocialLinkProps = {
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 };

-const StyledRawLink = styled(RoundedLink)`
-  overflow: hidden;
-
-  a {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-`;
-
 export const SocialLink = ({
  children,
  href,
@ -38,8 +27,8 @@ export const SocialLink = ({
    getDisplayValueByUrlType({ type: type, href: href }) ?? children;

  return (
-    <StyledRawLink href={href} onClick={onClick}>
+    <RoundedLink href={href} onClick={onClick}>
      {displayValue}
-    </StyledRawLink>
+    </RoundedLink>
  );
 };
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
@ -19,26 +19,30 @@ export type MenuItemIconButton = {
 };

 export type MenuItemProps = {
-  LeftIcon?: IconComponent | null;
  accent?: MenuItemAccent;
-  text: ReactNode;
+  className?: string;
  iconButtons?: MenuItemIconButton[];
  isIconDisplayedOnHoverOnly?: boolean;
  isTooltipOpen?: boolean;
-  className?: string;
-  testId?: string;
+  LeftIcon?: IconComponent | null;
  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+  onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+  onMouseLeave?: (event: MouseEvent<HTMLDivElement>) => void;
+  testId?: string;
+  text: ReactNode;
 };

 export const MenuItem = ({
-  LeftIcon,
  accent = 'default',
-  text,
+  className,
  iconButtons,
  isIconDisplayedOnHoverOnly = true,
-  className,
-  testId,
+  LeftIcon,
  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  testId,
+  text,
 }: MenuItemProps) => {
  const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;

@ -57,6 +61,8 @@ export const MenuItem = ({
      className={className}
      accent={accent}
      isIconDisplayedOnHoverOnly={isIconDisplayedOnHoverOnly}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
    >
      <StyledMenuItemLeftContent>
        <MenuItemLeftContent LeftIcon={LeftIcon ?? undefined} text={text} />
--- a/packages/twenty-ui/src/display/chip/components/Chip.tsx
+++ b/packages/twenty-ui/src/display/chip/components/Chip.tsx
@ -87,13 +87,6 @@ const StyledContainer = styled('div', {
    }
  }}

-  // Size style overrides
-  ${({ theme, size }) =>
-    size === ChipSize.Large &&
-    css`
-      height: ${theme.spacing(4)};
-    `}
-
  // Variant style overrides
  ${({ disabled, theme, variant }) => {
    if (variant === ChipVariant.Regular) {
@ -153,6 +146,13 @@ const StyledLabel = styled.span`
  white-space: nowrap;
 `;

+const StyledOverflowingTextWithTooltip = styled(OverflowingTextWithTooltip)<{
+  size?: ChipSize;
+}>`
+  height: ${({ theme, size }) =>
+    size === ChipSize.Large ? theme.spacing(4) : 'auto'};
+`;
+
 export const Chip = ({
  size = ChipSize.Small,
  label,
@ -183,7 +183,7 @@ export const Chip = ({
    >
      {leftComponent}
      <StyledLabel>
-        <OverflowingTextWithTooltip text={label} />
+        <StyledOverflowingTextWithTooltip size={size} text={label} />
      </StyledLabel>
      {rightComponent}
    </StyledContainer>