refactor(FR-2772): unify deployment card UX with BAICard conventions

[ironAiken2]

Resolves #7145 (FR-2772)

Summary

• All deployment cards now use BAICard with styles={{ body: { paddingTop: 0 } }} so the body sits flush against the header. Tabbed BAICards keep BAICard's default tab-aware paddingTop.
• Card-scoped actions (refresh button, primary + Add / + Create, Edit configuration) live in BAICard.extra. Only content-scoped controls (filter, search) remain inside the body.
• Suspense boundary now lives inside each card so the header is always visible while the body shows Skeleton active.
• DeploymentConfigurationSection is split into DeploymentOverviewContent, DeploymentRevisionInfoContent, and DeploymentCurrentRevisionModalContent. Each owns its own useLazyLoadQuery and internal Suspense / Skeleton. currentRevision { id } was added to the parent fragment so the Revision Info card's frame can be rendered conditionally without waiting for the inner fetch.
• AutoScalingRuleList gained hideInlineAddButton / hideInlineRefreshButton props and an imperative ref exposing openAddModal(), so DeploymentAutoScalingTab can render the title, refresh, and + Add rule button in the card extra while the list owns the editor modal. EndpointDetailPage usage is unaffected (defaults preserved).
• DeploymentAccessTokensTab is wrapped in its own BAICard with refresh + create in extra; the list query was extracted into DeploymentAccessTokensTable so the card header stays visible during fetch.
• Descriptions no longer overrides backgroundColor to colorBgBase — label / value strips render correctly in dark mode (the colorFillAlter label band is restored).
• DeploymentStatusTag maps in-flight statuses (DEPLOYING, SCALING, PENDING) to 'processing' instead of the non-preset 'info', fixing the vivid dark-mode tag and matching the doc-comment intent.
• DeploymentList's deploymentsFrgmt prop is nullable; both DeploymentListPage and AdminDeploymentListPage drop the : null branch so transient myDeployments === null shows the toolbar + empty table instead of an empty card.
• Add Revision modal Suspense fallback unified to Skeleton active (was a centered Spin).
• New .claude/rules/use-bai-card.md documents the BAICard convention: prefer over Card, body.paddingTop: 0 (except tabbed), card-scoped actions go in extra, Suspense lives inside the card with Skeleton fallback.

Test plan

• bash scripts/verify.sh passes (Relay / Lint / Format / TypeScript).
• Deployment list page (light + dark): toolbar (filter, search, refresh, create) renders normally; navigating into a deployment and back does not leave an empty card — table + "no data" / rows render.
• Deployment detail page (light + dark): Overview, Revision Info, AutoScaling, Access Tokens, Replicas/Revisions tabs all show their card title during loading; bodies show Skeleton; refresh + primary action sit in each card header.
• Descriptions in Overview / Revision Info: in dark mode the label column shows the colorFillAlter band and the value column matches card background (no flat black plane).
• Status tag: an in-flight deployment (e.g. DEPLOYING / PENDING) shows the antd processing preset (transparent body, processing dot) — not the vivid default tag.
• AutoScaling card: clicking + Add rule in the card header opens the editor modal; refresh button in header refetches; AutoScalingRuleList in EndpointDetailPage (legacy) still has its inline buttons (no regression).
• Access Tokens card: clicking + Create access token in the card header opens the create modal; refresh button in header refetches.
• Add Revision modal: while loading, body shows Skeleton, not a centered spinner.

[ironAiken2]

• fix(FR-2780): apply deployment launcher post-migration feedback #7167
• fix(FR-2776): adapt addModelRevision call sites to new schema #7158
• fix(FR-2773): preserve auto-selected resourcePresetId across applyInitialValues #7153
• fix(FR-2774): query runtime variant id and decode to UUID for addModelRevision #7152
• refactor(FR-2772): unify deployment card UX with BAICard conventions #7146 👈 (View in Graphite)
• fix(FR-2767): apply deployment migration feedback #7141
• feat(FR-2767): redirect to launcher when no deployment presets available #7136
• feat(FR-2664): apply meeting feedback — split config card, add endpoint URL, imageV2, reorder tabs #7102
• fix(FR-2709): resolve notification render loop and sider init error #6985
• feat(FR-1368): add deployment detail — configuration section, 4 tabs, and DeploymentDetailPage #6917 : 2 other dependent PRs (#6920 , #7038 )
• feat(FR-1368): add deployment list — table, DeploymentListPage, and AdminDeploymentListPage #6916
• feat(FR-1368): add deployment launcher — multi-step form, hook, page, and deploy split buttons #6912 : 2 other dependent PRs (#6911 , #6940 )
• feat(FR-1368): add shared deployment UI components — ReplicaStatusTag, DeploymentStatusTag, DeploymentOwnerInfo #6910 : 1 other dependent PR (#6908 )
• feat(FR-1368): add deployment infrastructure — feature flag, i18n keys, routes, and sidebar #6904 : 1 other dependent PR (#6906 )
• 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

