fix(FR-2820): add Active/Inactive tabs and consolidate controls in Project page by ironAiken2 · Pull Request #7413 · lablup/backend.ai-webui

ironAiken2 · 2026-05-14T06:11:19Z

Supersedes #7372 — restacked on top of FR-2819 / FR-2825 with destructive-confirmation conventions and segment-style status toggle.

Summary

Project page consolidates Active / Inactive listing into a single page with a segment toggle (matching the User page UX), and surfaces the per-row Edit / Deactivate / Restore / Purge actions through BAINameActionCell.

Changes

`react/src/pages/ProjectPage.tsx`

Removed the BAICard header-tab split (active / inactive).
Added BAIRadioGroup (optionType="button") as the status segment, mirroring UserManagement.tsx.
Page root is now a plain BAIFlex column — no surrounding card wrapper (the page is standalone, with no sibling tabs).
Filter, selection label, bulk-edit, refresh, and "Create project" actions sit on the top row beside the segment.

`packages/backend.ai-ui/src/components/fragments/BAIProjectTable.tsx`

Replaced the legacy Popconfirm + ad-hoc icon button row with BAINameActionCell actions (Edit / Deactivate / Restore / Purge).
Added isActiveTab prop to switch row actions:
- active tab: Edit, Deactivate (popconfirm), Purge (typed-input modal).
- inactive tab: Edit, Restore (popconfirm), Purge (typed-input modal).
Reversible actions (Deactivate / Restore) use popConfirm with description = record.name — title states the action, body shows only the target name (FR-2825 copy convention).
Irreversible Purge uses BAIDeleteConfirmModal with requireConfirmInput (FR-2819 convention) — replaces the previous BAIConfirmModalWithInput.

i18n

Added comp:BAIProjectTable keys: Restore, RestoreProject, ProjectRestored, FailedToRestoreProject, EditProject (22 locales).
Removed unused comp:BAIProjectTable.AreYouSureToRestoreProject (21 locales) — the simplified popconfirm body shows just record.name.

Test plan

Project page loads with the segment showing 활성/비활성 (Active/Inactive) instead of header tabs.
Switching the segment re-queries the table and resets selection + pagination.
Active tab — row menu shows Edit / Deactivate / Purge. Deactivate popconfirm title is 프로젝트 비활성화 and body is the project name; OK flips the project to inactive.
Inactive tab — row menu shows Edit / Restore / Purge. Restore popconfirm title is 프로젝트 복원 and body is the project name; OK flips the project back to active.
Purge — BAIDeleteConfirmModal requires typing the project name before OK enables; success removes the project and refreshes.
bash scripts/verify.sh — Relay / Lint / Format / TypeScript pass for the modified files.

🤖 Generated with Claude Code

cla-assistant · 2026-05-14T06:11:33Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ ironAiken2
❌ claude
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

ironAiken2 · 2026-05-14T06:11:36Z

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.

cla-assistant · 2026-05-14T06:11:37Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ ironAiken2
❌ claude
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

github-actions · 2026-05-14T06:13:08Z

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

Status	Category	Percentage	Covered / Total
🔵	Lines	8%	362 / 4520
🔵	Statements	7.06%	411 / 5817
🔵	Functions	9.13%	94 / 1029
🔵	Branches	6.29%	362 / 5750

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/backend.ai-ui/src/components/fragments/BAIProjectBulkEditModal.tsx	0%	0%	0%	0%	19-97
packages/backend.ai-ui/src/components/fragments/BAIProjectTable.tsx	0%	0%	0%	0%	22-234
packages/backend.ai-ui/src/components/fragments/index.ts	100%	100%	100%	100%

Generated in workflow #822 for commit 43056ab by the Vitest Coverage Report Action

github-actions · 2026-05-14T06:13:58Z

Coverage Report for react-coverage (./react)

Status	Category	Percentage	Covered / Total
🔵	Lines	6.43%	1783 / 27715
🔵	Statements	5.29%	1978 / 37378
🔵	Functions	5.16%	296 / 5733
🔵	Branches	3.69%	1293 / 34966

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
react/src/pages/ProjectPage.tsx	0%	0%	0%	0%	52-465

Generated in workflow #755 for commit e9f4db3 by the Vitest Coverage Report Action

