Fix readonly in some steps (#10121)

- readonly in titles
- readonly in code step
- update a few icons
- update event label

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/__tests__/getWorkflowVersionDiagram.test.ts

@@ -74,7 +74,7 @@ describe('getWorkflowVersionDiagram', () => {
   "nodes": [
     {
       "data": {
-        "icon": "IconPlus",
+        "icon": "IconPlaylistAdd",
         "isLeafNode": false,
         "name": "Record is created",
         "nodeType": "trigger",
@@ -143,7 +143,7 @@ describe('getWorkflowVersionDiagram', () => {
   "nodes": [
     {
       "data": {
-        "icon": "IconPlus",
+        "icon": "IconPlaylistAdd",
         "isLeafNode": false,
         "name": "Company created",
         "nodeType": "trigger",

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormSendEmail.tsx

@@ -188,6 +188,7 @@ export const WorkflowEditActionFormSendEmail = ({
           iconColor={theme.color.blue}
           initialTitle={headerTitle}
           headerType="Email"
+          disabled={actionOptions.readonly}
         />
         <WorkflowStepBody>
           <Select

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx

@@ -217,6 +217,10 @@ export const WorkflowEditActionFormServerlessFunction = ({
   };
 
   const handleTestInputChange = async (value: any, path: string[]) => {
+    if (actionOptions.readonly === true) {
+      return;
+    }
+
     const updatedTestFunctionInput = setNestedValue(
       serverlessFunctionTestData.input,
       path,
@@ -229,6 +233,10 @@ export const WorkflowEditActionFormServerlessFunction = ({
   };
 
   const handleRunFunction = async () => {
+    if (actionOptions.readonly === true) {
+      return;
+    }
+
     if (!isTesting) {
       await testServerlessFunction(shouldBuildServerlessFunction);
       setShouldBuildServerlessFunction(false);
@@ -302,6 +310,7 @@ export const WorkflowEditActionFormServerlessFunction = ({
           iconColor={theme.color.orange}
           initialTitle={headerTitle}
           headerType="Code"
+          disabled={actionOptions.readonly}
         />
         <WorkflowStepBody>
           {activeTabId === 'code' && (
@@ -333,6 +342,7 @@ export const WorkflowEditActionFormServerlessFunction = ({
               <WorkflowEditActionFormServerlessFunctionFields
                 functionInput={serverlessFunctionTestData.input}
                 onInputChange={handleTestInputChange}
+                readonly={actionOptions.readonly}
               />
               <StyledCodeEditorContainer>
                 <InputLabel>Result</InputLabel>
@@ -351,7 +361,7 @@ export const WorkflowEditActionFormServerlessFunction = ({
               <CmdEnterActionButton
                 title="Test"
                 onClick={handleRunFunction}
-                disabled={isTesting || isBuilding}
+                disabled={isTesting || isBuilding || actionOptions.readonly}
               />,
             ]}
           />

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/RecordActions.ts

@@ -13,7 +13,7 @@ export const RECORD_ACTIONS: Array<{
   {
     label: 'Update Record',
     type: 'UPDATE_RECORD',
-    icon: 'IconRefreshDot',
+    icon: 'IconReload',
   },
   {
     label: 'Delete Record',

packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerCronForm.tsx

@@ -1,19 +1,19 @@
-import { WorkflowCronTrigger } from '@/workflow/types/Workflow';
-import { useIcons } from 'twenty-ui';
-import { useTheme } from '@emotion/react';
+import { FormNumberFieldInput } from '@/object-record/record-field/form-types/components/FormNumberFieldInput';
+import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
 import { Select } from '@/ui/input/components/Select';
-import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader';
+import { WorkflowCronTrigger } from '@/workflow/types/Workflow';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
-import { getTriggerIcon } from '@/workflow/workflow-trigger/utils/getTriggerIcon';
-import { isDefined } from 'twenty-shared';
-import { getTriggerDefaultLabel } from '@/workflow/workflow-trigger/utils/getTriggerLabel';
+import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader';
 import { CRON_TRIGGER_INTERVAL_OPTIONS } from '@/workflow/workflow-trigger/constants/CronTriggerIntervalOptions';
+import { getCronTriggerDefaultSettings } from '@/workflow/workflow-trigger/utils/getCronTriggerDefaultSettings';
+import { getTriggerIcon } from '@/workflow/workflow-trigger/utils/getTriggerIcon';
+import { getTriggerDefaultLabel } from '@/workflow/workflow-trigger/utils/getTriggerLabel';
+import { useTheme } from '@emotion/react';
+import { isNumber } from '@sniptt/guards';
 import cron from 'cron-validate';
 import { useState } from 'react';
-import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
-import { FormNumberFieldInput } from '@/object-record/record-field/form-types/components/FormNumberFieldInput';
-import { isNumber } from '@sniptt/guards';
-import { getCronTriggerDefaultSettings } from '@/workflow/workflow-trigger/utils/getCronTriggerDefaultSettings';
+import { isDefined } from 'twenty-shared';
+import { useIcons } from 'twenty-ui';
 
 type WorkflowEditTriggerCronFormProps = {
   trigger: WorkflowCronTrigger;
@@ -79,6 +79,7 @@ export const WorkflowEditTriggerCronForm = ({
         iconColor={theme.font.color.tertiary}
         initialTitle={headerTitle}
         headerType={headerType}
+        disabled={triggerOptions.readonly}
       />
       <WorkflowStepBody>
         <Select

packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx

@@ -75,6 +75,7 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
         iconColor={theme.font.color.tertiary}
         initialTitle={headerTitle}
         headerType={headerType}
+        disabled={triggerOptions.readonly}
       />
       <WorkflowStepBody>
         <Select

packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm.tsx

@@ -70,6 +70,7 @@ export const WorkflowEditTriggerManualForm = ({
         iconColor={theme.font.color.tertiary}
         initialTitle={headerTitle}
         headerType="Trigger · Manual"
+        disabled={triggerOptions.readonly}
       />
       <WorkflowStepBody>
         <Select

packages/twenty-front/src/modules/workflow/workflow-trigger/constants/DatabaseTriggerTypes.ts

@@ -10,7 +10,7 @@ export const DATABASE_TRIGGER_TYPES: Array<{
   {
     defaultLabel: DatabaseTriggerDefaultLabel.RECORD_IS_CREATED,
     type: 'DATABASE_EVENT',
-    icon: 'IconPlus',
+    icon: 'IconPlaylistAdd',
     event: 'created',
   },
   {

packages/twenty-server/src/modules/workflow/workflow-builder/utils/generate-fake-object-record-event.ts

@@ -4,6 +4,7 @@ import { DatabaseEventAction } from 'src/engine/api/graphql/graphql-query-runner
 import { ObjectMetadataEntity } from 'src/engine/metadata-modules/object-metadata/object-metadata.entity';
 import { BaseOutputSchema } from 'src/modules/workflow/workflow-builder/types/output-schema.type';
 import { generateFakeObjectRecord } from 'src/modules/workflow/workflow-builder/utils/generate-fake-object-record';
+import { camelToTitleCase } from 'src/utils/camel-to-title-case';
 
 export const generateFakeObjectRecordEvent = (
   objectMetadataEntity: ObjectMetadataEntity,
@@ -17,7 +18,7 @@ export const generateFakeObjectRecordEvent = (
   const formattedObjectMetadataEntity = Object.entries(
     objectMetadataEntity,
   ).reduce((acc: BaseOutputSchema, [key, value]) => {
-    acc[key] = { isLeaf: true, value };
+    acc[key] = { isLeaf: true, value, label: camelToTitleCase(key) };
 
     return acc;
   }, {});