@olenbetong/appframe-ds 1.7.2 → 1.9.0

package/src/mdi/MdiPanel.tsx

@@ -1,61 +1,61 @@
-import { Button } from "@digdir/designsystemet-react";
-import type { IDockviewPanelProps } from "dockview-react";
-import { useSyncExternalStore } from "react";
-import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
-
-import { useMdiController } from "./MdiContext.js";
-import { MdiDocumentIdContext } from "./MdiDocumentContext.js";
-import { getLocalizedString } from "../i18n.js";
-
-function MdiErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
-	let message = error instanceof Error ? error.message : String(error);
-
-	return (
-		<div className="ObMdi-error" role="alert">
-			<p className="ObMdi-error-title">{getLocalizedString("The document could not be displayed")}</p>
-			<pre className="ObMdi-error-message">{message}</pre>
-			<Button data-size="sm" variant="secondary" onClick={resetErrorBoundary}>
-				{getLocalizedString("Try again")}
-			</Button>
-		</div>
-	);
-}
-
-/**
- * The one dockview content component. Every panel renders through it; it looks the
- * document up by panel id and renders the component registered for its type.
- */
-export function MdiPanel(props: IDockviewPanelProps) {
-	let id = props.api.id;
-	let controller = useMdiController();
-	let info = useSyncExternalStore(
-		controller.subscribeStore,
-		() => controller.getDocument(id),
-		() => controller.getDocument(id),
-	);
-
-	if (!info) {
-		return null;
-	}
-
-	let definition = controller.getTypes()[info.type];
-
-	if (!definition) {
-		return (
-			<div className="ObMdi-error" role="alert">
-				<p className="ObMdi-error-title">{getLocalizedString("Unknown document type")}</p>
-				<pre className="ObMdi-error-message">{info.type}</pre>
-			</div>
-		);
-	}
-
-	let Component = definition.component;
-
-	return (
-		<MdiDocumentIdContext value={id}>
-			<ErrorBoundary FallbackComponent={MdiErrorFallback} resetKeys={[info.params]}>
-				<Component id={id} type={info.type} documentKey={info.key} params={info.params} />
-			</ErrorBoundary>
-		</MdiDocumentIdContext>
-	);
-}
+import { Button } from "@digdir/designsystemet-react";
+import type { IDockviewPanelProps } from "dockview-react";
+import { useSyncExternalStore } from "react";
+import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
+
+import { useMdiController } from "./MdiContext.js";
+import { MdiDocumentIdContext } from "./MdiDocumentContext.js";
+import { getLocalizedString } from "../i18n.js";
+
+function MdiErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+	let message = error instanceof Error ? error.message : String(error);
+
+	return (
+		<div className="ObMdi-error" role="alert">
+			<p className="ObMdi-error-title">{getLocalizedString("The document could not be displayed")}</p>
+			<pre className="ObMdi-error-message">{message}</pre>
+			<Button variant="secondary" onClick={resetErrorBoundary}>
+				{getLocalizedString("Try again")}
+			</Button>
+		</div>
+	);
+}
+
+/**
+ * The one dockview content component. Every panel renders through it; it looks the
+ * document up by panel id and renders the component registered for its type.
+ */
+export function MdiPanel(props: IDockviewPanelProps) {
+	let id = props.api.id;
+	let controller = useMdiController();
+	let info = useSyncExternalStore(
+		controller.subscribeStore,
+		() => controller.getDocument(id),
+		() => controller.getDocument(id),
+	);
+
+	if (!info) {
+		return null;
+	}
+
+	let definition = controller.getTypes()[info.type];
+
+	if (!definition) {
+		return (
+			<div className="ObMdi-error" role="alert">
+				<p className="ObMdi-error-title">{getLocalizedString("Unknown document type")}</p>
+				<pre className="ObMdi-error-message">{info.type}</pre>
+			</div>
+		);
+	}
+
+	let Component = definition.component;
+
+	return (
+		<MdiDocumentIdContext value={id}>
+			<ErrorBoundary FallbackComponent={MdiErrorFallback} resetKeys={[info.params]}>
+				<Component id={id} type={info.type} documentKey={info.key} params={info.params} />
+			</ErrorBoundary>
+		</MdiDocumentIdContext>
+	);
+}

package/src/mdi/MdiRestore.test.tsx

