improve: Add section headers and empty states to the Triggers settings view#5329
improve: Add section headers and empty states to the Triggers settings view#5329ashrafchowdury wants to merge 1 commit into
Conversation
…better user guidance
dosubot
Bot
added
the
size:L
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note: I find myself lost in this view many times due to not having any description. It's possible that others may also face this |
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe trigger settings UI now uses shared section headers and empty states, displays bound workflow names for schedules, tightens action columns, and adds guidance explaining event-based and scheduled workflow execution. ChangesTrigger settings UI
Estimated code review effort: 3 (Moderate) | ~20 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 3e177cc5-679b-4b41-86b9-decdb5278ca8
📒 Files selected for processing (5)
web/oss/src/components/pages/settings/Triggers/Triggers.tsxweb/oss/src/components/pages/settings/Triggers/components/GatewaySchedulesSection.tsxweb/oss/src/components/pages/settings/Triggers/components/GatewaySubscriptionsSection.tsxweb/oss/src/components/pages/settings/Triggers/components/GatewayTriggersSection.tsxweb/oss/src/components/pages/settings/Triggers/components/TriggerSection.tsx
| <Tooltip | ||
| title={ | ||
| connections.length === 0 ? "Connect an app first" : undefined | ||
| } | ||
| > | ||
| <Button | ||
| type="primary" | ||
| size="small" | ||
| icon={<Plus size={14} />} | ||
| onClick={handleCreate} | ||
| disabled={connections.length === 0} | ||
| > | ||
| Subscribe | ||
| </Button> | ||
| </Tooltip> | ||
| </> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Ensure the tooltip appears when the button is disabled.
Because disabled HTML elements do not trigger mouse events, the Tooltip will fail to show when connections.length === 0. To ensure users see the "Connect an app first" helper text, wrap the button in an inline element and explicitly remove pointer events from the button so the wrapper catches the hover.
💡 Proposed fix
<Tooltip
title={
connections.length === 0 ? "Connect an app first" : undefined
}
>
- <Button
- type="primary"
- size="small"
- icon={<Plus size={14} />}
- onClick={handleCreate}
- disabled={connections.length === 0}
- >
- Subscribe
- </Button>
+ <span className={connections.length === 0 ? "inline-block cursor-not-allowed" : "inline-block"}>
+ <Button
+ type="primary"
+ size="small"
+ icon={<Plus size={14} />}
+ onClick={handleCreate}
+ disabled={connections.length === 0}
+ style={connections.length === 0 ? { pointerEvents: "none" } : undefined}
+ >
+ Subscribe
+ </Button>
+ </span>
</Tooltip>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Tooltip | |
| title={ | |
| connections.length === 0 ? "Connect an app first" : undefined | |
| } | |
| > | |
| <Button | |
| type="primary" | |
| size="small" | |
| icon={<Plus size={14} />} | |
| onClick={handleCreate} | |
| disabled={connections.length === 0} | |
| > | |
| Subscribe | |
| </Button> | |
| </Tooltip> | |
| </> | |
| <Tooltip | |
| title={ | |
| connections.length === 0 ? "Connect an app first" : undefined | |
| } | |
| > | |
| <span | |
| className={ | |
| connections.length === 0 | |
| ? "inline-block cursor-not-allowed" | |
| : "inline-block" | |
| } | |
| > | |
| <Button | |
| type="primary" | |
| size="small" | |
| icon={<Plus size={14} />} | |
| onClick={handleCreate} | |
| disabled={connections.length === 0} | |
| style={ | |
| connections.length === 0 | |
| ? { pointerEvents: "none" } | |
| : undefined | |
| } | |
| > | |
| Subscribe | |
| </Button> | |
| </span> | |
| </Tooltip> | |
| </> |
Railway Preview Environment
|
|
IF this issue makes sense then we need to update some other tabs in the settings, to make sure we are communicating it well about the feature and what it's |
2 participants
Context
The Triggers settings page stacked three tables (connections, subscriptions, schedules) with nothing but a button above each one. There was no label saying what a table was for, no hint about how the three relate, and an empty table showed only Ant Design's default "No data". A new user landing here couldn't tell that the flow is: connect an app, then run a workflow on its events or on a schedule.
Changes
Each section now has a header (icon, title, one-line description) and a friendly empty state that tells you what to do next. The sections are also renamed to plain language:
A one-line intro at the top of the page ties them together. The header and empty state are shared as
TriggerSectionHeaderandTriggerEmptyStatein a newTriggerSection.tsx, so all three sections render consistently.Tests / notes
pnpm lint-fixinweb.emptyTextrenders a bare<span />while the table is loading, so the placeholder doesn't flash before data arrives.What to QA
Preview
Before
After