Skip to content

design: Apply New Table Design in Rill Cloud#9181

Open
royendo wants to merge 7 commits intomainfrom
royendo/alert-report-table-migrate
Open

design: Apply New Table Design in Rill Cloud#9181
royendo wants to merge 7 commits intomainfrom
royendo/alert-report-table-migrate

Conversation

@royendo
Copy link
Copy Markdown
Contributor

@royendo royendo commented Apr 3, 2026

  • Extract shared ResourceListRow component in web-common that defines the row layout: icon + title + error tag + subtitle + action menu
  • Alerts and reports composite cells now consume ResourceListRow via props and slots
  • Update resource list styling to flat divider lines (no bordered cards, no rounded corners, no background) for all resource lists
  • Replace ResourceTypeBadge (icon + label) with icon-only in dashboard rows
  • Align subtitle text with title text across dashboards, alerts, and reports
  • Wire up working dropdown actions:
    • Alerts: Edit (navigates to detail page), Delete (calls admin mutation)
    • Reports: Run (triggers ad-hoc run), Edit (navigates to detail page), Delete (calls admin mutation)
  • Code-created resources hide Edit/Delete options
Screenshot 2026-04-03 at 10 45 28 Screenshot 2026-04-03 at 10 45 50

loom: https://www.loom.com/share/fd11546cd8c54ec59f4cd9371945560a
design: https://www.figma.com/design/JtG3sbaopjO0xQlyeCjmho/RILL-WIP?node-id=6857-271454&t=SrloSlXdGviOEwYN-4

Checklist:

  • Covered by tests
  • Ran it and it works as intended
  • Reviewed the diff before requesting a review
  • Checked for unhandled edge cases
  • Linked the issues it closes
  • Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
  • Intend to cherry-pick into the release branch
  • I'm proud of this work!

royendo and others added 7 commits April 3, 2026 09:24
Extract common row layout (icon + title + error tag + three-dot menu + subtitle)
into a reusable `ResourceListRow` component. Alerts and reports composite cells
now consume this shared component via props and slots.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove bordered cards, rounded corners, and background color from resource
list items. Rows now use simple top/bottom divider lines matching the new design.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Alerts: Edit, Delete
Reports: Run, Edit, Delete

Updated ResourceListRow to use an actions slot instead of a hardcoded
three-dot button, allowing each consumer to provide its own dropdown menu.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace `ResourceTypeBadge` (icon + label) with just the icon in dashboard
rows. Keep raw AlertIcon/ReportIcon for alerts and reports.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add pl-[22px] to dashboard subtitle to match icon + gap offset, consistent
with alert and report rows.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Edit navigates to the resource detail page
- Delete calls the admin service mutation and refreshes the list
- Run (reports only) triggers an ad-hoc report run
- Code-created resources hide Edit/Delete (alerts hide entire menu)
- Dropdown opens down-right (align="start")

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@royendo royendo requested a review from Di7design April 3, 2026 14:46
@royendo
Copy link
Copy Markdown
Contributor Author

royendo commented Apr 3, 2026

@Di7design the one thing missing in the design is the file name, not sure we want to remove it yet its still there !

@royendo royendo changed the title Apply New Table Design in Rill Cloud design: Apply New Table Design in Rill Cloud Apr 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant