Skip to content

refactor(FR-2479): standardize confirmation UX with BAIConfirmModalWithInput and Popconfirm#6471

Merged
graphite-app[bot] merged 1 commit intomainfrom
refactor/issue-6437-standardize-confirmation-ux
Apr 23, 2026
Merged

refactor(FR-2479): standardize confirmation UX with BAIConfirmModalWithInput and Popconfirm#6471
graphite-app[bot] merged 1 commit intomainfrom
refactor/issue-6437-standardize-confirmation-ux

Conversation

@ironAiken2
Copy link
Copy Markdown
Contributor

@ironAiken2 ironAiken2 commented Apr 7, 2026

Resolves #6437 (FR-2479)

Summary

  • Phase 1: Upgrade 6 destructive actions from modal.confirm() to BAIConfirmModalWithInput (typed-input confirmation)
    • ResourcePresetList.tsx — preset deletion
    • EndpointList.tsx — endpoint deletion
    • ShellScriptEditModal.tsx — script deletion
    • AIAgentPage.tsx — agent deletion and reset
    • ManageAppsModal.tsx — image reinstallation confirmation
    • ManageImageResourceLimitModal.tsx — image reinstallation confirmation
  • Phase 2: Convert 2 TOTP toggle confirmations from modal.confirm() to Popconfirm
    • UserSettingModal.tsx — TOTP deactivation toggle
    • UserProfileSettingModal.tsx — TOTP deactivation toggle
  • Phase 3: Remove orphaned PopConfirmWithInput.tsx (0 imports)

Test plan

  • Delete a resource preset — typed confirmation modal appears, must type preset name
  • Delete an endpoint — typed confirmation modal appears, must type endpoint name
  • Delete a shell script — typed confirmation modal appears
  • Delete/reset an AI agent — typed confirmation modal appears
  • Modify apps on installed image — typed confirmation modal appears
  • Modify resource limits on installed image — typed confirmation modal appears
  • Toggle TOTP off (UserSettingModal) — Popconfirm appears inline
  • Toggle TOTP off (UserProfileSettingModal) — Popconfirm appears inline
  • Verify PopConfirmWithInput.tsx is removed

Copilot AI review requested due to automatic review settings April 7, 2026 03:49
@github-actions github-actions Bot added the status:review Under review label Apr 7, 2026
@github-actions github-actions Bot added the size:XL 500~ LoC label Apr 7, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 7, 2026

Coverage report for ./react

St.
Category Percentage Covered / Total
🔴 Statements 8.59% 1757/20454
🔴 Branches 7.87% 1131/14373
🔴 Functions 5.14% 285/5546
🔴 Lines 8.31% 1649/19844

Test suite run success

856 tests passing in 39 suites.

Report generated by 🧪jest coverage report action from 262823e

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR standardizes destructive-action confirmations across the WebUI by migrating modal.confirm() usage to BAIConfirmModalWithInput (typed-input confirmations) and switching TOTP deactivation confirmations to inline Popconfirm, while removing the now-orphaned PopConfirmWithInput component.

Changes:

  • Replaced several destructive modal.confirm() flows with BAIConfirmModalWithInput across agents, endpoints, resource presets, shell scripts, and image modification modals.
  • Converted TOTP “turn off” confirmation from modal-based confirm to inline Popconfirm in two settings modals.
  • Deleted the unused PopConfirmWithInput.tsx component.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 15 comments.

Show a summary per file
File Description
react/src/pages/AIAgentPage.tsx Replace agent delete/reset confirmation with typed-input confirm modal.
react/src/components/EndpointList.tsx Replace endpoint deletion confirmation with typed-input confirm modal.
react/src/components/ResourcePresetList.tsx Replace resource preset deletion confirmation with typed-input confirm modal.
react/src/components/ShellScriptEditModal.tsx Replace script deletion confirmation with typed-input confirm modal.
react/src/components/ManageAppsModal.tsx Add typed-input confirmation when installed image modifications require reinstall.
react/src/components/ManageImageResourceLimitModal.tsx Add typed-input confirmation when installed image resource limit changes require reinstall.
react/src/components/UserSettingModal.tsx Switch TOTP deactivation confirmation to inline Popconfirm.
react/src/components/UserProfileSettingModal.tsx Switch TOTP deactivation confirmation to inline Popconfirm.
react/src/components/PopConfirmWithInput.tsx Remove orphaned duplicate confirmation component.

Comment thread react/src/components/UserSettingModal.tsx Outdated
Comment thread react/src/components/UserProfileSettingModal.tsx Outdated
Comment thread react/src/pages/AIAgentPage.tsx Outdated
Comment thread react/src/pages/AIAgentPage.tsx
Comment thread react/src/pages/AIAgentPage.tsx
Comment thread react/src/components/ResourcePresetList.tsx
Comment thread react/src/components/ShellScriptEditModal.tsx Outdated
Comment thread react/src/components/ShellScriptEditModal.tsx
Comment thread react/src/components/ManageAppsModal.tsx Outdated
Comment thread react/src/components/ManageImageResourceLimitModal.tsx
Copy link
Copy Markdown
Contributor Author


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.

