fix(FR-2977): open add-revision modal directly from revision history by agatha197 · Pull Request #7743 · lablup/backend.ai-webui

agatha197 · 2026-06-05T02:57:41Z

Stacked on #7724 (FR-2977). Addresses Seungwon Lee's review feedback on the FR-2977 / FR-2957 revision stack (devops Teams thread).

Problem

Opening the Add Revision modal from the revision-history entry points (row overflow menu / drawer More ⋯) showed a <Modal loading /> shell first, then swapped it for the real modal once the modal's lazy chunks resolved — the modal visibly went down and a new one came up, inconsistent with the rest of the app.

Why the boundary is load-bearing (and the fallback was the only problem)

DeploymentAddRevisionModal does suspend on mount: its preset / model-folder / runtime-variant selects (BAIAvailablePresetSelect, BAIVFolderSelect, BAIRuntimeVariantSelect) each run their own useLazyLoadQuery and are rendered directly in the form body (not behind the modal's inner <Suspense> sections). So the local <Suspense> boundary around the mount is load-bearing — it keeps that suspend from bubbling up to the page-level boundary and blanking the page. The boundary must stay; only its fallback was wrong.

Change

DeploymentRevisionHistoryTab — change the modal-mount Suspense fallback from a <Modal loading /> shell to null, so the modal simply appears once ready instead of a loading-modal-then-real-modal swap. This matches how the same kind of lazily-mounted modal is handled elsewhere:

DeploymentDetailPage → <Suspense fallback={null}><BAIUnmountAfterClose><DeploymentAddRevisionModal/></BAIUnmountAfterClose></Suspense>
VFolderNodesV2 → identical <Suspense fallback={null}> wrapper around VFolderDeployModal

Removes the now-unused Modal import. One-file, behavior-only change — no data-flow, query, or schema change.

Test plan

Revision History row ⋯ → New revision based on this opens the real modal directly (no loading-modal-then-real-modal swap), prefilled from that revision.
Revision-detail drawer More ⋯ → New revision based on this — same: drawer closes and the real modal opens directly.
The modal's lazy selects still show their own field-level skeletons while loading; the page never blanks (local Suspense boundary retained).
bash scripts/verify.sh — Relay, Lint, Format, TypeScript all PASS.

🤖 Generated with Claude Code

agatha197 · 2026-06-05T02:57:56Z

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 · 2026-06-05T03:00:28Z

Coverage Report for react-coverage (./react)

Status	Category	Percentage	Covered / Total
🔵	Lines	6.64%	1799 / 27089
🔵	Statements	5.42%	1994 / 36788
🔵	Functions	5.38%	297 / 5513
🔵	Branches	3.78%	1300 / 34350

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
react/src/components/DeploymentRevisionHistoryTab.tsx	0%	0%	0%	0%	73-745

Generated in workflow #1478 for commit 7411070 by the Vitest Coverage Report Action

Copilot

Pull request overview

Removes redundant outer <Suspense> wrappers around the lazily-mounted Add Revision modal so opening it no longer triggers a page-level Suspense fallback flash or a “loading modal → real modal” swap. The modal now opens directly while its internal sections handle their own loading UI.

Changes:

Drop the page-level <Suspense fallback={null}> wrapper around DeploymentAddRevisionModal in DeploymentDetailPage.
In DeploymentRevisionHistoryTab, remove the <Suspense fallback={<Modal loading />}> shell-swap and mount the modal via React.startTransition from both entry points.
Update stale inline comments on the Add Revision buttons to reflect the modal’s current non-suspending mount behavior.

Reviewed changes

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

File	Description
react/src/pages/DeploymentDetailPage.tsx	Removes the outer Suspense boundary around the Add Revision modal to prevent page-level fallback flashes.
react/src/components/DeploymentRevisionHistoryTab.tsx	Removes the loading-modal Suspense fallback swap and opens the modal via transitions from both revision-history entry points.
react/src/components/DeploymentConfigurationSection.tsx	Updates button comment to match the modal’s current loading/suspense behavior.

graphite-app · 2026-06-05T04:41:28Z

Merge activity

Jun 5, 4:41 AM UTC: nowgnuesLee added this pull request to the Graphite merge queue.
Jun 5, 4:43 AM UTC: The Graphite merge queue removed this pull request due to downstack failures on PR #7561.
Jun 5, 4:43 AM UTC: The Graphite merge queue removed this pull request due to downstack failures on PR #7561.
Jun 5, 5:29 AM UTC: nowgnuesLee added this pull request to the Graphite merge queue.
Jun 5, 5:30 AM UTC: The Graphite merge queue removed this pull request due to downstack failures on PR #7724.
Jun 5, 5:30 AM UTC: The Graphite merge queue removed this pull request due to downstack failures on PR #7724.
Jun 5, 6:16 AM UTC: nowgnuesLee added this pull request to the Graphite merge queue.
Jun 5, 6:18 AM UTC: Merged by the Graphite merge queue.

…7743) Resolves #7601 (FR-2977) > **Stacked on #7724 (FR-2977).** Addresses Seungwon Lee's review feedback on the FR-2977 / FR-2957 revision stack ([devops Teams thread](https://teams.microsoft.com/l/message/19:acd1be4236b94664b814f4d4e5c84da6@thread.skype/1780626400941)). ## Problem Opening the **Add Revision** modal from the revision-history entry points (row overflow menu / drawer **More ⋯**) showed a `<Modal loading />` shell first, then **swapped** it for the real modal once the modal's lazy chunks resolved — the modal visibly went down and a new one came up, inconsistent with the rest of the app. ## Why the boundary is load-bearing (and the fallback was the only problem) `DeploymentAddRevisionModal` **does** suspend on mount: its preset / model-folder / runtime-variant selects (`BAIAvailablePresetSelect`, `BAIVFolderSelect`, `BAIRuntimeVariantSelect`) each run their own `useLazyLoadQuery` and are rendered directly in the form body (not behind the modal's inner `<Suspense>` sections). So the local `<Suspense>` boundary around the mount is **load-bearing** — it keeps that suspend from bubbling up to the page-level boundary and blanking the page. The boundary must stay; only its **fallback** was wrong. ## Change `DeploymentRevisionHistoryTab` — change the modal-mount Suspense `fallback` from a `<Modal loading />` shell to **`null`**, so the modal simply appears once ready instead of a loading-modal-then-real-modal swap. This matches how the same kind of lazily-mounted modal is handled elsewhere: - `DeploymentDetailPage` → `<Suspense fallback={null}><BAIUnmountAfterClose><DeploymentAddRevisionModal/></BAIUnmountAfterClose></Suspense>` - `VFolderNodesV2` → identical `<Suspense fallback={null}>` wrapper around `VFolderDeployModal` Removes the now-unused `Modal` import. One-file, behavior-only change — no data-flow, query, or schema change. ## Test plan - [x] Revision History row **⋯ → New revision based on this** opens the real modal directly (no loading-modal-then-real-modal swap), prefilled from that revision. - [x] Revision-detail drawer **More ⋯ → New revision based on this** — same: drawer closes and the real modal opens directly. - [x] The modal's lazy selects still show their own field-level skeletons while loading; the page never blanks (local Suspense boundary retained). - [x] `bash scripts/verify.sh` — Relay, Lint, Format, TypeScript all PASS. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

