Skip to content

feat(FR-70): display private tag in Environment page for private images#6227

Open
yomybaby wants to merge 1 commit intomainfrom
03-27-feat_fr-70_display_private_tag_in_environment_page
Open

feat(FR-70): display private tag in Environment page for private images#6227
yomybaby wants to merge 1 commit intomainfrom
03-27-feat_fr-70_display_private_tag_in_environment_page

Conversation

@yomybaby
Copy link
Copy Markdown
Member

@yomybaby yomybaby commented Mar 27, 2026

Resolves #2221(FR-70)

Summary

  • Add a "Private" tag (red Tag component) next to the status column in the Environment page's image list for images that have the ai.backend.features label containing private
  • Extract shared isPrivateImage utility to react/src/helper/image.ts (previously duplicated in ImageEnvironmentSelectFormItems.tsx)
  • Add environment.Private i18n key to all 21 language files

Screenshots

Before (Environment page — no Private tag visible)

Environment page before

After

Private images will display a red "Private" tag next to the status badge in the Status column.

Test plan

  • Open the Environment page and verify that images with ai.backend.features: private label show a red "Private" tag
  • Verify the tag appears alongside the existing "Installed" / "Installing" tags
  • Verify in both light and dark themes that the tag is visible and readable
  • Verify that non-private images do not show the tag

🤖 Generated with Claude Code

@github-actions github-actions bot added area:ux UI / UX issue. area:i18n Localization size:XL 500~ LoC labels Mar 27, 2026
Copy link
Copy Markdown
Member 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.

@yomybaby yomybaby marked this pull request as ready for review March 27, 2026 04:30
Copilot AI review requested due to automatic review settings March 27, 2026 04:30
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 27, 2026

Coverage report for ./react

St.
Category Percentage Covered / Total
🔴 Statements
8.12% (+0% 🔼)
1403/17278
🔴 Branches
7.32% (+0% 🔼)
883/12068
🔴 Functions
5.34% (+0% 🔼)
258/4833
🔴 Lines
7.82% (+0% 🔼)
1316/16832
Show new covered files 🐣
St.
File Statements Branches Functions Lines
🔴 helper/image.ts 0% 0% 0% 0%

Test suite run success

773 tests passing in 36 suites.

Report generated by 🧪jest coverage report action from 0561e78

@yomybaby yomybaby force-pushed the 03-27-feat_fr-70_display_private_tag_in_environment_page branch from ad11295 to 0561e78 Compare March 27, 2026 04:35
@github-actions github-actions bot added effort:easy Need to understand only a specific region of codes (good first issue, easy). type:enhance Add new features size:M 30~100 LoC and removed size:XL 500~ LoC labels Mar 27, 2026
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

Adds a visual indicator in the Environment page image list to help admins identify images that are marked as private (via ai.backend.features containing private), addressing the confusion where such images can be installed but not selectable in “new session” flows.

Changes:

  • Display a red “Private” tag in the Environment page image list status column when an image is labeled as private.
  • Add environment.Private i18n string across all supported (21) locale JSON files.

Reviewed changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated no comments.

Show a summary per file
File Description
react/src/components/ImageList.tsx Adds private-image detection and renders a red “Private” tag next to Installed/Installing status tags.
resources/i18n/en.json Adds environment.Private translation.
resources/i18n/de.json Adds environment.Private translation.
resources/i18n/el.json Adds environment.Private translation.
resources/i18n/es.json Adds environment.Private translation.
resources/i18n/fi.json Adds environment.Private translation.
resources/i18n/fr.json Adds environment.Private translation.
resources/i18n/id.json Adds environment.Private translation.
resources/i18n/it.json Adds environment.Private translation.
resources/i18n/ja.json Adds environment.Private translation.
resources/i18n/ko.json Adds environment.Private translation.
resources/i18n/mn.json Adds environment.Private translation.
resources/i18n/ms.json Adds environment.Private translation.
resources/i18n/pl.json Adds environment.Private translation.
resources/i18n/pt-BR.json Adds environment.Private translation.
resources/i18n/pt.json Adds environment.Private translation.
resources/i18n/ru.json Adds environment.Private translation.
resources/i18n/th.json Adds environment.Private translation.
resources/i18n/tr.json Adds environment.Private translation.
resources/i18n/vi.json Adds environment.Private translation.
resources/i18n/zh-CN.json Adds environment.Private translation.
resources/i18n/zh-TW.json Adds environment.Private translation.
Comments suppressed due to low confidence (1)

react/src/components/ImageList.tsx:55

  • isPrivateImage() duplicates the same private-image detection logic already defined in ImageEnvironmentSelectFormItems.tsx. To avoid future drift (e.g., if the label parsing rules change), consider extracting this into a shared helper (e.g., in react/src/helper or a small imageLabels utility) and reusing it from both components.

const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
  'use memo';

  const { t } = useTranslation();
  const [selectedRows, setSelectedRows] = useState<EnvironmentImage[]>([]);
  const [, { tagAlias }] = useBackendAIImageMetaData();
  const { token } = theme.useToken();

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. effort:easy Need to understand only a specific region of codes (good first issue, easy). size:M 30~100 LoC type:enhance Add new features

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Let's display private tag in 'Enviroment' page if the image has private label

2 participants