@xh/hoist 67.0.0-SNAPSHOT.1725047531773 → 67.0.0-SNAPSHOT.1725049253748

package/CHANGELOG.md

@@ -21,10 +21,12 @@
 * New property `FetchOptions.asJson` to instruct `FetchService` to decode an HTTP response as JSON.
   Note that `FetchService` methods suffixed with `Json` will set this property automatically.
 * `GridModel` will now accept `contextMenu: false` to omit context menus.
-* New bindable `AppContainerModel.intializingLoadMaskMessage` property to allow apps to customize
+* New bindable property `AppContainerModel.intializingLoadMaskMessage` to allow apps to customize
   the loading mask message shown during app initialization.
 * Enhanced `select` component with new `emptyValue` prop, allowing for a custom value to be returned
   when the control is empty (vs default of `null`). Expected usage is `[]` when `enableMulti:true`.
+* New `GroupingChooserModel.setDimensions()` API, to support updating available dimensions on an
+  already constructed `GroupingChooserModel`.
 
 ### 🐞 Bug Fixes
 

package/admin/tabs/cluster/connpool/ConnPoolMonitorPanel.ts

@@ -35,6 +35,7 @@ export const connPoolMonitorPanel = hoistCmp.factory({
                     omit: readonly,
                     onClick: () => model.takeSnapshotAsync()
                 }),
