User story:

Implement a new cluster details page, including the header with breadcrumb, alerts, Open Console button

Tabs and tab contents are out-of-scope.

Acceptance criteria:

• Works for both default/commercial/global/legacy and regional clusters
• Shows name and alerts for current clusters
• Open console URL button works as expected
• Works for both a regional (aka XCM) and global (non-XCM) clusters

Out of scope:

• Cluster actions for regional clusters
• Converting to TypeScript
• Actions menu

Mockups:

Looks the same as today

-------------------------------------------------------------------------------------------------------------------------------

Implementation details

The goal is that, if possible, this will replace the existing ClusterDetails.jsx page (and possibly the corresponding index page).  This means that the fetching of cluster data via React Query will be controlled by the feature gates and URL flag (aka use React Query to get data only if both of these are true).  If the feature gates/flags are false then data will be fetched and stored into Redux.

But if this becomes difficult during development we can copy the component and use feature flags at the routing level to get into this component.

We may also want, if the feature flag/gates are true  hiding all tabs and the cluster actions.  The tabs will be turned on one-by-one (if feature gates/flags are true) as work is completed.

The modification/addition of unit tests will need to be determined if that work is part of this story or a future story.