@xh/hoist 73.0.0-SNAPSHOT.1738003454248 → 73.0.0-SNAPSHOT.1738073624805

package/admin/jsonsearch/JsonSearchPanel.ts

@@ -0,0 +1,243 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2025 Extremely Heavy Industries Inc.
+ */
+
+import {startCase} from 'lodash';
+import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
+import {errorMessage} from '@xh/hoist/cmp/error';
+import {grid, GridConfig, gridCountLabel} from '@xh/hoist/cmp/grid';
+import {a, box, filler, h4, hframe, label, li, span, ul, vbox} from '@xh/hoist/cmp/layout';
+import {hoistCmp, SelectOption, useLocalModel} from '@xh/hoist/core';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {buttonGroupInput, jsonInput, select, textInput} from '@xh/hoist/desktop/cmp/input';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {Icon} from '@xh/hoist/icon';
+import {popover} from '@xh/hoist/kit/blueprint';
+import {clipboardButton} from '@xh/hoist/desktop/cmp/clipboard';
+import {JsonSearchPanelImplModel} from './impl/JsonSearchPanelImplModel';
+
+export interface JsonSearchPanelProps {
+    /** Url to endpoint for searching for matching JSON documents */
+    docSearchUrl: string;
+
+    /** Url to endpoint for listing matching JSON nodes */
+    matchingNodesUrl: string;
+
+    /**
+     * Config for GridModel used to display search results.
+     */
+    gridModelConfig: GridConfig;
+
+    /**
+     * Names of field(s) that can be used to group by.
+     */
+    groupByOptions: SelectOption[];
+}
+
+export const [JsonSearchPanel, jsonSearchPanel] = hoistCmp.withFactory({
+    displayName: 'JsonSearchPanel',
+
+    render() {
+        const impl = useLocalModel(JsonSearchPanelImplModel),
+            {error} = impl;
+
+        return panel({
+            title: 'JSON Path Search',
+            icon: Icon.json(),
+            modelConfig: {
+                side: 'right',
+                defaultSize: '75%',
+                collapsible: true,
+                defaultCollapsed: true
+            },
+            compactHeader: true,
+            tbar: searchTbar({model: impl}),
+            flex: 1,
+            item: panel({
+                mask: impl.docLoadTask,
+                items: [
+                    errorMessage({
+                        error,
+                        title: error?.name ? startCase(error.name) : undefined
+                    }),
+                    hframe({
+                        omit: impl.error,
+                        items: [
+                            panel({
+                                item: grid({model: impl.gridModel})
+                            }),
+                            panel({
+                                mask: impl.nodeLoadTask,
+                                tbar: readerTbar({model: impl}),
+                                bbar: nodeBbar({
+                                    omit: !impl.asPathList,
+                                    model: impl
+                                }),
+                                item: jsonInput({
+                                    model: impl,
+                                    bind: 'readerContent',
+                                    flex: 1,
+                                    width: '100%',
+                                    readonly: true,
+                                    showCopyButton: true
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+});
+
+const searchTbar = hoistCmp.factory<JsonSearchPanelImplModel>(({model}) => {
+    return toolbar(
+        pathField({model}),
+        helpButton(),
+        toolbarSep(),
+        span('Group by:'),
+        select({
+            bind: 'groupBy',
+            options: model.groupByOptions,
+            width: 160,
+            enableFilter: false
+        }),
+        toolbarSep(),
+        gridCountLabel({
+            gridModel: model.gridModel,
+            unit: 'document'
+        })
+    );
+});
+
+const pathField = hoistCmp.factory<JsonSearchPanelImplModel>({
+    render({model}) {
+        return textInput({
+            bind: 'path',
+            autoFocus: true,
+            commitOnChange: true,
+            leftIcon: Icon.search(),
+            enableClear: true,
+            placeholder:
+                "JSON Path - e.g. $..[?(@.colId == 'trader')] - type a path and hit ENTER to search",
+            width: null,
+            flex: 1,
+            onKeyDown: e => {
+                if (e.key === 'Enter') model.loadJsonDocsAsync();
+            }
+        });
+    }
+});
+
+const helpButton = hoistCmp.factory({
+    model: false,
+    render() {
+        return popover({
+            item: button({
+                icon: Icon.questionCircle(),
+                outlined: true
+            }),
+            content: vbox({
+                style: {
+                    padding: '0px 20px 10px 20px'
+                },
+                items: [
+                    h4('Sample Queries'),
+                    ul({
+                        style: {listStyleType: 'none'},
+                        items: [
+                            {
+                                query: "$..[?(@.colId == 'trader')]",
+                                explanation:
+                                    'Find all nodes with a property "colId" equal to "trader"'
+                            }
+                        ].map(({query, explanation}) =>
+                            li({
+                                key: query,
+                                items: [
+                                    span({
+                                        className:
+                                            'xh-border xh-pad-half xh-bg-alt xh-font-family-mono',
+                                        item: query
+                                    }),
+                                    ' ',
+                                    clipboardButton({
+                                        text: null,
+                                        icon: Icon.copy(),
+                                        getCopyText: () => query,
+                                        successMessage: 'Query copied to clipboard.'
+                                    }),
+                                    ' ',
+                                    explanation
+                                ]
+                            })
+                        )
+                    }),
+                    a({
+                        href: 'https://github.com/json-path/JsonPath?tab=readme-ov-file#operators',
+                        target: '_blank',
+                        item: 'Path Syntax Docs & More Examples'
+                    })
+                ]
+            })
+        });
+    }
+});
+
+const readerTbar = hoistCmp.factory<JsonSearchPanelImplModel>(({model}) => {
+    return toolbar({
+        items: [
+            buttonGroupInput({
+                model,
+                bind: 'readerContentType',
+                minimal: true,
+                outlined: true,
+                disabled: !model.selectedRecord,
+                items: [
+                    button({
+                        text: 'Document',
+                        value: 'document'
+                    }),
+                    button({
+                        text: 'Matching Paths',
+                        value: 'paths'
+                    }),
+                    button({
+                        text: 'Matching Values',
+                        value: 'values'
+                    })
+                ]
+            }),
+            filler(),
+            box({
+                omit: !model.matchingNodeCount,
+                item: `${model.matchingNodeCount} ${model.matchingNodeCount === 1 ? 'match' : 'matches'}`
+            })
+        ]
+    });
+});
+
+const nodeBbar = hoistCmp.factory<JsonSearchPanelImplModel>(({model}) => {
+    return toolbar(
+        label('Path Format:'),
+        buttonGroupInput({
+            model,
+            bind: 'pathFormat',
+            minimal: true,
+            outlined: true,
+            items: [
+                button({
+                    text: 'XPath',
+                    value: 'XPath'
+                }),
+                button({
+                    text: 'JSONPath',
+                    value: 'JSONPath'
+                })
+            ]
+        })
+    );
+});

package/admin/jsonsearch/impl/JsonSearchPanelImplModel.ts

@@ -0,0 +1,159 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2025 Extremely Heavy Industries Inc.
+ */
+
+import {GridModel} from '@xh/hoist/cmp/grid';
+import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
+import {HoistModel, managed, TaskObserver, XH} from '@xh/hoist/core';
+import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
+import {isEmpty} from 'lodash';
+
+/**
+ * @internal
+ */
+export class JsonSearchPanelImplModel extends HoistModel {
+    override xhImpl = true;
+
+    @managed gridModel: GridModel;
+    @managed groupingChooserModel: GroupingChooserModel;
+    @managed docLoadTask: TaskObserver = TaskObserver.trackLast();
+    @managed nodeLoadTask: TaskObserver = TaskObserver.trackLast();
+
+    @observable groupBy: string = null;
+
+    @bindable.ref error = null;
+    @bindable path: string = '';
+    @bindable readerContentType: 'document' | 'paths' | 'values' = 'values';
+    @bindable pathFormat: 'XPath' | 'JSONPath' = 'XPath';
+    @bindable readerContent: string = '';
+    @bindable matchingNodeCount: number = 0;
+
+    get asPathList(): boolean {
+        return this.readerContentType === 'paths';
+    }
+
+    get queryBuffer(): number {
+        return this.componentProps.queryBuffer ?? 200;
+    }
+
+    get docSearchUrl(): string {
+        return this.componentProps.docSearchUrl;
+    }
+
+    get matchingNodesUrl(): string {
+        return this.componentProps.matchingNodesUrl;
+    }
+
+    get selectedRecord() {
+        return this.gridModel.selectedRecord;
+    }
+
+    get gridModelConfig() {
+        return this.componentProps.gridModelConfig;
+    }
+
+    get groupByOptions() {
+        return [...this.componentProps.groupByOptions, {value: null, label: 'None'}];
+    }
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    override onLinked() {
+        this.gridModel = new GridModel({
+            ...this.gridModelConfig,
+            selModel: 'single'
+        });
+
+        this.addReaction(
+            {
+                track: () => this.path,
+                run: path => {
+                    if (isEmpty(path)) {
+                        this.error = null;
+                        this.gridModel.clear();
+                    }
+                }
+            },
+            {
+                track: () => [this.selectedRecord, this.readerContentType, this.pathFormat],
+                run: () => this.loadreaderContentTypeAsync(),
+                debounce: 300
+            }
+        );
+    }
+
+    async loadJsonDocsAsync() {
+        if (isEmpty(this.path)) {
+            this.error = null;
+            this.gridModel.clear();
+            return;
+        }
+
+        try {
+            const data = await XH.fetchJson({
+                url: this.docSearchUrl,
+                params: {path: this.path}
+            }).linkTo(this.docLoadTask);
+
+            this.error = null;
+            this.gridModel.loadData(data);
+            this.gridModel.selectFirstAsync();
+        } catch (e) {
+            this.gridModel.clear();
+            this.error = e;
+        }
+    }
+
+    private async loadreaderContentTypeAsync() {
+        if (!this.selectedRecord) {
+            this.matchingNodeCount = 0;
+            this.readerContent = '';
+            return;
+        }
+
+        const {json} = this.selectedRecord.data;
+
+        if (this.readerContentType === 'document') {
+            this.readerContent = JSON.stringify(JSON.parse(json), null, 2);
+            return;
+        }
+
+        let nodes = await XH.fetchJson({
+            url: this.matchingNodesUrl,
+            params: {
+                path: this.path,
+                asPathList: this.readerContentType === 'paths',
+                json
+            }
+        }).linkTo(this.nodeLoadTask);
+
+        this.matchingNodeCount = nodes.length;
+        if (this.asPathList && this.pathFormat === 'XPath') {
+            nodes = nodes.map(it => this.convertToPath(it));
+        }
+        this.readerContent = JSON.stringify(nodes, null, 2);
+    }
+
+    private convertToPath(JSONPath: string): string {
+        return JSONPath.replaceAll(/^\$\['?/g, '/')
+            .replaceAll(/^\$/g, '')
+            .replaceAll(/'?]\['?/g, '/')
+            .replaceAll(/'?]$/g, '');
+    }
+
+    @action
+    private setGroupBy(groupBy: string) {
+        this.groupBy = groupBy;
+
+        // Always select first when regrouping.
+        const groupByArr = groupBy ? groupBy.split(',') : [];
+        this.gridModel.setGroupBy(groupByArr);
+        this.gridModel.preSelectFirstAsync();
+    }
+}

package/admin/tabs/userData/jsonblob/JsonBlobPanel.ts

@@ -5,9 +5,13 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 
-import {fragment} from '@xh/hoist/cmp/layout';
+import * as Col from '@xh/hoist/admin/columns/Rest';
+import * as AdminCol from '@xh/hoist/admin/columns';
+import {hframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
+import {jsonSearchPanel} from '@xh/hoist/admin/jsonsearch/JsonSearchPanel';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {restGrid} from '@xh/hoist/desktop/cmp/rest';
 import {Icon} from '@xh/hoist/icon';
 import {differ} from '../../../differ/Differ';
@@ -17,15 +21,49 @@ export const jsonBlobPanel = hoistCmp.factory({
     model: creates(JsonBlobModel),
 
     render({model}) {
-        return fragment(
-            restGrid({
-                extraToolbarItems: () => {
-                    return button({
-                        icon: Icon.diff(),
-                        text: 'Compare w/ Remote',
-                        onClick: () => model.openDiffer()
-                    });
-                }
+        return hframe(
+            panel({
+                item: restGrid({
+                    extraToolbarItems: () => {
+                        return button({
+                            icon: Icon.diff(),
+                            text: 'Compare w/ Remote',
+                            onClick: () => model.openDiffer()
+                        });
+                    }
+                })
+            }),
+            jsonSearchPanel({
+                docSearchUrl: 'jsonSearch/searchBlobs',
+                matchingNodesUrl: 'jsonSearch/getMatchingNodes',
+                gridModelConfig: {
+                    sortBy: ['owner', 'name'],
+                    store: {
+                        idSpec: 'token'
+                    },
+                    columns: [
+                        {
+                            field: {name: 'token', type: 'string'},
+                            hidden: true,
+                            width: 100
+                        },
+                        {
+                            field: {name: 'type', type: 'string'},
+                            width: 200
+                        },
+                        {
+                            field: {name: 'owner', type: 'string'},
+                            width: 200
+                        },
+                        {...AdminCol.name},
+                        {
+                            field: {name: 'json', type: 'string'},
+                            hidden: true
+                        },
+                        {...Col.lastUpdated}
+                    ]
+                },
+                groupByOptions: ['owner', 'type', 'name']
             }),
             differ({omit: !model.differModel})
         );

package/admin/tabs/userData/prefs/UserPreferencePanel.ts

@@ -4,10 +4,14 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import * as Col from '@xh/hoist/admin/columns/Rest';
+import * as AdminCol from '@xh/hoist/admin/columns';
 import {prefEditorDialog} from '@xh/hoist/admin/tabs/userData/prefs/editor/PrefEditorDialog';
 import {UserPreferenceModel} from '@xh/hoist/admin/tabs/userData/prefs/UserPreferenceModel';
+import {hframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
+import {jsonSearchPanel} from '@xh/hoist/admin/jsonsearch/JsonSearchPanel';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {restGrid} from '@xh/hoist/desktop/cmp/rest';
 import {Icon} from '@xh/hoist/icon';
@@ -16,20 +20,43 @@ export const userPreferencePanel = hoistCmp.factory({
     model: creates(UserPreferenceModel),
 
     render({model}) {
-        return panel({
-            items: [
-                restGrid({
-                    extraToolbarItems: () => {
-                        return button({
-                            icon: Icon.gear(),
-                            text: 'Configure',
-                            onClick: () => (model.showEditorDialog = true)
-                        });
-                    }
-                }),
-                prefEditorDialog()
-            ],
-            mask: 'onLoad'
-        });
+        return hframe(
+            panel({
+                items: [
+                    restGrid({
+                        extraToolbarItems: () => {
+                            return button({
+                                icon: Icon.gear(),
+                                text: 'Configure',
+                                onClick: () => (model.showEditorDialog = true)
+                            });
+                        }
+                    }),
+                    prefEditorDialog()
+                ],
+                mask: 'onLoad'
+            }),
+            jsonSearchPanel({
+                docSearchUrl: 'jsonSearch/searchUserPreferences',
+                matchingNodesUrl: 'jsonSearch/getMatchingNodes',
+                gridModelConfig: {
+                    sortBy: ['name'],
+                    columns: [
+                        {
+                            field: {name: 'owner', type: 'string'},
+                            width: 200
+                        },
+                        {...AdminCol.groupName},
+                        {...AdminCol.name},
+                        {
+                            field: {name: 'json', type: 'string'},
+                            hidden: true
+                        },
+                        {...Col.lastUpdated}
+                    ]
+                },
+                groupByOptions: ['owner', 'groupName', 'name']
+            })
+        );
     }
 });

package/build/types/admin/jsonsearch/JsonSearchPanel.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { GridConfig } from '@xh/hoist/cmp/grid';
+import { SelectOption } from '@xh/hoist/core';
+export interface JsonSearchPanelProps {
+    /** Url to endpoint for searching for matching JSON documents */
+    docSearchUrl: string;
+    /** Url to endpoint for listing matching JSON nodes */
+    matchingNodesUrl: string;
+    /**
+     * Config for GridModel used to display search results.
+     */
+    gridModelConfig: GridConfig;
+    /**
+     * Names of field(s) that can be used to group by.
+     */
+    groupByOptions: SelectOption[];
+}
+export declare const JsonSearchPanel: import("react").FC<import("@xh/hoist/core").DefaultHoistProps<import("@xh/hoist/core").HoistModel>>, jsonSearchPanel: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<import("@xh/hoist/core").HoistModel>>;

package/build/types/admin/jsonsearch/impl/JsonSearchPanelImplModel.d.ts

@@ -0,0 +1,33 @@
+import { GridModel } from '@xh/hoist/cmp/grid';
+import { GroupingChooserModel } from '@xh/hoist/cmp/grouping';
+import { HoistModel, TaskObserver } from '@xh/hoist/core';
+/**
+ * @internal
+ */
+export declare class JsonSearchPanelImplModel extends HoistModel {
+    xhImpl: boolean;
+    gridModel: GridModel;
+    groupingChooserModel: GroupingChooserModel;
+    docLoadTask: TaskObserver;
+    nodeLoadTask: TaskObserver;
+    groupBy: string;
+    error: any;
+    path: string;
+    readerContentType: 'document' | 'paths' | 'values';
+    pathFormat: 'XPath' | 'JSONPath';
+    readerContent: string;
+    matchingNodeCount: number;
+    get asPathList(): boolean;
+    get queryBuffer(): number;
+    get docSearchUrl(): string;
+    get matchingNodesUrl(): string;
+    get selectedRecord(): import("../../../data").StoreRecord;
+    get gridModelConfig(): any;
+    get groupByOptions(): any[];
+    constructor();
+    onLinked(): void;
+    loadJsonDocsAsync(): Promise<void>;
+    private loadreaderContentTypeAsync;
+    private convertToPath;
+    private setGroupBy;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "73.0.0-SNAPSHOT.1738003454248",
+  "version": "73.0.0-SNAPSHOT.1738073624805",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",