+                '-',
                 button({
                     text: 'Reset Stats',
                     icon: Icon.reset(),

package/admin/tabs/cluster/hzobject/HzObjectModel.ts

@@ -18,9 +18,9 @@ import {isEmpty} from 'lodash';
 
 export class HzObjectModel extends BaseInstanceModel {
     clearAction: RecordActionSpec = {
-        icon: Icon.reset(),
         text: 'Clear Objects',
-        intent: 'danger',
+        icon: Icon.reset(),
+        intent: 'warning',
         actionFn: () => this.clearAsync(),
         displayFn: ({selectedRecords}) => ({
             hidden: AppModel.readonly,
@@ -80,8 +80,9 @@ export class HzObjectModel extends BaseInstanceModel {
                 ),
                 confirmProps: {
                     text: 'Clear Objects',
+                    icon: Icon.reset(),
+                    intent: 'warning',
                     outlined: true,
-                    intent: 'danger',
                     autoFocus: false
                 }
             }))
@@ -115,7 +116,8 @@ export class HzObjectModel extends BaseInstanceModel {
             ),
             confirmProps: {
                 text: 'Clear Hibernate Caches',
-                intent: 'danger',
+                icon: Icon.reset(),
+                intent: 'warning',
                 outlined: true,
                 autoFocus: false
             }

package/admin/tabs/cluster/hzobject/HzObjectPanel.ts

@@ -25,10 +25,11 @@ export const hzObjectPanel = hoistCmp.factory({
                     selModel: model.gridModel.selModel,
                     actions: [model.clearAction]
                 }),
+                '-',
                 button({
                     text: 'Clear Hibernate Caches',
                     icon: Icon.reset(),
-                    intent: 'danger',
+                    intent: 'warning',
                     tooltip: 'Clear the Hibernate caches using the native Hibernate API',
                     onClick: () => model.clearHibernateCachesAsync()
                 }),

package/admin/tabs/cluster/memory/MemoryMonitorPanel.ts

@@ -36,12 +36,14 @@ export const memoryMonitorPanel = hoistCmp.factory({
                     omit: readonly,
                     onClick: () => model.takeSnapshotAsync()
                 }),
+                '-',
                 button({
                     text: 'Request GC',
                     icon: Icon.trash(),
                     omit: readonly,
                     onClick: () => model.requestGcAsync()
                 }),
+                '-',
                 button({
                     text: 'Dump Heap',
                     icon: Icon.fileArchive(),

package/admin/tabs/cluster/services/ServiceModel.ts

@@ -18,9 +18,9 @@ import {isEmpty, lowerFirst} from 'lodash';
 
 export class ServiceModel extends BaseInstanceModel {
     clearCachesAction: RecordActionSpec = {
-        icon: Icon.reset(),
         text: 'Clear Caches',
-        intent: 'danger',
+        icon: Icon.reset(),
+        intent: 'warning',
         actionFn: () => this.clearCachesAsync(false),
         displayFn: () => ({
             hidden: AppModel.readonly,
@@ -30,9 +30,9 @@ export class ServiceModel extends BaseInstanceModel {
     };
 
     clearClusterCachesAction: RecordActionSpec = {
-        icon: Icon.reset(),
         text: 'Clear Caches (entire cluster)',
-        intent: 'danger',
+        icon: Icon.reset(),
+        intent: 'warning',
         actionFn: () => this.clearCachesAsync(true),
         displayFn: () => ({
             hidden: AppModel.readonly || !this.parent.isMultiInstance
@@ -91,7 +91,8 @@ export class ServiceModel extends BaseInstanceModel {
             ),
             confirmProps: {
                 text: 'Clear Caches',
-                intent: 'danger',
+                icon: Icon.reset(),
+                intent: 'warning',
                 outlined: true,
                 autoFocus: false
             }

package/admin/tabs/cluster/websocket/WebSocketModel.ts

@@ -117,8 +117,8 @@ export class WebSocketModel extends BaseInstanceModel {
         if (isEmpty(selectedRecords)) return;
 
         const message = await XH.prompt<string>({
-            title: 'Force suspend',
-            icon: Icon.stopCircle(),
+            title: 'Please confirm...',
+            icon: Icon.warning(),
             confirmProps: {
                 text: 'Force Suspend',
                 icon: Icon.stopCircle(),

package/admin/tabs/userData/roles/RolePanel.ts

@@ -45,7 +45,12 @@ export const rolePanel = hoistCmp.factory({
                     }),
                     '-',
                     filterChooser({flex: 1}),
-                    switchInput({bind: 'showInGroups', label: 'Show in Groups', labelSide: 'left'})
+                    '-',
+                    switchInput({
+                        bind: 'showInGroups',
+                        label: 'Group by Category',
+                        labelSide: 'left'
+                    })
                 ],
                 item: hframe(vframe(grid(), roleGraph()), detailsPanel())
             }),

package/admin/tabs/userData/roles/graph/RoleGraph.ts

@@ -6,7 +6,7 @@
  */
 import {chart} from '@xh/hoist/cmp/chart';
 import {errorBoundary} from '@xh/hoist/cmp/error';
-import {div, hspacer, placeholder} from '@xh/hoist/cmp/layout';
+import {div, filler, placeholder, span} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {buttonGroupInput, slider, switchInput} from '@xh/hoist/desktop/cmp/input';
@@ -29,7 +29,7 @@ export const roleGraph = hoistCmp.factory({
         return panel({
             compactHeader: true,
             icon: Icon.treeGraph(),
-            title: role ? `Relationships - ${role.name} ` : 'Relationships',
+            title: role ? `${role.name} Relationships` : 'Relationships',
             item: div({
                 item: div({
                     style: {margin: 'auto'},
@@ -48,15 +48,31 @@ export const roleGraph = hoistCmp.factory({
                         items: [
                             button({
                                 value: 'effective',
-                                text: `Granted to ${role?.effectiveRoles.length} ${pluralize('role', role?.effectiveRoles.length)}`
+                                text: `Granted to ${pluralize('role', role?.effectiveRoles.length, true)}`
                             }),
                             button({
                                 value: 'inherited',
-                                text: `Inheriting from ${role?.inheritedRoles.length} ${pluralize('role', role?.inheritedRoles.length)}`
+                                text: `Inheriting from ${pluralize('role', role?.inheritedRoles.length, true)}`
                             })
                         ]
                     }),
-                    hspacer(10),
+                    filler(),
+                    span('Limit to one level'),
+                    switchInput({
+                        bind: 'limitToOneLevel'
+                    }),
+                    '-',
+                    span('Zoom'),
+                    slider({
+                        paddingLeft: 2,
+                        overflow: 'visible',
+                        bind: 'widthScale',
+                        min: 0,
+                        max: 2,
+                        stepSize: 0.005,
+                        labelRenderer: false
+                    }),
+                    '-',
                     buttonGroupInput({
                         bind: 'inverted',
                         items: [
@@ -69,21 +85,6 @@ export const roleGraph = hoistCmp.factory({
                                 icon: Icon.treeGraph({rotation: 270})
                             })
                         ]
-                    }),
-                    hspacer(10),
-                    'Zoom',
-                    slider({
-                        paddingLeft: 2,
-                        overflow: 'visible',
-                        bind: 'widthScale',
-                        min: 0,
-                        max: 2,
-                        stepSize: 0.005,
-                        labelRenderer: false
-                    }),
-                    'Limit to one level',
-                    switchInput({
-                        bind: 'limitToOneLevel'
                     })
                 ],
                 omit: !role

package/build/types/cmp/grouping/GroupingChooserModel.d.ts

@@ -42,8 +42,6 @@ export interface GroupingChooserPersistOptions extends PersistOptions {
 export declare class GroupingChooserModel extends HoistModel {
     value: string[];
     favorites: string[][];
-    dimensions: Record<string, DimensionSpec>;
-    dimensionNames: string[];
     allowEmpty: boolean;
     maxDepth: number;
     commitOnChange: boolean;
@@ -54,10 +52,14 @@ export declare class GroupingChooserModel extends HoistModel {
     editorIsOpen: boolean;
     favoritesIsOpen: boolean;
     popoverRef: import("react").RefObject<HTMLElement> & import("react").RefCallback<HTMLElement>;
+    private dimensions;
+    private dimensionNames;
     get availableDims(): string[];
+    get dimensionSpecs(): DimensionSpec[];
     get isValid(): boolean;
     get isAddEnabled(): boolean;
     constructor({ dimensions, initialValue, initialFavorites, persistWith, allowEmpty, maxDepth, commitOnChange }: GroupingChooserConfig);
+    setDimensions(dimensions: Array<DimensionSpec | string>): void;
     setValue(value: string[]): void;
     toggleEditor(): void;
     toggleFavoritesMenu(): void;
@@ -67,13 +69,7 @@ export declare class GroupingChooserModel extends HoistModel {
     removePendingDimAtIdx(idx: number): void;
     movePendingDimToIndex(dimName: string, toIdx: number): void;
     commitPendingValueAndClose(): void;
-    validateValue(value: any): boolean;
-    normalizeDimensions(dims: Array<DimensionSpec | string>): Record<string, DimensionSpec>;
-    createDimension(src: DimensionSpec | string): {
-        /** Shortname or code (almost always a `CubeField.name`). */
-        name: string;
-        displayName: string;
-    };
+    validateValue(value: string[]): boolean;
     getValueLabel(value: string[]): string;
     getDimDisplayName(dimName: string): string;
     onDragEnd(result: any): void;
@@ -86,4 +82,7 @@ export declare class GroupingChooserModel extends HoistModel {
     removeFavorite(value: string[]): void;
     isFavorite(value: string[]): boolean;
     get persistState(): PlainObject;
+    private normalizeDimensions;
+    private createDimension;
+    private removeUnknownDimsFromValue;
 }

package/cmp/grouping/GroupingChooserModel.ts

@@ -13,21 +13,11 @@ import {
     PlainObject,
     XH
 } from '@xh/hoist/core';
-import {action, computed, observable, makeObservable} from '@xh/hoist/mobx';
 import {genDisplayName} from '@xh/hoist/data';
-import {throwIf} from '@xh/hoist/utils/js';
+import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
+import {executeIfFunction, throwIf} from '@xh/hoist/utils/js';
 import {createObservableRef} from '@xh/hoist/utils/react';
-import {
-    cloneDeep,
-    difference,
-    isFunction,
-    isArray,
-    isEmpty,
-    isEqual,
-    isString,
-    keys,
-    sortBy
-} from 'lodash';
+import {cloneDeep, difference, isArray, isEmpty, isEqual, isString, keys, sortBy} from 'lodash';
 
 export interface GroupingChooserConfig {
     /**
@@ -81,11 +71,8 @@ export interface GroupingChooserPersistOptions extends PersistOptions {
 
 export class GroupingChooserModel extends HoistModel {
     @observable.ref value: string[];
-
     @observable.ref favorites: string[][] = [];
 
-    dimensions: Record<string, DimensionSpec>;
-    dimensionNames: string[];
     allowEmpty: boolean;
     maxDepth: number;
     commitOnChange: boolean;
@@ -98,14 +85,22 @@ export class GroupingChooserModel extends HoistModel {
     @observable.ref pendingValue: string[] = [];
     @observable editorIsOpen: boolean = false;
     @observable favoritesIsOpen: boolean = false;
-
     popoverRef = createObservableRef<HTMLElement>();
 
+    // Internal state
+    @observable.ref private dimensions: Record<string, DimensionSpec>;
+    @observable.ref private dimensionNames: string[];
+
     @computed
     get availableDims(): string[] {
         return difference(this.dimensionNames, this.pendingValue);
     }
 
+    @computed
+    get dimensionSpecs(): DimensionSpec[] {
+        return Object.values(this.dimensions);
+    }
+
     @computed
     get isValid(): boolean {
         return this.validateValue(this.pendingValue);
@@ -132,17 +127,15 @@ export class GroupingChooserModel extends HoistModel {
         super();
         makeObservable(this);
 
-        this.dimensions = this.normalizeDimensions(dimensions);
-        this.dimensionNames = keys(this.dimensions);
         this.allowEmpty = allowEmpty;
         this.maxDepth = maxDepth;
         this.commitOnChange = commitOnChange;
 
-        throwIf(isEmpty(this.dimensions), 'Must provide valid dimensions available for selection.');
+        this.setDimensions(dimensions);
 
         // Read and validate value and favorites
-        let value = isFunction(initialValue) ? initialValue() : initialValue,
-            favorites = isFunction(initialFavorites) ? initialFavorites() : initialFavorites;
+        let value = executeIfFunction(initialValue),
+            favorites = executeIfFunction(initialFavorites);
 
         throwIf(isEmpty(value) && !this.allowEmpty, 'Initial value cannot be empty.');
         throwIf(!this.validateValue(value), 'Initial value is invalid.');
@@ -187,6 +180,18 @@ export class GroupingChooserModel extends HoistModel {
         this.setFavorites(favorites);
     }
 
+    @action
+    setDimensions(dimensions: Array<DimensionSpec | string>) {
+        throwIf(
+            isEmpty(dimensions) && !this.allowEmpty,
+            'Must provide valid dimensions available for selection.'
+        );
+
+        this.dimensions = this.normalizeDimensions(dimensions);
+        this.dimensionNames = keys(this.dimensions);
+        this.removeUnknownDimsFromValue();
+    }
+
     @action
     setValue(value: string[]) {
         if (!this.validateValue(value)) {
@@ -259,37 +264,18 @@ export class GroupingChooserModel extends HoistModel {
         this.closePopover();
     }
 
-    validateValue(value) {
+    validateValue(value: string[]) {
         if (!isArray(value)) return false;
         if (isEmpty(value) && !this.allowEmpty) return false;
         return value.every(dim => this.dimensionNames.includes(dim));
     }
 
-    normalizeDimensions(dims: Array<DimensionSpec | string>): Record<string, DimensionSpec> {
-        dims = dims ?? [];
-        const ret = {};
-        dims.forEach(it => {
-            const dim = this.createDimension(it);
-            ret[dim.name] = dim;
-        });
-        return ret;
-    }
-
-    createDimension(src: DimensionSpec | string) {
-        src = isString(src) ? {name: src} : src;
-        throwIf(
-            !src.hasOwnProperty('name'),
-            "Dimensions provided as Objects must define a 'name' property."
-        );
-        return {displayName: genDisplayName(src.name), ...src};
-    }
-
-    getValueLabel(value: string[]) {
+    getValueLabel(value: string[]): string {
         return value.map(dimName => this.getDimDisplayName(dimName)).join(' › ');
     }
 
     getDimDisplayName(dimName: string) {
-        return this.dimensions[dimName].displayName;
+        return this.dimensions[dimName]?.displayName ?? dimName;
     }
 
     //--------------------
@@ -343,4 +329,41 @@ export class GroupingChooserModel extends HoistModel {
         if (this.persistFavorites) ret.favorites = this.favorites;
         return ret;
     }
+
+    //------------------------
+    // Implementation
+    //------------------------
+    private normalizeDimensions(
+        dims: Array<DimensionSpec | string>
+    ): Record<string, DimensionSpec> {
+        dims = dims ?? [];
+        const ret = {};
+        dims.forEach(it => {
+            const dim = this.createDimension(it);
+            ret[dim.name] = dim;
+        });
+        return ret;
+    }
+
+    private createDimension(src: DimensionSpec | string) {
+        src = isString(src) ? {name: src} : src;
+        throwIf(
+            !src.hasOwnProperty('name'),
+            "Dimensions provided as Objects must define a 'name' property."
+        );
+        return {displayName: genDisplayName(src.name), ...src};
+    }
+
+    private removeUnknownDimsFromValue() {
+        const {value, dimensionNames, allowEmpty} = this,
+            cleanValue = value?.filter(dim => dimensionNames.includes(dim));
+
+        if (isEqual(value, cleanValue)) return;
+
+        if (isEmpty(cleanValue) && !allowEmpty) {
+            cleanValue.push(dimensionNames[0]);
+        }
+
+        this.setValue(cleanValue);
+    }
 }

package/package.json

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