@olenbetong/appframe-ds 0.7.0 → 0.9.0

package/src/filter/SavedFilterTree.css

@@ -0,0 +1,107 @@
+/*
+ * Colours use the contextual `--ds-color-*` aliases so the tree follows the
+ * active colour scheme. Never add hex fallbacks — they only encode the light
+ * theme and silently mask misspelled tokens.
+ */
+
+.ObSavedFilterTree-root,
+.ObSavedFilterTree-children {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.ObSavedFilterTree-children {
+	/*
+	 * A branch is chevron + icon, a child only an icon, so matching the branch
+	 * indent would put a child's icon under its parent's icon and make the two
+	 * levels look like one. Indent past the branch icon instead, so a child's
+	 * icon starts where its parent's label does.
+	 */
+	margin-inline-start: calc(var(--ds-size-6) + var(--ds-size-1) + var(--ds-size-6));
+}
+
+.ObSavedFilterTree-item {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-1);
+}
+
+.ObSavedFilterTree-node {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-1);
+	flex: 1;
+	min-inline-size: 0;
+	padding: var(--ds-size-1) var(--ds-size-2);
+	border: none;
+	border-radius: var(--ds-border-radius-sm);
+	background: none;
+	color: var(--ds-color-text-default);
+	font: inherit;
+	text-align: start;
+	cursor: pointer;
+}
+
+.ObSavedFilterTree-node:hover {
+	background: var(--ds-color-surface-hover);
+}
+
+.ObSavedFilterTree-node:focus-visible {
+	outline: var(--ds-border-width-focus) solid var(--ds-color-focus-outer);
+	outline-offset: var(--ds-border-width-focus);
+}
+
+.ObSavedFilterTree-selected {
+	background: var(--ds-color-surface-active);
+}
+
+.ObSavedFilterTree-dirty .ObSavedFilterTree-label {
+	font-weight: var(--ds-font-weight-semibold);
+}
+
+.ObSavedFilterTree-chevron,
+.ObSavedFilterTree-icon {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	inline-size: var(--ds-size-6);
+	block-size: var(--ds-size-6);
+	color: var(--ds-color-text-subtle);
+}
+
+.ObSavedFilterTree-chevron > *,
+.ObSavedFilterTree-icon > * {
+	inline-size: 100%;
+	block-size: 100%;
+}
+
+.ObSavedFilterTree-label {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.ObSavedFilterTree-empty {
+	/* Lines up with the child labels, past their icon. */
+	padding: var(--ds-size-1) var(--ds-size-2) var(--ds-size-1)
+		calc(var(--ds-size-2) + var(--ds-size-6) + var(--ds-size-1));
+	color: var(--ds-color-text-subtle);
+	font-style: italic;
+}
+
+/*
+ * The menu button only appears on hover/focus on pointer devices; on touch it is
+ * always visible because there is no hover to reveal it.
+ */
+@media (hover: hover) {
+	.ObSavedFilterTree-menuButton {
+		visibility: hidden;
+	}
+
+	.ObSavedFilterTree-item:hover .ObSavedFilterTree-menuButton,
+	.ObSavedFilterTree-item:focus-within .ObSavedFilterTree-menuButton {
+		visibility: visible;
+	}
+}

package/src/filter/SavedFilterTree.test.tsx

@@ -0,0 +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();
+	});
+});

package/src/filter/SavedFilterTree.tsx

@@ -0,0 +1,222 @@
+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>
+	);
+}

package/src/filter/fieldFilter.test.ts

