Skip to content

fix(#10493): say why a select option is disabled - #10496

Open
agatha197 wants to merge 14 commits into
mainfrom
fix/gh-10493-disabled-option-reason
Open

agatha197 wants to merge 14 commits into
mainfrom
fix/gh-10493-disabled-option-reason

Conversation

@agatha197

@agatha197 agatha197 commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor

Resolves #10493

Depends on lablup/ui-common#107 (merged) - pinned to the canary 0.2.0-alpha.20.canary-20261029050354-1feb007cd that carries it.

Summary

A select option that cannot be picked now says why. The option's disabled flag takes boolean | { reason: string }, and the select draws a small glyph at the end of the disabled row whose tooltip carries the reason.

  • The row keeps its height, so a list where many options share one reason (folders without mount permission) does not grow or repeat the sentence.
  • The reason is the glyph's accessible name, so a screen reader reads it with the option.
  • A bare disabled: true still disables silently.

The rendering lives in ui-common (lablup/ui-common#107): Selector / MultiSelector option disabled and PagedSelectorOption.isDisabled take the union. This PR only passes it through and sets reasons.

Changes

  • BAISelect and BAIComplexSelect options accept disabled: boolean | { reason } and hand it to ui-common unchanged (BAIComplexSelect maps it to isDisabled).
  • BAIScopedVFolderSelect: isFolderDisabled → disableUnmountable; the select disables folders whose mount level is NONE and supplies the reason itself.
  • Reasons added where options were disabled with no explanation: mount-folder input (no mount permission), ProjectSelect (locked project type), AccessKeySelect (inactive keypair), ModelCardSelect (no compatible preset), session launcher accelerator unit (not supported by the image), runtime variant preset value type / UI type.
  • ResourcePresetSelect and ProjectSelect (personal project) drop their own row Tooltip, the pointerEvents workaround and the parallel disabledReason field.
  • Mount-folder picker option: the creator email on the second line drops its person glyph and reads like the usage mode, host and date beside it.

#10279 is stacked on this PR

#10279 (preset list from checkPresetAvailabilityV2, per-check preset reasons) sits on top and sets disabled: { reason } on its preset options the same way.

ui-common pin and BAIBoard

The canary that carries lablup/ui-common#107 also carries ui-common's breaking Board change (lablup/ui-common#68), which drops renderItem. This PR leaves BAIBoard to the dashboard stack (#10619 and the PRs below it), which adopts the new Board in full, so the two do not both rewrite it. Until that stack lands, tsc reports BAIBoard.tsx on this branch; once it is on main, rebase this PR and the errors go.

Out of scope

Disabled items in row-action and dropdown menus (SessionNodes, AdminDeployment, DeploymentBasicInfoCard, …).

Verification

VERIFY_TESTS=1 bash scripts/verify.sh: every lane passes except TypeScript, which reports only BAIBoard.tsx until the dashboard stack lands (above). Vitest: BAIComplexSelect, BAISelect*, ProjectSelect, SessionFormItems pass. The ui-common side has its own tests in lablup/ui-common#107.

🤖 Generated with Claude Code

🔗 Dev server: https://gh-10493-pr10496-say-why-select.sujin.10-82-0-159.sslip.io

@github-actions github-actions Bot added area:ux UI / UX issue. area:i18n Localization size:L 100~500 LoC labels Oct 21, 2026
@github-actions

github-actions Bot commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR

GitHub Pages may take up to a minute to hydrate after the deploy.

🧩 Changed Components

Component Changed Stories Open
BAIBoard source + stories 3 Storybook ↗
BAIComplexSelect source + stories 7 Storybook ↗
BAISelect source + stories 8 Storybook ↗
BAIVFolderMountConfigInput source 10 Storybook ↗
2 changed component(s) with no story to open
  • BAIRuntimeVariantPresetSettingModal — packages/backend.ai-ui/src/components/fragments/BAIRuntimeVariantPresetSettingModal.tsx
  • BAIScopedVFolderSelect — packages/backend.ai-ui/src/components/fragments/BAIScopedVFolderSelect.tsx
26 other changed file(s) in packages/backend.ai-ui/
  • packages/backend.ai-ui/src/components/BAIBoard.doc.ts
  • packages/backend.ai-ui/src/components/BAIBoard.test.tsx
  • packages/backend.ai-ui/src/components/BAIComplexSelect.doc.ts
  • packages/backend.ai-ui/src/components/BAIComplexSelect.test.tsx
  • packages/backend.ai-ui/src/components/fragments/BAIScopedVFolderSelect.doc.ts
  • packages/backend.ai-ui/src/locale/de.json
  • packages/backend.ai-ui/src/locale/el.json
  • packages/backend.ai-ui/src/locale/en.json
  • packages/backend.ai-ui/src/locale/es.json
  • packages/backend.ai-ui/src/locale/fi.json
  • …and 16 more

📦 Bundle Size

File Size Gzip
backend.ai-ui.js 1414.3 kB 360.3 kB
dayjs.min-aRhWYanC.js 95.1 kB 27.7 kB
th-C4jfBtNj.js 49.3 kB 10.3 kB
el-CavMQDsC.js 43.6 kB 11.5 kB
ru-H8nqgFFm.js 40.7 kB 10.8 kB
mn-BxyZxuJ5.js 40.2 kB 10.6 kB
ja-BtFsMuKd.js 34.9 kB 10.0 kB
vi-Bcqy4LdF.js 33.0 kB 9.6 kB
fr-CZ-eHNsp.js 32.0 kB 9.6 kB
ko-Bb32H6Ak.js 31.4 kB 9.6 kB
es-DdNV-h6x.js 31.1 kB 9.4 kB
de-CbFEfA43.js 31.1 kB 9.6 kB
it-DD4euzsb.js 31.0 kB 9.3 kB
pt-BR-Cbf_3YVR.js 30.7 kB 9.3 kB
pt-DW4E6r-c.js 30.7 kB 9.3 kB
pl-CF0zuQ26.js 30.5 kB 9.7 kB
tr-DL8H77n1.js 30.1 kB 9.4 kB
fi-k38CvtC2.js 29.9 kB 9.4 kB
ms-CQM72fiU.js 29.2 kB 9.0 kB
id-D_84X5q5.js 29.1 kB 8.9 kB
zh-TW-Cw50I2iv.js 27.5 kB 9.6 kB
zh-CN-B4zoFQtW.js 27.3 kB 9.5 kB

No base measurement — the merge-base build was skipped (dependency changes, or the base build failed).


Generated by the PR Preview workflow · Storybook · CI run

github-actions Bot added a commit that referenced this pull request Oct 21, 2026
@github-actions

github-actions Bot commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor

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

Status Category Percentage Covered / Total
🔵 Lines 46.58% 3871 / 8309
🔵 Statements 43.89% 4961 / 11303
🔵 Functions 35.38% 702 / 1984
🔵 Branches 30.87% 2879 / 9326
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
packages/backend.ai-ui/src/components/BAIComplexSelect.tsx 100% 68.57% 100% 100%
packages/backend.ai-ui/src/components/BAISelect.tsx 85.89% 61.01% 77.27% 88% 315, 456-460, 498, 572-593, 663, 672
packages/backend.ai-ui/src/components/fragments/BAIRuntimeVariantPresetSettingModal.tsx 0.71% 0% 0% 1.04% 70-114, 131-564
packages/backend.ai-ui/src/components/fragments/BAIScopedVFolderSelect.tsx 78.37% 46.49% 59.09% 83.5% 128-130, 142-145, 264-265, 333-349, 381-386, 131-132, 257, 258
packages/backend.ai-ui/src/components/fragments/BAIVFolderMountConfigInput.tsx 79.82% 54.43% 54.16% 81.13% 135-136, 193, 282-285, 341-343, 346, 381-394, 431, 498-500, 549-610, 301
Generated in workflow #1335 for commit bb36b17 by the Vitest Coverage Report Action

@github-actions

github-actions Bot commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor

Coverage Report for react-coverage (./react)

Status Category Percentage Covered / Total
🔵 Lines 23.3% 9233 / 39622
🔵 Statements 20.79% 12233 / 58822
🔵 Functions 19.57% 1506 / 7692
🔵 Branches 16.64% 7024 / 42201
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
react/src/components/AccessKeySelect.tsx 0% 0% 0% 0% 17-54
react/src/components/ModelCardSelect.tsx 12.22% 6.25% 12.5% 15.87% 91-177, 174-234, 240-182
react/src/components/ProjectSelect.tsx 96.93% 57.29% 88.88% 100% 101, 176-177
react/src/components/ResourcePresetSelect.tsx 25.67% 28.4% 15.38% 26.08% 174-427
react/src/components/SessionFormItems/ResourceAllocationFormItems.tsx 76.92% 60.25% 69.84% 77.66% 136-137, 348, 357, 358-366, 398, 401-402, 431-443, 457-466, 485, 495-530, 559-562, 594, 602-604, 613, 616-617, 626-628, 659-663, 694-738, 760, 763-765, 771, 781-797, 853
Generated in workflow #2706 for commit bb36b17 by the Vitest Coverage Report Action

@agatha197

agatha197 commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor Author

Dev server on box sujin: stopped (was http://gh-10270-pr10279-read-launcher-s.sujin.10-82-0-159.sslip.io)

@agatha197

Copy link
Copy Markdown
Contributor Author

📍 Walkthrough · 2 stops · 84c4471 — Open the walkthrough
Served by gh-10493-pr10496-say-why-select.

  1. Session launcher › Resource Presets — modified select
    A preset that cannot be picked now shows a small ⓘ icon at the end of its row that explains why. Before, the reason only appeared when hovering anywhere on the greyed-out row.
    tooltip on the whole greyed row → ⓘ icon at the row end
    check: Open Resource Presets: a greyed-out preset (here "zz-too-big") ends with an ⓘ icon; hovering it shows "Exceeds the resources you can allocate with the current resource group and image". Allowed presets show no icon.
    code: packages/backend.ai-ui/src/components/BAIDisabledOptionReason.tsx:29, react/src/components/ResourcePresetSelect.tsx:253
  2. Runtime Parameters › Create Parameter › UI Type — modified select
    UI types that cannot show the chosen value type were greyed out with no explanation. They now carry an ⓘ icon that says why. The same icon now appears in every select with such options, including the Projects field of the user edit modal.
    check: With Value Type "String", open UI Type: Slider, Number Input and Checkbox are greyed out with an ⓘ icon; hovering it shows "This UI type cannot render the selected value type." Select and Text Input have no icon.
    code: packages/backend.ai-ui/src/components/fragments/BAIRuntimeVariantPresetSettingModal.tsx:821, packages/backend.ai-ui/src/components/BAISelect.tsx:465

github-actions Bot added a commit that referenced this pull request Oct 26, 2026
agatha197 and others added 2 commits October 26, 2026 14:17
A select option's `disabled` now takes `boolean | { reason: string }`
(`BAIOptionDisabled`), the shape BAINameActionCell row actions already
use. BAISelect and BAIComplexSelect draw a glyph at the end of a disabled
option whose tooltip carries the reason, so the row keeps its height when
many options share one reason, and the reason names the glyph for screen
readers. The glyph re-enables pointer events, which a disabled Astryx
Selector item turns off.

BAIScopedVFolderSelect takes `getFolderDisabled` returning the same union
instead of the boolean `isFolderDisabled`. The mount-folder input, project,
access key, model card, mount-permission, accelerator unit and runtime
preset value/UI type pickers pass a reason. ResourcePresetSelect and
ProjectSelect drop their own row tooltips and parallel `disabledReason`
field for the shared rendering.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…line

The creator email now reads like the usage mode, host and date beside it:
plain text between the existing separators.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@agatha197
agatha197 force-pushed the fix/gh-10493-disabled-option-reason branch from 7d947cb to 0ffd311 Compare October 26, 2026 05:17
github-actions Bot added a commit that referenced this pull request Oct 26, 2026
@agatha197
agatha197 requested a balanced review from Copilot October 26, 2026 05:30

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.

@agatha197

agatha197 commented Oct 26, 2026 •

Copy link
Copy Markdown
Contributor Author

Ready-gate agent review (Opus) - blocking issues only

# File:line Finding Outcome
O1 pnpm-workspace.yaml:13-14, BAIBoard.tsx:46,55,68 The ui-common canary this PR pins drops Board's renderItem, and BAIBoard still passes it: typecheck, Storybook build and BAIBoard.test.tsx fail, and board items render empty at runtime Won't apply here - intended. BAIBoard is left to the dashboard stack (#10619 and below), which adopts the new Board; see "ui-common pin and BAIBoard" in the PR body. Merge order: the dashboard stack first, then rebase this PR; merging this first would leave main's dashboard items empty.

Copilot: unavailable (insufficient remaining quota) - this review gated the PR alone.

@agatha197
agatha197 marked this pull request as ready for review October 26, 2026 05:38
…-option-reason

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

# Conflicts:
#	packages/backend.ai-ui/src/components/BAISelect.tsx
#	react/src/components/ResourcePresetSelect.tsx
#	react/src/components/VFolderNodeDescriptionV2.tsx
github-actions Bot added a commit that referenced this pull request Oct 27, 2026
ui-common now takes `disabled: { reason }` on Selector / MultiSelector
options and `isDisabled: { reason }` on PagedSelector options, and draws the
row-end glyph itself (lablup/ui-common#107). BAISelect and BAIComplexSelect
pass the union through, the folder mount-permission picker and
ResourcePresetSelect set it on their options, and BUI's
BAIDisabledOptionReason is removed. Pinned to the ui-common#107 preview.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
github-actions Bot added a commit that referenced this pull request Oct 27, 2026
@agatha197
agatha197 requested review from nowgnuesLee and a balanced review from Copilot October 27, 2026 09:25

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.

@agatha197
agatha197 marked this pull request as ready for review October 27, 2026 09:28
github-actions Bot added a commit that referenced this pull request Oct 27, 2026
…-option-reason

# Conflicts:
#	react/src/components/ProjectSelect.tsx
#	react/src/generated/searchIndex.json
#	resources/i18n/de.json
#	resources/i18n/el.json
#	resources/i18n/en.json
#	resources/i18n/es.json
#	resources/i18n/fi.json
#	resources/i18n/fr.json
#	resources/i18n/id.json
#	resources/i18n/it.json
#	resources/i18n/ja.json
#	resources/i18n/ko.json
#	resources/i18n/mn.json
#	resources/i18n/ms.json
#	resources/i18n/pl.json
#	resources/i18n/pt-BR.json
#	resources/i18n/pt.json
#	resources/i18n/ru.json
#	resources/i18n/th.json
#	resources/i18n/tr.json
#	resources/i18n/vi.json
#	resources/i18n/zh-CN.json
#	resources/i18n/zh-TW.json
github-actions Bot added a commit that referenced this pull request Oct 29, 2026
agatha197 and others added 2 commits October 29, 2026 08:02
…-option-reason

# Conflicts:
#	pnpm-lock.yaml
…rd to Board items

The ui-common release carrying disabled option reasons also drops Board's
renderItem; BAIBoard now hands each item's content to Board directly (same
change as #10627).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
github-actions Bot added a commit that referenced this pull request Oct 29, 2026
…-option-reason

# Conflicts:
#	pnpm-lock.yaml
#	react/src/generated/searchIndex.json
#	resources/i18n/de.json
#	resources/i18n/el.json
#	resources/i18n/en.json
#	resources/i18n/es.json
#	resources/i18n/fi.json
#	resources/i18n/fr.json
#	resources/i18n/id.json
#	resources/i18n/it.json
#	resources/i18n/ja.json
#	resources/i18n/ko.json
#	resources/i18n/mn.json
#	resources/i18n/ms.json
#	resources/i18n/pl.json
#	resources/i18n/pt-BR.json
#	resources/i18n/pt.json
#	resources/i18n/ru.json
#	resources/i18n/th.json
#	resources/i18n/tr.json
#	resources/i18n/vi.json
#	resources/i18n/zh-CN.json
#	resources/i18n/zh-TW.json
github-actions Bot added a commit that referenced this pull request Oct 30, 2026
…-option-reason

# Conflicts:
#	react/src/components/VFolderNodeDescriptionV2.tsx
…needs

ui-common's Board no longer takes renderItem, so BAIBoard passes each item's
data.content as its description and strips it again in onItemsChange. The
padding, header and doc rewrites copied from #10627 go back to main; the
dashboard rework lands them on its own.

Also regenerates searchIndex.json after the main merge dropped the folder
detail mount permission selector.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
github-actions Bot added a commit that referenced this pull request Oct 30, 2026
BAIScopedVFolderSelect takes disableUnmountable instead of a
getFolderDisabled callback and supplies the no-mount-permission reason
itself, so the key moves to its namespace. BAISelect / BAIComplexSelect
option types point at the ui-common option types instead of restating
the union.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@agatha197
agatha197 requested a review from nowgnuesLee October 30, 2026 05:51
github-actions Bot added a commit that referenced this pull request Oct 30, 2026
agatha197 and others added 2 commits October 30, 2026 06:29
The ui-common canary this PR pins also carries ui-common's Board API change,
which the dashboard stack (#10619 and below) adopts in full. Keeping a second
BAIBoard adaptation here would only conflict with it, so BAIBoard goes back
to main's. Until the dashboard stack lands, tsc reports BAIBoard on this
branch.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.

@nowgnuesLee nowgnuesLee left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

agatha197 added a commit that referenced this pull request Oct 30, 2026
Moves @lablup/ui-common and @lablup/ui-common-cli to
0.2.0-alpha.20.canary-20261029050354-1feb007cd, which carries
lablup/ui-common#107 (needed by #10496). No codemods run between the two
canaries; the AGENTS.md ui-common blocks are regenerated.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This branch has not been deployed

No deployments
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. size:L 100~500 LoC

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Show why a select option is disabled instead of only dimming it

3 participants