@gogitcms/design-system 0.15.0-next.3

package/src/components/ApplyChangesModal.tsx

@@ -0,0 +1,348 @@
+import React, { useState } from "react";
+import { View, Pressable, ActivityIndicator } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import { Button } from "./Button";
+import { Input } from "./Input";
+
+/** The merge run's coarse phase, matching the server's step enum. */
+export type MergeStep = "comparing" | "merging" | "pushing";
+export type MergeStatus = "pending" | "running" | "conflicted" | "needs_review" | "succeeded" | "failed";
+
+export type MergeProgress = {
+  status: MergeStatus;
+  step: MergeStep;
+  sourceBranch: string;
+  targetBranch: string;
+  commit?: string | null;
+  filesChanged?: number;
+  added?: number;
+  removed?: number;
+  error?: string | null;
+  /** When status is needs_review: the non-CMS files that need a developer. */
+  escalationFiles?: string[];
+};
+
+export type ApplyChangesModalProps = {
+  sourceBranch: string;
+  targetBranch: string;
+  /**
+   * The run's live state. Absent → the confirmation step (nothing has run yet):
+   * the modal explains what applying will do and waits for onConfirm. Present →
+   * the progress checklist and result panels.
+   */
+  progress?: MergeProgress;
+  /** A short summary of what will be merged, shown on the confirmation step. */
+  summary?: string;
+  /** Number of unresolved conflicts, shown on the conflicted state. */
+  conflictCount?: number;
+  /**
+   * When true and on the confirmation step, an open change request already
+   * exists for this source→target: the modal explains that and offers to view it
+   * instead of applying.
+   */
+  changeRequestOpen?: boolean;
+  /** The open change request's pull-request URL, to share with a developer. */
+  changeRequestUrl?: string;
+  /** True while the createChangeRequest mutation is in flight. */
+  creatingChangeRequest?: boolean;
+  /** Start the merge, from the confirmation step. */
+  onConfirm?: () => void;
+  /** Go resolve conflicts, from the conflicted state (closes the modal). */
+  onReviewConflicts?: () => void;
+  /** Escalate a needs_review merge with the entered explanation. */
+  onCreateChangeRequest?: (explanation: string) => void;
+  /** Open the summary of the existing change request. */
+  onViewChangeRequest?: () => void;
+  /** Cancel / dismiss. */
+  onClose: () => void;
+  /** Done, on success. Defaults to onClose. */
+  onDone?: () => void;
+};
+
+// The checklist rows, in order. A step is done once the run has advanced past it
+// (or finished), active while it is the current step, and pending before then.
+const STEPS: { key: MergeStep; label: string }[] = [
+  { key: "comparing", label: "Comparing" },
+  { key: "merging", label: "Fast-forward not possible — creating merge commit" },
+  { key: "pushing", label: "Pushing merge commit to origin" },
+];
+
+const stepOrder: Record<MergeStep, number> = { comparing: 0, merging: 1, pushing: 2 };
+
+function StepRow({ label, state }: { label: string; state: "done" | "active" | "pending" }) {
+  const t = useTheme();
+  return (
+    <View testID={`merge-step-${state}`} style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+      {state === "done" ? (
+        <View
+          style={{
+            width: 18, height: 18, borderRadius: 999, alignItems: "center", justifyContent: "center",
+            backgroundColor: t.color.diffAddFg,
+          }}
+        >
+          <Icon name="check" size={12} color={t.color.surfacePage} />
+        </View>
+      ) : state === "active" ? (
+        <ActivityIndicator size="small" />
+      ) : (
+        <View style={{ width: 18, height: 18, borderRadius: 999, borderWidth: 1, borderColor: t.color.borderDefault }} />
+      )}
+      <Text variant="body" color={state === "pending" ? "tertiary" : "primary"}>{label}</Text>
+    </View>
+  );
+}
+
+/**
+ * The apply-changes progress modal. It runs through the three merge steps
+ * (spinner → green check), then shows a success panel with the commit + stats,
+ * or an error. Read-only: it reflects a run the host drives via a subscription.
+ */
+export function ApplyChangesModal({ sourceBranch, targetBranch, progress, summary, conflictCount, changeRequestOpen, changeRequestUrl, creatingChangeRequest, onConfirm, onReviewConflicts, onCreateChangeRequest, onViewChangeRequest, onClose, onDone }: ApplyChangesModalProps) {
+  const t = useTheme();
+  const done = onDone ?? onClose;
+  const [explanation, setExplanation] = useState("");
+  const [copied, setCopied] = useState(false);
+  const copyLink = () => {
+    try {
+      if (typeof navigator !== "undefined" && navigator.clipboard && changeRequestUrl) {
+        void navigator.clipboard.writeText(changeRequestUrl);
+      }
+    } catch {
+      // Clipboard unavailable (permissions / older browser) — the readonly field
+      // still lets the user select and copy manually.
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+  // No run yet → the confirmation step.
+  const confirming = !progress;
+  const status = progress?.status;
+  const conflicted = status === "conflicted";
+  const needsReview = status === "needs_review";
+  const terminal = status === "succeeded" || status === "failed" || conflicted || needsReview;
+  const current = progress ? stepOrder[progress.step] : 0;
+
+  const stepState = (i: number): "done" | "active" | "pending" => {
+    if (status === "succeeded") return "done";
+    if (i < current) return "done";
+    if (i === current) return status === "failed" ? "pending" : "active";
+    return "pending";
+  };
+
+  return (
+    <View
+      testID="apply-changes-modal"
+      style={{
+        position: "absolute", top: 0, left: 0, right: 0, bottom: 0, zIndex: 50,
+        alignItems: "center", justifyContent: "center", padding: t.space(4),
+        backgroundColor: "rgba(0,0,0,0.45)",
+      }}
+    >
+      <View
+        style={{
+          width: 460, maxWidth: "100%", gap: t.space(4), padding: t.space(5),
+          borderRadius: t.radius.lg, borderWidth: 1, borderColor: t.color.borderDefault,
+          backgroundColor: t.color.surfaceRaised,
+        }}
+      >
+        <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
+          <Text variant="h3" weight="semibold">Apply changes</Text>
+          {confirming || terminal ? (
+            <Pressable testID="apply-close" onPress={onClose} style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })}>
+              <Icon name="x" size={18} color={t.color.textSecondary} />
+            </Pressable>
+          ) : null}
+        </View>
+
+        {/* source → target */}
+        <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+          <BranchChip name={sourceBranch} />
+          <Text variant="monoSm" color="tertiary">→</Text>
+          <BranchChip name={targetBranch} />
+        </View>
+
+        {confirming && changeRequestOpen ? (
+          // An escalated change request is already open for this pair: don't let
+          // the user start a second merge — send them to its summary.
+          <View testID="apply-cr-open" style={{ gap: t.space(3) }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+              <Icon name="gitPullRequest" size={16} color={t.color.textSecondary} />
+              <Text variant="body" weight="medium">A change request is already open</Text>
+            </View>
+            <Text variant="body" color="secondary">
+              {`Merging ${sourceBranch} into ${targetBranch} needs a developer to resolve code conflicts. Send them this link so they can pick it up:`}
+            </Text>
+            {changeRequestUrl ? (
+              <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+                <View style={{ flex: 1 }}>
+                  <Input
+                    value={changeRequestUrl}
+                    onChangeText={() => {}}
+                    editable={false}
+                    mono
+                    size="md"
+                    testID="change-request-link"
+                  />
+                </View>
+                <Button
+                  title={copied ? "Copied" : "Copy"}
+                  variant="default"
+                  size="md"
+                  iconLeft={copied ? "check" : "copy"}
+                  onPress={copyLink}
+                  testID="copy-change-request-link"
+                />
+              </View>
+            ) : null}
+          </View>
+        ) : confirming ? (
+          // Confirmation step: spell out the irreversible, outward-facing effects
+          // before anything is pushed to the remote.
+          <View testID="apply-confirm" style={{ gap: t.space(3) }}>
+            <Text variant="body" color="secondary">
+              {`This merges ${sourceBranch} into ${targetBranch}, commits the result, and pushes a merge commit to origin/${targetBranch}.`}
+            </Text>
+            <Text variant="body" color="secondary">
+              {`${sourceBranch} is then deleted. This can’t be undone.`}
+            </Text>
+            {summary ? <Text variant="monoSm" color="tertiary">{summary}</Text> : null}
+          </View>
+        ) : needsReview ? (
+          // Content merged, but code/config files conflict. A content editor can't
+          // resolve these — collect an explanation and escalate to a developer.
+          <View testID="merge-needs-review" style={{ gap: t.space(3) }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+              <Icon name="gitPullRequest" size={16} color={t.color.diffDelFg} />
+              <Text variant="body" weight="medium">Code conflicts need a developer</Text>
+            </View>
+            <Text variant="body" color="secondary">
+              {`The content merged cleanly, but these files changed on both ${sourceBranch} and ${targetBranch} and need a developer to resolve:`}
+            </Text>
+            <View style={{ gap: 2, padding: t.space(2), borderRadius: t.radius.md, backgroundColor: t.color.diffDelBg }}>
+              {(progress?.escalationFiles ?? []).map((f) => (
+                <Text key={f} variant="monoSm" color={t.color.diffDelFg} testID={`escalation-file-${f}`}>{f}</Text>
+              ))}
+            </View>
+            <Input
+              value={explanation}
+              onChangeText={setExplanation}
+              label="Explain what changed (added to the pull request)"
+              placeholder="e.g. Updated the pricing table and the checkout copy"
+              autoCapitalize="sentences"
+              testID="change-request-explanation"
+            />
+          </View>
+        ) : conflicted ? (
+          // Conflicts stopped the merge: nothing was pushed. Point the user at
+          // the inline resolution rather than leaving the checklist half-lit.
+          <View testID="merge-conflicted" style={{ gap: t.space(2) }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+              <Icon name="gitMerge" size={16} color={t.color.diffDelFg} />
+              <Text variant="body" weight="medium">
+                {conflictCount
+                  ? `${conflictCount} conflict${conflictCount === 1 ? "" : "s"} to resolve`
+                  : "This merge has conflicts to resolve"}
+              </Text>
+            </View>
+            <Text variant="body" color="secondary">
+              {`${sourceBranch} and ${targetBranch} changed the same fields. Nothing was pushed. Resolve each conflict, then apply again.`}
+            </Text>
+          </View>
+        ) : (
+          // Progress checklist.
+          <View style={{ gap: t.space(3) }}>
+            {STEPS.map((s, i) => (
+              <StepRow key={s.key} label={s.label} state={stepState(i)} />
+            ))}
+          </View>
+        )}
+
+        {status === "succeeded" && progress ? (
+          <View
+            testID="merge-success"
+            style={{
+              gap: t.space(1), padding: t.space(3), borderRadius: t.radius.md,
+              backgroundColor: t.color.diffAddBg,
+            }}
+          >
+            <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+              <Icon name="check" size={15} color={t.color.diffAddFg} />
+              <Text variant="body" weight="medium" color={t.color.diffAddFg}>
+                {`Merged ${progress.sourceBranch} into ${progress.targetBranch}`}
+              </Text>
+            </View>
+            <Text variant="monoSm" color="secondary">
+              {[
+                progress.commit ? progress.commit.slice(0, 7) : null,
+                progress.filesChanged != null ? `${progress.filesChanged} file${progress.filesChanged === 1 ? "" : "s"}` : null,
+                (progress.added || progress.removed) ? `+${progress.added ?? 0} −${progress.removed ?? 0}` : null,
+              ].filter(Boolean).join("  ·  ")}
+            </Text>
+          </View>
+        ) : null}
+
+        {status === "failed" ? (
+          <View
+            testID="merge-error"
+            style={{ padding: t.space(3), borderRadius: t.radius.md, backgroundColor: t.color.diffDelBg }}
+          >
+            <Text variant="monoSm" color={t.color.diffDelFg}>{progress?.error || "The merge could not be completed."}</Text>
+          </View>
+        ) : null}
+
+        <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: t.space(2) }}>
+          {confirming && changeRequestOpen ? (
+            <>
+              <Button title="Cancel" variant="ghost" size="sm" onPress={onClose} testID="apply-cancel" />
+              <Button title="View change request" variant="primary" size="sm" iconLeft="gitPullRequest" onPress={onViewChangeRequest ?? (() => {})} testID="apply-view-change-request" />
+            </>
+          ) : confirming ? (
+            <>
+              <Button title="Cancel" variant="ghost" size="sm" onPress={onClose} testID="apply-cancel" />
+              <Button title="Apply changes" variant="primary" size="sm" iconLeft="gitMerge" onPress={onConfirm ?? (() => {})} testID="apply-confirm-submit" />
+            </>
+          ) : needsReview ? (
+            <>
+              <Button title="Cancel" variant="ghost" size="sm" onPress={onClose} testID="apply-cancel" />
+              <Button
+                title={creatingChangeRequest ? "Opening…" : "Open change request"}
+                variant="primary"
+                size="sm"
+                iconLeft="gitPullRequest"
+                disabled={creatingChangeRequest || explanation.trim() === ""}
+                onPress={() => onCreateChangeRequest?.(explanation.trim())}
+                testID="create-change-request-submit"
+              />
+            </>
+          ) : conflicted ? (
+            <Button title="Review conflicts" variant="primary" size="sm" onPress={onReviewConflicts ?? onClose} testID="apply-review-conflicts" />
+          ) : status === "succeeded" ? (
+            <Button title="Done" variant="primary" size="sm" onPress={done} testID="apply-done" />
+          ) : status === "failed" ? (
+            <Button title="Close" variant="default" size="sm" onPress={onClose} testID="apply-dismiss" />
+          ) : (
+            <Button title="Cancel" variant="ghost" size="sm" onPress={onClose} testID="apply-cancel" />
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function BranchChip({ name }: { name: string }) {
+  const t = useTheme();
+  return (
+    <View
+      style={{
+        flexDirection: "row", alignItems: "center", gap: 6,
+        paddingHorizontal: t.space(2), height: t.control.sm,
+        borderRadius: t.radius.md, borderWidth: 1, borderColor: t.color.borderDefault,
+      }}
+    >
+      <Icon name="gitBranch" size={13} color={t.color.textSecondary} />
+      <Text variant="monoSm" color="secondary">{name}</Text>
+    </View>
+  );
+}

package/src/components/BranchImport.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+import { View } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import { Button } from "./Button";
+import { Spinner } from "./Spinner";
+import { ContentBrowserSkeleton } from "./Skeleton";
+
+// The full-screen states an editor shows when the branch it opened has never
+// been imported. Both are gates rather than banners: until the first import lands
+// there is no content behind them, so the ContentBrowser is not mounted at all.
+// The skeleton shows through as a backdrop so the shell the editor is about to
+// become is already in place — the real panes drop into the same layout rather
+// than replacing a different screen.
+
+// Overlay centers a message card over the app-shell skeleton. The card carries
+// its own surface so the shimmer behind it never fights the text.
+function Overlay({ children, testID }: { children: React.ReactNode; testID?: string }) {
+  const t = useTheme();
+  return (
+    <View style={{ flex: 1 }} testID={testID}>
+      <ContentBrowserSkeleton />
+      <View
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          alignItems: "center",
+          justifyContent: "center",
+          padding: t.space(6),
+        }}
+      >
+        <View
+          style={{
+            maxWidth: 460,
+            alignItems: "center",
+            gap: t.space(3),
+            paddingHorizontal: t.space(7),
+            paddingVertical: t.space(8),
+            backgroundColor: t.color.surfaceRaised,
+            borderWidth: 1,
+            borderColor: t.color.borderDefault,
+            borderRadius: t.radius.lg,
+          }}
+        >
+          {children}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export type BranchImportingScreenProps = {
+  // The branch being imported, named so a user who switched branches knows which
+  // one they are waiting on.
+  branch: string;
+  // "owner/name", when the host knows it.
+  repository?: string;
+  testID?: string;
+};
+
+/**
+ * Held while a branch's FIRST import runs. There is nothing to edit yet — an
+ * empty editor would read as "this repository has no content", which is a
+ * different and wrong statement — so the whole screen waits. The host swaps it
+ * for the real editor when the import subscription says the import landed.
+ */
+export function BranchImportingScreen({ branch, repository, testID }: BranchImportingScreenProps) {
+  const t = useTheme();
+  return (
+    <Overlay testID={testID ?? "branch-importing"}>
+      <Spinner size={28} color={t.color.textSecondary} />
+      <Text variant="body" weight="semibold" style={{ textAlign: "center" }}>
+        {`Importing ${branch}`}
+      </Text>
+      <Text variant="sm" color="secondary" style={{ textAlign: "center" }}>
+        {repository
+          ? `Reading the content models and documents on this branch of ${repository}. This runs once per branch.`
+          : "Reading the content models and documents on this branch. This runs once per branch."}
+      </Text>
+      <Text variant="monoSm" color="tertiary" style={{ textAlign: "center" }}>
+        The editor opens by itself as soon as it finishes.
+      </Text>
+    </Overlay>
+  );
+}
+
+export type BranchImportFailedScreenProps = {
+  branch: string;
+  repository?: string;
+  // The run's error message. Shown verbatim, because the person who can fix it
+  // is often the person reading it.
+  error?: string;
+  // The run's machine-readable error code. "config_not_found" is the one this
+  // screen rewrites into setup instructions rather than an error.
+  errorCode?: string;
+  // Re-reads the branch's import state. "Check again" rather than "Retry",
+  // because the editor cannot start an import — it can only look again, which is
+  // the useful action right after the reader commits the config file the setup
+  // message asked for. Omitted → the screen only explains.
+  onRecheck?: () => void;
+  rechecking?: boolean;
+  testID?: string;
+};
+
+/**
+ * Shown when a branch's first import failed. A dead end rather than a warning:
+ * nothing was ever imported, so there is no content to fall back to and the
+ * editor cannot open. The one failure with a real remedy — no config file on the
+ * branch — is stated as the setup step it is.
+ */
+export function BranchImportFailedScreen({
+  branch,
+  repository,
+  error,
+  errorCode,
+  onRecheck,
+  rechecking,
+  testID,
+}: BranchImportFailedScreenProps) {
+  const t = useTheme();
+  const needsSetup = errorCode === "config_not_found";
+  const title = needsSetup ? `${branch} has no CMS config yet` : `Couldn’t import ${branch}`;
+  const detail = needsSetup
+    ? `Commit a go-git-cms.yml at the root of ${repository ?? "the repository"} and push it to ${branch}. It declares the content models this editor edits — until it exists there is nothing to import.`
+    : `The import of this branch failed, so there is no content to edit here yet.`;
+  return (
+    <Overlay testID={testID ?? "branch-import-failed"}>
+      <Icon
+        name={needsSetup ? "settings" : "alert"}
+        size={28}
+        color={needsSetup ? t.color.textSecondary : t.color.diffDelFg}
+      />
+      <Text variant="body" weight="semibold" style={{ textAlign: "center" }}>{title}</Text>
+      <Text variant="sm" color="secondary" style={{ textAlign: "center" }}>{detail}</Text>
+      {/* The raw message, for the non-setup failures where it is the only thing
+          that says what actually went wrong. */}
+      {!needsSetup && error ? (
+        <Text variant="monoSm" color="tertiary" style={{ textAlign: "center" }} testID="branch-import-error">
+          {error}
+        </Text>
+      ) : null}
+      {onRecheck ? (
+        <Button
+          title={rechecking ? "Checking…" : "Check again"}
+          onPress={onRecheck}
+          disabled={rechecking}
+          size="sm"
+          testID="branch-import-recheck"
+        />
+      ) : null}
+    </Overlay>
+  );
+}