feat(FR-26): show error state on ProjectSelect when no accessible projects#7455
Open
Conversation
github-actions
Bot
added
area:ux
Contributor
Author
|
Warning This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
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 react-coverage (./react)
File Coverage
|
||||||||||||||||||||||||||||||||||||||
ironAiken2
force-pushed
the
05-18-feat_fr-26_show_error_state_on_projectselect_when_no_accessible_projects
branch
from
b262481 to
faf382e
Compare
github-actions
Bot
added
migration
size:M
ironAiken2
force-pushed
the
05-18-feat_fr-26_show_error_state_on_projectselect_when_no_accessible_projects
branch
from
faf382e to
ee4458c
Compare
ironAiken2
requested review from
agatha197,
Copilot,
nowgnuesLee and
yomybaby
and removed request for
Copilot
ironAiken2
force-pushed
the
05-18-feat_fr-26_show_error_state_on_projectselect_when_no_accessible_projects
branch
from
ee4458c to
4c80f67
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates ProjectSelect to surface an empty/error state when the current user has no accessible projects, aligning the selector UX with the onboarding/no-membership scenario described in FR-26.
Changes:
- Adds
status="error"and an info suffix tooltip whenProjectSelecthas no accessible projects and is not disabled/loading. - Adds the
projectSelect.NoAccessibleProjectstranslation key across all supported locale files.
Reviewed changes
Copilot reviewed 23 out of 23 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
react/src/components/ProjectSelect.tsx |
Adds no-project error state and tooltip icon behavior. |
resources/i18n/en.json |
Adds English no-accessible-projects text. |
resources/i18n/ko.json |
Adds Korean no-accessible-projects text. |
resources/i18n/de.json |
Adds German translation. |
resources/i18n/el.json |
Adds Greek translation. |
resources/i18n/es.json |
Adds Spanish translation. |
resources/i18n/fi.json |
Adds Finnish translation. |
resources/i18n/fr.json |
Adds French translation. |
resources/i18n/id.json |
Adds Indonesian translation. |
resources/i18n/it.json |
Adds Italian translation. |
resources/i18n/ja.json |
Adds Japanese translation. |
resources/i18n/mn.json |
Adds Mongolian translation. |
resources/i18n/ms.json |
Adds Malay translation. |
resources/i18n/pl.json |
Adds Polish translation. |
resources/i18n/pt-BR.json |
Adds Brazilian Portuguese translation. |
resources/i18n/pt.json |
Adds Portuguese translation. |
resources/i18n/ru.json |
Adds Russian translation. |
resources/i18n/th.json |
Adds Thai translation. |
resources/i18n/tr.json |
Adds Turkish translation. |
resources/i18n/vi.json |
Adds Vietnamese translation. |
resources/i18n/zh-CN.json |
Adds Simplified Chinese translation. |
resources/i18n/zh-TW.json |
Adds Traditional Chinese translation. |
Contributor
Coverage Report for backend-ai-ui-coverage (./packages/backend.ai-ui)
File Coverage
|
||||||||||||||||||||||||||||||||||||||
…jects When the current user has no accessible projects in the current domain, the project selector now indicates this with an error-colored border and an InfoCircleOutlined suffix icon. Hovering the icon shows a tooltip explaining the state. The guard suppresses the error look while the underlying select is `disabled` or `loading`, so the existing 'please select a domain first' warning in UpdateUsersModal and the project-switching spinner in the header keep their original UX.
ironAiken2
force-pushed
the
05-18-feat_fr-26_show_error_state_on_projectselect_when_no_accessible_projects
branch
from
4c80f67 to
591a307
Compare
ironAiken2
changed the base branch from
graphite-base/7455
to
05-18-chore_remove_unused_alert_import_in_vfoldernodes.tsx
This was referenced May 18, 2026
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 #2933(FR-26)
Summary
When the current user has no accessible projects in the current domain,
ProjectSelectnow visually and accessibly communicates the empty state:status="error".InfoCircleOutlinedicon (visual cue).tooltip(hover over the whole control) and a persistentaria-label— so keyboard and screen-reader users can discover why it is in an error state, not just that it is.The error treatment is suppressed while the select is
disabledorloading, so existing UX is preserved:WebUIHeader.tsx— during project switching (isProjectChanging), the select is disabled+loading, so the error never flashes mid-switch.UpdateUsersModal.tsx— when no domain is picked yet, the field is disabled and the form-item already shows a "Please select a domain" warning; we don't compete with that.Why
ProjectSelectpreviously rendered as an empty dropdown with no indication of why it was empty. Users with no project membership (a real case after onboarding, after losing a project, or in a fresh domain) saw a normal-looking selector with nothing inside it. This change makes the empty state legible at a glance without a heavy error boundary fallback.Ghost-mode border fix (
BAISelect)The header
ProjectSelectis rendered withghost.BAISelect'sghostSelectstyle hard-overridesborder-colorwith!important, which swallowed antd'sstatus="error"red border — so in the header (the primary use case) only the info icon appeared and the border stayed the ghost color. Added a higher-specificity&.ant-select.ant-select-status-errorrule insideghostSelectthat restores the error border + suffix color. Normal (non-error) ghost selects are unaffected; no other ghost select usesstatus="error"today.Accessibility (Copilot review feedback)
The first revision exposed the reason only through a tooltip on the non-focusable suffix icon, so keyboard / screen-reader users got the error state without the reason. The message is now attached to the focusable control:
tooltip(antd Tooltip over the whole select) for pointer users and a persistentaria-label(independent of tooltip open state) for assistive tech. The icon stays as a pure visual affordance.Changes
react/src/components/ProjectSelect.tsx— deriveshowNoProjectError = !accessibleProjects?.length && !disabled && !loading; in the empty state forwardstatus="error", theInfoCircleOutlinedsuffix, and the explanation via BAISelecttooltip+aria-label. Preserves caller-suppliedstatus/suffixIcon/tooltip/aria-labelwhen not in the empty state.packages/backend.ai-ui/src/components/BAISelect.tsx— add an error-status override to theghostSelectstyle so a ghost select can still surface a red error border (root cause of the header border not turning red).resources/i18n/en.json,resources/i18n/ko.json— addprojectSelect.NoAccessibleProjectskey. Other languages will be filled in by/fw:i18n.Test plan
ProjectSelectin a domain with no accessible projects → red error border + info icon; hovering anywhere on the select shows the tooltip; the control exposes the reason as its accessible name.ProjectSelectwith a screen reader in the no-project state → the reason is announced (not just "invalid").ProjectSelectduring project switching (loading) → no error styling.UpdateUsersModalwith no domain selected → field disabled, existing "Please select a domain" warning, no project-select error styling.UpdateUsersModalwith a domain that has projects → normal selector, no error styling.UserSettingModaladmin-edit flow with no accessible projects → error border + accessible reason.🤖 Generated with Claude Code