feat: improve error reporting

Author: iobuhov

packages/pluggableWidgets/dropdown-sort-web/src/DropdownSort.editorPreview.tsx

@@ -1,11 +1,14 @@
+import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
+import { withSortAPI } from "@mendix/widget-plugin-sorting/react/hocs/withSortAPI";
 import { createElement, ReactElement } from "react";
-import { SortComponent } from "./components/SortComponent";
 import { DropdownSortPreviewProps } from "../typings/DropdownSortProps";
-import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
+import { SortComponent } from "./components/SortComponent";
+
+const DropdownPreview = withSortAPI(SortComponent);
 
 export function preview(props: DropdownSortPreviewProps): ReactElement {
     return (
-        <SortComponent
+        <DropdownPreview
             value={null}
             direction="asc"
             className={props.className}

packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx

@@ -1,21 +1,25 @@
 import { enableStaticRendering } from "mobx-react-lite";
 enableStaticRendering(true);
 
-import { GUID, ObjectItem } from "mendix";
-import { createElement, ReactElement, ReactNode, useCallback } from "react";
+import { useClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
 import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";
+import { getColumnAndRowBasedOnIndex } from "@mendix/widget-plugin-grid/selection";
+import { getGlobalSortContext } from "@mendix/widget-plugin-sorting/react/context";
+import { SortStoreHost } from "@mendix/widget-plugin-sorting/stores/SortStoreHost";
+import { GUID, ObjectItem } from "mendix";
+import { createElement, ReactElement, ReactNode, useCallback, useMemo } from "react";
 import { GalleryPreviewProps } from "../typings/GalleryProps";
 import { Gallery as GalleryComponent } from "./components/Gallery";
 import { useItemEventsController } from "./features/item-interaction/ItemEventsController";
 import { useGridPositions } from "./features/useGridPositions";
-import { useClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
 import { useItemPreviewHelper } from "./helpers/ItemPreviewHelper";
 import { useItemSelectHelper } from "./helpers/useItemSelectHelper";
-import { getColumnAndRowBasedOnIndex } from "@mendix/widget-plugin-grid/selection";
 import "./ui/GalleryPreview.scss";
 
 const numberOfItems = 3;
 
+const SortAPI = getGlobalSortContext();
+
 function Preview(props: GalleryPreviewProps): ReactElement {
     const { emptyPlaceholder } = props;
     const items: ObjectItem[] = Array.from({ length: numberOfItems }).map((_, index) => ({
@@ -51,6 +55,15 @@ function Preview(props: GalleryPreviewProps): ReactElement {
         props.itemSelectionMode
     );
 
+    const sortAPI = useMemo(
+        () =>
+            ({
+                version: 1,
+                host: new SortStoreHost()
+            }) as const,
+        []
+    );
+
     return (
         <GalleryComponent
             className={props.class}
@@ -64,9 +77,11 @@ function Preview(props: GalleryPreviewProps): ReactElement {
                 [emptyPlaceholder]
             )}
             header={
-                <props.filtersPlaceholder.renderer caption="Place widgets like filter widget(s) and action button(s) here">
-                    <div />
-                </props.filtersPlaceholder.renderer>
+                <SortAPI.Provider value={sortAPI}>
+                    <props.filtersPlaceholder.renderer caption="Place widgets like filter widget(s) and action button(s) here">
+                        <div />
+                    </props.filtersPlaceholder.renderer>
+                </SortAPI.Provider>
             }
             showHeader
             hasMoreItems={false}

packages/shared/widget-plugin-sorting/src/react/context.ts

@@ -1,6 +1,9 @@
-import { Context, createContext, useContext } from "react";
+import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
+import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
+import { Context, createContext, useContext, useEffect } from "react";
 import { SortStoreHost } from "../stores/SortStoreHost";
 import { SortInstruction } from "../types/store";
+import { Result, error, value } from "./result-meta";
 
 export interface SortAPI {
     version: 1;
@@ -11,13 +14,39 @@ export interface SortAPI {
 const SORT_PATH = "com.mendix.widgets.web.sortable.sortContext";
 
 export function getGlobalSortContext(): Context<SortAPI | null> {
-    return ((window as any)[SORT_PATH] ??= createContext<SortAPI | null>(null));
+    const scope = window.top === window ? window : window.top;
+    return ((scope as any)[SORT_PATH] ??= createContext<SortAPI | null>(null));
 }
 
-export function useSortAPI(): SortAPI {
+export function useSortAPI(): Result<SortAPI, Error> {
     const api = useContext(getGlobalSortContext());
     if (api === null) {
-        throw new Error("SortAPI is not available. Widget is out of parent context.");
+        return error(new Error("Error: widget is out of context. Please place the widget inside the Gallery header."));
     }
-    return api;
+    return value(api);
+}
+
+export function useLockSortAPI(api: SortAPI): Result<SortAPI, Error> {
+    const id = useLock(api);
+
+    if (api.host.usedBy !== id) {
+        return error(
+            new Error(
+                `Error: Sort API is already in use by another widget. Remove other sort widgets and refresh the page.`
+            )
+        );
+    }
+
+    return value(api);
+}
+
+function useLock({ host }: SortAPI): string {
+    const [unlock, id] = useConst(() => {
+        const id = `useLock@${generateUUID()}`;
+        return [host.lock(id), id] as const;
+    });
+
+    useEffect(() => unlock, [unlock]);
+
+    return id;
 }

packages/shared/widget-plugin-sorting/src/react/hocs/withSortAPI.tsx

@@ -1,24 +1,30 @@
+import { Alert } from "@mendix/widget-plugin-component-kit/Alert";
 import { ErrorBoundary } from "@mendix/widget-plugin-component-kit/ErrorBoundary";
-import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
-import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { observer } from "mobx-react-lite";
-import { createElement, FC, useEffect } from "react";
-import { SortAPI, useSortAPI } from "../context";
+import { createElement, FC } from "react";
+import { SortAPI, useLockSortAPI, useSortAPI } from "../context";
 
 export function withSortAPI<P extends object>(Component: FC<P & { sortAPI: SortAPI }>): FC<P> {
-    const SortAPIInjector = observer<P>(function SortAPIInjector(props) {
-        const id = useConst(() => `SortAPIInjector@${generateUUID()}`);
-        const sortAPI = useSortAPI();
-
-        useEffect(() => sortAPI.host.useHost(id), [sortAPI.host, id]);
+    const SortAPIGuard = observer(function SortAPIGuard(props: P & { sortAPI: SortAPI }): React.ReactElement {
+        const sortAPI = useLockSortAPI(props.sortAPI);
 
-        if (sortAPI.host.usedBy !== null && sortAPI.host.usedBy !== id) {
-            return null;
+        if (sortAPI.hasError) {
+            return <Alert bootstrapStyle="danger">{sortAPI.error.message}</Alert>;
         }
 
-        return <Component {...props} sortAPI={sortAPI} />;
+        return <Component {...props} sortAPI={sortAPI.value} />;
     });
 
+    function SortAPIInjector(props: P): React.ReactElement {
+        const sortAPI = useSortAPI();
+
+        if (sortAPI.hasError) {
+            return <Alert bootstrapStyle="danger">{sortAPI.error.message}</Alert>;
+        }
+
+        return <SortAPIGuard {...props} sortAPI={sortAPI.value} />;
+    }
+
     return function (props): React.ReactElement {
         return (
             <ErrorBoundary>

packages/shared/widget-plugin-sorting/src/react/result-meta.ts

@@ -0,0 +1,19 @@
+export interface Error<T> {
+    hasError: true;
+    error: T;
+}
+
+export interface Success<T> {
+    hasError: false;
+    value: T;
+}
+
+export type Result<TValue, TError> = Error<TError> | Success<TValue>;
+
+export function error<T>(error: T): Error<T> {
+    return { hasError: true, error };
+}
+
+export function value<T>(value: T): Success<T> {
+    return { hasError: false, value };
+}

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

@@ -1,18 +1,20 @@
-import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { action, computed, makeObservable, observable } from "mobx";
 import { ObservableSortStore, SortInstruction } from "../types/store";
 
 export class SortStoreHost {
     private _store: ObservableSortStore | null = null;
-    private _usedBy: string | null = null;
+    private _usedBy: string[] = [];
 
     get sortOrder(): SortInstruction[] {
         return this._store?.sortOrder ?? [];
     }
 
     constructor() {
-        makeObservable<this, "_usedBy">(this, {
+        makeObservable<this, "_usedBy" | "_add" | "_remove">(this, {
             sortOrder: computed,
-            useHost: action,
+            lock: action,
+            _add: action,
+            _remove: action,
             _usedBy: observable,
             usedBy: computed,
             observe: action,
@@ -32,12 +34,25 @@ export class SortStoreHost {
         this._store = null;
     }
 
-    useHost(id: string): () => void {
-        this._usedBy = id;
-        return () => runInAction(() => (this._usedBy = null));
+    lock(id: string): () => void {
+        this._add(id);
+        return () => this._remove(id);
+    }
+
+    private _add(id: string): void {
+        if (this._usedBy.indexOf(id) === -1) {
+            this._usedBy.push(id);
+        }
+    }
+
+    private _remove(id: string): void {
+        const index = this._usedBy.indexOf(id);
+        if (index !== -1) {
+            this._usedBy.splice(index, 1);
+        }
     }
 
     get usedBy(): string | null {
-        return this._usedBy;
+        return this._usedBy.at(0) ?? null;
     }
 }