mirror of
https://github.com/fosrl/pangolin.git
synced 2026-08-09 14:08:16 +02:00
Merge branch 'dev' into refactor/standardize-clear-buttons
This commit is contained in:
Fred KISSIE
@@ -103,7 +103,7 @@ export function ProxyResourceTargetsForm({
|
||||
// Notify parent of changes (create mode)
|
||||
useEffect(() => {
|
||||
onChange?.(targets);
|
||||
}, [targets]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
}, [targets]);
|
||||
|
||||
// Poll health status only in edit mode
|
||||
const { data: polledTargets } = useQuery({
|
||||
@@ -334,19 +334,15 @@ export function ProxyResourceTargetsForm({
|
||||
{row.original.siteType === "newt" ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex items-center gap-2 w-full text-left cursor-pointer"
|
||||
className="flex items-center space-x-2 w-full text-left cursor-pointer"
|
||||
onClick={() =>
|
||||
openHealthCheckDialog(row.original)
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={`flex items-center gap-2 ${status === "healthy" ? "text-green-500" : status === "unhealthy" ? "text-destructive" : "text-neutral-500"}`}
|
||||
>
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${status === "healthy" ? "bg-green-500" : status === "unhealthy" ? "bg-destructive" : "bg-neutral-500"}`}
|
||||
></div>
|
||||
{getStatusText(status)}
|
||||
</div>
|
||||
className={`w-2 h-2 rounded-full ${status === "healthy" ? "bg-green-500" : status === "unhealthy" ? "bg-destructive" : "bg-neutral-500"}`}
|
||||
></div>
|
||||
<span>{getStatusText(status)}</span>
|
||||
</Button>
|
||||
) : (
|
||||
<span>-</span>
|
||||
@@ -535,7 +531,7 @@ export function ProxyResourceTargetsForm({
|
||||
accessorKey: "enabled",
|
||||
header: () => <span className="p-3">{t("enabled")}</span>,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center justify-center w-full">
|
||||
<div className="flex items-center w-full">
|
||||
<Switch
|
||||
defaultChecked={row.original.enabled}
|
||||
onCheckedChange={(val) =>
|
||||
@@ -554,9 +550,8 @@ export function ProxyResourceTargetsForm({
|
||||
|
||||
const actionsColumn: ColumnDef<LocalTarget> = {
|
||||
id: "actions",
|
||||
header: () => <span className="p-3">{t("actions")}</span>,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center w-full">
|
||||
<div className="flex items-center justify-end w-full">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => removeTarget(row.original.targetId)}
|
||||
|
||||
@@ -7,7 +7,10 @@ import {
|
||||
SettingsSectionDescription,
|
||||
SettingsSectionForm,
|
||||
SettingsSectionHeader,
|
||||
SettingsSectionTitle
|
||||
SettingsSectionTitle,
|
||||
SettingsSubsectionDescription,
|
||||
SettingsSubsectionHeader,
|
||||
SettingsSubsectionTitle
|
||||
} from "@app/components/Settings";
|
||||
import { StrategySelect, StrategyOption } from "@app/components/StrategySelect";
|
||||
import { BrowserGatewayTargetForm } from "@app/components/BrowserGatewayTargetForm";
|
||||
@@ -386,9 +389,9 @@ function SshServerForm({
|
||||
<SettingsSectionBody>
|
||||
<SettingsSectionForm variant="half">
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-semibold">
|
||||
<SettingsSubsectionTitle>
|
||||
{t("sshServerMode")}
|
||||
</p>
|
||||
</SettingsSubsectionTitle>
|
||||
<Badge variant="secondary">
|
||||
{sshServerMode == "standard"
|
||||
? t("sshServerModeStandard")
|
||||
@@ -397,9 +400,9 @@ function SshServerForm({
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-semibold">
|
||||
<SettingsSubsectionTitle>
|
||||
{t("sshAuthenticationMethod")}
|
||||
</p>
|
||||
</SettingsSubsectionTitle>
|
||||
<StrategySelect<"passthrough" | "push">
|
||||
value={pamMode}
|
||||
options={authMethodOptions}
|
||||
@@ -410,9 +413,9 @@ function SshServerForm({
|
||||
|
||||
{showDaemonLocation && (
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-semibold">
|
||||
<SettingsSubsectionTitle>
|
||||
{t("sshAuthDaemonLocation")}
|
||||
</p>
|
||||
</SettingsSubsectionTitle>
|
||||
<StrategySelect<"site" | "remote">
|
||||
value={standardDaemonLocation}
|
||||
options={daemonLocationOptions}
|
||||
@@ -460,14 +463,14 @@ function SshServerForm({
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h2 className="text-1xl font-semibold tracking-tight flex items-center gap-2">
|
||||
<SettingsSubsectionHeader>
|
||||
<SettingsSubsectionTitle>
|
||||
{t("sshServerDestination")}
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
</SettingsSubsectionTitle>
|
||||
<SettingsSubsectionDescription>
|
||||
{t("sshServerDestinationDescription")}
|
||||
</p>
|
||||
</div>
|
||||
</SettingsSubsectionDescription>
|
||||
</SettingsSubsectionHeader>
|
||||
{isNative ? (
|
||||
<Popover
|
||||
open={nativeSiteOpen}
|
||||
|
||||
@@ -2,13 +2,6 @@
|
||||
|
||||
import CopyTextBox from "@app/components/CopyTextBox";
|
||||
import DomainPicker from "@app/components/DomainPicker";
|
||||
import HealthCheckCredenza from "@app/components/HealthCheckCredenza";
|
||||
import {
|
||||
PathMatchDisplay,
|
||||
PathMatchModal,
|
||||
PathRewriteDisplay,
|
||||
PathRewriteModal
|
||||
} from "@app/components/PathMatchRenameModal";
|
||||
import {
|
||||
SettingsContainer,
|
||||
SettingsSection,
|
||||
@@ -16,7 +9,10 @@ import {
|
||||
SettingsSectionDescription,
|
||||
SettingsSectionForm,
|
||||
SettingsSectionHeader,
|
||||
SettingsSectionTitle
|
||||
SettingsSectionTitle,
|
||||
SettingsSubsectionDescription,
|
||||
SettingsSubsectionHeader,
|
||||
SettingsSubsectionTitle
|
||||
} from "@app/components/Settings";
|
||||
import HeaderTitle from "@app/components/SettingsSectionTitle";
|
||||
import {
|
||||
@@ -48,29 +44,6 @@ import {
|
||||
PopoverContent,
|
||||
PopoverTrigger
|
||||
} from "@app/components/ui/popover";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@app/components/ui/select";
|
||||
import { Switch } from "@app/components/ui/switch";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow
|
||||
} from "@app/components/ui/table";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger
|
||||
} from "@app/components/ui/tooltip";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { usePaidStatus } from "@app/hooks/usePaidStatus";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
@@ -84,32 +57,16 @@ import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { build } from "@server/build";
|
||||
import { Resource } from "@server/db";
|
||||
import { isTargetValid } from "@server/lib/validators";
|
||||
import { ListTargetsResponse } from "@server/routers/target";
|
||||
import { ListRemoteExitNodesResponse } from "@server/routers/remoteExitNode/types";
|
||||
import { ArrayElement } from "@server/types/ArrayElement";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import {
|
||||
LocalTarget,
|
||||
ProxyResourceTargetsForm
|
||||
} from "@app/app/[orgId]/settings/resources/public/ProxyResourceTargetsForm";
|
||||
import {
|
||||
ColumnDef,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
useReactTable
|
||||
} from "@tanstack/react-table";
|
||||
import { AxiosResponse } from "axios";
|
||||
import {
|
||||
ChevronsUpDown,
|
||||
CircleCheck,
|
||||
CircleX,
|
||||
ExternalLink,
|
||||
Info,
|
||||
Plus,
|
||||
Settings,
|
||||
SquareArrowOutUpRight
|
||||
} from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
@@ -119,13 +76,11 @@ import { toASCII } from "punycode";
|
||||
import {
|
||||
useMemo,
|
||||
useState,
|
||||
useCallback,
|
||||
useTransition,
|
||||
useEffect
|
||||
} from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { cn } from "@app/lib/cn";
|
||||
|
||||
const baseResourceFormSchema = z.object({
|
||||
name: z.string().min(1).max(255),
|
||||
@@ -327,14 +282,25 @@ export default function Page() {
|
||||
const rawResourcesAllowed =
|
||||
env.flags.allowRawResources &&
|
||||
(build !== "saas" || remoteExitNodes.length > 0);
|
||||
const enterpriseModesAllowed =
|
||||
!env.flags.disableEnterpriseFeatures;
|
||||
|
||||
const availableTypes = useMemo((): NewResourceType[] => {
|
||||
const base: NewResourceType[] = ["http", "ssh", "rdp", "vnc"];
|
||||
const base: NewResourceType[] = ["http"];
|
||||
if (enterpriseModesAllowed) {
|
||||
base.push("ssh", "rdp", "vnc");
|
||||
}
|
||||
if (rawResourcesAllowed) {
|
||||
base.push("tcp", "udp");
|
||||
}
|
||||
return base;
|
||||
}, [rawResourcesAllowed]);
|
||||
}, [enterpriseModesAllowed, rawResourcesAllowed]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!availableTypes.includes(resourceType)) {
|
||||
setResourceType("http");
|
||||
}
|
||||
}, [availableTypes, resourceType]);
|
||||
|
||||
const baseForm = useForm({
|
||||
resolver: zodResolver(baseResourceFormSchema),
|
||||
@@ -686,19 +652,25 @@ export default function Page() {
|
||||
}
|
||||
];
|
||||
|
||||
const typeLabels: Record<NewResourceType, string> = {
|
||||
let typeLabels: Partial<Record<NewResourceType, string>> = {
|
||||
http: "HTTP",
|
||||
ssh: "SSH",
|
||||
rdp: "RDP",
|
||||
vnc: "VNC",
|
||||
tcp: "TCP",
|
||||
udp: "UDP"
|
||||
};
|
||||
|
||||
if (enterpriseModesAllowed) {
|
||||
typeLabels = {
|
||||
...typeLabels,
|
||||
ssh: "SSH",
|
||||
rdp: "RDP",
|
||||
vnc: "VNC",
|
||||
}
|
||||
}
|
||||
|
||||
const typeOptions: OptionSelectOption<NewResourceType>[] =
|
||||
availableTypes.map((type) => ({
|
||||
value: type,
|
||||
label: typeLabels[type]
|
||||
label: typeLabels[type] ?? type.toUpperCase()
|
||||
}));
|
||||
|
||||
return (
|
||||
@@ -742,7 +714,7 @@ export default function Page() {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
className="space-y-4"
|
||||
className="grid gap-4 grid-cols-1 md:grid-cols-2 items-start"
|
||||
id="base-resource-form"
|
||||
>
|
||||
<FormField
|
||||
@@ -825,7 +797,7 @@ export default function Page() {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
className="space-y-4"
|
||||
className="grid gap-4 grid-cols-1 md:grid-cols-2 items-start"
|
||||
id="tcp-udp-settings-form"
|
||||
>
|
||||
<FormField
|
||||
@@ -910,10 +882,10 @@ export default function Page() {
|
||||
<SettingsSectionBody>
|
||||
<SettingsSectionForm variant="half">
|
||||
{/* Mode */}
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-semibold">
|
||||
<div className="space-y-2">
|
||||
<SettingsSubsectionTitle>
|
||||
{t("sshServerMode")}
|
||||
</p>
|
||||
</SettingsSubsectionTitle>
|
||||
<StrategySelect<
|
||||
"standard" | "native"
|
||||
>
|
||||
@@ -924,12 +896,12 @@ export default function Page() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-semibold">
|
||||
<div className="space-y-2">
|
||||
<SettingsSubsectionTitle>
|
||||
{t(
|
||||
"sshAuthenticationMethod"
|
||||
)}
|
||||
</p>
|
||||
</SettingsSubsectionTitle>
|
||||
<StrategySelect<
|
||||
"passthrough" | "push"
|
||||
>
|
||||
@@ -944,12 +916,12 @@ export default function Page() {
|
||||
|
||||
{/* Daemon Location (standard + push) */}
|
||||
{showDaemonLocation && (
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-semibold">
|
||||
<div className="space-y-2">
|
||||
<SettingsSubsectionTitle>
|
||||
{t(
|
||||
"sshAuthDaemonLocation"
|
||||
)}
|
||||
</p>
|
||||
</SettingsSubsectionTitle>
|
||||
<StrategySelect<
|
||||
"site" | "remote"
|
||||
>
|
||||
@@ -984,49 +956,55 @@ export default function Page() {
|
||||
{/* Daemon Port (standard + push + remote) */}
|
||||
{showDaemonPort && (
|
||||
<Form {...sshDaemonPortForm}>
|
||||
<FormField
|
||||
control={
|
||||
sshDaemonPortForm.control
|
||||
}
|
||||
name="authDaemonPort"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t(
|
||||
"sshDaemonPort"
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={
|
||||
65535
|
||||
}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="w-full md:w-1/2">
|
||||
<FormField
|
||||
control={
|
||||
sshDaemonPortForm.control
|
||||
}
|
||||
name="authDaemonPort"
|
||||
render={({
|
||||
field
|
||||
}) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t(
|
||||
"sshDaemonPort"
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={
|
||||
1
|
||||
}
|
||||
max={
|
||||
65535
|
||||
}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
|
||||
{/* Server Destination */}
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold">
|
||||
<SettingsSubsectionHeader>
|
||||
<SettingsSubsectionTitle>
|
||||
{t(
|
||||
"sshServerDestination"
|
||||
)}
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
</SettingsSubsectionTitle>
|
||||
<SettingsSubsectionDescription>
|
||||
{t(
|
||||
"sshServerDestinationDescription"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</SettingsSubsectionDescription>
|
||||
</SettingsSubsectionHeader>
|
||||
{isNative ? (
|
||||
<Popover
|
||||
open={nativeSiteOpen}
|
||||
@@ -1038,7 +1016,7 @@ export default function Page() {
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className="w-full max-w-xs justify-between font-normal"
|
||||
className="w-full md:w-1/2 justify-between font-normal"
|
||||
>
|
||||
<span className="truncate">
|
||||
{nativeSelectedSite?.name ??
|
||||
|
||||
@@ -256,7 +256,7 @@ export default function GeneralPage() {
|
||||
return (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="">
|
||||
<SwitchInput
|
||||
id="auto-update-enabled"
|
||||
label={t(
|
||||
@@ -285,7 +285,7 @@ export default function GeneralPage() {
|
||||
type="button"
|
||||
variant="link"
|
||||
size="sm"
|
||||
className="h-auto p-0 pb-2 text-xs"
|
||||
className="text-sm text-muted-foreground underline px-0"
|
||||
onClick={() => {
|
||||
form.setValue(
|
||||
"autoUpdateOverrideOrg",
|
||||
|
||||
Reference in New Issue
Block a user