Copilot

Pull request overview

This PR updates the Project management UI to split project listing by Active/Inactive status and consolidate per-row project actions into the shared table name/action-cell pattern.

Changes:

Adds an Active/Inactive status segment and status-based GraphQL filter to ProjectPage.
Reworks BAIProjectTable row actions using BAINameActionCell, including deactivate/activate and purge flows.
Updates backend.ai-ui locale files for the new project table action/status messages.

Reviewed changes

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

Show a summary per file

File	Description
`react/src/pages/ProjectPage.tsx`	Adds status query state, status filter merging, and the Active/Inactive segment.
`packages/backend.ai-ui/src/components/fragments/BAIProjectTable.tsx`	Consolidates row controls into `BAINameActionCell` and adds activate/deactivate/purge mutations.
`packages/backend.ai-ui/src/locale/de.json`	Updates German project table action translations.
`packages/backend.ai-ui/src/locale/el.json`	Updates Greek project table action translations.
`packages/backend.ai-ui/src/locale/en.json`	Updates English project table action translations and purge success copy.
`packages/backend.ai-ui/src/locale/es.json`	Updates Spanish project table action translations.
`packages/backend.ai-ui/src/locale/fi.json`	Updates Finnish project table action translations.
`packages/backend.ai-ui/src/locale/fr.json`	Updates French project table action translations.
`packages/backend.ai-ui/src/locale/id.json`	Updates Indonesian project table action translations.
`packages/backend.ai-ui/src/locale/it.json`	Updates Italian project table action translations.
`packages/backend.ai-ui/src/locale/ja.json`	Updates Japanese project table action translations.
`packages/backend.ai-ui/src/locale/ko.json`	Updates Korean project table action translations.
`packages/backend.ai-ui/src/locale/mn.json`	Updates Mongolian project table action translations.
`packages/backend.ai-ui/src/locale/ms.json`	Updates Malay project table action translations.
`packages/backend.ai-ui/src/locale/pl.json`	Updates Polish project table action translations.
`packages/backend.ai-ui/src/locale/pt-BR.json`	Updates Brazilian Portuguese project table action translations.
`packages/backend.ai-ui/src/locale/pt.json`	Updates Portuguese project table action translations.
`packages/backend.ai-ui/src/locale/ru.json`	Updates Russian project table action translations.
`packages/backend.ai-ui/src/locale/th.json`	Updates Thai project table action translations.
`packages/backend.ai-ui/src/locale/tr.json`	Updates Turkish project table action translations.
`packages/backend.ai-ui/src/locale/vi.json`	Updates Vietnamese project table action translations.
`packages/backend.ai-ui/src/locale/zh-CN.json`	Updates Simplified Chinese project table action translations.
`packages/backend.ai-ui/src/locale/zh-TW.json`	Updates Traditional Chinese project table action translations.

…oject page Resolves #7254(FR-2820) - Add Active/Inactive tab split to the Project page BAICard, replacing the single "Project" tab. The active tab drives an `is_active` filter merged into the GraphQL query, and the redundant `is_active` BAIPropertyFilter entry is removed. - Consolidate per-row actions (edit, deactivate/restore, purge) from the standalone `controls` column into the `name` column using `BAINameActionCell`, matching the convention on other listing pages. - Add a Restore action (via Popconfirm, since restore is reversible) that calls `modify_group` with `is_active: true` for inactive projects. - Switch the purge confirmation from `modal.confirm` to `BAIConfirmModalWithInput` with the project name as the typed confirmation string, per the destructive-confirmation rule. - Remove the `is_active` and `Controls` columns from the table since tabs and BAINameActionCell handle those respectively. - Add i18n keys for Restore, RestoreProject, EditProject, etc. across all 21 locale files.

…f card tabs

…body

…istency with user/credential/role pages

…er tab state The deactivate/activate action choice was driven by the isActiveTab prop, which flips immediately on segment change while the GraphQL response is still loading (useDeferredValue). The result: old rows briefly show actions that don't match their actual state. UserManagement decides per-record (record.status === 'active'), so its rows stay consistent during transitions. Apply the same approach here using record.is_active, and remove the now-redundant isActiveTab prop.

…mutations

