Add the new workflow not executed node type
#10030
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR introduces a new 'not-executed' node variant to the workflow diagram system, along with comprehensive styling improvements for better visual feedback across different node states.
- Added new 'not-executed' variant in
/packages/twenty-front/src/modules/workflow/workflow-diagram/types/WorkflowDiagramNodeVariant.tswith corresponding light/dark theme styling - Implemented gradient background transitions on hover in
/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx - Enhanced node state styling with adaptive colors (blue1-blue4) for selected states
- Refactored
/packages/twenty-front/src/modules/workflow/workflow-diagram/components/__stories__/WorkflowDiagramStepNodeEditableContent.stories.tsxto use dimension-based catalog approach - Added smooth background transitions with
theme.animation.duration.fast
5 file(s) reviewed, 3 comment(s)
Edit PR Review Bot Settings | Greptile
| ${({ nodeVariant, theme }) => { | ||
| switch (nodeVariant) { | ||
| case 'empty': | ||
| case 'default': { | ||
| case 'default': | ||
| case 'not-executed': | ||
| return css` | ||
| background-color: ${theme.color.blue}; | ||
| color: ${theme.font.color.inverted}; | ||
| `; | ||
| } | ||
| } | ||
| }} |
There was a problem hiding this comment.
logic: Missing return statement for success and failure cases in this switch. Could lead to inconsistent styling when those variants are selected.
| const Wrapper = (_props: WrapperProps) => { | ||
| return <div></div>; | ||
| }; |
There was a problem hiding this comment.
logic: Empty wrapper component doesn't render props. This could cause issues with storybook's prop table generation.
| const Wrapper = (_props: WrapperProps) => { | |
| return <div></div>; | |
| }; | |
| const Wrapper = (props: WrapperProps) => { | |
| return <WorkflowDiagramStepNodeEditableContent {...props} />; | |
| }; |
| (Story, { args }) => { | ||
| return ( | ||
| <div | ||
| className={`selectable ${args.state === 'selected' ? 'selected' : args.state === 'hover' ? 'workflow-node-container hover' : ''}`} |
There was a problem hiding this comment.
style: Ternary expression could be simplified using a template literal and conditional classes
Devessier
changed the title
not executed node type and fix some stylesnot executed node type
| }, | ||
| parameters: { | ||
| msw: graphqlMocks, | ||
| pseudo: { hover: ['.hover'] }, |
There was a problem hiding this comment.
I had a hard time making the pseudo states plugin work because I didn't want my underlying components to expose a className property. I created a story decorator that creates a container with a hover class, which is used by the plugin to locate the element to hover. I also render a workflow-node-container class as the :hover pseudo-selector is linked to this class in the styles.
There was a problem hiding this comment.
It seems a bit hacky but it works
There was a problem hiding this comment.
I couldn't find a better option 😅
| }, | ||
| parameters: { | ||
| msw: graphqlMocks, | ||
| pseudo: { hover: ['.hover'] }, |
There was a problem hiding this comment.
It seems a bit hacky but it works
|
Thanks @Devessier for your contribution! |
- Added the new workflow `not executed` node type - Fixed minor style issues - Created one big catalog for all node variants 
not executednode type