feat(webapp): guide first GitHub deployments in the dashboard

Mono-RevId: c77f5700f7d4a98e7e2a86685f4a7285960e82cd

Author: d-cs

apps/webapp/app/components/BlankStatePanels.tsx

@@ -1,4 +1,4 @@
-import { Button } from "~/components/primitives/Buttons";
+import { Button, type ButtonVariant } from "~/components/primitives/Buttons";
 import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import { AgentIcon, ASK_AGENT_LABEL } from "./agent-identity";
 import { requestDashboardAgent, useDashboardAgentAvailable } from "./dashboardAgentOpenRequest";
@@ -11,22 +11,24 @@ export function AskAgentButton({
   iconOnly = false,
   className,
   fallback = null,
+  variant = "small-menu-item",
 }: {
   prompt?: string;
   label?: string;
   iconOnly?: boolean;
   className?: string;
   fallback?: React.ReactNode;
+  variant?: ButtonVariant;
 }) {
   const available = useDashboardAgentAvailable();
   if (!available) return fallback;
 
   const button = (
     <Button
       type="button"
-      variant="small-menu-item"
+      variant={variant}
       data-action="ask-agent"
-      LeadingIcon={AgentIcon}
+      LeadingIcon={variant.startsWith("ask-trigger/") ? undefined : AgentIcon}
       className={className}
       aria-label={iconOnly ? label : undefined}
       onClick={() => requestDashboardAgent(prompt)}

apps/webapp/app/components/dashboard-agent/AskAgentButton.tsx

@@ -0,0 +1,66 @@
+import { cn } from "~/utils/cn";
+import type { ReactNode } from "react";
+import { EnvironmentIcon } from "~/components/environments/EnvironmentLabel";
+import { Header1 } from "~/components/primitives/Headers";
+import { ClientTabs, ClientTabsList, ClientTabsTrigger } from "~/components/primitives/ClientTabs";
+
+export function DeploymentOnboardingFrame({
+  title,
+  heading,
+  environment,
+  help,
+  children,
+  enhanced = true,
+  tabbed = true,
+}: {
+  title: string;
+  heading?: ReactNode;
+  environment: React.ComponentProps<typeof EnvironmentIcon>["environment"];
+  help?: ReactNode;
+  children: ReactNode;
+  enhanced?: boolean;
+  tabbed?: boolean;
+}) {
+  return (
+    <>
+      <div
+        className={cn(
+          "mb-2 flex items-center justify-between border-b",
+          enhanced && "flex-wrap gap-x-8 gap-y-3 pb-2"
+        )}
+      >
+        <div
+          className={cn("flex min-w-0 items-center gap-2", enhanced ? "flex-1 basis-64" : "mb-2")}
+        >
+          <EnvironmentIcon environment={environment} className="-ml-1 size-8 shrink-0" />
+          <Header1 className={enhanced ? "text-balance" : "truncate"}>
+            {heading ?? `Deploy your tasks to ${title}`}
+          </Header1>
+        </div>
+        {help && (
+          <div className={enhanced ? "flex shrink-0 items-center gap-1" : "flex items-center"}>
+            {help}
+          </div>
+        )}
+      </div>
+      {tabbed ? (
+        <ClientTabs defaultValue="github">
+          <ClientTabsList variant="segmented" className="mb-6">
+            <ClientTabsTrigger value="github" variant="segmented" layoutId="deploy-tabs">
+              GitHub
+            </ClientTabsTrigger>
+            <ClientTabsTrigger value="cli" variant="segmented" layoutId="deploy-tabs">
+              Manual
+            </ClientTabsTrigger>
+            <ClientTabsTrigger value="github-actions" variant="segmented" layoutId="deploy-tabs">
+              GitHub Actions
+            </ClientTabsTrigger>
+          </ClientTabsList>
+          {children}
+        </ClientTabs>
+      ) : (
+        <div className="mt-6">{children}</div>
+      )}
+    </>
+  );
+}

apps/webapp/app/components/deployments/DeploymentOnboardingFrame.tsx

@@ -0,0 +1,164 @@
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { ArrowUpCircleIcon } from "@heroicons/react/20/solid";
+import type { ReactNode } from "react";
+import {
+  EnvironmentIcon,
+  environmentFullTitle,
+  environmentTextClassName,
+} from "~/components/environments/EnvironmentLabel";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { Hint } from "~/components/primitives/Hint";
+import {
+  SettingsActions,
+  SettingsBlock,
+  SettingsRow,
+  SettingsRowDescription,
+} from "~/components/primitives/SettingsLayout";
+import { cn } from "~/utils/cn";
+
+/** The same environment availability gates serve onboarding, settings and the state gallery. */
+export function GitHubBranchTracking({
+  productionInput,
+  stagingInput,
+  previewInput,
+  stagingEnvironmentEnabled,
+  previewEnvironmentEnabled,
+  previewDeploymentsEnabled,
+  billingPath,
+  errors,
+  saveAction,
+  canManageGithub = true,
+}: {
+  productionInput: ReactNode;
+  stagingInput: ReactNode;
+  previewInput: ReactNode;
+  stagingEnvironmentEnabled?: boolean;
+  previewEnvironmentEnabled?: boolean;
+  previewDeploymentsEnabled: boolean;
+  billingPath: string;
+  errors?: ReactNode;
+  saveAction?: ReactNode;
+  canManageGithub?: boolean;
+}) {
+  const upgrade = (
+    <LinkButton
+      to={billingPath}
+      variant="secondary/small"
+      LeadingIcon={ArrowUpCircleIcon}
+      leadingIconClassName="text-indigo-500"
+    >
+      Upgrade
+    </LinkButton>
+  );
+  const rowClass = "flex-wrap gap-3 [&>div:last-child]:max-w-full";
+  return (
+    <div data-testid="github-branch-tracking">
+      <SettingsBlock size="sm">
+        <Hint className="text-balance">
+          Every push to the selected tracking branch creates a deployment in the corresponding
+          environment.
+        </Hint>
+      </SettingsBlock>
+      <SettingsRow
+        className={rowClass}
+        action={
+          <GitHubPermissionTooltip denied={!canManageGithub}>
+            {productionInput}
+          </GitHubPermissionTooltip>
+        }
+      >
+        <EnvironmentRowLabel type="PRODUCTION" />
+      </SettingsRow>
+      <SettingsRow
+        className={rowClass}
+        action={
+          stagingEnvironmentEnabled ? (
+            <GitHubPermissionTooltip denied={!canManageGithub}>
+              {stagingInput}
+            </GitHubPermissionTooltip>
+          ) : (
+            upgrade
+          )
+        }
+      >
+        <EnvironmentRowLabel
+          type="STAGING"
+          description={
+            stagingEnvironmentEnabled
+              ? undefined
+              : "Upgrade your plan to enable a Staging environment"
+          }
+        />
+      </SettingsRow>
+      <SettingsRow
+        className={rowClass}
+        action={
+          previewEnvironmentEnabled ? (
+            <GitHubPermissionTooltip denied={!canManageGithub}>
+              {previewInput}
+            </GitHubPermissionTooltip>
+          ) : (
+            <>
+              {previewDeploymentsEnabled && (
+                <input type="hidden" name="previewDeploymentsEnabled" value="on" />
+              )}
+              {upgrade}
+            </>
+          )
+        }
+      >
+        <EnvironmentRowLabel
+          type="PREVIEW"
+          description={
+            previewEnvironmentEnabled ? undefined : "Upgrade your plan to enable preview branches"
+          }
+        />
+      </SettingsRow>
+      {errors}
+      {saveAction && <SettingsActions>{saveAction}</SettingsActions>}
+    </div>
+  );
+}
+
+function EnvironmentRowLabel({
+  type,
+  description,
+}: {
+  type: "PRODUCTION" | "STAGING" | "PREVIEW";
+  description?: ReactNode;
+}) {
+  return (
+    <div className="min-w-0 flex-1 space-y-1">
+      <div className="flex items-center gap-1.5">
+        <EnvironmentIcon environment={{ type }} className="size-4" />
+        <span className={cn("text-sm", environmentTextClassName({ type }))}>
+          {environmentFullTitle({ type })}
+        </span>
+      </div>
+      {description && <SettingsRowDescription>{description}</SettingsRowDescription>}
+    </div>
+  );
+}
+
+/** Disabled native controls don't receive pointer events; the wrapper owns the tooltip. */
+export function GitHubPermissionTooltip({
+  denied,
+  children,
+}: {
+  denied: boolean;
+  children: ReactNode;
+}) {
+  if (!denied) return children;
+  return (
+    <SimpleTooltip
+      asChild
+      disableHoverableContent
+      content="You don't have permission to manage GitHub settings."
+      button={
+        <span className="inline-flex max-w-full cursor-not-allowed [&>*]:pointer-events-none">
+          {children}
+        </span>
+      }
+    />
+  );
+}