add advanced section to org create form

This commit is contained in:
miloschwartz
2025-12-21 15:56:57 -05:00
parent dedc13ab98
commit 3f81b88073
2 changed files with 88 additions and 50 deletions

View File

@@ -1524,6 +1524,7 @@
"addNewTarget": "Add New Target", "addNewTarget": "Add New Target",
"targetsList": "Targets List", "targetsList": "Targets List",
"advancedMode": "Advanced Mode", "advancedMode": "Advanced Mode",
"advancedSettings": "Advanced Settings",
"targetErrorDuplicateTargetFound": "Duplicate target found", "targetErrorDuplicateTargetFound": "Duplicate target found",
"healthCheckHealthy": "Healthy", "healthCheckHealthy": "Healthy",
"healthCheckUnhealthy": "Unhealthy", "healthCheckUnhealthy": "Unhealthy",

View File

@@ -30,6 +30,13 @@ import {
} from "@app/components/ui/form"; } from "@app/components/ui/form";
import { Alert, AlertDescription } from "@app/components/ui/alert"; import { Alert, AlertDescription } from "@app/components/ui/alert";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger
} from "@app/components/ui/collapsible";
import { ChevronsUpDown } from "lucide-react";
import { cn } from "@app/lib/cn";
type Step = "org" | "site" | "resources"; type Step = "org" | "site" | "resources";
@@ -43,6 +50,7 @@ export default function StepperForm() {
const [isChecked, setIsChecked] = useState(false); const [isChecked, setIsChecked] = useState(false);
// Removed error state, now using toast for API errors // Removed error state, now using toast for API errors
const [orgCreated, setOrgCreated] = useState(false); const [orgCreated, setOrgCreated] = useState(false);
const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
const orgSchema = z.object({ const orgSchema = z.object({
orgName: z.string().min(1, { message: t("orgNameRequired") }), orgName: z.string().min(1, { message: t("orgNameRequired") }),
@@ -304,53 +312,85 @@ export default function StepperForm() {
)} )}
/> />
<FormField <Collapsible
control={orgForm.control} open={isAdvancedOpen}
name="subnet" onOpenChange={setIsAdvancedOpen}
render={({ field }) => ( className="space-y-2"
<FormItem> >
<FormLabel> <div className="flex items-center justify-between space-x-4">
{t("setupSubnetAdvanced")} <CollapsibleTrigger asChild>
</FormLabel> <Button
<FormControl> type="button"
<Input variant="text"
type="text" size="sm"
{...field} className="p-0 flex items-center justify-between w-full"
/> >
</FormControl> <h4 className="text-sm">
<FormMessage /> {t("advancedSettings")}
<FormDescription> </h4>
{t( <div>
"setupSubnetDescription" <ChevronsUpDown className="h-4 w-4" />
)} <span className="sr-only">
</FormDescription> {t("toggle")}
</FormItem> </span>
)} </div>
/> </Button>
</CollapsibleTrigger>
</div>
<CollapsibleContent className="space-y-4">
<FormField
control={orgForm.control}
name="subnet"
render={({ field }) => (
<FormItem>
<FormLabel>
{t(
"setupSubnetAdvanced"
)}
</FormLabel>
<FormControl>
<Input
type="text"
{...field}
/>
</FormControl>
<FormMessage />
<FormDescription>
{t(
"setupSubnetDescription"
)}
</FormDescription>
</FormItem>
)}
/>
<FormField <FormField
control={orgForm.control} control={orgForm.control}
name="utilitySubnet" name="utilitySubnet"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel> <FormLabel>
{t("setupUtilitySubnet")} {t(
</FormLabel> "setupUtilitySubnet"
<FormControl> )}
<Input </FormLabel>
type="text" <FormControl>
{...field} <Input
/> type="text"
</FormControl> {...field}
<FormMessage /> />
<FormDescription> </FormControl>
{t( <FormMessage />
"setupUtilitySubnetDescription" <FormDescription>
)} {t(
</FormDescription> "setupUtilitySubnetDescription"
</FormItem> )}
)} </FormDescription>
/> </FormItem>
)}
/>
</CollapsibleContent>
</Collapsible>
{orgIdTaken && !orgCreated ? ( {orgIdTaken && !orgCreated ? (
<Alert variant="destructive"> <Alert variant="destructive">
@@ -366,10 +406,7 @@ export default function StepperForm() {
<Button <Button
type="submit" type="submit"
loading={loading} loading={loading}
disabled={ disabled={loading || orgIdTaken}
loading ||
orgIdTaken
}
> >
{t("setupCreateOrg")} {t("setupCreateOrg")}
</Button> </Button>