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

package/admin/jsonsearch/JsonSearchPanel.ts

@@ -5,23 +5,41 @@
  * 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 {JsonBlobModel} from '@xh/hoist/admin/tabs/userData/jsonblob/JsonBlobModel';
-import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
+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, useLocalModel} from '@xh/hoist/core';
+import {hoistCmp, SelectOption, useLocalModel} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
-import {buttonGroupInput, jsonInput, textInput} from '@xh/hoist/desktop/cmp/input';
+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 {startCase} from 'lodash';
-
 import {JsonSearchPanelImplModel} from './impl/JsonSearchPanelImplModel';
 
-export const [JsonSearchPanel, jsonSearchPanel] = hoistCmp.withFactory<JsonBlobModel>({
+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;
@@ -80,6 +98,14 @@ const searchTbar = hoistCmp.factory<JsonSearchPanelImplModel>(({model}) => {
         pathField({model}),
         helpButton(),
         toolbarSep(),
+        span('Group by:'),
+        select({
+            bind: 'groupBy',
+            options: model.groupByOptions,
+            width: 160,
+            enableFilter: false
+        }),
+        toolbarSep(),
         gridCountLabel({
             gridModel: model.gridModel,
             unit: 'document'

package/admin/jsonsearch/impl/JsonSearchPanelImplModel.ts

@@ -6,8 +6,9 @@
  */
 
 import {GridModel} from '@xh/hoist/cmp/grid';
+import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
 import {HoistModel, managed, TaskObserver, XH} from '@xh/hoist/core';
-import {bindable, makeObservable} from '@xh/hoist/mobx';
+import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
 import {isEmpty} from 'lodash';
 
 /**
@@ -17,9 +18,12 @@ 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';
@@ -51,6 +55,10 @@ export class JsonSearchPanelImplModel extends HoistModel {
         return this.componentProps.gridModelConfig;
     }
 
+    get groupByOptions() {
+        return [...this.componentProps.groupByOptions, {value: null, label: 'None'}];
+    }
+
     constructor() {
         super();
         makeObservable(this);
@@ -138,4 +146,14 @@ export class JsonSearchPanelImplModel extends HoistModel {
             .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

@@ -34,14 +34,13 @@ export const jsonBlobPanel = hoistCmp.factory({
                 })
             }),
             jsonSearchPanel({
-                docSearchUrl: 'jsonBlobSearchAdmin/searchByJsonPath',
-                matchingNodesUrl: 'jsonBlobSearchAdmin/getMatchingNodes',
+                docSearchUrl: 'jsonSearch/searchBlobs',
+                matchingNodesUrl: 'jsonSearch/getMatchingNodes',
                 gridModelConfig: {
                     sortBy: ['owner', 'name'],
                     store: {
                         idSpec: 'token'
                     },
-                    groupBy: 'type',
                     columns: [
                         {
                             field: {name: 'token', type: 'string'},
@@ -63,7 +62,8 @@ export const jsonBlobPanel = hoistCmp.factory({
                         },
                         {...Col.lastUpdated}
                     ]
-                }
+                },
+                groupByOptions: ['owner', 'type', 'name']
             }),
             differ({omit: !model.differModel})
         );

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

@@ -37,11 +37,10 @@ export const userPreferencePanel = hoistCmp.factory({
                 mask: 'onLoad'
             }),
             jsonSearchPanel({
-                docSearchUrl: 'preferenceJsonSearchAdmin/searchByJsonPath',
-                matchingNodesUrl: 'preferenceJsonSearchAdmin/getMatchingNodes',
+                docSearchUrl: 'jsonSearch/searchUserPreferences',
+                matchingNodesUrl: 'jsonSearch/getMatchingNodes',
                 gridModelConfig: {
                     sortBy: ['name'],
-                    groupBy: 'groupName',
                     columns: [
                         {
                             field: {name: 'owner', type: 'string'},
@@ -55,7 +54,8 @@ export const userPreferencePanel = hoistCmp.factory({
                         },
                         {...Col.lastUpdated}
                     ]
-                }
+                },
+                groupByOptions: ['owner', 'groupName', 'name']
             })
         );
     }

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

@@ -1,3 +1,18 @@
 /// <reference types="react" />
-import { JsonBlobModel } from '@xh/hoist/admin/tabs/userData/jsonblob/JsonBlobModel';
-export declare const JsonSearchPanel: import("react").FC<import("@xh/hoist/core").DefaultHoistProps<JsonBlobModel>>, jsonSearchPanel: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<JsonBlobModel>>;
+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

@@ -1,4 +1,5 @@
 import { GridModel } from '@xh/hoist/cmp/grid';
+import { GroupingChooserModel } from '@xh/hoist/cmp/grouping';
 import { HoistModel, TaskObserver } from '@xh/hoist/core';
 /**
  * @internal
@@ -6,8 +7,10 @@ import { HoistModel, TaskObserver } from '@xh/hoist/core';
 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';
@@ -20,9 +23,11 @@ export declare class JsonSearchPanelImplModel extends HoistModel {
     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.1738003189230",
+  "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",