From 2773974459a8520c170e004708d8facc907ae04e Mon Sep 17 00:00:00 2001 From: Thomas Trompette Date: Tue, 19 Nov 2024 18:15:32 +0100 Subject: [PATCH] Add disable state to variable tag component (#8586) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - add hover on variables - add disable state with readonly props Disabled Capture d’écran 2024-11-19 à 16 12 10 Normal Capture d’écran 2024-11-19 à 16 12 30 --- .../WorkflowEditActionFormSendEmail.tsx | 4 + ...rkflowEditActionFormServerlessFunction.tsx | 1 + .../components/SearchVariablesDropdown.tsx | 23 +++++- .../components/VariableTagInput.tsx | 75 ++++++++++++------- 4 files changed, 75 insertions(+), 28 deletions(-) diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormSendEmail.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormSendEmail.tsx index a59a22590..72f3f2cfd 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormSendEmail.tsx +++ b/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} /> )} /> diff --git a/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx b/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx index 1e2467ed2..ea6ef3281 100644 --- a/packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx +++ b/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} /> ); } diff --git a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx index 4ef0fbfe5..7445d7934 100644 --- a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx +++ b/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 ( + + + + ); + } + return ( diff --git a/packages/twenty-front/src/modules/workflow/search-variables/components/VariableTagInput.tsx b/packages/twenty-front/src/modules/workflow/search-variables/components/VariableTagInput.tsx index fe16f975b..055f5e9b6 100644 --- a/packages/twenty-front/src/modules/workflow/search-variables/components/VariableTagInput.tsx +++ b/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}; + + ${({ theme, readonly }) => + !readonly && + ` + :hover { + background-color: ${theme.background.transparent.light}; + }`} + + ${({ theme, multiline }) => + multiline + ? ` + position: absolute; + top: ${theme.spacing(0)}; + 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 StyledSearchVariablesDropdownInsideContainer = styled.div` - display: flex; - justify-content: center; - align-items: center; - position: absolute; - top: ${({ theme }) => theme.spacing(0.5)}; - right: ${({ theme }) => theme.spacing(0.5)}; -`; - -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 ( {label && {label}} - - + + - - + +