chore: fixes in editor conifg and stored json

Author: iobuhov

packages/pluggableWidgets/gallery-web/src/Gallery.editorConfig.ts

@@ -22,6 +22,11 @@ export function getProperties(values: GalleryPreviewProps, defaultProperties: Pr
         hidePropertiesIn(defaultProperties, values, ["onSelectionChange", "itemSelectionMode"]);
     }
 
+    if (values.stateStorageType === "localStorage") {
+        hidePropertyIn(defaultProperties, values, "stateStorageAttr");
+        hidePropertyIn(defaultProperties, values, "onConfigurationChange");
+    }
+
     // Hide scrolling settings for now.
     hidePropertiesIn(defaultProperties, values, ["showPagingButtons", "showTotalCount"]);
 

packages/pluggableWidgets/gallery-web/src/Gallery.xml

@@ -139,6 +139,10 @@
                         <attributeType name="String" />
                     </attributeTypes>
                 </property>
+                <property key="onConfigurationChange" type="action" required="false">
+                    <caption>On change</caption>
+                    <description />
+                </property>
                 <property key="storeFilters" type="boolean" defaultValue="true">
                     <caption>Store filters</caption>
                     <description />
@@ -147,10 +151,6 @@
                     <caption>Store sort</caption>
                     <description />
                 </property>
-                <property key="onConfigurationChange" type="action" required="false">
-                    <caption>On change</caption>
-                    <description />
-                </property>
             </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="Accessibility">

packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts

@@ -86,9 +86,9 @@ export interface GalleryPreviewProps {
     onSelectionChange: {} | null;
     stateStorageType: StateStorageTypeEnum;
     stateStorageAttr: string;
+    onConfigurationChange: {} | null;
     storeFilters: boolean;
     storeSort: boolean;
-    onConfigurationChange: {} | null;
     filterSectionTitle: string;
     emptyMessageTitle: string;
     ariaLabelListBox: string;

packages/shared/widget-plugin-sorting/src/__tests__/SortStoreHost.spec.ts

@@ -13,7 +13,9 @@ describe("SortStoreHost", () => {
                 [attrId("attr1"), "asc"],
                 [attrId("attr2"), "desc"]
             ] as SortInstruction[],
-            setSortOrder: jest.fn()
+            setSortOrder: jest.fn(),
+            toJSON: jest.fn(),
+            fromJSON: jest.fn()
         };
     });
 
@@ -60,7 +62,9 @@ describe("SortStoreHost", () => {
         it("should replace previously observed store", () => {
             const anotherMockStore: ObservableSortStore = {
                 sortOrder: [[attrId("attr3"), "asc"]] as SortInstruction[],
-                setSortOrder: jest.fn()
+                setSortOrder: jest.fn(),
+                toJSON: jest.fn(),
+                fromJSON: jest.fn()
             };
 
             sortStoreHost.observe(mockStore);
@@ -206,7 +210,9 @@ describe("SortStoreHost", () => {
         it("should handle store changes after observation", () => {
             const mutableStore = {
                 sortOrder: [[attrId("attr1"), "asc"]] as SortInstruction[],
-                setSortOrder: jest.fn()
+                setSortOrder: jest.fn(),
+                toJSON: jest.fn(),
+                fromJSON: jest.fn()
             };
 
             sortStoreHost.observe(mutableStore);

packages/shared/widget-plugin-sorting/src/stores/SortOrderStore.ts

@@ -1,17 +1,22 @@
+import { PlainJs, Serializable } from "@mendix/filter-commons/typings/settings";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { action, computed, makeObservable, observable } from "mobx";
 import { BasicSortStore, Option, SortInstruction } from "../types/store";
 
-export class SortOrderStore implements BasicSortStore {
+type StorableState = Array<[number, "asc" | "desc"]>;
+
+export class SortOrderStore implements BasicSortStore, Serializable {
     private readonly _sortOrder: SortInstruction[] = [];
 
     readonly id = `SortOrderStore@${generateUUID()}`;
     readonly options: Option[];
+    readonly idToIndex: Map<string, number>;
 
     constructor(spec: { options?: Option[]; initSortOrder?: SortInstruction[] } = {}) {
         const { options = [], initSortOrder = [] } = spec;
 
         this.options = [...options];
+        this.idToIndex = new Map(options.map((option, index) => [option.value, index]));
         this._sortOrder = [...initSortOrder];
 
         makeObservable<this, "_sortOrder">(this, {
@@ -40,4 +45,25 @@ export class SortOrderStore implements BasicSortStore {
             this._sortOrder.splice(index, 1);
         }
     }
+
+    toJSON(): PlainJs {
+        const data: StorableState = this.sortOrder.map(inst => {
+            const index = this.idToIndex.get(inst[0])!;
+            return [index, inst[1]];
+        });
+
+        return data;
+    }
+
+    fromJSON(data: PlainJs): void {
+        if (!Array.isArray(data)) {
+            return;
+        }
+        const sortOrder = (data as StorableState).flatMap<SortInstruction>(([index, direction]) => {
+            const value = this.options[index]?.value;
+            return value ? [[value, direction]] : [];
+        });
+
+        this.setSortOrder(...sortOrder);
+    }
 }

packages/shared/widget-plugin-sorting/src/stores/SortStoreHost.ts

@@ -54,15 +54,15 @@ export class SortStoreHost implements Serializable {
     }
 
     toJSON(): PlainJs {
-        return this.sortOrder.map(arr => arr.slice());
+        return this._store ? this._store.toJSON() : null;
     }
 
     fromJSON(data: PlainJs): void {
         if (data == null || !Array.isArray(data)) {
             return;
         }
         if (this._store) {
-            this._store.setSortOrder(...(data as SortInstruction[]));
+            this._store.fromJSON(data);
         }
     }
 }

packages/shared/widget-plugin-sorting/src/types/store.ts

@@ -1,3 +1,4 @@
+import { Serializable } from "@mendix/filter-commons/typings/settings";
 import type { ListAttributeValue } from "mendix";
 
 export type SortDirection = "asc" | "desc";
@@ -11,7 +12,7 @@ export type Option = {
     value: ListAttributeId;
 };
 
-export interface ObservableSortStore {
+export interface ObservableSortStore extends Serializable {
     sortOrder: SortInstruction[];
     setSortOrder(...item: SortInstruction[]): void;
 }

turbo.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://turborepo.org/schema.json",
-  "globalPassThroughEnv": ["GITHUB_TOKEN", "GH_PAT", "GH_USERNAME", "GH_EMAIL", "GH_NAME", "CPAPI_PASS", "CPAPI_URL", "CPAPI_USER", "CPAPI_USER_OPENID"],
+  "globalPassThroughEnv": ["GITHUB_TOKEN", "GH_PAT", "GH_USERNAME", "GH_EMAIL", "GH_NAME", "CPAPI_PASS", "CPAPI_URL", "CPAPI_USER", "CPAPI_USER_OPENID", "MX_PROJECT_PATH"],
   "globalDependencies": [
     "automation/**",
     ".npmrc",