feat(automations): add import button to empty state

[jabloink]

Summary by CodeRabbit

• New Features

  • Added import functionality to automations, allowing users to import existing workflows directly from the automations overview

• UI/UX Improvements

  • Restructured the empty automations interface to display both "Add your first rule" and "Import" buttons together in a compact horizontal layout, providing immediate access to workflow creation and import options

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The WorkflowsOverview component's empty state UI has been updated to display two action buttons instead of one. When no automations exist, users now see both an "Add your first rule" button and a new "Import" button arranged horizontally, with the Import button triggering an import dialog.

Changes

Cohort / File(s)	Summary
Empty State UI Enhancement web/src/components/instances/preferences/WorkflowsOverview.tsx	Replaced single-button layout with a two-button group in the empty automations state. Added new "Import" button alongside "Add your first rule" button in a horizontal flex container; Import button opens dialog via openImportDialog(instance.id) and uses Upload icon.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A button once stood all alone,
Now paired with a friend, import's known!
Two paths now gleam, both bright and grand,
Upload or create—the choice is at hand! 📤✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding an import button to the empty automations state in the WorkflowsOverview component.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b55881c and c02235c.

📒 Files selected for processing (1)

• web/src/components/instances/preferences/WorkflowsOverview.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

web/src/components/instances/preferences/WorkflowsOverview.tsx (1)

web/src/components/ui/button.tsx (1)

• Button (64-64)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Run tests

🔇 Additional comments (1)

web/src/components/instances/preferences/WorkflowsOverview.tsx (1)

687-704: LGTM! Consistent UX improvement.

The addition of the Import button to the empty state is well-implemented and follows the existing pattern from the non-empty state (lines 748-766). This provides a consistent user experience by offering both creation and import options regardless of whether workflows already exist.

The implementation is clean:

• Proper button styling and sizing match the existing pattern
• Icons are appropriate (Plus for create, Upload for import)
• Event handlers are correctly wired to existing functions
• Horizontal layout with flex gap-2 provides good spacing

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}