Reintroduce clients conditionally

This commit is contained in:
Owen
2025-07-14 11:43:13 -07:00
parent a35add3fc6
commit b75800c583
9 changed files with 331 additions and 270 deletions

View File

@@ -11,7 +11,7 @@ import {
CardHeader,
CardTitle
} from "@app/components/ui/card";
import { formatAxiosError } from "@app/lib/api";;
import { formatAxiosError } from "@app/lib/api";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { Separator } from "@/components/ui/separator";
@@ -38,6 +38,7 @@ export default function StepperForm() {
const [currentStep, setCurrentStep] = useState<Step>("org");
const [orgIdTaken, setOrgIdTaken] = useState(false);
const t = useTranslations();
const { env } = useEnvContext();
const [loading, setLoading] = useState(false);
const [isChecked, setIsChecked] = useState(false);
@@ -45,9 +46,9 @@ export default function StepperForm() {
const [orgCreated, setOrgCreated] = useState(false);
const orgSchema = z.object({
orgName: z.string().min(1, { message: t('orgNameRequired') }),
orgId: z.string().min(1, { message: t('orgIdRequired') }),
subnet: z.string().min(1, { message: t('subnetRequired') })
orgName: z.string().min(1, { message: t("orgNameRequired") }),
orgId: z.string().min(1, { message: t("orgIdRequired") }),
subnet: z.string().min(1, { message: t("subnetRequired") })
});
const orgForm = useForm<z.infer<typeof orgSchema>>({
@@ -83,21 +84,24 @@ export default function StepperForm() {
}
};
const checkOrgIdAvailability = useCallback(async (value: string) => {
if (loading || orgCreated) {
return;
}
try {
const res = await api.get(`/org/checkId`, {
params: {
orgId: value
}
});
setOrgIdTaken(res.status !== 404);
} catch (error) {
setOrgIdTaken(false);
}
}, [loading, orgCreated, api]);
const checkOrgIdAvailability = useCallback(
async (value: string) => {
if (loading || orgCreated) {
return;
}
try {
const res = await api.get(`/org/checkId`, {
params: {
orgId: value
}
});
setOrgIdTaken(res.status !== 404);
} catch (error) {
setOrgIdTaken(false);
}
},
[loading, orgCreated, api]
);
const debouncedCheckOrgIdAvailability = useCallback(
debounce(checkOrgIdAvailability, 300),
@@ -135,9 +139,7 @@ export default function StepperForm() {
}
} catch (e) {
console.error(e);
setError(
formatAxiosError(e, t('orgErrorCreate'))
);
setError(formatAxiosError(e, t("orgErrorCreate")));
}
setLoading(false);
@@ -147,10 +149,8 @@ export default function StepperForm() {
<>
<Card>
<CardHeader>
<CardTitle>{t('setupNewOrg')}</CardTitle>
<CardDescription>
{t('setupCreate')}
</CardDescription>
<CardTitle>{t("setupNewOrg")}</CardTitle>
<CardDescription>{t("setupCreate")}</CardDescription>
</CardHeader>
<CardContent>
<section className="space-y-6">
@@ -172,7 +172,7 @@ export default function StepperForm() {
: "text-muted-foreground"
}`}
>
{t('setupCreateOrg')}
{t("setupCreateOrg")}
</span>
</div>
<div className="flex flex-col items-center">
@@ -192,7 +192,7 @@ export default function StepperForm() {
: "text-muted-foreground"
}`}
>
{t('siteCreate')}
{t("siteCreate")}
</span>
</div>
<div className="flex flex-col items-center">
@@ -212,7 +212,7 @@ export default function StepperForm() {
: "text-muted-foreground"
}`}
>
{t('setupCreateResources')}
{t("setupCreateResources")}
</span>
</div>
</div>
@@ -231,7 +231,7 @@ export default function StepperForm() {
render={({ field }) => (
<FormItem>
<FormLabel>
{t('setupOrgName')}
{t("setupOrgName")}
</FormLabel>
<FormControl>
<Input
@@ -239,8 +239,15 @@ export default function StepperForm() {
{...field}
onChange={(e) => {
// Prevent "/" in orgName input
const sanitizedValue = e.target.value.replace(/\//g, "-");
const orgId = generateId(sanitizedValue);
const sanitizedValue =
e.target.value.replace(
/\//g,
"-"
);
const orgId =
generateId(
sanitizedValue
);
orgForm.setValue(
"orgId",
orgId
@@ -253,12 +260,15 @@ export default function StepperForm() {
orgId
);
}}
value={field.value.replace(/\//g, "-")}
value={field.value.replace(
/\//g,
"-"
)}
/>
</FormControl>
<FormMessage />
<FormDescription>
{t('orgDisplayName')}
{t("orgDisplayName")}
</FormDescription>
</FormItem>
)}
@@ -269,7 +279,7 @@ export default function StepperForm() {
render={({ field }) => (
<FormItem>
<FormLabel>
{t('orgId')}
{t("orgId")}
</FormLabel>
<FormControl>
<Input
@@ -279,39 +289,44 @@ export default function StepperForm() {
</FormControl>
<FormMessage />
<FormDescription>
{t('setupIdentifierMessage')}
</FormDescription>
</FormItem>
)}
/>
<FormField
control={orgForm.control}
name="subnet"
render={({ field }) => (
<FormItem>
<FormLabel>
Subnet
</FormLabel>
<FormControl>
<Input
type="text"
{...field}
/>
</FormControl>
<FormMessage />
<FormDescription>
Network subnet for this organization.
A default value has been provided.
{t(
"setupIdentifierMessage"
)}
</FormDescription>
</FormItem>
)}
/>
{env.flags.enableClients && (
<FormField
control={orgForm.control}
name="subnet"
render={({ field }) => (
<FormItem>
<FormLabel>
Subnet
</FormLabel>
<FormControl>
<Input
type="text"
{...field}
/>
</FormControl>
<FormMessage />
<FormDescription>
Network subnet for this
organization. A default
value has been provided.
</FormDescription>
</FormItem>
)}
/>
)}
{orgIdTaken && !orgCreated ? (
<Alert variant="destructive">
<AlertDescription>
{t('setupErrorIdentifier')}
{t("setupErrorIdentifier")}
</AlertDescription>
</Alert>
) : null}
@@ -334,7 +349,7 @@ export default function StepperForm() {
orgIdTaken
}
>
{t('setupCreateOrg')}
{t("setupCreateOrg")}
</Button>
</div>
</form>
@@ -360,4 +375,4 @@ function debounce<T extends (...args: any[]) => any>(
func(...args);
}, wait);
};
}
}