Skip to content

Commit 8d6fa14

Browse files
dawsontothdawsontoth
authored
Merge pull request #587 from HarperDB/STUDIO-367_handle-zero-plans-or-regions
[STUDIO-367] Handle empty plan and region responses
2 parents b15c891 + 66602e0 commit 8d6fa14

File tree

5 files changed

+92
-30
lines changed

5 files changed

+92
-30
lines changed

‎src/components/ErrorComponent.tsx‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,31 @@
1-
import { Link } from '@tanstack/react-router';
21
import { Button } from '@/components/ui/button';
32
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
4-
import { ArrowLeft } from 'lucide-react';
5-
import { useOverallAuth } from '@/hooks/useAuth';
63
import { isLocalStudio } from '@/config/constants';
4+
import { useOverallAuth } from '@/hooks/useAuth';
5+
import { cn } from '@/lib/cn';
6+
import { Link } from '@tanstack/react-router';
7+
import { ArrowLeft } from 'lucide-react';
8+
import { ReactNode } from 'react';
9+
10+
interface ErrorProps {
11+
className?: string | undefined;
12+
error: Error | { message: string | ReactNode };
13+
title?: string;
14+
showReturnToHome?: boolean;
15+
}
716

8-
export function ErrorComponent({ error }: { error: Error }) {
17+
export function ErrorComponent({ className, error, title, showReturnToHome }: ErrorProps) {
918
const { user, isLoading: isUserLoading } = useOverallAuth();
1019

1120
return (
12-
<Card className="text-red p-5 border border-red rounded-md m-12 mt-36">
21+
<Card className={cn('text-red p-5 border border-red rounded-md m-12 mt-36', className)}>
1322
<CardHeader>
1423
<CardTitle className="text-2xl">
15-
<h2>Component Error</h2>
24+
<h2>{title ?? 'Component Error'}</h2>
1625
</CardTitle>
1726
<CardDescription>{error.message}</CardDescription>
1827
</CardHeader>
19-
<CardContent>
28+
{showReturnToHome !== false && (<CardContent>
2029
{user && !isUserLoading ? (
2130
<Link to={isLocalStudio ? '/browse' : '/orgs'}>
2231
<Button>
@@ -32,7 +41,7 @@ export function ErrorComponent({ error }: { error: Error }) {
3241
</Button>
3342
</Link>
3443
)}
35-
</CardContent>
44+
</CardContent>)}
3645
</Card>
3746
);
3847
}

‎src/components/SubNavSimpleLayout.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { SubNavMenu } from '@/components/SubNavMenu';
2+
import { ReactNode } from 'react';
3+
4+
export function SubNavSimpleLayout({ children }: { children: ReactNode }) {
5+
return (<>
6+
<SubNavMenu />
7+
<div className="mt-32 px-4 pt-4 md:px-12 min-h-[calc(100vh-theme(spacing.32))] relative">
8+
{children}
9+
</div>
10+
</>);
11+
}

‎src/features/clusters/upsert/ClusterForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ export function ClusterForm({
132132
const selectedInstances = form.watch('instances');
133133
const selectedAutoRenew = form.watch('autoRenew');
134134

135-
useEffect(() => {
135+
useEffect(function syncRegionsWithSelectedDeploymentType() {
136136
setLimitRegionParameters({
137137
availableHosts: selectedDeployment !== 'Dedicated' ? true : undefined,
138138
organizationId,

‎src/features/clusters/upsert/ClusterRegions.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { ContactUs } from '@/components/ContactUs';
2+
import { ErrorComponent } from '@/components/ErrorComponent';
13
import { Button } from '@/components/ui/button';
24
import { RegionFormInputs } from '@/features/clusters/upsert/components/RegionFormInputs';
35
import { UpsertClusterSchema } from '@/features/clusters/upsert/upsertClusterSchema';
@@ -42,6 +44,22 @@ export function ClusterRegions({
4244
}
4345
}, [form, nextAvailableRegionToAdd, regionPlansFieldArray]);
4446

47+
if (!regionLocations?.length) {
48+
return (<div className="md:col-span-6 col-span-3">
49+
<ErrorComponent
50+
className="mt-0 m-0"
51+
title="No Regions Available"
52+
showReturnToHome={false}
53+
error={{
54+
message: <>
55+
The deployment type you selected currently has no available regions. Please try a different
56+
deployment type, try again later, or <ContactUs />.
57+
</>,
58+
}}
59+
/>
60+
</div>);
61+
}
62+
4563
return (<>
4664
{regionPlansFieldArray.fields.map((field, index) => (
4765
<RegionFormInputs

‎src/features/clusters/upsert/index.tsx‎

Lines changed: 45 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import { ContactUs } from '@/components/ContactUs';
2+
import { ErrorComponent } from '@/components/ErrorComponent';
13
import { Loading } from '@/components/Loading';
2-
import { SubNavMenu } from '@/components/SubNavMenu';
4+
import { SubNavSimpleLayout } from '@/components/SubNavSimpleLayout';
35
import { getClusterInfoQueryOptions } from '@/features/cluster/queries/getClusterInfoQuery';
46
import { getPlanTypesOptions } from '@/features/cluster/queries/getPlanTypesQuery';
57
import {
@@ -82,6 +84,9 @@ export function UpsertCluster() {
8284
regionPlans.push(...defaults.regionPlans);
8385
}
8486
}
87+
if (!isSelfManaged && !regionPlans.length) {
88+
regionPlans.push({ regionName: '', latencyDescription: '' });
89+
}
8590

8691
return {
8792
autoRenew: cluster?.plans?.[0]?.autoRenew ?? true,
@@ -96,25 +101,44 @@ export function UpsertCluster() {
96101
}, [cluster, clusterId, planTypes, regionLocations, savedClusterState]);
97102

98103
const isLoading = !defaultValues || !organization || !planTypes || !regionLocations;
104+
if (isLoading) {
105+
return (
106+
<SubNavSimpleLayout>
107+
<Loading centered={true} text="Loading..." />
108+
</SubNavSimpleLayout>
109+
);
110+
}
111+
112+
if (planTypes.length === 0) {
113+
return (
114+
<SubNavSimpleLayout>
115+
<ErrorComponent
116+
title={`Cluster ${clusterId ? 'Modification' : 'Creation'} Not Currently Allowed`}
117+
error={{
118+
message: <>
119+
There are no available deployment types right now! Please try again later, or <ContactUs />.
120+
</>,
121+
}}
122+
/>
123+
</SubNavSimpleLayout>
124+
);
125+
}
99126

100-
return (<>
101-
<SubNavMenu />
102-
<div className="mt-32 px-4 pt-4 md:px-12 min-h-[calc(100vh-theme(spacing.32))] relative">
103-
{isLoading
104-
? (<Loading centered={true} text="Loading..." />)
105-
: (<ClusterForm
106-
clusterId={clusterId}
107-
defaultValues={defaultValues}
108-
deploymentToPerformanceToPlan={deploymentToPerformanceToPlan}
109-
organization={organization}
110-
organizationId={organizationId}
111-
planTypes={planTypes}
112-
regionLocations={regionLocations}
113-
regionNameToLatencyToRegion={regionNameToLatencyToRegion}
114-
setLimitRegionParameters={setLimitRegionParameters}
115-
setSavedClusterState={setSavedClusterState}
116-
startOffOnBilling={!!savedClusterState}
117-
/>)}
118-
</div>
119-
</>);
127+
return (
128+
<SubNavSimpleLayout>
129+
<ClusterForm
130+
clusterId={clusterId}
131+
defaultValues={defaultValues}
132+
deploymentToPerformanceToPlan={deploymentToPerformanceToPlan}
133+
organization={organization}
134+
organizationId={organizationId}
135+
planTypes={planTypes}
136+
regionLocations={regionLocations}
137+
regionNameToLatencyToRegion={regionNameToLatencyToRegion}
138+
setLimitRegionParameters={setLimitRegionParameters}
139+
setSavedClusterState={setSavedClusterState}
140+
startOffOnBilling={!!savedClusterState}
141+
/>
142+
</SubNavSimpleLayout>
143+
);
120144
}

0 commit comments

Comments
 (0)