From 73482c2a059e212a6c03c89937629b5a7bdc5087 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Thu, 9 Apr 2026 22:38:04 -0400
Subject: [PATCH] disable ssh access tab on http mode

---
 messages/en-US.json                     |   2 +-
 src/components/InternalResourceForm.tsx | 186 ++++++++++++++----------
 2 files changed, 108 insertions(+), 80 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index ba22ea0d1..e4bcbd623 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -2673,7 +2673,7 @@
     "editInternalResourceDialogAddUsers": "Add Users",
     "editInternalResourceDialogAddClients": "Add Clients",
     "editInternalResourceDialogDestinationLabel": "Destination",
-    "editInternalResourceDialogDestinationDescription": "Specify the destination address for the internal resource. This can be a hostname, IP address, or CIDR range depending on the selected mode. Optionally set an internal DNS alias for easier identification.",
+    "editInternalResourceDialogDestinationDescription": "Choose where this resource runs and how clients reach it, then complete the settings that apply to your setup.",
     "editInternalResourceDialogPortRestrictionsDescription": "Restrict access to specific TCP/UDP ports or allow/block all ports.",
     "createInternalResourceDialogHttpConfiguration": "HTTP configuration",
     "createInternalResourceDialogHttpConfigurationDescription": "Choose the domain clients will use to reach this resource over HTTP or HTTPS.",
diff --git a/src/components/InternalResourceForm.tsx b/src/components/InternalResourceForm.tsx
index 9e1390f09..c6da0eb0e 100644
--- a/src/components/InternalResourceForm.tsx
+++ b/src/components/InternalResourceForm.tsx
@@ -1,6 +1,10 @@
 "use client";
 
 import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import {
+    OptionSelect,
+    type OptionSelectOption
+} from "@app/components/OptionSelect";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import { StrategySelect } from "@app/components/StrategySelect";
 import { Tag, TagInput } from "@app/components/tags/tag-input";
@@ -687,82 +691,6 @@ export function InternalResourceForm({
                             )}
                         />
                     )}
-                    <FormField
-                        control={form.control}
-                        name="siteId"
-                        render={({ field }) => (
-                            <FormItem className="flex flex-col">
-                                <FormLabel>{t("site")}</FormLabel>
-                                <Popover>
-                                    <PopoverTrigger asChild>
-                                        <FormControl>
-                                            <Button
-                                                variant="outline"
-                                                role="combobox"
-                                                className={cn(
-                                                    "w-full justify-between",
-                                                    !field.value &&
-                                                        "text-muted-foreground"
-                                                )}
-                                            >
-                                                {field.value
-                                                    ? availableSites.find(
-                                                          (s) =>
-                                                              s.siteId ===
-                                                              field.value
-                                                      )?.name
-                                                    : t("selectSite")}
-                                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                                            </Button>
-                                        </FormControl>
-                                    </PopoverTrigger>
-                                    <PopoverContent className="w-full p-0">
-                                        <SitesSelector
-                                            orgId={orgId}
-                                            selectedSite={selectedSite}
-                                            filterTypes={["newt"]}
-                                            onSelectSite={(site) => {
-                                                setSelectedSite(site);
-                                                field.onChange(site.siteId);
-                                            }}
-                                        />
-                                    </PopoverContent>
-                                </Popover>
-                                <FormMessage />
-                            </FormItem>
-                        )}
-                    />
-                    <FormField
-                        control={form.control}
-                        name="mode"
-                        render={({ field }) => (
-                            <FormItem>
-                                <FormLabel>{t(modeLabelKey)}</FormLabel>
-                                <Select
-                                    onValueChange={field.onChange}
-                                    value={field.value}
-                                >
-                                    <FormControl>
-                                        <SelectTrigger>
-                                            <SelectValue />
-                                        </SelectTrigger>
-                                    </FormControl>
-                                    <SelectContent>
-                                        <SelectItem value="host">
-                                            {t(modeHostKey)}
-                                        </SelectItem>
-                                        <SelectItem value="cidr">
-                                            {t(modeCidrKey)}
-                                        </SelectItem>
-                                        <SelectItem value="http">
-                                            {t(modeHttpKey)}
-                                        </SelectItem>
-                                    </SelectContent>
-                                </Select>
-                                <FormMessage />
-                            </FormItem>
-                        )}
-                    />
                 </div>
 
                 <HorizontalTabs
