@rebasepro/admin 0.8.0 → 0.9.0

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

@@ -0,0 +1,187 @@
+import React, { Suspense } from "react";
+import {
+    ArrayProperty,
+    FilterFieldBindingProps,
+    Property,
+    ReferenceProperty,
+    RelationProperty,
+    WhereFilterOp
+} from "@rebasepro/types";
+import { enumToObjectEntries, resolveFilterOperators } from "@rebasepro/common";
+import { useCollectionScope, useComponentOverride, useResolvedComponent } from "@rebasepro/core";
+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.ui.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.ui.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?.ui?.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.includeId}
+            previewProperties={referenceProperty.ui?.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,5 +1,5 @@
-import { useEntitySelectionDialog } from "../../../hooks/useEntitySelectionDialog";
-import type { EntityCollection } from "@rebasepro/types";
+import { useSelectionDialog } from "../../../hooks/useSelectionDialog";
+import type { CollectionConfig } from "@rebasepro/types";
 import React, { useMemo, useState } from "react";
 import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
 import { Entity, EntityReference } from "@rebasepro/types";
@@ -20,6 +20,12 @@ interface ReferenceFilterFieldProps {
     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 = {
@@ -44,11 +50,12 @@ export function ReferenceFilterField({
     path,
     includeId = true,
     previewProperties,
-    setHidden
+    setHidden,
+    operators
 }: ReferenceFilterFieldProps) {
     const { t } = useTranslation();
 
-    const possibleOperations: (keyof typeof operationLabels)[] = isArray
+    let possibleOperations: (keyof typeof operationLabels)[] = isArray
         ? ["array-contains"]
         : ["==", "!=", ">", "<", ">=", "<="];
 
@@ -58,6 +65,10 @@ export function ReferenceFilterField({
         possibleOperations.push("in", "not-in");
     }
 
+    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);
@@ -100,7 +111,7 @@ export function ReferenceFilterField({
     }
 
     const collectionRegistryController = useCollectionRegistryController();
-    const collection: EntityCollection | undefined = useMemo(() => {
+    const collection: CollectionConfig | undefined = useMemo(() => {
         return path ? collectionRegistryController.getCollection(path) : undefined;
     }, [path]);
 
@@ -114,7 +125,7 @@ export function ReferenceFilterField({
 
     const multiple = multipleSelectOperations.includes(operation);
 
-    const referenceDialogController = useEntitySelectionDialog({
+    const referenceDialogController = useSelectionDialog({
         multiselect: multiple,
         path,
         collection,
@@ -147,6 +158,9 @@ export function ReferenceFilterField({
         );
     };
 
+    // All renderable operators were filtered out (engine/property narrowing).
+    if (possibleOperations.length === 0) return null;
+
     return (
 
         <div className="flex w-full flex-row">
@@ -157,7 +171,7 @@ export function ReferenceFilterField({
                     onValueChange={(value) => {
                         updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                     }}
-                    renderValue={(op) => operationLabels[op as VirtualTableWhereFilterOp]}>
+                    renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}>
                     {possibleOperations.map((op) => (
                         <SelectItem key={op} value={op}>
                             {operationLabels[op]}

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

@@ -11,6 +11,12 @@ interface RelationFilterFieldProps {
     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 = {
@@ -34,15 +40,20 @@ export function RelationFilterField({
     relation,
     name: _name,
     hidden: _hidden,
-    setHidden: _setHidden
+    setHidden: _setHidden,
+    operators
 }: RelationFilterFieldProps) {
 
     const manyRelation = relation.cardinality === "many";
 
-    const possibleOperations: (keyof typeof operationLabels)[] = manyRelation
+    let possibleOperations: (keyof typeof operationLabels)[] = manyRelation
         ? ["array-contains", "array-contains-any"]
         : ["==", "!=", ">", "<", ">=", "<=", "in", "not-in"];
 
+    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<EntityRelation | EntityRelation[] | undefined | null>(fieldValue);
@@ -89,6 +100,9 @@ export function RelationFilterField({
         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="">
@@ -98,7 +112,7 @@ export function RelationFilterField({
                     onValueChange={(newOp) => {
                         updateFilter(newOp as VirtualTableWhereFilterOp, internalValue);
                     }}
-                    renderValue={(op) => operationLabels[op as VirtualTableWhereFilterOp]}
+                    renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}
                 >
                     {possibleOperations.map((op) => (
                         <SelectItem key={op} value={op}>

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

@@ -21,6 +21,12 @@ interface StringNumberFilterFieldProps {
     isArray?: boolean;
     enumValues?: EnumValueConfig[];
     title?: string;
+    /**
+     * 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 = {
@@ -34,11 +40,23 @@ const operationLabels = {
     "not-in": "Not in",
     "array-contains": "Contains",
     "array-contains-any": "Any",
-    "is-null": "Is null"
+    "ilike": "Contains",
+    "not-ilike": "Not contains",
+    "is-null": "Is null",
+    "is-not-null": "Is not null"
 };
 
 const multipleSelectOperations = ["array-contains-any", "in", "not-in"];
 
+/** Operators that match a substring, wrapped in SQL wildcards (`%value%`). */
+const containsOperations = ["ilike", "not-ilike"];
+
+/** Strip the surrounding `%` wildcards a contains-filter adds, for display. */
+function unwrapContains(value: unknown): string {
+    if (typeof value !== "string") return "";
+    return value.replace(/^%/, "").replace(/%$/, "");
+}
+
 export function StringNumberFilterField({
                                             name,
                                             value,
@@ -46,13 +64,20 @@ export function StringNumberFilterField({
                                             type,
                                             isArray,
                                             enumValues,
-                                            title
+                                            title,
+                                            operators
                                         }: StringNumberFilterFieldProps) {
     const { t } = useTranslation();
 
-    const possibleOperations: (keyof typeof operationLabels)[] = isArray
+    let possibleOperations: (keyof typeof operationLabels)[] = isArray
         ? ["array-contains"]
-        : ["==", "!=", ">", "<", ">=", "<=", "is-null"];
+        : ["==", "!=", ">", "<", ">=", "<=", "is-null", "is-not-null"];
+
+    // Case-insensitive substring matching is only meaningful for free-text
+    // string columns (not numbers, arrays, or enums).
+    if (!isArray && !enumValues && type === "string") {
+        possibleOperations.push("ilike", "not-ilike");
+    }
 
     if (enumValues) {
         if (isArray) {
@@ -62,18 +87,47 @@ export function StringNumberFilterField({
         }
     }
 
+    if (operators) {
+        possibleOperations = possibleOperations.filter(op => (operators as readonly string[]).includes(op));
+    }
+
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
-    const [operation, setOperation] = useState<VirtualTableWhereFilterOp | "is-null">(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation);
-    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | null | undefined>(fieldValue as string | number | string[] | number[] | null | undefined);
+    // Read back both the canonical null operators and the legacy `["==", null]` /
+    // `["!=", null]` form saved by older filter presets.
+    const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(
+        fieldOperation === "==" && fieldValue === null ? "is-null"
+            : fieldOperation === "!=" && fieldValue === null ? "is-not-null"
+                : fieldOperation
+    );
+    const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | null | undefined>(
+        containsOperations.includes(fieldOperation) ? unwrapContains(fieldValue) : (fieldValue as string | number | string[] | number[] | null | undefined)
+    );
+
+    const isNullOperation = operation === "is-null" || operation === "is-not-null";
 
-    const isNullOperation = operation === "is-null";
+    // All renderable operators were filtered out (engine/property narrowing).
+    if (possibleOperations.length === 0) return null;
 
-    function updateFilter(op: VirtualTableWhereFilterOp | "is-null", val: string | number | string[] | number[] | null | undefined) {
-        // Handle "is null" operation
-        if (op === "is-null") {
+    function updateFilter(op: VirtualTableWhereFilterOp, val: string | number | string[] | number[] | null | undefined) {
+        // Null-testing operators ignore their value.
+        if (op === "is-null" || op === "is-not-null") {
             setOperation(op);
             setInternalValue(null);
-            setValue(["==", null]);
+            setValue([op, null]);
+            return;
+        }
+
+        // Substring matching: keep the raw text in the field, emit it wrapped
+        // in SQL wildcards so the backend runs `column ILIKE '%value%'`.
+        if (op === "ilike" || op === "not-ilike") {
+            const raw = typeof val === "string" ? val : "";
+            setOperation(op);
+            setInternalValue(raw);
+            if (raw.length > 0) {
+                setValue([op, `%${raw}%`]);
+            } else {
+                setValue(undefined);
+            }
             return;
         }
 
@@ -121,7 +175,7 @@ export function StringNumberFilterField({
                         fullWidth={true}
                         position={"item-aligned"}
                         onValueChange={(value) => {
-                            updateFilter(value as VirtualTableWhereFilterOp | "is-null", internalValue);
+                            updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                         }}
                         renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}>
                     {possibleOperations.map((op) => (

package/src/components/SideDialogs.tsx

@@ -4,7 +4,7 @@ import { useSideDialogsController } from "../hooks";
 import { Sheet, Dialog } from "@rebasepro/ui";
 import { useUnsavedChangesDialog, UnsavedChangesDialog } from "@rebasepro/core";
 import { ErrorBoundary } from "@rebasepro/ui";
-import type { EntitySidePanelProps } from "@rebasepro/types";
+import type { SidePanelBindingProps } from "@rebasepro/types";
 
 
 export type SideDialogController = {
@@ -41,7 +41,7 @@ export const useSideDialogContext = () => useContext<SideDialogController>(SideD
 
 /**
  * This is the component in charge of rendering the side dialogs used
- * for editing entities. Use the {@link useSideEntityController} to open
+ * for editing entities. Use the {@link useSidePanel} to open
  * and control the dialogs.
  * This component needs a parent {@link Rebase}
  * {@link useSideDialogsController}
@@ -146,7 +146,7 @@ function SideDialogView({
         setPendingClose
     }), [blocked, setBlockedNavigationMessage, width, onCloseRequest, pendingClose]);
 
-    const additionalProps = panel?.additional as EntitySidePanelProps | undefined;
+    const additionalProps = panel?.additional as SidePanelBindingProps | undefined;
     const isDialogMode = additionalProps?.collection?.openEntityMode === "dialog";
 
     return (

package/src/components/{EntitySidePanel.tsx → SidePanelBinding.tsx}

@@ -1,28 +1,28 @@
-import type { EntityCollection } from "@rebasepro/types";
-import type { EntitySidePanelProps } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
+import type { SidePanelBindingProps } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type { OnUpdateParams } from "../types/components/EntityFormProps";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { IconButton, Maximize2Icon, XIcon } from "@rebasepro/ui";
-import { EntityEditView } from "./EntityEditView";
-import { EntityDetailView } from "./EntityDetailView";
+import { EditViewBinding } from "./EditViewBinding";
+import { DetailViewBinding } from "./DetailViewBinding";
 import { useSideDialogContext } from "./SideDialogs";
 import { useNavigate } from "react-router-dom";
 import { saveEntityToMemoryCache, useComponentOverride } from "@rebasepro/core";
-import { useCollectionRegistryController, useSideEntityController } from "../index";
+import { useCollectionRegistryController, useSidePanel } from "../index";
 import { useUrlController } from "../index";
 import { resolveDefaultSelectedView } from "@rebasepro/common";
 
 /**
  * This is the component in charge of rendering the side dialog used
- * for editing entities. Use the {@link useSideEntityController} to open
+ * for editing entities. Use the {@link useSidePanel} to open
  * and control the dialogs.
  * This component needs a parent {@link Rebase}
- * {@link useSideEntityController}
+ * {@link useSidePanel}
  * @group Components
  */
-export function EntitySidePanel(props: EntitySidePanelProps) {
+export function SidePanelBinding(props: SidePanelBindingProps) {
 
     const {
         allowFullScreen = true,
@@ -32,7 +32,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         formProps
     } = props;
 
-    const ResolvedDetailView = useComponentOverride("Entity.DetailView", EntityDetailView);
+    const ResolvedDetailView = useComponentOverride("DetailView", DetailViewBinding);
 
     const {
         blocked,
@@ -43,7 +43,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
 
     const navigate = useNavigate();
 
-    const sideEntityController = useSideEntityController();
+    const sidePanelController = useSidePanel();
     const collectionRegistryController = useCollectionRegistryController();
     const sideDialogsController = useSideDialogContext();
     const urlController = useUrlController();
@@ -63,7 +63,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         }
         setShowEditInPanel(false);
         if (params.status !== "existing") {
-            sideEntityController.replace({
+            sidePanelController.replace({
                 path: params.path,
                 entityId: params.entityId,
                 selectedTab: params.selectedTab,
@@ -102,7 +102,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     // defaultSelectedView, update the panel width and URL to match.
     // This handles cases where defaultSelectedView is set via the collection
     // editor / Studio and is not available on the collection object the
-    // caller passed to sideEntityController.open().
+    // caller passed to sidePanelController.open().
     const hasCorrectedDefaultView = useRef(false);
     useEffect(() => {
         hasCorrectedDefaultView.current = false;
@@ -119,7 +119,7 @@ entityId }
         );
         if (effectiveDefault && effectiveDefault !== "edit") {
             hasCorrectedDefaultView.current = true;
-            sideEntityController.replace({
+            sidePanelController.replace({
                 path,
                 entityId,
                 selectedTab: effectiveDefault,
@@ -127,7 +127,7 @@ entityId }
                 collection
             });
         }
-    }, [selectedTab, entityId, collection, path, sideEntityController]);
+    }, [selectedTab, entityId, collection, path, sidePanelController]);
 
     // Note: beforeunload is handled by useUnsavedChangesDialog in SideDialogView,
     // which listens to the same `blocked` state via SideDialogContext.
@@ -150,7 +150,7 @@ entityId }
                     ? <ResolvedDetailView
                         path={path}
                         layout={collection?.openEntityMode === "dialog" ? "dialog" : "side_panel"}
-                        collection={collection as EntityCollection}
+                        collection={collection as CollectionConfig}
                         entityId={entityId!}
                         parentCollectionSlugs={parentCollectionSlugs}
                         parentEntityIds={parentEntityIds}
@@ -186,7 +186,7 @@ entityId }
                                 return;
                             }
                             if (tabEntityId) {
-                                sideEntityController.replace({
+                                sidePanelController.replace({
                                     path,
                                     entityId: tabEntityId,
                                     selectedTab,
@@ -196,10 +196,10 @@ entityId }
                             }
                         }}
                     />
-                    : <EntityEditView
+                    : <EditViewBinding
                         {...props}
                         layout={collection?.openEntityMode === "dialog" ? "dialog" : "side_panel"}
-                        collection={collection as EntityCollection}
+                        collection={collection as CollectionConfig}
                         parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
                         onValuesModified={onValuesModified}
                         onSaved={onUpdate}
@@ -242,7 +242,7 @@ entityId }
                                 return;
                             }
                             if (tabEntityId) {
-                                sideEntityController.replace({
+                                sidePanelController.replace({
                                     path,
                                     entityId: tabEntityId,
                                     selectedTab,