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

clean up targets input a little

Browse Source
This commit is contained in:
miloschwartz
2025-12-06 21:00:51 -05:00
parent e24a13fb11
commit 56d30ad6bd
4 changed files with 284 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
messages/en-US.json
View File

@@ -181,7 +181,7 @@
"baseDomain": "Base Domain", "baseDomain": "Base Domain",
"subdomnainDescription": "The subdomain where the resource will be accessible.", "subdomnainDescription": "The subdomain where the resource will be accessible.",
"resourceRawSettings": "TCP/UDP Settings", "resourceRawSettings": "TCP/UDP Settings",
"resourceRawSettingsDescription": "Configure how the resource will be accessed over TCP/UDP. You map the resource to a port on the host Pangolin server, so you can access the resource from server-public-ip:mapped-port.", "resourceRawSettingsDescription": "Configure how the resource will be accessed over TCP/UDP",
"protocol": "Protocol", "protocol": "Protocol",
"protocolSelect": "Select a protocol", "protocolSelect": "Select a protocol",
"resourcePortNumber": "Port Number", "resourcePortNumber": "Port Number",
@@ -499,7 +499,7 @@
"proxyUpdatedDescription": "Proxy settings have been updated successfully", "proxyUpdatedDescription": "Proxy settings have been updated successfully",
"proxyErrorUpdate": "Failed to update proxy settings", "proxyErrorUpdate": "Failed to update proxy settings",
"proxyErrorUpdateDescription": "An error occurred while updating proxy settings", "proxyErrorUpdateDescription": "An error occurred while updating proxy settings",
"targetAddr": "IP / Hostname", "targetAddr": "Host",
"targetPort": "Port", "targetPort": "Port",
"targetProtocol": "Protocol", "targetProtocol": "Protocol",
"targetTlsSettings": "Secure Connection Configuration", "targetTlsSettings": "Secure Connection Configuration",

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

