chore(webapp): remove the temporary integrations settings preview

Deletes the development-only preview that forced every conditionally hidden
state on the project Integrations page to render at once, along with the
placeholder data and the devReveal props that drove it. The real conditions are
restored: the GitHub panel returns null when the app is not configured, and the
Vercel section only renders where the integration is supported.

Also drops the explanatory comments added while iterating on the layout.

Author: samejr

apps/webapp/app/components/integrations/VercelBuildSettings.tsx

@@ -38,10 +38,6 @@ type BuildSettingsFieldsProps = {
   currentTriggerVersionFetchFailed?: boolean;
   /** Hide the section-level master toggles for "Pull env vars" and "Discover new env vars". */
   hideSectionToggles?: boolean;
-  /**
-   * "settings" renders the env var sections as settings rows (project Integrations
-   * page); "card" keeps the bordered card used by the onboarding modal.
-   */
   layout?: "settings" | "card";
 };
 
@@ -400,11 +396,6 @@ export function BuildSettingsFields({
   );
 }
 
-/**
- * One environment's toggle as a settings row. The reason a toggle is disabled
- * is shown as a permanent description rather than a hover tooltip, and the
- * environment badge dims to match.
- */
 function EnvToggleRow({
   slug,
   checked,
@@ -418,9 +409,7 @@ function EnvToggleRow({
   checked: boolean;
   disabled: boolean;
   disabledReason?: string;
-  /** Names the control that unlocks this row; see tailwind.css for the rules. */
   unlockHint?: string;
-  /** Name other rows can point at to highlight this row's toggle. */
   unlockTarget?: string;
   onCheckedChange: (checked: boolean) => void;
 }) {

apps/webapp/app/components/integrations/devRevealIntegrations.tsx

@@ -695,14 +695,10 @@ export function ComboBox({
   ...props
 }: ComboBoxProps) {
   return (
-    // pl-0: the bare input carries its own left padding from @tailwindcss/forms,
-    // so padding here too would indent the filter past the options below it.
     <div className="flex h-9 w-full flex-none items-center border-b border-grid-dimmed bg-transparent pl-0 pr-3 text-xs text-text-dimmed outline-hidden">
       <Ariakit.Combobox
         autoSelect={autoSelect}
         render={<input placeholder={placeholder} />}
-        // border-0/ring-0: @tailwindcss/forms styles a focused bare input with a
-        // blue border and ring, which clashes with the app's focus treatment.
         className="flex-1 border-0 bg-transparent text-xs text-text-dimmed outline-hidden focus:border-0 focus:ring-0"
         {...props}
       />

apps/webapp/app/components/primitives/Select.tsx

@@ -101,8 +101,6 @@ export function SettingsRowTitle({
   htmlFor?: string;
   className?: string;
 }) {
-  // `block` matters: as an inline element this would sit in an anonymous line
-  // box sized by the inherited line-height, padding the top of every row.
   const classes = cn(
     "block font-sans text-sm font-semibold leading-tight text-text-bright",
     className

apps/webapp/app/components/primitives/SettingsLayout.tsx

@@ -6,10 +6,6 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { typedjson, useTypedFetcher, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { InlineCode } from "~/components/code/InlineCode";
-import {
-  DEV_REVEAL_ALL,
-  devRevealVercelOnboardingData,
-} from "~/components/integrations/devRevealIntegrations";
 import { Button } from "~/components/primitives/Buttons";
 import { FormError } from "~/components/primitives/FormError";
 import { Input } from "~/components/primitives/Input";
@@ -45,7 +41,6 @@ import {
   VercelSettingsPanel,
 } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.vercel";
 
-/** Read by the parent settings layout to title the page. */
 export const handle = { pageTitle: "Integrations" };
 
 export const loader = dashboardLoader(
@@ -222,10 +217,7 @@ export default function IntegrationsSettingsPage() {
   const nextUrl = searchParams.get("next");
   const [isModalOpen, setIsModalOpen] = useState(false);
   const vercelFetcher = useTypedFetcher<typeof vercelLoader>();
-  // DEV_REVEAL_ALL: the real payload needs a Vercel org integration, which local
-  // development has none of, so the modal could not be opened at all.
-  const onboardingData =
-    vercelFetcher.data?.onboardingData ?? (DEV_REVEAL_ALL ? devRevealVercelOnboardingData : null);
+  const onboardingData = vercelFetcher.data?.onboardingData ?? null;
 
   // Helper to open modal and ensure query param is present
   const openVercelOnboarding = useCallback(() => {
@@ -355,14 +347,10 @@ export default function IntegrationsSettingsPage() {
     }
   }, [onboardingData, vercelFetcher.state, openVercelOnboarding]);
 
-  // DEV_REVEAL_ALL: force both integrations on locally. Remove before merging.
-  const showGitHubSection = githubAppEnabled || DEV_REVEAL_ALL;
-  const showVercelSection = vercelIntegrationEnabled || DEV_REVEAL_ALL;
-
   return (
     <>
       <SettingsContainer className="md:mt-6">
-        {showGitHubSection && (
+        {githubAppEnabled && (
           <React.Fragment>
             <SettingsSection>
               <SettingsHeader title="Git settings" />
@@ -372,11 +360,10 @@ export default function IntegrationsSettingsPage() {
                 environmentSlug={environment.slug}
                 billingPath={v3BillingPath({ slug: organization.slug })}
                 layout="settings"
-                devReveal={DEV_REVEAL_ALL}
               />
             </SettingsSection>
 
-            {showVercelSection && (
+            {vercelIntegrationEnabled && (
               <SettingsSection>
                 <SettingsHeader title="Vercel integration" />
                 <VercelSettingsPanel
@@ -387,7 +374,6 @@ export default function IntegrationsSettingsPage() {
                   isLoadingVercelData={
                     vercelFetcher.state === "loading" || vercelFetcher.state === "submitting"
                   }
-                  devReveal={DEV_REVEAL_ALL}
                 />
               </SettingsSection>
             )}
@@ -412,17 +398,17 @@ export default function IntegrationsSettingsPage() {
       </SettingsContainer>
 
       {/* Vercel Onboarding Modal */}
-      {showVercelSection && (
+      {vercelIntegrationEnabled && (
         <VercelOnboardingModal
           isOpen={isModalOpen}
           onClose={closeVercelOnboarding}
           onboardingData={onboardingData}
           organizationSlug={organization.slug}
           projectSlug={project.slug}
           environmentSlug={environment.slug}
-          hasStagingEnvironment={vercelFetcher.data?.hasStagingEnvironment ?? DEV_REVEAL_ALL}
-          hasPreviewEnvironment={vercelFetcher.data?.hasPreviewEnvironment ?? DEV_REVEAL_ALL}
-          hasOrgIntegration={vercelFetcher.data?.hasOrgIntegration ?? DEV_REVEAL_ALL}
+          hasStagingEnvironment={vercelFetcher.data?.hasStagingEnvironment ?? false}
+          hasPreviewEnvironment={vercelFetcher.data?.hasPreviewEnvironment ?? false}
+          hasOrgIntegration={vercelFetcher.data?.hasOrgIntegration ?? false}
           nextUrl={nextUrl ?? undefined}
           vercelManageAccessUrl={vercelFetcher.data?.vercelManageAccessUrl}
           onDataReload={(vercelEnvironmentId) => {
@@ -601,10 +587,6 @@ function BuildSettingsForm({ buildSettings }: { buildSettings: BuildSettings })
   );
 }
 
-/**
- * Right-hand control column for a settings row whose action is a text input:
- * fixed width so the inputs line up, with room for a validation message below.
- */
 function SettingsControl({ children }: { children: React.ReactNode }) {
   return <div className="flex w-64 flex-col gap-1">{children}</div>;
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings.integrations/route.tsx

@@ -44,7 +44,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
 const DEFAULT_PAGE_TITLE = "Project settings";
 
-/** Child settings routes can name themselves via `export const handle = { pageTitle }`. */
 function usePageTitle() {
   const matches = useMatches();
   for (let i = matches.length - 1; i >= 0; i--) {