feat(cluster): add views #2253

RemiBonnet · 2025-12-22T15:37:19Z

Summary

Add cluster overview and routing for other cluster routes

Screenshots / Recordings

Testing

Changes tested locally in the relevant Console's pages and Storybooks
yarn test or yarn test -u (if you need to regenerate snapshots)
yarn format
yarn lint

PR Checklist

I followed naming, styling, and TypeScript rules (see .cursor/rules)
I performed a self-review (diff inspected, dead code removed)
I titled the PR using Conventional Commits with a scope when possible (e.g. feat(service): add new Terraform service) - required for semantic-release
I only kept necessary comments, written in English (watch for useless AI comments)
I involved a designer to validate UI changes if I am not a designer
I covered new business logic with tests (unit)
I confirmed CI is green (Codecov red can be accepted)
I reviewed and executed locally any AI-assisted code

Note

Cluster navigation & routing

Adds cluster-logs route and replaces monolithic settings with subroutes: general, credentials, resources, image-registry, danger-zone, advanced-settings (with settings/ index redirect)
Updates generated routeTree.gen.ts and cluster navbar to include "Cluster Logs"

Cluster overview page

Implements cluster/$clusterId/overview with metrics cards (ClusterCardNodeUsage, ClusterCardResources, ClusterCardSetup), node/nodepool tables, terminal integration, redeploy banner, and sockets for live status/metrics

Router & link refactor

Migrates navigation/actions to TanStack Router (replacing react-router-dom usages), adds params support to shared Link, and updates mocks/tests accordingly

Data & UI enhancements

Adds clusters.listServices query + useServicesCluster and shows service count in production card
Introduces ClusterNeedRedeployFlag; broad UI token/class updates for neutral/brand/warning/positive states; minor icon fix

Tests & config

Updates/extends tests and snapshots; adds tags/test targets to webflow libraries

^{Written by Cursor Bugbot for commit de5ba78. This will update automatically on new commits. Configure here.}

RemiBonnet · 2025-12-22T15:37:22Z

Qovery can create a Preview Environment for this PR.
To trigger its creation, please post a comment with one of the following command.

Command	Blueprint environment
/qovery preview 15d69f24-9bc1-4a8d-80fe-d1bb1b2bcd00	New Navigation
/qovery preview {all\|UUID1,UUID2,...}	To preview multiple environments

This comment has been generated from Qovery AI 🤖.
Below, a word from its wisdom :

The backlog never ends, be at peace with it

…tion route structure and navigation components

…stency

cursor

This is the final PR Bugbot will review for you during this billing cycle

Your free Bugbot reviews will reset on January 22

Details

You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

cursor · 2025-12-23T15:10:57Z

libs/domains/clusters/feature/src/lib/cluster-terminal/cluster-terminal-provider.tsx

-  }, [state?.hasShell])
+  }, [searchParams])
+
+  console.log('open', open)


Debug console.log accidentally left in production code

A console.log('open', open) statement appears to be debugging code that was accidentally left in the ClusterTerminalProvider component. This will log to the browser console on every render of any component using this provider, which is inappropriate for production code.

...le-v5/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/overview.tsx

cursor · 2025-12-23T15:37:36Z

libs/domains/clusters/feature/src/lib/cluster-terminal/cluster-terminal-provider.tsx

      setOpen(true)
    }
-  }, [state?.hasShell])
+  }, [searchParams])


Terminal state persists in URL causing unwanted reopens

The hasShell search parameter is added to the URL when opening the cluster terminal but is never cleared afterward. Unlike the show-self-managed-guide parameter which is explicitly deleted after processing, hasShell persists indefinitely. This causes the terminal to auto-open on page refresh and when the URL is shared. The old implementation using state (navigation state) was ephemeral and didn't persist, but the new search params approach stores state in the URL without cleanup.

Additional Locations (1)

libs/domains/clusters/feature/src/lib/cluster-action-toolbar/cluster-action-toolbar.tsx#L364-L372

cursor · 2025-12-23T15:37:36Z

libs/domains/clusters/feature/src/lib/cluster-action-toolbar/cluster-action-toolbar.tsx

    }
    return () => (bool ? closeModal() : undefined)
