fix(clusters): improve BYOC setup and profile design

Merged
TH
2d ago
+584-110

Summary

Improve BYOC cluster setup and profile settings: keep credential and region dropdowns scrollable within short viewports, layer nested modal overlays correctly, and align operator configuration fields and taint lists with the existing UI patterns.

  • Center profile inputs, overlap active tab indicators with separators, and make Save and deploy the primary action.
  • Add a compact InputSearch size that scales the icon and spacing, and use it in the profile sidebar.
  • Simplify the operator status popover and hide the update action when the operator is up to date.

Operator configuration: scope and rationale

The new OperatorConfigurationField is dedicated to the Configure Qovery Operator step during BYOC setup. This modal needs full-width inputs with descriptions underneath and a taint list styled like organization settings, while the Profile page uses rows with labels on the left and inputs on the right. Keeping the modal presentation separate avoids adding operator-specific layout options and taint labels to the shared ProfileConfigurationField.

The component supports only scalar fields and the node-group taint object array. It handles the taint empty state, summary rows, add/edit/remove actions, item limits, and validation errors. It reuses SchemaFieldInput, ProfileArrayItemModal, and existing schema utilities rather than introducing another input or modal implementation. It updates local form values; the surrounding creation flow remains responsible for API operations. General nested-object and arbitrary-array editing are outside its scope.

Screenshots

BYOC setup: consistent field spacing and a capped region dropdown that extends beyond the modal without being clipped.

BYOC setup and region dropdown

Operator configuration: full-width inputs, descriptions beneath each field, and the dedicated taint empty state.

Operator configuration and taint empty state

Profile settings: compact sidebar search, vertically centered inputs, tab underlines aligned with the divider, and a primary “Save and deploy” action.

Profile settings and save actions

Operator status: concise status and version details, with target versions retained below installed versions.

Operator status popover

Validation

Focused cluster and shared UI tests passed during implementation. Added regression coverage for taint editing and operator status, plus Storybook examples for compact search, modal dropdowns, and stacked modals. Git diff whitespace check passed.

Tests and browser checks were not rerun for the final styling changes, as requested.

Summary by cubic

Improves BYOC cluster setup and profile settings: credential and region dropdowns stay scrollable inside short viewports, stacked modals dim correctly, and operator status and setup configuration match existing UI patterns.

  • Credential and region dropdowns now render portaled with a capped menu height so they stay scrollable inside modals, and the creation modal uses the existing fake-modal mode to avoid a document-level scroll lock.
  • Modal overlays share their layer with the content so a child dialog dims the parent.
  • Operator status drops the descriptive text, shows installed versions with concise labels like "Up-to-date", and hides the update action when up to date.
  • Operator setup now shows only basic fields and node-group taints; taints render as a card-based list with summaries, an empty state, and add/edit/remove modals. Read-only fields display the API-resolved value, and violations on unsupported fields surface as alert banners.
  • Search icons no longer intercept pointer events, and the compact InputSearch size preserves default markup for existing callers.
  • Profile inputs are center-aligned, Save and deploy is the primary action, and tab indicators no longer overlap separators.
  • Adds Storybook examples, regression tests, and contributor workflow guidance in AGENTS.md.