From 8cf3b83bb9af058601b2f4898b54a10c52d6ecb6 Mon Sep 17 00:00:00 2001 From: Davinder Kumar Date: Tue, 27 May 2025 14:40:12 +0530 Subject: [PATCH] fix/replace-set-primary-with-bookmark-12268 (#12276) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 🛠️ What this PR fixes Fixes #12268 This PR fixes the UI behavior where the "Set as Primary" button was incorrectly shown for emails or phones that are already marked as primary. Instead, users now see a bookmark icon indicating the entry as primary. ## 🎥 Demo The attached video demonstrates the updated UI where the "Set as Primary" button is hidden for primary contacts or emails and replaced by a bookmark icon. https://github.com/user-attachments/assets/9afcc818-fbb4-4e7c-8fa2-093fdc7d8a26 --------- Co-authored-by: Davinder Kumar Co-authored-by: Devessier --- .../input/components/EmailsFieldInput.tsx | 8 +++-- .../input/components/PhonesFieldInput.tsx | 8 +++-- .../__stories__/EmailsFieldInput.stories.tsx | 30 ++++++----------- .../__stories__/PhonesFieldInput.stories.tsx | 32 ++++++------------- 4 files changed, 28 insertions(+), 50 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/EmailsFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/EmailsFieldInput.tsx index aa3ef4376..604a8000f 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/EmailsFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/EmailsFieldInput.tsx @@ -45,7 +45,9 @@ export const EmailsFieldInput = ({ [], ); - const isPrimaryEmail = (index: number) => index === 0 && emails?.length > 1; + const getShowPrimaryIcon = (index: number) => + index === 0 && emails.length > 1; + const getShowSetAsPrimaryButton = (index: number) => index > 0; const setIsFieldInError = useSetRecoilComponentStateV2( recordFieldInputIsFieldInErrorComponentState, @@ -77,8 +79,8 @@ export const EmailsFieldInput = ({ index === 0 && phones?.length > 1; + const getShowPrimaryIcon = (index: number) => + index === 0 && phones.length > 1; + const getShowSetAsPrimaryButton = (index: number) => index > 0; return ( { - expect(updateRecord).toHaveBeenCalledWith({ - variables: { - where: { id: 'record-id' }, - updateOneRecordInput: { - emails: { - primaryEmail: 'primary@example.com', - additionalEmails: [], - }, - }, - }, - }); - }); - expect(updateRecord).toHaveBeenCalledTimes(1); + expect(setPrimaryOption).not.toBeInTheDocument(); }, }; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/PhonesFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/PhonesFieldInput.stories.tsx index 60786a05a..59b9a1e4b 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/PhonesFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/PhonesFieldInput.stories.tsx @@ -1,6 +1,6 @@ import { expect } from '@storybook/jest'; import { Meta, StoryObj } from '@storybook/react'; -import { fn, userEvent, waitFor, within } from '@storybook/test'; +import { fn, userEvent, within } from '@storybook/test'; import { useEffect } from 'react'; import { getCanvasElementForDropdownTesting } from 'twenty-ui/testing'; @@ -141,7 +141,7 @@ export const Default: Story = { }; // FIXME: We will have to fix that behavior, we should only be able to set an additional phone as the primary phone -export const CanSetPrimaryLinkAsPrimaryLink: Story = { +export const CanNotSetPrimaryLinkAsPrimaryLink: Story = { args: { value: { primaryPhoneCountryCode: 'FR', @@ -163,30 +163,16 @@ export const CanSetPrimaryLinkAsPrimaryLink: Story = { }); await userEvent.click(openDropdownButtons[0]); - const setPrimaryOption = await within( + const editOption = await within( getCanvasElementForDropdownTesting(), - ).findByText('Set as Primary'); + ).findByText('Edit'); - expect(setPrimaryOption).toBeVisible(); + expect(editOption).toBeVisible(); - await userEvent.click(setPrimaryOption); + const setPrimaryOption = within( + getCanvasElementForDropdownTesting(), + ).queryByText('Set as Primary'); - // Verify the update was called with swapped phones - await waitFor(() => { - expect(updateRecord).toHaveBeenCalledWith({ - variables: { - where: { id: 'record-id' }, - updateOneRecordInput: { - phones: { - primaryPhoneCallingCode: '+33', - primaryPhoneCountryCode: 'FR', - primaryPhoneNumber: '642646272', - additionalPhones: [], - }, - }, - }, - }); - }); - expect(updateRecord).toHaveBeenCalledTimes(1); + expect(setPrimaryOption).not.toBeInTheDocument(); }, };