redesign path match and rewrite modal

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

@@ -73,6 +73,7 @@ import {
     CircleCheck,
     CircleX,
     ArrowRight,
+    Plus,
     MoveRight
 } from "lucide-react";
 import { ContainersSelector } from "@app/components/ContainersSelector";
@@ -95,9 +96,9 @@ import {
     CommandItem,
     CommandList
 } from "@app/components/ui/command";
-import { Badge } from "@app/components/ui/badge";
 import { parseHostTarget } from "@app/lib/parseHostTarget";
 import { HeadersInput } from "@app/components/HeadersInput";
+import { PathMatchDisplay, PathMatchModal, PathRewriteDisplay, PathRewriteModal } from "@app/components/PathMatchRenameModal";
 
 const addTargetSchema = z.object({
     ip: z.string().refine(isTargetValid),
@@ -597,93 +598,64 @@ export default function ReverseProxyTargets(props: {
             accessorKey: "path",
             header: t("matchPath"),
             cell: ({ row }) => {
-                const [showPathInput, setShowPathInput] = useState(
-                    !!(row.original.path || row.original.pathMatchType)
-                );
+                const hasPathMatch = !!(row.original.path || row.original.pathMatchType);
 
-                if (!showPathInput) {
-                    return (
-                        <Button
-                            variant="outline"
-                            onClick={() => {
-                                setShowPathInput(true);
-                                // Set default pathMatchType when first showing path input
-                                if (!row.original.pathMatchType) {
-                                    updateTarget(row.original.targetId, {
-                                        ...row.original,
-                                        pathMatchType: "prefix"
-                                    });
-                                }
+                return hasPathMatch ? (
+                    <div className="flex items-center gap-1">
+                        <PathMatchModal
+                            value={{
+                                path: row.original.path,
+                                pathMatchType: row.original.pathMatchType,
                             }}
-                        >
-                            + {t("matchPath")}
-                        </Button>
-                    );
-                }
-
-                return (
-                    <div className="flex gap-2 min-w-[200px] items-center">
-                        <Select
-                            defaultValue={row.original.pathMatchType || "prefix"}
-                            onValueChange={(value) =>
-                                updateTarget(row.original.targetId, {
-                                    ...row.original,
-                                    pathMatchType: value as "exact" | "prefix" | "regex"
-                                })
+                            onChange={(config) => updateTarget(row.original.targetId, config)}
+                            trigger={
+                                <Button
+                                    variant="outline"
+                                    className="flex items-center gap-2 p-2 max-w-md w-full text-left cursor-pointer"
+                                >
+                                    <PathMatchDisplay
+                                        value={{
+                                            path: row.original.path,
+                                            pathMatchType: row.original.pathMatchType,
+                                        }}
+                                    />
+                                </Button>
                             }
-                        >
-                            <SelectTrigger className="w-25">
-                                <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="prefix">Prefix</SelectItem>
-                                <SelectItem value="exact">Exact</SelectItem>
-                                <SelectItem value="regex">Regex</SelectItem>
-                            </SelectContent>
-                        </Select>
-                        <Input
-                            placeholder={
-                                row.original.pathMatchType === "regex"
-                                    ? "^/api/.*"
-                                    : "/path"
-                            }
-                            defaultValue={row.original.path || ""}
-                            className="flex-1 min-w-[150px]"
-                            onBlur={(e) => {
-                                const value = e.target.value.trim();
-                                if (!value) {
-                                    setShowPathInput(false);
-                                    updateTarget(row.original.targetId, {
-                                        ...row.original,
-                                        path: null,
-                                        pathMatchType: null
-                                    });
-                                } else {
-                                    updateTarget(row.original.targetId, {
-                                        ...row.original,
-                                        path: value
-                                    });
-                                }
-                            }}
                         />
                         <Button
-                            variant="outline"
-                            onClick={() => {
-                                setShowPathInput(false);
+                            variant="text"
+                            size="sm"
+                            className="px-1"
+                            onClick={(e) => {
+                                e.stopPropagation();
                                 updateTarget(row.original.targetId, {
                                     ...row.original,
                                     path: null,
-                                    pathMatchType: null
+                                    pathMatchType: null,
                                 });
                             }}
                         >
                             ×
                         </Button>
 
-                        <MoveRight className="ml-4 h-4 w-4" />
+                        {/* <MoveRight className="ml-1 h-4 w-4" /> */}
                     </div>
+                ) : (
+                    <PathMatchModal
+                        value={{
+                            path: row.original.path,
+                            pathMatchType: row.original.pathMatchType,
+                        }}
+                        onChange={(config) => updateTarget(row.original.targetId, config)}
+                        trigger={
+                            <Button variant="outline" size="sm">
+                                <Plus className="h-4 w-4 mr-2" />
+                                {t("matchPath")}
+                            </Button>
+                        }
+                    />
                 );
-            }
+            },
         },
         {
             accessorKey: "siteId",
@@ -886,98 +858,68 @@ export default function ReverseProxyTargets(props: {
             accessorKey: "rewritePath",
             header: t("rewritePath"),
             cell: ({ row }) => {
-                const [showRewritePathInput, setShowRewritePathInput] = useState(
-                    !!(row.original.rewritePath || row.original.rewritePathType)
-                );
+                const hasRewritePath = !!(row.original.rewritePath || row.original.rewritePathType);
+                const noPathMatch = !row.original.path && !row.original.pathMatchType;
 
-                if (!showRewritePathInput) {
-                    const noPathMatch =
-                        !row.original.path && !row.original.pathMatchType;
-                    return (
-                        <Button
-                            variant="outline"
-                            disabled={noPathMatch}
-                            onClick={() => {
-                                setShowRewritePathInput(true);
-                                // Set default rewritePathType when first showing path input
-                                if (!row.original.rewritePathType) {
-                                    updateTarget(row.original.targetId, {
-                                        ...row.original,
-                                        rewritePathType: "prefix"
-                                    });
-                                }
+                return hasRewritePath && !noPathMatch ? (
+                    <div className="flex items-center gap-1">
+                        {/* <MoveRight className="mr-2 h-4 w-4" /> */}
+                        <PathRewriteModal
+                            value={{
+                                rewritePath: row.original.rewritePath,
+                                rewritePathType: row.original.rewritePathType,
                             }}
-                        >
-                            + {t("rewritePath")}
-                        </Button>
-                    );
-                }
-
-                return (
-                    <div className="flex gap-2 min-w-[200px] items-center">
+                            onChange={(config) => updateTarget(row.original.targetId, config)}
+                            trigger={
+                                <Button
+                                    variant="outline"
+                                    className="flex items-center gap-2 p-2 max-w-md w-full text-left cursor-pointer"
+                                    disabled={noPathMatch}
+                                >
+                                    <PathRewriteDisplay
+                                        value={{
+                                            rewritePath: row.original.rewritePath,
+                                            rewritePathType: row.original.rewritePathType,
+                                        }}
+                                    />
+                                </Button>
+                            }
+                        />
                         <Button
-                            variant="outline"
-                            onClick={() => {
-                                setShowRewritePathInput(false);
+                            size="sm"
+                            variant="text"
+                            className="px-1"
+                            onClick={(e) => {
+                                e.stopPropagation();
                                 updateTarget(row.original.targetId, {
                                     ...row.original,
                                     rewritePath: null,
-                                    rewritePathType: null
+                                    rewritePathType: null,
                                 });
                             }}
                         >
                             ×
                         </Button>
-
-                        <MoveRight className="ml-4 h-4 w-4" />
-                        <Select
-                            defaultValue={row.original.rewritePathType || "prefix"}
-                            onValueChange={(value) =>
-                                updateTarget(row.original.targetId, {
-                                    ...row.original,
-                                    rewritePathType: value as "exact" | "prefix" | "regex"
-                                })
-                            }
-                        >
-                            <SelectTrigger className="w-25">
-                                <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="prefix">Prefix</SelectItem>
-                                <SelectItem value="exact">Exact</SelectItem>
-                                <SelectItem value="regex">Regex</SelectItem>
-                                <SelectItem value="stripPrefix">Strip Prefix</SelectItem>
-                            </SelectContent>
-                        </Select>
-                        <Input
-                            placeholder={
-                                row.original.rewritePathType === "regex"
-                                    ? "^/api/.*"
-                                    : "/path"
-                            }
-                            defaultValue={row.original.rewritePath || ""}
-                            className="flex-1 min-w-[150px]"
-                            onBlur={(e) => {
-                                const value = e.target.value.trim();
-                                if (!value) {
-                                    setShowRewritePathInput(false);
-                                    updateTarget(row.original.targetId, {
-                                        ...row.original,
-                                        rewritePath: null,
-                                        rewritePathType: null
-                                    });
-                                } else {
-                                    updateTarget(row.original.targetId, {
-                                        ...row.original,
-                                        rewritePath: value
-                                    });
-                                }
-                            }}
-                        />
                     </div>
+                ) : (
+                    <PathRewriteModal
+                        value={{
+                            rewritePath: row.original.rewritePath,
+                            rewritePathType: row.original.rewritePathType,
+                        }}
+                        onChange={(config) => updateTarget(row.original.targetId, config)}
+                        trigger={
+                            <Button variant="outline" size="sm" disabled={noPathMatch}>
+                                <Plus className="h-4 w-4 mr-2" />
+                                {t("rewritePath")}
+                            </Button>
+                        }
+                        disabled={noPathMatch}
+                    />
                 );
-            }
+            },
         },
+
         // {
         //     accessorKey: "protocol",
         //     header: t('targetProtocol'),
@@ -1649,7 +1591,6 @@ export default function ReverseProxyTargets(props: {
 }
 
 function isIPInSubnet(subnet: string, ip: string): boolean {
-    // Split subnet into IP and mask parts
     const [subnetIP, maskBits] = subnet.split("/");
     const mask = parseInt(maskBits);
 

src/components/PathMatchRenameModal.tsx

@@ -0,0 +1,293 @@
+import { Pencil } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@app/components/ui/dialog";
+import { Badge } from "@app/components/ui/badge";
+import { Label } from "@app/components/ui/label";
+import { useEffect, useState } from "react";
+import { Input } from "./ui/input";
+import { Button } from "./ui/button";
+
+
+export function PathMatchModal({
+  value,
+  onChange,
+  trigger,
+}: {
+  value: { path: string | null; pathMatchType: string | null };
+  onChange: (config: { path: string | null; pathMatchType: string | null }) => void;
+  trigger: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const [matchType, setMatchType] = useState(value?.pathMatchType || "prefix");
+  const [path, setPath] = useState(value?.path || "");
+
+  useEffect(() => {
+    if (open) {
+      setMatchType(value?.pathMatchType || "prefix");
+      setPath(value?.path || "");
+    }
+  }, [open, value]);
+
+  const handleSave = () => {
+    onChange({ pathMatchType: matchType as any, path: path.trim() });
+    setOpen(false);
+  };
+
+  const handleClear = () => {
+    onChange({ pathMatchType: null, path: null });
+    setOpen(false);
+  };
+
+  const getPlaceholder = () => (matchType === "regex" ? "^/api/.*" : "/path");
+
+  const getHelpText = () => {
+    switch (matchType) {
+      case "prefix":
+        return "Example: /api matches /api, /api/users, etc.";
+      case "exact":
+        return "Example: /api matches only /api";
+      case "regex":
+        return "Example: ^/api/.* matches /api/anything";
+      default:
+        return "";
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Configure Path Matching</DialogTitle>
+          <DialogDescription>
+            Set up how incoming requests should be matched based on their path.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="match-type">Match Type</Label>
+            <Select value={matchType} onValueChange={setMatchType}>
+              <SelectTrigger id="match-type">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="prefix">Prefix</SelectItem>
+                <SelectItem value="exact">Exact</SelectItem>
+                <SelectItem value="regex">Regex</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="path-value">Path Value</Label>
+            <Input
+              id="path-value"
+              placeholder={getPlaceholder()}
+              value={path}
+              onChange={(e) => setPath(e.target.value)}
+            />
+            <p className="text-sm text-muted-foreground">{getHelpText()}</p>
+          </div>
+        </div>
+        <DialogFooter className="gap-2">
+          {value?.path && (
+            <Button variant="outline" onClick={handleClear}>
+              Clear
+            </Button>
+          )}
+          <Button onClick={handleSave} disabled={!path.trim()}>
+            Save Changes
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+
+export function PathRewriteModal({
+  value,
+  onChange,
+  trigger,
+  disabled,
+}: {
+  value: { rewritePath: string | null; rewritePathType: string | null };
+  onChange: (config: { rewritePath: string | null; rewritePathType: string | null }) => void;
+  trigger: React.ReactNode;
+  disabled?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const [rewriteType, setRewriteType] = useState(value?.rewritePathType || "prefix");
+  const [rewritePath, setRewritePath] = useState(value?.rewritePath || "");
+
+  useEffect(() => {
+    if (open) {
+      setRewriteType(value?.rewritePathType || "prefix");
+      setRewritePath(value?.rewritePath || "");
+    }
+  }, [open, value]);
+
+  const handleSave = () => {
+    onChange({ rewritePathType: rewriteType as any, rewritePath: rewritePath.trim() });
+    setOpen(false);
+  };
+
+  const handleClear = () => {
+    onChange({ rewritePathType: null, rewritePath: null });
+    setOpen(false);
+  };
+
+  const getPlaceholder = () => {
+    switch (rewriteType) {
+      case "regex":
+        return "/new/$1";
+      case "stripPrefix":
+        return "";
+      default:
+        return "/new-path";
+    }
+  };
+
+  const getHelpText = () => {
+    switch (rewriteType) {
+      case "prefix":
+        return "Replace the matched prefix with this value";
+      case "exact":
+        return "Replace the entire path with this value";
+      case "regex":
+        return "Use capture groups like $1, $2 for replacement";
+      case "stripPrefix":
+        return "Leave empty to strip prefix or provide new prefix";
+      default:
+        return "";
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild disabled={disabled}>
+        {trigger}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Configure Path Rewriting</DialogTitle>
+          <DialogDescription>
+            Transform the matched path before forwarding to the target.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="rewrite-type">Rewrite Type</Label>
+            <Select value={rewriteType} onValueChange={setRewriteType}>
+              <SelectTrigger id="rewrite-type">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="prefix">Prefix - Replace prefix</SelectItem>
+                <SelectItem value="exact">Exact - Replace entire path</SelectItem>
+                <SelectItem value="regex">Regex - Pattern replacement</SelectItem>
+                <SelectItem value="stripPrefix">Strip Prefix - Remove prefix</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="rewrite-value">Rewrite Value</Label>
+            <Input
+              id="rewrite-value"
+              placeholder={getPlaceholder()}
+              value={rewritePath}
+              onChange={(e) => setRewritePath(e.target.value)}
+            />
+            <p className="text-sm text-muted-foreground">{getHelpText()}</p>
+          </div>
+        </div>
+        <DialogFooter className="gap-2">
+          {value?.rewritePath && (
+            <Button variant="outline" onClick={handleClear}>
+              Clear
+            </Button>
+          )}
+          <Button
+            onClick={handleSave}
+            disabled={rewriteType !== "stripPrefix" && !rewritePath.trim()}
+          >
+            Save Changes
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function PathMatchDisplay({
+  value,
+}: {
+  value: { path: string | null; pathMatchType: string | null };
+}) {
+  if (!value?.path) return null;
+
+  const getTypeLabel = (type: string | null) => {
+    const labels: Record<string, string> = {
+      prefix: "Prefix",
+      exact: "Exact",
+      regex: "Regex",
+    };
+    return labels[type || ""] || type;
+  };
+
+  return (
+    <div className="flex items-center gap-2 w-full text-left">
+      <Badge variant="secondary" className="font-mono text-xs shrink-0">
+        {getTypeLabel(value.pathMatchType)}
+      </Badge>
+      <code className="text-sm flex-1 truncate" title={value.path}>
+        {value.path}
+      </code>
+      <Pencil className="h-3 w-3 shrink-0 opacity-70" />
+    </div>
+  );
+}
+
+
+export function PathRewriteDisplay({
+  value,
+}: {
+  value: { rewritePath: string | null; rewritePathType: string | null };
+}) {
+  if (!value?.rewritePath && value?.rewritePathType !== "stripPrefix") return null;
+
+  const getTypeLabel = (type: string | null) => {
+    const labels: Record<string, string> = {
+      prefix: "Prefix",
+      exact: "Exact",
+      regex: "Regex",
+      stripPrefix: "Strip",
+    };
+    return labels[type || ""] || type;
+  };
+
+  return (
+    <div className="flex items-center gap-2 w-full text-left">
+      <Badge variant="secondary" className="font-mono text-xs shrink-0">
+        {getTypeLabel(value.rewritePathType)}
+      </Badge>
+      <code className="text-sm flex-1 truncate" title={value.rewritePath || ""}>
+        {value.rewritePath || <span className="text-muted-foreground italic">(strip)</span>}
+      </code>
+      <Pencil className="h-3 w-3 shrink-0 opacity-70" />
+    </div>
+  );
+}