feat: add feature to customize onClick behaviour for phone, email and links data type #16265

abk404 · 2025-12-02T16:56:35Z

Fixes Issue: #15797

This PR adds a configurable click behavior setting for Phone, Email, and Links field types, allowing users to customize what happens when clicking on these fields.

A new option (Click Behaviour) to configure the default behaviour for onClick of data is added in the settings page (Settings → Data Model → Object → Field Edit) for Phone, Email and Links data types.

Users can now choose between two actions:

Copy to clipboard: Copies the value to clipboard with a success toast message
Open as link: Opens the value as a link (tel:, mailto:, or http/https)

The default behaviour is persisted for all these three types(phone- Copy to clipboard, email & links: open link) to maintain backward compatibility.

Screenshots :

github-actions · 2025-12-02T16:57:33Z

Welcome!

Hello there, congrats on your first PR! We're excited to have you contributing to this project.
By submitting your Pull Request, you acknowledge that you agree with the terms of our Contributor License Agreement.

Generated by 🚫 dangerJS against bc8d4fd

greptile-apps · 2025-12-02T17:00:19Z

Greptile Overview

Greptile Summary

Added configurable click behavior for Phone, Email, and Links field types, allowing users to choose between copying to clipboard or opening as a link. The feature integrates a new settings form (SettingsDataModelFieldClickBehaviorForm) that persists user preferences via the clickAction field in FieldMetadataMultiItemSettings.

Key Changes:

Created new FieldClickAction enum with COPY and OPEN_LINK options
Added click behavior configuration UI in field settings for PHONES, EMAILS, and LINKS types
Updated display components to read clickAction from field metadata and conditionally execute copy or link behaviors
Default behaviors: Phone fields default to COPY, Email and Link fields default to OPEN_LINK

Issues Found:

FieldClickAction uses enum instead of string literal union type, violating the codebase's TypeScript guidelines which require "Use string literal unions instead of enums" (exception: GraphQL enums)
The validation schema uses string literals instead of referencing the enum, creating inconsistency

Confidence Score: 4/5

This PR is safe to merge with one syntax issue that should be addressed
The implementation is solid and follows existing patterns in the codebase. The main issue is the use of enum instead of string literal union type, which violates TypeScript guidelines. This is a style/consistency issue rather than a functional bug. The feature logic is sound, with proper defaults, validation, and integration points.
Pay close attention to packages/twenty-shared/src/types/FieldMetadataMultiItemSettings.ts - the enum should be converted to a string literal union type per codebase guidelines

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-shared/src/types/FieldMetadataMultiItemSettings.ts	3/5	Added `FieldClickAction` enum (violates codebase guidelines - should use string literal union) and `clickAction` field to settings type
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldClickBehaviorForm.tsx	5/5	New form component for configuring click behavior on phone, email, and link fields with proper type handling and i18n support
packages/twenty-front/src/modules/settings/data-model/fields/forms/utils/settingsDataModelFieldClickBehaviorSchema.ts	4/5	Validation schema for click behavior uses string literals `['COPY', 'OPEN_LINK']` instead of the enum, creating inconsistency
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/EmailsFieldDisplay.tsx	5/5	Reads click action from field settings and implements copy-to-clipboard handler with toast notification
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/PhonesFieldDisplay.tsx	5/5	Reads click action from field settings and conditionally executes copy handler based on click action preference

Sequence Diagram

sequenceDiagram
    participant User
    participant Settings as Settings UI
    participant ClickBehaviorForm as ClickBehaviorForm
    participant FieldMetadata as Field Metadata
    participant Display as Field Display Component
    participant Handler as Click Handler

    Note over User,Settings: Configuration Phase
    User->>Settings: Open field settings
    Settings->>ClickBehaviorForm: Render click behavior form
    ClickBehaviorForm->>FieldMetadata: Read existing clickAction setting
    FieldMetadata-->>ClickBehaviorForm: Return clickAction (or default)
    User->>ClickBehaviorForm: Select COPY or OPEN_LINK
    ClickBehaviorForm->>FieldMetadata: Save clickAction to settings
    
    Note over User,Handler: Runtime Phase
    User->>Display: Click on phone/email/link
    Display->>FieldMetadata: Read clickAction setting
    FieldMetadata-->>Display: Return clickAction value
    
    alt clickAction === COPY
        Display->>Handler: Call copy handler
        Handler->>Handler: Copy to clipboard
        Handler-->>User: Show success toast
    else clickAction === OPEN_LINK
        Display->>Handler: Default link behavior
        Handler-->>User: Open link in new tab
    end