@@ -1,86 +1,86 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-
-import { layoutSpecToLayout } from "./layoutSpec.js";
-import { layoutStore } from "./layoutStore.js";
-import { Mdi } from "./Mdi.js";
-import { MdiProvider } from "./MdiContext.js";
-import type { MdiDocumentProps, MdiDocumentTypes, MdiLayout, MdiLayoutSpec } from "./types.js";
-
-vi.mock("@olenbetong/appframe-core", () => ({
-	getLocalizedString: (value: string) => value,
-	createLocalizer: () => ({
-		getLocalizedString: (value: string) => value,
-		localize: (parts: TemplateStringsArray) => parts.join(""),
-	}),
-}));
-
-function Doc({ id }: MdiDocumentProps) {
-	return <div data-testid={id}>{id}</div>;
-}
-
-const types: MdiDocumentTypes = {
-	explorer: { component: Doc, singleton: true, closable: false, title: "Explorer" },
-	properties: { component: Doc, singleton: true, closable: false, title: "Properties" },
-	welcome: { component: Doc, singleton: true, title: "Welcome" },
-	serie: { component: Doc, title: "Serie", restore: async () => true },
-};
-
-const spec: MdiLayoutSpec = {
-	root: {
-		direction: "horizontal",
-		children: [
-			{ tabs: [{ type: "explorer" }], hideHeader: true, locked: true },
-			{
-				direction: "vertical",
-				children: [{ tabs: [{ type: "welcome" }] }, { tabs: [{ type: "properties" }] }],
-			},
-		],
-	},
-};
-
-/**
- * What dockview serialises after a panel was popped out of the welcome group: the
- * panel sits in `popoutGroups` with the welcome group as its reference group.
- */
-function layoutWithPopout(): MdiLayout {
-	let layout = layoutSpecToLayout(spec, types, 1);
-	let serieId = "serie:abc";
-
-	layout.documents[serieId] = { type: "serie", key: "abc", params: { name: "S" }, title: "S", closable: true };
-	layout.dockview.panels[serieId] = { id: serieId, contentComponent: "mdi", tabComponent: "mdi", title: "S" };
-	layout.dockview.popoutGroups = [
-		{
-			data: { id: "4", views: [serieId], activeView: serieId },
-			gridReferenceGroup: "mdi-g2",
-			position: { top: 10, left: 10, width: 300, height: 200 },
-			url: "/popout",
-		},
-	];
-
-	return layout;
-}
-
-describe("Mdi restore", () => {
-	it("re-docks a popped-out document when a saved layout is restored", async () => {
-		let key = layoutStore.key("restore-popout");
-		await layoutStore.setNow(key, layoutWithPopout());
-
-		render(
-			<MdiProvider types={types}>
-				<div style={{ width: 800, height: 600 }}>
-					<Mdi id="restore-popout" layoutVersion={1} defaultLayout={spec} />
-				</div>
-			</MdiProvider>,
-		);
-
-		// dockview only mounts the content of the active tab of a group, so check the tabs.
-		expect(await screen.findByTestId("welcome")).toBeInTheDocument();
-		let tabIds = [...document.querySelectorAll("[data-tab-panel-id]")].map((tab) =>
-			tab.getAttribute("data-tab-panel-id"),
-		);
-		expect(tabIds).toEqual(["explorer", "welcome", "serie:abc", "properties"]);
-		expect(screen.getByTestId("explorer")).toBeInTheDocument();
-		expect(screen.getByTestId("properties")).toBeInTheDocument();
-	});
-});
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { layoutSpecToLayout } from "./layoutSpec.js";
+import { layoutStore } from "./layoutStore.js";
+import { Mdi } from "./Mdi.js";
+import { MdiProvider } from "./MdiContext.js";
+import type { MdiDocumentProps, MdiDocumentTypes, MdiLayout, MdiLayoutSpec } from "./types.js";
+
+vi.mock("@olenbetong/appframe-core", () => ({
+	getLocalizedString: (value: string) => value,
+	createLocalizer: () => ({
+		getLocalizedString: (value: string) => value,
+		localize: (parts: TemplateStringsArray) => parts.join(""),
+	}),
+}));
+
+function Doc({ id }: MdiDocumentProps) {
+	return <div data-testid={id}>{id}</div>;
+}
+
+const types: MdiDocumentTypes = {
+	explorer: { component: Doc, singleton: true, closable: false, title: "Explorer" },
+	properties: { component: Doc, singleton: true, closable: false, title: "Properties" },
+	welcome: { component: Doc, singleton: true, title: "Welcome" },
+	serie: { component: Doc, title: "Serie", restore: async () => true },
+};
+
+const spec: MdiLayoutSpec = {
+	root: {
+		direction: "horizontal",
+		children: [
+			{ tabs: [{ type: "explorer" }], hideHeader: true, locked: true },
+			{
+				direction: "vertical",
+				children: [{ tabs: [{ type: "welcome" }] }, { tabs: [{ type: "properties" }] }],
+			},
+		],
+	},
+};
+
+/**
+ * What dockview serialises after a panel was popped out of the welcome group: the
+ * panel sits in `popoutGroups` with the welcome group as its reference group.
+ */
+function layoutWithPopout(): MdiLayout {
+	let layout = layoutSpecToLayout(spec, types, 1);
+	let serieId = "serie:abc";
+
+	layout.documents[serieId] = { type: "serie", key: "abc", params: { name: "S" }, title: "S", closable: true };
+	layout.dockview.panels[serieId] = { id: serieId, contentComponent: "mdi", tabComponent: "mdi", title: "S" };
+	layout.dockview.popoutGroups = [
+		{
+			data: { id: "4", views: [serieId], activeView: serieId },
+			gridReferenceGroup: "mdi-g2",
+			position: { top: 10, left: 10, width: 300, height: 200 },
+			url: "/popout",
+		},
+	];
+
+	return layout;
+}
+
+describe("Mdi restore", () => {
+	it("re-docks a popped-out document when a saved layout is restored", async () => {
+		let key = layoutStore.key("restore-popout");
+		await layoutStore.setNow(key, layoutWithPopout());
+
+		render(
+			<MdiProvider types={types}>
+				<div style={{ width: 800, height: 600 }}>
+					<Mdi id="restore-popout" layoutVersion={1} defaultLayout={spec} />
+				</div>
+			</MdiProvider>,
+		);
+
+		// dockview only mounts the content of the active tab of a group, so check the tabs.
+		expect(await screen.findByTestId("welcome")).toBeInTheDocument();
+		let tabIds = [...document.querySelectorAll("[data-tab-panel-id]")].map((tab) =>
+			tab.getAttribute("data-tab-panel-id"),
+		);
+		expect(tabIds).toEqual(["explorer", "welcome", "serie:abc", "properties"]);
+		expect(screen.getByTestId("explorer")).toBeInTheDocument();
+		expect(screen.getByTestId("properties")).toBeInTheDocument();
+	});
+});