github-actions Bot assigned agatha197 Jun 5, 2026

github-actions Bot added the size:L 100~500 LoC label Jun 5, 2026

agatha197 marked this pull request as ready for review June 5, 2026 02:57

Copilot AI review requested due to automatic review settings June 5, 2026 02:57

Copilot started reviewing on behalf of agatha197 June 5, 2026 02:58 View session

Copilot AI reviewed Jun 5, 2026

View reviewed changes

Comment thread react/src/components/DeploymentRevisionHistoryTab.tsx Outdated

agatha197 force-pushed the 06-05-fix_fr-2977_open_add-revision_modal_without_page-level_suspense_swap branch from 5b35048 to 7411070 Compare June 5, 2026 03:24

github-actions Bot added size:M 30~100 LoC and removed size:L 100~500 LoC labels Jun 5, 2026

agatha197 changed the title ~~fix(FR-2977): open add-revision modal without page-level Suspense swap~~ fix(FR-2977): open add-revision modal directly from revision history Jun 5, 2026

agatha197 requested review from nowgnuesLee and yomybaby June 5, 2026 04:15

agatha197 changed the base branch from 07-01-style_fr-2977_revision-source-action-wording to graphite-base/7743 June 5, 2026 06:13

graphite-app Bot force-pushed the 06-05-fix_fr-2977_open_add-revision_modal_without_page-level_suspense_swap branch from 7411070 to 606e1b9 Compare June 5, 2026 06:17

github-actions Bot added area:ux UI / UX issue. area:i18n Localization size:XL 500~ LoC and removed size:M 30~100 LoC labels Jun 5, 2026

graphite-app Bot changed the base branch from graphite-base/7743 to 07-01-style_fr-2977_revision-source-action-wording June 5, 2026 06:17

Base automatically changed from 07-01-style_fr-2977_revision-source-action-wording to main June 5, 2026 06:18

graphite-app Bot merged commit 606e1b9 into main Jun 5, 2026
4 checks passed

graphite-app Bot deleted the 06-05-fix_fr-2977_open_add-revision_modal_without_page-level_suspense_swap branch June 5, 2026 06:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(FR-2977): open add-revision modal directly from revision history#7743

fix(FR-2977): open add-revision modal directly from revision history#7743
graphite-app[bot] merged 1 commit into
mainfrom
06-05-fix_fr-2977_open_add-revision_modal_without_page-level_suspense_swap

agatha197 commented Jun 5, 2026 •

edited

Loading

Uh oh!

agatha197 commented Jun 5, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 5, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

graphite-app Bot commented Jun 5, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

agatha197 commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Why the boundary is load-bearing (and the fallback was the only problem)

Change

Test plan

Uh oh!

agatha197 commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

github-actions Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report for react-coverage (./react)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

graphite-app Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

agatha197 commented Jun 5, 2026 •

edited

Loading

agatha197 commented Jun 5, 2026 •

edited

Loading

github-actions Bot commented Jun 5, 2026 •

edited

Loading

graphite-app Bot commented Jun 5, 2026 •

edited

Loading