Add disable state to variable tag component (#8586)

- add hover on variables
- add disable state with readonly props

Disabled
<img width="284" alt="Capture d’écran 2024-11-19 à 16 12 10"
src="https://github.com/user-attachments/assets/19b21429-8500-4cdc-9914-22a7968beb64">


Normal
<img width="284" alt="Capture d’écran 2024-11-19 à 16 12 30"
src="https://github.com/user-attachments/assets/bc3be00f-944d-488c-bf05-a9f7b9f134c4">

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

@@ -194,6 +194,7 @@ export const WorkflowEditActionFormSendEmail = ({
                 field.onChange(connectedAccountId);
                 handleSave(true);
               }}
+              disabled={actionOptions.readonly}
             />
           )}
         />
@@ -210,6 +211,7 @@ export const WorkflowEditActionFormSendEmail = ({
                 field.onChange(email);
                 handleSave();
               }}
+              readonly={actionOptions.readonly}
             />
           )}
         />
@@ -226,6 +228,7 @@ export const WorkflowEditActionFormSendEmail = ({
                 field.onChange(email);
                 handleSave();
               }}
+              readonly={actionOptions.readonly}
             />
           )}
         />
@@ -243,6 +246,7 @@ export const WorkflowEditActionFormSendEmail = ({
                 handleSave();
               }}
               multiline
+              readonly={actionOptions.readonly}
             />
           )}
         />

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

@@ -190,6 +190,7 @@ export const WorkflowEditActionFormServerlessFunction = ({
             placeholder="Enter value"
             value={`${inputValue || ''}`}
             onChange={(value) => handleInputChange(value, currentPath)}
+            readonly={actionOptions.readonly}
           />
         );
       }