feat(webapp): Private Links setup wizard UI tweaks (#3465)

Author: 0ski

.server-changes/private-connections-helper-cross-region-comment.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Clarify the cross-region intent in the Terraform and AI-prompt helpers on the Add Private Connection page. Both already default `supported_regions` to `["us-east-1", "eu-central-1"]`; added an inline comment / parenthetical so the user understands why both regions are listed (Trigger.dev runs in both, so the service must be consumable from either).

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.private-connections._index/route.tsx

@@ -18,6 +18,7 @@ import { logger } from "~/services/logger.server";
 import { getPrivateLinks } from "~/services/platform.v3.server";
 import { requireUserId } from "~/services/session.server";
 import {
+  docsPath,
   OrganizationParamsSchema,
   organizationPath,
   v3PrivateConnectionsPath,
@@ -29,6 +30,7 @@ import { type ActionFunctionArgs, json } from "@remix-run/server-runtime";
 import { deletePrivateLink } from "~/services/platform.v3.server";
 import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
 import {
+  BookOpenIcon,
   ClipboardDocumentIcon,
   PlusIcon,
   TrashIcon,
@@ -182,6 +184,13 @@ export default function Page() {
       <NavBar>
         <PageTitle title="Private Connections" />
         <PageAccessories>
+          <LinkButton
+            variant="docs/small"
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("private-networking/overview")}
+          >
+            Private connection docs
+          </LinkButton>
           {hasPrivateNetworking && canAdd && (
             <LinkButton variant="primary/small" LeadingIcon={PlusIcon} to="new">
               Add Connection

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.private-connections.new/route.tsx

@@ -12,14 +12,15 @@ import {
   PageContainer,
 } from "~/components/layout/AppLayout";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { ClipboardField } from "~/components/primitives/ClipboardField";
 import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormButtons } from "~/components/primitives/FormButtons";
 import { FormError } from "~/components/primitives/FormError";
 import { Header2, Header3 } from "~/components/primitives/Headers";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
-import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { Select, SelectItem } from "~/components/primitives/Select";
 import { prisma } from "~/db.server";
@@ -36,11 +37,14 @@ import {
 } from "~/services/platform.v3.server";
 import { requireUserId } from "~/services/session.server";
 import {
+  docsPath,
   OrganizationParamsSchema,
   organizationPath,
   v3PrivateConnectionsPath,
 } from "~/utils/pathBuilder";
 import {
+  ArrowTopRightOnSquareIcon,
+  BookOpenIcon,
   CommandLineIcon,
   DocumentTextIcon,
   PencilSquareIcon,
@@ -266,7 +270,10 @@ resource "aws_lb_listener" "port_${p.port}" {
 resource "aws_vpc_endpoint_service" "trigger_privatelink" {
   acceptance_required        = false
   network_load_balancer_arns = [aws_lb.trigger_privatelink.arn]
-  supported_regions          = ["us-east-1", "eu-central-1"]
+
+  # Trigger.dev runs in us-east-1 and eu-central-1. Listing both makes this
+  # service consumable from either region so any of your tasks can connect.
+  supported_regions = ["us-east-1", "eu-central-1"]
 
   allowed_principals = [
 ${awsAccountIds.map((id) => `    "arn:aws:iam::${id}:root",`).join("\n")}
@@ -418,7 +425,7 @@ ${validPorts.length > 0 ? validPorts.map((p) => `   - Port ${p.port} (${p.protoc
 3. A VPC Endpoint Service:
    - Acceptance required: no
    - Attach the NLB created above
-   - Supported regions: us-east-1, eu-central-1
+   - Supported regions: us-east-1, eu-central-1 (these are the AWS regions Trigger.dev runs in, so the service must be consumable from both)
    - Allowed principals:
 ${awsAccountIds.map((id) => `     - arn:aws:iam::${id}:root`).join("\n") || "     - <Trigger.dev AWS account ARN>"}
 
@@ -531,7 +538,7 @@ export default function Page() {
   const { availableRegions, activeRegions, awsAccountIds } = useTypedLoaderData<typeof loader>();
   const { organizationSlug } = useParams();
   const lastSubmission = useActionData();
-  const [setupMethod, setSetupMethod] = useState<SetupMethod | null>(null);
+  const [setupMethod, setSetupMethod] = useState<SetupMethod | null>("manual");
 
   const defaultRegion = "us-east-1";
 
@@ -547,6 +554,15 @@ export default function Page() {
     <PageContainer>
       <NavBar>
         <PageTitle title="Add Private Connection" backButton={{ to: v3PrivateConnectionsPath({ slug: organizationSlug! }), text: "Private Connections" }} />
+        <PageAccessories>
+          <LinkButton
+            variant="docs/small"
+            LeadingIcon={BookOpenIcon}
+            to={docsPath("private-networking/overview")}
+          >
+            Private connection docs
+          </LinkButton>
+        </PageAccessories>
       </NavBar>
       <PageBody scrollable={true}>
         <MainHorizontallyCenteredContainer className="max-w-3xl">
@@ -651,45 +667,55 @@ export default function Page() {
               </div>
             )}
 
-            {/* Docs iframe */}
+            {/* Docs link */}
             {setupMethod === "docs" && (
               <div className="mb-6 rounded-lg border border-grid-dimmed p-4">
                 <Header3 spacing>Setup Guide</Header3>
                 {awsAccountIds.length > 0 && (
                   <>
                     <Paragraph variant="small" className="mb-3">
                       When adding allowed principals to your VPC Endpoint Service, use the following
-                      AWS account ID(s):
+                      AWS account ARN(s):
                     </Paragraph>
-                    <div className="mb-4 rounded-md border border-charcoal-700 bg-charcoal-900 p-3">
+                    <div className="mb-4 space-y-2">
                       {awsAccountIds.map((id) => (
-                        <code key={id} className="text-sm text-emerald-400">
-                          {id}
-                        </code>
+                        <ClipboardField
+                          key={id}
+                          value={`arn:aws:iam::${id}:root`}
+                          variant="primary/medium"
+                        />
                       ))}
                     </div>
                   </>
                 )}
-                <iframe
-                  src="https://trigger.dev/docs/network/private-link-setup-guide"
-                  title="Private Link Setup Guide"
-                  className="h-[600px] w-full rounded-md border border-charcoal-700"
-                />
+                <Paragraph variant="small" className="mb-3">
+                  Follow the step-by-step guide in our docs to create a VPC Endpoint Service in the
+                  AWS Console, then come back here to add the connection.
+                </Paragraph>
+                <LinkButton
+                  to={docsPath("private-networking/aws-console-setup")}
+                  variant="primary/medium"
+                  TrailingIcon={ArrowTopRightOnSquareIcon}
+                >
+                  Open setup guide
+                </LinkButton>
               </div>
             )}
 
-            {/* AWS account IDs reference */}
-            {setupMethod === "manual" && (
+            {/* AWS account ARNs reference */}
+            {setupMethod === "manual" && awsAccountIds.length > 0 && (
               <div className="mb-6 rounded-lg border border-grid-dimmed p-4">
-                <Paragraph variant="small" className="mb-2">
-                  Add the following AWS account ID(s) to your VPC Endpoint Service's allowed
+                <Paragraph variant="small" className="mb-3">
+                  Add the following AWS account ARN(s) to your VPC Endpoint Service's allowed
                   principals:
                 </Paragraph>
-                <div className="rounded-md border border-charcoal-700 bg-charcoal-900 p-3">
+                <div className="space-y-2">
                   {awsAccountIds.map((id) => (
-                    <code key={id} className="text-sm text-emerald-400">
-                      {id}
-                    </code>
+                    <ClipboardField
+                      key={id}
+                      value={`arn:aws:iam::${id}:root`}
+                      variant="primary/medium"
+                    />
                   ))}
                 </div>
               </div>