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

package/admin/jsonsearch/JsonSearchPanel.ts

@@ -9,85 +9,124 @@ 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 {
+    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 {popover} from '@xh/hoist/kit/blueprint';
+import {dialog, popover} from '@xh/hoist/kit/blueprint';
 import {clipboardButton} from '@xh/hoist/desktop/cmp/clipboard';
 import {JsonSearchPanelImplModel} from './impl/JsonSearchPanelImplModel';
 
-export interface JsonSearchPanelProps extends HoistProps {
+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;
 
-    /** 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.
+     * Names of fields that can be used to group by.
      */
     groupByOptions: Array<SelectOption | any>;
 }
 
-export const [JsonSearchPanel, jsonSearchPanel] = hoistCmp.withFactory<JsonSearchPanelProps>({
+export const [JsonSearchButton, jsonSearchButton] = hoistCmp.withFactory<JsonSearchButtonProps>({
     displayName: 'JsonSearchPanel',
 
     render() {
-        const impl = useLocalModel(JsonSearchPanelImplModel),
-            {error} = impl;
+        const impl = useLocalModel(JsonSearchPanelImplModel);
 
-        return panel({
-            title: 'JSON Path Search',
-            icon: Icon.json(),
-            modelConfig: {
-                side: 'right',
-                defaultSize: '75%',
-                collapsible: true,
-                defaultCollapsed: true
+        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'
             },
-            compactHeader: true,
-            tbar: searchTbar({model: impl}),
-            flex: 1,
+            icon: Icon.json(),
+            isOpen: true,
+            className: 'xh-admin-diff-detail',
+            onClose: () => model.toggleSearchIsOpen(),
             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
+                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
+                                    }
                                 }),
-                                item: jsonInput({
-                                    model: impl,
-                                    bind: 'readerContent',
-                                    flex: 1,
-                                    width: '100%',
-                                    readonly: true,
-                                    showCopyButton: 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
+                                    })
                                 })
-                            })
-                        ]
-                    })
-                ]
+                            ]
+                        })
+                    ]
+                })
             })
         });
     }
@@ -147,14 +186,7 @@ const helpButton = hoistCmp.factory({
                 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}) =>
+                        items: queryExamples.map(({query, explanation}) =>
                             li({
                                 key: query,
                                 items: [
@@ -202,12 +234,8 @@ const readerTbar = hoistCmp.factory<JsonSearchPanelImplModel>(({model}) => {
                         value: 'document'
                     }),
                     button({
-                        text: 'Matching Paths',
-                        value: 'paths'
-                    }),
-                    button({
-                        text: 'Matching Values',
-                        value: 'values'
+                        text: 'Matches',
+                        value: 'matches'
                     })
                 ]
             }),
@@ -228,6 +256,7 @@ const nodeBbar = hoistCmp.factory<JsonSearchPanelImplModel>(({model}) => {
             bind: 'pathFormat',
             minimal: true,
             outlined: true,
+            disabled: !model.selectedRecord,
             items: [
                 button({
                     text: 'XPath',
@@ -241,3 +270,31 @@ const nodeBbar = hoistCmp.factory<JsonSearchPanelImplModel>(({model}) => {
         })
     );
 });
+
+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

@@ -9,7 +9,7 @@ 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';
+import {isEmpty, zipWith} from 'lodash';
 
 /**
  * @internal
@@ -17,36 +17,31 @@ import {isEmpty} from 'lodash';
 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' | 'paths' | 'values' = 'values';
+    @bindable readerContentType: 'document' | 'matches' = 'matches';
     @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 subjectName(): string {
+        return this.componentProps.subjectName;
     }
 
     get docSearchUrl(): string {
         return this.componentProps.docSearchUrl;
     }
 
-    get matchingNodesUrl(): string {
-        return this.componentProps.matchingNodesUrl;
-    }
-
     get selectedRecord() {
         return this.gridModel.selectedRecord;
     }
@@ -59,6 +54,11 @@ export class JsonSearchPanelImplModel extends HoistModel {
         return [...this.componentProps.groupByOptions, {value: null, label: 'None'}];
     }
 
+    @action
+    toggleSearchIsOpen() {
+        this.isOpen = !this.isOpen;
+    }
+
     constructor() {
         super();
         makeObservable(this);
@@ -82,7 +82,7 @@ export class JsonSearchPanelImplModel extends HoistModel {
             },
             {
                 track: () => [this.selectedRecord, this.readerContentType, this.pathFormat],
-                run: () => this.loadreaderContentTypeAsync(),
+                run: () => this.loadreaderContentAsync(),
                 debounce: 300
             }
         );
@@ -110,7 +110,7 @@ export class JsonSearchPanelImplModel extends HoistModel {
         }
     }
 
-    private async loadreaderContentTypeAsync() {
+    private async loadreaderContentAsync() {
         if (!this.selectedRecord) {
             this.matchingNodeCount = 0;
             this.readerContent = '';
@@ -128,19 +128,21 @@ export class JsonSearchPanelImplModel extends HoistModel {
             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.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 convertToPath(JSONPath: string): string {
+    private convertToXPath(JSONPath: string): string {
         return JSONPath.replaceAll(/^\$\['?/g, '/')
             .replaceAll(/^\$/g, '')
             .replaceAll(/'?]\['?/g, '/')

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

@@ -10,9 +10,10 @@ 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 {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';
@@ -24,46 +25,44 @@ export const jsonBlobPanel = hoistCmp.factory({
         return hframe(
             panel({
                 item: restGrid({
-                    extraToolbarItems: () => {
-                        return button({
+                    extraToolbarItems: () => [
+                        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}
+                        }),
+                        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']
+                        })
                     ]
-                },
-                groupByOptions: ['owner', 'type', 'name']
+                })
             }),
             differ({omit: !model.differModel})
         );

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

@@ -12,9 +12,10 @@ import {UserPreferenceModel} from '@xh/hoist/admin/tabs/userData/prefs/UserPrefe
 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 {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({
@@ -25,38 +26,39 @@ export const userPreferencePanel = hoistCmp.factory({
             panel({
                 items: [
                     restGrid({
-                        extraToolbarItems: () => {
-                            return button({
+                        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'
-            }),
-            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

@@ -1,18 +1,18 @@
 /// <reference types="react" />
 import { GridConfig } from '@xh/hoist/cmp/grid';
 import { HoistProps, SelectOption } from '@xh/hoist/core';
-export interface JsonSearchPanelProps extends HoistProps {
+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;
-    /** 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.
+     * Names of fields that can be used to group by.
      */
     groupByOptions: Array<SelectOption | any>;
 }
-export declare const JsonSearchPanel: import("react").FC<JsonSearchPanelProps>, jsonSearchPanel: import("@xh/hoist/core").ElementFactory<JsonSearchPanelProps>;
+export declare const JsonSearchButton: import("react").FC<JsonSearchButtonProps>, jsonSearchButton: import("@xh/hoist/core").ElementFactory<JsonSearchButtonProps>;

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

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

package/package.json

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