add new resource create wizard

server/routers/resource/createResource.ts

@@ -39,7 +39,6 @@ const createHttpResourceSchema = z
         isBaseDomain: z.boolean().optional(),
         siteId: z.number(),
         http: z.boolean(),
-        protocol: z.string(),
         domainId: z.string()
     })
     .strict()
@@ -203,7 +202,7 @@ async function createHttpResource(
         );
     }
 
-    const { name, subdomain, isBaseDomain, http, protocol, domainId } =
+    const { name, subdomain, isBaseDomain, http, domainId } =
         parsedBody.data;
 
     const [orgDomain] = await db
@@ -262,7 +261,7 @@ async function createHttpResource(
                 name,
                 subdomain,
                 http,
-                protocol,
+                protocol: "tcp",
                 ssl: true,
                 isBaseDomain
             })

src/app/[orgId]/settings/resources/ResourcesTable.tsx

@@ -21,10 +21,8 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import CreateResourceForm from "./CreateResourceForm";
 import { useState } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
-import { set } from "zod";
 import { formatAxiosError } from "@app/lib/api";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient } from "@app/lib/api";
@@ -58,10 +56,8 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
 
     const api = createApiClient(useEnvContext());
 
-    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-    const [selectedResource, setSelectedResource] =
+    const [selectedResource, setSelectedResource] = useState<ResourceRow | null>();
-        useState<ResourceRow | null>();
 
     const deleteResource = (resourceId: number) => {
         api.delete(`/resource/${resourceId}`)
@@ -282,11 +278,6 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
 
     return (
         <>
-            <CreateResourceForm
-                open={isCreateModalOpen}
-                setOpen={setIsCreateModalOpen}
-            />
-
             {selectedResource && (
                 <ConfirmDeleteDialog
                     open={isDeleteModalOpen}
@@ -328,7 +319,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
                 columns={columns}
                 data={resources}
                 createResource={() => {
-                    setIsCreateModalOpen(true);
+                    router.push(`/${orgId}/settings/resources/create`);
                 }}
             />
         </>

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

@@ -1,6 +1,14 @@
 "use client";
 
-import { Button, buttonVariants } from "@app/components/ui/button";
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
 import {
     Form,
     FormControl,
@@ -10,48 +18,22 @@ import {
     FormLabel,
     FormMessage
 } from "@app/components/ui/form";
-import { Input } from "@app/components/ui/input";
+import HeaderTitle from "@app/components/SettingsSectionTitle";
-import { toast } from "@app/hooks/useToast";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
 import { z } from "zod";
-import {
+import { useEffect, useState } from "react";
-    Credenza,
+import { Controller, useForm } from "react-hook-form";
-    CredenzaBody,
+import { zodResolver } from "@hookform/resolvers/zod";
-    CredenzaClose,
+import { Input } from "@app/components/ui/input";
-    CredenzaContent,
+import { Button } from "@app/components/ui/button";
-    CredenzaDescription,
-    CredenzaFooter,
-    CredenzaHeader,
-    CredenzaTitle
-} from "@app/components/Credenza";
 import { useParams, useRouter } from "next/navigation";
 import { ListSitesResponse } from "@server/routers/site";
 import { formatAxiosError } from "@app/lib/api";
-import { CheckIcon } from "lucide-react";
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger
-} from "@app/components/ui/popover";
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList
-} from "@app/components/ui/command";
-import { CaretSortIcon } from "@radix-ui/react-icons";
-import CustomDomainInput from "./[resourceId]/CustomDomainInput";
-import { AxiosResponse } from "axios";
-import { Resource } from "@server/db/schemas";
-import { useOrgContext } from "@app/hooks/useOrgContext";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
-import { cn } from "@app/lib/cn";
+import { toast } from "@app/hooks/useToast";
-import { Switch } from "@app/components/ui/switch";
+import { AxiosResponse } from "axios";
+import { Resource } from "@server/db/schemas";
+import { StrategySelect } from "@app/components/StrategySelect";
 import {
     Select,
     SelectContent,
@@ -60,118 +42,189 @@ import {
     SelectValue
 } from "@app/components/ui/select";
 import { subdomainSchema } from "@server/lib/schemas";
-import Link from "next/link";
-import { SquareArrowOutUpRight } from "lucide-react";
-import CopyTextBox from "@app/components/CopyTextBox";
-import { RadioGroup, RadioGroupItem } from "@app/components/ui/radio-group";
-import { Label } from "@app/components/ui/label";
 import { ListDomainsResponse } from "@server/routers/domain";
 import LoaderPlaceholder from "@app/components/PlaceHolderLoader";
-import { StrategySelect } from "@app/components/StrategySelect";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "@app/components/ui/command";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
+import { cn } from "@app/lib/cn";
 
-const createResourceFormSchema = z
+const baseResourceFormSchema = z.object({
-    .object({
-        subdomain: z.string().optional(),
-        domainId: z.string().min(1).optional(),
     name: z.string().min(1).max(255),
     siteId: z.number(),
-        http: z.boolean(),
+    http: z.boolean()
-        protocol: z.string(),
+});
-        proxyPort: z.number().optional(),
+
-        isBaseDomain: z.boolean().optional()
+const httpResourceFormSchema = z.discriminatedUnion("isBaseDomain", [
+    z.object({
+        isBaseDomain: z.literal(true),
+        domainId: z.string().min(1)
+    }),
+    z.object({
+        isBaseDomain: z.literal(false),
+        domainId: z.string().min(1),
+        subdomain: z.string().pipe(subdomainSchema)
     })
-    .refine(
+]);
-        (data) => {
+
-            if (!data.http) {
+const tcpUdpResourceFormSchema = z.object({
-                return z
+    protocol: z.string(),
-                    .number()
+    proxyPort: z.number().int().min(1).max(65535)
-                    .int()
+});
-                    .min(1)
+
-                    .max(65535)
+type BaseResourceFormValues = z.infer<typeof baseResourceFormSchema>;
-                    .safeParse(data.proxyPort).success;
+type HttpResourceFormValues = z.infer<typeof httpResourceFormSchema>;
+type TcpUdpResourceFormValues = z.infer<typeof tcpUdpResourceFormSchema>;
+
+type ResourceType = "http" | "raw";
+
+interface ResourceTypeOption {
+    id: ResourceType;
+    title: string;
+    description: string;
+    disabled?: boolean;
 }
-            return true;
-        },
-        {
-            message: "Invalid port number",
-            path: ["proxyPort"]
-        }
-    )
-    .refine(
-        (data) => {
-            if (data.http && !data.isBaseDomain) {
-                return subdomainSchema.safeParse(data.subdomain).success;
-            }
-            return true;
-        },
-        {
-            message: "Invalid subdomain",
-            path: ["subdomain"]
-        }
-    );
 
-type CreateResourceFormValues = z.infer<typeof createResourceFormSchema>;
+export default function Page() {
-
+    const { env } = useEnvContext();
-type CreateResourceFormProps = {
+    const api = createApiClient({ env });
-    open: boolean;
+    const { orgId } = useParams();
-    setOpen: (open: boolean) => void;
-};
-
-export default function CreateResourceForm({
-    open,
-    setOpen
-}: CreateResourceFormProps) {
-    const [formKey, setFormKey] = useState(0);
-    const api = createApiClient(useEnvContext());
-
-    const [loading, setLoading] = useState(false);
-    const params = useParams();
-
-    const orgId = params.orgId;
     const router = useRouter();
 
-    const { org } = useOrgContext();
+    const [loadingPage, setLoadingPage] = useState(true);
-    const { env } = useEnvContext();
-
     const [sites, setSites] = useState<ListSitesResponse["sites"]>([]);
     const [baseDomains, setBaseDomains] = useState<
         { domainId: string; baseDomain: string }[]
     >([]);
-    const [showSnippets, setShowSnippets] = useState(false);
+    const [createLoading, setCreateLoading] = useState(false);
-    const [resourceId, setResourceId] = useState<number | null>(null);
-    const [domainType, setDomainType] = useState<"subdomain" | "basedomain">(
-        "subdomain"
-    );
-    const [loadingPage, setLoadingPage] = useState(true);
 
-    const form = useForm<CreateResourceFormValues>({
+    const resourceTypes: ReadonlyArray<ResourceTypeOption> = [
-        resolver: zodResolver(createResourceFormSchema),
+        {
+            id: "http",
+            title: "HTTPS Resource",
+            description:
+                "Proxy requests to your app over HTTPS using a subdomain or base domain."
+        },
+        {
+            id: "raw",
+            title: "Raw TCP/UDP Resource",
+            description:
+                "Proxy requests to your app over TCP/UDP using a port number.",
+            disabled: !env.flags.allowRawResources
+        }
+    ];
+
+    const baseForm = useForm<BaseResourceFormValues>({
+        resolver: zodResolver(baseResourceFormSchema),
         defaultValues: {
-            subdomain: "",
-            domainId: "",
             name: "",
-            http: true,
+            http: true
-            protocol: "tcp"
         }
     });
 
-    function reset() {
+    const httpForm = useForm<HttpResourceFormValues>({
-        form.reset();
+        resolver: zodResolver(httpResourceFormSchema),
-        setSites([]);
+        defaultValues: {
-        setShowSnippets(false);
+            subdomain: "",
-        setResourceId(null);
+            domainId: "",
+            isBaseDomain: false
+        }
+    });
+
+    const tcpUdpForm = useForm<TcpUdpResourceFormValues>({
+        resolver: zodResolver(tcpUdpResourceFormSchema),
+        defaultValues: {
+            protocol: "tcp",
+            proxyPort: undefined
+        }
+    });
+
+    async function onSubmit() {
+        setCreateLoading(true);
+
+        const baseData = baseForm.getValues();
+        const isHttp = baseData.http;
+
+        try {
+            const payload = {
+                name: baseData.name,
+                siteId: baseData.siteId,
+                http: baseData.http
+            };
+
+            if (isHttp) {
+                const httpData = httpForm.getValues();
+                if (httpData.isBaseDomain) {
+                    Object.assign(payload, {
+                        domainId: httpData.domainId,
+                        isBaseDomain: true
+                    });
+                } else {
+                    Object.assign(payload, {
+                        subdomain: httpData.subdomain,
+                        domainId: httpData.domainId,
+                        isBaseDomain: false
+                    });
+                }
+            } else {
+                const tcpUdpData = tcpUdpForm.getValues();
+                Object.assign(payload, {
+                    protocol: tcpUdpData.protocol,
+                    proxyPort: tcpUdpData.proxyPort
+                });
+            }
+
+            const res = await api
+                .put<
+                    AxiosResponse<Resource>
+                >(`/org/${orgId}/site/${baseData.siteId}/resource/`, payload)
+                .catch((e) => {
+                    toast({
+                        variant: "destructive",
+                        title: "Error creating resource",
+                        description: formatAxiosError(
+                            e,
+                            "An error occurred when creating the resource"
+                        )
+                    });
+                });
+
+            if (res && res.status === 201) {
+                const id = res.data.data.resourceId;
+                router.push(`/${orgId}/settings/resources/${id}`);
+            }
+        } catch (e) {
+            console.error("Error creating resource:", e);
+            toast({
+                variant: "destructive",
+                title: "Error creating resource",
+                description: "An unexpected error occurred"
+            });
+        }
+
+        setCreateLoading(false);
     }
 
     useEffect(() => {
-        if (!open) {
+        const load = async () => {
-            return;
+            setLoadingPage(true);
-        }
-
-        reset();
 
             const fetchSites = async () => {
                 const res = await api
-                .get<AxiosResponse<ListSitesResponse>>(`/org/${orgId}/sites/`)
+                    .get<
+                        AxiosResponse<ListSitesResponse>
+                    >(`/org/${orgId}/sites/`)
                     .catch((e) => {
                         toast({
                             variant: "destructive",
@@ -187,7 +240,10 @@ export default function CreateResourceForm({
                     setSites(res.data.data.sites);
 
                     if (res.data.data.sites.length > 0) {
-                    form.setValue("siteId", res.data.data.sites[0].siteId);
+                        baseForm.setValue(
+                            "siteId",
+                            res.data.data.sites[0].siteId
+                        );
                     }
                 }
             };
@@ -212,119 +268,55 @@ export default function CreateResourceForm({
                     const domains = res.data.data.domains;
                     setBaseDomains(domains);
                     if (domains.length) {
-                    form.setValue("domainId", domains[0].domainId);
+                        httpForm.setValue("domainId", domains[0].domainId);
-                    setFormKey((k) => k + 1);
                     }
                 }
             };
 
-        const load = async () => {
-            setLoadingPage(true);
-
             await fetchSites();
             await fetchDomains();
-            await new Promise((r) => setTimeout(r, 200));
 
             setLoadingPage(false);
         };
 
         load();
-    }, [open]);
+    }, []);
-
-    async function onSubmit(data: CreateResourceFormValues) {
-        const res = await api
-            .put<AxiosResponse<Resource>>(
-                `/org/${orgId}/site/${data.siteId}/resource/`,
-                {
-                    name: data.name,
-                    subdomain: data.http ? data.subdomain : undefined,
-                    domainId: data.http ? data.domainId : undefined,
-                    http: data.http,
-                    protocol: data.protocol,
-                    proxyPort: data.http ? undefined : data.proxyPort,
-                    siteId: data.siteId,
-                    isBaseDomain: data.http ? data.isBaseDomain : undefined
-                }
-            )
-            .catch((e) => {
-                toast({
-                    variant: "destructive",
-                    title: "Error creating resource",
-                    description: formatAxiosError(
-                        e,
-                        "An error occurred when creating the resource"
-                    )
-                });
-            });
-
-        if (res && res.status === 201) {
-            const id = res.data.data.resourceId;
-            setResourceId(id);
-
-            if (data.http) {
-                goToResource(id);
-            } else {
-                setShowSnippets(true);
-                router.refresh();
-            }
-        }
-    }
-
-    function goToResource(id?: number) {
-        // navigate to the resource page
-        router.push(`/${orgId}/settings/resources/${id || resourceId}`);
-    }
-
-    const launchOptions = [
-        {
-            id: "http",
-            title: "HTTPS Resource",
-            description:
-                "Proxy requests to your app over HTTPS using a subdomain or base domain."
-        },
-        {
-            id: "raw",
-            title: "Raw TCP/UDP Resource",
-            description:
-                "Proxy requests to your app over TCP/UDP using a port number."
-        }
-    ];
 
     return (
         <>
-            <Credenza
+            <div className="flex justify-between">
-                open={open}
+                <HeaderTitle
-                onOpenChange={(val) => {
+                    title="Create Resource"
-                    setOpen(val);
+                    description="Follow the steps below to create a new resource"
-                    setLoading(false);
+                />
-
+                <Button
-                    // reset all values
+                    variant="outline"
-                    form.reset();
+                    onClick={() => {
+                        router.push(`/${orgId}/settings/resources`);
                     }}
                 >
-                <CredenzaContent>
+                    See All Resources
-                    <CredenzaHeader>
+                </Button>
-                        <CredenzaTitle>Create Resource</CredenzaTitle>
+            </div>
-                        <CredenzaDescription>
+
-                            Create a new resource to proxy requests to your app
+            {!loadingPage && (
-                        </CredenzaDescription>
-                    </CredenzaHeader>
-                    <CredenzaBody>
-                        {loadingPage ? (
-                            <LoaderPlaceholder height="300px" />
-                        ) : (
                 <div>
-                                {!showSnippets && (
+                    <SettingsContainer>
-                                    <Form {...form} key={formKey}>
+                        <SettingsSection>
+                            <SettingsSectionHeader>
+                                <SettingsSectionTitle>
+                                    Resource Information
+                                </SettingsSectionTitle>
+                            </SettingsSectionHeader>
+                            <SettingsSectionBody>
+                                <SettingsSectionForm>
+                                    <Form {...baseForm}>
                                         <form
-                                            onSubmit={form.handleSubmit(
-                                                onSubmit
-                                            )}
                                             className="space-y-4"
-                                            id="create-resource-form"
+                                            id="base-resource-form"
                                         >
                                             <FormField
-                                                control={form.control}
+                                                control={baseForm.control}
                                                 name="name"
                                                 render={({ field }) => (
                                                     <FormItem>
@@ -335,12 +327,17 @@ export default function CreateResourceForm({
                                                             <Input {...field} />
                                                         </FormControl>
                                                         <FormMessage />
+                                                        <FormDescription>
+                                                            This is the display
+                                                            name for the
+                                                            resource.
+                                                        </FormDescription>
                                                     </FormItem>
                                                 )}
                                             />
 
                                             <FormField
-                                                control={form.control}
+                                                control={baseForm.control}
                                                 name="siteId"
                                                 render={({ field }) => (
                                                     <FormItem className="flex flex-col">
@@ -395,7 +392,7 @@ export default function CreateResourceForm({
                                                                                             site.siteId
                                                                                         }
                                                                                         onSelect={() => {
-                                                                                            form.setValue(
+                                                                                            baseForm.setValue(
                                                                                                 "siteId",
                                                                                                 site.siteId
                                                                                             );
@@ -430,35 +427,61 @@ export default function CreateResourceForm({
                                                     </FormItem>
                                                 )}
                                             />
+                                        </form>
+                                    </Form>
+                                </SettingsSectionForm>
+                            </SettingsSectionBody>
+                        </SettingsSection>
 
-                                            {!env.flags.allowRawResources || (
+                        <SettingsSection>
-                                                <div className="space-y-2">
+                            <SettingsSectionHeader>
-                                                    <FormLabel>
+                                <SettingsSectionTitle>
                                     Resource Type
-                                                    </FormLabel>
+                                </SettingsSectionTitle>
+                                <SettingsSectionDescription>
+                                    Determine how you want to access your
+                                    resource
+                                </SettingsSectionDescription>
+                            </SettingsSectionHeader>
+                            <SettingsSectionBody>
                                 <StrategySelect
-                                                        options={launchOptions}
+                                    options={resourceTypes}
                                     defaultValue="http"
-                                                        onChange={(value) =>
+                                    onChange={(value) => {
-                                                            form.setValue(
+                                        baseForm.setValue(
                                             "http",
                                             value === "http"
-                                                            )
+                                        );
-                                                        }
+                                    }}
+                                    cols={2}
                                 />
-                                                    <FormDescription>
+                            </SettingsSectionBody>
-                                                        You cannot change the
+                        </SettingsSection>
-                                                        type of resource after
-                                                        creation.
-                                                    </FormDescription>
-                                                </div>
-                                            )}
 
-                                            {form.watch("http") &&
+                        {baseForm.watch("http") ? (
-                                                env.flags
+                            <SettingsSection>
+                                <SettingsSectionHeader>
+                                    <SettingsSectionTitle>
+                                        HTTPS Settings
+                                    </SettingsSectionTitle>
+                                    <SettingsSectionDescription>
+                                        Configure how your resource will be
+                                        accessed over HTTPS
+                                    </SettingsSectionDescription>
+                                </SettingsSectionHeader>
+                                <SettingsSectionBody>
+                                    <SettingsSectionForm>
+                                        <Form {...httpForm}>
+                                            <form
+                                                className="space-y-4"
+                                                id="http-settings-form"
+                                            >
+                                                {env.flags
                                                     .allowBaseDomainResources && (
                                                     <FormField
-                                                        control={form.control}
+                                                        control={
+                                                            httpForm.control
+                                                        }
                                                         name="isBaseDomain"
                                                         render={({ field }) => (
                                                             <FormItem>
@@ -467,20 +490,15 @@ export default function CreateResourceForm({
                                                                 </FormLabel>
                                                                 <Select
                                                                     value={
-                                                                        domainType
+                                                                        field.value
-                                                                    }
-                                                                    onValueChange={(
-                                                                        val
-                                                                    ) => {
-                                                                        setDomainType(
-                                                                            val ===
-                                                                                "basedomain"
                                                                             ? "basedomain"
                                                                             : "subdomain"
-                                                                        );
+                                                                    }
-                                                                        form.setValue(
+                                                                    onValueChange={(
-                                                                            "isBaseDomain",
+                                                                        value
-                                                                            val ===
+                                                                    ) => {
+                                                                        field.onChange(
+                                                                            value ===
                                                                                 "basedomain"
                                                                         );
                                                                     }}
@@ -506,19 +524,18 @@ export default function CreateResourceForm({
                                                     />
                                                 )}
 
-                                            {form.watch("http") && (
+                                                {!httpForm.watch(
-                                                <>
+                                                    "isBaseDomain"
-                                                    {domainType ===
+                                                ) && (
-                                                    "subdomain" ? (
+                                                    <FormItem>
-                                                        <div className="w-fill space-y-2">
                                                         <FormLabel>
                                                             Subdomain
                                                         </FormLabel>
-                                                            <div className="flex">
+                                                        <div className="flex space-x-0">
                                                             <div className="w-1/2">
                                                                 <FormField
                                                                     control={
-                                                                            form.control
+                                                                        httpForm.control
                                                                     }
                                                                     name="subdomain"
                                                                     render={({
@@ -539,7 +556,7 @@ export default function CreateResourceForm({
                                                             <div className="w-1/2">
                                                                 <FormField
                                                                     control={
-                                                                            form.control
+                                                                        httpForm.control
                                                                     }
                                                                     name="domainId"
                                                                     render={({
@@ -590,20 +607,26 @@ export default function CreateResourceForm({
                                                                 />
                                                             </div>
                                                         </div>
-                                                        </div>
+                                                        <FormDescription>
-                                                    ) : (
+                                                            The subdomain where
+                                                            your resource will
+                                                            be accessible.
+                                                        </FormDescription>
+                                                    </FormItem>
+                                                )}
+
+                                                {httpForm.watch(
+                                                    "isBaseDomain"
+                                                ) && (
                                                     <FormField
                                                         control={
-                                                                form.control
+                                                            httpForm.control
                                                         }
                                                         name="domainId"
-                                                            render={({
+                                                        render={({ field }) => (
-                                                                field
-                                                            }) => (
                                                             <FormItem>
                                                                 <FormLabel>
-                                                                        Base
+                                                                    Base Domain
-                                                                        Domain
                                                                 </FormLabel>
                                                                 <Select
                                                                     onValueChange={
@@ -645,13 +668,31 @@ export default function CreateResourceForm({
                                                         )}
                                                     />
                                                 )}
-                                                </>
+                                            </form>
-                                            )}
+                                        </Form>
-
+                                    </SettingsSectionForm>
-                                            {!form.watch("http") && (
+                                </SettingsSectionBody>
-                                                <>
+                            </SettingsSection>
-                                                    <FormField
+                        ) : (
-                                                        control={form.control}
+                            <SettingsSection>
+                                <SettingsSectionHeader>
+                                    <SettingsSectionTitle>
+                                        TCP/UDP Settings
+                                    </SettingsSectionTitle>
+                                    <SettingsSectionDescription>
+                                        Configure how your resource will be
+                                        accessed over TCP/UDP
+                                    </SettingsSectionDescription>
+                                </SettingsSectionHeader>
+                                <SettingsSectionBody>
+                                    <SettingsSectionForm>
+                                        <Form {...tcpUdpForm}>
+                                            <form
+                                                className="space-y-4"
+                                                id="tcp-udp-settings-form"
+                                            >
+                                                <Controller
+                                                    control={tcpUdpForm.control}
                                                     name="protocol"
                                                     render={({ field }) => (
                                                         <FormItem>
@@ -659,12 +700,10 @@ export default function CreateResourceForm({
                                                                 Protocol
                                                             </FormLabel>
                                                             <Select
-                                                                    value={
-                                                                        field.value
-                                                                    }
                                                                 onValueChange={
                                                                     field.onChange
                                                                 }
+                                                                {...field}
                                                             >
                                                                 <FormControl>
                                                                     <SelectTrigger>
@@ -684,8 +723,9 @@ export default function CreateResourceForm({
                                                         </FormItem>
                                                     )}
                                                 />
+
                                                 <FormField
-                                                        control={form.control}
+                                                    control={tcpUdpForm.control}
                                                     name="proxyPort"
                                                     render={({ field }) => (
                                                         <FormItem>
@@ -711,7 +751,7 @@ export default function CreateResourceForm({
                                                                                           .target
                                                                                           .value
                                                                                   )
-                                                                                    : null
+                                                                                : undefined
                                                                         )
                                                                     }
                                                                 />
@@ -719,92 +759,50 @@ export default function CreateResourceForm({
                                                             <FormMessage />
                                                             <FormDescription>
                                                                 The external
-                                                                    port number
+                                                                port number to
-                                                                    to proxy
+                                                                proxy requests.
-                                                                    requests.
                                                             </FormDescription>
                                                         </FormItem>
                                                     )}
                                                 />
-                                                </>
-                                            )}
                                             </form>
                                         </Form>
+                                    </SettingsSectionForm>
+                                </SettingsSectionBody>
+                            </SettingsSection>
                         )}
+                    </SettingsContainer>
 
-                                {showSnippets && (
+                    <div className="flex justify-end space-x-2 mt-8">
-                                    <div>
-                                        <div className="flex items-start space-x-4 mb-6 last:mb-0">
-                                            <div className="grow">
-                                                <h3 className="text-lg font-semibold mb-3">
-                                                    Traefik: Add Entrypoints
-                                                </h3>
-                                                <CopyTextBox
-                                                    text={`entryPoints:
-  ${form.getValues("protocol")}-${form.getValues("proxyPort")}:
-    address: ":${form.getValues("proxyPort")}/${form.getValues("protocol")}"`}
-                                                    wrapText={false}
-                                                />
-                                            </div>
-                                        </div>
-
-                                        <div className="flex items-start space-x-4 mb-6 last:mb-0">
-                                            <div className="grow">
-                                                <h3 className="text-lg font-semibold mb-3">
-                                                    Gerbil: Expose Ports in
-                                                    Docker Compose
-                                                </h3>
-                                                <CopyTextBox
-                                                    text={`ports:
-  - ${form.getValues("proxyPort")}:${form.getValues("proxyPort")}${form.getValues("protocol") === "tcp" ? "" : "/" + form.getValues("protocol")}`}
-                                                    wrapText={false}
-                                                />
-                                            </div>
-                                        </div>
-
-                                        <Link
-                                            className="text-sm text-primary flex items-center gap-1"
-                                            href="https://docs.fossorial.io/Pangolin/tcp-udp"
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                        >
-                                            <span>
-                                                Learn how to configure TCP/UDP
-                                                resources
-                                            </span>
-                                            <SquareArrowOutUpRight size={14} />
-                                        </Link>
-                                    </div>
-                                )}
-                            </div>
-                        )}
-                    </CredenzaBody>
-                    <CredenzaFooter>
-                        <CredenzaClose asChild>
-                            <Button variant="outline">Close</Button>
-                        </CredenzaClose>
-                        {!showSnippets && (
                         <Button
-                                type="submit"
+                            type="button"
-                                form="create-resource-form"
+                            variant="outline"
-                                loading={loading}
+                            onClick={() =>
-                                disabled={loading}
+                                router.push(`/${orgId}/settings/resources`)
+                            }
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            type="button"
+                            onClick={async () => {
+                                const isHttp = baseForm.watch("http");
+                                const baseValid = await baseForm.trigger();
+                                const settingsValid = isHttp
+                                    ? await httpForm.trigger()
+                                    : await tcpUdpForm.trigger();
+
+                                if (baseValid && settingsValid) {
+                                    onSubmit();
+                                }
+                            }}
+                            loading={createLoading}
                         >
                             Create Resource
                         </Button>
+                    </div>
+                </div>
             )}
-
-                        {showSnippets && (
-                            <Button
-                                loading={loading}
-                                onClick={() => goToResource()}
-                            >
-                                Go to Resource
-                            </Button>
-                        )}
-                    </CredenzaFooter>
-                </CredenzaContent>
-            </Credenza>
         </>
     );
 }