@xh/hoist 70.0.0-SNAPSHOT.1731083521069 → 70.0.0-SNAPSHOT.1731623470295

package/desktop/cmp/dash/container/DashContainerModel.ts

@@ -7,6 +7,8 @@
 import {
     managed,
     modelLookupContextProvider,
+    Persistable,
+    PersistableState,
     PersistenceProvider,
     PlainObject,
     RefreshMode,
@@ -37,7 +39,8 @@ import {
 } from './impl/DashContainerUtils';
 import {dashContainerView} from './impl/DashContainerView';
 
-export interface DashContainerConfig extends DashConfig<DashContainerViewSpec, DashViewState> {
+export interface DashContainerConfig
+    extends DashConfig<DashContainerViewSpec, DashContainerViewState> {
     /** Strategy for rendering DashContainerViews. Can also be set per-view in `viewSpecs`*/
     renderMode?: RenderMode;
 
@@ -57,6 +60,16 @@ export interface DashContainerConfig extends DashConfig<DashContainerViewSpec, D
     goldenLayoutSettings?: PlainObject;
 }
 
+// TODO - review other state inserted by library, determine if we want to model here
+export interface DashContainerViewState {
+    type: 'row' | 'column' | 'stack' | 'view';
+    id?: string;
+    content?: DashContainerViewState[];
+    title?: string;
+    width?: number | string;
+    height?: number | string;
+}
+
 /**
  * Model for a DashContainer, representing its contents and layout state.
  *
@@ -65,7 +78,7 @@ export interface DashContainerConfig extends DashConfig<DashContainerViewSpec, D
  *
  * State should be structured as nested arrays of container objects, according to
  * GoldenLayout's content config. Supported container types are `row`, `column` and `stack`.
- * Child containers and views should be provided as an array under the `contents` key.
+ * Child containers and views should be provided as an array under the `content` key.
  *
  *      + `row` lay out its children horizontally.
  *      + `column` lays out its children vertically.
@@ -86,20 +99,20 @@ export interface DashContainerConfig extends DashConfig<DashContainerViewSpec, D
  * ```
  * [{
  *     type: 'row',
- *     contents: [
+ *     content: [
  *          // The first child of this row has pixel width of '200px'.
  *          // The column will take the remaining width.
  *         {
  *             type: 'stack',
  *             width: '200px',
- *             contents: [
+ *             content: [
  *                 {type: 'view', id: 'viewId'},
  *                 {type: 'view', id: 'viewId'}
  *             ]
  *         },
  *         {
  *             type: 'column',
- *             contents: [
+ *             content: [
  *                 // Relative height of 40%. The remaining 60% will be split equally by the other views.
  *                 {type: 'view', id: 'viewId', height: 40},
  *                 {type: 'view', id: 'viewId'},
@@ -113,11 +126,10 @@ export interface DashContainerConfig extends DashConfig<DashContainerViewSpec, D
  * @see http://golden-layout.com/docs/ItemConfig.html
  * @see http://golden-layout.com/tutorials/getting-started-react.html
  */
-export class DashContainerModel extends DashModel<
-    DashContainerViewSpec,
-    DashViewState,
-    DashViewModel
-> {
+export class DashContainerModel
+    extends DashModel<DashContainerViewSpec, DashViewState, DashViewModel>
+    implements Persistable<{state: DashViewState[]}>
+{
     //---------------------
     // Settable State
     //----------------------
@@ -187,32 +199,29 @@ export class DashContainerModel extends DashModel<
         this.emptyText = emptyText;
         this.addViewButtonText = addViewButtonText;
         this.extraMenuItems = extraMenuItems;
+        this.state = initialState;
 
-        // Read state from provider -- fail gently
-        let persistState = null;
         if (persistWith) {
-            try {
-                this.provider = PersistenceProvider.create({path: 'dashContainer', ...persistWith});
-                persistState = this.provider.read();
-            } catch (e) {
-                this.logError(e);
-                XH.safeDestroy(this.provider);
-                this.provider = null;
-            }
+            PersistenceProvider.create({
+                persistOptions: {
+                    path: 'dashContainer',
+                    ...persistWith
+                },
+                target: this
+            });
         }
 
-        this.state = persistState?.state ?? initialState;
-
         // Initialize GoldenLayout with initial state once ref is ready
-        this.addReaction({
-            track: () => [this.containerRef.current, this.layoutLocked],
-            run: () => this.loadStateAsync(this.state)
-        });
-
-        this.addReaction({
-            track: () => this.viewState,
-            run: () => this.updateState()
-        });
+        this.addReaction(
+            {
+                track: () => [this.containerRef.current, this.layoutLocked],
+                run: () => this.loadStateAsync(this.state)
+            },
+            {
+                track: () => this.viewState,
+                run: () => this.updateState()
+            }
+        );
     }
 
     /**
@@ -228,14 +237,13 @@ export class DashContainerModel extends DashModel<
         this.contentLocked = restoreState.contentLocked;
         this.renameLocked = restoreState.renameLocked;
         await this.loadStateAsync(restoreState.initialState);
-        this.provider?.clear();
     }
 
     /**
      * Load state into the DashContainer, recreating its layout and contents
      * @param state - State to load
      */
-    async loadStateAsync(state) {
+    async loadStateAsync(state: DashViewState[]) {
         const containerEl = this.containerRef.current;
         if (!containerEl) {
             this.logWarn(
@@ -318,6 +326,32 @@ export class DashContainerModel extends DashModel<
         this.goldenLayout?.updateSize();
     }
 
+    getViewSpec(id: string): DashContainerViewSpec {
+        return this.viewSpecs.find(it => it.id === id);
+    }
+
+    getViewModel(id: string): DashViewModel<DashContainerViewSpec> {
+        return find(this.viewModels, {id});
+    }
+
+    //------------------------
+    // Persistable Interface
+    //------------------------
+    getPersistableState(): PersistableState<{state: DashViewState[]}> {
+        return new PersistableState({state: this.state});
+    }
+
+    setPersistableState(persistableState: PersistableState<{state: DashViewState[]}>) {
+        const {state} = persistableState.value;
+        if (!state) return;
+        if (this.containerRef.current) {
+            this.loadStateAsync(state);
+        } else {
+            // If the container is not yet rendered, store the state directly
+            this.state = state;
+        }
+    }
+
     //------------------------
     // Implementation
     //------------------------
@@ -342,7 +376,6 @@ export class DashContainerModel extends DashModel<
         runInAction(() => {
             this.state = convertGLToState(goldenLayout, this);
         });
-        this.provider?.write({state: this.state});
     }
 
     private onItemDestroyed(item) {
@@ -351,10 +384,6 @@ export class DashContainerModel extends DashModel<
         if (id) this.removeViewModel(id);
     }
 
-    private getViewSpec(id: string) {
-        return this.viewSpecs.find(it => it.id === id);
-    }
-
     //-----------------
     // Items
     //-----------------
@@ -386,10 +415,6 @@ export class DashContainerModel extends DashModel<
         return ret;
     }
 
-    private getViewModel(id: string) {
-        return find(this.viewModels, {id});
-    }
-
     @action
     private addViewModel(viewModel: DashViewModel) {
         this.viewModels = [...this.viewModels, viewModel];
@@ -566,7 +591,7 @@ export class DashContainerModel extends DashModel<
     //-----------------
     // Misc
     //-----------------
-    private createGoldenLayout(containerEl: HTMLElement, state: any): GoldenLayout {
+    private createGoldenLayout(containerEl: HTMLElement, state: DashViewState[]): GoldenLayout {
         const {viewSpecs} = this,
             ret = new GoldenLayout(
                 {

package/desktop/cmp/dash/container/impl/DashContainerUtils.ts

@@ -5,10 +5,12 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {PlainObject} from '@xh/hoist/core';
+import {DashContainerModel} from '@xh/hoist/desktop/cmp/dash';
 import {serializeIcon} from '@xh/hoist/icon';
 import {throwIf} from '@xh/hoist/utils/js';
 import {isArray, isEmpty, isFinite, isNil, isPlainObject, isString, round} from 'lodash';
 import {DashContainerViewSpec} from '../DashContainerViewSpec';
+import GoldenLayout, {ContentItem} from 'golden-layout';
 
 /**
  * Lookup the DashViewModel id of a rendered view
@@ -21,21 +23,28 @@ export function getViewModelId(view) {
 /**
  * Convert the output from Golden Layouts into our serializable state
  */
-export function convertGLToState(goldenLayout, dashContainerModel) {
+export function convertGLToState(
+    goldenLayout: GoldenLayout,
+    dashContainerModel: DashContainerModel
+) {
     const configItems = goldenLayout.toConfig().content,
         contentItems = goldenLayout.root.contentItems;
 
     return convertGLToStateInner(configItems, contentItems, dashContainerModel);
 }
 
-function convertGLToStateInner(configItems = [], contentItems = [], dashContainerModel) {
+function convertGLToStateInner(
+    configItems = [],
+    contentItems: ContentItem[] = [],
+    dashContainerModel: DashContainerModel
+) {
     const ret = [];
 
     configItems.forEach((configItem, idx) => {
         const contentItem = contentItems[idx];
 
         if (configItem.type === 'component') {
-            const viewSpecId = configItem.component,
+            const viewSpecId: string = configItem.component,
                 viewSpec = dashContainerModel.getViewSpec(viewSpecId),
                 viewModelId = getViewModelId(contentItem),
                 viewModel = dashContainerModel.getViewModel(viewModelId),
@@ -70,7 +79,7 @@ function convertGLToStateInner(configItems = [], contentItems = [], dashContaine
 /**
  * Convert our serializable state into GoldenLayout config
  */
-export function convertStateToGL(state = [], dashContainerModel) {
+export function convertStateToGL(state = [], dashContainerModel: DashContainerModel) {
     const {viewSpecs, containerRef} = dashContainerModel,
         containerSize = {
             width: containerRef.current?.offsetWidth,

package/desktop/cmp/leftrightchooser/LeftRightChooserFilter.ts

@@ -32,7 +32,7 @@ export const [LeftRightChooserFilter, leftRightChooserFilter] =
         render() {
             const impl = useLocalModel(LeftRightChooserFilterLocalModel);
             return textInput({
-                placeholder: 'Quick filter...',
+                placeholder: 'Filter...',
                 bind: 'value',
                 model: impl,
                 commitOnChange: true,

package/desktop/cmp/panel/PanelModel.ts

@@ -9,17 +9,17 @@ import {
     HoistModel,
     managed,
     ManagedRefreshContextModel,
+    Persistable,
+    PersistableState,
     PersistenceProvider,
     PersistOptions,
-    PrefProvider,
     RefreshContextModel,
     RefreshMode,
     RenderMode,
-    Side,
-    XH
+    Side
 } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
-import {action, makeObservable, observable, comparer, bindable} from '@xh/hoist/mobx';
+import {action, makeObservable, observable, bindable} from '@xh/hoist/mobx';
 import {wait} from '@xh/hoist/promise';
 import {throwIf} from '@xh/hoist/utils/js';
 import {isNil, isNumber, isString} from 'lodash';
@@ -107,11 +107,16 @@ export interface PanelConfig {
     xhImpl?;
 }
 
+export interface PanelPersistState {
+    collapsed?: boolean;
+    size?: number | string;
+}
+
 /**
  * PanelModel supports configuration and state-management for user-driven Panel resizing and
  * expand/collapse, along with support for saving this state via a configured PersistenceProvider.
  */
-export class PanelModel extends HoistModel {
+export class PanelModel extends HoistModel implements Persistable<PanelPersistState> {
     declare config: PanelConfig;
 
     //-----------------------
@@ -134,7 +139,6 @@ export class PanelModel extends HoistModel {
     @managed modalSupportModel: ModalSupportModel;
     @managed refreshContextModel: RefreshContextModel;
     @managed errorBoundaryModel: ErrorBoundaryModel;
-    @managed provider: PersistenceProvider;
 
     //----------------
     // Settable State
@@ -235,10 +239,10 @@ export class PanelModel extends HoistModel {
         this.collapsible = collapsible;
         this.resizable = resizable;
         this.resizeWhileDragging = resizeWhileDragging;
-        this.defaultSize = defaultSize;
+        this.size = this.defaultSize = defaultSize;
         this.minSize = minSize;
         this.maxSize = maxSize;
-        this.defaultCollapsed = defaultCollapsed;
+        this.collapsed = this.defaultCollapsed = defaultCollapsed;
         this.side = side;
         this.renderMode = renderMode;
         this.refreshMode = refreshMode;
@@ -270,36 +274,13 @@ export class PanelModel extends HoistModel {
             this._resizeRef = createRef();
         }
 
-        // Read state from provider -- fail gently
-        let state = null;
         if (persistWith) {
-            try {
-                this.provider = PersistenceProvider.create({path: 'panel', ...persistWith});
-                state = this.provider.read() ?? this.legacyState();
-            } catch (e) {
-                this.logError(e);
-                XH.safeDestroy(this.provider);
-                this.provider = null;
-            }
-        }
-
-        // Initialize state.
-        this.size = resizable && !isNil(state?.size) ? state.size : defaultSize;
-        this.setCollapsed(
-            collapsible && !isNil(state?.collapsed) ? state.collapsed : defaultCollapsed
-        );
-
-        // Attach to provider last
-        if (this.provider) {
-            this.addReaction({
-                equals: comparer.shallow,
-                track: () => {
-                    const state: any = {};
-                    if (collapsible) state.collapsed = this.collapsed;
-                    if (resizable) state.size = this.size;
-                    return state;
+            PersistenceProvider.create({
+                persistOptions: {
+                    path: 'panel',
+                    ...persistWith
                 },
-                run: state => this.provider.write(state)
+                target: this
             });
         }
     }
@@ -352,6 +333,22 @@ export class PanelModel extends HoistModel {
         this.resizeWhileDragging = v;
     }
 
+    //---------------------------------------------
+    // Persistable Interface
+    //---------------------------------------------
+    getPersistableState(): PersistableState<PanelPersistState> {
+        const ret: PanelPersistState = {};
+        if (this.collapsible) ret.collapsed = this.collapsed;
+        if (this.resizable) ret.size = this.size;
+        return new PersistableState(ret);
+    }
+
+    setPersistableState(state: PersistableState<PanelPersistState>): void {
+        const {collapsed, size} = state.value;
+        if (this.resizable && !isNil(size)) this.size = size;
+        if (this.collapsible && !isNil(collapsed)) this.setCollapsed(collapsed);
+    }
+
     //---------------------------------------------
     // Implementation (for related private classes)
     //---------------------------------------------
@@ -396,23 +393,6 @@ export class PanelModel extends HoistModel {
     //---------------------------------------------
     // Implementation (internal)
     //---------------------------------------------
-    private legacyState() {
-        const {provider} = this;
-        if (provider instanceof PrefProvider) {
-            try {
-                const data = XH.getPref(provider.key);
-                if (data && !isNil(data.collapsed) && !isNil(data.size)) {
-                    provider.write(data);
-                    provider.clear('collapsed');
-                    provider.clear('size');
-                    return data;
-                }
-            } catch (e) {
-                this.logError('Failed reading legacy state', e);
-            }
-        }
-        return null;
-    }
 
     private dispatchResize() {
         // Forces other components to redraw if required.

package/desktop/cmp/store/impl/StoreFilterField.ts

@@ -17,7 +17,7 @@ export function storeFilterFieldImpl(props) {
         commitOnChange: true,
         leftIcon: Icon.filter(),
         enableClear: true,
-        placeholder: 'Filter',
+        placeholder: 'Filter...',
         selectOnFocus: true,
         width: 180,
         ...props

package/desktop/cmp/viewmanager/ViewManager.scss

@@ -0,0 +1,58 @@
+.xh-view-manager {
+  align-items: center;
+
+  &__menu-item {
+    &:hover {
+      .xh-view-manager__menu-item__fave-toggle {
+        opacity: 1;
+        color: var(--xh-yellow);
+      }
+    }
+
+    &__fave-toggle {
+      opacity: 0;
+
+      &:hover {
+        color: var(--xh-yellow-light) !important;
+      }
+
+      &--active {
+        opacity: 1;
+        color: var(--xh-yellow);
+      }
+
+      &--active:hover {
+        color: var(--xh-yellow-light) !important;
+      }
+    }
+  }
+
+  //------------------------
+  // Dialogs
+  //------------------------
+  &__manage-dialog,
+  &__save-dialog {
+    &__form {
+      padding: var(--xh-pad-px);
+
+      .xh-form-field.xh-form-field-readonly .xh-form-field-readonly-display {
+        padding: 0;
+      }
+
+      .xh-form-field .xh-form-field-info {
+        line-height: 1.5em;
+        margin-top: var(--xh-pad-half-px);
+        white-space: unset;
+
+        .xh-icon {
+          margin-right: 2px;
+        }
+      }
+    }
+
+    &__metadata {
+      color: var(--xh-text-color-muted);
+      font-size: var(--xh-font-size-small-px);
+    }
+  }
+}