Editable workflows

[ykeremy]

🚀	This description was created by Ellipsis for commit 2c67ac0

Summary:

This PR introduces editable workflows in the Skyvern frontend, enhancing UI components and state management.

Key points:

• Introduces editable workflows in the Skyvern frontend.
• Adds GarbageIcon, SaveIcon in src/components/icons.
• Implements Popover in src/components/ui/popover.tsx.
• Updates FlowRenderer for node and edge management.
• Implements WorkflowEditor for workflow fetching and saving logic.
• Adds WorkflowHeader with save and parameter toggle functionality.
• Creates WorkflowParametersStateContext for parameter state management.
• Defines REACT_FLOW_EDGE_Z_INDEX for edge layering.
• Develops EdgeWithAddButton to add nodes between edges.
• Updates node components for editability and data changes in src/routes/workflows/editor/nodes.
• Adds WorkflowNodeLibraryPanel for node selection.
• Implements WorkflowParameterAddPanel and WorkflowParameterEditPanel.
• Utilizes zustand for state management in src/store/WorkflowPanelStore.ts.
• Enhances WorkflowParametersPanel for adding/editing workflow and credential parameters.
• Adds DropdownMenu for parameter type selection.
• Enhances state management with operationPanelState.

---

Generated with ❤️ by ellipsis.dev

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to 1dd88c9 in 57 seconds

More details

• Looked at 3521 lines of code in 43 files
• Skipped 0 files when reviewing.
• Skipped posting 7 drafted comments based on config settings.

1. skyvern-frontend/src/components/icons/GarbageIcon.tsx:5

• Draft comment:
  Consider adding a default value for className to avoid potential issues if the component is used without specifying it.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The GarbageIcon component is missing a defaultProps definition for className. This can lead to potential issues if the component is used without specifying a className.

2. skyvern-frontend/src/components/icons/SaveIcon.tsx:1

• Draft comment:
  Consider allowing a className prop to be passed to the SaveIcon component for more flexible styling.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The SaveIcon component does not accept any props, which limits its flexibility. It would be beneficial to allow passing a className prop for styling purposes.

3. skyvern-frontend/src/components/ui/popover.tsx:12

• Draft comment:
  Ensure that the ref is forwarded to the correct DOM element in PopoverContent.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The PopoverContent component uses React.forwardRef but does not handle the ref properly. It should ensure that the ref is forwarded to the correct DOM element.

4. skyvern-frontend/src/routes/workflows/Workflows.tsx:96

• Draft comment:
  Consider adding error handling to createNewWorkflowMutation to provide feedback to the user in case of a failure.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The createNewWorkflowMutation function in the Workflows component does not handle errors. It's important to handle errors to provide feedback to the user.

5. skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx:125

• Draft comment:
  Consider adding error handling for unrecognized nodeType values in the addNode function.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The addNode function in FlowRenderer does not handle the case where nodeType is not recognized. This can lead to unexpected behavior if an invalid nodeType is passed.

6. skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx:18

• Draft comment:
  Ensure that workflowPermanentId is defined before using it in the WorkflowEditor component to prevent unexpected behavior.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The WorkflowEditor component does not handle the case where workflowPermanentId is undefined. This can lead to unexpected behavior if the component is used without a valid workflowPermanentId.

7. skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx:20

• Draft comment:
  Ensure that workflowPermanentId is defined before using it in the WorkflowHeader component to prevent unexpected behavior.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The WorkflowHeader component does not handle the case where workflowPermanentId is undefined. This can lead to unexpected behavior if the component is used without a valid workflowPermanentId.

Workflow ID: wflow_ulLmq6sMSZynK5XO

---

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

[ellipsis-dev]

👍 Looks good to me! Incremental review on 1dd88c9 in 1 minute and 5 seconds

More details

• Looked at 3518 lines of code in 43 files
• Skipped 0 files when reviewing.
• Skipped posting 7 drafted comments based on config settings.

1. skyvern-frontend/src/components/icons/GarbageIcon.tsx:2

• Draft comment:
  Consider providing a default value for the className prop to prevent potential errors when the component is used without specifying a className.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The GarbageIcon component is missing a default value for the className prop. This could lead to errors if the component is used without specifying a className.

2. skyvern-frontend/src/components/icons/SaveIcon.tsx:1

• Draft comment:
  The SaveIcon component is implemented correctly. No changes needed.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The SaveIcon component does not have any props, so there are no issues related to props. The component is simple and correctly implemented.

3. skyvern-frontend/src/components/ui/popover.tsx:12

• Draft comment:
  The PopoverContent component is implemented correctly with React.forwardRef. No changes needed.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The PopoverContent component uses React.forwardRef correctly and sets a display name. The implementation is correct and follows best practices.

4. skyvern-frontend/src/routes/workflows/Workflows.tsx:96

• Draft comment:
  The createNewWorkflowMutation function is implemented correctly. No changes needed.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The createNewWorkflowMutation function in the Workflows component correctly handles the creation of a new workflow and navigates to the new workflow's page upon success. The implementation is correct.

5. skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx:97

• Draft comment:
  The FlowRenderer component is implemented correctly. No changes needed.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The FlowRenderer component correctly manages nodes and edges, and the addNode function is implemented correctly. The use of useWorkflowPanelStore is appropriate.

6. skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx:26

• Draft comment:
  The saveWorkflowMutation function is implemented correctly. No changes needed.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The WorkflowEditor component correctly uses the useMutation hook to handle saving workflows. The implementation is correct.

7. skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx:20

• Draft comment:
  The WorkflowHeader component is implemented correctly. No changes needed.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The WorkflowHeader component correctly handles navigation and saving workflows. The implementation is correct.

Workflow ID: wflow_LcF0ueSY3KMPXsjo

---

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

[ellipsis-dev]

👍 Looks good to me! Incremental review on 2c67ac0 in 20 seconds

More details

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

1. skyvern-frontend/package.json:30

• Draft comment:
  The addition of @radix-ui/react-popover is consistent with the PR description and necessary for the new Popover component.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The addition of the @radix-ui/react-popover dependency is consistent with the PR description, which mentions the implementation of a Popover component. This change is appropriate and aligns with the stated goals of the PR.

Workflow ID: wflow_UQIfW9tuD0TURhho

---

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