@rebasepro/cms 0.17.3 → 0.18.0

package/src/components/SelectableTable/filters/FilterFieldBinding.tsx

@@ -1,190 +0,0 @@
-import React, { Suspense } from "react";
-import {
-    ArrayProperty,
-    Property,
-    ReferenceProperty,
-    RelationProperty,
-    WhereFilterOp
-} from "@rebasepro/types";
-import {
-    FilterFieldBindingProps
-} from "@rebasepro/cms-types";
-import { enumToObjectEntries } from "@rebasepro/common";
-import { resolveFilterOperators } from "@rebasepro/app";
-import { useCollectionScope, useComponentOverride, useResolvedComponent } from "@rebasepro/app";
-import { StringNumberFilterField } from "./StringNumberFilterField";
-import { BooleanFilterField } from "./BooleanFilterField";
-import { DateTimeFilterField } from "./DateTimeFilterField";
-import { ReferenceFilterField } from "./ReferenceFilterField";
-import { RelationFilterField } from "./RelationFilterField";
-
-export interface FilterFieldBindingInput {
-    /** Key of the property being filtered (the column id). */
-    propertyKey: string;
-    /** The raw property — array properties are unwrapped internally. */
-    property: Property;
-    /**
-     * Engine backing the collection (`collection.engine`). Drives which
-     * operators the engine can execute. Usually omitted — it is read from
-     * the surrounding {@link CollectionScopeProvider}; pass it explicitly
-     * only when rendering outside any collection scope.
-     */
-    engine?: string;
-    value?: [WhereFilterOp, unknown];
-    setValue: (value?: [WhereFilterOp, unknown]) => void;
-    /** Coordination flags for fields that open their own dialogs. */
-    hidden?: boolean;
-    setHidden?: (hidden: boolean) => void;
-}
-
-/**
- * The single entry point for rendering a collection filter field.
- * Used by both the table header filters ({@link SelectableTable}) and the
- * Filters dialog.
- *
- * Resolution order:
- * 1. `property.admin.Filter` — per-property replacement (rendered even when the
- *    resolved operator list is empty; the component owns filterability).
- * 2. `components["Collection.FilterField"]` — collection-level or app-level
- *    override (wrap mode supported via `OriginalComponent`).
- * 3. Built-in field dispatched by property type.
- *
- * The operators handed to the field are the intersection of the engine's
- * capabilities, the property-type defaults, and `property.admin.filterOperators`
- * (see `resolveFilterOperators`). When that intersection is empty and no
- * per-property `Filter` is set, nothing is rendered.
- *
- * @group Components
- */
-export function FilterFieldBinding({
-    propertyKey,
-    property,
-    engine,
-    value,
-    setValue,
-    hidden,
-    setHidden
-}: FilterFieldBindingInput): React.ReactNode {
-
-    const isArray = property.type === "array";
-    const ofVal = isArray ? (property as ArrayProperty).of : undefined;
-    const baseProperty: Property | undefined = isArray
-        ? (Array.isArray(ofVal) ? ofVal[0] : ofVal) as Property | undefined
-        : property;
-
-    // Hooks must run unconditionally — before any early return.
-    const scopeCollection = useCollectionScope();
-    const ResolvedFilterField = useComponentOverride<FilterFieldBindingProps>("Collection.FilterField", DefaultFilterField);
-    const PropertyFilter = useResolvedComponent<FilterFieldBindingProps>(baseProperty?.admin?.Filter);
-
-    if (!baseProperty) return null;
-
-    const operators = resolveFilterOperators({
-        property: baseProperty,
-        isArray,
-        engine: engine ?? scopeCollection?.engine
-    });
-
-    const bindingProps: FilterFieldBindingProps = {
-        propertyKey,
-        property: baseProperty,
-        isArray,
-        operators,
-        value,
-        setValue,
-        title: property.name,
-        hidden,
-        setHidden
-    };
-
-    // 1. Per-property replacement — always rendered, the dev owns filterability.
-    if (PropertyFilter) {
-        return (
-            <Suspense fallback={null}>
-                <PropertyFilter {...bindingProps}/>
-            </Suspense>
-        );
-    }
-
-    // 2/3. Override or built-in — only when the property is filterable here.
-    if (operators.length === 0) return null;
-
-    return <ResolvedFilterField {...bindingProps}/>;
-}
-
-/**
- * Built-in filter field dispatch by property type. This is the
- * `OriginalComponent` received by `"Collection.FilterField"` overrides in
- * wrap mode.
- */
-function DefaultFilterField({
-    propertyKey,
-    property,
-    isArray,
-    operators,
-    value,
-    setValue,
-    title,
-    hidden,
-    setHidden
-}: FilterFieldBindingProps): React.ReactNode {
-
-    if (property.type === "reference") {
-        const referenceProperty = property as ReferenceProperty;
-        return <ReferenceFilterField value={value}
-            setValue={setValue}
-            name={propertyKey}
-            isArray={isArray}
-            operators={operators}
-            path={referenceProperty.path}
-            title={title}
-            includeId={referenceProperty.admin?.includeId}
-            previewProperties={referenceProperty.admin?.previewProperties}
-            hidden={hidden ?? false}
-            setHidden={setHidden ?? (() => undefined)}/>;
-    }
-
-    if (property.type === "relation") {
-        const relation = (property as RelationProperty).relation;
-        if (!relation) return null;
-        return <RelationFilterField value={value as never}
-            setValue={setValue}
-            name={propertyKey}
-            operators={operators}
-            relation={relation}
-            hidden={hidden ?? false}
-            setHidden={setHidden ?? (() => undefined)}/>;
-    }
-
-    if (property.type === "number" || property.type === "string") {
-        const enumValues = property.enum ? enumToObjectEntries(property.enum) : undefined;
-        return <StringNumberFilterField value={value}
-            setValue={setValue}
-            name={propertyKey}
-            type={property.type}
-            isArray={isArray}
-            operators={operators}
-            enumValues={enumValues}
-            title={title}/>;
-    }
-
-    if (property.type === "boolean") {
-        return <BooleanFilterField value={value}
-            setValue={setValue}
-            name={propertyKey}
-            operators={operators}
-            title={title}/>;
-    }
-
-    if (property.type === "date") {
-        return <DateTimeFilterField value={value}
-            setValue={setValue}
-            name={propertyKey}
-            mode={property.mode}
-            isArray={isArray}
-            operators={operators}
-            title={title}/>;
-    }
-
-    return null;
-}

