add docker deployment snippets to create site form

src/app/[orgId]/settings/resources/[resourceId]/rules/page.tsx

@@ -352,10 +352,8 @@ export default function ResourceRules(props: {
                         updateRule(row.original.ruleId, { action: value })
                     }
                 >
-                    <SelectTrigger className="min-w-[100px]">
-                        {row.original.action === "ACCEPT"
-                            ? RuleAction.ACCEPT
-                            : RuleAction.DROP}
+                    <SelectTrigger className="min-w-[150px]">
+                        <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
                         <SelectItem value="ACCEPT">
@@ -376,12 +374,8 @@ export default function ResourceRules(props: {
                         updateRule(row.original.ruleId, { match: value })
                     }
                 >
-                    <SelectTrigger className="min-w-[100px]">
-                        {row.original.match === "IP"
-                            ? RuleMatch.IP
-                            : row.original.match === "CIDR"
-                              ? RuleMatch.CIDR
-                              : RuleMatch.PATH}
+                    <SelectTrigger className="min-w-[125px]">
+                        <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
                         <SelectItem value="IP">{RuleMatch.IP}</SelectItem>
@@ -436,7 +430,7 @@ export default function ResourceRules(props: {
 
     return (
         <SettingsContainer>
-            <Alert>
+            <Alert className="hidden md:block">
                 <InfoIcon className="h-4 w-4" />
                 <AlertTitle className="font-semibold">About Rules</AlertTitle>
                 <AlertDescription className="mt-4">

src/app/[orgId]/settings/sites/CreateSiteForm.tsx

@@ -38,7 +38,16 @@ import { SiteRow } from "./SitesTable";
 import { AxiosResponse } from "axios";
 import { Button } from "@app/components/ui/button";
 import Link from "next/link";
-import { ArrowUpRight, SquareArrowOutUpRight } from "lucide-react";
+import {
+    ArrowUpRight,
+    ChevronsUpDown,
+    SquareArrowOutUpRight
+} from "lucide-react";
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger
+} from "@app/components/ui/collapsible";
 
 const createSiteFormSchema = z.object({
     name: z
@@ -78,6 +87,8 @@ export default function CreateSiteForm({
     const [isLoading, setIsLoading] = useState(false);
     const [isChecked, setIsChecked] = useState(false);
 
+    const [isOpen, setIsOpen] = useState(false);
+
     const [keypair, setKeypair] = useState<{
         publicKey: string;
         privateKey: string;
@@ -182,10 +193,9 @@ export default function CreateSiteForm({
         }
 
         const res = await api
-            .put<AxiosResponse<CreateSiteResponse>>(
-                `/org/${orgId}/site/`,
-                payload
-            )
+            .put<
+                AxiosResponse<CreateSiteResponse>
+            >(`/org/${orgId}/site/`, payload)
             .catch((e) => {
                 toast({
                     variant: "destructive",
@@ -235,6 +245,18 @@ PersistentKeepalive = 5`
 
     const newtConfig = `newt --id ${siteDefaults?.newtId} --secret ${siteDefaults?.newtSecret} --endpoint ${env.app.dashboardUrl}`;
 
+    const newtConfigDockerCompose = `services:
+    newt:
+        image: fosrl/newt
+        container_name: newt
+        restart: unless-stopped
+        environment:
+            - PANGOLIN_ENDPOINT=${env.app.dashboardUrl}
+            - NEWT_ID=${siteDefaults?.newtId}
+            - NEWT_SECRET=${siteDefaults?.newtSecret}`;
+
+    const newtConfigDockerRun = `docker run -it fosrl/newt --id ${siteDefaults?.newtId} --secret ${siteDefaults?.newtSecret} --endpoint ${env.app.dashboardUrl}`;
+
     return (
         <div className="space-y-4">
             <Form {...form}>
@@ -305,11 +327,26 @@ PersistentKeepalive = 5`
                         )}
                     />
 
+                    {form.watch("method") === "newt" && (
+                        <Link
+                            className="text-sm text-primary flex items-center gap-1"
+                            href="https://docs.fossorial.io/Newt/install"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <span>
+                                {" "}
+                                Learn how to install Newt on your system
+                            </span>
+                            <SquareArrowOutUpRight size={14} />
+                        </Link>
+                    )}
+
                     <div className="w-full">
                         {form.watch("method") === "wireguard" && !isLoading ? (
                             <>
                                 <CopyTextBox text={wgConfig} />
-                                <span className="text-sm text-muted-foreground">
+                                <span className="text-sm text-muted-foreground mt-2">
                                     You will only be able to see the
                                     configuration once.
                                 </span>
@@ -319,10 +356,59 @@ PersistentKeepalive = 5`
                             <p>Loading WireGuard configuration...</p>
                         ) : form.watch("method") === "newt" ? (
                             <>
-                                <CopyTextBox
-                                    text={newtConfig}
-                                    wrapText={false}
-                                />
+                                <div className="mb-2">
+                                    <Collapsible
+                                        open={isOpen}
+                                        onOpenChange={setIsOpen}
+                                        className="space-y-2"
+                                    >
+                                        <div className="mx-auto">
+                                            <CopyTextBox
+                                                text={newtConfig}
+                                                wrapText={false}
+                                            />
+                                        </div>
+                                        <div className="flex items-center justify-between space-x-4">
+                                            <CollapsibleTrigger asChild>
+                                                <Button
+                                                    variant="text"
+                                                    size="sm"
+                                                    className="p-0 flex items-center justify-between w-full"
+                                                >
+                                                    <h4 className="text-sm font-semibold">
+                                                        Expand for Docker Deployment
+                                                        Details
+                                                    </h4>
+                                                    <div>
+                                                        <ChevronsUpDown className="h-4 w-4" />
+                                                        <span className="sr-only">
+                                                            Toggle
+                                                        </span>
+                                                    </div>
+                                                </Button>
+                                            </CollapsibleTrigger>
+                                        </div>
+                                        <CollapsibleContent className="space-y-4">
+                                            <div className="space-y-2">
+                                                <b>Docker Compose</b>
+                                                <CopyTextBox
+                                                    text={
+                                                        newtConfigDockerCompose
+                                                    }
+                                                    wrapText={false}
+                                                />
+                                            </div>
+                                            <div className="space-y-2">
+                                                <b>Docker Run</b>
+
+                                                <CopyTextBox
+                                                    text={newtConfigDockerRun}
+                                                    wrapText={false}
+                                                />
+                                            </div>
+                                        </CollapsibleContent>
+                                    </Collapsible>
+                                </div>
                                 <span className="text-sm text-muted-foreground">
                                     You will only be able to see the
                                     configuration once.
@@ -331,21 +417,6 @@ PersistentKeepalive = 5`
                         ) : null}
                     </div>
 
-                    {form.watch("method") === "newt" && (
-                        <Link
-                            className="text-sm text-primary flex items-center gap-1"
-                            href="https://docs.fossorial.io/Newt/install"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            <span>
-                                {" "}
-                                Learn how to install Newt on your system
-                            </span>
-                            <SquareArrowOutUpRight size={14} />
-                        </Link>
-                    )}
-
                     {form.watch("method") === "local" && (
                         <Link
                             className="text-sm text-primary flex items-center gap-1"
@@ -353,10 +424,7 @@ PersistentKeepalive = 5`
                             target="_blank"
                             rel="noopener noreferrer"
                         >
-                            <span>
-                                {" "}
-                                Local sites do not tunnel, learn more
-                            </span>
+                            <span> Local sites do not tunnel, learn more</span>
                             <SquareArrowOutUpRight size={14} />
                         </Link>
                     )}