lablup / lablup/backend.ai-webui
Admin credential and keypair tags render green: PRIMARY_TAG_VARIANT is 'green' but the brand accent is #FF7A00
- Dominant language
- TypeScript
- Stars
- 133
- Forks
- 81
- Avg merge
- 1d 12h
- Merged PRs (30d)
- 355
Description
## Where
- **Page**: Admin → Users (`/admin/users`) — the `admin` tag in the credential list; and the Keypair Info modal opened from it (×2 tags, including the main-access-key tag).
- **Region**: the small pill next to a credential / access key.
- **Component**: Astryx `Badge` with `PRIMARY_TAG_VARIANT` (`packages/backend.ai-ui/src/helper/astryxTagVariant.ts`), used by `react/src/components/AdminUserCredentialList.tsx` and `react/src/components/KeypairInfoModal.tsx`.
- **Scope**: the 3 remaining `PRIMARY_TAG_VARIANT` call sites.
## Observed
These tags render as a pale **green** tinted pill.
`PRIMARY_TAG_VARIANT` is the literal `'green'`, and the constant's own comment gives the reason: "The Backend.AI brand accent is a green". That is not correct — the brand accent seed is `#FF7A00` (`BAI_DEFAULT_SEEDS.accent` in `react/src/astryx-theme/backendAiTheme.ts`); green is `colorSuccess` / the secondary accent.
The constant exists to replace `` at exactly these sites (migration policy class 4), so the value contradicts its stated purpose.
## Expected
The tags carry the primary accent, as they did when they were `` — and, like every other accent surface, the primary of the menu group they are displayed under (these pages are admin scope).
## Environment
- **Mode**: both
- **Viewport**: any
- **Build**: `main` @ 2026-08-26
## Reproduction
1. Open Admin → Users as a superadmin.
1. Look at the `admin` tag in the credential list.
1. Open a keypair's info modal and look at the main-access-key tag.
1. Compare against the admin primary used by the sidebar and tab indicators on the same page.
## Evidence
- `packages/backend.ai-ui/src/helper/astryxTagVariant.ts:87` — `export const PRIMARY_TAG_VARIANT: AstryxBadgeVariant = 'green';`
- `packages/backend.ai-ui/src/helper/astryxTagVariant.test.ts:132` asserts the `'green'` value, so it changes with the fix.
## Notes
- Same root cause as FR-3706 (tab count badges), which was the other consumer of this constant. FR-3706 moved the tab badges onto a `--color-accent`-backed class and deliberately left these three tag sites alone so that PR stayed reviewable; `BAITabCountBadge` is the pattern to reuse.
- Astryx `Badge.variant` has no member that follows the ambient menu accent — `info` looks like one but this theme pins it to a fixed `light-dark(#0074e2, #6d9cfe)`.
JIRA Issue: FR-3715
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with packages/backend.ai-ui/src/helper/astryxTagVariant.ts and its three remaining PRIMARY_TAG_VARIANT call sites in react/src/components/AdminUserCredentialList.tsx and react/src/components/KeypairInfoModal.tsx. Review BAI's primary accent handling and the BAI Tab Count Badge pattern, then update packages/backend.ai-ui/src/helper/astryxTagVariant.test.ts:132. Done means the admin credential and keypair tags use the admin primary accent in both modes and the test matches the corrected variant.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 85/100