St.❔	Category	Percentage	Covered / Total
🔴	Statements	8.12% (-0.01% 🔻)	1859/22897
🔴	Branches	7.35% (-0.01% 🔻)	1187/16152
🔴	Functions	4.83% (+0.01% 🔼)	297/6152
🔴	Lines	7.89% (-0.01% 🔻)	1750/22183

Test suite run success

865 tests passing in 40 suites.

Report generated by 🧪jest coverage report action from ca553e6

[Copilot]

Pull request overview

Refactors deployment pages/components to align card-based sections with Backend.AI’s BAICard UX conventions (header/extra layout, Suspense-in-card pattern), and adjusts supporting components to match the new structure.

Changes:

• Migrate deployment detail sections from antd Card to BAICard, moving section-level actions (refresh/add) into card headers.
• Refactor DeploymentConfigurationSection into multiple Suspense-friendly subcomponents/queries and add a “current revision” modal that unmounts after close.
• Introduce an internal rule for using BAICard consistently (.claude/rules/use-bai-card.md) and adjust related components (status tag colors, list nullability, Skeleton fallbacks).

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
react/src/pages/DeploymentListPage.tsx	Always renders DeploymentList (now nullable-friendly) inside a BAICard + Suspense layout.
react/src/pages/AdminDeploymentListPage.tsx	Same structural change as user list; keeps tabbed BAICard container.
react/src/pages/DeploymentDetailPage.tsx	Replaces antd Cards with BAICard/card-owned sections and simplifies Suspense placement.
react/src/components/DeploymentStatusTag.tsx	Adjusts tag color mapping to use antd preset status colors (e.g., processing).
react/src/components/DeploymentList.tsx	Makes fragment prop nullable and updates table rendering (notably removes custom empty text).
react/src/components/DeploymentConfigurationSection.tsx	Large refactor: split into overview/revision/modal content components with Suspense + BAICard.
react/src/components/DeploymentAutoScalingTab.tsx	Wraps autoscaling list in BAICard with header actions and Suspense.
react/src/components/DeploymentAddRevisionModal.tsx	Switches Suspense fallback from spinner to Skeleton.
react/src/components/DeploymentAccessTokensTab.tsx	Wraps access tokens UI in BAICard; moves fetch into an inner Suspense component.
react/src/components/AutoScalingRuleList.tsx	Adds header-action hiding flags and attempts to expose an imperative “open add modal” API.
.claude/rules/use-bai-card.md	Adds repository guidance for BAICard usage and padding/Suspense conventions.

Comments suppressed due to low confidence (2)

react/src/components/AutoScalingRuleList.tsx:355

• AutoScalingRuleList is trying to expose an imperative API via ref, but ref is a reserved React attribute and is not delivered to function components as a normal prop. As written, ref here will always be undefined, so useImperativeHandle() won’t connect and callers like <AutoScalingRuleList ref={...} /> won’t be able to open the add modal.

Convert this component to React.forwardRef (and remove ref from AutoScalingRuleListProps) so the parent can receive a working AutoScalingRuleListRef handle.

  ref?: React.Ref<AutoScalingRuleListRef>;
}

const AutoScalingRuleList: React.FC<AutoScalingRuleListProps> = ({
  deploymentId,

react/src/components/DeploymentList.tsx:450

• The table’s custom empty-state copy was removed (locale.emptyText: t('deployment.NoDeployments')). Without this, the empty state falls back to Ant Design’s default (which may be generic and/or not match the intended deployment-specific messaging).

Consider restoring a localized locale.emptyText (or provide an equivalent empty-state via BAITable/BAICard conventions) so an empty deployment list shows the expected message.

          <BAITable<DeploymentNode>
            rowKey="id"
            scroll={{ x: 'max-content' }}
            showSorterTooltip={false}
            {...tableProps}

[graphite-app]

Merge activity

• Apr 30, 6:58 AM UTC: ironAiken2 added this pull request to the Graphite merge queue.
• Apr 30, 7:18 AM UTC: Merged by the Graphite merge queue.