@gogitcms/design-system 0.16.0-next.0 → 0.16.0-next.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gogitcms/design-system",
-  "version": "0.16.0-next.0",
+  "version": "0.16.0-next.10",
   "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__/BranchDeletedModal.test.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { BranchDeletedModal } from "../components/BranchDeletedModal";
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const others = [
+  { id: "b-main", name: "main" },
+  { id: "b-draft", name: "draft/spring" },
+];
+
+test("names the deleted branch and switches to the one picked", () => {
+  const onSwitch = jest.fn();
+  render(wrap(
+    <BranchDeletedModal branch="feat/pricing" repository="acme/site" branches={others} onSwitch={onSwitch} />,
+  ));
+
+  expect(screen.getByTestId("branch-deleted-title")).toHaveTextContent("feat/pricing was deleted");
+  expect(screen.getByText(/removed with it/)).toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("branch-deleted-switch-b-draft"));
+  expect(onSwitch).toHaveBeenCalledWith(others[1]);
+  // The repository exit is not offered unless the host provides it.
+  expect(screen.queryByTestId("branch-deleted-choose-repository")).toBeNull();
+});
+
+test("a stale link (no branch name) still explains and offers the others", () => {
+  render(wrap(<BranchDeletedModal branches={others} onSwitch={() => {}} />));
+  expect(screen.getByTestId("branch-deleted-title")).toHaveTextContent("This branch no longer exists");
+  expect(screen.getByTestId("branch-deleted-switch-b-main")).toBeInTheDocument();
+});
+
+test("with nothing to switch to, the repository picker is the exit", () => {
+  const onChoose = jest.fn();
+  render(wrap(
+    <BranchDeletedModal branch="main" repository="acme/site" branches={[]} onSwitch={() => {}} onChooseRepository={onChoose} />,
+  ));
+  expect(screen.getByTestId("branch-deleted-none")).toHaveTextContent("No other branch of acme/site");
+  fireEvent.click(screen.getByTestId("branch-deleted-choose-repository"));
+  expect(onChoose).toHaveBeenCalled();
+});

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/__tests__/ContentBrowser.forms.test.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+import { render, screen, fireEvent, within } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ContentBrowser, type CmsEntry, type CmsNavSection } from "../components/ContentBrowser";
+import { FORMS_NAV_KEY, formsNavKey, type FormInfo, type FormsApi } from "../forms";
+
+// Force the desktop layout (jsdom reports width 0 → mobile otherwise).
+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 contact: FormInfo = {
+  name: "contact",
+  label: "Contact us",
+  fields: [{ name: "email", type: "string" }],
+  fieldCount: 1,
+  submissionCount: 2,
+  versioned: true,
+  canDelete: true,
+};
+
+const newsletter: FormInfo = {
+  name: "newsletter",
+  label: "Newsletter",
+  fields: [{ name: "email", type: "string" }],
+  fieldCount: 1,
+  submissionCount: 308,
+  versioned: false,
+  canDelete: false,
+};
+
+function makeApi(over: Partial<FormsApi> = {}): FormsApi {
+  return {
+    forms: [contact, newsletter],
+    list: jest.fn(async () => []),
+    count: jest.fn(async () => 0),
+    ...over,
+  };
+}
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+];
+
+const entries: CmsEntry[] = [
+  { id: "a", path: "content/posts/a.md", title: "Alpha", body: "" },
+];
+
+function renderForms(activeNavKey: string, onSelectNav = jest.fn()) {
+  render(
+    wrap(
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey={activeNavKey}
+        onSelectNav={onSelectNav}
+        entries={entries}
+        userInitials="ED"
+        forms={makeApi()}
+      />,
+    ),
+  );
+  return onSelectNav;
+}
+
+// The forms list is a content column, like the documents of a collection or the
+// sets under Media — not the whole area after the sidebar. jsdom computes no
+// layout, so this asserts the mechanism: a fixed width rather than a flex.
+test("the forms list sits in a content column, not the full content area", () => {
+  renderForms(FORMS_NAV_KEY);
+
+  const pane = screen.getByTestId("pane-forms");
+  expect(pane).toHaveStyle({ width: "340px" });
+  // A flexing pane is the bug: it would fill everything after the sidebar.
+  expect(pane).not.toHaveStyle({ flexGrow: 1 });
+
+  // Headed like every other content pane, and with the seam that resizes it.
+  expect(screen.getByText("Forms")).toBeInTheDocument();
+  expect(screen.getByTestId("resize-forms")).toBeInTheDocument();
+
+  // And the area beside it says what to do, the way Media and Changes do.
+  expect(screen.getByTestId("forms-empty")).toBeInTheDocument();
+});
+
+test("the column lists the forms and opens one through the nav key", () => {
+  const onSelectNav = renderForms(FORMS_NAV_KEY);
+
+  expect(screen.getByText("Contact us")).toBeInTheDocument();
+  expect(screen.getByText("Newsletter")).toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("form-row-contact"));
+  expect(onSelectNav).toHaveBeenCalledWith(formsNavKey("contact"));
+});
+
+// The other half of the rule: submissions are two levels deeper than a content
+// column can express, so opening a form does hand the whole area to
+// FormsBrowser. Pinned so the fix above is not later applied to both states.
+test("an open form takes the whole content area", async () => {
+  renderForms(formsNavKey("contact"));
+  // Let the submissions load settle before asserting, so the empty inbox — not
+  // a pending fetch — is what is on screen.
+  await screen.findByText("No submissions yet.");
+
+  const pane = screen.getByTestId("pane-forms");
+  expect(pane).not.toHaveStyle({ width: "340px" });
+  expect(screen.queryByTestId("forms-empty")).not.toBeInTheDocument();
+  expect(screen.queryByTestId("resize-forms")).not.toBeInTheDocument();
+});
+
+// Media, Forms and Changes head their content pane with PaneTitle; a collection
+// heads the same pane with its own header. They have to be the same heading, or
+// the title moves and changes size as you switch between them.
+test("the forms heading matches a collection's, not a smaller indented one", () => {
+  const { unmount } = render(
+    wrap(
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey={FORMS_NAV_KEY}
+        onSelectNav={() => {}}
+        entries={entries}
+        userInitials="ED"
+        forms={makeApi()}
+      />,
+    ),
+  );
+  // Scoped to the pane: "Forms" is also the nav item that got us here.
+  const formsHeading = within(screen.getByTestId("pane-forms")).getByText("Forms");
+  // The heading sits directly in Pane's header row — the row with the pane's
+  // height and the rule under it. A padded wrapper of its own in between is
+  // what used to push this title a step right of every collection's.
+  expect(formsHeading.parentElement).toHaveStyle({ height: "48px", paddingLeft: "16px" });
+  const formsStyle = window.getComputedStyle(formsHeading);
+  unmount();
+
+  render(
+    wrap(
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey="posts"
+        onSelectNav={() => {}}
+        entries={entries}
+        userInitials="ED"
+      />,
+    ),
+  );
+  const collectionHeading = within(screen.getByTestId("pane-entries")).getByText("Posts");
+  const collectionStyle = window.getComputedStyle(collectionHeading);
+
+  expect(formsStyle.fontSize).toBe(collectionStyle.fontSize);
+  expect(formsStyle.fontWeight).toBe(collectionStyle.fontWeight);
+  expect(formsStyle.flexGrow).toBe(collectionStyle.flexGrow);
+});