…on success

agatha197

I don't think sending all click props is good way. How about refering react/src/pages/VFolderNodeListPage.tsx?

…nameColumnActionProps Consolidate onClickProjectEditButton / onClickDeactivateProject / onClickRestoreProject / onClickPurgeProject into a single nameColumnActionProps prop (object or (value, record, index) => props), mirroring the BAIModelDeploymentNodes pattern. The name column now only renders the title; ProjectPage composes the per-row action list (edit / deactivate / activate / purge) as a closure so all mutation and side-effect logic stays in the app layer instead of crossing the backend.ai-ui library boundary via individual callbacks. - BAIProjectTable: drop 4 callback props, add nameColumnActionProps and exported BAIProjectTableNameColumnActionProps type - ProjectPage: build the action list inline, reusing existing comp:BAIProjectTable.* i18n keys (no i18n changes) - stories: keep local QueryResolver callback API, adapt internally Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

The action logic was moved from the backend.ai-ui BAIProjectTable component into the WebUI ProjectPage. The action labels still used `comp:BAIProjectTable.*` keys, but that namespace belongs to the backend.ai-ui library's i18n bundle and does not resolve from the app's i18next instance — so the UI rendered raw keys (BAIProjectTable.EditProject / .Deactivate / .DeactivateProject). - ProjectPage: switch the 6 action labels from `comp:BAIProjectTable.*` to `project.*` (EditProject, Deactivate, DeactivateProject, Activate, ActivateProject; Purge already existed in project.*). - resources/i18n (21 langs): add the 5 new project.* keys, migrating the existing human-reviewed translations 1:1 from the backend.ai-ui locale. - packages/backend.ai-ui/src/locale (21 langs): delete the 14 comp:BAIProjectTable keys orphaned by the refactor (Activate, ActivateProject, AreYouSureToPurgeProject, Deactivate, DeactivateProject, EditProject, FailedToActivateProject, FailedToDeactivateProject, FailedToPurgeProject, ProjectActivated, ProjectDeactivated, ProjectPurged, Purge, PurgeProject). The 14 keys still used by the table columns are kept. Verified via /fw:i18n: all 21 languages contain the 5 migrated keys with consistent translations; no orphaned key remains in any backend.ai-ui locale; all 42 locale files pass JSON validation. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

nowgnuesLee · 2026-05-18T09:30:24Z

    <BAIProjectTable
      projectFragment={projectNodes}
