Make stream zoomable

[wintonzheng]

Important

Add ZoomableImage component for image zooming in TaskActions and WorkflowRun, and introduce DeleteWorkflowButton for workflow deletion.

• Components:
  • Add ZoomableImage component in ZoomableImage.tsx for image zooming on click.
  • Add DeleteWorkflowButton component in DeleteWorkflowButton.tsx for deleting workflows.
  • Replace <img> with ZoomableImage in TaskActions and WorkflowRun.
• Behavior:
  • Clicking images in TaskActions and WorkflowRun opens a zoomable modal.
  • Modal closes with escape key or close button.

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

[ellipsis-dev]

❌ Changes requested. Incremental review on be7e35b in 21 seconds

More details

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

Workflow ID: wflow_QdXoeIjBsvNtbCKb

---

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]

deleteWorkflowMutation.isPending should be deleteWorkflowMutation.isLoading to correctly reflect the loading state of the mutation.

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to be7e35b in 26 seconds

More details

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

1. skyvern-frontend/src/routes/workflows/editor/DeleteWorkflowButton.tsx:81

• Draft comment:
  Use deleteWorkflowMutation.isLoading instead of isPending to check if the mutation is in progress.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The comment is about a specific change in the code, which is the use of deleteWorkflowMutation.isPending. The suggestion to use isLoading instead could be valid if isLoading is the correct property to check for mutation progress in the useMutation hook from @tanstack/react-query. I need to verify if isPending is a valid property or if isLoading is the correct one to use.
  I might be missing the context of whether isPending is a valid property in the useMutation hook. If isPending is not a valid property, the comment is correct. However, if isPending is valid, the comment is unnecessary.
  I should verify the properties available in the useMutation hook from @tanstack/react-query to ensure the comment's accuracy.
  Check if isPending is a valid property in the useMutation hook. If not, the comment is correct and should be kept.

Workflow ID: wflow_B1fxDZ1ERA6Pkauc

---

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