pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-03-10 04:36:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

address input design

Browse Source
This commit is contained in:
Pallavi Kumari
2025-10-09 00:53:45 +05:30
parent 0a377150e3
commit a6086d3724
1 changed files with 126 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/app/[orgId]/settings/resources/[niceId]/proxy/page.tsx
View File

@@ -860,17 +860,14 @@ export default function ReverseProxyTargets(props: {
} }
}, },
{ {
accessorKey: "siteId", accessorKey: "address",
header: t("site"), header: t("address"),
cell: ({ row }) => { cell: ({ row }) => {
const selectedSite = sites.find( const selectedSite = sites.find(
(site) => site.siteId === row.original.siteId (site) => site.siteId === row.original.siteId
); );
const handleContainerSelectForTarget = ( const handleContainerSelectForTarget = (hostname: string, port?: number) => {
hostname: string,
port?: number
) => {
updateTarget(row.original.targetId, { updateTarget(row.original.targetId, {
...row.original, ...row.original,
ip: hostname ip: hostname
@@ -884,54 +881,40 @@ export default function ReverseProxyTargets(props: {
}; };
return ( return (
<div className="flex gap-1 items-center"> <div className="flex items-center gap-1">
<Button variant={"outline"} className="w-full justify-start py-0 space-x-2 px-0 hover:bg-card cursor-default">
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
variant="outline" variant="ghost"
role="combobox" role="combobox"
className={cn( className={cn(
"justify-between flex-1", "min-w-[90px] justify-between text-sm font-medium border-r pr-4 rounded-none h-8 hover:bg-transparent",
!row.original.siteId && !row.original.siteId && "text-muted-foreground"
"text-muted-foreground"
)} )}
> >
{row.original.siteId {row.original.siteId ? selectedSite?.name : t("siteSelect")}
? selectedSite?.name
: t("siteSelect")}
<CaretSortIcon className="ml-2h-4 w-4 shrink-0 opacity-50" /> <CaretSortIcon className="ml-2h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="p-0"> <PopoverContent className="p-0 w-[180px]">
<Command> <Command>
<CommandInput <CommandInput placeholder={t("siteSearch")} />
placeholder={t("siteSearch")}
/>
<CommandList> <CommandList>
<CommandEmpty> <CommandEmpty>{t("siteNotFound")}</CommandEmpty>
{t("siteNotFound")}
</CommandEmpty>
<CommandGroup> <CommandGroup>
{sites.map((site) => ( {sites.map((site) => (
<CommandItem <CommandItem
value={`${site.siteId}:${site.name}:${site.niceId}`}
key={site.siteId} key={site.siteId}
onSelect={() => { value={`${site.siteId}:${site.name}`}
updateTarget( onSelect={() =>
row.original updateTarget(row.original.targetId, { siteId: site.siteId })
.targetId,
{
siteId: site.siteId
} }
);
}}
> >
<CheckIcon <CheckIcon
className={cn( className={cn(
"mr-2 h-4 w-4", "mr-2 h-4 w-4",
site.siteId === site.siteId === row.original.siteId
row.original
.siteId
? "opacity-100" ? "opacity-100"
: "opacity-0" : "opacity-0"
)} )}
@@ -966,70 +949,84 @@ export default function ReverseProxyTargets(props: {
/> />
); );
})()} })()}
</div>
);
}
},
{
accessorKey: "target",
header: t("target"),
cell: ({ row }) => {
const hasTarget = !!(row.original.ip || row.original.port || row.original.method);
return hasTarget ? ( <Select
<div className="flex items-center gap-1"> defaultValue={row.original.method ?? "http"}
<TargetModal onValueChange={(value) =>
value={{
method: row.original.method,
ip: row.original.ip,
port: row.original.port
}}
onChange={(config) =>
updateTarget(row.original.targetId, { updateTarget(row.original.targetId, {
...row.original, ...row.original,
...config method: value,
}) })
} }
showMethod={resource.http}
trigger={
<Button
variant="outline"
className="flex items-center gap-2 max-w-md text-left cursor-pointer"
> >
<TargetDisplay <SelectTrigger className="h-8 px-2 w-[70px] text-sm font-normal border-none bg-transparent shadow-none focus:ring-0 focus:outline-none focus-visible:ring-0 data-[state=open]:bg-transparent">
value={{ {row.original.method || "http"}
method: row.original.method, </SelectTrigger>
ip: row.original.ip, <SelectContent>
port: row.original.port <SelectItem value="http">http</SelectItem>
}} <SelectItem value="https">https</SelectItem>
showMethod={resource.http} <SelectItem value="h2c">h2c</SelectItem>
/> </SelectContent>
</Button> </Select>
}
/> <div className="flex items-center justify-center bg-gray-400 text-black px-1 h-9">
<MoveRight className="mr-2 h-4 w-4" /> {"://"}
</div> </div>
) : (
<TargetModal <Input
value={{ defaultValue={row.original.ip}
method: row.original.method, placeholder="IP / Hostname"
ip: row.original.ip, className="min-w-[130px] border-none placeholder-gray-400"
port: row.original.port onBlur={(e) => {
}} const input = e.target.value.trim();
onChange={(config) => const hasProtocol = /^(https?|h2c):\/\//.test(input);
const hasPort = /:\d+(?:\/|$)/.test(input);
if (hasProtocol || hasPort) {
const parsed = parseHostTarget(input);
if (parsed) {
updateTarget(row.original.targetId, { updateTarget(row.original.targetId, {
...row.original, ...row.original,
...config method: hasProtocol
? parsed.protocol
: row.original.method,
ip: parsed.host,
port: hasPort
? parsed.port
: row.original.port
});
} else {
updateTarget(row.original.targetId, {
...row.original,
ip: input
});
}
} else {
updateTarget(row.original.targetId, {
...row.original,
ip: input
});
}
}}
/>
<div className="flex items-center justify-center bg-gray-400 text-black px-1 h-9">
{":"}
</div>
<Input
type="number"
placeholder="Port"
defaultValue={row.original.port}
className="min-w-[60px] pl-0 border-none placeholder-gray-400"
onBlur={(e) =>
updateTarget(row.original.targetId, {
...row.original,
port: parseInt(e.target.value, 10)
}) })
} }
showMethod={resource.http}
trigger={
<Button variant="outline">
<Plus className="h-4 w-4 mr-2" />
{t("configureTarget")}
</Button>
}
/> />
</Button>
<MoveRight className="ml-1 h-4 w-4" />
</div>
); );
} }
}, },