@olenbetong/appframe-ds 0.7.0 → 0.9.0

package/src/filter/FilterEditor.test.tsx

@@ -0,0 +1,259 @@
+import type { FieldMetadata, FilterExpression, FilterTree } 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 { FilterEditor } from "./FilterEditor.js";
+
+const FIELDS: FieldMetadata[] = [
+	{ name: "PersonID", caption: "Person ID", type: "string", nullable: true },
+	{ name: "Age", caption: "Age", type: "number" },
+	{ name: "Created", caption: "Created", type: "datetime" },
+	{ name: "IsActive", caption: "Is active", type: "boolean" },
+	{ name: "Secret", caption: "Secret", type: "string", excludeFromFilter: true },
+];
+
+/** A tree with a single root `and` group holding one expression. */
+function filterWith(column: string, operator: string, value: unknown, valueType = "string"): FilterTree {
+	return {
+		type: "group",
+		mode: "and",
+		items: [{ type: "expression", column, operator, value, valueType } as never],
+	};
+}
+
+function firstExpression(onChange: ReturnType<typeof vi.fn>, call = 0) {
+	let [filter] = onChange.mock.calls[call] as [FilterTree];
+
+	return filter.items[0] as FilterExpression;
+}
+
+describe("FilterEditor", () => {
+	it("renders one row per expression", () => {
+		render(<FilterEditor fields={FIELDS} value={filterWith("PersonID", "beginswith", "silv")} />);
+
+		expect(screen.getAllByLabelText("Field")).toHaveLength(1);
+		expect(screen.getByLabelText("Operator")).toHaveValue("beginswith");
+		expect(screen.getByLabelText("Value")).toHaveValue("silv");
+	});
+
+	it("wraps a bare expression in a group", () => {
+		let filter = {
+			type: "expression",
+			column: "Age",
+			operator: "equals",
+			value: "42",
+			valueType: "number",
+		} as never as FilterTree;
+
+		render(<FilterEditor fields={FIELDS} value={filter} />);
+
+		expect(screen.getByLabelText("Value")).toHaveValue(42);
+	});
+
+	it("hides fields marked as excluded from the field picker", async () => {
+		let user = userEvent.setup();
+		render(<FilterEditor fields={FIELDS} value={{ type: "group", mode: "and", items: [] }} />);
+
+		await user.click(screen.getByLabelText("Add condition"));
+
+		expect(screen.queryByRole("option", { name: "Secret" })).not.toBeInTheDocument();
+		expect(screen.getByRole("option", { name: "Person ID" })).toBeInTheDocument();
+	});
+
+	it("adds an expression when a field is picked in the blank row", async () => {
+		let user = userEvent.setup();
+		let onChange = vi.fn();
+		render(<FilterEditor fields={FIELDS} value={filterWith("PersonID", "beginswith", "silv")} onChange={onChange} />);
+
+		await user.click(screen.getByLabelText("Add condition"));
+		await user.click(screen.getByRole("option", { name: "Age" }));
+
+		expect(onChange).toHaveBeenCalledTimes(1);
+		let [filter] = onChange.mock.calls[0] as [FilterTree];
+
+		expect(filter.items).toHaveLength(2);
+		// Numbers default to "equals", strings to "begins with".
+		expect(filter.items[1]).toMatchObject({ column: "Age", operator: "equals", valueType: "number" });
+	});
+
+	it("changes the operator and resets the value when the arity changes", async () => {
+		let user = userEvent.setup();
+		let onChange = vi.fn();
+		render(<FilterEditor fields={FIELDS} value={filterWith("Age", "equals", "42", "number")} onChange={onChange} />);
+
+		await user.selectOptions(screen.getByLabelText("Operator"), "between");
+
+		expect(firstExpression(onChange)).toMatchObject({ operator: "between", value: ["", ""] });
+	});
+
+	it("renders no value editor for parameterless operators", () => {
+		render(<FilterEditor fields={FIELDS} value={filterWith("IsActive", "istrue", null, "null")} />);
+
+		expect(screen.queryByLabelText("Value")).not.toBeInTheDocument();
+	});
+
+	it("renders two inputs for range operators", () => {
+		render(<FilterEditor fields={FIELDS} value={filterWith("Age", "between", ["1", "10"], "number")} />);
+
+		expect(screen.getByLabelText("From")).toHaveValue(1);
+		expect(screen.getByLabelText("To")).toHaveValue(10);
+	});
+
+	it("renders one chip per value for list operators", () => {
+		render(<FilterEditor fields={FIELDS} value={filterWith("PersonID", "inlist", ["a", "b"])} />);
+
+		expect(screen.getByRole("button", { name: "Remove a" })).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Remove b" })).toBeInTheDocument();
+	});
+
+	it("adds a list value on Enter", async () => {
+		let user = userEvent.setup();
+		let onChange = vi.fn();
+		render(<FilterEditor fields={FIELDS} value={filterWith("PersonID", "inlist", ["a"])} onChange={onChange} />);
+
+		await user.type(screen.getByLabelText("Value"), "b{Enter}");
+
+		let [filter] = onChange.mock.calls.at(-1) as [FilterTree];
+
+		expect((filter.items[0] as FilterExpression).value).toEqual(["a", "b"]);
+	});
+
+	it("switches a date value to a relative value", async () => {
+		let user = userEvent.setup();
+		let onChange = vi.fn();
+		render(
+			<FilterEditor fields={FIELDS} value={filterWith("Created", "equals", "", "datetime")} onChange={onChange} />,
+		);
+
+		await user.click(screen.getByRole("button", { name: "Use a relative value" }));
+
+		expect(firstExpression(onChange)).toMatchObject({ value: "Yesterday", valueType: "special" });
+	});
+
+	it("does not offer relative values for numbers", () => {
+		render(<FilterEditor fields={FIELDS} value={filterWith("Age", "equals", "1", "number")} />);
+
+		expect(screen.queryByRole("button", { name: "Use a relative value" })).not.toBeInTheDocument();
+	});
+
+	it("removes a condition", async () => {
+		let user = userEvent.setup();
+		let onChange = vi.fn();
+		render(<FilterEditor fields={FIELDS} value={filterWith("PersonID", "beginswith", "silv")} onChange={onChange} />);
+
+		await user.click(screen.getByRole("button", { name: "Remove condition" }));
+
+		let [filter] = onChange.mock.calls[0] as [FilterTree];
+
+		expect(filter.items).toHaveLength(0);
+	});
+
+	it("hides every editing affordance when read only", () => {
+		render(<FilterEditor fields={FIELDS} value={filterWith("PersonID", "beginswith", "silv")} readOnly />);
+
+		expect(screen.queryByLabelText("Add condition")).not.toBeInTheDocument();
+		expect(screen.queryByRole("button", { name: "Remove condition" })).not.toBeInTheDocument();
+		expect(screen.queryByRole("button", { name: "Add group" })).not.toBeInTheDocument();
+		expect(screen.getByLabelText("Group operator")).toBeDisabled();
+	});
+
+	it("keeps a row editable when the field is not in the view", () => {
+		render(<FilterEditor fields={FIELDS} value={filterWith("Removed", "equals", "x")} />);
+
+		expect(screen.getByLabelText("Field")).toHaveValue("Removed");
+	});
+
+	it("uses supplied options as a value list", () => {
+		render(
+			<FilterEditor
+				fields={FIELDS}
+				value={filterWith("PersonID", "equals", "a")}
+				getFieldOptions={(field) =>
+					field.name === "PersonID"
+						? [
+								{ value: "a", label: "Alpha" },
+								{ value: "b", label: "Bravo" },
+							]
+						: undefined
+				}
+			/>,
+		);
+
+		expect(screen.getByLabelText("Value")).toHaveValue("Alpha");
+	});
+
+	it("changes the mode of the root group", async () => {
+		let user = userEvent.setup();
+		let onChange = vi.fn();
+		render(<FilterEditor fields={FIELDS} value={filterWith("PersonID", "beginswith", "silv")} onChange={onChange} />);
+
+		expect(screen.getByLabelText("Group operator")).toHaveValue("and");
+
+		await user.selectOptions(screen.getByLabelText("Group operator"), "or");
+
+		let [filter] = onChange.mock.calls[0] as [FilterTree];
+
+		expect(filter.mode).toBe("or");
+	});
+
+	it("adds and removes nested groups", async () => {
+		let user = userEvent.setup();
+		let onChange = vi.fn();
+		let { rerender } = render(
+			<FilterEditor fields={FIELDS} value={filterWith("PersonID", "beginswith", "silv")} onChange={onChange} />,
+		);
+
+		expect(screen.queryByRole("button", { name: "Remove group" })).not.toBeInTheDocument();
+
+		await user.click(screen.getByRole("button", { name: "Add group" }));
+
+		let [withGroup] = onChange.mock.calls[0] as [FilterTree];
+		expect(withGroup.items).toHaveLength(2);
+		// A nested group defaults to the opposite mode of its parent.
+		expect(withGroup.items[1]).toMatchObject({ type: "group", mode: "or", items: [] });
+
+		rerender(<FilterEditor fields={FIELDS} value={withGroup} onChange={onChange} />);
+		expect(screen.getAllByLabelText("Group operator")).toHaveLength(2);
+
+		await user.click(screen.getByRole("button", { name: "Remove group" }));
+
+		let [removed] = onChange.mock.calls[1] as [FilterTree];
+		expect(removed.items).toHaveLength(1);
+	});
+
+	it("edits a condition inside a nested group", async () => {
+		let user = userEvent.setup();
+		let onChange = vi.fn();
+		let filter: FilterTree = {
+			type: "group",
+			mode: "and",
+			items: [
+				{ type: "expression", column: "Age", operator: "equals", value: "1", valueType: "number" },
+				{
+					type: "group",
+					mode: "or",
+					items: [{ type: "expression", column: "PersonID", operator: "beginswith", value: "a", valueType: "string" }],
+				},
+			],
+		};
+		render(<FilterEditor fields={FIELDS} value={filter} onChange={onChange} />);
+
+		await user.click(screen.getAllByRole("button", { name: "Remove condition" })[1]);
+
+		let [next] = onChange.mock.calls[0] as [FilterTree];
+
+		expect(next.items[0]).toMatchObject({ column: "Age" });
+		expect(next.items[1]).toMatchObject({ type: "group", items: [] });
+	});
+
+	it("keeps its own state when uncontrolled", async () => {
+		let user = userEvent.setup();
+		render(<FilterEditor fields={FIELDS} defaultValue={filterWith("PersonID", "beginswith", "silv")} />);
+
+		await user.clear(screen.getByLabelText("Value"));
+		await user.type(screen.getByLabelText("Value"), "gold");
+
+		expect(screen.getByLabelText("Value")).toHaveValue("gold");
+	});
+});

