chore(clusters): engine v2 review improvements

Merged
RM
11d ago
+453-158

Summary

Improvements from reviewing the Engine v2 branch (origin/staging...HEAD) against every project skill: qovery-console-standards, qovery-ui, react-useeffect, vercel-react-best-practices and web-design-guidelines. Based on feat/cluster-engine-v2 (after #3057), one commit per change.

Bugs

  • Keep edits made while saving: a successful save cleared every local edit, including ones typed while the request was in flight. It now removes only the values it submitted.
  • Redirect once when the Operator connects: the install effect ran again on each parent re-render. With a parent that updates state in onClose, onClose ran 53 times in the test.
  • Item modal dismissed with Escape: the modal's "open" flag stayed set, so unmounting the field later closed an unrelated modal.
  • Focus outline: focus-visible:ring-brand generates no CSS, so the profile sidebar and Operator footer buttons had Tailwind's default blue ring. They now use outline-brand-strong, like the rest of the console.
  • Provider icons in ClusterAvatar: OVH, ORACLE and IBM now map to their *_CLOUD icons for every avatar (breadcrumbs, cards, overview). The profile header uses ClusterAvatar instead of its own mapping.

Performance

  • No debounce on component switches: opening another component no longer waits 300 ms before its preview request, so the skeleton doesn't flash even when the preview is cached. Edits are still debounced.

Consistency

  • Copy:
    • "Qovery Operator" casing everywhere.
    • Loading layers… with an ellipsis.
    • Error text that says what to do next.
    • The search empty states no longer mention filters, which were removed.
    • No trailing period on the tooltip.
  • Sidebar layer icon: the Font Awesome layer-group icon replaces a CSS mask of apps/console/public/assets/sidebar-test/layer.svg. The feature lib no longer depends on an app asset, and the SVG is deleted.
  • Route ids: ProfileOperatorFooter and ClusterOperatorStatus read the route ids with useParams instead of receiving them as props.
  • isHttpStatus: no longer exported publicly from clusters data-access.
  • Console logging: the dev-only API response logs in cluster-profile.tsx are removed; the branch has no console calls left.

Tests

  • Spec for the platform configuration helpers.
  • InputSearch tests use userEvent instead of fireEvent.
  • Unused import removed.

Not included (for discussion)

  • Product or design choices:
    • Label the Operator step's submit "Create cluster" instead of "Continue".
    • Replace the changes bar's hardcoded shadow and button gaps with tokens (they follow Figma today).
    • Revert the green EmptyState variant.
    • Add skeletons to the profile header.
  • Larger changes:
    • Real links for the profile tabs (Cmd-click, copy link).
    • Debounce or defer search URL updates.
    • Prefetch the profile queries in a route loader.
    • Warn before leaving with unsaved changes.
    • Move focus to the heading on each creation step.
    • Live regions for the polling install step.
    • Link input errors with aria-invalid / aria-describedby in shared inputs.
    • Make the password toggle a keyboard-reachable button.
    • Batch the per-card Operator status requests on the clusters list.

Test plan

  • jest: clusters feature (561), shared ui (471), clusters data-access
  • New tests fail without their fix (save, redirect, modal dismissal, debounce, avatar icons)
  • tsc app and libs, ESLint, Prettier
  • yarn build:console

🤖 Generated with Claude Code

Summary by cubic

Applies code review improvements to the Engine v2 cluster profile and creation flows, fixing four bugs and tightening performance, consistency, and test coverage.

Bug fixes

  • Saving no longer clears edits typed while the request was in flight.
  • The Operator connect redirect runs once even if the parent re-renders.
  • Item modals report their mount state explicitly, so dismissing by Escape no longer leaves a stale flag that could close an unrelated modal later, and StrictMode double-mounting is handled.
  • OVH, Oracle, and IBM clusters now show their *_CLOUD icons in all avatars, and the profile header uses ClusterAvatar.

Refactors

  • The edit debounce now applies to profile edits only, so switching components previews immediately.
  • Copy is aligned ("Qovery Operator", Loading layers…, action-oriented errors); the sidebar shows "No layers match your search" only when searching, else "No layers available"; and the layer icon uses the Font Awesome layer-group icon.
  • ProfileOperatorFooter and ClusterOperatorStatus read route ids via useParams, isHttpStatus is no longer publicly exported, and dev-only API response logging is removed.
  • Added tests for the platform configuration helpers and avatar icons, and InputSearch tests now use userEvent.