Skip to content

Add name filter to can-i-use dashboard#11304

Open
lirenhe wants to merge 4 commits into
mainfrom
spector_dashboard_update
Open

Add name filter to can-i-use dashboard#11304
lirenhe wants to merge 4 commits into
mainfrom
spector_dashboard_update

Conversation

@lirenhe

@lirenhe lirenhe commented Jul 20, 2026

Copy link
Copy Markdown
Member

Summary

Adds a name filter to the can-i-use coverage dashboard (e.g. https://azure.github.io/typespec-azure/can-i-use/http/) so users can quickly locate a specific scenario/test among the ~1000 cases.

Changes

  • New SearchBox placed below the Coverage Overview and directly above the coverage tables.
  • Filters scenarios by case-insensitive substring match on the scenario name, applied across all tiers and tables (works together with the existing All tiers / Core / Backlog tabs).
  • Tables with no matching scenarios are hidden, and a "No scenarios match ..." message is shown when nothing matches.
  • Auto-expands matching scenarios while filtering so results are immediately visible without manual expansion. This is gated behind an active filter, so the expanded tree only contains the (small) filtered result set.
  • Uses React's useDeferredValue so the SearchBox stays responsive while the filter + expand render runs as a lower-priority, non-blocking update — no typing lag even with ~1000 scenarios.

Impact

  • expandAll is a new optional prop on the internal DashboardTable (default false); the public Dashboard / DashboardFromAzureStorage API is unchanged.
  • With no active filter, expandAll is false and the tree renders exactly as before — no change to the default page load / idle experience.
  • Only consumers are the can-i-use/http pages, which pass only options.

Files

  • packages/spec-dashboard/src/components/dashboard.tsx
  • packages/spec-dashboard/src/components/dashboard-table.tsx
  • packages/spec-dashboard/src/components/dashboard.module.css

Note: @typespec/spec-dashboard is a private package, so no changelog entry is required.

Add a search box below the coverage overview that filters scenarios by
name (case-insensitive substring match) across all tiers and tables.
Tables with no matching scenarios are hidden and a 'No scenarios match'
message is shown when nothing matches.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: cae584f3-c6db-4366-9331-811f932cbfea
@github-actions

Copy link
Copy Markdown
Contributor

No changes needing a change description found.

@azure-sdk-automation

azure-sdk-automation Bot commented Jul 20, 2026

Copy link
Copy Markdown

You can try these changes here

🛝 Playground 🌐 Website 🛝 VSCode Extension

Comment thread packages/spec-dashboard/src/components/dashboard.tsx
lirenhe and others added 2 commits July 21, 2026 13:18
When a name filter is active, expand all rows so matching scenarios are
immediately visible without manual expansion. Use React's useDeferredValue
so the SearchBox stays responsive while the filter + expand render happens
as a lower-priority, non-blocking update.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: cae584f3-c6db-4366-9331-811f932cbfea
@lirenhe
lirenhe added this pull request to the merge queue Jul 22, 2026
@github-merge-queue
github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Jul 22, 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.

2 participants