chore: fix issue with ref

Author: iobuhov

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorConfig.ts

@@ -36,7 +36,7 @@ export function getProperties(values: DatagridDropdownFilterPreviewProps, defaul
 }
 
 function attrGroupProperties(values: DatagridDropdownFilterPreviewProps, defaultProperties: Properties): Properties {
-    hidePropertiesIn(defaultProperties, values, ["ref", "refOptions", "fetchOptionsLazy"]);
+    hidePropertiesIn(defaultProperties, values, ["refEntity", "refOptions", "refCaption", "fetchOptionsLazy"]);
 
     if (values.attrChoice === "auto") {
         hidePropertyIn(defaultProperties, {} as { linkedDs: unknown }, "linkedDs");

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.xml

@@ -62,7 +62,7 @@
                 <!-- end: Attr type -->
 
                 <!-- start: Ref type -->
-                <property key="ref" type="association" selectableObjects="refOptions" required="true" dataSource="linkedDs" isMetaData="true">
+                <property key="refEntity" type="association" selectableObjects="refOptions" required="true" dataSource="linkedDs" isMetaData="true">
                     <caption>Entity</caption>
                     <description>Set the entity to enable filtering over association.</description>
                     <associationTypes>

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/hocs/withLinkedRefStore.tsx

@@ -11,11 +11,11 @@ import { DatagridDropdownFilterContainerProps } from "../../typings/DatagridDrop
 import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup";
 import { RefFilterAPI } from "../components/typings";
 
-type WidgetProps = Pick<DatagridDropdownFilterContainerProps, "name" | "ref" | "refOptions" | "refCaption">;
+type WidgetProps = Pick<DatagridDropdownFilterContainerProps, "name" | "refEntity" | "refOptions" | "refCaption">;
 
 export interface RequiredProps {
     name: string;
-    ref: AssociationMetaData;
+    refEntity: AssociationMetaData;
     refOptions: ListValue;
     refCaption: ListAttributeValue<string>;
     searchAttrId: ListAttributeValue["id"];
@@ -41,29 +41,30 @@ export function withLinkedRefStore<P extends WidgetProps>(Cmp: Component<P & Ref
 }
 
 function mapProps(props: WidgetProps): RequiredProps {
-    if (!props.ref) {
-        throw new Error("RefFilterStoreProvider: ref is required");
+    if (!props.refEntity) {
+        throw new Error("RefFilterStoreProvider: refEntity is required");
     }
+
     if (!props.refOptions) {
         throw new Error("RefFilterStoreProvider: refOptions is required");
     }
+
     if (!props.refCaption) {
         throw new Error("RefFilterStoreProvider: refCaption is required");
     }
     return {
         name: props.name,
-        ref: props.ref,
+        refEntity: props.refEntity,
         refOptions: props.refOptions,
         refCaption: props.refCaption,
         searchAttrId: props.refCaption.id
     };
 }
 
 function useGate(props: WidgetProps): DerivedPropsGate<RequiredProps> {
-    const gateProps = useMemo(() => mapProps(props), [props]);
-    const gp = useConst(() => new GateProvider(gateProps));
+    const gp = useConst(() => new GateProvider(mapProps(props)));
     useEffect(() => {
-        gp.setProps(gateProps);
+        gp.setProps(mapProps(props));
     });
     return gp.gate;
 }

packages/pluggableWidgets/datagrid-dropdown-filter-web/typings/DatagridDropdownFilterProps.d.ts

@@ -34,7 +34,7 @@ export interface DatagridDropdownFilterContainerProps {
     attr: AttributeMetaData<string | boolean>;
     auto: boolean;
     filterOptions: FilterOptionsType[];
-    ref: AssociationMetaData;
+    refEntity: AssociationMetaData;
     refOptions?: ListValue;
     refCaption?: ListAttributeValue<string>;
     fetchOptionsLazy: boolean;
@@ -66,7 +66,7 @@ export interface DatagridDropdownFilterPreviewProps {
     attr: string;
     auto: boolean;
     filterOptions: FilterOptionsPreviewType[];
-    ref: string;
+    refEntity: string;
     refOptions: {} | { caption: string } | { type: string } | null;
     refCaption: string;
     fetchOptionsLazy: boolean;

packages/shared/widget-plugin-dropdown-filter/src/containers/RefFilterContainer.tsx

@@ -13,6 +13,7 @@ import { createElement, CSSProperties, useEffect } from "react";
 import { useFrontendType } from "../helpers/useFrontendType";
 import { useOnScrollBottom } from "@mendix/widget-plugin-hooks/useOnScrollBottom";
 import { SelectedItemsStyleEnum, SelectionMethodEnum } from "../typings/widget";
+import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup";
 import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
 import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider";
 import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
@@ -52,7 +53,7 @@ function Container(props: RefFilterContainerProps): React.ReactElement {
 
 const SelectWidget = observer(function SelectWidget(props: RefFilterContainerProps): React.ReactElement {
     const gate = useGate(props);
-    const ctrl1 = useConst(() => new RefSelectController({ gate }));
+    const ctrl1 = useSetup(() => new RefSelectController({ gate }));
     const handleMenuScroll = useOnScrollBottom(ctrl1.handleMenuScrollEnd, { triggerZoneHeight: 100 });
 
     usePickerJSActions(ctrl1, props);
@@ -76,7 +77,7 @@ const SelectWidget = observer(function SelectWidget(props: RefFilterContainerPro
 
 const ComboboxWidget = observer(function ComboboxWidget(props: RefFilterContainerProps): React.ReactElement {
     const gate = useGate(props);
-    const ctrl2 = useConst(() => new RefComboboxController({ gate }));
+    const ctrl2 = useSetup(() => new RefComboboxController({ gate }));
     const handleMenuScroll = useOnScrollBottom(ctrl2.handleMenuScrollEnd, { triggerZoneHeight: 100 });
 
     usePickerJSActions(ctrl2, props);
@@ -99,7 +100,7 @@ const ComboboxWidget = observer(function ComboboxWidget(props: RefFilterContaine
 
 const TagPickerWidget = observer(function TagPickerWidget(props: RefFilterContainerProps): React.ReactElement {
     const gate = useGate(props);
-    const ctrl3 = useConst(() => new RefTagPickerController({ gate }));
+    const ctrl3 = useSetup(() => new RefTagPickerController({ gate }));
     const handleMenuScroll = useOnScrollBottom(ctrl3.handleMenuScrollEnd, { triggerZoneHeight: 100 });
 
     usePickerJSActions(ctrl3, props);

packages/shared/widget-plugin-dropdown-filter/src/stores/RefFilterStore.ts

@@ -13,7 +13,7 @@ type ListAttributeId = AttributeMetaData["id"];
 
 export interface RefFilterStoreProps {
     fetchOptionsLazy?: boolean;
-    ref: AssociationMetaData;
+    refEntity: AssociationMetaData;
     refCaption: CaptionAccessor;
     refOptions: ListValue;
     searchAttrId?: ListAttributeId;
@@ -55,9 +55,9 @@ export class RefFilterStore extends BaseSelectStore {
             this.datasource.setLimit(0);
         }
 
-        makeObservable<this, "datasource" | "ref" | "caption" | "fetchReady">(this, {
+        makeObservable<this, "datasource" | "refEntity" | "caption" | "fetchReady">(this, {
             datasource: computed,
-            ref: computed,
+            refEntity: computed,
             caption: computed,
             options: computed,
             hasMore: computed,
@@ -80,8 +80,8 @@ export class RefFilterStore extends BaseSelectStore {
         return this.gate.props.refOptions;
     }
 
-    private get ref(): AssociationMetaData {
-        return this.gate.props.ref;
+    private get refEntity(): AssociationMetaData {
+        return this.gate.props.refEntity;
     }
 
     private get caption(): CaptionAccessor {
@@ -122,7 +122,7 @@ export class RefFilterStore extends BaseSelectStore {
             const obj = this.selectedItems.find(o => o.id === guid);
 
             if (obj) {
-                return [contains(association(this.ref.id), literal(obj))];
+                return [contains(association(this.refEntity.id), literal(obj))];
             }
 
             const viewExp = this.initCondArray.find(e => {