package/src/filter/FilterEditor.tsx

@@ -0,0 +1,74 @@
+import "./FilterEditor.css";
+
+import { type FilterTree, getLocalizedString, toFilterTree } from "@olenbetong/appframe-core";
+import clsx from "clsx";
+import { useMemo, useState } from "react";
+
+import { FilterGroupEditor } from "./FilterGroupEditor.js";
+import { FilterStringField } from "./FilterStringField.js";
+import type { FilterEditorProps } from "./types.js";
+
+/**
+ * The criteria tree of the filter builder. Groups can be nested and each group
+ * combines its items with either `and` or `or`, matching the advanced filter
+ * editor in the Windows client.
+ *
+ * Works both controlled (`value` + `onChange`) and uncontrolled
+ * (`defaultValue`). Saving and sharing filters is handled by `FilterBuilder`,
+ * which composes this component.
+ *
+ * @example
+ * ```jsx
+ * <FilterEditor fields={fields} value={filter} onChange={setFilter} showFilterString />
+ * ```
+ */
+export function FilterEditor({
+	fields,
+	value,
+	defaultValue,
+	onChange,
+	readOnly,
+	showFilterString,
+	viewName,
+	getFieldOptions,
+	className,
+	"data-size": size = "sm",
+}: FilterEditorProps) {
+	let [uncontrolled, setUncontrolled] = useState<FilterTree>(() => toFilterTree(defaultValue));
+	let isControlled = value !== undefined;
+	// Normalizing on every render would create a new tree each time, which
+	// retriggers the filter string conversion.
+	let controlled = useMemo(() => toFilterTree(value), [value]);
+	let filter = isControlled ? controlled : uncontrolled;
+
+	let visibleFields = useMemo(() => fields.filter((field) => !field.excludeFromFilter), [fields]);
+
+	function update(next: FilterTree) {
+		if (!isControlled) setUncontrolled(next);
+		onChange?.(next);
+	}
+
+	return (
+		<div className={clsx("ObFilterEditor-root", className)} data-size={size}>
+			<div className="ObFilterEditor-body">
+				<p className="ObFilterEditor-intro">
+					{filter.mode === "and"
+						? getLocalizedString("Find rows that match all of these criteria:")
+						: getLocalizedString("Find rows that match one or more of these criteria:")}
+				</p>
+				<FilterGroupEditor
+					filter={filter}
+					path={[]}
+					fields={visibleFields}
+					getFieldOptions={getFieldOptions}
+					readOnly={readOnly}
+					data-size={size}
+					onChange={update}
+				/>
+			</div>
+			{showFilterString && (
+				<FilterStringField filter={filter} viewName={viewName} readOnly={readOnly} data-size={size} onChange={update} />
+			)}
+		</div>
+	);
+}

