@gogitcms/design-system 0.16.0-next.6 → 0.16.0-next.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gogitcms/design-system",
-  "version": "0.16.0-next.6",
+  "version": "0.16.0-next.7",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "// exports": "The root entry is the react-native source the SPAs, desktop app and mobile app consume. ./web is the plain-DOM build for server-rendered surfaces (the Astro docs site) that don't run react-native-web, and ./css ships the tokens as custom properties. The trailing wildcard keeps deep paths resolvable — plugin bundling and the Vite aliases reach into src/ directly.",

package/src/__tests__/ApplyChangesModal.test.tsx

@@ -146,3 +146,51 @@ test("failure surfaces the error and a dismiss button", () => {
   expect(screen.getByTestId("merge-error")).toHaveTextContent("main moved while merging");
   expect(screen.getByTestId("apply-dismiss")).toBeInTheDocument();
 });
+
+test("with a review reason the confirmation step promises a review, not a merge commit", () => {
+  render(
+    wrap(
+      <ApplyChangesModal
+        {...branches}
+        reviewReason="main is protected, so this opens a change request for review."
+        onConfirm={() => {}}
+        onClose={() => {}}
+      />,
+    ),
+  );
+
+  const confirm = screen.getByTestId("apply-confirm");
+  // The run will stop before the push, so the copy must not describe one.
+  expect(confirm).not.toHaveTextContent("pushes a merge commit");
+  expect(confirm).not.toHaveTextContent("is then deleted");
+  expect(screen.getByTestId("apply-confirm-review")).toHaveTextContent("opens a pull request for review");
+  expect(confirm).toHaveTextContent("Nothing is pushed to origin/main until it is approved");
+  expect(confirm).toHaveTextContent("main is protected");
+});
+
+test("needs_review without code conflicts explains the review instead of listing files", () => {
+  const onCreateChangeRequest = jest.fn();
+  render(
+    wrap(
+      <ApplyChangesModal
+        {...branches}
+        reviewReason="main is protected, so this opens a change request for review."
+        progress={{ ...base, status: "needs_review", step: "merging", escalationFiles: [] }}
+        onCreateChangeRequest={onCreateChangeRequest}
+        onClose={() => {}}
+      />,
+    ),
+  );
+
+  const panel = screen.getByTestId("merge-needs-review");
+  // No conflict: it is not called one, and no empty file list is drawn.
+  expect(panel).not.toHaveTextContent("Code conflicts need a developer");
+  expect(panel).toHaveTextContent("This merge needs a review");
+  expect(screen.getByTestId("merge-needs-review-reason")).toHaveTextContent("nothing was pushed to main");
+  expect(screen.getByTestId("merge-needs-review-reason")).toHaveTextContent("main is protected");
+
+  // The same escalation flow: an explanation, then a change request.
+  fireEvent.change(screen.getByTestId("change-request-explanation"), { target: { value: "Spring copy" } });
+  fireEvent.click(screen.getByTestId("create-change-request-submit"));
+  expect(onCreateChangeRequest).toHaveBeenCalledWith("Spring copy");
+});

package/src/components/ApplyChangesModal.tsx

