@netlify/spark-ui 1.29.0 → 1.31.0-alpha.1

package/packages/components/preact/DropZone/useDropDeploy.ts

@@ -1,15 +1,22 @@
 import { useRef, useState } from 'preact/hooks';
 import {
   AnonymousDropClient,
+  AuthenticatedBuildClient,
+  AuthenticatedDropClient,
+  deployBuild,
   deployFiles,
   detectBuild,
   getSingleNonIndexHtmlFileName,
   hasMultipleHtmlFilesWithoutIndex,
   humanizeDropError,
+  NotAuthenticatedError,
   renameSingleNonIndexHtmlToIndex,
+  type BuildClient,
   type BuildDetection,
   type DeployProgress,
+  type DeployResult,
   type DropClient,
+  type InferredBuildSettings,
   type ProcessedFile,
 } from './drop-core';
 
@@ -19,9 +26,15 @@ export type DeploySource = 'drag' | 'browse';
 /** The live site handed back once a deploy succeeds. */
 export interface DeployedSite {
   url: string;
-  token: string;
+  /**
+   * Drop claim token — only present for anonymous deploys. An authenticated
+   * deploy lands directly in the visitor's account, so there is nothing to claim.
+   */
+  token?: string;
   siteName: string;
   siteId: string;
+  /** True when the deploy landed directly in the visitor's account. */
+  authenticated: boolean;
 }
 
 /** A deploy failure, handed to `onError` so consumers can render their own error UI. */
@@ -32,16 +45,36 @@ export interface DeployError {
   reason: string;
 }
 
+/** The build handed back once a build-required drop is enqueued. */
+export interface DeployedBuild {
+  /** The site created for the build — live once the build finishes. */
+  url: string;
+  siteName: string;
+  siteId: string;
+  buildId: string;
+  /** The deploy the build produces, if the API has assigned one yet. */
+  deployId?: string;
+  /** Build settings synthesised into the uploaded `netlify.toml`, if any. */
+  buildSettings: InferredBuildSettings | null;
+}
+
 /** Finite states of a single deploy attempt. */
 export type DeployStatus =
   | { kind: 'idle' }
   | { kind: 'reading' }
+  // Build path only: packing the drop into the source archive buildbot builds.
+  | { kind: 'zipping' }
   | { kind: 'creating' }
   | { kind: 'uploading'; uploaded: number; total: number }
   | { kind: 'processing' }
-  // `claim` follows a static deploy (hand off to the claim page); `signup`
-  // follows a build-required drop (hand off to the authenticated Drop page).
-  | { kind: 'redirecting'; target: 'claim' | 'signup' }
+  // Build path only: the archive is uploaded and buildbot is building it.
+  | { kind: 'building' }
+  // `claim` follows an anonymous static deploy (hand off to the claim page);
+  // `dashboard` follows an authenticated static deploy (hand off to the new
+  // site's project page); `build` follows an authenticated build (hand off to
+  // the app's project page while the build runs); `signup` follows a
+  // build-required drop with no session to build it with.
+  | { kind: 'redirecting'; target: 'claim' | 'dashboard' | 'signup' | 'build' }
   | { kind: 'error'; message: string };
 
 /** Provider-agnostic analytics sink. */
@@ -51,9 +84,18 @@ interface UseDropDeployOptions {
   apiBase?: string;
   client?: DropClient;
   claimUrl: (siteName: string) => string;
+  siteDashboardUrl: (siteName: string) => string;
   buildSignupUrl: string;
+  buildClient?: BuildClient;
+  authenticatedDropClient?: DropClient;
+  getUploadToken?: () => Promise<string | null>;
+  proxyBase?: string;
+  accountSlug?: string;
+  buildDeployUrl: (build: DeployedBuild) => string;
+  waitForBuild?: boolean;
   onBuildRequired?: (info: BuildDetection) => void;
   onDeploy?: (site: DeployedSite) => void;
+  onBuildDeploy?: (build: DeployedBuild) => void;
   onError?: (error: DeployError) => void;
   track: TrackFn;
 }
