feat(FR-2827): make deployment tags clickable to filter the list

[yomybaby]

Resolves #7273(FR-2827)

Stacked on #7272.

Summary

Deployment tags shown in the deployment list table and the detail Overview card are now interactive. Activating a tag (mouse click or keyboard Enter/Space) navigates to the deployment list with that tag pre-applied as a filter, so a tag becomes a one-click pivot to "find all deployments tagged X."

The URL shape uses the existing iContains filter that the list page already understands:

/deployments?filter={"tags":{"iContains":"<tag>"}}

(URI-encoded in the actual link.) Activating a chip from the admin context routes to /admin-deployments instead so users stay within the admin list.

Changes

• react/src/components/DeploymentTagChips.tsx (new) — fragment-based component (DeploymentTagChips_metadata on ModelDeploymentMetadata) that renders all tag chips for a deployment. Wraps antd <Tag> with role="button", tabIndex={0}, and Enter/Space onKeyDown. Owns the filter-URL contract inline (buildDeploymentTagFilterUrl) and uses useLocation() to keep admin-context activations on /admin-deployments. stopRowClick prop opts into e.stopPropagation() for use inside the table row; fallback prop renders when there are no tags.
• react/src/components/DeploymentList.tsx — replaces the inline tag rendering with <DeploymentTagChips metadataFrgmt={row.metadata} stopRowClick fallback={…} />. Filter prop changed from string to GraphQLFilter object so callers no longer JSON-stringify.
• react/src/components/DeploymentConfigurationSection.tsx — replaces the inline tag rendering in the Overview "Tags" descriptions item with <DeploymentTagChips metadataFrgmt={deployment?.metadata ?? null} fallback={renderFallback()} />. Spreads DeploymentTagChips_metadata in the page query.
• react/src/pages/DeploymentListPage.tsx and react/src/pages/AdminDeploymentListPage.tsx — read filter as a GraphQLFilter object via nuqs parseAsJson, with a guard that falls back to {} for non-object payloads (null/array/primitive). Removes the page-local parseFilter* helpers.
• packages/backend.ai-ui/src/components/BAIGraphQLPropertyFilter.tsx — derive conditions from value instead of holding it in useState. Reassigns sequential ids (cond-${i}) on derive so React keys stay stable; the previous random-id-per-call approach would have unmounted every Tag on every render once conditions was no longer a state. This is the bug surfaced when an external prop change (URL-driven query state) updated value but the rendered tags stayed on the stale state.

Verification

• bash scripts/verify.sh: Relay PASS, Lint PASS, Format PASS. Two pre-existing TypeScript failures (packages/backend.ai-client/src/client.ts implicit-any errors and react/src/components/DeleteForeverVFolderModalV2.tsx missing-options error) reproduce on the parent branch (PR fix(FR-2826): polish deployment revision UX (terminology, env block, start command, applying-state polling) #7272) without these changes — they are unrelated.
• Manual: clicking and Enter/Space-activating a tag in both the list and the detail page navigate to the filtered list URL, the table reloads with only matching deployments, and the rendered filter tags reflect the URL value across re-renders. Activating a tag from /admin-deployments stays within the admin list.

Notes

• No backend changes — the { tags: { iContains: ... } } filter shape is already handled by the list pages.
• Detail-side splits comma-joined tag strings before render (preserved behavior); each individual tag becomes its own clickable chip.
• The chip currently replaces the entire filter query param when activated. This matches the issue's "filter applied" requirement; merging with an already-applied filter is left as a future polish.

[yomybaby]

• feat(FR-2827): make deployment tags clickable to filter the list #7274 👈 (View in Graphite)
• fix(FR-2826): polish deployment revision UX (terminology, env block, start command, applying-state polling) #7272
• feat(FR-2826): surface missing AddRevisionInput fields and fix UX issues in Add Revision modal #7271
• refactor: split DeploymentRevisionDetail as fragment-based component #7269
• feat(FR-2822): replace deployment launcher with deployment-only create modal #7263
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• flow:merge-queue - adds this PR to the back of the merge queue
• flow:hotfix - for urgent changes, fast-track this PR to the front of the merge queue

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

Coverage Report for react-coverage (./react)

Status	Category	Percentage	Covered / Total
🔵	Lines	6.52%	1783 / 27318
🔵	Statements	5.39%	1978 / 36640
🔵	Functions	5.2%	296 / 5690
🔵	Branches	3.79%	1293 / 34112

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
react/src/components/DeploymentConfigurationSection.tsx	0%	0%	0%	0%	54-343
react/src/components/DeploymentList.tsx	0%	0%	0%	0%	50-387
react/src/components/DeploymentTagChips.tsx	0%	0%	0%	0%	31-53
react/src/pages/AdminDeploymentListPage.tsx	0%	0%	0%	0%	44-64
react/src/pages/DeploymentListPage.tsx	0%	0%	0%	0%	38-58

Generated in workflow #417 for commit 4276682 by the Vitest Coverage Report Action

[github-actions]

Coverage Report for backend-ai-ui-coverage (./packages/backend.ai-ui)

Status	Category	Percentage	Covered / Total
🔵	Lines	8.64%	361 / 4177
🔵	Statements	7.78%	410 / 5264
🔵	Functions	9.21%	94 / 1020
🔵	Branches	7%	362 / 5171

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/backend.ai-ui/src/components/BAIGraphQLPropertyFilter.tsx	0%	0%	0%	0%	188-770

Generated in workflow #417 for commit 4276682 by the Vitest Coverage Report Action

[github-actions]

Coverage Report for backend-ai-ui-coverage (./packages/backend.ai-ui)

Status	Category	Percentage	Covered / Total
🔵	Lines	8.64%	361 / 4177
🔵	Statements	7.78%	410 / 5264
🔵	Functions	9.21%	94 / 1020
🔵	Branches	7%	362 / 5171

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/backend.ai-ui/src/components/BAIGraphQLPropertyFilter.tsx	0%	0%	0%	0%	188-770

Generated in workflow #411 for commit 3438fb6 by the Vitest Coverage Report Action

[Copilot]

Pull request overview

Makes deployment tags interactive across the deployments surface so users can navigate to the deployment list with a tag filter pre-applied via the existing JSON filter query parameter.

Changes:

• Switch deployments list pages to treat filter as a JSON query param (via nuqs parseAsJson) and plumb a structured GraphQLFilter into DeploymentList.
• Introduce DeploymentTagChips and use it to render clickable tags in the deployments list table and the deployment detail overview.
• Adjust BAIGraphQLPropertyFilter condition ID stability to avoid remount churn.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
react/src/pages/DeploymentListPage.tsx	Parses filter from the URL as JSON and passes a structured filter into the list + query variables.
react/src/pages/AdminDeploymentListPage.tsx	Same JSON-based filter query-param handling for the admin deployments list page.
react/src/components/DeploymentTagChips.tsx	New clickable/tag-chip renderer that navigates to the deployments list with a tag filter applied.
react/src/components/DeploymentList.tsx	Replaces inline tag rendering with DeploymentTagChips and changes filter prop types to GraphQLFilter.
react/src/components/DeploymentConfigurationSection.tsx	Uses DeploymentTagChips for the Overview “Tags” item and updates fragment selections accordingly.
packages/backend.ai-ui/src/components/BAIGraphQLPropertyFilter.tsx	Updates condition derivation / IDs to stabilize rendered tags across renders.

[agatha197]

LGTM

[graphite-app]

Merge activity

• May 7, 6:59 AM UTC: yomybaby added this pull request to the Graphite merge queue.
• May 7, 7:01 AM UTC: Merged by the Graphite merge queue.