@olenbetong/appframe-ds 1.6.0 → 1.7.0

package/src/filter/FilterBuilder.css

@@ -1,152 +1,152 @@
-/*
- * Colours use the contextual `--ds-color-*` aliases so the builder follows the
- * active colour scheme. Never add hex fallbacks.
- */
-
-.ObFilterBuilder-root {
-	display: grid;
-	gap: var(--ds-size-4);
-	/*
-	 * The saved-filter list sits beside the editor. The buttons acting on the
-	 * selected filter share the bottom row with OK/Cancel rather than being
-	 * confined to the list's column, so they have room to stay on one line.
-	 * On narrow viewports everything stacks.
-	 */
-	grid-template:
-		"sidebar main" 1fr
-		"error error" auto
-		"footer footer" auto
-		/ minmax(14rem, 22rem) minmax(0, 1fr);
-	block-size: 100%;
-	min-block-size: 0;
-}
-
-.ObFilterBuilder-sidebar {
-	grid-area: sidebar;
-	overflow: auto;
-	padding: var(--ds-size-2);
-	border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
-	border-radius: var(--ds-border-radius-md);
-}
-
-/*
- * The editor manages its own scrolling — the conditions scroll, the filter
- * string stays put — so this only has to hand it the available height. A caller
- * that replaces the editor through `renderMain` gets the same treatment.
- */
-.ObFilterBuilder-main {
-	grid-area: main;
-	display: flex;
-	flex-direction: column;
-	gap: var(--ds-size-3);
-	min-inline-size: 0;
-	min-block-size: 0;
-}
-
-.ObFilterBuilder-main > * {
-	flex: 1 1 auto;
-	min-inline-size: 0;
-	min-block-size: 0;
-}
-
-.ObFilterBuilder-error {
-	grid-area: error;
-	margin: 0;
-	color: var(--ds-color-danger-text-default);
-}
-
-.ObFilterBuilder-footer {
-	grid-area: footer;
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--ds-size-4);
-}
-
-.ObFilterBuilder-toolbar,
-.ObFilterBuilder-actions {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--ds-size-2);
-}
-
-.ObFilterBuilder-actions {
-	margin-inline-start: auto;
-}
-
-/*
- * Without the saved-filter list there are no buttons acting on one either, so
- * the editor takes the full width.
- */
-.ObFilterBuilder-root--noSavedFilters {
-	grid-template:
-		"main" 1fr
-		"error" auto
-		"footer" auto
-		/ minmax(0, 1fr);
-}
-
-/*
- * `Dialog` caps itself at `--dsc-dialog-max-width` (40rem), so setting a width
- * here would have no effect — the variable has to be raised instead. It needs
- * to be wide enough that a condition — field, operator, value and the group
- * buttons — fits on one line next to the saved-filter column.
- */
-.ObFilterBuilder-dialog {
-	--dsc-dialog-max-width: 84rem;
-	--dsc-dialog-max-height: 90dvh;
-}
-
-/*
- * A fixed height keeps the dialog from resizing as conditions are added and
- * removed, and gives the saved-filter column and the editor a height to fill.
- * The dialog itself must not scroll — the body does — or the heading would
- * scroll away and the OK/Cancel row would not stay at the bottom.
- */
-.ObFilterBuilder-dialog[open] {
-	display: flex;
-	flex-direction: column;
-	block-size: 48rem;
-	overflow: hidden;
-}
-
-/*
- * The heading and the close button share the header row.
- */
-.ObFilterBuilder-dialogHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--ds-size-2);
-}
-
-.ObFilterBuilder-dialogBody {
-	flex: 1 1 auto;
-	min-block-size: 0;
-	overflow: hidden;
-}
-
-@media (width < 48rem) {
-	.ObFilterBuilder-root:not(.ObFilterBuilder-root--noSavedFilters) {
-		grid-template:
-			"sidebar" auto
-			"main" 1fr
-			"error" auto
-			"footer" auto
-			/ minmax(0, 1fr);
-	}
-
-	/*
-	 * Stacked, the dialog body is the scroll container: the editor cannot give
-	 * both the list and the conditions a useful height in the space left over.
-	 */
-	.ObFilterBuilder-dialogBody {
-		overflow: auto;
-	}
-
-	.ObFilterBuilder-sidebar {
-		max-block-size: 12rem;
-	}
-}
+/*
+ * Colours use the contextual `--ds-color-*` aliases so the builder follows the
+ * active colour scheme. Never add hex fallbacks.
+ */
+
+.ObFilterBuilder-root {
+	display: grid;
+	gap: var(--ds-size-4);
+	/*
+	 * The saved-filter list sits beside the editor. The buttons acting on the
+	 * selected filter share the bottom row with OK/Cancel rather than being
+	 * confined to the list's column, so they have room to stay on one line.
+	 * On narrow viewports everything stacks.
+	 */
+	grid-template:
+		"sidebar main" 1fr
+		"error error" auto
+		"footer footer" auto
+		/ minmax(14rem, 22rem) minmax(0, 1fr);
+	block-size: 100%;
+	min-block-size: 0;
+}
+
+.ObFilterBuilder-sidebar {
+	grid-area: sidebar;
+	overflow: auto;
+	padding: var(--ds-size-2);
+	border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
+	border-radius: var(--ds-border-radius-md);
+}
+
+/*
+ * The editor manages its own scrolling — the conditions scroll, the filter
+ * string stays put — so this only has to hand it the available height. A caller
+ * that replaces the editor through `renderMain` gets the same treatment.
+ */
+.ObFilterBuilder-main {
+	grid-area: main;
+	display: flex;
+	flex-direction: column;
+	gap: var(--ds-size-3);
+	min-inline-size: 0;
+	min-block-size: 0;
+}
+
+.ObFilterBuilder-main > * {
+	flex: 1 1 auto;
+	min-inline-size: 0;
+	min-block-size: 0;
+}
+
+.ObFilterBuilder-error {
+	grid-area: error;
+	margin: 0;
+	color: var(--ds-color-danger-text-default);
+}
+
+.ObFilterBuilder-footer {
+	grid-area: footer;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--ds-size-4);
+}
+
+.ObFilterBuilder-toolbar,
+.ObFilterBuilder-actions {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--ds-size-2);
+}
+
+.ObFilterBuilder-actions {
+	margin-inline-start: auto;
+}
+
+/*
+ * Without the saved-filter list there are no buttons acting on one either, so
+ * the editor takes the full width.
+ */
+.ObFilterBuilder-root--noSavedFilters {
+	grid-template:
+		"main" 1fr
+		"error" auto
+		"footer" auto
+		/ minmax(0, 1fr);
+}
+
+/*
+ * `Dialog` caps itself at `--dsc-dialog-max-width` (40rem), so setting a width
+ * here would have no effect — the variable has to be raised instead. It needs
+ * to be wide enough that a condition — field, operator, value and the group
+ * buttons — fits on one line next to the saved-filter column.
+ */
+.ObFilterBuilder-dialog {
+	--dsc-dialog-max-width: 84rem;
+	--dsc-dialog-max-height: 90dvh;
+}
+
+/*
+ * A fixed height keeps the dialog from resizing as conditions are added and
+ * removed, and gives the saved-filter column and the editor a height to fill.
+ * The dialog itself must not scroll — the body does — or the heading would
+ * scroll away and the OK/Cancel row would not stay at the bottom.
+ */
+.ObFilterBuilder-dialog[open] {
+	display: flex;
+	flex-direction: column;
+	block-size: 48rem;
+	overflow: hidden;
+}
+
+/*
+ * The heading and the close button share the header row.
+ */
+.ObFilterBuilder-dialogHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--ds-size-2);
+}
+
+.ObFilterBuilder-dialogBody {
+	flex: 1 1 auto;
+	min-block-size: 0;
+	overflow: hidden;
+}
+
+@media (width < 48rem) {
+	.ObFilterBuilder-root:not(.ObFilterBuilder-root--noSavedFilters) {
+		grid-template:
+			"sidebar" auto
+			"main" 1fr
+			"error" auto
+			"footer" auto
+			/ minmax(0, 1fr);
+	}
+
+	/*
+	 * Stacked, the dialog body is the scroll container: the editor cannot give
+	 * both the list and the conditions a useful height in the space left over.
+	 */
+	.ObFilterBuilder-dialogBody {
+		overflow: auto;
+	}
+
+	.ObFilterBuilder-sidebar {
+		max-block-size: 12rem;
+	}
+}

