@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/filter/SavedFilterTree.test.tsx

@@ -1,94 +1,94 @@
-import type { SavedFilter } from "@olenbetong/appframe-core";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-
-import { SavedFilterTree } from "./SavedFilterTree.js";
-
-function savedFilter(overrides: Partial<SavedFilter> & Pick<SavedFilter, "filterId" | "name">): SavedFilter {
-	return {
-		primKey: `pk-${overrides.filterId}`,
-		criteria: "",
-		dbObjectId: "aviw_Test_View",
-		accessLevel: "Manager",
-		createdByUser: true,
-		createdBy: "bvh",
-		domain: "OB",
-		crossDomain: false,
-		isPersonallyShared: false,
-		hideCriteria: false,
-		headerText: null,
-		comment: null,
-		parameters: null,
-		reportTitle: null,
-		created: null,
-		updated: null,
-		...overrides,
-	};
-}
-
-const MINE = [savedFilter({ filterId: 1, name: "Agder" })];
-const SHARED = [
-	savedFilter({ filterId: 2, name: "Alle ledere", createdByUser: false, createdBy: "ola", accessLevel: "Reader" }),
-];
-
-function renderTree(props: Partial<React.ComponentProps<typeof SavedFilterTree>> = {}) {
-	let onChange = vi.fn();
-	render(<SavedFilterTree mine={MINE} shared={SHARED} value={null} onChange={onChange} {...props} />);
-
-	return { onChange };
-}
-
-describe("SavedFilterTree", () => {
-	it("renders the three fixed nodes and their filters", () => {
-		renderTree();
-
-		expect(screen.getByRole("button", { name: "New Filter" })).toBeTruthy();
-		expect(screen.getByRole("button", { name: /My Filters/ })).toBeTruthy();
-		expect(screen.getByRole("button", { name: /Shared With Me/ })).toBeTruthy();
-		expect(screen.getByRole("button", { name: "Agder" })).toBeTruthy();
-		expect(screen.getByRole("button", { name: "Alle ledere" })).toBeTruthy();
-	});
-
-	it("reports the selected filter id", async () => {
-		let { onChange } = renderTree();
-		await userEvent.click(screen.getByRole("button", { name: "Agder" }));
-
-		expect(onChange).toHaveBeenCalledWith(1);
-	});
-
-	it("reports null when the new filter node is selected", async () => {
-		let { onChange } = renderTree({ value: 1 });
-		await userEvent.click(screen.getByRole("button", { name: "New Filter" }));
-
-		expect(onChange).toHaveBeenCalledWith(null);
-	});
-
-	it("collapses a branch", async () => {
-		renderTree();
-		await userEvent.click(screen.getByRole("button", { name: /My Filters/ }));
-
-		expect(screen.queryByRole("button", { name: "Agder" })).toBeNull();
-	});
-
-	it("offers rename and delete for the user's own filters", async () => {
-		let onRename = vi.fn();
-		renderTree({ onRename, onDelete: vi.fn() });
-		await userEvent.click(screen.getByRole("button", { name: "Options for Agder" }));
-		await userEvent.click(screen.getByRole("button", { name: "Rename" }));
-
-		expect(onRename).toHaveBeenCalledWith(MINE[0]);
-	});
-
-	it("does not offer rename or delete for filters created by someone else", () => {
-		renderTree({ onRename: vi.fn(), onDelete: vi.fn() });
-
-		expect(screen.queryByRole("button", { name: "Options for Alle ledere" })).toBeNull();
-	});
-
-	it("still offers info for filters created by someone else", () => {
-		renderTree({ onShowInfo: vi.fn() });
-
-		expect(screen.getByRole("button", { name: "Options for Alle ledere" })).toBeTruthy();
-	});
-});
+import type { SavedFilter } from "@olenbetong/appframe-core";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { SavedFilterTree } from "./SavedFilterTree.js";
+
+function savedFilter(overrides: Partial<SavedFilter> & Pick<SavedFilter, "filterId" | "name">): SavedFilter {
+	return {
+		primKey: `pk-${overrides.filterId}`,
+		criteria: "",
+		dbObjectId: "aviw_Test_View",
+		accessLevel: "Manager",
+		createdByUser: true,
+		createdBy: "bvh",
+		domain: "OB",
+		crossDomain: false,
+		isPersonallyShared: false,
+		hideCriteria: false,
+		headerText: null,
+		comment: null,
+		parameters: null,
+		reportTitle: null,
+		created: null,
+		updated: null,
+		...overrides,
+	};
+}
+
+const MINE = [savedFilter({ filterId: 1, name: "Agder" })];
+const SHARED = [
+	savedFilter({ filterId: 2, name: "Alle ledere", createdByUser: false, createdBy: "ola", accessLevel: "Reader" }),
+];
+
+function renderTree(props: Partial<React.ComponentProps<typeof SavedFilterTree>> = {}) {
+	let onChange = vi.fn();
+	render(<SavedFilterTree mine={MINE} shared={SHARED} value={null} onChange={onChange} {...props} />);
+
+	return { onChange };
+}
+
+describe("SavedFilterTree", () => {
+	it("renders the three fixed nodes and their filters", () => {
+		renderTree();
+
+		expect(screen.getByRole("button", { name: "New Filter" })).toBeTruthy();
+		expect(screen.getByRole("button", { name: /My Filters/ })).toBeTruthy();
+		expect(screen.getByRole("button", { name: /Shared With Me/ })).toBeTruthy();
+		expect(screen.getByRole("button", { name: "Agder" })).toBeTruthy();
+		expect(screen.getByRole("button", { name: "Alle ledere" })).toBeTruthy();
+	});
+
+	it("reports the selected filter id", async () => {
+		let { onChange } = renderTree();
+		await userEvent.click(screen.getByRole("button", { name: "Agder" }));
+
+		expect(onChange).toHaveBeenCalledWith(1);
+	});
+
+	it("reports null when the new filter node is selected", async () => {
+		let { onChange } = renderTree({ value: 1 });
+		await userEvent.click(screen.getByRole("button", { name: "New Filter" }));
+
+		expect(onChange).toHaveBeenCalledWith(null);
+	});
+
+	it("collapses a branch", async () => {
+		renderTree();
+		await userEvent.click(screen.getByRole("button", { name: /My Filters/ }));
+
+		expect(screen.queryByRole("button", { name: "Agder" })).toBeNull();
+	});
+
+	it("offers rename and delete for the user's own filters", async () => {
+		let onRename = vi.fn();
+		renderTree({ onRename, onDelete: vi.fn() });
+		await userEvent.click(screen.getByRole("button", { name: "Options for Agder" }));
+		await userEvent.click(screen.getByRole("button", { name: "Rename" }));
+
+		expect(onRename).toHaveBeenCalledWith(MINE[0]);
+	});
+
+	it("does not offer rename or delete for filters created by someone else", () => {
+		renderTree({ onRename: vi.fn(), onDelete: vi.fn() });
+
+		expect(screen.queryByRole("button", { name: "Options for Alle ledere" })).toBeNull();
+	});
+
+	it("still offers info for filters created by someone else", () => {
+		renderTree({ onShowInfo: vi.fn() });
+
+		expect(screen.getByRole("button", { name: "Options for Alle ledere" })).toBeTruthy();
+	});
+});