package/src/components/SelectableTable/filters/ReferenceFilterField.tsx

@@ -1,250 +0,0 @@
-import { useSelectionDialog } from "../../../hooks/useSelectionDialog";
-
-import React, { useId, useMemo, useState } from "react";
-import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
-import { Entity, EntityReference } from "@rebasepro/types";
-import { ReferencePreview } from "../../../preview";
-import { Button, Checkbox, Label, Select, SelectItem } from "@rebasepro/ui";
-import { getReferenceFrom } from "@rebasepro/common";
-import { useTranslation } from "@rebasepro/app";
-import { useCollectionRegistryController } from "../../../hooks/navigation/contexts/CollectionRegistryContext";
-import type { AdminCollection } from "@rebasepro/cms-types";
-import { isNullFilterOperator, nullFilterOperatorFor, valueOperatorFor } from "./null_filter";
-
-interface ReferenceFilterFieldProps {
-    name: string,
-    value?: [op: VirtualTableWhereFilterOp, fieldValue: unknown];
-    setValue: (filterValue?: [VirtualTableWhereFilterOp, unknown]) => void;
-    isArray?: boolean;
-    path?: string;
-    title?: string;
-    includeId?: boolean;
-    previewProperties?: string[];
-    hidden: boolean;
-    setHidden: (hidden: boolean) => void;
-    /**
-     * Restrict the offered operators (already resolved against engine
-     * capabilities and property config). When omitted, all operators this
-     * field can render are offered.
-     */
-    operators?: readonly VirtualTableWhereFilterOp[];
-}
-
-const operationLabels = {
-    "==": "==",
-    "!=": "!=",
-    ">": ">",
-    "<": "<",
-    ">=": ">=",
-    "<=": "<=",
-    in: "In",
-    "not-in": "Not in",
-    "array-contains": "Contains",
-    "array-contains-any": "Contains Any",
-    "is-null": "Is null",
-    "is-not-null": "Is not null"
-};
-
-const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
-
-export function ReferenceFilterField({
-    value,
-    setValue,
-    isArray,
-    path,
-    includeId = true,
-    previewProperties,
-    setHidden,
-    operators
-}: ReferenceFilterFieldProps) {
-    const { t } = useTranslation();
-
-    let possibleOperations: (keyof typeof operationLabels)[] = isArray
-        ? ["array-contains"]
-        : ["==", "!=", ">", "<", ">=", "<="];
-
-    if (isArray) {
-        possibleOperations.push("array-contains-any");
-    } else {
-        possibleOperations.push("in", "not-in");
-    }
-
-    // The null checks take no operand, so they apply either way.
-    possibleOperations.push("is-null", "is-not-null");
-
-    if (operators) {
-        possibleOperations = possibleOperations.filter(op => (operators as readonly string[]).includes(op));
-    }
-
-    const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
-    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
-    const [internalValue, setInternalValue] = useState<EntityReference | EntityReference[] | undefined | null>(fieldValue as EntityReference | EntityReference[] | undefined | null);
-
-    const selectedEntityIds = internalValue
-        ? (Array.isArray(internalValue) ? internalValue.map((ref) => {
-            if (!(ref?.isEntityReference && ref?.isEntityReference())) {
-                return null;
-            }
-            return ref.id;
-        }).filter(Boolean) as string[] : [internalValue.id])
-        : [];
-
-    function updateFilter(op: VirtualTableWhereFilterOp, val?: EntityReference | EntityReference[] | null) {
-
-        const prevOpIsArray = multipleSelectOperations.includes(operation);
-        const newOpIsArray = multipleSelectOperations.includes(op);
-        let newValue = val;
-        if (prevOpIsArray !== newOpIsArray) {
-            newValue = newOpIsArray
-                ? (newValue && !Array.isArray(newValue) && newValue.isEntityReference?.() ? [newValue] : [])
-                : undefined;
-        }
-
-        setOperation(op);
-        setInternalValue(newValue);
-
-        // A null check takes no operand, so it is complete on its own — the
-        // value gate below would otherwise clear the filter the moment one is
-        // chosen from the dropdown, where there is no value to accompany it.
-        if (isNullFilterOperator(op)) {
-            setValue([op, null]);
-            return;
-        }
-
-        const hasNewValue = newValue !== null && Array.isArray(newValue)
-            ? newValue.length > 0
-            : newValue !== undefined;
-        if (op && hasNewValue) {
-            setValue(
-                [op, newValue]
-            );
-        } else {
-            setValue(
-                undefined
-            );
-        }
-    }
-
-    const collectionRegistryController = useCollectionRegistryController();
-    const collection: AdminCollection | undefined = useMemo(() => {
-        return path ? collectionRegistryController.getCollection(path) : undefined;
-    }, [path]);
-
-    const onSingleEntitySelected = (entity: Entity<Record<string, unknown>>) => {
-        updateFilter(operation, getReferenceFrom(entity));
-    };
-
-    const onMultipleEntitiesSelected = (entities: Entity<Record<string, unknown>>[]) => {
-        updateFilter(operation, entities.map(e => getReferenceFrom(e)));
-    };
-
-    const multiple = multipleSelectOperations.includes(operation);
-    const nullFiltered = isNullFilterOperator(operation);
-
-    // The filters dialog renders every filterable property at once, and this
-    // id was the literal string "null-filter" — so clicking any label toggled
-    // whichever checkbox the document matched first, never the one clicked.
-    const nullFilterId = useId();
-
-    const referenceDialogController = useSelectionDialog({
-        multiselect: multiple,
-        path,
-        collection,
-        onSingleEntitySelected,
-        onMultipleEntitiesSelected,
-        selectedEntityIds,
-        onClose: () => {
-            setHidden(false);
-        }
-    }
-    );
-
-    const doOpenDialog = () => {
-        setHidden(true);
-        referenceDialogController.open();
-    };
-
-    const buildEntry = (reference: EntityReference) => {
-        return (
-            <ReferencePreview
-                disabled={!path}
-                previewProperties={previewProperties}
-                size={"medium"}
-                onClick={doOpenDialog}
-                reference={reference}
-                hover={true}
-                includeId={includeId}
-                includeEntityLink={false}
-            />
-        );
-    };
-
-    // All renderable operators were filtered out (engine/property narrowing).
-    if (possibleOperations.length === 0) return null;
-
-    return (
-
-        <div className="flex w-full flex-row">
-            <div className="w-[100px]">
-                <Select value={operation}
-                    size={"medium"}
-                    fullWidth={true}
-                    onValueChange={(value) => {
-                        updateFilter(value as VirtualTableWhereFilterOp, internalValue);
-                    }}
-                    renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}>
-                    {possibleOperations.map((op) => (
-                        <SelectItem key={op} value={op}>
-                            {operationLabels[op]}
-                        </SelectItem>
-                    ))}
-                </Select>
-            </div>
-
-            <div className="grow ml-2 h-full gap-2 flex flex-col">
-
-                {internalValue && Array.isArray(internalValue) && <div>
-                    {internalValue.map((ref, index) => buildEntry(ref))}
-                </div>}
-
-                {internalValue && !Array.isArray(internalValue) && <div>
-                    {buildEntry(internalValue)}
-                </div>}
-
-                {(!internalValue || (Array.isArray(internalValue) && internalValue.length === 0)) &&
-                    <Button onClick={doOpenDialog}
-
-                        size={"medium"}
-                        className="h-full w-full">
-                        {multiple ? t("select_references") : t("select_reference")}
-                    </Button>
-                }
-
-                {/*
-                  * Switches the operator to the matching null check rather
-                  * than pairing a null value with whatever operator is
-                  * selected. Only the operator travels to the driver, and a
-                  * null *operand* means different things to different ones —
-                  * Mongo rejects `$in: null` outright. See
-                  * `nullFilterOperatorFor`.
-                  */}
-                {!isArray && <Label
-                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 bg-surface-50 dark:bg-surface-900 hover:bg-surface-100 dark:hover:bg-surface-800"
-                    htmlFor={nullFilterId}
-                >
-                    <Checkbox id={nullFilterId}
-                        checked={nullFiltered}
-                        size={"small"}
-                        onCheckedChange={() => {
-                            if (!nullFiltered) updateFilter(nullFilterOperatorFor(operation), null);
-                            else updateFilter(valueOperatorFor(operation, possibleOperations) ?? operation, undefined);
-                        }}/>
-                    {t("filter_for_null_values")}
-                </Label>}
-
-            </div>
-
-        </div>
-    );
-
-}

