Add action block

[wintonzheng]

Important

Add ActionNode and ValidationNode to the workflow editor with error handling and node library updates.

• New Features:
  • Add ActionNode and ValidationNode components in ActionNode/ActionNode.tsx and ValidationNode/ValidationNode.tsx.
  • Add ClickIcon component in ClickIcon.tsx for use in ActionNode.
• Workflow Editor:
  • Update FlowRenderer.tsx to handle ActionNode and ValidationNode types.
  • Add error checks for ActionNode and ValidationNode in getWorkflowErrors().
  • Update WorkflowNodeLibraryPanel.tsx to include ActionNode and ValidationNode in the node library.
• Node Types:
  • Define ActionNodeData and ValidationNodeData in ActionNode/types.ts and ValidationNode/types.ts.
  • Update nodes/index.ts to include ActionNode and ValidationNode.
• Miscellaneous:
  • Remove editable property from several node data types in CodeBlockNode/types.ts, DownloadNode/types.ts, etc.
  • Update workflowEditorUtils.ts to support new node types in node creation and conversion functions.
  • Change className for QuestionMarkCircledIcon in HelpTooltip.tsx.

^{This description was created by for 865e10c. It will automatically update as commits are pushed.}

[ellipsis-dev]

👍 Looks good to me! Incremental review on 865e10c in 1 minute and 28 seconds

More details

• Looked at 818 lines of code in 12 files
• Skipped 0 files when reviewing.
• Skipped posting 8 drafted comments based on config settings.

1. skyvern-frontend/src/components/HelpTooltip.tsx:18

• Draft comment:
  Ensure that the className 'size-4' is supported by your CSS framework. If not, consider reverting to 'h-4 w-4' or using a valid class.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The className change from 'h-4 w-4' to 'size-4' might not be supported by the CSS framework being used. This could lead to unexpected styling issues.

2. skyvern-frontend/src/components/icons/ClickIcon.tsx:17

• Draft comment:
  Consider using a CSS class or a prop to set the stroke color instead of hardcoding it to allow for easier theming and maintenance.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The ClickIcon component uses a hardcoded stroke color. This could lead to issues if the color needs to be changed globally or if theming is applied.

3. skyvern-frontend/src/components/ui/tooltip.tsx:16

• Draft comment:
  Good use of TooltipPrimitive.Portal to ensure the tooltip is rendered outside the DOM hierarchy of its trigger.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The addition of TooltipPrimitive.Portal in TooltipContent ensures that the tooltip is rendered outside the DOM hierarchy of its trigger, which is a good practice for accessibility and styling.

4. skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx:479

• Draft comment:
  Consistent error handling for JSON parsing across different node types is a good practice for maintainability.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The error handling for JSON parsing in getWorkflowErrors is consistent across different node types, which is good for maintainability.

5. skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx:46

• Draft comment:
  Consider refactoring repetitive input change handling logic to improve maintainability.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The ActionNode component has a lot of repetitive code for handling input changes. This could be refactored to improve maintainability.

6. skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/types.ts:5

• Draft comment:
  The 'url' field in ActionNodeData is not used in the ActionNode component. Consider removing it if it's not needed or ensure it's used appropriately.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The ActionNodeData type includes a 'url' field, but it is not used in the ActionNode component. This could lead to confusion or errors if the field is expected to be used.

7. skyvern-frontend/src/routes/workflows/editor/nodes/index.ts:39

• Draft comment:
  The addition of ActionNode is consistent with the existing node structure, which is good for maintainability.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The addition of the ActionNode type and component is consistent with the existing node structure, which is good for maintainability.

8. skyvern-frontend/src/routes/workflows/editor/panels/WorkflowNodeLibraryPanel.tsx:81

• Draft comment:
  Consistent use of ClickIcon for ActionNode is good for UI consistency.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The ClickIcon is used consistently across the codebase for the ActionNode, which is good for UI consistency.

Workflow ID: wflow_tStspLVovPcnOVMf

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to 865e10c in 1 minute and 55 seconds

More details

• Looked at 818 lines of code in 12 files
• Skipped 0 files when reviewing.
• Skipped posting 6 drafted comments based on config settings.

1. skyvern-frontend/src/components/HelpTooltip.tsx:18

• Draft comment:
  Ensure that size-4 is a valid CSS class. If not, revert to using h-4 w-4 for consistent sizing.
• Reason this comment was not posted:
  Comment did not seem useful.

2. skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx:481

• Draft comment:
  Ensure all error messages in getWorkflowErrors end with a period for consistency. This applies to messages for ActionNode and ValidationNode.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The getWorkflowErrors function in FlowRenderer.tsx has inconsistent error message punctuation. Some messages end with a period, while others do not. This is evident in the error messages for ActionNode and ValidationNode.

3. skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx:101

• Draft comment:
  Consider moving the editable check inside handleChange to reduce repetition.
• Reason this comment was not posted:
  Confidence changes required: 40%
  In ActionNode.tsx, the handleChange function is used multiple times with a check for editable. This check could be moved inside handleChange to reduce repetition.

4. skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx:129

• Draft comment:
  Consider moving the editable check inside handleChange to reduce repetition. This applies to all instances where handleChange is called.
• Reason this comment was not posted:
  Confidence changes required: 40%
  In ActionNode.tsx, the handleChange function is used multiple times with a check for editable. This check could be moved inside handleChange to reduce repetition. This is applicable in multiple places where handleChange is called.

5. skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx:172

• Draft comment:
  Consider moving the editable check inside handleChange to reduce repetition. This applies to all instances where handleChange is called.
• Reason this comment was not posted:
  Confidence changes required: 40%
  In ActionNode.tsx, the handleChange function is used multiple times with a check for editable. This check could be moved inside handleChange to reduce repetition. This is applicable in multiple places where handleChange is called.

6. skyvern-frontend/src/routes/workflows/editor/nodes/ActionNode/ActionNode.tsx:200

• Draft comment:
  Consider moving the editable check inside handleChange to reduce repetition. This applies to all instances where handleChange is called.
• Reason this comment was not posted:
  Confidence changes required: 40%
  In ActionNode.tsx, the handleChange function is used multiple times with a check for editable. This check could be moved inside handleChange to reduce repetition. This is applicable in multiple places where handleChange is called.

Workflow ID: wflow_fsqCMDDj4LJjrOKa

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

Consider using a CSS class or a prop to set the stroke color for better theme integration and customization.

Suggested change

	stroke="#F8FAFC"
	stroke="currentColor"