@@ -778,7 +706,7 @@ export function InternalResourceForm({
                             title: t("editInternalResourceDialogAccessPolicy"),
                             href: "#"
                         },
-                        ...(disableEnterpriseFeatures || mode === "cidr"
+                        ...(disableEnterpriseFeatures || mode !== "host"
                             ? []
                             : [{ title: t("sshAccess"), href: "#" }])
                     ]}
@@ -797,6 +725,106 @@ export function InternalResourceForm({
                                     )}
                                 </div>
                             </div>
+                            <div className="grid grid-cols-3 gap-4 items-start mb-4">
+                                <div className="min-w-0 col-span-1">
+                                    <FormField
+                                        control={form.control}
+                                        name="siteId"
+                                        render={({ field }) => (
+                                            <FormItem className="flex flex-col">
+                                                <FormLabel>{t("site")}</FormLabel>
+                                                <Popover>
+                                                    <PopoverTrigger asChild>
+                                                        <FormControl>
+                                                            <Button
+                                                                variant="outline"
+                                                                role="combobox"
+                                                                className={cn(
+                                                                    "w-full justify-between",
+                                                                    !field.value &&
+                                                                        "text-muted-foreground"
+                                                                )}
+                                                            >
+                                                                {field.value
+                                                                    ? availableSites.find(
+                                                                          (s) =>
+                                                                              s.siteId ===
+                                                                              field.value
+                                                                      )?.name
+                                                                    : t(
+                                                                          "selectSite"
+                                                                      )}
+                                                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                                            </Button>
+                                                        </FormControl>
+                                                    </PopoverTrigger>
+                                                    <PopoverContent className="w-full p-0">
+                                                        <SitesSelector
+                                                            orgId={orgId}
+                                                            selectedSite={
+                                                                selectedSite
+                                                            }
+                                                            filterTypes={[
+                                                                "newt"
+                                                            ]}
+                                                            onSelectSite={(
+                                                                site
+                                                            ) => {
+                                                                setSelectedSite(
+                                                                    site
+                                                                );
+                                                                field.onChange(
+                                                                    site.siteId
+                                                                );
+                                                            }}
+                                                        />
+                                                    </PopoverContent>
+                                                </Popover>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </div>
+                                <div className="min-w-0 col-span-2">
+                                    <FormField
+                                        control={form.control}
+                                        name="mode"
+                                        render={({ field }) => {
+                                            const modeOptions: OptionSelectOption<InternalResourceMode>[] =
+                                                [
+                                                    {
+                                                        value: "host",
+                                                        label: t(modeHostKey)
+                                                    },
+                                                    {
+                                                        value: "cidr",
+                                                        label: t(modeCidrKey)
+                                                    },
+                                                    {
+                                                        value: "http",
+                                                        label: t(modeHttpKey)
+                                                    }
+                                                ];
+                                            return (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t(modeLabelKey)}
+                                                    </FormLabel>
+                                                    <OptionSelect<InternalResourceMode>
+                                                        options={modeOptions}
+                                                        value={field.value}
+                                                        onChange={
+                                                            field.onChange
+                                                        }
+                                                        cols={3}
+                                                    />
+                                                    <FormMessage />
+                                                </FormItem>
+                                            );
+                                        }}
+                                    />
+                                </div>
+                            </div>
                             <div
                                 className={cn(
                                     "grid gap-4 items-start",
@@ -1516,8 +1544,8 @@ export function InternalResourceForm({
                         )}
                     </div>
 
-                    {/* SSH Access tab */}
-                    {!disableEnterpriseFeatures && mode !== "cidr" && (
+                    {/* SSH Access tab (host mode only) */}
+                    {!disableEnterpriseFeatures && mode === "host" && (
                         <div className="space-y-4 mt-4 p-1">
                             <PaidFeaturesAlert tiers={tierMatrix.sshPam} />
                             <div className="mb-8">