@@ -123,8 +123,7 @@ const addTargetSchema = z
ip: z.string().refine(isTargetValid), ip: z.string().refine(isTargetValid),
method: z.string().nullable(), method: z.string().nullable(),
port: z.coerce.number<number>().int().positive(), port: z.coerce.number<number>().int().positive(),
siteId: z.int() siteId: z.int().positive({
.positive({
error: "You must select a site for a target." error: "You must select a site for a target."
}), }),
path: z.string().optional().nullable(), path: z.string().optional().nullable(),
@@ -607,16 +606,16 @@ export default function ReverseProxyTargets(props: {
const newTarget: LocalTarget = { const newTarget: LocalTarget = {
...data, ...data,
path: isHttp ? (data.path || null) : null, path: isHttp ? data.path || null : null,
pathMatchType: isHttp ? (data.pathMatchType || null) : null, pathMatchType: isHttp ? data.pathMatchType || null : null,
rewritePath: isHttp ? (data.rewritePath || null) : null, rewritePath: isHttp ? data.rewritePath || null : null,
rewritePathType: isHttp ? (data.rewritePathType || null) : null, rewritePathType: isHttp ? data.rewritePathType || null : null,
siteType: site?.type || null, siteType: site?.type || null,
enabled: true, enabled: true,
targetId: new Date().getTime(), targetId: new Date().getTime(),
new: true, new: true,
resourceId: resource.resourceId, resourceId: resource.resourceId,
priority: isHttp ? (data.priority || 100) : 100, priority: isHttp ? data.priority || 100 : 100,
hcEnabled: false, hcEnabled: false,
hcPath: null, hcPath: null,
hcMethod: null, hcMethod: null,
@@ -631,7 +630,7 @@ export default function ReverseProxyTargets(props: {
hcStatus: null, hcStatus: null,
hcMode: null, hcMode: null,
hcUnhealthyInterval: null, hcUnhealthyInterval: null,
hcTlsServerName: null, hcTlsServerName: null
}; };
setTargets([...targets, newTarget]); setTargets([...targets, newTarget]);
@@ -733,7 +732,7 @@ export default function ReverseProxyTargets(props: {
hcStatus: target.hcStatus || null, hcStatus: target.hcStatus || null,
hcUnhealthyInterval: target.hcUnhealthyInterval || null, hcUnhealthyInterval: target.hcUnhealthyInterval || null,
hcMode: target.hcMode || null, hcMode: target.hcMode || null,
hcTlsServerName: target.hcTlsServerName, hcTlsServerName: target.hcTlsServerName
}; };
// Only include path-related fields for HTTP resources // Only include path-related fields for HTTP resources
@@ -833,7 +832,7 @@ export default function ReverseProxyTargets(props: {
const priorityColumn: ColumnDef<LocalTarget> = { const priorityColumn: ColumnDef<LocalTarget> = {
id: "priority", id: "priority",
header: () => ( header: () => (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 p-3">
{t("priority")} {t("priority")}
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
@@ -877,7 +876,7 @@ export default function ReverseProxyTargets(props: {
const healthCheckColumn: ColumnDef<LocalTarget> = { const healthCheckColumn: ColumnDef<LocalTarget> = {
accessorKey: "healthCheck", accessorKey: "healthCheck",
header: () => (<span className="p-3">{t("healthCheck")}</span>), header: () => <span className="p-3">{t("healthCheck")}</span>,
cell: ({ row }) => { cell: ({ row }) => {
const status = row.original.hcHealth || "unknown"; const status = row.original.hcHealth || "unknown";
const isEnabled = row.original.hcEnabled; const isEnabled = row.original.hcEnabled;
@@ -923,18 +922,16 @@ export default function ReverseProxyTargets(props: {
{row.original.siteType === "newt" ? ( {row.original.siteType === "newt" ? (
<Button <Button
variant="outline" variant="outline"
className="flex items-center justify-between gap-2 p-2 w-full text-left cursor-pointer" className="flex items-center gap-2 w-full text-left cursor-pointer"
onClick={() => onClick={() =>
openHealthCheckDialog(row.original) openHealthCheckDialog(row.original)
} }
> >
<Badge variant={getStatusColor(status)}> <Settings className="h-4 w-4" />
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{getStatusIcon(status)} {getStatusIcon(status)}
{getStatusText(status)} {getStatusText(status)}
</div> </div>
</Badge>
<Settings className="h-4 w-4" />
</Button> </Button>
) : ( ) : (
<span>-</span> <span>-</span>
@@ -949,7 +946,7 @@ export default function ReverseProxyTargets(props: {
const matchPathColumn: ColumnDef<LocalTarget> = { const matchPathColumn: ColumnDef<LocalTarget> = {
accessorKey: "path", accessorKey: "path",
header: () => (<span className="p-3">{t("matchPath")}</span>), header: () => <span className="p-3">{t("matchPath")}</span>,
cell: ({ row }) => { cell: ({ row }) => {
const hasPathMatch = !!( const hasPathMatch = !!(
row.original.path || row.original.pathMatchType row.original.path || row.original.pathMatchType
@@ -1011,7 +1008,7 @@ export default function ReverseProxyTargets(props: {
const addressColumn: ColumnDef<LocalTarget> = { const addressColumn: ColumnDef<LocalTarget> = {
accessorKey: "address", accessorKey: "address",
header: () => (<span className="p-3">{t("address")}</span>), header: () => <span className="p-3">{t("address")}</span>,
cell: ({ row }) => { cell: ({ row }) => {
const selectedSite = sites.find( const selectedSite = sites.find(
(site) => site.siteId === row.original.siteId (site) => site.siteId === row.original.siteId
@@ -1132,8 +1129,12 @@ export default function ReverseProxyTargets(props: {
{row.original.method || "http"} {row.original.method || "http"}
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="http">http</SelectItem> <SelectItem value="http">
<SelectItem value="https">https</SelectItem> http
</SelectItem>
<SelectItem value="https">
https
</SelectItem>
<SelectItem value="h2c">h2c</SelectItem> <SelectItem value="h2c">h2c</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
@@ -1147,7 +1148,7 @@ export default function ReverseProxyTargets(props: {
<Input <Input
defaultValue={row.original.ip} defaultValue={row.original.ip}
placeholder="IP / Hostname" placeholder="Host"
className="flex-1 min-w-[120px] pl-0 border-none placeholder-gray-400" className="flex-1 min-w-[120px] pl-0 border-none placeholder-gray-400"
onBlur={(e) => { onBlur={(e) => {
const input = e.target.value.trim(); const input = e.target.value.trim();
@@ -1225,7 +1226,7 @@ export default function ReverseProxyTargets(props: {
const rewritePathColumn: ColumnDef<LocalTarget> = { const rewritePathColumn: ColumnDef<LocalTarget> = {
accessorKey: "rewritePath", accessorKey: "rewritePath",
header: () => (<span className="p-3">{t("rewritePath")}</span>), header: () => <span className="p-3">{t("rewritePath")}</span>,
cell: ({ row }) => { cell: ({ row }) => {
const hasRewritePath = !!( const hasRewritePath = !!(
row.original.rewritePath || row.original.rewritePathType row.original.rewritePath || row.original.rewritePathType
@@ -1295,7 +1296,7 @@ export default function ReverseProxyTargets(props: {
const enabledColumn: ColumnDef<LocalTarget> = { const enabledColumn: ColumnDef<LocalTarget> = {
accessorKey: "enabled", accessorKey: "enabled",
header: () => (<span className="p-3">{t("enabled")}</span>), header: () => <span className="p-3">{t("enabled")}</span>,
cell: ({ row }) => ( cell: ({ row }) => (
<div className="flex items-center justify-center w-full"> <div className="flex items-center justify-center w-full">
<Switch <Switch
@@ -1316,7 +1317,7 @@ export default function ReverseProxyTargets(props: {
const actionsColumn: ColumnDef<LocalTarget> = { const actionsColumn: ColumnDef<LocalTarget> = {
id: "actions", id: "actions",
header: () => (<span className="p-3">{t("actions")}</span>), header: () => <span className="p-3">{t("actions")}</span>,
cell: ({ row }) => ( cell: ({ row }) => (
<div className="flex items-center w-full"> <div className="flex items-center w-full">
<Button <Button
@@ -1399,11 +1400,20 @@ export default function ReverseProxyTargets(props: {
<TableRow key={headerGroup.id}> <TableRow key={headerGroup.id}>
{headerGroup.headers.map( {headerGroup.headers.map(
(header) => { (header) => {
const isActionsColumn = header.column.id === "actions"; const isActionsColumn =
header.column
.id ===
"actions";
return ( return (
<TableHead <TableHead
key={header.id} key={
className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""} header.id
}
className={
isActionsColumn
? "sticky right-0 z-10 w-auto min-w-fit bg-card"
: ""
}
> >
{header.isPlaceholder {header.isPlaceholder
? null ? null
@@ -1430,13 +1440,20 @@ export default function ReverseProxyTargets(props: {
{row {row
.getVisibleCells() .getVisibleCells()
.map((cell) => { .map((cell) => {
const isActionsColumn = cell.column.id === "actions"; const isActionsColumn =
cell.column
.id ===
"actions";
return ( return (
<TableCell <TableCell
key={ key={
cell.id cell.id
} }
className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""} className={
isActionsColumn
? "sticky right-0 z-10 w-auto min-w-fit bg-card"
: ""
}
> >
{flexRender( {flexRender(
cell cell
@@ -1492,7 +1509,7 @@ export default function ReverseProxyTargets(props: {
</div> </div>
</> </>
) : ( ) : (
<div className="text-center py-8 border-2 border-dashed border-muted rounded-lg p-4"> <div className="text-center p-4">
<p className="text-muted-foreground mb-4"> <p className="text-muted-foreground mb-4">
{t("targetNoOne")} {t("targetNoOne")}
</p> </p>
@@ -1721,7 +1738,9 @@ export default function ReverseProxyTargets(props: {
defaultChecked={ defaultChecked={
field.value || false field.value || false
} }
onCheckedChange={(val) => { onCheckedChange={(
val
) => {
field.onChange(val); field.onChange(val);
}} }}
/> />
@@ -1730,19 +1749,37 @@ export default function ReverseProxyTargets(props: {
)} )}
/> />
{proxySettingsForm.watch("proxyProtocol") && ( {proxySettingsForm.watch(
"proxyProtocol"
) && (
<> <>
<FormField <FormField
control={proxySettingsForm.control} control={
proxySettingsForm.control
}
name="proxyProtocolVersion" name="proxyProtocolVersion"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t("proxyProtocolVersion")}</FormLabel> <FormLabel>
{t(
"proxyProtocolVersion"
)}
</FormLabel>
<FormControl> <FormControl>
<Select <Select
value={String(field.value || 1)} value={String(
onValueChange={(value) => field.value ||
field.onChange(parseInt(value, 10)) 1
)}
onValueChange={(
value
) =>
field.onChange(
parseInt(
value,
10
)
)
} }
> >
<SelectTrigger> <SelectTrigger>
@@ -1750,16 +1787,22 @@ export default function ReverseProxyTargets(props: {
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="1"> <SelectItem value="1">
{t("version1")} {t(
"version1"
)}
</SelectItem> </SelectItem>
<SelectItem value="2"> <SelectItem value="2">
{t("version2")} {t(
"version2"
)}
</SelectItem> </SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</FormControl> </FormControl>
<FormDescription> <FormDescription>
{t("versionDescription")} {t(
"versionDescription"
)}
</FormDescription> </FormDescription>
</FormItem> </FormItem>
)} )}
@@ -1768,7 +1811,10 @@ export default function ReverseProxyTargets(props: {
<Alert> <Alert>
<AlertTriangle className="h-4 w-4" /> <AlertTriangle className="h-4 w-4" />
<AlertDescription> <AlertDescription>
<strong>{t("warning")}:</strong> {t("proxyProtocolWarning")} <strong>
{t("warning")}:
</strong>{" "}
{t("proxyProtocolWarning")}
</AlertDescription> </AlertDescription>
</Alert> </Alert>
</> </>
@@ -1835,8 +1881,9 @@ export default function ReverseProxyTargets(props: {
hcUnhealthyInterval: hcUnhealthyInterval:
selectedTargetForHealthCheck.hcUnhealthyInterval || selectedTargetForHealthCheck.hcUnhealthyInterval ||
30, 30,
hcTlsServerName: selectedTargetForHealthCheck.hcTlsServerName || hcTlsServerName:
undefined, selectedTargetForHealthCheck.hcTlsServerName ||
undefined
}} }}
onChanges={async (config) => { onChanges={async (config) => {
if (selectedTargetForHealthCheck) { if (selectedTargetForHealthCheck) {

149
src/app/[orgId]/settings/resources/proxy/create/page.tsx
View File

@@ -432,16 +432,16 @@ export default function Page() {
const newTarget: LocalTarget = { const newTarget: LocalTarget = {
...data, ...data,
path: isHttp ? (data.path || null) : null, path: isHttp ? data.path || null : null,
pathMatchType: isHttp ? (data.pathMatchType || null) : null, pathMatchType: isHttp ? data.pathMatchType || null : null,
rewritePath: isHttp ? (data.rewritePath || null) : null, rewritePath: isHttp ? data.rewritePath || null : null,
rewritePathType: isHttp ? (data.rewritePathType || null) : null, rewritePathType: isHttp ? data.rewritePathType || null : null,
siteType: site?.type || null, siteType: site?.type || null,
enabled: true, enabled: true,
targetId: new Date().getTime(), targetId: new Date().getTime(),
new: true, new: true,
resourceId: 0, // Will be set when resource is created resourceId: 0, // Will be set when resource is created
priority: isHttp ? (data.priority || 100) : 100, // Default priority priority: isHttp ? data.priority || 100 : 100, // Default priority
hcEnabled: false, hcEnabled: false,
hcPath: null, hcPath: null,
hcMethod: null, hcMethod: null,
@@ -507,7 +507,7 @@ export default function Page() {
try { try {
const payload = { const payload = {
name: baseData.name, name: baseData.name,
http: baseData.http, http: baseData.http
}; };
let sanitizedSubdomain: string | undefined; let sanitizedSubdomain: string | undefined;
@@ -577,7 +577,8 @@ export default function Page() {
hcFollowRedirects: hcFollowRedirects:
target.hcFollowRedirects || null, target.hcFollowRedirects || null,
hcStatus: target.hcStatus || null, hcStatus: target.hcStatus || null,
hcUnhealthyInterval: target.hcUnhealthyInterval || null, hcUnhealthyInterval:
target.hcUnhealthyInterval || null,
hcMode: target.hcMode || null, hcMode: target.hcMode || null,
hcTlsServerName: target.hcTlsServerName hcTlsServerName: target.hcTlsServerName
}; };
@@ -737,7 +738,7 @@ export default function Page() {
const priorityColumn: ColumnDef<LocalTarget> = { const priorityColumn: ColumnDef<LocalTarget> = {
id: "priority", id: "priority",
header: () => ( header: () => (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 p-3">
{t("priority")} {t("priority")}
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
@@ -780,7 +781,7 @@ export default function Page() {
const healthCheckColumn: ColumnDef<LocalTarget> = { const healthCheckColumn: ColumnDef<LocalTarget> = {
accessorKey: "healthCheck", accessorKey: "healthCheck",
header: () => (<span className="p-3">{t("healthCheck")}</span>), header: () => <span className="p-3">{t("healthCheck")}</span>,
cell: ({ row }) => { cell: ({ row }) => {
const status = row.original.hcHealth || "unknown"; const status = row.original.hcHealth || "unknown";
const isEnabled = row.original.hcEnabled; const isEnabled = row.original.hcEnabled;
@@ -826,18 +827,16 @@ export default function Page() {
{row.original.siteType === "newt" ? ( {row.original.siteType === "newt" ? (
<Button <Button
variant="outline" variant="outline"
className="flex items-center justify-between gap-2 p-2 w-full text-left cursor-pointer" className="flex items-center gap-2 w-full text-left cursor-pointer"
onClick={() => onClick={() =>
openHealthCheckDialog(row.original) openHealthCheckDialog(row.original)
} }
> >
<Badge variant={getStatusColor(status)}> <Settings className="h-4 w-4" />
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{getStatusIcon(status)} {getStatusIcon(status)}
{getStatusText(status)} {getStatusText(status)}
</div> </div>
</Badge>
<Settings className="h-4 w-4" />
</Button> </Button>
) : ( ) : (
<span>-</span> <span>-</span>
@@ -852,7 +851,7 @@ export default function Page() {
const matchPathColumn: ColumnDef<LocalTarget> = { const matchPathColumn: ColumnDef<LocalTarget> = {
accessorKey: "path", accessorKey: "path",
header: () => (<span className="p-3">{t("matchPath")}</span>), header: () => <span className="p-3">{t("matchPath")}</span>,
cell: ({ row }) => { cell: ({ row }) => {
const hasPathMatch = !!( const hasPathMatch = !!(
row.original.path || row.original.pathMatchType row.original.path || row.original.pathMatchType
@@ -914,7 +913,7 @@ export default function Page() {
const addressColumn: ColumnDef<LocalTarget> = { const addressColumn: ColumnDef<LocalTarget> = {
accessorKey: "address", accessorKey: "address",
header: () => (<span className="p-3">{t("address")}</span>), header: () => <span className="p-3">{t("address")}</span>,
cell: ({ row }) => { cell: ({ row }) => {
const selectedSite = sites.find( const selectedSite = sites.find(
(site) => site.siteId === row.original.siteId (site) => site.siteId === row.original.siteId
@@ -1035,8 +1034,12 @@ export default function Page() {
{row.original.method || "http"} {row.original.method || "http"}
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="http">http</SelectItem> <SelectItem value="http">
<SelectItem value="https">https</SelectItem> http
</SelectItem>
<SelectItem value="https">
https
</SelectItem>
<SelectItem value="h2c">h2c</SelectItem> <SelectItem value="h2c">h2c</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
@@ -1050,7 +1053,7 @@ export default function Page() {
<Input <Input
defaultValue={row.original.ip} defaultValue={row.original.ip}
placeholder="IP / Hostname" placeholder="Host"
className="flex-1 min-w-[120px] pl-0 border-none placeholder-gray-400" className="flex-1 min-w-[120px] pl-0 border-none placeholder-gray-400"
onBlur={(e) => { onBlur={(e) => {
const input = e.target.value.trim(); const input = e.target.value.trim();
@@ -1128,7 +1131,7 @@ export default function Page() {
const rewritePathColumn: ColumnDef<LocalTarget> = { const rewritePathColumn: ColumnDef<LocalTarget> = {
accessorKey: "rewritePath", accessorKey: "rewritePath",
header: () => (<span className="p-3">{t("rewritePath")}</span>), header: () => <span className="p-3">{t("rewritePath")}</span>,
cell: ({ row }) => { cell: ({ row }) => {
const hasRewritePath = !!( const hasRewritePath = !!(
row.original.rewritePath || row.original.rewritePathType row.original.rewritePath || row.original.rewritePathType
@@ -1198,7 +1201,7 @@ export default function Page() {
const enabledColumn: ColumnDef<LocalTarget> = { const enabledColumn: ColumnDef<LocalTarget> = {
accessorKey: "enabled", accessorKey: "enabled",
header: () => (<span className="p-3">{t("enabled")}</span>), header: () => <span className="p-3">{t("enabled")}</span>,
cell: ({ row }) => ( cell: ({ row }) => (
<div className="flex items-center justify-center w-full"> <div className="flex items-center justify-center w-full">
<Switch <Switch
@@ -1219,7 +1222,7 @@ export default function Page() {
const actionsColumn: ColumnDef<LocalTarget> = { const actionsColumn: ColumnDef<LocalTarget> = {
id: "actions", id: "actions",
header: () => (<span className="p-3">{t("actions")}</span>), header: () => <span className="p-3">{t("actions")}</span>,
cell: ({ row }) => ( cell: ({ row }) => (
<div className="flex items-center justify-end w-full"> <div className="flex items-center justify-end w-full">
<Button <Button
@@ -1341,20 +1344,15 @@ export default function Page() {
</form> </form>
</Form> </Form>
</SettingsSectionForm> </SettingsSectionForm>
</SettingsSectionBody>
</SettingsSection>
{resourceTypes.length > 1 && ( {resourceTypes.length > 1 && (
<SettingsSection> <>
<SettingsSectionHeader> <div className="mb-2">
<SettingsSectionTitle> <span className="text-sm font-medium">
{t("resourceType")} {t("type")}
</SettingsSectionTitle> </span>
<SettingsSectionDescription> </div>
{t("resourceTypeDescription")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<StrategySelect <StrategySelect
options={resourceTypes} options={resourceTypes}
defaultValue="http" defaultValue="http"
@@ -1373,9 +1371,10 @@ export default function Page() {
}} }}
cols={2} cols={2}
/> />
</>
)}
</SettingsSectionBody> </SettingsSectionBody>
</SettingsSection> </SettingsSection>
)}
{baseForm.watch("http") ? ( {baseForm.watch("http") ? (
<SettingsSection> <SettingsSection>
@@ -1422,7 +1421,6 @@ export default function Page() {
</SettingsSectionDescription> </SettingsSectionDescription>
</SettingsSectionHeader> </SettingsSectionHeader>
<SettingsSectionBody> <SettingsSectionBody>
<SettingsSectionForm>
<Form {...tcpUdpForm}> <Form {...tcpUdpForm}>
<form <form
onKeyDown={(e) => { onKeyDown={(e) => {
@@ -1430,20 +1428,16 @@ export default function Page() {
e.preventDefault(); // block default enter refresh e.preventDefault(); // block default enter refresh
} }
}} }}
className="space-y-4" className="space-y-4 grid gap-4 grid-cols-1 md:grid-cols-2 items-start"
id="tcp-udp-settings-form" id="tcp-udp-settings-form"
> >
<Controller <Controller
control={ control={tcpUdpForm.control}
tcpUdpForm.control
}
name="protocol" name="protocol"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel> <FormLabel>
{t( {t("protocol")}
"protocol"
)}
</FormLabel> </FormLabel>
<Select <Select
onValueChange={ onValueChange={
@@ -1475,9 +1469,7 @@ export default function Page() {
/> />
<FormField <FormField
control={ control={tcpUdpForm.control}
tcpUdpForm.control
}
name="proxyPort" name="proxyPort"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
@@ -1519,49 +1511,8 @@ export default function Page() {
</FormItem> </FormItem>
)} )}
/> />
{/* {build == "oss" && (
<FormField
control={
tcpUdpForm.control
}
name="enableProxy"
render={({
field
}) => (
<FormItem className="flex flex-row items-start space-x-3 space-y-0">
<FormControl>
<Checkbox
variant={
"outlinePrimarySquare"
}
checked={
field.value
}
onCheckedChange={
field.onChange
}
/>
</FormControl>
<div className="space-y-1 leading-none">
<FormLabel>
{t(
"resourceEnableProxy"
)}
</FormLabel>
<FormDescription>
{t(
"resourceEnableProxyDescription"
)}
</FormDescription>
</div>
</FormItem>
)}
/>
)} */}
</form> </form>
</Form> </Form>
</SettingsSectionForm>
</SettingsSectionBody> </SettingsSectionBody>
</SettingsSection> </SettingsSection>
)} )}
@@ -1596,13 +1547,21 @@ export default function Page() {
( (
header header
) => { ) => {
const isActionsColumn = header.column.id === "actions"; const isActionsColumn =
header
.column
.id ===
"actions";
return ( return (
<TableHead <TableHead
key={ key={
header.id header.id
} }
className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""} className={
isActionsColumn
? "sticky right-0 z-10 w-auto min-w-fit bg-card"
: ""
}
> >
{header.isPlaceholder {header.isPlaceholder
? null ? null
@@ -1639,13 +1598,21 @@ export default function Page() {
( (
cell cell
) => { ) => {
const isActionsColumn = cell.column.id === "actions"; const isActionsColumn =
cell
.column
.id ===
"actions";
return ( return (
<TableCell <TableCell
key={ key={
cell.id cell.id
} }
className={isActionsColumn ? "sticky right-0 z-10 w-auto min-w-fit bg-card" : ""} className={
isActionsColumn
? "sticky right-0 z-10 w-auto min-w-fit bg-card"
: ""
}
> >
{flexRender( {flexRender(
cell cell
@@ -1711,7 +1678,7 @@ export default function Page() {
</div> </div>
</> </>
) : ( ) : (
<div className="text-center py-8 border-2 border-dashed border-muted rounded-lg p-4"> <div className="text-center p-4">
<p className="text-muted-foreground mb-4"> <p className="text-muted-foreground mb-4">
{t("targetNoOne")} {t("targetNoOne")}
</p> </p>

9
src/components/DomainPicker.tsx
View File

@@ -809,15 +809,6 @@ export default function DomainPicker2({
)} )}
</div> </div>
)} )}
{loadingDomains && (
<div className="flex items-center justify-center p-4">
<div className="flex items-center space-x-2 text-sm text-muted-foreground">
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary"></div>
<span>{t("domainPickerLoadingDomains")}</span>
</div>
</div>
)}
</div> </div>
); );
} }