feat: Flow into Cluster creation smoothly

https://harperdb.atlassian.net/browse/STUDIO-481

Author: dawsontoth

src/features/clusters/ClustersList.tsx

@@ -2,6 +2,7 @@ import { SubNavMenu } from '@/components/SubNavMenu';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { ClusterCard } from '@/features/clusters/components/ClusterCard';
+import { UpsertCluster } from '@/features/clusters/upsert';
 import { getOrganizationQueryOptions } from '@/features/organization/queries/getOrganizationQuery';
 import { useOrganizationClusterPermissions } from '@/hooks/usePermissions';
 import { Cluster } from '@/lib/api.patch';
@@ -30,6 +31,10 @@ export function ClustersList() {
 			.filter(curryFilterByFuzzySearch<Cluster>(['id', 'name'], filterByNameValue))
 			.sort(byClusterStatusThenName) || [], [filterByNameValue, orgInfo?.clusters]);
 
+	if (!clusters.length && create) {
+		return <UpsertCluster embedded={true} />;
+	}
+
 	return (
 		<>
 			<SubNavMenu>
@@ -70,8 +75,7 @@ export function ClustersList() {
 				) : (
 					<div className="flex-col space-y-5 items-center justify-center text-center">
 						<h2 className="text-2xl text-center text-white">
-							No clusters found.
-							{create && ' Want to create a new cluster?'}
+							No clusters found.{!create ? ' Talk to your org admin to create one!' : ''}
 						</h2>
 
 						{create && (

src/features/clusters/upsert/ClusterForm.tsx

@@ -32,6 +32,7 @@ interface ClusterFormProps {
 	clusterId?: string;
 	defaultValues: z.infer<typeof UpsertClusterSchema>;
 	deploymentToPerformanceToPlan: Record<string, Record<string, SchemaPlan>>;
+	embedded: boolean | undefined;
 	organization: Organization;
 	organizationId: string;
 	planTypes: SchemaPlan[];
@@ -46,6 +47,7 @@ export function ClusterForm({
 	clusterId,
 	defaultValues,
 	deploymentToPerformanceToPlan,
+	embedded,
 	organization,
 	organizationId,
 	planTypes,
@@ -284,7 +286,8 @@ export function ClusterForm({
 		}
 
 		void router.invalidate();
-		void navigate({ to: creating ? '../' : '../../' });
+		void navigate({ to: creating ? embedded ? './' : '../' : '../../' });
+		form.reset();
 		toast.success(creating ? 'Cluster Created' : 'Cluster Updated', {
 			id: toastId,
 			description: isSelfManaged

src/features/clusters/upsert/index.tsx

@@ -20,7 +20,7 @@ import { useParams, useRouteContext } from '@tanstack/react-router';
 import { useMemo } from 'react';
 import { z } from 'zod';
 
-export function UpsertCluster() {
+export function UpsertCluster(params?: { embedded?: boolean }) {
 	const { organizationId, clusterId }: { organizationId: string; clusterId?: string } = useParams({ strict: false });
 	const { organization, cluster }: {
 		organization: Organization;
@@ -151,6 +151,7 @@ export function UpsertCluster() {
 				clusterId={clusterId}
 				defaultValues={defaultValues}
 				deploymentToPerformanceToPlan={deploymentToPerformanceToPlan}
+				embedded={params?.embedded}
 				organization={organization}
 				organizationId={organizationId}
 				planTypes={planTypes}