package/src/components/SelectableTable/filters/RelationFilterField.tsx

@@ -1,238 +0,0 @@
-import React, { useId, useMemo, useState } from "react";
-import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
-import { EntityRelation, Relation } from "@rebasepro/types";
-import { Checkbox, Label, Select, SelectItem } from "@rebasepro/ui";
-import { RelationSelector } from "../../RelationSelector";
-import { isNullFilterOperator, nullFilterOperatorFor, valueOperatorFor } from "./null_filter";
-
-/** Whether an authored relation yields many rows. Derived from its kind. */
-function relationCardinality(relation: { kind?: string; cardinality?: string } | undefined): "one" | "many" | undefined {
-    if (!relation) return undefined;
-    if (relation.kind === "via") return relation.cardinality as "one" | "many" | undefined;
-    if (relation.kind === "hasMany" || relation.kind === "manyToMany") return "many";
-    if (relation.kind === "belongsTo" || relation.kind === "hasOne") return "one";
-    return relation.cardinality as "one" | "many" | undefined;
-}
-
-
-interface RelationFilterFieldProps {
-    name: string,
-    value?: [VirtualTableWhereFilterOp, EntityRelation | EntityRelation[] | null];
-    setValue: (value?: [VirtualTableWhereFilterOp, EntityRelation | EntityRelation[] | null]) => void;
-    relation: Relation; // relation config provided externally
-    hidden: boolean;
-    setHidden: (value: boolean) => void;
-    /**
-     * Restrict the offered operators (already resolved against engine
-     * capabilities and property config). When omitted, all operators this
-     * field can render are offered.
-     */
-    operators?: readonly VirtualTableWhereFilterOp[];
-}
-
-const operationLabels = {
-    "==": "==",
-    "!=": "!=",
-    ">": ">",
-    "<": "<",
-    ">=": ">=",
-    "<=": "<=",
-    in: "In",
-    "not-in": "Not in",
-    "array-contains": "Contains",
-    "array-contains-any": "Contains Any",
-    "is-null": "Is empty",
-    "is-not-null": "Is not empty"
-};
-
-const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
-
-/**
- * What this field can render, before `operators` narrows it.
- *
- * Every relation gets the whole set. The value selector is told how many
- * values to take by the *operator* — see the `multiple` prop passed below —
- * so a to-many relation can be asked `== <one tag>` as readily as
- * `in <several>`, and the question of what shape the relation stores never
- * enters into it.
- *
- * That is a change: this list used to be split by the value the selector
- * produced, because the selector took its multiplicity from the relation's
- * cardinality and so a to-many one could only ever emit a list. Every
- * single-value operator had to be withheld to keep an array from reaching
- * `==`. `ReferenceFilterField` never had the problem — it has always sized its
- * dialog from the operator — which is what made the split look like a
- * property of relations rather than a limitation of one component.
- *
- * The array operators are the exception, and belong only to a to-many link,
- * which is the only one that *is* a list. On a to-one relation the filter
- * compiles to a comparison on a scalar foreign key, and `@>` against one is a
- * type error rather than an empty result.
- */
-const RELATION_OPERATIONS: (keyof typeof operationLabels)[] =
-    ["==", "!=", ">", "<", ">=", "<=", "in", "not-in", "is-null", "is-not-null"];
-const LIST_ONLY_OPERATIONS: (keyof typeof operationLabels)[] =
-    ["array-contains", "array-contains-any"];
-
-/**
- * The operators this field will actually put on screen.
- *
- * Exported because the failure mode is silence: when the intersection of what
- * the field can render and what the engine can run comes out empty, the field
- * returns null and the filter control the table header offered opens onto
- * nothing. That is a rendering outcome no unit test of either side alone
- * catches, so the intersection itself is the thing worth pinning.
- */
-export function renderableRelationOperators(
-    relation: { kind?: string; cardinality?: string } | undefined,
-    operators?: readonly VirtualTableWhereFilterOp[]
-): (keyof typeof operationLabels)[] {
-    const possible = relationCardinality(relation) === "many"
-        ? [...RELATION_OPERATIONS, ...LIST_ONLY_OPERATIONS]
-        : RELATION_OPERATIONS;
-    if (!operators) return possible;
-    return possible.filter(op => (operators as readonly string[]).includes(op));
-}
-
-export function RelationFilterField({
-    value,
-    setValue,
-    relation,
-    name: _name,
-    hidden: _hidden,
-    setHidden: _setHidden,
-    operators
-}: RelationFilterFieldProps) {
-
-    const manyRelation = relationCardinality(relation) === "many";
-
-    // The filters dialog renders every filterable property at once, and the
-    // checkbox's id was the literal string "null-filter" — so clicking any
-    // label toggled whichever checkbox the document matched first. Harmless
-    // while one relation per table could show it; not once every relation can.
-    const nullFilterId = useId();
-
-    const possibleOperations = renderableRelationOperators(relation, operators);
-
-    const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
-    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
-    const [internalValue, setInternalValue] = useState<EntityRelation | EntityRelation[] | undefined | null>(fieldValue);
-
-    function updateFilter(op: VirtualTableWhereFilterOp, val?: EntityRelation | EntityRelation[] | null) {
-
-        const prevOpIsArray = multipleSelectOperations.includes(operation);
-        const newOpIsArray = multipleSelectOperations.includes(op);
-        let newValue = val;
-        if (prevOpIsArray !== newOpIsArray) {
-            newValue = newOpIsArray ? (newValue instanceof EntityRelation ? [newValue] : []) : undefined;
-        }
-
-        setOperation(op);
-        setInternalValue(newValue);
-
-        // A null check takes no operand, so it is complete on its own — the
-        // value gate below would otherwise clear the filter the moment one is
-        // chosen from the dropdown, where there is no value to accompany it.
-        if (isNullFilterOperator(op)) {
-            setValue([op, null]);
-            return;
-        }
-
-        const hasNewValue = newValue !== null && Array.isArray(newValue)
-            ? newValue.length > 0
-            : newValue !== undefined;
-        if (op && hasNewValue) {
-            setValue([op, newValue ?? null]);
-        } else {
-            setValue(undefined);
-        }
-    }
-
-    const multiple = multipleSelectOperations.includes(operation);
-    const nullFiltered = isNullFilterOperator(operation);
-
-    const relationSelectorValue = useMemo(() => {
-        if (internalValue === null || internalValue === undefined) return undefined;
-        if (Array.isArray(internalValue)) return internalValue.map(ref => new EntityRelation(ref.id, ref.path));
-        return new EntityRelation(internalValue.id, internalValue.path);
-    }, [internalValue]);
-
-    const handleRelationSelectorChange = (newVal?: EntityRelation | EntityRelation[] | null) => {
-        if (newVal === null) {
-            updateFilter(operation, null);
-            return;
-        }
-        if (newVal === undefined) {
-            updateFilter(operation, undefined);
-            return;
-        }
-        updateFilter(operation, newVal);
-    };
-
-    // All renderable operators were filtered out (engine/property narrowing).
-    if (possibleOperations.length === 0) return null;
-
-    return (
-        <div className="flex flex-row">
-            <div className="">
-                <Select
-                    value={operation}
-                    fullWidth={true}
-                    onValueChange={(newOp) => {
-                        updateFilter(newOp as VirtualTableWhereFilterOp, internalValue);
-                    }}
-                    renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}
-                >
-                    {possibleOperations.map((op) => (
-                        <SelectItem key={op} value={op}>
-                            {operationLabels[op]}
-                        </SelectItem>
-                    ))}
-                </Select>
-            </div>
-
-            <div className="grow ml-2 h-full gap-2 flex flex-col w-[340px]">
-                <RelationSelector
-                    relation={relation}
-                    // The operator, not the relation, decides how many values
-                    // are being asked for — `updateFilter` already coerces the
-                    // held value on the same test, so the two cannot disagree.
-                    multiple={multiple}
-                    value={relationSelectorValue}
-                    onValueChange={handleRelationSelectorChange}
-                    disabled={nullFiltered}
-                    size={"medium"}
-                />
-
-                {/*
-                  * Shown for a to-many relation too. It used to be hidden
-                  * there because the only operators offered were the array
-                  * ones, which have no null to ask about — but "posts with no
-                  * tags" is the question a filter on a link is most often
-                  * for, and the driver answers it with `NOT EXISTS`.
-                  *
-                  * It switches the operator to the matching null check rather
-                  * than pairing a null value with whatever operator is
-                  * selected. Only the operator travels to the driver, and
-                  * `is-null` is a thing every engine implements; a null
-                  * *operand* is not — see `nullFilterOperatorFor`.
-                  */}
-                <Label
-                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 bg-surface-50 dark:bg-surface-900 hover:bg-surface-100 dark:hover:bg-surface-800"
-                    htmlFor={nullFilterId}
-                >
-                    <Checkbox
-                        id={nullFilterId}
-                        checked={nullFiltered}
-                        size={"small"}
-                        onCheckedChange={() => {
-                            if (!nullFiltered) updateFilter(nullFilterOperatorFor(operation), null);
-                            else updateFilter(valueOperatorFor(operation, possibleOperations) ?? operation, undefined);
-                        }}
-                    />
-                    {manyRelation ? "Filter for empty relations" : "Filter for null values"}
-                </Label>
-            </div>
-        </div>
-    );
-}