package/src/filter/FilterGroupEditor.tsx

@@ -0,0 +1,160 @@
+import { Button, Select } from "@digdir/designsystemet-react";
+import { FolderPlusIcon, TrashIcon } from "@navikt/aksel-icons";
+import {
+	addGroupAtPath,
+	createExpression,
+	type FieldMetadata,
+	type FilterExpression,
+	type FilterGroup,
+	type FilterNode,
+	type FilterPath,
+	type FilterTree,
+	getLocalizedString,
+	getNodeAtPath,
+	insertNodeAtPath,
+	isExpression,
+	isGroup,
+	removeNodeAtPath,
+	setGroupMode,
+	updateNodeAtPath,
+} from "@olenbetong/appframe-core";
+import { Combobox } from "../autocomplete/index.js";
+
+import { FilterRow, getFieldLabel } from "./FilterRow.js";
+import type { FilterEditorSize, GetFieldOptions } from "./types.js";
+
+export type FilterGroupEditorProps = {
+	/** The whole tree. Groups edit it through their own `path`. */
+	filter: FilterTree;
+	/** Path to the group this editor renders. The root group is the empty path. */
+	path: FilterPath;
+	fields: FieldMetadata[];
+	onChange: (filter: FilterTree) => void;
+	getFieldOptions?: GetFieldOptions;
+	readOnly?: boolean;
+	"data-size"?: FilterEditorSize;
+};
+
+/**
+ * One group of the filter tree. Groups can be nested and each one combines its
+ * items with either `and` or `or`, matching the advanced (DevExpress) filter
+ * editor in the Windows client.
+ *
+ * A blank row is always rendered at the end; picking a field in it appends a
+ * real condition to the group.
+ */
+export function FilterGroupEditor({
+	filter,
+	path,
+	fields,
+	onChange,
+	getFieldOptions,
+	readOnly,
+	"data-size": size = "sm",
+}: FilterGroupEditorProps) {
+	let node = getNodeAtPath(filter, path);
+	if (!node || !isGroup(node)) return null;
+
+	let group: FilterGroup = node;
+	let isRoot = path.length === 0;
+
+	return (
+		<div className="ObFilterEditor-group" data-root={isRoot ? "" : undefined}>
+			<div className="ObFilterEditor-groupHeader">
+				<Select
+					className="ObFilterEditor-groupMode"
+					data-size={size}
+					disabled={readOnly}
+					aria-label={getLocalizedString("Group operator")}
+					value={group.mode}
+					onChange={(event) => onChange(setGroupMode(filter, path, event.target.value as FilterGroup["mode"]))}
+				>
+					<Select.Option value="and">{getLocalizedString("And")}</Select.Option>
+					<Select.Option value="or">{getLocalizedString("Or")}</Select.Option>
+				</Select>
+				{!readOnly && (
+					<>
+						<Button
+							type="button"
+							variant="tertiary"
+							data-size={size}
+							className="ObFilterEditor-groupButton"
+							aria-label={getLocalizedString("Add group")}
+							onClick={() => onChange(addGroupAtPath(filter, path))}
+						>
+							<FolderPlusIcon aria-hidden />
+							<span className="ObFilterEditor-groupButtonLabel">{getLocalizedString("Add group")}</span>
+						</Button>
+						{!isRoot && (
+							<Button
+								type="button"
+								variant="tertiary"
+								data-color="danger"
+								data-size={size}
+								className="ObFilterEditor-groupButton"
+								aria-label={getLocalizedString("Remove group")}
+								onClick={() => onChange(removeNodeAtPath(filter, path))}
+							>
+								<TrashIcon aria-hidden />
+								<span className="ObFilterEditor-groupButtonLabel">{getLocalizedString("Remove group")}</span>
+							</Button>
+						)}
+					</>
+				)}
+			</div>
+			<div className="ObFilterEditor-groupItems">
+				{group.items.map((item, index) =>
+					isExpression(item) ? (
+						<FilterRow
+							// Rows have no stable identity, and reordering is not supported,
+							// so the index is the only key available.
+							// oxlint-disable-next-line no-array-index-key -- see above
+							key={index}
+							expression={item}
+							fields={fields}
+							getFieldOptions={getFieldOptions}
+							readOnly={readOnly}
+							data-size={size}
+							onChange={(next) => onChange(replaceNode(filter, [...path, index], next))}
+							onRemove={() => onChange(removeNodeAtPath(filter, [...path, index]))}
+						/>
+					) : (
+						<FilterGroupEditor
+							// oxlint-disable-next-line no-array-index-key -- see above
+							key={index}
+							filter={filter}
+							path={[...path, index]}
+							fields={fields}
+							getFieldOptions={getFieldOptions}
+							readOnly={readOnly}
+							data-size={size}
+							onChange={onChange}
+						/>
+					),
+				)}
+				{!readOnly && (
+					<div className="ObFilterEditor-row ObFilterEditor-draftRow">
+						<Combobox
+							className="ObFilterEditor-field"
+							data-size={size}
+							aria-label={getLocalizedString("Add condition")}
+							placeholder={getLocalizedString("Add condition")}
+							options={fields}
+							getOptionLabel={getFieldLabel}
+							getOptionKey={(option) => option.name}
+							isOptionEqualToValue={(a, b) => a.name === b.name}
+							value={null}
+							onChange={(_event, field) => {
+								if (field) onChange(insertNodeAtPath(filter, path, createExpression(field)));
+							}}
+						/>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function replaceNode(filter: FilterTree, path: FilterPath, node: FilterExpression): FilterTree {
+	return updateNodeAtPath<FilterNode>(filter, path, () => node) as FilterTree;
+}

package/src/filter/FilterNameDialog.css

@@ -0,0 +1,22 @@
+/*
+ * Colours use the contextual `--ds-color-*` aliases so the dialog follows the
+ * active colour scheme. Never add hex fallbacks.
+ */
+
+/*
+ * Designsystemet drops the dialog's own padding when its children are blocks,
+ * but the rule only looks at direct children, and the blocks here are wrapped
+ * in the form. Without this the blocks are inset and their dividers stop short
+ * of the dialog's edges.
+ */
+.ObFilterNameDialog-root {
+	inline-size: min(28rem, 100%);
+	padding: 0;
+}
+
+.ObFilterNameDialog-actions {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	gap: var(--ds-size-2);
+}

package/src/filter/FilterNameDialog.tsx

@@ -0,0 +1,81 @@
+import "./FilterNameDialog.css";
+
+import { Button, Dialog, Heading, Textfield } from "@digdir/designsystemet-react";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useEffect, useState } from "react";
+
+export type FilterNameDialogProps = {
+	open: boolean;
+	/** Pre-fills the field, e.g. with the current filter's name. */
+	defaultName?: string;
+	/** Names already in use; entering one asks the user to confirm the overwrite. */
+	existingNames?: string[];
+	onCancel: () => void;
+	onSubmit: (name: string) => void;
+	"data-size"?: "sm" | "md" | "lg";
+};
+
+/**
+ * Asks for the name to save a filter under.
+ *
+ * Reusing an existing name overwrites that filter, so the dialog warns before
+ * submitting rather than silently creating a second filter with the same name.
+ */
+export function FilterNameDialog({
+	open,
+	defaultName = "",
+	existingNames = [],
+	onCancel,
+	onSubmit,
+	"data-size": size = "sm",
+}: FilterNameDialogProps) {
+	let [name, setName] = useState(defaultName);
+
+	useEffect(() => {
+		if (open) setName(defaultName);
+	}, [open, defaultName]);
+
+	let trimmed = name.trim();
+	// A filter keeping its own name is an update, not a collision.
+	let collides = trimmed !== defaultName && existingNames.some((existing) => existing === trimmed);
+
+	function handleSubmit(event: React.FormEvent) {
+		event.preventDefault();
+		if (!trimmed) return;
+
+		onSubmit(trimmed);
+	}
+
+	return (
+		<Dialog open={open} closedby="any" data-size={size} className="ObFilterNameDialog-root" onClose={onCancel}>
+			<form onSubmit={handleSubmit}>
+				<Dialog.Block>
+					<Heading level={2} data-size="xs">
+						{getLocalizedString("Save filter")}
+					</Heading>
+				</Dialog.Block>
+				<Dialog.Block>
+					<Textfield
+						// oxlint-disable-next-line jsx-a11y/no-autofocus -- the field is the only control in the dialog
+						autoFocus
+						data-size={size}
+						label={getLocalizedString("Filter name")}
+						value={name}
+						error={
+							collides ? getLocalizedString("A filter with this name already exists and will be replaced.") : undefined
+						}
+						onChange={(event) => setName(event.currentTarget.value)}
+					/>
+				</Dialog.Block>
+				<Dialog.Block className="ObFilterNameDialog-actions">
+					<Button type="submit" data-size={size} disabled={!trimmed}>
+						{collides ? getLocalizedString("Replace") : getLocalizedString("Save")}
+					</Button>
+					<Button type="button" variant="secondary" data-size={size} onClick={onCancel}>
+						{getLocalizedString("Cancel")}
+					</Button>
+				</Dialog.Block>
+			</form>
+		</Dialog>
+	);
+}