greptile-apps

_{14 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps · 2025-12-02T17:00:17Z

packages/twenty-shared/src/types/FieldMetadataMultiItemSettings.ts

+export enum FieldClickAction {
+  COPY = 'COPY',
+  OPEN_LINK = 'OPEN_LINK',
+}


syntax: Use string literal union instead of enum per TypeScript guidelines

Suggested change

export enum FieldClickAction {

COPY = 'COPY',

OPEN_LINK = 'OPEN_LINK',

}

export type FieldClickAction = 'COPY' | 'OPEN_LINK';

Prompt To Fix With AI

This is a comment left during a code review. Path: packages/twenty-shared/src/types/FieldMetadataMultiItemSettings.ts Line: 1:4 Comment: **syntax:** Use string literal union instead of enum per TypeScript guidelines ```suggestion export type FieldClickAction = 'COPY' | 'OPEN_LINK'; ``` How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-12-02T17:00:18Z

.../modules/settings/data-model/fields/forms/utils/settingsDataModelFieldClickBehaviorSchema.ts

+
+export const settingsDataModelFieldClickBehaviorSchema = z.object({
+  settings: z.object({
+    clickAction: z.enum(['COPY', 'OPEN_LINK']).optional(),


style: Inconsistent with FieldClickAction definition - if enum is changed to string literal union, this will need to reference it properly or use the type directly

Prompt To Fix With AI

This is a comment left during a code review. Path: packages/twenty-front/src/modules/settings/data-model/fields/forms/utils/settingsDataModelFieldClickBehaviorSchema.ts Line: 5:5 Comment: **style:** Inconsistent with `FieldClickAction` definition - if enum is changed to string literal union, this will need to reference it properly or use the type directly How can I resolve this? If you propose a fix, please make it concise.

Copilot

Pull request overview

This PR adds a configurable "Click Behavior" feature for Phone, Email, and Links field types, allowing users to choose between copying to clipboard or opening as a link when clicking these field values.

Key Changes:

Added FieldClickAction enum with COPY and OPEN_LINK options to the shared types package
Created form controls to configure click behavior per field type with appropriate defaults (Phone: COPY, Email/Links: OPEN_LINK)
Updated display components to conditionally handle clicks based on the configured click action

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/twenty-shared/src/types/index.ts	Exports the new FieldClickAction enum for use across packages
packages/twenty-shared/src/types/FieldMetadataMultiItemSettings.ts	Defines FieldClickAction enum and extends FieldMetadataMultiItemSettings to include clickAction property
packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx	Ensures settings field is properly initialized in the edit form
packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx	Adds clickAction prop and conditional onClick handling based on click action setting
packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx	Adds clickAction prop and onClick handler that triggers copy behavior when configured
packages/twenty-front/src/modules/ui/field/display/components/EmailsDisplay.tsx	Adds clickAction prop and onClick handler that triggers copy behavior when configured
packages/twenty-front/src/modules/settings/data-model/fields/forms/utils/settingsDataModelFieldClickBehaviorSchema.ts	Defines Zod schema for click behavior form validation
packages/twenty-front/src/modules/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesSettingsFormCard.tsx	Integrates click behavior form into phone field settings
packages/twenty-front/src/modules/settings/data-model/fields/forms/phones/components/SettingsDataModelFieldPhonesForm.tsx	Merges click behavior schema into phones field form schema
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx	Adds click behavior form to generic settings for emails and links fields
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldClickBehaviorForm.tsx	Implements the click behavior configuration UI with field-type-specific defaults and labels
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/PhonesFieldDisplay.tsx	Retrieves click action setting and passes it to display component with copy-to-clipboard handler
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/LinksFieldDisplay.tsx	Retrieves click action setting and implements copy-to-clipboard handler for links
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/EmailsFieldDisplay.tsx	Retrieves click action setting and implements copy-to-clipboard handler for emails

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-02T17:01:14Z

packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx

    event: React.MouseEvent<HTMLElement>,
  ) => {
-    onPhoneNumberClick?.(number, event);
+    if (clickAction === FieldClickAction.COPY || !isDefined(clickAction)) {


The condition || !isDefined(clickAction) is unnecessary because clickAction always has a default value (FieldClickAction.COPY) set in the parent component PhonesFieldDisplay. This check can be simplified to just if (clickAction === FieldClickAction.COPY) for consistency with the LinksDisplay and EmailsDisplay components.

Suggested change

if (clickAction === FieldClickAction.COPY || !isDefined(clickAction)) {

if (clickAction === FieldClickAction.COPY) {

MAKES SENSE, DONE

Copilot · 2025-12-02T17:01:14Z

packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx

  }, [value]);

+  const handleClick = (url: string, event: React.MouseEvent<HTMLElement>) => {
+    if (clickAction === FieldClickAction.COPY && isDefined(onLinkClick)) {


The condition && isDefined(onLinkClick) is unnecessary because when clickAction === FieldClickAction.COPY, the parent component (LinksFieldDisplay) always provides the onLinkClick callback. This check can be simplified to just if (clickAction === FieldClickAction.COPY) for cleaner code.

Suggested change

if (clickAction === FieldClickAction.COPY && isDefined(onLinkClick)) {

if (clickAction === FieldClickAction.COPY) {

Copilot · 2025-12-02T17:01:15Z

packages/twenty-front/src/modules/ui/field/display/components/EmailsDisplay.tsx

  );

+  const handleClick = (email: string, event: React.MouseEvent<HTMLElement>) => {
+    if (clickAction === FieldClickAction.COPY && isDefined(onEmailClick)) {


The condition && isDefined(onEmailClick) is unnecessary because when clickAction === FieldClickAction.COPY, the parent component (EmailsFieldDisplay) always provides the onEmailClick callback. This check can be simplified to just if (clickAction === FieldClickAction.COPY) for cleaner code.

Suggested change

if (clickAction === FieldClickAction.COPY && isDefined(onEmailClick)) {

if (clickAction === FieldClickAction.COPY) {

github-actions · 2025-12-02T17:09:31Z

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:33378

This environment will automatically shut down when the PR is closed or after 5 hours.

…d links data type Issue: twentyhq#15797

abk404 · 2025-12-04T07:28:56Z

@FelixMalfait @Bonapara Can I get a review on this one ?

Copilot AI review requested due to automatic review settings December 2, 2025 16:56

Copilot started reviewing on behalf of abk404 December 2, 2025 16:57 View session

Copilot finished reviewing on behalf of abk404 December 2, 2025 16:59

greptile-apps bot reviewed Dec 2, 2025

View reviewed changes

abk404 changed the title ~~feat: add feature to customize on click behaviour for phone, email and links data type~~ feat: add feature to customize onClick behaviour for phone, email and links data type Dec 2, 2025

Copilot AI reviewed Dec 2, 2025

View reviewed changes

abk404 force-pushed the click_behaviour_feat branch 2 times, most recently from fe04f58 to 0d32241 Compare December 2, 2025 17:17

feat: add feature to customize on click behaviour for phone, email an…

bc8d4fd

…d links data type Issue: twentyhq#15797

abk404 force-pushed the click_behaviour_feat branch from 0d32241 to bc8d4fd Compare December 2, 2025 17:41

abk404 mentioned this pull request Dec 2, 2025

Introduce a setting in Phone + URL + Email field to define the behavior upon click #15797

Open

FelixMalfait added the -PR: awaiting review label Dec 3, 2025

	if (clickAction === FieldClickAction.COPY \|\| !isDefined(clickAction)) {
	if (clickAction === FieldClickAction.COPY) {

feat: add feature to customize onClick behaviour for phone, email and links data type #16265

Are you sure you want to change the base?

feat: add feature to customize onClick behaviour for phone, email and links data type #16265

Uh oh!

Conversation

abk404 commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Welcome!

Uh oh!

greptile-apps bot commented Dec 2, 2025

Greptile Overview

Greptile Summary

Confidence Score: 4/5

Important Files Changed

Sequence Diagram

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

abk404 Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

abk404 Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

abk404 Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

abk404 commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

abk404 commented Dec 2, 2025 •

edited

Loading

github-actions bot commented Dec 2, 2025 •

edited

Loading

github-actions bot commented Dec 2, 2025 •

edited

Loading

abk404 commented Dec 4, 2025 •

edited

Loading