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