design: Apply New Table Design in Rill Cloud

[royendo]

• 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

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]

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

[Di7design]

Can we keep this icon tag in the front as well, it's easy to tell which is canvas which is Explore. @royendo

[royendo]

so Badge and Label instead of just Badge, correct?

[royendo]

Fix 2 — Svelte 5 migration:

• ResourceListRow.svelte: Rewritten with $props(), Snippet types, {@render}, Component type for icon. Renamed icon to Icon for Svelte 5 component
  rendering.
• DeleteResourceConfirmDialog.svelte (new): Uses $props(), $bindable() for open.

Fix 3 — Shared delete dialog:

• Created web-common/src/features/resources/DeleteResourceConfirmDialog.svelte with resourceKind, title, description props.
• Deleted DeleteAlertConfirmDialog.svelte and DeleteReportConfirmDialog.svelte.
• Updated both composite cells to use the shared dialog.

Fix 4 — lastTrigger guard:

• Alerts: errorMessage={lastTrigger ? lastTriggerErrorMessage : undefined}
• Reports: errorMessage={lastRun ? lastRunErrorMessage : undefined}

Fix 5 — Error handling:

• handleDelete in both alerts and reports wrapped in try/catch with eventBus.emit("notification", { type: "error" }).
• handleRun in reports wrapped in try/catch.

Fix 6 — Dashboards migrated to ResourceListRow:

• Both web-admin and web-common DashboardsTableCompositeCell now use ResourceListRow with ResourceTypeBadge in the tags snippet. Made icon optional,
  subtitle padding conditional.

Fix 7 — Hide dropdown for code-created reports:

