calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-28 03:32:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert to the mode on top and make it 2 x 2

Browse Source
This commit is contained in:
Owen
2026-05-26 20:30:33 -07:00
parent 6e6c91a27c
commit 5a6de12f74
1 changed files with 126 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
src/components/InternalResourceForm.tsx
View File

@@ -802,53 +802,129 @@ export function InternalResourceForm({
</div> </div>
</div> </div>
<div className="space-y-2 mb-4"> <div className="space-y-2 mb-4">
<FormField <div className="grid grid-cols-3 gap-4 items-start">
control={form.control} <div className="min-w-0 col-span-1">
name="mode" <FormField
render={({ field }) => { control={form.control}
const modeOptions: OptionSelectOption<InternalResourceMode>[] = name="siteIds"
[ render={({ field }) => (
{ <FormItem className="flex flex-col">
value: "host", <FormLabel>
label: t(modeHostKey) {t("sites")}
}, </FormLabel>
{ <Popover>
value: "cidr", <PopoverTrigger asChild>
label: t(modeCidrKey) <FormControl>
}, <Button
...(!disableEnterpriseFeatures variant="outline"
? [ role="combobox"
{ className={cn(
value: "http" as const, "w-full justify-between",
label: t( selectedSites.length ===
modeHttpKey 0 &&
) "text-muted-foreground"
}, )}
{ >
value: "ssh" as const, <span className="truncate text-left">
label: t( {formatMultiSitesSelectorLabel(
modeSshKey selectedSites,
) t
} )}
] </span>
: []) <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
]; </Button>
return ( </FormControl>
<FormItem> </PopoverTrigger>
<FormLabel> <PopoverContent className="w-full p-0">
{t(modeLabelKey)} <MultiSitesSelector
</FormLabel> orgId={orgId}
<OptionSelect<InternalResourceMode> selectedSites={
options={modeOptions} selectedSites
value={field.value} }
onChange={field.onChange} filterTypes={[
cols={4} "newt"
/> ]}
<FormMessage /> onSelectionChange={(
</FormItem> sites
); ) => {
}} setSelectedSites(
/> sites
);
field.onChange(
sites.map(
(
s
) =>
s.siteId
)
);
}}
/>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="min-w-0 col-span-2">
<FormField
control={form.control}
name="mode"
render={({ field }) => {
const modeOptions: OptionSelectOption<InternalResourceMode>[] =
[
{
value: "host",
label: t(
modeHostKey
)
},
{
value: "cidr",
label: t(
modeCidrKey
)
},
...(!disableEnterpriseFeatures
? [
{
value: "http" as const,
label: t(
modeHttpKey
)
},
{
value: "ssh" as const,
label: t(
modeSshKey
)
}
]
: [])
];
return (
<FormItem>
<FormLabel>
{t(modeLabelKey)}
</FormLabel>
<OptionSelect<InternalResourceMode>
options={
modeOptions
}
value={field.value}
onChange={
field.onChange
}
cols={2}
/>
<FormMessage />
</FormItem>
);
}}
/>
</div>
</div>
{selectedSites.length > 1 && ( {selectedSites.length > 1 && (
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{t( {t(
@@ -872,74 +948,12 @@ export function InternalResourceForm({
<div <div
className={cn( className={cn(
"grid gap-4 items-start", "grid gap-4 items-start",
mode === "cidr" && "grid-cols-2", mode === "cidr" && "grid-cols-1",
mode === "http" && "grid-cols-4", mode === "http" && "grid-cols-3",
(mode === "host" || mode === "ssh") && (mode === "host" || mode === "ssh") &&
"grid-cols-3" "grid-cols-2"
)} )}
> >
<div className="min-w-0">
<FormField
control={form.control}
name="siteIds"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>
{t("sites")}
</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-full justify-between",
selectedSites.length ===
0 &&
"text-muted-foreground"
)}
>
<span className="truncate text-left">
{formatMultiSitesSelectorLabel(
selectedSites,
t
)}
</span>
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-full p-0">
<MultiSitesSelector
orgId={orgId}
selectedSites={
selectedSites
}
filterTypes={[
"newt"
]}
onSelectionChange={(
sites
) => {
setSelectedSites(
sites
);
field.onChange(
sites.map(
(s) =>
s.siteId
)
);
}}
/>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
</div>
{mode === "http" && ( {mode === "http" && (
<div className="min-w-0"> <div className="min-w-0">
<FormField <FormField