feat(14-03): bifurcated filtered-empty-states with clear-filters actions#20894
Draft
Conversation
…, blocks, variables Add bifurcated empty state logic to four list pages. When totalCount === 0, show 'nothing created yet' state. When count === 0 and totalCount > 0, show filtered-to-zero state with 'Clear filters' button. - flows-page.tsx: FlowsFilteredEmptyState with onClearFilters prop - deployments/index.tsx: DeploymentsFilteredEmptyState inline - blocks-page.tsx: BlocksFilteredEmptyState with onClearFilters prop - variables/index.tsx: VariablesFilteredEmptyState inline Route-level callbacks reset search params via TanStack Router navigation. Co-authored-by: alex.s <alex.s@prefect.io> Co-Authored-By: alex.s <ajstreed1@gmail.com>
Add 'no deployments yet' and 'filtered to zero' empty states to the flow detail deployments tab. Wire totalDeploymentsCount and onClearDeploymentFilters from route through component chain. - deploymentsCount === 0: show 'no deployments for this flow' with docs link - deploymentsCount > 0 && deployments.length === 0: show filtered state with Clear filters - flow.$id.tsx: add navigate hook, totalDeploymentsCount query, onClearDeploymentFilters callback - detail/index.tsx: pass totalDeploymentsCount and onClearDeploymentFilters through Co-authored-by: alex.s <alex.s@prefect.io> Co-Authored-By: alex.s <ajstreed1@gmail.com>
Add filtered-to-zero empty states for both flow runs and task runs tabs. - FlowRunsFilteredEmptyState: shown when hasAnyFlowRuns && flowRunsCount === 0 - TaskRunsFilteredEmptyState: shown when hasAnyTaskRuns && taskRunsCount === 0 - onClearFlowRunFilters: resets all flow run filters (search, states, flows, deployments, work-pools, tags, hide-subflows) and pagination - onClearTaskRunFilters: resets task run search, sort, and pagination - Update runs-page.stories.tsx with new required props Co-authored-by: alex.s <alex.s@prefect.io> Co-Authored-By: alex.s <ajstreed1@gmail.com>
…ponent Replace custom Card/CardContent empty state with standard EmptyState component family for visual consistency. Co-authored-by: alex.s <alex.s@prefect.io> Co-Authored-By: alex.s <ajstreed1@gmail.com>
…and work-pools Add filtered-to-zero empty states with 'Clear search' buttons to: - global-concurrency-limits-data-table: showFilteredEmptyState + onClearSearch props - task-run-concurrency-limits-data-table: same pattern - work-pools/index.tsx: WorkPoolsFilteredEmptyState when search yields no results Update global-concurrency-limits test file with new required props. Co-authored-by: alex.s <alex.s@prefect.io> Co-Authored-By: alex.s <ajstreed1@gmail.com>
Contributor
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds bifurcated empty states across all list pages to distinguish "nothing created yet" from "filtered to zero results." When users filter/search to zero results, they now see a contextual message with a "Clear filters" or "Clear search" button instead of the generic "No results." text.
Pattern:
totalCount === 0→ existing "nothing yet" empty state;count === 0 && totalCount > 0→ new filtered-to-zero empty state with actionable clear button. All filter-clearing callbacks live at the route level using TanStack Router navigation.Changes by area
List pages (flows, deployments, blocks, variables):
*FilteredEmptyStatecomponents with "Clear filters" buttononClearFilterscallbacks reset search params and paginationTab-level (flow detail deployments tab, runs page):
flow-deployments-tab: Added "no deployments yet" and filtered-to-zero states; wiredtotalDeploymentsCount(separate unfiltered count query) throughflow.$id.tsx→detail/index.tsx→ tabruns-page: AddedFlowRunsFilteredEmptyStateandTaskRunsFilteredEmptyStatefor both tab contentsConcurrency limits + work pools:
showFilteredEmptyStateprop +*FilteredEmptyStatecomponents with "Clear search"WorkPoolsFilteredEmptyStatefor client-side searchArtifacts migration:
flow-run-artifacts: Replaced custom Card-based empty state with standardEmptyStatecomponent familyHuman review checklist
variables/index.tsxlogic inversion is correct (changed fromhasVariables ? <Table> : <Empty>to!hasVariables ? <Empty> : filteredCount === 0 ? <FilteredEmpty> : <Table>)onClearFlowRunFiltersresets all filters (states, flows, deployments, work-pools, tags, hide-subflows, page), whileonClearTaskRunFiltersonly resets searchbuildDeploymentsCountByFlowQueryexists and returns expected shape fortotalDeploymentsCountinflow.$id.tsxblocks-page.tsxfiltered check (blockDocuments.length === 0) correctly reflects filtered stateTesting
npm run buildpassesnpm run checkpasses (Biome)npm run lintpasses (0 errors, 8 pre-existing warnings)Devin session: https://app.devin.ai/sessions/47f06ce7a45444b9afd96b6a1287001a
Requested by: @desertaxle
Checklist
<link to issue>"mint.json.