@ironAiken2 ironAiken2 force-pushed the refactor/issue-6437-standardize-confirmation-ux branch 2 times, most recently from 1c059ee to a070324 Compare April 8, 2026 08:32
@github-actions github-actions Bot added area:ux UI / UX issue. area:i18n Localization labels Apr 8, 2026
@ironAiken2 ironAiken2 force-pushed the refactor/issue-6437-standardize-confirmation-ux branch from a070324 to 123e214 Compare April 8, 2026 09:08
@ironAiken2 ironAiken2 force-pushed the refactor/issue-6437-standardize-confirmation-ux branch from 123e214 to f0b926a Compare April 8, 2026 09:45
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 8, 2026

Coverage report for ./packages/backend.ai-ui

St.
Category Percentage Covered / Total
🟢 Statements 81.87% 429/524
🟡 Branches 70.43% 362/514
🟡 Functions 76.86% 93/121
🟢 Lines 83.19% 391/470

Test suite run success

319 tests passing in 13 suites.

Report generated by 🧪jest coverage report action from 262823e

Comment thread packages/backend.ai-ui/src/locale/ko.json
@ironAiken2 ironAiken2 requested a review from nowgnuesLee April 9, 2026 05:45
Copy link
Copy Markdown
Contributor

@nowgnuesLee nowgnuesLee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this is our policy going forward, could you add it to .claude/rules?

@ironAiken2 ironAiken2 force-pushed the refactor/issue-6437-standardize-confirmation-ux branch 2 times, most recently from c44153a to 91cef6f Compare April 13, 2026 04:57
@ironAiken2 ironAiken2 requested a review from nowgnuesLee April 13, 2026 04:57
@ironAiken2 ironAiken2 force-pushed the refactor/issue-6437-standardize-confirmation-ux branch from 91cef6f to 500a0f7 Compare April 16, 2026 09:39
@ironAiken2 ironAiken2 requested a review from agatha197 April 16, 2026 09:39
@ironAiken2 ironAiken2 force-pushed the refactor/issue-6437-standardize-confirmation-ux branch 2 times, most recently from bbba0b0 to f8d187e Compare April 21, 2026 05:36
Comment thread react/src/components/ShellScriptEditModal.tsx Outdated
@ironAiken2 ironAiken2 force-pushed the refactor/issue-6437-standardize-confirmation-ux branch from f8d187e to 3954766 Compare April 22, 2026 08:46
@ironAiken2
Copy link
Copy Markdown
Contributor Author

@nowgnuesLee Addressed — added .claude/rules/destructive-confirmation.md which documents the policy: BAIConfirmModalWithInput for irreversible destructive actions, Popconfirm (or modal.confirm) for reversible/low-impact ones, and the "can the user recover in <30s without support" heuristic for deciding between them.

@ironAiken2 ironAiken2 requested a review from agatha197 April 22, 2026 08:47
Copy link
Copy Markdown
Contributor

@nowgnuesLee nowgnuesLee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@graphite-app
Copy link
Copy Markdown

graphite-app Bot commented Apr 23, 2026

Merge activity

…thInput and Popconfirm (#6471)

Resolves #6437 (FR-2479)

## Summary
- **Phase 1**: Upgrade 6 destructive actions from `modal.confirm()` to `BAIConfirmModalWithInput` (typed-input confirmation)
  - `ResourcePresetList.tsx` — preset deletion
  - `EndpointList.tsx` — endpoint deletion
  - `ShellScriptEditModal.tsx` — script deletion
  - `AIAgentPage.tsx` — agent deletion and reset
  - `ManageAppsModal.tsx` — image reinstallation confirmation
  - `ManageImageResourceLimitModal.tsx` — image reinstallation confirmation
- **Phase 2**: Convert 2 TOTP toggle confirmations from `modal.confirm()` to `Popconfirm`
  - `UserSettingModal.tsx` — TOTP deactivation toggle
  - `UserProfileSettingModal.tsx` — TOTP deactivation toggle
- **Phase 3**: Remove orphaned `PopConfirmWithInput.tsx` (0 imports)

## Test plan
- [ ] Delete a resource preset — typed confirmation modal appears, must type preset name
- [ ] Delete an endpoint — typed confirmation modal appears, must type endpoint name
- [ ] Delete a shell script — typed confirmation modal appears
- [ ] Delete/reset an AI agent — typed confirmation modal appears
- [ ] Modify apps on installed image — typed confirmation modal appears
- [ ] Modify resource limits on installed image — typed confirmation modal appears
- [ ] Toggle TOTP off (UserSettingModal) — Popconfirm appears inline
- [ ] Toggle TOTP off (UserProfileSettingModal) — Popconfirm appears inline
- [ ] Verify `PopConfirmWithInput.tsx` is removed
@graphite-app graphite-app Bot force-pushed the refactor/issue-6437-standardize-confirmation-ux branch from 3954766 to 262823e Compare April 23, 2026 07:35
@graphite-app graphite-app Bot merged commit 262823e into main Apr 23, 2026
11 checks passed
@graphite-app graphite-app Bot deleted the refactor/issue-6437-standardize-confirmation-ux branch April 23, 2026 07:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:i18n Localization area:ux UI / UX issue. size:XL 500~ LoC status:review Under review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Standardize confirmation UX: popConfirm for toggles, typed-input modal for destructive actions

4 participants