@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/filter/FilterShareDialog.tsx

@@ -1,201 +1,201 @@
-import { Button, Dialog, Heading, Select, Table } from "@digdir/designsystemet-react";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-import { type FilterPermission, useDebounce, useFilterPermissions } from "@olenbetong/appframe-react";
-import { Combobox } from "../autocomplete/index.js";
-import { PersonGroupIcon, PersonIcon, TrashIcon } from "@navikt/aksel-icons";
-import { useEffect, useState } from "react";
-
-import "./FilterShareDialog.css";
-
-type PermissionCandidate = {
-	primKey: string;
-	name: string;
-	login: string;
-	type: string;
-};
-
-export type FilterShareDialogProps = {
-	open: boolean;
-	onClose: () => void;
-	/** `FilterID` of the filter to manage sharing for. */
-	filterId: number | null;
-	/** Shown in the dialog heading. */
-	filterName?: string;
-	"data-size"?: "sm" | "md" | "lg";
-};
-
-/**
- * Manages who a saved filter is shared with.
- *
- * Only a manager of the filter can load or change the grants — for anyone else
- * `sstp_WebSiteCMS_FilterBuilder_GetPermissions` returns nothing, so the list
- * simply stays empty.
- *
- * @example
- * ```jsx
- * <FilterShareDialog open={sharing} filterId={selected} filterName={name} onClose={() => setSharing(false)} />
- * ```
- */
-export function FilterShareDialog({
-	open,
-	onClose,
-	filterId,
-	filterName,
-	"data-size": size = "sm",
-}: FilterShareDialogProps) {
-	let { permissions, loading, error, setPermission, removePermission, search } = useFilterPermissions(
-		open ? filterId : null,
-	);
-	let [candidates, setCandidates] = useState<PermissionCandidate[]>([]);
-	let [searchText, setSearchText] = useState("");
-	let query = useDebounce(searchText, 300);
-
-	useEffect(() => {
-		if (!open || query.length < 2) {
-			setCandidates([]);
-
-			return;
-		}
-
-		let isCancelled = false;
-		search(query)
-			.then((results) => {
-				if (isCancelled) return;
-				// Anyone who already has a grant is not a candidate for a new one.
-				let granted = new Set(permissions.map((permission) => permission.groupRef));
-				setCandidates(results.filter((result) => !granted.has(result.primKey)));
-			})
-			.catch(() => {
-				if (!isCancelled) setCandidates([]);
-			});
-
-		return () => {
-			isCancelled = true;
-		};
-	}, [open, query, search, permissions]);
-
-	function handleAdd(candidate: PermissionCandidate | null) {
-		if (!candidate) return;
-
-		setSearchText("");
-		void setPermission(candidate.primKey, "Reader");
-	}
-
-	return (
-		<Dialog open={open} closedby="any" data-size={size} onClose={onClose} className="ObFilterShareDialog-root">
-			<Dialog.Block>
-				<Heading level={2} data-size="xs">
-					{filterName ? getLocalizedString("Sharing - {0}").replace("{0}", filterName) : getLocalizedString("Sharing")}
-				</Heading>
-			</Dialog.Block>
-			<Dialog.Block>
-				<Combobox<PermissionCandidate>
-					options={candidates}
-					value={null}
-					inputValue={searchText}
-					loading={loading}
-					data-size={size}
-					label={getLocalizedString("Add user or group")}
-					placeholder={getLocalizedString("Search...")}
-					getOptionLabel={(option) => option.name}
-					getOptionKey={(option) => option.primKey}
-					// The procedure searches both name and login, so filtering again on
-					// the label would drop everything matched by login.
-					filterOptions={(options) => [...options]}
-					noOptionsText={query.length < 2 ? getLocalizedString("Type to search") : getLocalizedString("No matches")}
-					renderOption={(option) => (
-						<span className="ObFilterShareDialog-candidate">
-							{option.type === "User" ? <PersonIcon aria-hidden /> : <PersonGroupIcon aria-hidden />}
-							<span>{option.name}</span>
-							<span className="ObFilterShareDialog-candidateLogin">{option.login}</span>
-						</span>
-					)}
-					// The picker never keeps a selection; picking an option adds a grant.
-					onInputChange={(_event, value) => setSearchText(value)}
-					onChange={(_event, value) => handleAdd(value)}
-				/>
-			</Dialog.Block>
-			<Dialog.Block>
-				{error && <p className="ObFilterShareDialog-error">{String(error.message ?? error)}</p>}
-				<Table data-size={size} className="ObFilterShareDialog-table">
-					<Table.Head>
-						<Table.Row>
-							<Table.HeaderCell>{getLocalizedString("Name")}</Table.HeaderCell>
-							<Table.HeaderCell>{getLocalizedString("Login")}</Table.HeaderCell>
-							<Table.HeaderCell>{getLocalizedString("Access")}</Table.HeaderCell>
-							<Table.HeaderCell />
-						</Table.Row>
-					</Table.Head>
-					<Table.Body>
-						{permissions.length === 0 && (
-							<Table.Row>
-								<Table.Cell colSpan={4}>
-									{loading ? getLocalizedString("Loading...") : getLocalizedString("Not shared with anyone")}
-								</Table.Cell>
-							</Table.Row>
-						)}
-						{permissions.map((permission) => (
-							<PermissionRow
-								key={permission.primKey}
-								permission={permission}
-								size={size}
-								onChangeAccess={(accessLevel) => void setPermission(permission.groupRef, accessLevel)}
-								onRemove={() => void removePermission(permission.groupRef)}
-							/>
-						))}
-					</Table.Body>
-				</Table>
-			</Dialog.Block>
-			<Dialog.Block>
-				<Button type="button" variant="secondary" data-size={size} onClick={onClose}>
-					{getLocalizedString("Close")}
-				</Button>
-			</Dialog.Block>
-		</Dialog>
-	);
-}
-
-type PermissionRowProps = {
-	permission: FilterPermission;
-	size: "sm" | "md" | "lg";
-	onChangeAccess: (accessLevel: "Reader" | "Manager") => void;
-	onRemove: () => void;
-};
-
-function PermissionRow({ permission, size, onChangeAccess, onRemove }: PermissionRowProps) {
-	return (
-		<Table.Row>
-			<Table.Cell>
-				<span className="ObFilterShareDialog-candidate">
-					{permission.type === "User" ? <PersonIcon aria-hidden /> : <PersonGroupIcon aria-hidden />}
-					{permission.name}
-				</span>
-			</Table.Cell>
-			<Table.Cell>{permission.login}</Table.Cell>
-			<Table.Cell>
-				<Select
-					data-size={size}
-					value={permission.accessLevel}
-					aria-label={getLocalizedString("Access for {0}").replace("{0}", permission.name)}
-					onChange={(event) => onChangeAccess(event.currentTarget.value as "Reader" | "Manager")}
-				>
-					<Select.Option value="Reader">{getLocalizedString("Reader")}</Select.Option>
-					<Select.Option value="Manager">{getLocalizedString("Manager")}</Select.Option>
-				</Select>
-			</Table.Cell>
-			<Table.Cell>
-				<Button
-					type="button"
-					variant="tertiary"
-					data-color="danger"
-					data-size={size}
-					icon
-					aria-label={getLocalizedString("Remove access for {0}").replace("{0}", permission.name)}
-					onClick={onRemove}
-				>
-					<TrashIcon aria-hidden />
-				</Button>
-			</Table.Cell>
-		</Table.Row>
-	);
-}
+import { Button, Dialog, Heading, Select, Table } from "@digdir/designsystemet-react";
+import { type FilterPermission, useDebounce, useFilterPermissions } from "@olenbetong/appframe-react";
+import { Combobox } from "../autocomplete/index.js";
+import { PersonGroupIcon, PersonIcon, TrashIcon } from "@navikt/aksel-icons";
+import { useEffect, useState } from "react";
+
+import "./FilterShareDialog.css";
+import { getLocalizedString } from "../i18n.js";
+
+type PermissionCandidate = {
+	primKey: string;
+	name: string;
+	login: string;
+	type: string;
+};
+
+export type FilterShareDialogProps = {
+	open: boolean;
+	onClose: () => void;
+	/** `FilterID` of the filter to manage sharing for. */
+	filterId: number | null;
+	/** Shown in the dialog heading. */
+	filterName?: string;
+	"data-size"?: "sm" | "md" | "lg";
+};
+
+/**
+ * Manages who a saved filter is shared with.
+ *
+ * Only a manager of the filter can load or change the grants — for anyone else
+ * `sstp_WebSiteCMS_FilterBuilder_GetPermissions` returns nothing, so the list
+ * simply stays empty.
+ *
+ * @example
+ * ```jsx
+ * <FilterShareDialog open={sharing} filterId={selected} filterName={name} onClose={() => setSharing(false)} />
+ * ```
+ */
+export function FilterShareDialog({
+	open,
+	onClose,
+	filterId,
+	filterName,
+	"data-size": size = "sm",
+}: FilterShareDialogProps) {
+	let { permissions, loading, error, setPermission, removePermission, search } = useFilterPermissions(
+		open ? filterId : null,
+	);
+	let [candidates, setCandidates] = useState<PermissionCandidate[]>([]);
+	let [searchText, setSearchText] = useState("");
+	let query = useDebounce(searchText, 300);
+
+	useEffect(() => {
+		if (!open || query.length < 2) {
+			setCandidates([]);
+
+			return;
+		}
+
+		let isCancelled = false;
+		search(query)
+			.then((results) => {
+				if (isCancelled) return;
+				// Anyone who already has a grant is not a candidate for a new one.
+				let granted = new Set(permissions.map((permission) => permission.groupRef));
+				setCandidates(results.filter((result) => !granted.has(result.primKey)));
+			})
+			.catch(() => {
+				if (!isCancelled) setCandidates([]);
+			});
+
+		return () => {
+			isCancelled = true;
+		};
+	}, [open, query, search, permissions]);
+
+	function handleAdd(candidate: PermissionCandidate | null) {
+		if (!candidate) return;
+
+		setSearchText("");
+		void setPermission(candidate.primKey, "Reader");
+	}
+
+	return (
+		<Dialog open={open} closedby="any" data-size={size} onClose={onClose} className="ObFilterShareDialog-root">
+			<Dialog.Block>
+				<Heading level={2} data-size="xs">
+					{filterName ? getLocalizedString("Sharing - {0}").replace("{0}", filterName) : getLocalizedString("Sharing")}
+				</Heading>
+			</Dialog.Block>
+			<Dialog.Block>
+				<Combobox<PermissionCandidate>
+					options={candidates}
+					value={null}
+					inputValue={searchText}
+					loading={loading}
+					data-size={size}
+					label={getLocalizedString("Add user or group")}
+					placeholder={getLocalizedString("Search...")}
+					getOptionLabel={(option) => option.name}
+					getOptionKey={(option) => option.primKey}
+					// The procedure searches both name and login, so filtering again on
+					// the label would drop everything matched by login.
+					filterOptions={(options) => [...options]}
+					noOptionsText={query.length < 2 ? getLocalizedString("Type to search") : getLocalizedString("No matches")}
+					renderOption={(option) => (
+						<span className="ObFilterShareDialog-candidate">
+							{option.type === "User" ? <PersonIcon aria-hidden /> : <PersonGroupIcon aria-hidden />}
+							<span>{option.name}</span>
+							<span className="ObFilterShareDialog-candidateLogin">{option.login}</span>
+						</span>
+					)}
+					// The picker never keeps a selection; picking an option adds a grant.
+					onInputChange={(_event, value) => setSearchText(value)}
+					onChange={(_event, value) => handleAdd(value)}
+				/>
+			</Dialog.Block>
+			<Dialog.Block>
+				{error && <p className="ObFilterShareDialog-error">{String(error.message ?? error)}</p>}
+				<Table data-size={size} className="ObFilterShareDialog-table">
+					<Table.Head>
+						<Table.Row>
+							<Table.HeaderCell>{getLocalizedString("Name")}</Table.HeaderCell>
+							<Table.HeaderCell>{getLocalizedString("Login")}</Table.HeaderCell>
+							<Table.HeaderCell>{getLocalizedString("Access")}</Table.HeaderCell>
+							<Table.HeaderCell />
+						</Table.Row>
+					</Table.Head>
+					<Table.Body>
+						{permissions.length === 0 && (
+							<Table.Row>
+								<Table.Cell colSpan={4}>
+									{loading ? getLocalizedString("Loading...") : getLocalizedString("Not shared with anyone")}
+								</Table.Cell>
+							</Table.Row>
+						)}
+						{permissions.map((permission) => (
+							<PermissionRow
+								key={permission.primKey}
+								permission={permission}
+								size={size}
+								onChangeAccess={(accessLevel) => void setPermission(permission.groupRef, accessLevel)}
+								onRemove={() => void removePermission(permission.groupRef)}
+							/>
+						))}
+					</Table.Body>
+				</Table>
+			</Dialog.Block>
+			<Dialog.Block>
+				<Button type="button" variant="secondary" data-size={size} onClick={onClose}>
+					{getLocalizedString("Close")}
+				</Button>
+			</Dialog.Block>
+		</Dialog>
+	);
+}
+
+type PermissionRowProps = {
+	permission: FilterPermission;
+	size: "sm" | "md" | "lg";
+	onChangeAccess: (accessLevel: "Reader" | "Manager") => void;
+	onRemove: () => void;
+};
+
+function PermissionRow({ permission, size, onChangeAccess, onRemove }: PermissionRowProps) {
+	return (
+		<Table.Row>
+			<Table.Cell>
+				<span className="ObFilterShareDialog-candidate">
+					{permission.type === "User" ? <PersonIcon aria-hidden /> : <PersonGroupIcon aria-hidden />}
+					{permission.name}
+				</span>
+			</Table.Cell>
+			<Table.Cell>{permission.login}</Table.Cell>
+			<Table.Cell>
+				<Select
+					data-size={size}
+					value={permission.accessLevel}
+					aria-label={getLocalizedString("Access for {0}").replace("{0}", permission.name)}
+					onChange={(event) => onChangeAccess(event.currentTarget.value as "Reader" | "Manager")}
+				>
+					<Select.Option value="Reader">{getLocalizedString("Reader")}</Select.Option>
+					<Select.Option value="Manager">{getLocalizedString("Manager")}</Select.Option>
+				</Select>
+			</Table.Cell>
+			<Table.Cell>
+				<Button
+					type="button"
+					variant="tertiary"
+					data-color="danger"
+					data-size={size}
+					icon
+					aria-label={getLocalizedString("Remove access for {0}").replace("{0}", permission.name)}
+					onClick={onRemove}
+				>
+					<TrashIcon aria-hidden />
+				</Button>
+			</Table.Cell>
+		</Table.Row>
+	);
+}

