Import workflow

[wintonzheng]

Important

Adds ImportWorkflowButton to import workflows from YAML/JSON files in the Workflows component, with server interaction and UI adjustments.

• Feature Addition:
  • Adds ImportWorkflowButton component in ImportWorkflowButton.tsx to import workflows from YAML or JSON files.
  • Integrates ImportWorkflowButton into Workflows.tsx, allowing users to import workflows directly from the UI.
• Functionality:
  • Uses useMutation from @tanstack/react-query to handle file upload and server interaction.
  • Converts JSON files to YAML before sending to the server.
  • On success, navigates to the workflow edit page; on error, displays a toast notification.
• UI Changes:
  • Adds tooltip to ImportWorkflowButton explaining its functionality.
  • Adjusts layout in Workflows.tsx to accommodate the new import button.

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

[ellipsis-dev]

👍 Looks good to me! Incremental review on cf2fc41 in 16 seconds

More details

• Looked at 169 lines of code in 2 files
• Skipped 0 files when reviewing.
• Skipped posting 3 drafted comments based on config settings.

1. skyvern-frontend/src/routes/workflows/ImportWorkflowButton.tsx:19

• Draft comment:
  Consider renaming isJsonString to isValidJson for clarity. Also, directly return the result of the try-catch block for better readability.

function isValidJson(str: string): boolean {
  try {
    JSON.parse(str);
    return true;
  } catch (e) {
    return false;
  }
}

• Reason this comment was not posted:
  Confidence changes required: 50%
  The function isJsonString is used to check if a string is a valid JSON. However, it can be improved for better readability and performance.

2. skyvern-frontend/src/routes/workflows/ImportWorkflowButton.tsx:84

• Draft comment:
  Use isLoading instead of isPending to check the mutation state.

{createWorkflowFromYamlMutation.isLoading ? (

• Reason this comment was not posted:
  Confidence changes required: 50%
  The createWorkflowFromYamlMutation uses isPending to check the mutation state, but useMutation provides isLoading for this purpose.

3. skyvern-frontend/src/routes/workflows/Workflows.tsx:190

• Draft comment:
  Use isLoading instead of isPending to check the mutation state.

{createNewWorkflowMutation.isLoading ? (

• Reason this comment was not posted:
  Confidence changes required: 50%
  The createNewWorkflowMutation uses isPending to check the mutation state, but useMutation provides isLoading for this purpose.

Workflow ID: wflow_gUf6gA8i5avuc8l4

---

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

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to cf2fc41 in 35 seconds

More details

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

1. skyvern-frontend/src/routes/workflows/ImportWorkflowButton.tsx:19

• Draft comment:
  Consider renaming isJsonString to isValidJson for better readability. Additionally, you can simplify the function by returning the result of the try-catch directly:

function isValidJson(str: string): boolean {
  try {
    JSON.parse(str);
    return true;
  } catch (e) {
    return false;
  }
}

• Reason this comment was not posted:
  Confidence changes required: 50%
  The function isJsonString is used to check if a string is a valid JSON. However, it can be improved for better readability and performance.

2. skyvern-frontend/src/routes/workflows/Workflows.tsx:185

• Draft comment:
  createNewWorkflowMutation.isPending should be createNewWorkflowMutation.isLoading for consistency with useMutation API. This also applies to line 191.
• Reason this comment was not posted:
  Comment was on unchanged code.

Workflow ID: wflow_QCE9BhYFhJ6JFoUc

---

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]

createWorkflowFromYamlMutation.isPending should be createWorkflowFromYamlMutation.isLoading for consistency with useMutation API.