fix: remove pointer cursor and hover effects from readonly form field… (#12017)

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>

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)