package/src/filter/FilterStringField.tsx

@@ -1,77 +1,78 @@
-import { Textfield, ValidationMessage } from "@digdir/designsystemet-react";
-import { type FilterTree, getLocalizedString, toFilterTree } from "@olenbetong/appframe-core";
-import { useFilterConversion } from "@olenbetong/appframe-react";
-import { useEffect, useState } from "react";
-
-import type { FilterEditorSize } from "./types.js";
-
-export type FilterStringFieldProps = {
-	filter: FilterTree;
-	onChange: (filter: FilterTree) => void;
-	viewName?: string;
-	readOnly?: boolean;
-	"data-size"?: FilterEditorSize;
-};
-
-/**
- * Two-way filter string editor. The tree is the source of truth: it is
- * converted to a string whenever it changes. Editing the string and leaving the
- * field parses it back into a tree.
- */
-export function FilterStringField({
-	filter,
-	onChange,
-	viewName,
-	readOnly,
-	"data-size": size = "sm",
-}: FilterStringFieldProps) {
-	let { filterString, isConverting, error, warning, parseFilterString } = useFilterConversion(filter, { viewName });
-	let [draft, setDraft] = useState<string | null>(null);
-	let [parseError, setParseError] = useState<string | null>(null);
-
-	// The tree changed underneath us, so any half-typed string is stale.
-	useEffect(() => {
-		setDraft(null);
-		setParseError(null);
-	}, [filter]);
-
-	async function commit() {
-		if (draft === null || draft === filterString) {
-			setDraft(null);
-			return;
-		}
-
-		let parsed = await parseFilterString(draft);
-
-		if (parsed) {
-			setDraft(null);
-			setParseError(null);
-			onChange(toFilterTree(parsed));
-		} else {
-			setParseError(getLocalizedString("The filter could not be parsed"));
-		}
-	}
-
-	let message = parseError ?? error?.message ?? warning;
-
-	return (
-		<div className="ObFilterEditor-filterString">
-			<Textfield
-				multiline
-				rows={3}
-				data-size={size}
-				readOnly={readOnly}
-				label={
-					<span className="ObFilterEditor-filterStringLabel">
-						{getLocalizedString("Filter string")}
-						{isConverting && <span className="ObFilterEditor-hint">{getLocalizedString("Converting…")}</span>}
-					</span>
-				}
-				value={draft ?? filterString}
-				onChange={(event) => setDraft(event.target.value)}
-				onBlur={commit}
-			/>
-			{message && <ValidationMessage data-color={parseError ? "danger" : "warning"}>{message}</ValidationMessage>}
-		</div>
-	);
-}
+import { Textfield, ValidationMessage } from "@digdir/designsystemet-react";
+import { type FilterTree, toFilterTree } from "@olenbetong/appframe-core";
+import { useFilterConversion } from "@olenbetong/appframe-react";
+import { useEffect, useState } from "react";
+
+import type { FilterEditorSize } from "./types.js";
+import { getLocalizedString } from "../i18n.js";
+
+export type FilterStringFieldProps = {
+	filter: FilterTree;
+	onChange: (filter: FilterTree) => void;
+	viewName?: string;
+	readOnly?: boolean;
+	"data-size"?: FilterEditorSize;
+};
+
+/**
+ * Two-way filter string editor. The tree is the source of truth: it is
+ * converted to a string whenever it changes. Editing the string and leaving the
+ * field parses it back into a tree.
+ */
+export function FilterStringField({
+	filter,
+	onChange,
+	viewName,
+	readOnly,
+	"data-size": size = "sm",
+}: FilterStringFieldProps) {
+	let { filterString, isConverting, error, warning, parseFilterString } = useFilterConversion(filter, { viewName });
+	let [draft, setDraft] = useState<string | null>(null);
+	let [parseError, setParseError] = useState<string | null>(null);
+
+	// The tree changed underneath us, so any half-typed string is stale.
+	useEffect(() => {
+		setDraft(null);
+		setParseError(null);
+	}, [filter]);
+
+	async function commit() {
+		if (draft === null || draft === filterString) {
+			setDraft(null);
+			return;
+		}
+
+		let parsed = await parseFilterString(draft);
+
+		if (parsed) {
+			setDraft(null);
+			setParseError(null);
+			onChange(toFilterTree(parsed));
+		} else {
+			setParseError(getLocalizedString("The filter could not be parsed"));
+		}
+	}
+
+	let message = parseError ?? error?.message ?? warning;
+
+	return (
+		<div className="ObFilterEditor-filterString">
+			<Textfield
+				multiline
+				rows={3}
+				data-size={size}
+				readOnly={readOnly}
+				label={
+					<span className="ObFilterEditor-filterStringLabel">
+						{getLocalizedString("Filter string")}
+						{isConverting && <span className="ObFilterEditor-hint">{getLocalizedString("Converting…")}</span>}
+					</span>
+				}
+				value={draft ?? filterString}
+				onChange={(event) => setDraft(event.target.value)}
+				onBlur={commit}
+			/>
+			{message && <ValidationMessage data-color={parseError ? "danger" : "warning"}>{message}</ValidationMessage>}
+		</div>
+	);
+}