@@ -35,6 +35,15 @@ export type ApplyChangesModalProps = {
   progress?: MergeProgress;
   /** A short summary of what will be merged, shown on the confirmation step. */
   summary?: string;
+  /**
+   * Why this apply cannot push to the target directly and opens a change
+   * request instead — the target is protected, or the caller cannot publish
+   * every project on the branch. When set, the confirmation step describes the
+   * review that will happen rather than a merge commit that will not, and the
+   * needs_review panel gives this reason when there are no code conflicts to
+   * list. Absent for an ordinary direct merge.
+   */
+  reviewReason?: string;
   /** Number of unresolved conflicts, shown on the conflicted state. */
   conflictCount?: number;
   /**
@@ -99,7 +108,7 @@ function StepRow({ label, state }: { label: string; state: "done" | "active" | "
  * (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) {
+export function ApplyChangesModal({ sourceBranch, targetBranch, progress, summary, reviewReason, conflictCount, changeRequestOpen, changeRequestUrl, creatingChangeRequest, onConfirm, onReviewConflicts, onCreateChangeRequest, onViewChangeRequest, onClose, onDone }: ApplyChangesModalProps) {
   const t = useTheme();
   const done = onDone ?? onClose;
   const [explanation, setExplanation] = useState("");
@@ -121,6 +130,13 @@ export function ApplyChangesModal({ sourceBranch, targetBranch, progress, summar
   const status = progress?.status;
   const conflicted = status === "conflicted";
   const needsReview = status === "needs_review";
+  // A needs_review run either lists code files a developer must resolve, or
+  // lists nothing because the merge was clean and simply may not be pushed by
+  // this run (a protected target, or partial project access). The two need
+  // different words: the second is not a conflict and naming it one would send
+  // the editor looking for files that are not there.
+  const escalationFiles = progress?.escalationFiles ?? [];
+  const codeConflicts = escalationFiles.length > 0;
   const terminal = status === "succeeded" || status === "failed" || conflicted || needsReview;
   const current = progress ? stepOrder[progress.step] : 0;
 
@@ -201,30 +217,63 @@ export function ApplyChangesModal({ sourceBranch, targetBranch, progress, summar
           // 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>
+            {reviewReason ? (
+              // The run will stop before the push, so promising a merge commit
+              // on origin here would be describing something that will not
+              // happen. Say what will: a review, and nothing on the target
+              // until it is approved.
+              <>
+                <Text variant="body" color="secondary" testID="apply-confirm-review">
+                  {`This merges ${sourceBranch} into ${targetBranch} in the CMS and opens a pull request for review. Nothing is pushed to origin/${targetBranch} until it is approved.`}
+                </Text>
+                <Text variant="body" color="secondary">{reviewReason}</Text>
+              </>
+            ) : (
+              <>
+                <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.
+          // Content merged, but the run may not push it. Either code/config
+          // files conflict — a content editor can't resolve these — or the
+          // target can't take a direct push from this run. Both collect an
+          // explanation and escalate through a pull request.
           <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>
+            {codeConflicts ? (
+              <>
+                <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 }}>
+                  {escalationFiles.map((f) => (
+                    <Text key={f} variant="monoSm" color={t.color.diffDelFg} testID={`escalation-file-${f}`}>{f}</Text>
+                  ))}
+                </View>
+              </>
+            ) : (
+              <>
+                <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+                  <Icon name="gitPullRequest" size={16} color={t.color.textSecondary} />
+                  <Text variant="body" weight="medium">This merge needs a review</Text>
+                </View>
+                <Text variant="body" color="secondary" testID="merge-needs-review-reason">
+                  {`The content merged cleanly and nothing was pushed to ${targetBranch}. ` +
+                    (reviewReason ?? `Someone with the authority to publish it has to approve it.`) +
+                    ` Opening a change request creates a pull request for that review.`}
+                </Text>
+              </>
+            )}
             <Input
               value={explanation}
               onChangeText={setExplanation}

package/src/components/ContentBrowser.tsx

@@ -483,6 +483,9 @@ export type ContentBrowserProps = {
   canApplyChanges?: boolean;
   applyOpen?: boolean;
   applySummary?: string;
+  // Why applying opens a change request instead of merging (see
+  // ApplyChangesModal.reviewReason). Absent for a direct merge.
+  applyReviewReason?: string;
   applyProgress?: MergeProgress;
   applyConflictCount?: number;
   onConfirmApply?: () => void;
@@ -3767,6 +3770,7 @@ function ApplyModalOverlay(props: ContentBrowserProps) {
       sourceBranch={props.workspace.branch}
       targetBranch={props.targetBranch ?? props.defaultBranch ?? ""}
       summary={props.applySummary}
+      reviewReason={props.applyReviewReason}
       progress={props.applyProgress}
       conflictCount={props.applyConflictCount}
       changeRequestOpen={props.changeRequestOpen}