package/src/filter/FilterBuilder.test.tsx

@@ -1,153 +1,153 @@
-import type { FieldMetadata, SavedFilter } from "@olenbetong/appframe-core";
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-
-const save = vi.fn(async () => undefined);
-const remove = vi.fn(async () => undefined);
-const rename = vi.fn(async () => undefined);
-const setCrossDomain = vi.fn(async () => undefined);
-const setNamedFilter = vi.fn();
-const parseFilterString = vi.fn(async () => null);
-let savedFilters: SavedFilter[] = [];
-
-vi.mock("@olenbetong/appframe-react", async (importOriginal) => ({
-	...(await importOriginal<Record<string, unknown>>()),
-	setNamedFilter: (...args: unknown[]) => setNamedFilter(...args),
-	useSavedFilters: () => ({
-		filters: savedFilters,
-		mine: savedFilters.filter((filter) => filter.createdByUser),
-		shared: savedFilters.filter((filter) => !filter.createdByUser),
-		loading: false,
-		error: null,
-		refresh: vi.fn(),
-		save,
-		rename,
-		remove,
-		setCrossDomain,
-	}),
-	useFilterConversion: () => ({
-		filterString: "[PersonID] Like '%a%'",
-		isConverting: false,
-		error: null,
-		parseFilterString,
-	}),
-}));
-
-const { FilterBuilder } = await import("./FilterBuilder.js");
-
-const FIELDS: FieldMetadata[] = [
-	{ name: "PersonID", caption: "Person ID", type: "string", nullable: true },
-	{ name: "Age", caption: "Age", type: "number" },
-];
-
-function savedFilter(overrides: Partial<SavedFilter> & Pick<SavedFilter, "filterId" | "name">): SavedFilter {
-	return {
-		primKey: `pk-${overrides.filterId}`,
-		criteria: "[PersonID] Like '%a%'",
-		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,
-	};
-}
-
-function renderBuilder(props: Record<string, unknown> = {}) {
-	return render(<FilterBuilder fields={FIELDS} viewName="aviw_Test_View" variant="inline" {...props} />);
-}
-
-describe("FilterBuilder", () => {
-	beforeEach(() => {
-		vi.clearAllMocks();
-		savedFilters = [savedFilter({ filterId: 1, name: "Agder" })];
-	});
-
-	it("renders the saved filters beside the editor", () => {
-		renderBuilder();
-
-		expect(screen.getByRole("button", { name: "New Filter" })).toBeTruthy();
-		expect(screen.getByRole("button", { name: "Agder" })).toBeTruthy();
-		expect(screen.getByLabelText("Add condition")).toBeTruthy();
-	});
-
-	it("disables save and share until a filter is selected", () => {
-		renderBuilder();
-
-		expect(screen.getByRole("button", { name: "Sharing..." }).hasAttribute("disabled")).toBe(true);
-		expect(screen.getByRole("button", { name: "Save" }).hasAttribute("disabled")).toBe(true);
-	});
-
-	it("disables save as while the filter is empty", () => {
-		renderBuilder();
-
-		expect(screen.getByRole("button", { name: "Save as" }).hasAttribute("disabled")).toBe(true);
-	});
-
-	it("parses the criteria of a selected filter back into the tree", async () => {
-		renderBuilder();
-		await userEvent.click(screen.getByRole("button", { name: "Agder" }));
-
-		expect(parseFilterString).toHaveBeenCalledWith("[PersonID] Like '%a%'");
-	});
-
-	it("applies the pruned filter to the data object", async () => {
-		let dataObject = {} as never;
-		renderBuilder({
-			dataObject,
-			defaultValue: {
-				type: "group",
-				mode: "and",
-				items: [{ type: "expression", column: "PersonID", operator: "like", value: "a", valueType: "string" }],
-			},
-		});
-
-		await userEvent.click(screen.getByRole("button", { name: "OK" }));
-
-		expect(setNamedFilter).toHaveBeenCalledWith(
-			dataObject,
-			"filterBuilder",
-			expect.objectContaining({ type: "group" }),
-			{ type: "filterObject" },
-		);
-	});
-
-	it("reports an empty filter as null", async () => {
-		let onApply = vi.fn();
-		renderBuilder({ onApply });
-
-		await userEvent.click(screen.getByRole("button", { name: "OK" }));
-
-		expect(onApply).toHaveBeenCalledWith(null, "[PersonID] Like '%a%'");
-	});
-
-	it("saves under a new name and replaces a filter that already uses it", async () => {
-		renderBuilder({
-			defaultValue: {
-				type: "group",
-				mode: "and",
-				items: [{ type: "expression", column: "PersonID", operator: "like", value: "a", valueType: "string" }],
-			},
-		});
-
-		await userEvent.click(screen.getByRole("button", { name: "Save as" }));
-		await userEvent.type(screen.getByRole("textbox", { name: "Filter name" }), "Agder");
-		await userEvent.click(screen.getByRole("button", { name: "Replace" }));
-
-		await waitFor(() =>
-			expect(save).toHaveBeenCalledWith(
-				expect.objectContaining({ filterId: 1, name: "Agder", criteria: "[PersonID] Like '%a%'" }),
-			),
-		);
-	});
-});
+import type { FieldMetadata, SavedFilter } from "@olenbetong/appframe-core";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const save = vi.fn(async () => undefined);
+const remove = vi.fn(async () => undefined);
+const rename = vi.fn(async () => undefined);
+const setCrossDomain = vi.fn(async () => undefined);
+const setNamedFilter = vi.fn();
+const parseFilterString = vi.fn(async () => null);
+let savedFilters: SavedFilter[] = [];
+
+vi.mock("@olenbetong/appframe-react", async (importOriginal) => ({
+	...(await importOriginal<Record<string, unknown>>()),
+	setNamedFilter: (...args: unknown[]) => setNamedFilter(...args),
+	useSavedFilters: () => ({
+		filters: savedFilters,
+		mine: savedFilters.filter((filter) => filter.createdByUser),
+		shared: savedFilters.filter((filter) => !filter.createdByUser),
+		loading: false,
+		error: null,
+		refresh: vi.fn(),
+		save,
+		rename,
+		remove,
+		setCrossDomain,
+	}),
+	useFilterConversion: () => ({
+		filterString: "[PersonID] Like '%a%'",
+		isConverting: false,
+		error: null,
+		parseFilterString,
+	}),
+}));
+
+const { FilterBuilder } = await import("./FilterBuilder.js");
+
+const FIELDS: FieldMetadata[] = [
+	{ name: "PersonID", caption: "Person ID", type: "string", nullable: true },
+	{ name: "Age", caption: "Age", type: "number" },
+];
+
+function savedFilter(overrides: Partial<SavedFilter> & Pick<SavedFilter, "filterId" | "name">): SavedFilter {
+	return {
+		primKey: `pk-${overrides.filterId}`,
+		criteria: "[PersonID] Like '%a%'",
+		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,
+	};
+}
+
+function renderBuilder(props: Record<string, unknown> = {}) {
+	return render(<FilterBuilder fields={FIELDS} viewName="aviw_Test_View" variant="inline" {...props} />);
+}
+
+describe("FilterBuilder", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		savedFilters = [savedFilter({ filterId: 1, name: "Agder" })];
+	});
+
+	it("renders the saved filters beside the editor", () => {
+		renderBuilder();
+
+		expect(screen.getByRole("button", { name: "New Filter" })).toBeTruthy();
+		expect(screen.getByRole("button", { name: "Agder" })).toBeTruthy();
+		expect(screen.getByLabelText("Add condition")).toBeTruthy();
+	});
+
+	it("disables save and share until a filter is selected", () => {
+		renderBuilder();
+
+		expect(screen.getByRole("button", { name: "Sharing..." }).hasAttribute("disabled")).toBe(true);
+		expect(screen.getByRole("button", { name: "Save" }).hasAttribute("disabled")).toBe(true);
+	});
+
+	it("disables save as while the filter is empty", () => {
+		renderBuilder();
+
+		expect(screen.getByRole("button", { name: "Save as" }).hasAttribute("disabled")).toBe(true);
+	});
+
+	it("parses the criteria of a selected filter back into the tree", async () => {
+		renderBuilder();
+		await userEvent.click(screen.getByRole("button", { name: "Agder" }));
+
+		expect(parseFilterString).toHaveBeenCalledWith("[PersonID] Like '%a%'");
+	});
+
+	it("applies the pruned filter to the data object", async () => {
+		let dataObject = {} as never;
+		renderBuilder({
+			dataObject,
+			defaultValue: {
+				type: "group",
+				mode: "and",
+				items: [{ type: "expression", column: "PersonID", operator: "like", value: "a", valueType: "string" }],
+			},
+		});
+
+		await userEvent.click(screen.getByRole("button", { name: "OK" }));
+
+		expect(setNamedFilter).toHaveBeenCalledWith(
+			dataObject,
+			"filterBuilder",
+			expect.objectContaining({ type: "group" }),
+			{ type: "filterObject" },
+		);
+	});
+
+	it("reports an empty filter as null", async () => {
+		let onApply = vi.fn();
+		renderBuilder({ onApply });
+
+		await userEvent.click(screen.getByRole("button", { name: "OK" }));
+
+		expect(onApply).toHaveBeenCalledWith(null, "[PersonID] Like '%a%'");
+	});
+
+	it("saves under a new name and replaces a filter that already uses it", async () => {
+		renderBuilder({
+			defaultValue: {
+				type: "group",
+				mode: "and",
+				items: [{ type: "expression", column: "PersonID", operator: "like", value: "a", valueType: "string" }],
+			},
+		});
+
+		await userEvent.click(screen.getByRole("button", { name: "Save as" }));
+		await userEvent.type(screen.getByRole("textbox", { name: "Filter name" }), "Agder");
+		await userEvent.click(screen.getByRole("button", { name: "Replace" }));
+
+		await waitFor(() =>
+			expect(save).toHaveBeenCalledWith(
+				expect.objectContaining({ filterId: 1, name: "Agder", criteria: "[PersonID] Like '%a%'" }),
+			),
+		);
+	});
+});