From afa6f84408cc466cde31ff0e781dcba3b553f496 Mon Sep 17 00:00:00 2001
From: Ajay A Adsule <103304466+AjayAdsule@users.noreply.github.com>
Date: Wed, 11 Jun 2025 20:46:06 +0530
Subject: [PATCH] =?UTF-8?q?fix:=20remove=20pointer=20cursor=20and=20hover?=
 =?UTF-8?q?=20effects=20from=20readonly=20form=20field=E2=80=A6=20(#12017)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Readonly form fields in Workflow Versions were previously showing a
pointer cursor and hover background

This update introduces a `isReadOnly` prop on the StyledFieldContainer,
which is derived from the field's `readonly` state via
`actionOptions.readonly`.

When `isReadOnly` is true:
- The cursor is set to `default` instead of `pointer`.

This ensures a more accurate and user-friendly UI by visually indicating
that the field is non-interactive.


https://github.com/user-attachments/assets/90e5c109-f2a6-4e79-b72d-e2fa6038bf93



#12004

---------

Co-authored-by: Baptiste Devessier <baptiste@devessier.fr>
---
 .../WorkflowEditActionFormBuilder.tsx         | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
index f0892de64..a1d4e2d72 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
@@ -14,7 +14,7 @@ import { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow-
 import { useActionHeaderTypeOrThrow } from '@/workflow/workflow-steps/workflow-actions/hooks/useActionHeaderTypeOrThrow';
 import { useActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-actions/hooks/useActionIconColorOrThrow';
 import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon';
-import { useTheme } from '@emotion/react';
+import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { OnDragEndResponder } from '@hello-pangea/dnd';
 import { useLingui } from '@lingui/react/macro';
@@ -88,7 +88,9 @@ const StyledOpenedSettingsContainer = styled.div`
   grid-area: settings;
 `;
 
-const StyledFieldContainer = styled.div`
+const StyledFieldContainer = styled.div<{
+  readonly?: boolean;
+}>`
   align-items: center;
   background: transparent;
   border: none;
@@ -97,12 +99,16 @@ const StyledFieldContainer = styled.div`
   padding-inline: ${({ theme }) => theme.spacing(2)};
   width: 100%;
 
-  cursor: pointer;
+  cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')};
 
-  &:hover,
-  &[data-open='true'] {
-    background-color: ${({ theme }) => theme.background.transparent.lighter};
-  }
+  ${({ readonly, theme }) =>
+    !readonly &&
+    css`
+      &:hover,
+      &[data-open='true'] {
+        background-color: ${theme.background.transparent.lighter};
+      }
+    `}
 `;
 
 const StyledPlaceholder = styled.div`
@@ -285,7 +291,9 @@ export const WorkflowEditActionFormBuilder = ({
                                 handleFieldClick(field.id);
                               }}
                             >
-                              <StyledFieldContainer>
+                              <StyledFieldContainer
+                                readonly={actionOptions.readonly}
+                              >
                                 <StyledPlaceholder>
                                   {isDefined(field.placeholder) &&
                                   isNonEmptyString(field.placeholder)