-  }, [searchParams, setSearchParams, cluster.kubernetes, closeModal])
+  }, [searchParams, location.search, location.pathname, cluster.kubernetes, closeModal, openInstallationGuideModal])


ON_PREMISE clusters show wrong modal type via URL

When the show-self-managed-guide URL parameter triggers the installation guide modal, it only checks cluster.kubernetes === 'SELF_MANAGED' but ignores cluster.cloud_provider. For ON_PREMISE clusters, clicking the button correctly passes { type: 'ON_PREMISE' }, but the useEffect always calls openInstallationGuideModal() without arguments, defaulting to type='MANAGED'. This causes ON_PREMISE clusters to display incorrect installation instructions (YAML download instead of CLI-based setup guide) when opened via URL parameter.

* feat(routes): add cluster logs and settings routes, refactor organization route structure and navigation components * fix(cluster-overview): card colors * fix(cluster-overview): table colors * fix(cluster-setup-modal): update text colors and improve layout consistency * fix(cluster-access-modal): add new token * fix(cluster): update token overview * Enhance layout consistency in cluster overview components * fix: some tests

* Add new tokens with tailwind alias config * Add toggle theme and new app console-v5 * feat(navigation): add general layout (#2110) * feat: add navbar and init layout * feat: start breadcrumb and update all popover and dropdown menu colors * feat(new-nav): add basis for routing (#2206) feat: add basis for routing --------- Co-authored-by: Romain Billard <rmnbrd@users.noreply.github.com> * Update Dockerfile and package.json for console-v5 (#2225) Update Dockerfile and package.json for console-v5 build and preview commands * fix(new-nav): update router and its layouts (#2227) feat: add login route * feat(organization-overview): add webflow changelog section (#2230) * Init organization overview * Add webflow libraries * feat(new-nav): add authentication (#2232) * feat: add basis for authentication * chore: rename orgId to organizationId * fix: glitch when switching routes * impr: cleaning up auth-redirect component * fix: import statements * impr(new-nav): add logout button and better redirection (#2237) impr: add logout button and better redirection * feat(organization-overview): changelog, links + draft project and prod sections (#2238) feat(organization-overview): add first part of sections * fix(new-nav): auth context (#2239) * feat(organization-overview): start production health cluster (#2242) * feat(navigation): add general layout (#2110) * feat: add navbar and init layout * feat: start breadcrumb and update all popover and dropdown menu colors * feat(new-nav): add basis for routing (#2206) feat: add basis for routing --------- Co-authored-by: Romain Billard <rmnbrd@users.noreply.github.com> * feat(organization-overview): first part production health cluster * fix(routes): routeTree.gen.ts * Add feedback * Remove useless file --------- Co-authored-by: Romain Billard <rmnbrd@users.noreply.github.com> * feat(badge): update token (#2245) * feat(cluster): starting views (#2249) * feat(cluster-card): token * feat(organization-navigation): implement dynamic navigation context and refactor organization route * feat(routes): add audit logs and cluster settings routes, update breadcrumbs for cluster navigation * refactor(routes): remove pathname state from links in environment and service components (tanstack not compatible) * feat(cluster): add overview (#2253) * feat(routes): add cluster logs and settings routes, refactor organization route structure and navigation components * fix(cluster-overview): card colors * fix(cluster-overview): table colors * fix(cluster-setup-modal): update text colors and improve layout consistency * fix(cluster-access-modal): add new token * fix(cluster): update token overview * Enhance layout consistency in cluster overview components * fix: some tests * feat(sidebar): add new component for navigation (#2259) * feat(sidebar): add new component deprecated navigation-left * feat(sidebar): add new component * feat(cluster-logs): add new view (#2260) * feat(cluster-logs): init new row with token * feat(routes): update route tree and add layout configuration - Refactored route imports in `routeTree.gen.ts` to include new routes and improve organization. - Introduced `route-layout-config.ts` to manage layout options for routes. - Enhanced `OrganizationRoute` to conditionally apply full-width layout based on route context. - Updated `ClusterLogs` component to include scrolling behavior and improved layout handling. - Added new components for cluster log rows and headers with associated tests. * fix(cluster-logs): adjust scroll behavior and layout improvements - Updated scroll behavior to include additional padding for better visibility of logs. - Enhanced layout structure by modifying the component hierarchy for improved responsiveness. - Adjusted styling for the log header and container to ensure consistent appearance across different states. * fix(tokens): update callout & progress-bar components * feat(cluster): add general settings (#2264) * feat(cluster): add general settings * refactor(routes): update route tree and improve organization of authenticated routes - Refactored route imports in `routeTree.gen.ts` to include new routes for login and organization settings. - Enhanced `ClusterGeneralSettingsForm` component by separating it from the main route component for better readability and maintainability. - Updated form handling logic to simplify the submission process and improve user experience. * feat(cluster): add credentials settings (#2268) * feat(cluster): add credentials settings - Added a new form for managing cluster credentials in the `credentials.tsx` file, improving user interaction with cloud provider credentials. - Updated the `general.tsx` file to enhance the layout and user experience of the general settings form. - Refactored the `route.tsx` file to improve the sidebar layout and ensure consistent styling. - Enhanced the `ClusterCredentialsSettingsFeature` to utilize the correct `useParams` hook for better parameter handling. * feat(cluster-settings): enhance sidebar links based on cluster type - Introduced dynamic sidebar links in the settings route based on the cluster's cloud provider and Kubernetes management type. - Added a new link for EKS Anywhere configuration when applicable. - Refactored the sidebar link structure for improved readability and maintainability. - Integrated feature flag for EKS Anywhere to conditionally display relevant settings. * refactor(link): update link styles and improve consistency - Modified link component styles to enhance visual consistency across the application. - Updated color classes for better alignment with design standards. - Adjusted snapshot tests to reflect the new styling changes. * refactor(routes): update route imports and enhance organization - Refactored route imports in `routeTree.gen.ts` to include additional routes for login and organization settings. - Improved the structure and readability of the route definitions. - Updated the link component styles to include a gap between items for better visual consistency. * fix(sticky): ensure dropdown overlays above sticky header (#2269) * fix(sticky): ensure dropdown overlays above sticky header * feat(z-index): introduce z-index variables and apply them across modal and header components - Added z-index variables for header, dropdown, overlay, modal, tooltip, and toast in main.scss. - Updated tailwind-workspace-preset.js to include new z-index values. - Refactored modal and header components to utilize the new z-index variables for improved layering and visibility. * feat(sidebar): implement keyboard navigation for focusable elements - Added keyboard navigation support in the Sidebar component to allow users to navigate through focusable elements using ArrowUp and ArrowDown keys. - Refactored the SidebarRoot component to include a handleKeyDown function that manages focus based on keyboard input. * refactor(breadcrumbs): reorder class names for consistency and improve z-index usage * feat(cluster): add danger-zone settings (#2272) * feat(cluster): add danger-zone settings * refactor(header): adjust z-index for dropdown menu and header layout * feat(cluster): add resources settings (#2271) * feat(new-nav): add onboarding views * feat(new-nav): add plans and project onboarding views * feat: add accept-invite route * post-review fixes * impr: post-review fixes * fix: post-review fixes part 1 * impr: move accept-invite to onboarding lib * impr: get rid of the onboarding pages * fix: accept-invitation page * impr: remove useless chargebee utility functions * impr: update tokens * fix: add missing redirection after logging in with a brand new account --------- Co-authored-by: RemiBonnet <bonnet.rem@gmail.com>

* feat(routes): add cluster logs and settings routes, refactor organization route structure and navigation components * fix(cluster-overview): card colors * fix(cluster-overview): table colors * fix(cluster-setup-modal): update text colors and improve layout consistency * fix(cluster-access-modal): add new token * fix(cluster): update token overview * Enhance layout consistency in cluster overview components * fix: some tests

* Add new tokens with tailwind alias config * Add toggle theme and new app console-v5 * feat(navigation): add general layout (#2110) * feat: add navbar and init layout * feat: start breadcrumb and update all popover and dropdown menu colors * feat(new-nav): add basis for routing (#2206) feat: add basis for routing --------- Co-authored-by: Romain Billard <rmnbrd@users.noreply.github.com> * Update Dockerfile and package.json for console-v5 (#2225) Update Dockerfile and package.json for console-v5 build and preview commands * fix(new-nav): update router and its layouts (#2227) feat: add login route * feat(organization-overview): add webflow changelog section (#2230) * Init organization overview * Add webflow libraries * feat(new-nav): add authentication (#2232) * feat: add basis for authentication * chore: rename orgId to organizationId * fix: glitch when switching routes * impr: cleaning up auth-redirect component * fix: import statements * impr(new-nav): add logout button and better redirection (#2237) impr: add logout button and better redirection * feat(organization-overview): changelog, links + draft project and prod sections (#2238) feat(organization-overview): add first part of sections * fix(new-nav): auth context (#2239) * feat(organization-overview): start production health cluster (#2242) * feat(navigation): add general layout (#2110) * feat: add navbar and init layout * feat: start breadcrumb and update all popover and dropdown menu colors * feat(new-nav): add basis for routing (#2206) feat: add basis for routing --------- Co-authored-by: Romain Billard <rmnbrd@users.noreply.github.com> * feat(organization-overview): first part production health cluster * fix(routes): routeTree.gen.ts * Add feedback * Remove useless file --------- Co-authored-by: Romain Billard <rmnbrd@users.noreply.github.com> * feat(badge): update token (#2245) * feat(cluster): starting views (#2249) * feat(cluster-card): token * feat(organization-navigation): implement dynamic navigation context and refactor organization route * feat(routes): add audit logs and cluster settings routes, update breadcrumbs for cluster navigation * refactor(routes): remove pathname state from links in environment and service components (tanstack not compatible) * feat(cluster): add overview (#2253) * feat(routes): add cluster logs and settings routes, refactor organization route structure and navigation components * fix(cluster-overview): card colors * fix(cluster-overview): table colors * fix(cluster-setup-modal): update text colors and improve layout consistency * fix(cluster-access-modal): add new token * fix(cluster): update token overview * Enhance layout consistency in cluster overview components * fix: some tests * feat(sidebar): add new component for navigation (#2259) * feat(sidebar): add new component deprecated navigation-left * feat(sidebar): add new component * feat(cluster-logs): add new view (#2260) * feat(cluster-logs): init new row with token * feat(routes): update route tree and add layout configuration - Refactored route imports in `routeTree.gen.ts` to include new routes and improve organization. - Introduced `route-layout-config.ts` to manage layout options for routes. - Enhanced `OrganizationRoute` to conditionally apply full-width layout based on route context. - Updated `ClusterLogs` component to include scrolling behavior and improved layout handling. - Added new components for cluster log rows and headers with associated tests. * fix(cluster-logs): adjust scroll behavior and layout improvements - Updated scroll behavior to include additional padding for better visibility of logs. - Enhanced layout structure by modifying the component hierarchy for improved responsiveness. - Adjusted styling for the log header and container to ensure consistent appearance across different states. * fix(tokens): update callout & progress-bar components * feat(cluster): add general settings (#2264) * feat(cluster): add general settings * refactor(routes): update route tree and improve organization of authenticated routes - Refactored route imports in `routeTree.gen.ts` to include new routes for login and organization settings. - Enhanced `ClusterGeneralSettingsForm` component by separating it from the main route component for better readability and maintainability. - Updated form handling logic to simplify the submission process and improve user experience. * feat(cluster): add credentials settings (#2268) * feat(cluster): add credentials settings - Added a new form for managing cluster credentials in the `credentials.tsx` file, improving user interaction with cloud provider credentials. - Updated the `general.tsx` file to enhance the layout and user experience of the general settings form. - Refactored the `route.tsx` file to improve the sidebar layout and ensure consistent styling. - Enhanced the `ClusterCredentialsSettingsFeature` to utilize the correct `useParams` hook for better parameter handling. * feat(cluster-settings): enhance sidebar links based on cluster type - Introduced dynamic sidebar links in the settings route based on the cluster's cloud provider and Kubernetes management type. - Added a new link for EKS Anywhere configuration when applicable. - Refactored the sidebar link structure for improved readability and maintainability. - Integrated feature flag for EKS Anywhere to conditionally display relevant settings. * refactor(link): update link styles and improve consistency - Modified link component styles to enhance visual consistency across the application. - Updated color classes for better alignment with design standards. - Adjusted snapshot tests to reflect the new styling changes. * refactor(routes): update route imports and enhance organization - Refactored route imports in `routeTree.gen.ts` to include additional routes for login and organization settings. - Improved the structure and readability of the route definitions. - Updated the link component styles to include a gap between items for better visual consistency. * fix(sticky): ensure dropdown overlays above sticky header (#2269) * fix(sticky): ensure dropdown overlays above sticky header * feat(z-index): introduce z-index variables and apply them across modal and header components - Added z-index variables for header, dropdown, overlay, modal, tooltip, and toast in main.scss. - Updated tailwind-workspace-preset.js to include new z-index values. - Refactored modal and header components to utilize the new z-index variables for improved layering and visibility. * feat(sidebar): implement keyboard navigation for focusable elements - Added keyboard navigation support in the Sidebar component to allow users to navigate through focusable elements using ArrowUp and ArrowDown keys. - Refactored the SidebarRoot component to include a handleKeyDown function that manages focus based on keyboard input. * refactor(breadcrumbs): reorder class names for consistency and improve z-index usage * feat(cluster): add danger-zone settings (#2272) * feat(cluster): add danger-zone settings * refactor(header): adjust z-index for dropdown menu and header layout * feat(cluster): add resources settings (#2271) * feat(new-nav): add onboarding views * feat(new-nav): add plans and project onboarding views * feat: add accept-invite route * post-review fixes * impr: post-review fixes * fix: post-review fixes part 1 * impr: move accept-invite to onboarding lib * impr: get rid of the onboarding pages * fix: accept-invitation page * impr: remove useless chargebee utility functions * impr: update tokens * fix: add missing redirection after logging in with a brand new account --------- Co-authored-by: RemiBonnet <bonnet.rem@gmail.com>

feat(routes): add cluster logs and settings routes, refactor organiza…

f6dc4ed

…tion route structure and navigation components

RemiBonnet force-pushed the feat/cluster-views branch from dece540 to f6dc4ed Compare December 22, 2025 15:38

RemiBonnet added 5 commits December 23, 2025 12:11

fix(cluster-overview): card colors

e1b5d73

fix(cluster-overview): table colors

b54af78

fix(cluster-setup-modal): update text colors and improve layout consi…

bcd63cb

…stency

fix(cluster-access-modal): add new token

7d83791

fix(cluster): update token overview

9db4861

RemiBonnet marked this pull request as ready for review December 23, 2025 15:07

cursor bot reviewed Dec 23, 2025

View reviewed changes

Enhance layout consistency in cluster overview components

c7648b1

cursor bot reviewed Dec 23, 2025

View reviewed changes

fix: some tests

de5ba78

RemiBonnet merged commit f4653f6 into new-navigation Dec 24, 2025
2 checks passed

RemiBonnet deleted the feat/cluster-views branch December 24, 2025 08:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(cluster): add views #2253

feat(cluster): add views #2253

Uh oh!

RemiBonnet commented Dec 22, 2025 •

edited by cursor bot

Loading

Uh oh!

RemiBonnet commented Dec 22, 2025

Uh oh!

cursor bot left a comment

Uh oh!

cursor bot Dec 23, 2025

Uh oh!

Uh oh!

cursor bot Dec 23, 2025

Uh oh!

cursor bot Dec 23, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat(cluster): add views #2253

feat(cluster): add views #2253

Uh oh!

Conversation

RemiBonnet commented Dec 22, 2025 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots / Recordings

Testing

PR Checklist

Uh oh!

RemiBonnet commented Dec 22, 2025

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

This is the final PR Bugbot will review for you during this billing cycle

Uh oh!

cursor bot Dec 23, 2025

Choose a reason for hiding this comment

Debug console.log accidentally left in production code

Uh oh!

Uh oh!

cursor bot Dec 23, 2025

Choose a reason for hiding this comment

Terminal state persists in URL causing unwanted reopens

Uh oh!

cursor bot Dec 23, 2025

Choose a reason for hiding this comment

ON_PREMISE clusters show wrong modal type via URL

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

RemiBonnet commented Dec 22, 2025 •

edited by cursor bot

Loading