@xh/hoist 45.0.1 → 45.0.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## v45.0.2 - 2022-01-13
+
+### 🎁 New Features
+* `FilterChooser` has new `menuWidth` prop, allowing you to specify as width for the dropdown
+  menu that is different from the control.
+
+### 🐞 Bug Fixes
+* Fixed cache clearing method on Admin Console's Server > Services tab.
+* Several fixes to behavior of `GridAutosizeMode.MANAGED`
+
+[Commit Log](https://github.com/xh/hoist-react/compare/v45.0.1...v45.0.2)
+
 ## v45.0.1 - 2022-01-07
 
 ### 🐞 Bug Fixes

package/admin/tabs/general/alertBanner/AlertBannerModel.js

@@ -100,6 +100,28 @@ export class AlertBannerModel extends HoistModel {
     }
 
     async saveAsync() {
+        return this
+            .saveInternalAsync()
+            .linkTo(this.loadModel)
+            .catchDefault();
+    }
+
+    resetForm() {
+        this.formModel.reset();
+        this.refreshAsync();
+    }
+
+    //----------------
+    // Implementation
+    //----------------
+    @action
+    syncPreview() {
+        const conf = XH.alertBannerService.genBannerConfig(this.formModel.getData());
+        this.bannerModel = new BannerModel(conf);
+    }
+
+    @action
+    async saveInternalAsync() {
         const {formModel, savedValue} = this,
             {
                 active,
@@ -182,18 +204,4 @@ export class AlertBannerModel extends HoistModel {
         await XH.alertBannerService.checkForBannerAsync();
         await this.refreshAsync();
     }
-
-    resetForm() {
-        this.formModel.reset();
-        this.refreshAsync();
-    }
-
-    //----------------
-    // Implementation
-    //----------------
-    @action
-    syncPreview() {
-        const conf = XH.alertBannerService.genBannerConfig(this.formModel.getData());
-        this.bannerModel = new BannerModel(conf);
-    }
 }

package/admin/tabs/general/alertBanner/AlertBannerPanel.js

@@ -42,7 +42,7 @@ export const alertBannerPanel = hoistCmp.factory({
 
 const formPanel = hoistCmp.factory(
     ({model}) => {
-        const {formModel, loadModel} = model,
+        const {formModel} = model,
             {isDirty, isValid} = formModel;
 
         return panel({
@@ -162,7 +162,7 @@ const formPanel = hoistCmp.factory(
                     icon: Icon.check(),
                     intent: 'success',
                     disabled: !isValid || !isDirty,
-                    onClick: () => model.saveAsync().linkTo(loadModel)
+                    onClick: () => model.saveAsync()
                 })
             ]
         });

package/admin/tabs/server/services/ServiceModel.js

@@ -7,7 +7,7 @@
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, managed, XH} from '@xh/hoist/core';
 import {UrlStore} from '@xh/hoist/data';
-import {lowerFirst} from 'lodash';
+import {isEmpty, lowerFirst} from 'lodash';
 
 export class ServiceModel extends HoistModel {
 
@@ -35,13 +35,13 @@ export class ServiceModel extends HoistModel {
     });
 
     async clearCachesAsync() {
-        const {selection} = this.gridModel;
-        if (!selection.length) return;
+        const {selectedRecords} = this.gridModel;
+        if (isEmpty(selectedRecords)) return;
 
         try {
             await XH.fetchJson({
                 url: 'serviceAdmin/clearCaches',
-                params: {names: selection.map(it => it.data.name)}
+                params: {names: selectedRecords.map(it => it.data.name)}
             });
             await this.refreshAsync();
             XH.successToast('Service caches cleared.');

package/cmp/grid/Grid.js

@@ -712,8 +712,9 @@ class GridLocalModel extends HoistModel {
     onColumnResized = (ev) => {
         if (!isDisplayed(this.viewRef.current) || !ev.finished) return;
         if (ev.source === 'uiColumnDragged') {
-            const width = ev.columnApi.getColumnState().find(it => it.colId === ev.column.colId)?.width;
-            this.model.noteColumnManuallySized(ev.column.colId, width);
+            const colId = ev.columns[0].colId,
+                width = ev.columnApi.getColumnState().find(it => it.colId === colId)?.width;
+            this.model.noteColumnManuallySized(colId, width);
         } else if (ev.source === 'autosizeColumns') {
             this.model.noteAgColumnStateChanged(ev.columnApi.getColumnState());
         }

package/cmp/grid/GridModel.js

@@ -455,6 +455,11 @@ export class GridModel extends HoistModel {
 
         this.filterModel?.clear();
         this.persistenceModel?.clear();
+
+        if (this.autosizeOptions.mode === GridAutosizeMode.MANAGED) {
+            await this.autosizeAsync();
+        }
+
         return true;
     }
 

package/cmp/grid/columns/Column.js

@@ -20,9 +20,10 @@ import {
     isNil,
     isNumber,
     isPlainObject,
-    isString
+    isString,
+    toString
 } from 'lodash';
-import {forwardRef, useImperativeHandle, useState, createElement} from 'react';
+import {forwardRef, useImperativeHandle, useState, createElement, isValidElement} from 'react';
 import classNames from 'classnames';
 import {GridSorter} from '../impl/GridSorter';
 import {ExcelFormat} from './ExcelFormat';
@@ -651,7 +652,7 @@ export class Column {
                     tooltipSpec(val, {record, column: this, gridModel, agParams}) :
                     val;
 
-                return ret ?? null;
+                return isValidElement(ret) ? ret : toString(ret);
             });
         }
 

package/data/Store.js

@@ -49,6 +49,9 @@ export class Store extends HoistBase {
     /** @member {boolean} */
     loadTreeData;
 
+    /** @member {string} */
+    loadTreeDataFrom;
+
     /** @member {boolean} */
     loadRootAsSummary;
 
@@ -102,13 +105,13 @@ export class Store extends HoistBase {
      * @param {function} [c.processRawData] - function to run on each individual data object
      *      presented to loadData() prior to creating a StoreRecord from that object. This function
      *      must return an object, cloning the original object if edits are necessary.
-     * @param {(Filter|*|*[])} [c.filter] - one or more filters or configs to create one.  If an
+     * @param {(Filter|*|*[])} [c.filter] - one or more filters or configs to create one. If an
      *      array, a single 'AND' filter will be created.
      * @param {boolean} [c.filterIncludesChildren] - true if all children of a passing record should
      *      also be considered passing (default false).
-     * @param {boolean} [c.loadTreeData] - true to load hierarchical/tree data. When this flag is
-     *      true, the children property on raw data objects will be used to load child records.
-     *      (default true).
+     * @param {boolean} [c.loadTreeData] - true (default) to load hierarchical/tree data, if any.
+     * @param {string} [c.loadTreeDataFrom] - the property on each raw data object that holds its
+     *      (raw) child objects, if any. Default 'children', no effect if `loadTreeData: false`.
      * @param {boolean} [c.loadRootAsSummary] - true to treat the root node in hierarchical data as
      *      the summary record (default false).
      * @param {boolean} [c.freezeData] - true to freeze the internal data object of the record.
@@ -135,6 +138,7 @@ export class Store extends HoistBase {
         filter = null,
         filterIncludesChildren = false,
         loadTreeData = true,
+        loadTreeDataFrom = 'children',
         loadRootAsSummary = false,
         freezeData = true,
         idEncodesTreePath = false,
@@ -151,6 +155,7 @@ export class Store extends HoistBase {
         this.filter = parseFilter(filter);
         this.filterIncludesChildren = filterIncludesChildren;
         this.loadTreeData = loadTreeData;
+        this.loadTreeDataFrom = loadTreeDataFrom;
         this.loadRootAsSummary = loadRootAsSummary;
         this.freezeData = freezeData;
         this.idEncodesTreePath = idEncodesTreePath;
@@ -843,7 +848,7 @@ export class Store extends HoistBase {
     }
 
     createRecords(rawData, parent, recordMap = new Map()) {
-        const {loadTreeData} = this;
+        const {loadTreeData, loadTreeDataFrom} = this;
         rawData.forEach(raw => {
             const rec = this.createRecord(raw, parent),
                 {id} = rec;
@@ -855,8 +860,8 @@ export class Store extends HoistBase {
 
             recordMap.set(id, rec);
 
-            if (loadTreeData && raw.children) {
-                this.createRecords(raw.children, rec, recordMap);
+            if (loadTreeData && raw[loadTreeDataFrom]) {
+                this.createRecords(raw[loadTreeDataFrom], rec, recordMap);
             }
         });
         return recordMap;

package/desktop/cmp/filter/FilterChooser.js

@@ -29,7 +29,7 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory({
     render({model, className, ...props}, ref) {
         const [layoutProps, chooserProps] = splitLayoutProps(props),
             {inputRef, suggestFieldsWhenEmpty, selectOptions, unsupportedFilter, favoritesIsOpen} = model,
-            {autoFocus, enableClear, leftIcon, maxMenuHeight, menuPlacement} = chooserProps,
+            {autoFocus, enableClear, leftIcon, maxMenuHeight, menuPlacement, menuWidth} = chooserProps,
             disabled = unsupportedFilter || chooserProps.disabled,
             placeholder = unsupportedFilter ?
                 'Unsupported filter' : // Todo: How to message this better?
@@ -49,6 +49,7 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory({
                     autoFocus,
                     disabled,
                     menuPlacement,
+                    menuWidth,
                     placeholder,
                     leftIcon: withDefault(leftIcon, Icon.filter()),
                     enableClear: withDefault(enableClear, true),
@@ -106,6 +107,9 @@ FilterChooser.propTypes = {
     /** Placement of the dropdown menu relative to the input control. */
     menuPlacement: PT.oneOf(['auto', 'top', 'bottom']),
 
+    /** Width in pixels for the dropdown menu - if unspecified, defaults to control width. */
+    menuWidth: PT.number,
+
     /** Text to display when control is empty. */
     placeholder: PT.string
 };

package/desktop/cmp/filter/FilterChooser.scss

@@ -54,6 +54,10 @@
   }
 
   &__field {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
     .prefix {
       color: var(--xh-text-color-muted);
     }

package/desktop/cmp/grid/impl/filter/custom/CustomRow.js

@@ -5,7 +5,7 @@
  * Copyright © 2021 Extremely Heavy Industries Inc.
  */
 import {hoistCmp, uses} from '@xh/hoist/core';
-import {hbox, div} from '@xh/hoist/cmp/layout';
+import {vbox, div} from '@xh/hoist/cmp/layout';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {dateInput, numberInput, select, textInput} from '@xh/hoist/desktop/cmp/input';
 import {Icon} from '@xh/hoist/icon';
@@ -26,27 +26,34 @@ export const customRow = hoistCmp.factory({
         return div({
             className: `xh-custom-filter-tab__row xh-custom-filter-tab__row--${kebabCase(op)}`,
             items: [
-                hbox({
-                    className: `xh-custom-filter-tab__row__top`,
+                vbox({
+                    className: `xh-custom-filter-tab__row__body`,
                     items: [
-                        select({
-                            bind: 'op',
-                            enableFilter: false,
-                            hideSelectedOptionCheck: true,
-                            options,
-                            optionRenderer: (opt) => operatorRenderer({opt})
+                        div({
+                            className: `xh-custom-filter-tab__row__top`,
+                            item: select({
+                                bind: 'op',
+                                enableFilter: false,
+                                hideSelectedOptionCheck: true,
+                                width: '100%',
+                                options,
+                                optionRenderer: (opt) => operatorRenderer({opt})
+                            })
                         }),
-                        button({
-                            icon: Icon.delete(),
-                            intent: 'danger',
-                            onClick: () => model.removeRow()
+                        div({
+                            omit: hideInput,
+                            className: `xh-custom-filter-tab__row__bottom`,
+                            item: inputField()
                         })
                     ]
                 }),
-                hbox({
-                    omit: hideInput,
-                    className: `xh-custom-filter-tab__row__bottom`,
-                    item: inputField()
+                div({
+                    className: `xh-custom-filter-tab__row__right`,
+                    item: button({
+                        icon: Icon.delete(),
+                        intent: 'danger',
+                        onClick: () => model.removeRow()
+                    })
                 })
             ]
         });
@@ -62,7 +69,7 @@ const inputField = hoistCmp.factory(
             props = {
                 bind: 'inputVal',
                 enableClear: true,
-                width: 200,
+                width: '100%',
                 autoFocus: true,
                 commitOnChange,
                 ...fieldSpec.inputProps

package/desktop/cmp/grid/impl/filter/custom/CustomTab.scss

@@ -17,34 +17,27 @@
   }
 
   &__row {
+    display: flex;
     padding: var(--xh-pad-half-px);
     border-bottom: 1px solid var(--xh-grid-border-color);
 
-    &__top {
-      display: flex;
-      align-items: center;
-
-      .xh-select {
-        flex: none;
-        width: 200px !important;
-      }
-
-      .xh-button {
-        padding: 0 !important;
-        min-width: 30px !important;
-        margin-left: 2px;
-        min-height: 24px !important;
-      }
+    &__body {
+      flex: 1;
     }
 
     &__bottom {
       margin-top: var(--xh-pad-half-px);
 
       .bp3-popover-wrapper,
+      .bp3-popover-target,
       .bp3-input-group {
-        width: 200px;
+        width: 100%;
       }
     }
+
+    &__right {
+      padding-left: 2px;
+    }
   }
 
   &__implicit_join_message {

package/package.json

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