@gogitcms/editor 0.26.0 → 0.29.0

package/app/src/App.tsx

@@ -51,9 +51,12 @@ import { beginAuthorize, beginLogout, beginGitHub, brokeredToken, handleCallback
 import { useNavigation, useRoute, StackActions } from "@react-navigation/native";
 import { NavigationRoot, RootStack, EMPTY_SELECTION, browserUrl, type BrowserParams, type CmsSelection } from "./navigation";
 import { isMediaNavKey, MEDIA_NAV_KEY } from "@gogitcms/design-system";
-import { LOGIN, WORKSPACES, REPOSITORIES, COLLECTIONS, DOCUMENTS, DOCUMENT_COUNT, DOCUMENT, ME, NOTIFICATIONS, MARK_NOTIFICATIONS_READ, UPDATE_DOCUMENT, CREATE_DOCUMENT, DELETE_DOCUMENTS, RENAME_DOCUMENT, MOVE_DOCUMENTS, BRANCH_CHANGE_SUMMARY, BRANCH_CHANGES, BRANCH_CHANGE, BRANCH_MEDIA_CHANGES, CREATE_BRANCH, APPLY_CHANGES, MERGE_RUN_PROGRESS, RESOLVE_MERGE_CONFLICT, OPEN_CHANGE_REQUEST, CHANGE_REQUEST, CHANGE_REQUEST_FOR_BRANCH, CREATE_CHANGE_REQUEST, BRANCH_IMPORT, BRANCH_IMPORT_PROGRESS } from "./queries";
+import { FORMS_NAV_KEY, isFormsNavKey, parseFormsNavKey } from "@gogitcms/design-system";
+import { LOGIN, WORKSPACES, REPOSITORIES, COLLECTIONS, DOCUMENTS, DOCUMENT_COUNT, DOCUMENT, ME, NOTIFICATIONS, MARK_NOTIFICATIONS_READ, UPDATE_DOCUMENT, CREATE_DOCUMENT, DELETE_DOCUMENTS, RENAME_DOCUMENT, MOVE_DOCUMENTS, BRANCH_CHANGE_SUMMARY, BRANCH_CHANGES, BRANCH_CHANGE, BRANCH_MEDIA_CHANGES, CREATE_BRANCH, APPLY_CHANGES, MERGE_RUN_PROGRESS, RESOLVE_MERGE_CONFLICT, OPEN_CHANGE_REQUEST, CHANGE_REQUEST, CHANGE_REQUEST_FOR_BRANCH, CREATE_CHANGE_REQUEST, BRANCH_IMPORT, BRANCH_IMPORT_PROGRESS, SAVE_DOCUMENT_ON_NEW_BRANCH } from "./queries";
 import type { EntryField, FacetField, DocFilter, SegmentItem, BranchRef, ProjectRef, DocumentChange, FieldChange, FieldChangeKind, MergeProgress, FieldConflict as FieldConflictT } from "@gogitcms/design-system";
 import { useMediaApi } from "./media";
+import { useFormsApi } from "./forms";
+import { useHistoryApi } from "./history";
 
 // How many documents to fetch per page of the (server-paginated) entry list.
 const PAGE_SIZE = 50;
@@ -226,6 +229,26 @@ type Collection = {
   filename?: string | null; canCreate: boolean; canUpdate: boolean; canDelete: boolean; fields: FieldDef[];
 };
 type DocumentT = { id: string; path: string; label: string; fields: Record<string, unknown> | null; body?: string | null };
+
+// A save a protected branch refused, held open while the author names a branch
+// to put it on. `resolve`/`reject` are the editor's own save promise: finishing
+// it settles the save the editor is still showing as in flight.
+type ProtectedSave = {
+  change: { id: string; fields: Record<string, unknown>; body: string | null };
+  documentLabel?: string;
+  suggestedName: string;
+  resolve: () => void;
+  reject: (e: Error) => void;
+};
+
+// A branch name to offer for a refused save, derived from the document's file
+// name — "content/blog/hello-world.md" → "edit/hello-world". A suggestion only:
+// the field is editable, and an empty one just means the author types their own.
+const suggestBranchName = (path?: string): string => {
+  const base = (path ?? "").split("/").pop() ?? "";
+  const slug = base.replace(/\.[^.]+$/, "").replace(/[^a-zA-Z0-9._-]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase();
+  return slug ? `edit/${slug}` : "";
+};
 // An open desktop tab: a document id + the collection it belongs to.
 // An open desktop column. `plugin` set → the column renders a plugin route
 // instead of a document, and `id` is the synthetic plugin tab id rather than a
@@ -714,9 +737,21 @@ function CmsView({
   // The media data seam handed to the design system. Undefined when the server
   // has no object store configured, which renders media fields read-only.
   const media = useMediaApi(repo.id, branch.id, projectName);
+  // Undefined when the branch's config declares no forms, which is what keeps
+  // the editor byte-identical for every repository that has none.
+  const forms = useFormsApi(repo.id, branch.id, projectName);
+  // Document history reads the provider's commit log through the repository's
+  // GitHub App installation. Local mode serves a working tree with no
+  // installation behind it, so the seam is undefined there and the history
+  // button never renders — a feature the user never sees beats one that errors.
+  const history = useHistoryApi(repo.id, !config.local);
   const navigation = useNavigation<any>();
   const route = useRoute();
   const params = route.params as BrowserParams;
+  // Forms live in the collection segment (a prefixed nav key), and a submission
+  // in the item segment — so a submission is deep-linkable with no change to the
+  // URL grammar. See navigation.tsx.
+  const formsShowing = isFormsNavKey(params.collection);
   // Selection changes keep the current repo/branch fixed and only vary the CMS
   // portion of the route. Callers may pass a partial selection; the rest resets.
   // The surface is deliberately carried forward rather than reset — selecting a
@@ -1599,6 +1634,27 @@ function CmsView({
   // rather than one per typing pause, which is what keeps a git-backed history
   // readable.
   const [updateDocument] = useMutation(UPDATE_DOCUMENT);
+  // A save the branch refused because it is protected, suspended on the prompt.
+  //
+  // The save's own promise is held here rather than rejected, so from the
+  // editor's point of view the save is still in flight while the author names a
+  // branch. That is what keeps the draft machinery honest: a rejection would put
+  // the column into its error state, and the successful save that follows would
+  // be a save of a document the column is no longer showing.
+  const [protectedSave, setProtectedSave] = useState<ProtectedSave | null>(null);
+  const [creatingProtectedBranch, setCreatingProtectedBranch] = useState(false);
+  const [protectedBranchError, setProtectedBranchError] = useState<string | null>(null);
+  // A held-open save has to be settled if the prompt goes away without an answer
+  // — leaving the promise pending would leave the editor reporting "saving" for
+  // a save that nothing is going to finish. A branch switch is the reachable
+  // case: it is a navigation, so the modal disappears with the branch it was
+  // about, and the pending edit no longer belongs to what is on screen.
+  const pendingSaveRef = useRef<ProtectedSave | null>(null);
+  pendingSaveRef.current = protectedSave;
+  useEffect(() => () => {
+    pendingSaveRef.current?.reject(new Error("Save cancelled."));
+  }, [branch.id]);
+
   const onSaveEntry = async (change: { id: string; fields: Record<string, unknown>; body: string | null }) => {
     // Merge against the tab's loaded full field map (not the active-collection
     // list, which is now display-only) so cross-collection saves preserve keys.
@@ -1609,11 +1665,85 @@ function CmsView({
         variables: { repositoryId: repo.id, id: change.id, fields: merged, body: change.body },
       });
     } catch (e: any) {
+      // A protected branch has one remedy and the editor knows it: put the edit
+      // on a branch that takes writes. Rather than reporting a failure the author
+      // then has to plan around, hold the save open on the prompt and finish it
+      // there (or fail it, if they'd rather keep editing here).
+      if (e?.graphQLErrors?.[0]?.extensions?.code === "BRANCH_PROTECTED") {
+        setProtectedBranchError(null);
+        return new Promise<void>((resolve, reject) => {
+          setProtectedSave({
+            change: { ...change, fields: merged },
+            documentLabel: doc?.label,
+            suggestedName: suggestBranchName(doc?.path),
+            resolve,
+            reject,
+          });
+        });
+      }
       // Rethrow the server's message so the editor's autosave surfaces it.
       throw new Error(e?.graphQLErrors?.[0]?.message || e?.message || "Couldn’t save your changes.");
     }
   };
 
+  // Finish a refused save on a new branch: one mutation creates the branch, finds
+  // the same document there and applies the edit.
+  const [saveOnNewBranch] = useMutation(SAVE_DOCUMENT_ON_NEW_BRANCH);
+  const onCreateBranchAndSave = async (name: string) => {
+    if (!protectedSave) return;
+    const pending = protectedSave;
+    setCreatingProtectedBranch(true);
+    setProtectedBranchError(null);
+    let created: { branch: Branch; document: DocumentT } | undefined;
+    try {
+      const res = await saveOnNewBranch({
+        variables: {
+          repositoryId: repo.id,
+          fromBranchId: branch.id,
+          name,
+          documentId: pending.change.id,
+          fields: pending.change.fields,
+          body: pending.change.body,
+        },
+      });
+      created = res.data?.saveDocumentOnNewBranch;
+    } catch (e: any) {
+      setProtectedBranchError(e?.graphQLErrors?.[0]?.message || e?.message || "Couldn’t create the branch.");
+      setCreatingProtectedBranch(false);
+      return;
+    }
+    setCreatingProtectedBranch(false);
+    setProtectedSave(null);
+    // The branch list is cached on the repository; the switcher needs the new one.
+    await apollo.refetchQueries({ include: [REPOSITORIES] });
+    // Resolve BEFORE navigating. The editor clears the document's stored draft in
+    // the microtask that follows this resolve, and the column it does that from
+    // unmounts the moment we navigate — so the deferred navigation below is what
+    // lets the draft be cleared rather than left behind under the old id.
+    pending.resolve();
+    if (!created) return;
+    const col = collections.find((c) => c.name === (openTabs.find((t: TabRef) => t.id === pending.change.id)?.collection ?? activeNavKey)) ?? active;
+    setTimeout(() => {
+      navigation.navigate("Browser", {
+        workspaceId: params.workspaceId, repositoryId: repo.id, branchId: created!.branch.id,
+        defaultBranchId, projectName, soleProjectName,
+        ...EMPTY_SELECTION,
+        collection: col?.name ?? activeNavKey,
+        itemPath: col ? toRelItemPath(col.path, created!.document.path) : "",
+      });
+    }, 0);
+  };
+
+  // Dismissed: the save genuinely failed, and saying so is what leaves the column
+  // in its error state with the draft intact — the author keeps their work and
+  // can try again (or switch branches themselves).
+  const onCancelProtectedSave = () => {
+    protectedSave?.reject(new Error(`${branch.name} is protected — save this to a new branch instead.`));
+    setProtectedSave(null);
+    setProtectedBranchError(null);
+    setCreatingProtectedBranch(false);
+  };
+
   // Create: split the form values into a body-source field (if any) + frontmatter
   // fields, persist, then route to the new document's edit URL.
   const [createDocument] = useMutation(CREATE_DOCUMENT);
@@ -1798,6 +1928,20 @@ function CmsView({
             icon: "settings" as const,
           })),
         },
+        // Forms, when the branch declares any. One row, like Media: the content
+        // area is what lists the individual forms, because a form is a folder of
+        // submissions rather than a collection of documents.
+        {
+          title: "",
+          items: forms
+            ? [{
+                key: FORMS_NAV_KEY,
+                label: "Forms",
+                icon: "listTree" as const,
+                count: forms.forms.reduce((n, f) => n + f.submissionCount, 0),
+              }]
+            : [],
+        },
         // Plugin-contributed links, grouped by their declared section title
         // (default "Plugins"), keyed so onSelectNav can route them.
         ...pluginRegistry.sidebar().reduce<CmsNavSection[]>((acc, link) => {
@@ -2196,6 +2340,14 @@ function CmsView({
       }
       renderField={renderField}
       media={media}
+      forms={forms}
+      history={history}
+      // The submission id rides in the item segment, exactly as a document path
+      // does, so selection survives a reload and is shareable.
+      selectedSubmissionId={formsShowing ? params.itemPath || null : null}
+      onSelectSubmission={(id) =>
+        go({ configure: false, collection: params.collection, itemPath: id ?? "" })
+      }
       // Nothing on the changes surface is editable; nor is a frozen branch (one
       // handed to a developer in an open change request).
       onSaveEntry={changesMode || branchFrozen ? undefined : onSaveEntry}
@@ -2214,6 +2366,16 @@ function CmsView({
       readOnlyNotice={branchFrozen ? "This branch is in an open change request and is read-only until it merges or is rejected." : undefined}
       readOnlyNoticeActionLabel="Learn more"
       onReadOnlyNoticeAction={branchFrozen ? openChangeRequestModal : undefined}
+      // The protected-branch prompt. Opened by a refused save (not by the branch
+      // being protected): a protected branch is perfectly readable and editable,
+      // and interrupting before the author has decided to save would be noise.
+      protectedBranch={protectedSave ? branch.name : undefined}
+      protectedBranchDocument={protectedSave?.documentLabel}
+      protectedBranchSuggestedName={protectedSave?.suggestedName}
+      creatingProtectedBranch={creatingProtectedBranch}
+      protectedBranchError={protectedBranchError}
+      onCreateBranchAndSave={onCreateBranchAndSave}
+      onCancelProtectedSave={onCancelProtectedSave}
       onDeleteEntry={onDeleteEntry}
       selectable={!changesMode && !!active?.canDelete && !active?.singleton}
       onBulkDelete={onBulkDelete}

package/app/src/forms.ts

@@ -0,0 +1,77 @@
+import { useMemo } from "react";
+import { useApolloClient, useQuery } from "@apollo/client";
+import type { FormInfo, FormsApi, SubmissionInfo } from "@gogitcms/design-system";
+import {
+  DELETE_FORM_SUBMISSIONS,
+  FORMS,
+  FORM_SUBMISSIONS,
+  FORM_SUBMISSION_COUNT,
+} from "./queries";
+
+// The Apollo implementation of the design system's forms seam. The DS owns the
+// browsing UI and knows nothing about transport; this file is the only place
+// form queries live on the web client — the same split media.ts draws.
+
+// Submissions are read uncached. Unlike a content model's documents, they arrive
+// from outside the editor at any moment, so a cached page would show an inbox
+// that quietly stopped updating — the one thing an inbox must not do.
+const NO_CACHE = { fetchPolicy: "no-cache" as const };
+
+export function useFormsApi(
+  repositoryId?: string,
+  branchId?: string,
+  project?: string,
+): FormsApi | undefined {
+  const client = useApolloClient();
+  const skip = !repositoryId || !branchId;
+
+  // The form list comes from the branch's config plus a count per form. It is
+  // cached: the definitions change only on re-import, and the counts are a
+  // summary rather than the inbox itself.
+  const { data } = useQuery(FORMS, {
+    variables: { repositoryId, branchId, project: project ?? null },
+    skip,
+  });
+  const forms: FormInfo[] = data?.forms ?? [];
+
+  return useMemo(() => {
+    if (skip) return undefined;
+    // A branch whose config declares no forms has no Forms surface at all, which
+    // is what keeps the editor identical for every repository that has none.
+    if (forms.length === 0) return undefined;
+
+    const scope = { repositoryId, branchId, project: project ?? null };
+    return {
+      forms,
+      list: async ({ form, status, search, limit, offset }) => {
+        const res = await client.query({
+          query: FORM_SUBMISSIONS,
+          variables: {
+            ...scope,
+            form,
+            status: status ?? null,
+            search: search ?? null,
+            limit: limit ?? null,
+            offset: offset ?? null,
+          },
+          ...NO_CACHE,
+        });
+        return (res.data?.formSubmissions ?? []) as SubmissionInfo[];
+      },
+      count: async ({ form, status, search }) => {
+        const res = await client.query({
+          query: FORM_SUBMISSION_COUNT,
+          variables: { ...scope, form, status: status ?? null, search: search ?? null },
+          ...NO_CACHE,
+        });
+        return (res.data?.formSubmissionCount ?? 0) as number;
+      },
+      remove: async (ids) => {
+        await client.mutate({
+          mutation: DELETE_FORM_SUBMISSIONS,
+          variables: { repositoryId, ids },
+        });
+      },
+    };
+  }, [client, skip, forms, repositoryId, branchId, project]);
+}

package/app/src/history.ts

@@ -0,0 +1,50 @@
+import { useMemo } from "react";
+import { useApolloClient } from "@apollo/client";
+import type { DocumentChange, DocumentVersion, HistoryApi } from "@gogitcms/design-system";
+import { DOCUMENT_VERSION, DOCUMENT_VERSIONS } from "./queries";
+
+// The Apollo implementation of the design system's document-history seam. The
+// DS owns the version browser and knows nothing about transport; this file is
+// the only place history queries live on the web client — the same split
+// forms.ts and media.ts draw.
+
+// History reads are cached normally. A commit is immutable, so a version fetched
+// once can be re-shown for free — which is the whole point of clicking back up a
+// list you have already read. What can change is the newest end of the list, and
+// that is re-fetched whenever the pane is opened, because the DS mounts fresh.
+const CACHED = { fetchPolicy: "cache-first" as const };
+
+/**
+ * useHistoryApi builds the seam, or returns undefined when history is
+ * unavailable — which hides the affordance entirely rather than offering a
+ * button that errors.
+ *
+ * `available` is the deployment's answer to "is there a provider behind this
+ * editor". Local mode edits a working tree that may not even be a git
+ * repository, and has no GitHub App installation to read a commit log through.
+ */
+export function useHistoryApi(repositoryId: string | undefined, available: boolean): HistoryApi | undefined {
+  const client = useApolloClient();
+
+  return useMemo(() => {
+    if (!repositoryId || !available) return undefined;
+    return {
+      list: async ({ documentId, limit, offset }) => {
+        const res = await client.query({
+          query: DOCUMENT_VERSIONS,
+          variables: { repositoryId, id: documentId, limit, offset },
+          ...CACHED,
+        });
+        return (res.data?.documentVersions ?? []) as DocumentVersion[];
+      },
+      get: async ({ documentId, sha }) => {
+        const res = await client.query({
+          query: DOCUMENT_VERSION,
+          variables: { repositoryId, id: documentId, sha },
+          ...CACHED,
+        });
+        return (res.data?.documentVersion ?? null) as DocumentChange | null;
+      },
+    };
+  }, [client, repositoryId, available]);
+}

package/app/src/queries.ts

@@ -111,6 +111,51 @@ export const BRANCH_CHANGE = gql`
   }
 `;
 
+// ---- document history -----------------------------------------------------
+// One page of the commits that touched a document, newest first. Each page is a
+// provider request, so the page size stays modest and the list pages as it
+// scrolls rather than asking for everything at once.
+export const DOCUMENT_VERSIONS = gql`
+  query DocumentVersions($repositoryId: ID!, $id: ID!, $limit: Int, $offset: Int) {
+    documentVersions(repositoryId: $repositoryId, id: $id, limit: $limit, offset: $offset) {
+      sha
+      shortSha
+      message
+      authorName
+      authorEmail
+      authoredAt
+      url
+      filesChanged
+    }
+  }
+`;
+
+// One version: the document as it was at that commit, diffed against what it is
+// now. The selection shape is BranchChange's, deliberately — the history pane
+// renders through the same ChangeDetail component the changes surface uses.
+export const DOCUMENT_VERSION = gql`
+  query DocumentVersion($repositoryId: ID!, $id: ID!, $sha: String!) {
+    documentVersion(repositoryId: $repositoryId, id: $id, sha: $sha) {
+      sha
+      path
+      collection
+      label
+      status
+      added
+      removed
+      bodyBefore
+      bodyAfter
+      fields {
+        name
+        label
+        kind
+        before
+        after
+      }
+    }
+  }
+`;
+
 // The merge run's fields, shared by the mutation, query and subscription so the
 // Apollo cache normalizes them onto one MergeRun by id.
 const MERGE_RUN_FIELDS = gql`
@@ -239,6 +284,43 @@ export const CREATE_BRANCH = gql`
     createBranch(repositoryId: $repositoryId, fromBranchId: $fromBranchId, name: $name) {
       id
       name
+      protected
+    }
+  }
+`;
+
+// The recovery from a BRANCH_PROTECTED save: one call that creates the branch,
+// finds the same document on it (a document's cross-branch identity is its path,
+// so it is a different row there) and applies the edit.
+export const SAVE_DOCUMENT_ON_NEW_BRANCH = gql`
+  mutation SaveDocumentOnNewBranch(
+    $repositoryId: ID!
+    $fromBranchId: ID!
+    $name: String!
+    $documentId: ID!
+    $fields: JSON!
+    $body: String
+  ) {
+    saveDocumentOnNewBranch(
+      repositoryId: $repositoryId
+      fromBranchId: $fromBranchId
+      name: $name
+      documentId: $documentId
+      fields: $fields
+      body: $body
+    ) {
+      branch {
+        id
+        name
+        protected
+      }
+      document {
+        id
+        path
+        label
+        fields
+        body
+      }
     }
   }
 `;
@@ -589,3 +671,84 @@ export const RENAME_DOCUMENT = gql`
     }
   }
 `;
+
+// ── Forms ───────────────────────────────────────────────────────────────────
+
+export const FORMS = gql`
+  query Forms($repositoryId: ID!, $branchId: ID!, $project: String) {
+    forms(repositoryId: $repositoryId, branchId: $branchId, project: $project) {
+      name
+      label
+      description
+      fieldCount
+      submissionCount
+      lastSubmissionAt
+      versioned
+      storePath
+      canDelete
+      fields {
+        name
+        label
+        type
+        component
+      }
+    }
+  }
+`;
+
+export const FORM_SUBMISSIONS = gql`
+  query FormSubmissions(
+    $repositoryId: ID!
+    $branchId: ID!
+    $project: String
+    $form: String!
+    $status: String
+    $search: String
+    $limit: Int
+    $offset: Int
+  ) {
+    formSubmissions(
+      repositoryId: $repositoryId
+      branchId: $branchId
+      project: $project
+      form: $form
+      status: $status
+      search: $search
+      limit: $limit
+      offset: $offset
+    ) {
+      id
+      form
+      fields
+      submittedAt
+      status
+      path
+    }
+  }
+`;
+
+export const FORM_SUBMISSION_COUNT = gql`
+  query FormSubmissionCount(
+    $repositoryId: ID!
+    $branchId: ID!
+    $project: String
+    $form: String!
+    $status: String
+    $search: String
+  ) {
+    formSubmissionCount(
+      repositoryId: $repositoryId
+      branchId: $branchId
+      project: $project
+      form: $form
+      status: $status
+      search: $search
+    )
+  }
+`;
+
+export const DELETE_FORM_SUBMISSIONS = gql`
+  mutation DeleteFormSubmissions($repositoryId: ID!, $ids: [ID!]!) {
+    deleteFormSubmissions(repositoryId: $repositoryId, ids: $ids)
+  }
+`;