• Wrapped the entire DropdownMenu.Root in {#if !isCreatedByCode}, matching the alert pattern.

Fix 9 — Magic number comment:

• Added .

[Di7design]

Error state colors for dark mode looks incorrect.

See below the correct dark mode/light mode destructive colors.

2. Delete report action in report page dropdown is not red?

[royendo]

Oh those were existing but will fix in this PR!

[royendo]

as discussed the color themeing extends past this PR and quite deeply into the first pass of dark mode, will take themes into a separate PR.

[royendo]

Eric, no need to review this yet, im waiting for #9173 then will make sure the filter bar is available for these tables

[ericpgreen2]

Eric, no need to review this yet

Then I'll mark this as draft so I don't get pinged, if you don't mind.

[royendo]

PR #9181 Review — Apply New Table Design in Rill Cloud

▎ Design-against-Figma comparison was skipped — the design-reviewer agent hit a model-access error. Findings below were validated by reading PR-version
▎ files directly.

---

Critical / Warning

1. Two near-duplicate delete-confirm dialogs
   web-common/src/features/resources/DeleteConfirmDialog.svelte and DeleteResourceConfirmDialog.svelte are both new in this PR, both in the same folder,
   both render an AlertDialog with a destructive button. The only difference is whether the caller hands in a fully formed message or three pieces. They
   are also stylistically inconsistent — one uses Svelte 4 export let, the other uses Svelte 5 runes.
   → Collapse into one component before merge.

2. Interactive nested inside in ResourceListRow
   web-common/src/features/resources/ResourceListRow.svelte:30 wraps the row in <a {href}>, then :56-64 nests the DropdownMenu.Trigger button inside it.
   The onclick interceptor only catches primary clicks — middle-click and cmd/ctrl-click on the menu button still trigger the anchor's navigation, opening
   the row in a new tab when the user only meant to open the menu. Interactive content inside an anchor is also invalid HTML.
   → Restructure as siblings: anchor over the title region, action menu outside the anchor.

3. DashboardsTable duplicated across web-admin/ and web-common/
   The two files share ~150 lines of identical filter/sort/column logic. Pre-existing pattern, but this PR expands both copies by ~100 lines each. Same
   issue with DashboardsTableCompositeCell.svelte.
   → The web-admin version should consume the web-common one, passing data={dashboardsData} and a derived getHref.

4. Filtered-empty-state branch in ResourceList is unreachable
   ResourceList.svelte:78 keys the empty state on $table.getState().globalFilter?.length > 0. But every caller (AlertsTable, ReportsTable, dashboards) now
   pre-filters via processedData = (data ?? []).filter(...) and passes data={processedData}. TanStack's globalFilter is never set, so isFiltered is always
   false. Users searching with no results see "You don't have any {kind}s yet" instead of "No {kind}s match your search".
   → Accept an isFiltered prop from the caller, or push search into globalFilter instead of pre-filtering.

5. New row-level actions have no test coverage
   tests/alerts.spec.ts and tests/reports.spec.ts only touch the pre-existing metadata-page Delete flow. Net-new listing-row actions — Alerts Edit/Delete,
   Reports Run/Edit/Delete, and the code-created-resource hide/show behavior — have no Playwright coverage.

---

Suggestions

6. isCreatedByCode = !ownerId is the wrong predicate
   AlertsTableCompositeCell.svelte:31 and ReportsTableCompositeCell.svelte:40 derive "code-created" from missing ownerId. The backend's authoritative flag
   is admin_managed. A YAML resource with admin_owner_user_id set will wrongly show the menu (and the backend will reject with FailedPrecondition); a
   UI-created resource missing the annotation will wrongly hide it. Frontend gating is UX-only here, so not a security smell.

7. {@html description} in DeleteConfirmDialog
   DeleteConfirmDialog.svelte:39 renders user-controlled display names through {@html ...} so callers can embed . Server-side validation likely
   keeps blast radius small, but this is an avoidable XSS primitive.
   → Pass the title as a separate prop and let Svelte auto-escape it (the way DeleteResourceConfirmDialog already does).

8. ResourceListRow API: icon prop + tags snippet are mutually exclusive in practice
   Every caller uses one or the other. The subtitlePadding calc parseInt(iconSize) + GAP_PX silently breaks if iconSize isn't in px.
   → Consider a single leading snippet and drop the icon-only path.

9. Toolbar/filter boilerplate copy-pasted across five tables
   Same searchText / matchesSearch / processedData / handleFilterChange / filterGroups shape repeated in AlertsTable, AlertHistoryTable, ReportsTable,
   ReportHistoryTable, and both DashboardsTables — ~50 lines per file. Worth a useTableFilters helper as the abstraction cost drops.

---

Rejected (false positives)

• "Svelte 5 runes will break in Svelte 4 runtime" — package.json pins "svelte": "^5.0.0" across all workspaces; 44 files already use $props(). Project
  is on Svelte 5.
• "Silent error handling in handleDelete" — the catch block does emit a "Failed to delete alert" notification via eventBus.emit. The reviewer's quoted
  line numbers were also stale (file is 121 lines, not ~300).

---

Developed in collaboration with Claude Code

[royendo]

Code review fixes — pushed in 0793509ba

Bugs fixed

• Dashboard "Newest" sort was a no-op (web-common and web-admin DashboardsTable.svelte). The table passed initialSorting=[{ id: "name", desc: false }] to TanStack, which re-sorted the already-sorted processedData by name ascending. Removed initialSorting so TanStack renders rows in the order the toolbar produced.
• ResourceListRow nested a <button> inside the row's <a>. Restructured: the anchor wraps only the text region, and the action menu is now a sibling. Fixes invalid HTML and middle-click / cmd-click navigation on the menu trigger. The onclick preventDefault interceptor and role="presentation" shim are gone.
• {@html description} on DeleteConfirmDialog was rendering caller-built HTML strings that interpolated user-controlled display names — an avoidable XSS primitive. Replaced with a default <slot /> so callers write Svelte markup (auto-escaped) for the body.
• "No results match your search" empty state was unreachable. ResourceList keyed on TanStack's globalFilter, but every caller now pre-filters data externally so globalFilter was always empty. Added an isFiltered prop, wired through alerts/reports/dashboards.

Cleanup

• Collapsed two delete-confirm dialogs into one. DeleteResourceConfirmDialog.svelte is gone; all six callers now use DeleteConfirmDialog with body content via the default slot.
• De-duplicated DashboardsTable. web-admin/.../DashboardsTable.svelte shrank from 261 → 38 lines and now wraps the web-common version, fetching data and computing getHref based on isEmbedded. Deleted the duplicate web-admin/.../DashboardsTableCompositeCell.svelte (only difference vs. the web-common one was that it constructed href inline; that now happens in the wrapper).

Tests

• Added ariaLabel={Actions for ${title}} to the row's IconButton in alerts and reports composite cells for stable Playwright selectors.
• Updated tests/alerts.spec.ts "Should delete alert with schedule" to delete from the listing-row menu (covers the new wired-up Delete). The other delete test still covers the metadata-page path.
• Updated tests/reports.spec.ts "Should run a report and receive an email" to trigger Run from the listing-row menu (covers the new wired-up Run); still asserts the email and landing pivot.
• Updated tests/reports.spec.ts "Should delete report" to delete from the listing-row menu.

Net change

17 files, +134 / -452.

Knowingly not addressed

• isCreatedByCode = !ownerId on the listing rows uses the wrong predicate — backend authoritative flag is admin_managed. UX-only mismatch (backend rejects with FailedPrecondition either way), kept for a follow-up.
• Toolbar/filter boilerplate is still copy-pasted across the five listing tables. A useTableFilters helper would consolidate ~50 lines per file but is out of scope here.

---

Developed in collaboration with Claude Code

[ericpgreen2]

Based on the changes in #9367, is it right that the toolbar implemented in this PR is no longer the intended design? CC @ericokuma

[ericokuma]

Yes, #9367 is an improvement on this :)