package/src/filter/SavedFilterTree.tsx

@@ -1,222 +1,218 @@
-import { Dropdown } from "@digdir/designsystemet-react";
-import {
-	canDeleteSavedFilter,
-	canRenameSavedFilter,
-	getLocalizedString,
-	type SavedFilter,
-} from "@olenbetong/appframe-core";
-import {
-	ChevronDownIcon,
-	ChevronRightIcon,
-	FilesIcon,
-	FileTextIcon,
-	MenuElipsisVerticalIcon,
-	PadlockLockedIcon,
-	PencilIcon,
-	StarIcon,
-	TrashIcon,
-} from "@navikt/aksel-icons";
-import clsx from "clsx";
-import { useState } from "react";
-
-import "./SavedFilterTree.css";
-
-/** `null` is the "new filter" node, i.e. no saved filter selected. */
-export type SavedFilterSelection = number | null;
-
-export type SavedFilterTreeProps = {
-	mine: SavedFilter[];
-	shared: SavedFilter[];
-	/** `FilterID` of the selected filter, or `null` for "new filter". */
-	value: SavedFilterSelection;
-	onChange: (filterId: SavedFilterSelection) => void;
-	/**
-	 * Marks the selected filter as having unsaved changes; it is then rendered
-	 * in bold, like the Windows client does.
-	 */
-	dirty?: boolean;
-	onRename?: (filter: SavedFilter) => void;
-	onDelete?: (filter: SavedFilter) => void;
-	/** Shows an "info" item in the context menu when supplied. */
-	onShowInfo?: (filter: SavedFilter) => void;
-	loading?: boolean;
-	className?: string;
-	"data-size"?: "sm" | "md" | "lg";
-};
-
-/**
- * The saved-filter list of the filter builder: a "new filter" entry followed by
- * the user's own filters and the filters shared with them.
- *
- * Which actions a filter offers depends on the access the database resolved for
- * it — renaming and deleting are restricted to filters the user created, even
- * when they manage a filter someone else made.
- *
- * @example
- * ```jsx
- * let { mine, shared, rename, remove } = useSavedFilters({ dbObjectId: "aviw_Personnel_Persons" });
- *
- * <SavedFilterTree
- *   mine={mine}
- *   shared={shared}
- *   value={selected}
- *   onChange={setSelected}
- *   onRename={(filter) => rename(filter.filterId, prompt("Name", filter.name))}
- * />
- * ```
- */
-export function SavedFilterTree({
-	mine,
-	shared,
-	value,
-	onChange,
-	dirty,
-	onRename,
-	onDelete,
-	onShowInfo,
-	loading,
-	className,
-	"data-size": size = "sm",
-}: SavedFilterTreeProps) {
-	let [expanded, setExpanded] = useState({ mine: true, shared: true });
-
-	function renderBranch(key: "mine" | "shared", label: string, icon: React.ReactNode, filters: SavedFilter[]) {
-		let isExpanded = expanded[key];
-
-		return (
-			<li className="ObSavedFilterTree-branch">
-				<button
-					type="button"
-					className="ObSavedFilterTree-node"
-					aria-expanded={isExpanded}
-					onClick={() => setExpanded((state) => ({ ...state, [key]: !state[key] }))}
-				>
-					<span className="ObSavedFilterTree-chevron" aria-hidden>
-						{isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}
-					</span>
-					<span className="ObSavedFilterTree-icon" aria-hidden>
-						{icon}
-					</span>
-					<span className="ObSavedFilterTree-label">{label}</span>
-				</button>
-				{isExpanded && (
-					<ul className="ObSavedFilterTree-children">
-						{filters.length === 0 && !loading && (
-							<li className="ObSavedFilterTree-empty">{getLocalizedString("No filters")}</li>
-						)}
-						{filters.map((filter) => (
-							<SavedFilterNode
-								key={filter.filterId}
-								filter={filter}
-								selected={filter.filterId === value}
-								dirty={dirty && filter.filterId === value}
-								onSelect={() => onChange(filter.filterId)}
-								onRename={onRename}
-								onDelete={onDelete}
-								onShowInfo={onShowInfo}
-							/>
-						))}
-					</ul>
-				)}
-			</li>
-		);
-	}
-
-	return (
-		<ul className={clsx("ObSavedFilterTree-root", className)} data-size={size}>
-			<li>
-				<button
-					type="button"
-					className={clsx("ObSavedFilterTree-node", value === null && "ObSavedFilterTree-selected")}
-					aria-current={value === null}
-					onClick={() => onChange(null)}
-				>
-					<span className="ObSavedFilterTree-chevron" aria-hidden />
-					<span className="ObSavedFilterTree-icon" aria-hidden>
-						<FileTextIcon />
-					</span>
-					<span className="ObSavedFilterTree-label">{getLocalizedString("New Filter")}</span>
-				</button>
-			</li>
-			{renderBranch("mine", getLocalizedString("My Filters"), <StarIcon />, mine)}
-			{renderBranch("shared", getLocalizedString("Shared With Me"), <FilesIcon />, shared)}
-		</ul>
-	);
-}
-
-type SavedFilterNodeProps = {
-	filter: SavedFilter;
-	selected: boolean;
-	dirty?: boolean;
-	onSelect: () => void;
-	onRename?: (filter: SavedFilter) => void;
-	onDelete?: (filter: SavedFilter) => void;
-	onShowInfo?: (filter: SavedFilter) => void;
-};
-
-function SavedFilterNode({ filter, selected, dirty, onSelect, onRename, onDelete, onShowInfo }: SavedFilterNodeProps) {
-	let canRename = Boolean(onRename) && canRenameSavedFilter(filter);
-	let canDelete = Boolean(onDelete) && canDeleteSavedFilter(filter);
-	let hasMenu = canRename || canDelete || Boolean(onShowInfo);
-	// A shared filter the user may not change; the Windows client shows a lock.
-	let isReadOnly = !filter.createdByUser && filter.accessLevel === "Reader";
-
-	return (
-		<li className="ObSavedFilterTree-item">
-			<button
-				type="button"
-				className={clsx(
-					"ObSavedFilterTree-node",
-					selected && "ObSavedFilterTree-selected",
-					dirty && "ObSavedFilterTree-dirty",
-				)}
-				aria-current={selected}
-				onClick={onSelect}
-			>
-				<span className="ObSavedFilterTree-icon" aria-hidden>
-					{isReadOnly ? <PadlockLockedIcon /> : <FileTextIcon />}
-				</span>
-				<span className="ObSavedFilterTree-label">{filter.name}</span>
-			</button>
-			{hasMenu && (
-				<Dropdown.TriggerContext>
-					<Dropdown.Trigger
-						variant="tertiary"
-						icon
-						className="ObSavedFilterTree-menuButton"
-						aria-label={getLocalizedString("Options for {0}").replace("{0}", filter.name)}
-					>
-						<MenuElipsisVerticalIcon aria-hidden />
-					</Dropdown.Trigger>
-					<Dropdown>
-						<Dropdown.List>
-							{canRename && (
-								<Dropdown.Item>
-									<Dropdown.Button onClick={() => onRename?.(filter)}>
-										<PencilIcon aria-hidden />
-										{getLocalizedString("Rename")}
-									</Dropdown.Button>
-								</Dropdown.Item>
-							)}
-							{onShowInfo && (
-								<Dropdown.Item>
-									<Dropdown.Button onClick={() => onShowInfo(filter)}>
-										{getLocalizedString("Information")}
-									</Dropdown.Button>
-								</Dropdown.Item>
-							)}
-							{canDelete && (
-								<Dropdown.Item>
-									<Dropdown.Button data-color="danger" onClick={() => onDelete?.(filter)}>
-										<TrashIcon aria-hidden />
-										{getLocalizedString("Delete")}
-									</Dropdown.Button>
-								</Dropdown.Item>
-							)}
-						</Dropdown.List>
-					</Dropdown>
-				</Dropdown.TriggerContext>
-			)}
-		</li>
-	);
-}
+import { Dropdown } from "@digdir/designsystemet-react";
+import { canDeleteSavedFilter, canRenameSavedFilter, type SavedFilter } from "@olenbetong/appframe-core";
+import {
+	ChevronDownIcon,
+	ChevronRightIcon,
+	FilesIcon,
+	FileTextIcon,
+	MenuElipsisVerticalIcon,
+	PadlockLockedIcon,
+	PencilIcon,
+	StarIcon,
+	TrashIcon,
+} from "@navikt/aksel-icons";
+import clsx from "clsx";
+import { useState } from "react";
+
+import "./SavedFilterTree.css";
+import { getLocalizedString } from "../i18n.js";
+
+/** `null` is the "new filter" node, i.e. no saved filter selected. */
+export type SavedFilterSelection = number | null;
+
+export type SavedFilterTreeProps = {
+	mine: SavedFilter[];
+	shared: SavedFilter[];
+	/** `FilterID` of the selected filter, or `null` for "new filter". */
+	value: SavedFilterSelection;
+	onChange: (filterId: SavedFilterSelection) => void;
+	/**
+	 * Marks the selected filter as having unsaved changes; it is then rendered
+	 * in bold, like the Windows client does.
+	 */
+	dirty?: boolean;
+	onRename?: (filter: SavedFilter) => void;
+	onDelete?: (filter: SavedFilter) => void;
+	/** Shows an "info" item in the context menu when supplied. */
+	onShowInfo?: (filter: SavedFilter) => void;
+	loading?: boolean;
+	className?: string;
+	"data-size"?: "sm" | "md" | "lg";
+};
+
+/**
+ * The saved-filter list of the filter builder: a "new filter" entry followed by
+ * the user's own filters and the filters shared with them.
+ *
+ * Which actions a filter offers depends on the access the database resolved for
+ * it — renaming and deleting are restricted to filters the user created, even
+ * when they manage a filter someone else made.
+ *
+ * @example
+ * ```jsx
+ * let { mine, shared, rename, remove } = useSavedFilters({ dbObjectId: "aviw_Personnel_Persons" });
+ *
+ * <SavedFilterTree
+ *   mine={mine}
+ *   shared={shared}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   onRename={(filter) => rename(filter.filterId, prompt("Name", filter.name))}
+ * />
+ * ```
+ */
+export function SavedFilterTree({
+	mine,
+	shared,
+	value,
+	onChange,
+	dirty,
+	onRename,
+	onDelete,
+	onShowInfo,
+	loading,
+	className,
+	"data-size": size = "sm",
+}: SavedFilterTreeProps) {
+	let [expanded, setExpanded] = useState({ mine: true, shared: true });
+
+	function renderBranch(key: "mine" | "shared", label: string, icon: React.ReactNode, filters: SavedFilter[]) {
+		let isExpanded = expanded[key];
+
+		return (
+			<li className="ObSavedFilterTree-branch">
+				<button
+					type="button"
+					className="ObSavedFilterTree-node"
+					aria-expanded={isExpanded}
+					onClick={() => setExpanded((state) => ({ ...state, [key]: !state[key] }))}
+				>
+					<span className="ObSavedFilterTree-chevron" aria-hidden>
+						{isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}
+					</span>
+					<span className="ObSavedFilterTree-icon" aria-hidden>
+						{icon}
+					</span>
+					<span className="ObSavedFilterTree-label">{label}</span>
+				</button>
+				{isExpanded && (
+					<ul className="ObSavedFilterTree-children">
+						{filters.length === 0 && !loading && (
+							<li className="ObSavedFilterTree-empty">{getLocalizedString("No filters")}</li>
+						)}
+						{filters.map((filter) => (
+							<SavedFilterNode
+								key={filter.filterId}
+								filter={filter}
+								selected={filter.filterId === value}
+								dirty={dirty && filter.filterId === value}
+								onSelect={() => onChange(filter.filterId)}
+								onRename={onRename}
+								onDelete={onDelete}
+								onShowInfo={onShowInfo}
+							/>
+						))}
+					</ul>
+				)}
+			</li>
+		);
+	}
+
+	return (
+		<ul className={clsx("ObSavedFilterTree-root", className)} data-size={size}>
+			<li>
+				<button
+					type="button"
+					className={clsx("ObSavedFilterTree-node", value === null && "ObSavedFilterTree-selected")}
+					aria-current={value === null}
+					onClick={() => onChange(null)}
+				>
+					<span className="ObSavedFilterTree-chevron" aria-hidden />
+					<span className="ObSavedFilterTree-icon" aria-hidden>
+						<FileTextIcon />
+					</span>
+					<span className="ObSavedFilterTree-label">{getLocalizedString("New Filter")}</span>
+				</button>
+			</li>
+			{renderBranch("mine", getLocalizedString("My Filters"), <StarIcon />, mine)}
+			{renderBranch("shared", getLocalizedString("Shared With Me"), <FilesIcon />, shared)}
+		</ul>
+	);
+}
+
+type SavedFilterNodeProps = {
+	filter: SavedFilter;
+	selected: boolean;
+	dirty?: boolean;
+	onSelect: () => void;
+	onRename?: (filter: SavedFilter) => void;
+	onDelete?: (filter: SavedFilter) => void;
+	onShowInfo?: (filter: SavedFilter) => void;
+};
+
+function SavedFilterNode({ filter, selected, dirty, onSelect, onRename, onDelete, onShowInfo }: SavedFilterNodeProps) {
+	let canRename = Boolean(onRename) && canRenameSavedFilter(filter);
+	let canDelete = Boolean(onDelete) && canDeleteSavedFilter(filter);
+	let hasMenu = canRename || canDelete || Boolean(onShowInfo);
+	// A shared filter the user may not change; the Windows client shows a lock.
+	let isReadOnly = !filter.createdByUser && filter.accessLevel === "Reader";
+
+	return (
+		<li className="ObSavedFilterTree-item">
+			<button
+				type="button"
+				className={clsx(
+					"ObSavedFilterTree-node",
+					selected && "ObSavedFilterTree-selected",
+					dirty && "ObSavedFilterTree-dirty",
+				)}
+				aria-current={selected}
+				onClick={onSelect}
+			>
+				<span className="ObSavedFilterTree-icon" aria-hidden>
+					{isReadOnly ? <PadlockLockedIcon /> : <FileTextIcon />}
+				</span>
+				<span className="ObSavedFilterTree-label">{filter.name}</span>
+			</button>
+			{hasMenu && (
+				<Dropdown.TriggerContext>
+					<Dropdown.Trigger
+						variant="tertiary"
+						icon
+						className="ObSavedFilterTree-menuButton"
+						aria-label={getLocalizedString("Options for {0}").replace("{0}", filter.name)}
+					>
+						<MenuElipsisVerticalIcon aria-hidden />
+					</Dropdown.Trigger>
+					<Dropdown>
+						<Dropdown.List>
+							{canRename && (
+								<Dropdown.Item>
+									<Dropdown.Button onClick={() => onRename?.(filter)}>
+										<PencilIcon aria-hidden />
+										{getLocalizedString("Rename")}
+									</Dropdown.Button>
+								</Dropdown.Item>
+							)}
+							{onShowInfo && (
+								<Dropdown.Item>
+									<Dropdown.Button onClick={() => onShowInfo(filter)}>
+										{getLocalizedString("Information")}
+									</Dropdown.Button>
+								</Dropdown.Item>
+							)}
+							{canDelete && (
+								<Dropdown.Item>
+									<Dropdown.Button data-color="danger" onClick={() => onDelete?.(filter)}>
+										<TrashIcon aria-hidden />
+										{getLocalizedString("Delete")}
+									</Dropdown.Button>
+								</Dropdown.Item>
+							)}
+						</Dropdown.List>
+					</Dropdown>
+				</Dropdown.TriggerContext>
+			)}
+		</li>
+	);
+}