Feature 15797 add secondary action button

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButtons.tsx

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import { type IconComponent } from 'twenty-ui/display';
+import { LightIconButtonGroup } from 'twenty-ui/input';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
+import { AnimatedContainer } from 'twenty-ui/utilities';
+
+const StyledButtonContainer = styled.div`
+  margin: ${({ theme }) => theme.spacing(1)};
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    position: relative;
+    right: 7px;
+  }
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  border: 1px solid ${({ theme }) => theme.border.color.strong};
+`;
+
+type RecordTableCellButtonsProps = {
+  onClick?: () => void;
+  Icon: IconComponent;
+}[];
+
+export const RecordTableCellButtons = ({
+  buttons,
+}: {
+  buttons: RecordTableCellButtonsProps;
+}) => {
+  return (
+    <AnimatedContainer>
+      <StyledButtonContainer>
+        <LightIconButtonGroup size="small" iconButtons={buttons} />
+      </StyledButtonContainer>
+    </AnimatedContainer>
+  );
+};

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx

@@ -1,28 +1,30 @@
 import { useGetButtonIcon } from '@/object-record/record-field/ui/hooks/useGetButtonIcon';
 import { useIsFieldInputOnly } from '@/object-record/record-field/ui/hooks/useIsFieldInputOnly';
+
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
-import { RecordTableCellButton } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButton';
+import { RecordTableCellButtons } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButtons';
+import { useGetSecondaryRecordTableCellButton } from '@/object-record/record-table/record-table-cell/hooks/useGetSecondaryRecordTableCellButton';
 import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { IconArrowUpRight, IconPencil } from 'twenty-ui/display';
 
 export const RecordTableCellEditButton = () => {
   const { cellPosition } = useContext(RecordTableCellContext);
-
   const { openTableCell } = useOpenRecordTableCellFromCell();
-
   const isFieldInputOnly = useIsFieldInputOnly();
   const isFirstColumn = cellPosition.column === 0;
   const customButtonIcon = useGetButtonIcon();
 
-  const buttonIcon = isFirstColumn
+  const secondaryButton = useGetSecondaryRecordTableCellButton();
+
+  const mainButtonIcon = isFirstColumn
     ? IconArrowUpRight
     : isDefined(customButtonIcon)
       ? customButtonIcon
       : IconPencil;
 
-  const handleButtonClick = () => {
+  const handleMainButtonClick = () => {
     if (!isFieldInputOnly && isFirstColumn) {
       openTableCell(undefined, false, true);
     } else {
@@ -31,6 +33,14 @@ export const RecordTableCellEditButton = () => {
   };
 
   return (
-    <RecordTableCellButton onClick={handleButtonClick} Icon={buttonIcon} />
+    <RecordTableCellButtons
+      buttons={[
+        ...secondaryButton,
+        {
+          onClick: handleMainButtonClick,
+          Icon: mainButtonIcon,
+        },
+      ]}
+    />
   );
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useGetSecondaryRecordTableCellButton.ts

@@ -0,0 +1,88 @@
+import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext';
+import {
+  type FieldEmailsValue,
+  type FieldLinksValue,
+  type FieldPhonesValue,
+} from '@/object-record/record-field/ui/types/FieldMetadata';
+import { isFieldEmails } from '@/object-record/record-field/ui/types/guards/isFieldEmails';
+import { isFieldLinks } from '@/object-record/record-field/ui/types/guards/isFieldLinks';
+import { isFieldPhones } from '@/object-record/record-field/ui/types/guards/isFieldPhones';
+import { useRecordFieldValue } from '@/object-record/record-store/hooks/useRecordFieldValue';
+import { t } from '@lingui/core/macro';
+import { useContext } from 'react';
+import { FieldMetadataSettingsOnClickAction } from 'twenty-shared/types';
+import { getAbsoluteUrl, isDefined } from 'twenty-shared/utils';
+import { IconArrowUpRight, IconCopy } from 'twenty-ui/display';
+import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
+
+export const useGetSecondaryRecordTableCellButton = () => {
+  const { fieldDefinition, recordId } = useContext(FieldContext);
+  const { copyToClipboard } = useCopyToClipboard();
+
+  const fieldValue = useRecordFieldValue<
+    FieldPhonesValue | FieldEmailsValue | FieldLinksValue | undefined
+  >(recordId, fieldDefinition.metadata.fieldName, fieldDefinition);
+
+  if (
+    (!isFieldPhones(fieldDefinition) &&
+      !isFieldLinks(fieldDefinition) &&
+      !isFieldEmails(fieldDefinition)) ||
+    !isDefined(fieldValue)
+  ) {
+    return [];
+  }
+
+  const secondaryActionOnClick =
+    fieldDefinition.metadata.settings?.clickAction ===
+    FieldMetadataSettingsOnClickAction.OPEN_LINK
+      ? FieldMetadataSettingsOnClickAction.COPY
+      : FieldMetadataSettingsOnClickAction.OPEN_LINK;
+
+  let openLinkOnClick: () => void = () => {};
+  let copyOnClick: () => void = () => {};
+
+  if (isFieldPhones(fieldDefinition)) {
+    const { primaryPhoneCallingCode = '', primaryPhoneNumber = '' } =
+      fieldValue as FieldPhonesValue;
+    const phoneNumber = `${primaryPhoneCallingCode}${primaryPhoneNumber}`;
+    openLinkOnClick = () => {
+      window.open(`tel:${phoneNumber}`, '_blank');
+    };
+    copyOnClick = () => {
+      copyToClipboard(phoneNumber, t`Phone number copied to clipboard`);
+    };
+  }
+
+  if (isFieldEmails(fieldDefinition)) {
+    const email = (fieldValue as FieldEmailsValue).primaryEmail ?? '';
+    openLinkOnClick = () => {
+      window.open(`mailto:${email}`, '_blank');
+    };
+    copyOnClick = () => {
+      copyToClipboard(email, t`Email copied to clipboard`);
+    };
+  }
+
+  if (isFieldLinks(fieldDefinition)) {
+    const url = (fieldValue as FieldLinksValue).primaryLinkUrl ?? '';
+    openLinkOnClick = () => {
+      window.open(getAbsoluteUrl(url), '_blank');
+    };
+    copyOnClick = () => {
+      copyToClipboard(url, t`Link copied to clipboard`);
+    };
+  }
+
+  return [
+    {
+      onClick:
+        secondaryActionOnClick === FieldMetadataSettingsOnClickAction.OPEN_LINK
+          ? openLinkOnClick
+          : copyOnClick,
+      Icon:
+        secondaryActionOnClick === FieldMetadataSettingsOnClickAction.OPEN_LINK
+          ? IconArrowUpRight
+          : IconCopy,
+    },
+  ];
+};

packages/twenty-front/src/modules/settings/data-model/fields/preview/components/__stories__/SettingsDataModelFieldPreviewWidget.stories.tsx

@@ -30,6 +30,7 @@ const meta: Meta<typeof SettingsDataModelFieldPreviewWidget> = {
     MemoryRouterDecorator,
     ComponentDecorator,
     ObjectMetadataItemsDecorator,
+    I18nFrontDecorator,
     SnackBarDecorator,
   ],
   args: {