@@ -61,10 +103,14 @@ interface UseDropDeployOptions {
 /** Map a low-level deploy progress event onto our UI status. */
 function progressToStatus(e: DeployProgress): DeployStatus {
   switch (e.phase) {
+    case 'zipping':
+      return { kind: 'zipping' };
     case 'creating':
       return { kind: 'creating' };
     case 'uploading':
       return { kind: 'uploading', uploaded: e.uploaded ?? 0, total: e.total ?? 0 };
+    case 'building':
+      return { kind: 'building' };
     case 'processing':
     case 'ready':
       return { kind: 'processing' };
@@ -91,9 +137,18 @@ export function useDropDeploy({
   apiBase,
   client,
   claimUrl,
+  siteDashboardUrl,
   buildSignupUrl,
+  buildClient,
+  authenticatedDropClient,
+  getUploadToken,
+  proxyBase,
+  accountSlug,
+  buildDeployUrl,
+  waitForBuild,
   onBuildRequired,
   onDeploy,
+  onBuildDeploy,
   onError,
   track,
 }: UseDropDeployOptions) {
@@ -101,24 +156,88 @@ export function useDropDeploy({
   const [warning, setWarning] = useState<string | null>(null);
   const dropClient = useRef(client ?? new AnonymousDropClient(apiBase)).current;
 
+  // Building is opt-in: without an injected client or a way to mint an upload
+  // token there is no authenticated path, and build-required drops fall back to
+  // the signup hand-off. Built once and held so a re-render doesn't hand a
+  // fresh client (and a fresh token cache) to an in-flight deploy.
+  const authedBuildClient = useRef(
+    buildClient ??
+      (getUploadToken
+        ? new AuthenticatedBuildClient({ proxyBase, getUploadToken, accountSlug })
+        : null)
+  ).current;
+
+  // Same opt-in for static drops: with authenticated wiring present, deploy
+  // straight into the visitor's account and skip the claim step; without it,
+  // every static drop stays anonymous.
+  const authedDropClient = useRef(
+    authenticatedDropClient ??
+      (getUploadToken
+        ? new AuthenticatedDropClient({ proxyBase, getUploadToken, accountSlug })
+        : null)
+  ).current;
+
   const busy = status.kind !== 'idle' && status.kind !== 'error';
 
-  async function deploy(read: () => Promise<ProcessedFile[]>, source: DeploySource) {
+  /**
+   * Zip the drop, create a site and enqueue a build. Returns `null` when the
+   * visitor turns out not to be logged in — nothing is created in that case, so
+   * the caller can still fall back to the signup hand-off. Every other failure
+   * throws and is reported by the caller's `catch`.
+   */
+  async function buildProject(
+    client: BuildClient,
+    files: ProcessedFile[]
+  ): Promise<DeployedBuild | null> {
+    try {
+      const { site, build, buildSettings, url } = await deployBuild(client, files, {
+        onProgress: e => setStatus(progressToStatus(e)),
+        waitForBuild,
+      });
+      return {
+        url,
+        siteName: site.name,
+        siteId: site.id,
+        buildId: build.id,
+        deployId: build.deploy_id,
+        buildSettings,
+      };
+    } catch (err) {
+      if (err instanceof NotAuthenticatedError) return null;
+      throw err;
+    }
+  }
+
+  /**
+   * `fileTypes` is the MIME types of the selection, read at the drop boundary
+   * (see `getFileTypes`) and passed in rather than derived here — it has to be
+   * captured before `read()` runs so it survives a read that throws. Omitted
+   * from events when empty rather than sent as `[]`.
+   */
+  async function deploy(
+    read: () => Promise<ProcessedFile[]>,
+    source: DeploySource,
+    fileTypes: string[]
+  ) {
     setWarning(null);
     setStatus({ kind: 'reading' });
 
+    const typeProps = fileTypes.length ? { file_types: fileTypes } : {};
+
     // Surface a failure: move to the error state and emit the matching
     // analytics event. Centralised so every failure path (empty selection, a
     // read/deploy throw) reports uniformly — the mirror of the
     // `dropzone_deploy_succeeded` event on the happy path. `file_count` is only
-    // included where the file set is known (it isn't if `read()` itself threw).
+    // included where the file set is known (it isn't if `read()` itself threw);
+    // `file_types` rides along on every failure precisely because it *is* known
+    // in that case — a rejected single file is the main thing we want to see.
     // `reason` goes to analytics as-is (raw, e.g. "drop failed: 429"); `message`
     // is what the user sees, which for a caught error is humanized separately.
     // `onError` gets both so a consumer (e.g. with `showStatus={false}`) can show
     // the humanized message while keeping the raw reason for their own logging.
     const fail = (message: string, reason: string, extra?: Record<string, unknown>) => {
       setStatus({ kind: 'error', message });
-      track('dropzone_deploy_failed', { method: source, reason, ...extra });
+      track('dropzone_deploy_failed', { method: source, reason, ...typeProps, ...extra });
       onError?.({ message, reason });
     };
 
@@ -141,20 +260,26 @@ export function useDropDeploy({
       // A drop is the "user provided files" signal; the browse path is already
       // tracked when the picker opens.
       if (source === 'drag') {
-        track('dropzone_files_dropped', { method: source, file_count: files.length });
+        track('dropzone_files_dropped', {
+          method: source,
+          file_count: files.length,
+          ...typeProps,
+        });
       }
 
       // Build-required projects can't deploy through the anonymous drop API —
       // it only performs static deploys, so building one this way yields a
-      // broken site. Detect them up front and hand off to the authenticated
-      // Drop page (via signup) instead. Consumers can override the hand-off
-      // with `onBuildRequired`.
+      // broken site. Detect them up front and route them to the build path
+      // (which needs a logged-in user) or, failing that, hand off to the
+      // authenticated Drop page via signup. Consumers can override the hand-off
+      // entirely with `onBuildRequired`.
       const build = detectBuild(files);
       if (build.buildRequired) {
         track('dropzone_build_required', {
           method: source,
           reason: build.reason,
           file_count: files.length,
+          ...typeProps,
         });
         if (onBuildRequired) {
           // The consumer owns the hand-off now; drop back to idle so the zone
@@ -163,6 +288,26 @@ export function useDropDeploy({
           onBuildRequired(build);
           return;
         }
+        if (authedBuildClient) {
+          const built = await buildProject(authedBuildClient, files);
+          // No session after all (the auth hint cookie can outlive the session).
+          // Nothing was created, so fall through to the signup hand-off rather
+          // than dead-ending on an error the visitor can't act on from here.
+          if (built) {
+            setStatus({ kind: 'redirecting', target: 'build' });
+            track('dropzone_build_deploy_succeeded', {
+              method: source,
+              reason: build.reason,
+              site_name: built.siteName,
+              file_count: files.length,
+              ...(built.buildSettings ? { framework: built.buildSettings.framework } : {}),
+              ...typeProps,
+            });
+            onBuildDeploy?.(built);
+            window.location.assign(buildDeployUrl(built));
+            return;
+          }
+        }
         setStatus({ kind: 'redirecting', target: 'signup' });
         window.location.assign(buildSignupUrl);
         return;
@@ -170,40 +315,80 @@ export function useDropDeploy({
 
       setWarning(indexHtmlWarning(files));
 
-      const {
-        url,
-        token,
-        deploy: result,
-      } = await deployFiles(dropClient, files, {
-        onProgress: e => setStatus(progressToStatus(e)),
-      });
+      // Deploy into the visitor's account when we can. NotAuthenticatedError is
+      // the one failure that falls back to the anonymous flow — it's thrown
+      // before anything is created (the auth hint cookie can outlive the
+      // session), so retrying anonymously can't strand a half-made site. Any
+      // later failure is real and surfaces as an error instead: falling back
+      // then would leave an empty site in the account and deploy a duplicate.
+      let deployed: DeployResult | null = null;
+      let authenticated = false;
+      let authFallback = false;
+      if (authedDropClient) {
+        try {
+          deployed = await deployFiles(authedDropClient, files, {
+            onProgress: e => setStatus(progressToStatus(e)),
+          });
+          authenticated = true;
+        } catch (err) {
+          if (!(err instanceof NotAuthenticatedError)) throw err;
+          authFallback = true;
+        }
+      }
+      if (!deployed) {
+        deployed = await deployFiles(dropClient, files, {
+          onProgress: e => setStatus(progressToStatus(e)),
+        });
+      }
+      const { url, token, deploy: result } = deployed;
 
-      // Best-effort local persistence. Note this does NOT reach the dashboard:
-      // localStorage is per-origin, so a token written here (e.g. www.netlify.com)
-      // is invisible to app.netlify.com. The cross-origin handoff is the URL
-      // fragment below; this only helps if the drop and claim share an origin.
-      try {
-        localStorage.setItem('drop-token', token);
-        localStorage.setItem('dropSiteName', result.subdomain);
-      } catch {
-        /* private mode / storage disabled — non-fatal */
+      if (!authenticated) {
+        // Best-effort local persistence. Note this does NOT reach the dashboard:
+        // localStorage is per-origin, so a token written here (e.g. www.netlify.com)
+        // is invisible to app.netlify.com. The cross-origin handoff is the URL
+        // fragment below; this only helps if the drop and claim share an origin.
+        // Authenticated deploys skip this entirely — there is no claim token,
+        // and the upload bearer must never be persisted.
+        try {
+          localStorage.setItem('drop-token', token);
+          localStorage.setItem('dropSiteName', result.subdomain);
+        } catch {
+          /* private mode / storage disabled — non-fatal */
+        }
       }
 
-      setStatus({ kind: 'redirecting', target: 'claim' });
+      setStatus({ kind: 'redirecting', target: authenticated ? 'dashboard' : 'claim' });
       // Fired before the redirect below. Note: the navigation can cut a
       // fire-and-forget analytics request short — see the docs for delivery
-      // hardening (sendBeacon / deferring the redirect).
+      // hardening (sendBeacon / deferring the redirect). `auth_fallback` is only
+      // sent when an authenticated attempt bounced (stale auth hint) — omitted
+      // otherwise, like `file_types`.
       track('dropzone_deploy_succeeded', {
         method: source,
         site_name: result.subdomain,
         file_count: files.length,
+        authenticated,
+        ...(authFallback ? { auth_fallback: true } : {}),
+        ...typeProps,
+      });
+      onDeploy?.({
+        url,
+        ...(authenticated ? {} : { token }),
+        siteName: result.subdomain,
+        siteId: result.id,
+        authenticated,
       });
-      onDeploy?.({ url, token, siteName: result.subdomain, siteId: result.id });
 
-      // Hand the drop token to the dashboard via the URL fragment — localStorage
-      // does not cross origins. The dashboard's /drop/:name page reads
-      // `#drop_token=` and persists it for the claim + post-signup steps.
-      window.location.assign(`${claimUrl(result.subdomain)}#drop_token=${token}`);
+      if (authenticated) {
+        // The site already lives in the visitor's account — send them straight
+        // to its dashboard page. No claim step, no token in the URL.
+        window.location.assign(siteDashboardUrl(result.subdomain));
+      } else {
+        // Hand the drop token to the dashboard via the URL fragment — localStorage
+        // does not cross origins. The dashboard's /drop/:name page reads
+        // `#drop_token=` and persists it for the claim + post-signup steps.
+        window.location.assign(`${claimUrl(result.subdomain)}#drop_token=${token}`);
+      }
     } catch (err) {
       failFromError(err);
     }

package/packages/components/preact/index.ts

@@ -6,6 +6,7 @@ export { default as SearchHeading } from './SearchModal/components/SearchHeading
 export { default as SearchToggle } from './SearchModal/components/SearchToggle/SearchToggle';
 export { default as AskNetlify } from './AskNetlify/AskNetlify';
 export { SearchModal } from './SearchModal';
-export { DropZone } from './DropZone';
+export { DropZone, AuthenticatedBuildClient, AuthenticatedDropClient } from './DropZone';
+export type { BuildClient, DeployedBuild, DeployedSite, DropClient } from './DropZone';
 
 export { type IconName } from './Icon';