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}
           />
         );
       }

packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx

@@ -15,21 +15,26 @@ import { IconVariablePlus } from 'twenty-ui';
 
 const StyledDropdownVariableButtonContainer = styled(
   StyledDropdownButtonContainer,
-)<{ transparentBackground?: boolean }>`
+)<{ transparentBackground?: boolean; disabled?: boolean }>`
   background-color: ${({ theme, transparentBackground }) =>
     transparentBackground
       ? 'transparent'
       : theme.background.transparent.lighter};
   color: ${({ theme }) => theme.font.color.tertiary};
   padding: ${({ theme }) => theme.spacing(2)};
+  :hover {
+    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  }
 `;
 
 const SearchVariablesDropdown = ({
   inputId,
   editor,
+  disabled,
 }: {
   inputId: string;
   editor: Editor;
+  disabled?: boolean;
 }) => {
   const theme = useTheme();
 
@@ -60,6 +65,21 @@ const SearchVariablesDropdown = ({
     setSelectedStep(undefined);
   };
 
+  if (disabled === true) {
+    return (
+      <StyledDropdownVariableButtonContainer
+        isUnfolded={isDropdownOpen}
+        disabled={disabled}
+        transparentBackground
+      >
+        <IconVariablePlus
+          size={theme.icon.size.sm}
+          color={theme.font.color.light}
+        />
+      </StyledDropdownVariableButtonContainer>
+    );
+  }
+
   return (
     <Dropdown
       dropdownMenuWidth={320}
@@ -70,6 +90,7 @@ const SearchVariablesDropdown = ({
       clickableComponent={
         <StyledDropdownVariableButtonContainer
           isUnfolded={isDropdownOpen}
+          disabled={disabled}
           transparentBackground
         >
           <IconVariablePlus size={theme.icon.size.sm} />

packages/twenty-front/src/modules/workflow/search-variables/components/VariableTagInput.tsx

@@ -26,7 +26,9 @@ const StyledLabel = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(1)};
 `;
 
-const StyledInputContainer = styled.div<{ multiline: boolean }>`
+const StyledInputContainer = styled.div<{
+  multiline?: boolean;
+}>`
   display: flex;
   flex-direction: row;
   position: relative;
@@ -37,26 +39,39 @@ const StyledInputContainer = styled.div<{ multiline: boolean }>`
     multiline ? `${5 * LINE_HEIGHT}px` : 'auto'};
 `;
 
-const StyledSearchVariablesDropdownOutsideContainer = styled.div`
+const StyledSearchVariablesDropdownContainer = styled.div<{
+  multiline?: boolean;
+  readonly?: boolean;
+}>`
+  align-items: center;
   display: flex;
   justify-content: center;
-  align-items: center;
-  background-color: ${({ theme }) => theme.background.transparent.lighter};
-  border-top-right-radius: ${({ theme }) => theme.border.radius.sm};
-  border-bottom-right-radius: ${({ theme }) => theme.border.radius.sm};
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-`;
 
-const StyledSearchVariablesDropdownInsideContainer = styled.div`
+  ${({ theme, readonly }) =>
-  display: flex;
+    !readonly &&
-  justify-content: center;
+    `
-  align-items: center;
+      :hover {
+        background-color: ${theme.background.transparent.light};
+      }`}
+
+  ${({ theme, multiline }) =>
+    multiline
+      ? `
         position: absolute;
-  top: ${({ theme }) => theme.spacing(0.5)};
+        top: ${theme.spacing(0)};
-  right: ${({ theme }) => theme.spacing(0.5)};
+        right: ${theme.spacing(0)};
+        padding: ${theme.spacing(0.5)} ${theme.spacing(0)};
+        border-radius: ${theme.border.radius.sm};
+      `
+      : `
+        background-color: ${theme.background.transparent.lighter};
+        border-top-right-radius: ${theme.border.radius.sm};
+        border-bottom-right-radius: ${theme.border.radius.sm};
+        border: 1px solid ${theme.border.color.medium};
+      `}
 `;
 
-const StyledEditor = styled.div<{ multiline: boolean }>`
+const StyledEditor = styled.div<{ multiline?: boolean; readonly?: boolean }>`
   display: flex;
   width: 100%;
   border: 1px solid ${({ theme }) => theme.border.color.medium};
@@ -82,7 +97,8 @@ const StyledEditor = styled.div<{ multiline: boolean }>`
   .tiptap {
     display: flex;
     height: 100%;
-    color: ${({ theme }) => theme.font.color.primary};
+    color: ${({ theme, readonly }) =>
+      readonly ? theme.font.color.light : theme.font.color.primary};
     font-family: ${({ theme }) => theme.font.family};
     font-weight: ${({ theme }) => theme.font.weight.regular};
     border: none !important;
@@ -122,6 +138,7 @@ interface VariableTagInputProps {
   placeholder?: string;
   multiline?: boolean;
   onChange?: (content: string) => void;
+  readonly?: boolean;
 }
 
 export const VariableTagInput = ({
@@ -131,11 +148,8 @@ export const VariableTagInput = ({
   placeholder,
   multiline,
   onChange,
+  readonly,
 }: VariableTagInputProps) => {
-  const StyledSearchVariablesDropdownContainer = multiline
-    ? StyledSearchVariablesDropdownInsideContainer
-    : StyledSearchVariablesDropdownOutsideContainer;
-
   const deboucedOnUpdate = useDebouncedCallback((editor) => {
     const jsonContent = editor.getJSON();
     const parsedContent = parseEditorContent(jsonContent);
@@ -159,7 +173,7 @@ export const VariableTagInput = ({
           ]
         : []),
     ],
-    editable: true,
+    editable: !readonly,
     onCreate: ({ editor }) => {
       if (isDefined(value)) {
         initializeEditorContent(editor, value);
@@ -200,12 +214,19 @@ export const VariableTagInput = ({
   return (
     <StyledContainer>
       {label && <StyledLabel>{label}</StyledLabel>}
-      <StyledInputContainer multiline={!!multiline}>
+      <StyledInputContainer multiline={multiline}>
-        <StyledEditor multiline={!!multiline}>
+        <StyledEditor multiline={multiline} readonly={readonly}>
           <EditorContent className="editor-content" editor={editor} />
         </StyledEditor>
-        <StyledSearchVariablesDropdownContainer>
+        <StyledSearchVariablesDropdownContainer
-          <SearchVariablesDropdown inputId={inputId} editor={editor} />
+          multiline={multiline}
+          readonly={readonly}
+        >
+          <SearchVariablesDropdown
+            inputId={inputId}
+            editor={editor}
+            disabled={readonly}
+          />
         </StyledSearchVariablesDropdownContainer>
       </StyledInputContainer>
     </StyledContainer>