@xh/hoist 73.0.0-SNAPSHOT.1738098319236 → 73.0.0-SNAPSHOT.1738169109530

package/admin/jsonsearch/JsonSearchPanel.ts

@@ -0,0 +1,300 @@
+/*
+ * 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,
+    fragment,
+    h4,
+    hframe,
+    label,
+    li,
+    span,
+    ul,
+    vbox
+} from '@xh/hoist/cmp/layout';
+import {hoistCmp, HoistProps, 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 {dialog, popover} from '@xh/hoist/kit/blueprint';
+import {clipboardButton} from '@xh/hoist/desktop/cmp/clipboard';
+import {JsonSearchPanelImplModel} from './impl/JsonSearchPanelImplModel';
+
+export interface JsonSearchButtonProps extends HoistProps {
+    /** Name of the type of Json Documents being searched.  This appears in the dialog title. */
+    subjectName: string;
+
+    /** Url to endpoint for searching for matching JSON documents */
+    docSearchUrl: string;
+
+    /**
+     * Config for GridModel used to display search results.
+     */
+    gridModelConfig: GridConfig;
+
+    /**
+     * Names of fields that can be used to group by.
+     */
+    groupByOptions: Array<SelectOption | any>;
+}
+
+export const [JsonSearchButton, jsonSearchButton] = hoistCmp.withFactory<JsonSearchButtonProps>({
+    displayName: 'JsonSearchPanel',
+
+    render() {
+        const impl = useLocalModel(JsonSearchPanelImplModel);
+
+        return fragment(
+            button({
+                icon: Icon.json(),
+                text: 'JSON Search',
+                onClick: () => impl.toggleSearchIsOpen()
+            }),
+            jsonSearchDialog({
+                omit: !impl.isOpen,
+                model: impl
+            })
+        );
+    }
+});
+
+const jsonSearchDialog = hoistCmp.factory<JsonSearchPanelImplModel>({
+    displayName: 'JsonSearchPanel',
+
+    render({model}) {
+        const {error, subjectName} = model;
+
+        return dialog({
+            title: `${subjectName} Json Search`,
+            style: {
+                width: '90vw',
+                height: '90vh'
+            },
+            icon: Icon.json(),
+            isOpen: true,
+            className: 'xh-admin-diff-detail',
+            onClose: () => model.toggleSearchIsOpen(),
+            item: panel({
+                tbar: searchTbar(),
+                item: panel({
+                    mask: model.docLoadTask,
+                    items: [
+                        errorMessage({
+                            error,
+                            title: error?.name ? startCase(error.name) : undefined
+                        }),
+                        hframe({
+                            omit: error,
+                            items: [
+                                panel({
+                                    item: grid({model: model.gridModel}),
+                                    modelConfig: {
+                                        side: 'left',
+                                        defaultSize: '30%',
+                                        collapsible: true,
+                                        defaultCollapsed: false,
+                                        resizable: true
+                                    }
+                                }),
+                                panel({
+                                    mask: model.nodeLoadTask,
+                                    tbar: readerTbar(),
+                                    bbar: nodeBbar({
+                                        omit: model.readerContentType !== 'matches',
+                                        model
+                                    }),
+                                    item: jsonInput({
+                                        model,
+                                        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({
+                        items: queryExamples.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: 'Matches',
+                        value: 'matches'
+                    })
+                ]
+            }),
+            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,
+            disabled: !model.selectedRecord,
+            items: [
+                button({
+                    text: 'XPath',
+                    value: 'XPath'
+                }),
+                button({
+                    text: 'JSONPath',
+                    value: 'JSONPath'
+                })
+            ]
+        })
+    );
+});
+
+const queryExamples = [
+    {
+        query: '$',
+        explanation: 'Return the root object'
+    },
+    {
+        query: '$..*',
+        explanation: 'Return all nodes, recursively'
+    },
+    {
+        query: '$..[?(@.colId && @.width && @.hidden != true)]',
+        explanation:
+            'Find all nodes with a property "colId" and a property "width" and a property "hidden" not equal to true'
+    },
+    {
+        query: '$..[?(@.colId && @.width)]',
+        explanation: 'Find all nodes with a property "colId" and a property "width"'
+    },
+    {
+        query: "$..[?(@.colId == 'trader')]",
+        explanation: 'Find all nodes with a property "colId" equal to "trader"'
+    },
+    {
+        query: '$..grid[?(@.version == 1)]',
+        explanation: 'Find all grid nodes with a property "version" equal to 1'
+    }
+];

package/admin/jsonsearch/impl/JsonSearchPanelImplModel.ts

@@ -0,0 +1,161 @@
+/*
+ * 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, zipWith} from 'lodash';
+
+/**
+ * @internal
+ */
+export class JsonSearchPanelImplModel extends HoistModel {
+    override xhImpl = true;
+
+    private matchingNodesUrl = 'jsonSearch/getMatchingNodes';
+
+    @managed gridModel: GridModel;
+    @managed groupingChooserModel: GroupingChooserModel;
+    @managed docLoadTask: TaskObserver = TaskObserver.trackLast();
+    @managed nodeLoadTask: TaskObserver = TaskObserver.trackLast();
+
+    @observable groupBy: string = null;
+    @observable isOpen: boolean = false;
+
+    @bindable.ref error = null;
+    @bindable path: string = '';
+    @bindable readerContentType: 'document' | 'matches' = 'matches';
+    @bindable pathFormat: 'XPath' | 'JSONPath' = 'XPath';
+    @bindable readerContent: string = '';
+    @bindable matchingNodeCount: number = 0;
+
+    get subjectName(): string {
+        return this.componentProps.subjectName;
+    }
+
+    get docSearchUrl(): string {
+        return this.componentProps.docSearchUrl;
+    }
+
+    get selectedRecord() {
+        return this.gridModel.selectedRecord;
+    }
+
+    get gridModelConfig() {
+        return this.componentProps.gridModelConfig;
+    }
+
+    get groupByOptions() {
+        return [...this.componentProps.groupByOptions, {value: null, label: 'None'}];
+    }
+
+    @action
+    toggleSearchIsOpen() {
+        this.isOpen = !this.isOpen;
+    }
+
+    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.loadreaderContentAsync(),
+                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 loadreaderContentAsync() {
+        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,
+                json
+            }
+        }).linkTo(this.nodeLoadTask);
+
+        this.matchingNodeCount = nodes.paths.length;
+        nodes = zipWith(nodes.paths, nodes.values, (path: string, value) => {
+            return {
+                path: this.pathFormat === 'XPath' ? this.convertToXPath(path) : path,
+                value
+            };
+        });
+        this.readerContent = JSON.stringify(nodes, null, 2);
+    }
+
+    private convertToXPath(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/general/config/ConfigPanel.ts

@@ -4,10 +4,14 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import * as AdminCol from '@xh/hoist/admin/columns';
+import * as Col from '@xh/hoist/admin/columns/Rest';
+import {jsonSearchButton} from '@xh/hoist/admin/jsonsearch/JsonSearchPanel';
 import {fragment} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {restGrid} from '@xh/hoist/desktop/cmp/rest';
+import {toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
 import {differ} from '../../../differ/Differ';
 import {regroupDialog} from '../../../regroup/RegroupDialog';
@@ -20,13 +24,35 @@ export const configPanel = hoistCmp.factory({
         return fragment(
             restGrid({
                 testId: 'config',
-                extraToolbarItems: () => {
-                    return button({
+                extraToolbarItems: () => [
+                    button({
                         icon: Icon.diff(),
                         text: 'Compare w/ Remote',
                         onClick: () => model.openDiffer()
-                    });
-                }
+                    }),
+                    toolbarSep(),
+                    jsonSearchButton({
+                        subjectName: 'Config',
+                        docSearchUrl: 'jsonSearch/searchConfigs',
+                        gridModelConfig: {
+                            sortBy: ['groupName', 'name', 'owner'],
+                            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']
+                    })
+                ]
             }),
             differ({omit: !model.differModel}),
             regroupDialog()

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

@@ -5,10 +5,15 @@
  * 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 {jsonSearchButton} from '@xh/hoist/admin/jsonsearch/JsonSearchPanel';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {restGrid} from '@xh/hoist/desktop/cmp/rest';
+import {toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
 import {differ} from '../../../differ/Differ';
 import {JsonBlobModel} from './JsonBlobModel';
@@ -17,15 +22,47 @@ 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: () => [
+                        button({
+                            icon: Icon.diff(),
+                            text: 'Compare w/ Remote',
+                            onClick: () => model.openDiffer()
+                        }),
+                        toolbarSep(),
+                        jsonSearchButton({
+                            subjectName: 'JSON Blob',
+                            docSearchUrl: 'jsonSearch/searchBlobs',
+                            gridModelConfig: {
+                                sortBy: ['type', 'name', 'owner'],
+                                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,32 +4,62 @@
  *
  * 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 {jsonSearchButton} from '@xh/hoist/admin/jsonsearch/JsonSearchPanel';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {restGrid} from '@xh/hoist/desktop/cmp/rest';
+import {toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
 
 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: () => [
+                            button({
+                                icon: Icon.gear(),
+                                text: 'Configure',
+                                onClick: () => (model.showEditorDialog = true)
+                            }),
+                            toolbarSep(),
+                            jsonSearchButton({
+                                subjectName: 'User Preference',
+                                docSearchUrl: 'jsonSearch/searchUserPreferences',
+                                gridModelConfig: {
+                                    sortBy: ['groupName', 'name', 'owner'],
+                                    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']
+                            })
+                        ]
+                    }),
+                    prefEditorDialog()
+                ],
+                mask: 'onLoad'
+            })
+        );
     }
 });

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { GridConfig } from '@xh/hoist/cmp/grid';
+import { HoistProps, SelectOption } from '@xh/hoist/core';
+export interface JsonSearchButtonProps extends HoistProps {
+    /** Name of the type of Json Documents being searched.  This appears in the dialog title. */
+    subjectName: string;
+    /** Url to endpoint for searching for matching JSON documents */
+    docSearchUrl: string;
+    /**
+     * Config for GridModel used to display search results.
+     */
+    gridModelConfig: GridConfig;
+    /**
+     * Names of fields that can be used to group by.
+     */
+    groupByOptions: Array<SelectOption | any>;
+}
+export declare const JsonSearchButton: import("react").FC<JsonSearchButtonProps>, jsonSearchButton: import("@xh/hoist/core").ElementFactory<JsonSearchButtonProps>;