fix: Load cluster when editing properly

By switching to using the clusterLayoutRoute, the cluster in the route context will be populated properly.

Author: dawsontoth

src/features/cluster/clusterLayoutRoute.ts

@@ -0,0 +1,15 @@
+import { ClusterLayout } from '@/features/cluster/ClusterLayout';
+import { getClusterInfoQueryOptions } from '@/features/cluster/queries/getClusterInfoQuery';
+import { clustersLayoutRoute } from '@/features/clusters/routes';
+import { createRoute } from '@tanstack/react-router';
+
+export const clusterLayoutRoute = createRoute({
+	getParentRoute: () => clustersLayoutRoute,
+	path: '$clusterId',
+	component: ClusterLayout,
+	beforeLoad: async ({ context, params }) => {
+		return {
+			cluster: await context.queryClient.ensureQueryData(getClusterInfoQueryOptions(params.clusterId)),
+		};
+	},
+});

src/features/cluster/routes.ts

@@ -1,23 +1,10 @@
 import { defaultInstanceRouteUpOne } from '@/config/constants';
 import { ClusterInstanceSignIn } from '@/features/auth/ClusterInstanceSignIn';
-import { ClusterLayout } from '@/features/cluster/ClusterLayout';
+import { clusterLayoutRoute } from '@/features/cluster/clusterLayoutRoute';
 import { ClusterSetPassword } from '@/features/cluster/ClusterSetPassword';
 import { ClusterIndex } from '@/features/cluster/index';
-import { getClusterInfoQueryOptions } from '@/features/cluster/queries/getClusterInfoQuery';
-import { clustersLayoutRoute } from '@/features/clusters/routes';
 import { createRoute, redirect } from '@tanstack/react-router';
 
-export const clusterLayoutRoute = createRoute({
-	getParentRoute: () => clustersLayoutRoute,
-	path: '$clusterId',
-	component: ClusterLayout,
-	beforeLoad: async ({ context, params }) => {
-		return {
-			cluster: await context.queryClient.ensureQueryData(getClusterInfoQueryOptions(params.clusterId)),
-		};
-	},
-});
-
 const clusterIndexRoute = createRoute({
 	getParentRoute: () => clusterLayoutRoute,
 	path: 'instances',

src/features/clusters/routes.ts

@@ -1,3 +1,4 @@
+import { clusterLayoutRoute } from '@/features/cluster/clusterLayoutRoute';
 import { ClustersList as ClusterList } from '@/features/clusters/ClustersList';
 import { UpsertCluster } from '@/features/clusters/upsert';
 import { orgLayoutRoute } from '@/features/organization/routes';
@@ -21,8 +22,8 @@ const newClusterRoute = createRoute({
 });
 
 const editClusterRoute = createRoute({
-	getParentRoute: () => orgLayoutRoute,
-	path: '$clusterId/edit',
+	getParentRoute: () => clusterLayoutRoute,
+	path: '/edit',
 	component: UpsertCluster,
 });
 

src/features/instance/instanceLayoutRoute.ts

@@ -1,6 +1,6 @@
-import { clusterLayoutRoute } from '@/features/cluster/routes';
-import { InstanceLayout } from '@/features/instance/InstanceLayout';
+import { clusterLayoutRoute } from '@/features/cluster/clusterLayoutRoute';
 import { getInstanceInfoQueryOptions } from '@/features/cluster/queries/getInstanceInfoQuery';
+import { InstanceLayout } from '@/features/instance/InstanceLayout';
 import { buildRedirectInSearch } from '@/lib/urls/buildRedirectInSearch';
 import { dashboardLayout } from '@/router/dashboardRoute';
 import { createRoute, redirect } from '@tanstack/react-router';

src/router/rootRouteTree.ts

@@ -1,13 +1,14 @@
 import { isLocalStudio } from '@/config/constants';
-import { rootRoute } from '@/router/rootRoute';
 import { authRouteTree, localAuthRoutes } from '@/features/auth/routes';
-import { dashboardLayout } from '@/router/dashboardRoute';
+import { clusterLayoutRoute } from '@/features/cluster/clusterLayoutRoute';
+import { clusterRoutes } from '@/features/cluster/routes';
+import { clustersLayoutRoute, clustersRoutes } from '@/features/clusters/routes';
 import { createInstanceRouteTree } from '@/features/instance/routes';
-import { orgsLayoutRoute, orgsRoutes } from '@/features/organizations/routes';
 import { orgLayoutRoute, orgRoutes } from '@/features/organization/routes';
-import { clustersLayoutRoute, clustersRoutes } from '@/features/clusters/routes';
-import { clusterLayoutRoute, clusterRoutes } from '@/features/cluster/routes';
+import { orgsLayoutRoute, orgsRoutes } from '@/features/organizations/routes';
 import { profileRoutes } from '@/features/profile/routes';
+import { dashboardLayout } from '@/router/dashboardRoute';
+import { rootRoute } from '@/router/rootRoute';
 
 export const rootRouteTree = isLocalStudio
 	? rootRoute.addChildren([