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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gogitcms/design-system",
-  "version": "0.16.0-next.6",
+  "version": "0.16.0-next.8",
   "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/__tests__/ContentBrowser.fieldfocus.test.tsx

@@ -0,0 +1,109 @@
+// Which field the author is in, reported as a dotted path — what a preview
+// pane uses to ring the matching part of the page. Read off the DOM's focus
+// events and the `data-cms-field` attribute every control's wrapper carries,
+// so it works for every kind of control and for a lone author with no live
+// session.
+import React from "react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ContentBrowser, type CmsEntry, type CmsNavSection, type EntryField } from "../components/ContentBrowser";
+
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "pages", label: "Pages", icon: "newspaper" }] },
+];
+
+const fields: EntryField[] = [
+  { name: "title", label: "Title", type: "string", value: "Home", required: true },
+  {
+    name: "blocks",
+    label: "Blocks",
+    type: "array",
+    component: "mixedList",
+    value: [{ _variant: "hero", heading: "Hi", stats: [{ label: "a", value: "1" }] }],
+    variants: [
+      {
+        name: "hero",
+        fields: [
+          { name: "heading", label: "Heading", type: "string", value: null },
+          {
+            name: "stats",
+            label: "Stats",
+            type: "array",
+            of: "object",
+            value: null,
+            fields: [
+              { name: "label", label: "Label", type: "string", value: null },
+              { name: "value", label: "Value", type: "string", value: null },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const entry: CmsEntry = { id: "doc-1", path: "content/pages/home.json", title: "Home", body: "", fields };
+
+function renderBrowser(onFieldFocus = jest.fn()) {
+  render(
+    wrap(
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey="pages"
+        onSelectNav={() => {}}
+        entries={[entry]}
+        userInitials="ED"
+        onSaveEntry={jest.fn()}
+        onFieldFocus={onFieldFocus}
+      />,
+    ),
+  );
+  return onFieldFocus;
+}
+
+// The blur report is deferred a tick so a move between fields never passes
+// through null; flush it.
+const settle = () => act(() => new Promise((r) => setTimeout(r, 5)));
+
+describe("onFieldFocus", () => {
+  it("reports a top-level field by name and null when it blurs", async () => {
+    const onFieldFocus = renderBrowser();
+    const title = screen.getByDisplayValue("Home");
+    fireEvent.focusIn(title);
+    expect(onFieldFocus).toHaveBeenLastCalledWith("doc-1", "title");
+    fireEvent.focusOut(title);
+    await settle();
+    expect(onFieldFocus).toHaveBeenLastCalledWith("doc-1", null);
+  });
+
+  it("composes the path of a field inside a mixed-list item and a nested list", async () => {
+    const onFieldFocus = renderBrowser();
+    const heading = screen.getByDisplayValue("Hi");
+    fireEvent.focusIn(heading);
+    expect(onFieldFocus).toHaveBeenLastCalledWith("doc-1", "blocks.0.heading");
+
+    const statLabel = screen.getByDisplayValue("a");
+    // Straight from one field to the next: no null in between.
+    fireEvent.focusOut(heading);
+    fireEvent.focusIn(statLabel);
+    await settle();
+    expect(onFieldFocus).not.toHaveBeenCalledWith("doc-1", null);
+    expect(onFieldFocus).toHaveBeenLastCalledWith("doc-1", "blocks.0.stats.0.label");
+  });
+
+  it("annotates every control's wrapper with its path", () => {
+    renderBrowser();
+    const paths = Array.from(document.querySelectorAll("[data-cms-field]")).map((el) => el.getAttribute("data-cms-field"));
+    expect(paths).toEqual(
+      expect.arrayContaining(["title", "blocks", "blocks.0", "blocks.0.heading", "blocks.0.stats", "blocks.0.stats.0", "blocks.0.stats.0.label", "blocks.0.stats.0.value"]),
+    );
+  });
+});

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

@@ -336,6 +336,15 @@ export type ContentBrowserProps = {
   // already separated from the frontmatter.
   onEntryDraft?: (draft: EntrySaveChange, entry: CmsEntry) => void;
 
+  // Which field of an open document has keyboard focus, as the author moves
+  // between controls: the field's dotted path (`title`, `seo.description`,
+  // `blocks.0.heading`), or null when nothing in that document is focused.
+  // Web only — it reads the DOM's focus events. This is what lets a preview
+  // ring the part of the page the author is editing (§4.4 of the preview
+  // design), and it is separate from live collaboration: a lone author gets
+  // it too.
+  onFieldFocus?: (entryId: string, path: string | null) => void;
+
   // Optional per-field renderer. When it returns a node for a field, that node
   // replaces the built-in control (used to inject the markdown body editor).
   renderField?: RenderField;
@@ -483,6 +492,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;
@@ -779,8 +791,40 @@ type FieldControlProps = {
   // (see FieldSlotArgs.resetNonce); every built-in control is controlled and
   // re-renders from `value` on its own.
   resetNonce?: number;
+  // The field's full dotted path, when the caller knows better than
+  // "parent path + field name" — a list item, whose control is named after
+  // the list but sits at `list.<index>`.
+  fieldPath?: string;
 };
 
+// The dotted path of the field being rendered, for the controls under it:
+// a group's children append their names to it, a list's items append their
+// index. It exists so every control can carry its own path as a DOM
+// attribute (`data-cms-field`) without any of them threading a prop through
+// — the focus reporting in EntryDetail reads that attribute off whichever
+// element the keyboard lands in.
+//
+// Deliberately separate from the collab `path` prop: that one is threaded
+// only where a CRDT binding exists (top-level fields and drilled-in groups),
+// whereas this is present for every field including list items, which the
+// collab layer treats as one register.
+const FieldPathContext = React.createContext<string>("");
+
+function FieldControl(props: FieldControlProps) {
+  const prefix = React.useContext(FieldPathContext);
+  const fullPath = props.fieldPath ?? (prefix ? `${prefix}.${props.field.name}` : props.field.name);
+  return (
+    <FieldPathContext.Provider value={fullPath}>
+      <View
+        // @ts-expect-error react-native-web maps dataSet -> data-* attributes
+        dataSet={{ cmsField: fullPath }}
+      >
+        <FieldControlInner {...props} />
+      </View>
+    </FieldPathContext.Provider>
+  );
+}
+
 // The scalar type an array's `of` maps to when rendering item controls.
 function ofToType(of?: string): string {
   switch (of) {
@@ -791,7 +835,7 @@ function ofToType(of?: string): string {
   }
 }
 
-function FieldControl(props: FieldControlProps) {
+function FieldControlInner(props: FieldControlProps) {
   const { field, value, onChange, renderField, readOnly = false, error, hideLabel, onOpenGroup, collab, path, focusSignal, resetNonce } = props;
   const t = useTheme();
   const label = hideLabel ? "" : field.label || field.name;
@@ -1628,11 +1672,14 @@ function ListControl({
     ...(field.media ? { component: "media", media: field.media, storeAs: field.storeAs } : {}),
   };
 
+  // The list's own path, from the FieldControl wrapping this control; an item
+  // sits at `<list>.<index>`.
+  const listPath = React.useContext(FieldPathContext);
   return (
     <View style={{ gap: t.space(2) }}>
       {items.map((it, i) => (
         <ItemFrame key={i} index={i} count={items.length} readOnly={readOnly || !canRemove} onRemove={() => removeItem(i)} onMove={(d) => moveItem(i, d)}>
-          <FieldControl field={itemField} value={it} onChange={(v) => setItem(i, v)} renderField={renderField} readOnly={readOnly} hideLabel />
+          <FieldControl field={itemField} value={it} onChange={(v) => setItem(i, v)} renderField={renderField} readOnly={readOnly} hideLabel fieldPath={listPath ? `${listPath}.${i}` : String(i)} />
         </ItemFrame>
       ))}
       {!readOnly && canAdd ? (
@@ -1672,15 +1719,25 @@ function MixedListControl({
     onChange(next);
   };
   const addItem = () => onChange([...items, { [key]: variants[0]?.name ?? "" }]);
+  const listPath = React.useContext(FieldPathContext);
 
   return (
     <View style={{ gap: t.space(2) }}>
       {items.map((it, i) => {
         const variantName = String(it?.[key] ?? "");
         const variant = variants.find((v) => v.name === variantName);
+        const itemPath = listPath ? `${listPath}.${i}` : String(i);
         return (
           <ItemFrame key={i} index={i} count={items.length} readOnly={readOnly || !canRemove} onRemove={() => removeItem(i)} onMove={(d) => moveItem(i, d)}>
-            <View style={{ gap: t.space(2) }}>
+            {/* The item's fields compose under `<list>.<index>`; the item
+                itself carries that path so focusing its variant picker
+                reports the item rather than the whole list. */}
+            <FieldPathContext.Provider value={itemPath}>
+            <View
+              style={{ gap: t.space(2) }}
+              // @ts-expect-error react-native-web maps dataSet -> data-* attributes
+              dataSet={{ cmsField: itemPath }}
+            >
               <SelectControl
                 value={variantName}
                 options={variants.map((v) => v.name)}
@@ -1698,6 +1755,7 @@ function MixedListControl({
                 />
               ) : null}
             </View>
+            </FieldPathContext.Provider>
           </ItemFrame>
         );
       })}
@@ -1742,7 +1800,13 @@ function BodyField({
     readOnly,
   });
   return (
-    <View style={{ gap: t.space(2), flex: 1 }}>
+    <View
+      style={{ gap: t.space(2), flex: 1 }}
+      // The schema-less body is the document's one field; a preview rings
+      // it under the same name the schema form would give it.
+      // @ts-expect-error react-native-web maps dataSet -> data-* attributes
+      dataSet={{ cmsField: "body" }}
+    >
       <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
         <Text variant="label" color="tertiary">Body</Text>
         <Text variant="monoSm" color="tertiary">Markdown</Text>
@@ -2594,6 +2658,7 @@ function EntryDetail({
   entry,
   documentActions,
   onEntryDraft,
+  onFieldFocus,
   renderField,
   onSaveEntry,
   readOnly = false,
@@ -2616,6 +2681,8 @@ function EntryDetail({
   documentActions?: (entry: CmsEntry) => React.ReactNode;
   // Debounced in-flight draft (see ContentBrowserProps.onEntryDraft).
   onEntryDraft?: (draft: EntrySaveChange, entry: CmsEntry) => void;
+  // The focused field's path, or null (see ContentBrowserProps.onFieldFocus).
+  onFieldFocus?: (entryId: string, path: string | null) => void;
   renderField?: RenderField;
   onSaveEntry?: SaveEntry;
   readOnly?: boolean;
@@ -2969,8 +3036,54 @@ function EntryDetail({
   // The field list + nested value object for the active frame.
   const frame = resolveFrame(editFields, values, groupPath);
 
+  // Which field has the keyboard. One pair of DOM focus listeners on the
+  // column rather than an onFocus on every control: the controls are many
+  // (inputs, selects, the ProseMirror body, plugin fields) and every one of
+  // them renders inside the FieldControl wrapper that carries the path as
+  // `data-cms-field` — so the element the focus landed in is enough.
+  //
+  // focusout fires before the next focusin, so a blur is reported a tick
+  // late and cancelled if focus went straight to another field: moving
+  // between two controls reads as one change, not a flicker through null.
+  const focusRoot = useRef<View>(null);
+  const fieldFocus = useRef(onFieldFocus);
+  fieldFocus.current = onFieldFocus;
+  const entryId = entry.id;
+  useEffect(() => {
+    if (Platform.OS !== "web") return;
+    const node = focusRoot.current as unknown as HTMLElement | null;
+    if (!node || typeof node.addEventListener !== "function") return;
+    let pending: ReturnType<typeof setTimeout> | null = null;
+    let last: string | null = null;
+    const report = (path: string | null) => {
+      if (path === last) return;
+      last = path;
+      fieldFocus.current?.(entryId, path);
+    };
+    const onFocusIn = (ev: Event) => {
+      if (pending) { clearTimeout(pending); pending = null; }
+      const target = ev.target as Element | null;
+      const el = target && typeof target.closest === "function" ? target.closest("[data-cms-field]") : null;
+      report(el?.getAttribute("data-cms-field") || null);
+    };
+    const onFocusOut = () => {
+      if (pending) clearTimeout(pending);
+      pending = setTimeout(() => { pending = null; report(null); }, 0);
+    };
+    node.addEventListener("focusin", onFocusIn);
+    node.addEventListener("focusout", onFocusOut);
+    return () => {
+      node.removeEventListener("focusin", onFocusIn);
+      node.removeEventListener("focusout", onFocusOut);
+      if (pending) clearTimeout(pending);
+      // The column is going away with the field still focused: nothing in
+      // this document has focus any more.
+      if (last !== null) fieldFocus.current?.(entryId, null);
+    };
+  }, [entryId]);
+
   return (
-    <View style={{ flex: 1 }}>
+    <View style={{ flex: 1 }} ref={focusRoot}>
       {/* breadcrumb + actions. position/zIndex lift this row (and the "..." menu
           dropdown it hosts) above the content pane so the menu receives clicks. */}
       <View
@@ -3126,6 +3239,8 @@ function EntryDetail({
               <Text variant="monoSm" color="tertiary">{frame.labels.join(" / ")}</Text>
             </Pressable>
           ) : null}
+          {/* Drilled into a group, every field's path starts with the group's. */}
+          <FieldPathContext.Provider value={groupPath.join(".")}>
           {frame.fields.map((f) => (
             <FieldControl
               key={f.name}
@@ -3144,6 +3259,7 @@ function EntryDetail({
               resetNonce={resetNonces[f.name]}
             />
           ))}
+          </FieldPathContext.Provider>
         </ScrollView>
         </DocumentPathProvider>
       ) : (
@@ -3767,6 +3883,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}
@@ -4129,6 +4246,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
           documentActions={props.documentActions}
           history={props.history}
           onEntryDraft={props.onEntryDraft}
+          onFieldFocus={props.onFieldFocus}
           renderField={renderField}
           onSaveEntry={props.onSaveEntry}
           readOnly={col.readOnly}
@@ -5005,6 +5123,7 @@ function MobileBrowser(props: ContentBrowserProps) {
           documentActions={props.documentActions}
           history={props.history}
           onEntryDraft={props.onEntryDraft}
+          onFieldFocus={props.onFieldFocus}
           renderField={renderField}
           onSaveEntry={props.onSaveEntry}
           readOnly={readOnly}