Skip to content

Commit 3354328

Browse files
PallavikumarimdbPallavikumarimdb
committed
adjust target config ui inside create resource
1 parent 8e5cc10 commit 3354328

File tree

3 files changed

+72
-73
lines changed

3 files changed

+72
-73
lines changed

‎messages/en-US.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -471,7 +471,7 @@
471471
"proxyErrorTls": "Invalid TLS Server Name. Use domain name format, or save empty to remove the TLS Server Name.",
472472
"proxyEnableSSL": "Enable SSL (https)",
473473
"target": "Target",
474-
"configureTargets": "Configure Targets",
474+
"configureTarget": "Configure Targets",
475475
"targetErrorFetch": "Failed to fetch targets",
476476
"targetErrorFetchDescription": "An error occurred while fetching targets",
477477
"siteErrorFetch": "Failed to fetch resource",

‎src/app/[orgId]/settings/resources/[niceId]/proxy/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -869,7 +869,7 @@ export default function ReverseProxyTargets(props: {
869869
trigger={
870870
<Button
871871
variant="outline"
872-
className="flex items-center gap-2 p-2 max-w-md w-full text-left cursor-pointer"
872+
className="flex items-center gap-2 max-w-md text-left cursor-pointer"
873873
>
874874
<TargetDisplay
875875
value={{

‎src/app/[orgId]/settings/resources/create/page.tsx‎

Lines changed: 70 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,8 @@ import { toASCII, toUnicode } from 'punycode';
9393
import { DomainRow } from "../../../../../components/DomainsTable";
9494
import { finalizeSubdomainSanitize } from "@app/lib/subdomain-utils";
9595
import { PathMatchDisplay, PathMatchModal, PathRewriteDisplay, PathRewriteModal } from "@app/components/PathMatchRenameModal";
96+
import { TargetModal } from "@app/components/TargetModal";
97+
import { TargetDisplay } from "@app/components/TargetDisplay";
9698

9799

98100
const baseResourceFormSchema = z.object({
@@ -764,87 +766,84 @@ export default function Page() {
764766
);
765767
}
766768
},
767-
...(baseForm.watch("http")
768-
? [
769-
{
770-
accessorKey: "method",
771-
header: t("method"),
772-
cell: ({ row }: { row: Row<LocalTarget> }) => (
773-
<Select
774-
defaultValue={row.original.method ?? ""}
775-
onValueChange={(value) =>
769+
{
770+
accessorKey: "target",
771+
header: t("target"),
772+
cell: ({ row }) => {
773+
const hasTarget = !!(row.original.ip || row.original.port || row.original.method);
774+
775+
return hasTarget ? (
776+
<div className="flex items-center gap-1">
777+
<TargetModal
778+
value={{
779+
method: row.original.method,
780+
ip: row.original.ip,
781+
port: row.original.port
782+
}}
783+
onChange={(config) =>
776784
updateTarget(row.original.targetId, {
777785
...row.original,
778-
method: value
786+
...config
779787
})
780788
}
781-
>
782-
<SelectTrigger>
783-
{row.original.method}
784-
</SelectTrigger>
785-
<SelectContent>
786-
<SelectItem value="http">http</SelectItem>
787-
<SelectItem value="https">https</SelectItem>
788-
<SelectItem value="h2c">h2c</SelectItem>
789-
</SelectContent>
790-
</Select>
791-
)
792-
}
793-
]
794-
: []),
795-
{
796-
accessorKey: "ip",
797-
header: t("targetAddr"),
798-
cell: ({ row }) => (
799-
<Input
800-
defaultValue={row.original.ip}
801-
className="min-w-[150px]"
802-
onBlur={(e) => {
803-
const input = e.target.value.trim();
804-
const hasProtocol = /^(https?|h2c):\/\//.test(input);
805-
const hasPort = /:\d+(?:\/|$)/.test(input);
806-
807-
if (hasProtocol || hasPort) {
808-
const parsed = parseHostTarget(input);
809-
if (parsed) {
810-
updateTarget(row.original.targetId, {
811-
...row.original,
812-
method: hasProtocol ? parsed.protocol : row.original.method,
813-
ip: parsed.host,
814-
port: hasPort ? parsed.port : row.original.port
815-
});
816-
} else {
789+
showMethod={baseForm.watch("http")}
790+
trigger={
791+
<Button
792+
variant="outline"
793+
className="flex items-center gap-2 max-w-md text-left cursor-pointer"
794+
>
795+
<TargetDisplay
796+
value={{
797+
method: row.original.method,
798+
ip: row.original.ip,
799+
port: row.original.port
800+
}}
801+
showMethod={baseForm.watch("http")}
802+
/>
803+
</Button>
804+
}
805+
/>
806+
<Button
807+
variant="ghost"
808+
size="sm"
809+
className="h-8 w-8 p-0"
810+
onClick={(e) => {
811+
e.stopPropagation();
817812
updateTarget(row.original.targetId, {
818813
...row.original,
819-
ip: input
814+
method: null,
815+
ip: "",
816+
port: undefined
820817
});
821-
}
822-
} else {
818+
}}
819+
>
820+
×
821+
</Button>
822+
<MoveRight className="mr-2 h-4 w-4" />
823+
</div>
824+
) : (
825+
<TargetModal
826+
value={{
827+
method: row.original.method,
828+
ip: row.original.ip,
829+
port: row.original.port
830+
}}
831+
onChange={(config) =>
823832
updateTarget(row.original.targetId, {
824833
...row.original,
825-
ip: input
826-
});
834+
...config
835+
})
827836
}
828-
}}
829-
/>
830-
)
831-
},
832-
{
833-
accessorKey: "port",
834-
header: t("targetPort"),
835-
cell: ({ row }) => (
836-
<Input
837-
type="number"
838-
defaultValue={row.original.port}
839-
className="min-w-[100px]"
840-
onBlur={(e) =>
841-
updateTarget(row.original.targetId, {
842-
...row.original,
843-
port: parseInt(e.target.value, 10)
844-
})
845-
}
846-
/>
847-
)
837+
showMethod={baseForm.watch("http")}
838+
trigger={
839+
<Button variant="outline">
840+
<Plus className="h-4 w-4 mr-2" />
841+
{t("configureTarget")}
842+
</Button>
843+
}
844+
/>
845+
);
846+
}
848847
},
849848
{
850849
accessorKey: "rewritePath",

0 commit comments

Comments
 (0)