fix(FR-2787): deployment CRUD UI/UX improvements#7191
Open
Conversation
Contributor
Author
How to use the Graphite Merge QueueAdd either label to this PR to merge it via 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. |
Contributor
Coverage report for
|
St.❔ |
Category | Percentage | Covered / Total |
|---|---|---|---|
| 🔴 | Statements | 8.11% (+0% 🔼) |
1859/22911 |
| 🔴 | Branches | 7.34% (-0% 🔻) |
1187/16162 |
| 🔴 | Functions | 4.83% (+0.02% 🔼) |
297/6155 |
| 🔴 | Lines | 7.89% (+0% 🔼) |
1750/22193 |
Test suite run success
865 tests passing in 40 suites.
Report generated by 🧪jest coverage report action from 0381e35
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refines the Deployment CRUD experience in the React WebUI by improving information density/layout in revision/detail views, aligning status-tag visuals with the semantic color system used elsewhere, and standardizing destructive-action confirmation UX.
Changes:
- Improves revision/detail presentation: adjusts
Descriptionscolumn behavior and adds folder explorer entry points for model folders (with ID fallback in some contexts). - Aligns status visuals: updates
DeploymentStatusTagto use the semantic color mapping (matching the Endpoint status tag approach). - Standardizes destructive confirmations: replaces antd
modal.confirmwithBAIDeleteConfirmModalfor access-token deletion; updates replica list default sort.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| react/src/pages/DeploymentLauncherPage.tsx | Removes cancel/dirtiness guard wiring from launcher page layout. |
| react/src/components/DeploymentLauncherPageContent.tsx | Removes Cancel button from launcher footer; adds backend-dependent TODO for preset prefill. |
| react/src/components/DeploymentStatusTag.tsx | Switches tag coloring to semantic color mapping for consistent status styling. |
| react/src/components/DeploymentRevisionDetailDrawer.tsx | Updates Descriptions columns and adds folder explorer link button; adds vfolderId fallback. |
| react/src/components/DeploymentConfigurationSection.tsx | Forces Descriptions to 2 columns; adds folder explorer link buttons in revision info & modal. |
| react/src/components/DeploymentReplicasTab.tsx | Sets default replica sort to -createdAt and shows default descending sort indicator. |
| react/src/components/DeploymentAccessTokensTab.tsx | Replaces modal.confirm with BAIDeleteConfirmModal for token deletion flow. |
| data/schema.graphql | Updates GraphQL schema snapshot, including changing startCommand type and several filter field types. |
Comments suppressed due to low confidence (2)
react/src/components/DeploymentConfigurationSection.tsx:629
- Same as above: in the current revision modal, the “ModelFolder” description shows '-' when the folder name is unavailable even though
vfolderIdis present. Add avfolderIdfallback (and optionally show the folder-explorer button for the ID case too).
{
key: 'model-folder',
label: t('deployment.ModelFolder'),
children: mountConfig?.vfolder?.name ? (
<BAIFlex direction="column" align="start">
<BAIFlex gap="xs" align="center">
<Typography.Text>{mountConfig.vfolder.name}</Typography.Text>
<Button
type="link"
size="small"
icon={<FolderOpenOutlined />}
style={{ padding: 0 }}
onClick={() => {
const localId = toLocalId(mountConfig.vfolder!.id);
if (localId) openFolderExplorer(localId);
}}
/>
</BAIFlex>
{mountConfig.mountDestination && (
<Typography.Text type="secondary">
{mountConfig.mountDestination}
</Typography.Text>
)}
</BAIFlex>
) : (
renderFallback()
),
},
react/src/components/DeploymentConfigurationSection.tsx:396
- The “ModelFolder” field falls back to a generic '-' when
mountConfig.vfolder.nameis missing, even thoughvfolderIdis available in the query. To match the intended UX (and the drawer behavior), add avfolderIdfallback (and optionally keep showing mountDestination under it).
key: 'model-folder',
label: t('deployment.ModelFolder'),
children: mountConfig?.vfolder?.name ? (
<BAIFlex direction="column" align="start">
<BAIFlex gap="xs" align="center">
<Typography.Text>{mountConfig.vfolder.name}</Typography.Text>
<Button
type="link"
size="small"
icon={<FolderOpenOutlined />}
style={{ padding: 0 }}
onClick={() => {
const localId = toLocalId(mountConfig.vfolder!.id);
if (localId) openFolderExplorer(localId);
}}
/>
</BAIFlex>
{mountConfig.mountDestination && (
<Typography.Text type="secondary">
{mountConfig.mountDestination}
</Typography.Text>
)}
</BAIFlex>
) : (
renderFallback()
),
agatha197
force-pushed
the
04-30-fix_fr-2787_deployment_crud_ui_ux_improvements
branch
from
0381e35 to
c194638
Compare
- Fix responsive column layout in DeploymentRevisionDetailDrawerContent (Grid.useBreakpoint, md+ 2 cols, otherwise 1) - Fix column layout in DeploymentCurrentRevisionModalContent (column: 2) - Add folder explorer link in revision detail drawer and config section - Show vfolderId as fallback when vfolder name is unavailable - Remove cancel button from deployment launcher - Update DeploymentStatusTag to use SemanticColor system (aligned with EndpointStatusTag) - Replace modal.confirm with BAIDeleteConfirmModal in DeploymentAccessTokensTab - Set default replica sort to -createdAt (DESC)
agatha197
force-pushed
the
04-30-fix_fr-2787_deployment_crud_ui_ux_improvements
branch
from
c194638 to
f1fa2c0
Compare
Contributor
Coverage Report for react-coverage (./react)
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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
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.
Resolves #7190 (FR-2787)
Summary
DeploymentRevisionDetailDrawerContent—Grid.useBreakpoint()for dynamic columns (md+: 2, otherwise: 1)DeploymentCurrentRevisionModalContent— fixedcolumn: 2(800px modal width)vfolderIdas fallback whenvfolder.nameis unavailableDeploymentStatusTagto useSemanticColor+useSemanticColorMap()(aligned withEndpointStatusTagpattern)modal.confirmwithBAIDeleteConfirmModalinDeploymentAccessTokensTab-createdAt(DESC) withdefaultSortOrder: 'descend'Pending (needs backend)
resourcePresetIdnot exposed onModelRevisionoutput typefailureReasononly exists onRevisionRefreshResult, not onModelDeployment/ModelReplica