@@ -0,0 +1,158 @@
+import type { FieldMetadata, FilterExpression, FilterTree } from "@olenbetong/appframe-core";
+import { describe, expect, test } from "vitest";
+
+import {
+	getFieldExpressions,
+	getInListValues,
+	getSimpleValue,
+	isSimpleFieldFilter,
+	setFieldExpressions,
+	setInListValues,
+	summarizeFieldFilter,
+} from "./fieldFilter.js";
+
+const nameField: FieldMetadata = { name: "Name", caption: "Name", type: "string", nullable: true };
+
+function expression(column: string, operator: string, value: unknown = "x"): FilterExpression {
+	return { type: "expression", column, operator, value } as FilterExpression;
+}
+
+function tree(...items: FilterTree["items"]): FilterTree {
+	return { type: "group", mode: "and", items };
+}
+
+describe("getFieldExpressions", () => {
+	test("returns only top level expressions for the field", () => {
+		let nested = tree(expression("Name", "equals"));
+		let filter = tree(expression("Name", "contains"), expression("Other", "contains"), nested);
+
+		expect(getFieldExpressions(filter, "Name")).toEqual([expression("Name", "contains")]);
+	});
+
+	test("matches the field case insensitively", () => {
+		expect(getFieldExpressions(tree(expression("Name", "contains")), "name")).toHaveLength(1);
+	});
+
+	test("handles a missing filter", () => {
+		expect(getFieldExpressions(null, "Name")).toEqual([]);
+	});
+});
+
+describe("setFieldExpressions", () => {
+	test("replaces the field's expressions in place", () => {
+		let filter = tree(expression("Other", "contains"), expression("Name", "contains"), expression("Third", "equals"));
+		let result = setFieldExpressions(filter, "Name", [expression("Name", "equals", "y")]);
+
+		expect(result.items).toEqual([
+			expression("Other", "contains"),
+			expression("Name", "equals", "y"),
+			expression("Third", "equals"),
+		]);
+	});
+
+	test("removes the field's expressions when given none", () => {
+		let filter = tree(expression("Name", "contains"), expression("Other", "contains"));
+
+		expect(setFieldExpressions(filter, "Name", []).items).toEqual([expression("Other", "contains")]);
+	});
+
+	test("appends when the field has no expressions yet", () => {
+		let filter = tree(expression("Other", "contains"));
+		let result = setFieldExpressions(filter, "Name", [expression("Name", "equals", "y")]);
+
+		expect(result.items).toEqual([expression("Other", "contains"), expression("Name", "equals", "y")]);
+	});
+
+	test("leaves nested groups alone", () => {
+		let nested = tree(expression("Name", "equals"));
+		let result = setFieldExpressions(tree(nested), "Name", []);
+
+		expect(result.items).toEqual([nested]);
+	});
+});
+
+describe("isSimpleFieldFilter", () => {
+	test("is true for a single single-value criterion", () => {
+		expect(isSimpleFieldFilter([expression("Name", "contains")])).toBe(true);
+	});
+
+	test("is false for several criteria", () => {
+		expect(isSimpleFieldFilter([expression("Name", "contains"), expression("Name", "equals")])).toBe(false);
+	});
+
+	test("is false for a list operator", () => {
+		expect(isSimpleFieldFilter([expression("Name", "inlist", ["a"])])).toBe(false);
+	});
+
+	test("is false for a parameterless operator", () => {
+		expect(isSimpleFieldFilter([expression("Name", "isnull", null)])).toBe(false);
+	});
+});
+
+describe("getSimpleValue", () => {
+	test("returns the value of a directly editable criterion", () => {
+		expect(getSimpleValue([expression("Name", "contains", "abc")])).toBe("abc");
+	});
+
+	test("returns an empty string for complex criteria", () => {
+		expect(getSimpleValue([expression("Name", "inlist", ["a"])])).toBe("");
+	});
+});
+
+describe("summarizeFieldFilter", () => {
+	test("is empty without criteria", () => {
+		expect(summarizeFieldFilter([], nameField)).toBe("");
+	});
+
+	test("counts several criteria", () => {
+		expect(summarizeFieldFilter([expression("Name", "contains"), expression("Name", "equals")], nameField)).toBe(
+			"2 criteria",
+		);
+	});
+
+	test("counts the values of a list operator", () => {
+		expect(summarizeFieldFilter([expression("Name", "inlist", ["a", "b"])], nameField)).toContain("(2)");
+	});
+
+	test("shows the operator alone when it takes no value", () => {
+		let summary = summarizeFieldFilter([expression("Name", "isnull", null)], nameField);
+
+		expect(summary).not.toBe("");
+		expect(summary.trim()).toBe(summary);
+	});
+
+	test("shows the operator and value for a single criterion", () => {
+		expect(summarizeFieldFilter([expression("Name", "contains", "abc")], nameField)).toContain("abc");
+	});
+});
+
+describe("in list values", () => {
+	test("reads the values of the in list criterion", () => {
+		expect(getInListValues([expression("Name", "contains"), expression("Name", "inlist", ["a", "b"])])).toEqual([
+			"a",
+			"b",
+		]);
+	});
+
+	test("returns no values when there is no in list criterion", () => {
+		expect(getInListValues([expression("Name", "contains")])).toEqual([]);
+	});
+
+	test("replaces the in list criterion and keeps the others", () => {
+		let result = setInListValues(
+			[expression("Name", "contains"), expression("Name", "inlist", ["a"])],
+			["b"],
+			nameField,
+		);
+
+		expect(result).toHaveLength(2);
+		expect(result[0]).toEqual(expression("Name", "contains"));
+		expect(result[1]?.value).toEqual(["b"]);
+	});
+
+	test("removes the in list criterion when nothing is selected", () => {
+		let result = setInListValues([expression("Name", "inlist", ["a"])], [], nameField);
+
+		expect(result).toEqual([]);
+	});
+});