-      onClickProjectEditButton={onClickProjectEditButton}
+      nameColumnActionProps={(_value, record) => {


Let's use customizeColumns like other components.

github-actions Bot assigned ironAiken2 May 14, 2026

github-actions Bot added the size:XL 500~ LoC label May 14, 2026

ironAiken2 mentioned this pull request May 14, 2026

fix(FR-2819): use BAIConfirmModalWithInput for irreversible delete actions #7370

Merged

5 tasks

ironAiken2 mentioned this pull request May 14, 2026

fix(FR-2825): standardize activate/deactivate confirmations to Popconfirm #7371

Merged

7 tasks

ironAiken2 mentioned this pull request May 14, 2026

fix(FR-2820): add Active/Inactive tabs and consolidate controls in Project page #7372

Closed

ironAiken2 marked this pull request as ready for review May 14, 2026 06:29

ironAiken2 requested review from agatha197, Copilot, nowgnuesLee and yomybaby and removed request for Copilot May 14, 2026 06:29

Copilot started reviewing on behalf of ironAiken2 May 14, 2026 06:29 View session

Copilot AI review requested due to automatic review settings May 14, 2026 08:03

ironAiken2 force-pushed the fix/FR-2820-project-page-active-inactive-tabs branch from 861fd44 to 706db66 Compare May 14, 2026 08:03

ironAiken2 force-pushed the fix/FR-2825-popconfirm-activate-deactivate branch from 624b2cd to 1a0fd87 Compare May 14, 2026 08:03

Copilot started reviewing on behalf of ironAiken2 May 14, 2026 08:04 View session

Copilot AI reviewed May 14, 2026

View reviewed changes

ironAiken2 force-pushed the fix/FR-2825-popconfirm-activate-deactivate branch from 1a0fd87 to f38d7f8 Compare May 14, 2026 08:53

ironAiken2 force-pushed the fix/FR-2820-project-page-active-inactive-tabs branch from 15b90a6 to c2cb05f Compare May 14, 2026 08:53

ironAiken2 mentioned this pull request May 15, 2026

fix(FR-2820): lift row actions to ProjectPage and clean up selection on success #7429

Closed

5 tasks

github-actions Bot added area:ux UI / UX issue. area:i18n Localization labels May 15, 2026

ironAiken2 force-pushed the fix/FR-2820-project-page-active-inactive-tabs branch from e9f4db3 to 3c8a4b2 Compare May 18, 2026 01:07

ironAiken2 force-pushed the fix/FR-2825-popconfirm-activate-deactivate branch from f38d7f8 to 1584638 Compare May 18, 2026 01:07

graphite-app Bot changed the base branch from fix/FR-2825-popconfirm-activate-deactivate to graphite-base/7413 May 18, 2026 04:07

claude and others added 8 commits May 18, 2026 04:10

fix(FR-2820): use BAIRadioGroup segment for active/inactive instead o…

38039a7

…f card tabs

fix(FR-2820): keep BAICard with single tab, segment goes inside card …

e4e7542

…body

fix(FR-2820): translate Restore/EditProject keys across 22 locales

08e5eff

fix(FR-2820): rename inactive-tab Restore action to Activate for cons…

65e9c79

…istency with user/credential/role pages

fix(FR-2820): only show Purge action on inactive projects

9d751e2

fix(FR-2820): handle network failures in activate/deactivate project …

60171f3

…mutations

graphite-app Bot force-pushed the graphite-base/7413 branch from 1584638 to 1902adc Compare May 18, 2026 04:10

graphite-app Bot force-pushed the fix/FR-2820-project-page-active-inactive-tabs branch from 3c8a4b2 to 640331d Compare May 18, 2026 04:10

graphite-app Bot changed the base branch from graphite-base/7413 to main May 18, 2026 04:10

fix(FR-2820): lift row actions to ProjectPage and clean up selection …

301ac07

…on success

graphite-app Bot force-pushed the fix/FR-2820-project-page-active-inactive-tabs branch from 640331d to 301ac07 Compare May 18, 2026 04:10

agatha197 requested changes May 18, 2026

View reviewed changes

ironAiken2 and others added 2 commits May 18, 2026 06:28

ironAiken2 requested a review from agatha197 May 18, 2026 08:19

nowgnuesLee requested changes May 18, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(FR-2820): add Active/Inactive tabs and consolidate controls in Project page#7413

fix(FR-2820): add Active/Inactive tabs and consolidate controls in Project page#7413
ironAiken2 wants to merge 11 commits into
mainfrom
fix/FR-2820-project-page-active-inactive-tabs

ironAiken2 commented May 14, 2026 •

edited

Loading

Uh oh!

cla-assistant Bot commented May 14, 2026

Uh oh!

ironAiken2 commented May 14, 2026 •

edited

Loading

Uh oh!

cla-assistant Bot commented May 14, 2026

Uh oh!

github-actions Bot commented May 14, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 14, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

agatha197 left a comment

Uh oh!

nowgnuesLee May 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

ironAiken2 commented May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

react/src/pages/ProjectPage.tsx

packages/backend.ai-ui/src/components/fragments/BAIProjectTable.tsx

i18n

Test plan

Uh oh!

cla-assistant Bot commented May 14, 2026

Uh oh!

ironAiken2 commented May 14, 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!

cla-assistant Bot commented May 14, 2026

Uh oh!

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

Uh oh!

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

Uh oh!

github-actions Bot commented May 14, 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!

Uh oh!

Uh oh!

Uh oh!

agatha197 left a comment

Choose a reason for hiding this comment

Uh oh!

nowgnuesLee May 18, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ironAiken2 commented May 14, 2026 •

edited

Loading

`react/src/pages/ProjectPage.tsx`

`packages/backend.ai-ui/src/components/fragments/BAIProjectTable.tsx`

ironAiken2 commented May 14, 2026 •

edited

Loading

github-actions Bot commented May 14, 2026 •

edited

Loading

github-actions Bot commented May 14, 2026 •

edited

Loading