lablup / lablup/backend.ai-webui

Admin credential and keypair tags render green: PRIMARY_TAG_VARIANT is 'green' but the brand accent is #FF7A00

Open Beginner friendly
#9,136 0 comments 0 reactions 0 assignees View on GitHub
astryx-report astryx-visual frontend
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.