package/src/mdi/MdiTab.tsx

@@ -1,30 +1,30 @@
-import clsx from "clsx";
-import { DockviewDefaultTab, type IDockviewPanelHeaderProps } from "dockview-react";
-import { useCallback, useSyncExternalStore } from "react";
-
-import { useMdiController } from "./MdiContext.js";
-
-/**
- * The default tab with the close button hidden for unclosable documents, and every
- * close (button and middle-click) routed through the controller guards.
- */
-export function MdiTab(props: IDockviewPanelHeaderProps) {
-	let id = props.api.id;
-	let controller = useMdiController();
-	let info = useSyncExternalStore(
-		controller.subscribeStore,
-		() => controller.getDocument(id),
-		() => controller.getDocument(id),
-	);
-
-	let close = useCallback(() => {
-		void controller.close(id);
-	}, [controller, id]);
-
-	// DockviewDefaultTab overwrites `className`, so the state classes go on a layout-neutral wrapper.
-	return (
-		<div className={clsx("ObMdi-tab", info?.dirty && "ObMdi-tab--dirty")} style={{ display: "contents" }}>
-			<DockviewDefaultTab {...props} hideClose={info ? !info.closable : false} closeActionOverride={close} />
-		</div>
-	);
-}
+import clsx from "clsx";
+import { DockviewDefaultTab, type IDockviewPanelHeaderProps } from "dockview-react";
+import { useCallback, useSyncExternalStore } from "react";
+
+import { useMdiController } from "./MdiContext.js";
+
+/**
+ * The default tab with the close button hidden for unclosable documents, and every
+ * close (button and middle-click) routed through the controller guards.
+ */
+export function MdiTab(props: IDockviewPanelHeaderProps) {
+	let id = props.api.id;
+	let controller = useMdiController();
+	let info = useSyncExternalStore(
+		controller.subscribeStore,
+		() => controller.getDocument(id),
+		() => controller.getDocument(id),
+	);
+
+	let close = useCallback(() => {
+		void controller.close(id);
+	}, [controller, id]);
+
+	// DockviewDefaultTab overwrites `className`, so the state classes go on a layout-neutral wrapper.
+	return (
+		<div className={clsx("ObMdi-tab", info?.dirty && "ObMdi-tab--dirty")} style={{ display: "contents" }}>
+			<DockviewDefaultTab {...props} hideClose={info ? !info.closable : false} closeActionOverride={close} />
+		</div>
+	);
+}