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

package/package.json

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

@@ -0,0 +1,111 @@
+import React from "react";
+import { View, ScrollView } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import { Button } from "./Button";
+import type { BranchRef } from "./BranchMenu";
+
+export type BranchDeletedModalProps = {
+  /**
+   * The branch that no longer exists. Omitted when only its id is known — a
+   * link into a branch that was deleted before the page loaded.
+   */
+  branch?: string;
+  /** "owner/name", when the host knows it. */
+  repository?: string;
+  /** The branches still connected, to switch to. The deleted one is not among them. */
+  branches: BranchRef[];
+  /** Open the editor on `branch` instead. */
+  onSwitch: (branch: BranchRef) => void;
+  /**
+   * Leave this repository for the picker. Offered as the way out when there is
+   * no other branch to switch to; omitted → the list is the only exit.
+   */
+  onChooseRepository?: () => void;
+  testID?: string;
+};
+
+/**
+ * Shown when the branch the editor is on stops existing — deleted on the
+ * provider, or disconnected from the CMS — while someone is looking at it.
+ *
+ * It is a modal rather than a redirect because the screen behind it may hold
+ * work in progress. Nothing on it can be saved to this branch any more, but
+ * bouncing the user to another branch without a word would make that content
+ * vanish mid-thought; the modal says what happened and leaves the page visible
+ * while they decide where to go. It cannot be dismissed into the dead branch,
+ * because there is nothing there to go back to: every exit is another branch.
+ */
+export function BranchDeletedModal({
+  branch, repository, branches, onSwitch, onChooseRepository, testID,
+}: BranchDeletedModalProps) {
+  const t = useTheme();
+  const title = branch ? `${branch} was deleted` : "This branch no longer exists";
+  const where = repository ? ` in ${repository}` : "";
+  const detail = branch
+    ? `The ${branch} branch${where} was deleted on the remote or disconnected from the CMS, and its content was removed with it. Nothing on this screen can be saved to it any more.`
+    : `The branch this link points to${where} was deleted on the remote or disconnected from the CMS, so there is nothing here to edit.`;
+  const hasOthers = branches.length > 0;
+
+  return (
+    <View
+      testID={testID ?? "branch-deleted-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%", maxHeight: "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", gap: t.space(2) }}>
+          <Icon name="alert" size={16} color={t.color.diffDelFg} />
+          <Text variant="h3" weight="semibold" testID="branch-deleted-title">{title}</Text>
+        </View>
+
+        <Text variant="body" color="secondary">{detail}</Text>
+
+        {hasOthers ? (
+          <>
+            <Text variant="sm" weight="semibold">Switch to another branch to keep working</Text>
+            <ScrollView style={{ maxHeight: 280 }} contentContainerStyle={{ gap: t.space(2) }}>
+              {branches.map((b) => (
+                <Button
+                  key={b.id}
+                  title={b.name}
+                  fullWidth
+                  onPress={() => onSwitch(b)}
+                  testID={`branch-deleted-switch-${b.id}`}
+                />
+              ))}
+            </ScrollView>
+          </>
+        ) : (
+          <Text variant="sm" color="secondary" testID="branch-deleted-none">
+            {repository
+              ? `No other branch of ${repository} is connected to the CMS.`
+              : "No other branch of this repository is connected to the CMS."}
+          </Text>
+        )}
+
+        {onChooseRepository ? (
+          <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
+            <Button
+              title="Choose a repository"
+              variant={hasOthers ? "ghost" : "primary"}
+              size="md"
+              onPress={onChooseRepository}
+              testID="branch-deleted-choose-repository"
+            />
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}

package/src/index.ts

@@ -57,6 +57,8 @@ export type {
 // Change-request summary surface (developer escalation)
 export { ProtectedBranchModal } from "./components/ProtectedBranchModal";
 export type { ProtectedBranchModalProps } from "./components/ProtectedBranchModal";
+export { BranchDeletedModal } from "./components/BranchDeletedModal";
+export type { BranchDeletedModalProps } from "./components/BranchDeletedModal";
 export { ChangeRequestSummary } from "./components/ChangeRequestSummary";
 export type {
   ChangeRequestSummaryProps,