@xh/hoist 44.0.0 → 44.1.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## v44.1.0 - 2021-11-08
+
+### 🎁 New Features
+
+* Changes to App Options are now tracked in the admin activity tab.
+* New Server > Environment tab added to Admin Console to display UI server environment variables and
+  JVM system properties. (Requires `hoist-core >= 10.1` to enable this optional feature.)
+* Provided observable getters `XH.viewportSize`, `XH.isPortrait` and `XH.isLandscape` to allow apps
+  to react to changes in viewport size and orientation.
+
+### 🐞 Bug Fixes
+
+* Desktop inline grid editor `DateInput` now reliably shows its date picker pop-up aligned with the
+  grid cell under edit.
+* Desktop `Select.hideDropdownIndicator` now defaults to `true` on tablet devices due to UX bugs
+  with the select library component and touch devices.
+* Ensure `Column.autosizeBufferPx` is respected if provided.
+
+### ✨ Style
+
+* New `--xh-menu-item` CSS vars added, with tweaks to default desktop menu styling.
+* Highlight background color added to mobile menu items while pressed.
+
+[Commit Log](https://github.com/xh/hoist-react/compare/v44.0.0...v44.1.0)
+
 ## v44.0.0 - 2021-10-26
 
 ⚠ NOTE - apps must update to `hoist-core >= 10.0.0` when taking this hoist-react update.

package/SECURITY.md

@@ -0,0 +1,23 @@
+# Security Policy
+
+Extremely Heavy takes the security of its code and clients very seriously, and we welcome any and
+all reports of possible vulnerabilities or security-related issues with both Hoist code and its
+declared dependencies.
+
+## Reporting a Vulnerability
+
+To report any issues, or if you have any questions, please contact us immediately at support@xh.io.
+We will respond to all genuine, security-related reports or questions within one US business day.
+
+## Secure Usage
+
+Hoist is a toolkit designed to allow professional developers to build advanced enterprise web
+applications with the support of XH in the form of direct development, co-development, and/or
+consulting services. As such, many decisions critical to the security of Hoist-powered applications
+are highly specific to implementation choices made during the design and development process,
+including but not limited to the choice of other project dependencies, creation and interaction
+with any Hoist or third-party server APIs, input sanitization, authentication protocols, and more.
+
+Hoist is not and does not claim to be fully secure "out of the box" - it is dependent upon
+application developers to make and implement security decisions appropriate to their particular
+application and its deployment.

package/admin/AppModel.js

@@ -5,7 +5,7 @@
  * Copyright © 2021 Extremely Heavy Industries Inc.
  */
 import {TabContainerModel} from '@xh/hoist/cmp/tab';
-import {HoistAppModel, managed} from '@xh/hoist/core';
+import {HoistAppModel, managed, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {activityTab} from './tabs/activity/ActivityTab';
 import {generalTab} from './tabs/general/GeneralTab';
@@ -69,8 +69,10 @@ export class AppModel extends HoistAppModel {
                 children: [
                     {name: 'logViewer', path: '/logViewer'},
                     {name: 'logLevels', path: '/logLevels'},
+                    {name: 'environment', path: '/environment'},
                     {name: 'services', path: '/services'},
                     {name: 'ehCache', path: '/ehCache'},
+                    {name: 'memory', path: '/memory'},
                     {name: 'webSockets', path: '/webSockets'}
                 ]
             },
@@ -79,8 +81,7 @@ export class AppModel extends HoistAppModel {
                 path: '/monitor',
                 children: [
                     {name: 'status', path: '/status'},
-                    {name: 'config', path: '/config'},
-                    {name: 'memory', path: '/memory'}
+                    {name: 'config', path: '/config'}
                 ]
             },
             {
@@ -97,11 +98,32 @@ export class AppModel extends HoistAppModel {
 
     createTabs() {
         return [
-            {id: 'general', icon: Icon.info(), content: generalTab},
-            {id: 'activity', icon: Icon.analytics(), content: activityTab},
-            {id: 'server', icon: Icon.server(), content: serverTab},
-            {id: 'monitor', icon: Icon.shieldCheck(), content: monitorTab},
-            {id: 'userData', icon: Icon.users(), content: userDataTab}
+            {
+                id: 'general',
+                icon: Icon.info(),
+                content: generalTab
+            },
+            {
+                id: 'activity',
+                icon: Icon.analytics(),
+                content: activityTab
+            },
+            {
+                id: 'server',
+                icon: Icon.server(),
+                content: serverTab
+            },
+            {
+                id: 'monitor',
+                icon: Icon.shieldCheck(),
+                content: monitorTab,
+                omit: !XH.getConf('xhEnableMonitoring', true)
+            },
+            {
+                id: 'userData',
+                icon: Icon.users(),
+                content: userDataTab
+            }
         ];
     }
 }

package/admin/tabs/monitor/MonitorTab.js

@@ -4,27 +4,21 @@
  *
  * Copyright © 2021 Extremely Heavy Industries Inc.
  */
-import {XH} from '@xh/hoist/core';
-import {memoryMonitorPanel} from '@xh/hoist/admin/tabs/monitor/MemoryMonitorPanel';
 import {tabContainer} from '@xh/hoist/cmp/tab';
 import {hoistCmp} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {monitorEditorPanel} from './MonitorEditorPanel';
 import {monitorResultsPanel} from './MonitorResultsPanel';
 
-export const monitorTab = hoistCmp.factory(
-    () => {
-        const omitStatusMonitoring = !XH.getConf('xhEnableMonitoring', true);
-        return tabContainer({
-            model: {
-                route: 'default.monitor',
-                switcher: {orientation: 'left'},
-                tabs: [
-                    {id: 'status', icon: Icon.shieldCheck(), content: monitorResultsPanel, omit: omitStatusMonitoring},
-                    {id: 'config', icon: Icon.settings(), content: monitorEditorPanel, omit: omitStatusMonitoring},
-                    {id: 'memory', icon: Icon.server(), content: memoryMonitorPanel}
-                ]
-            }
-        });
-    }
-);
+export const monitorTab = hoistCmp.factory(() => {
+    return tabContainer({
+        model: {
+            route: 'default.monitor',
+            switcher: {orientation: 'left'},
+            tabs: [
+                {id: 'status', icon: Icon.shieldCheck(), content: monitorResultsPanel},
+                {id: 'config', icon: Icon.settings(), content: monitorEditorPanel}
+            ]
+        }
+    });
+});

package/admin/tabs/monitor/Tile.scss

@@ -7,15 +7,18 @@
 
 .xh-status-tile {
   color: white;
-  border: 1px solid white;
-  border-radius: var(--xh-border-radius);
+  border: var(--xh-border-solid);
   overflow: hidden;
 
-  &-ok { background-color: var(--xh-green); }
+  .xh-dark & {
+    border-color: white;
+  }
+
+  &-ok { background-color: var(--xh-intent-success-darker); }
 
-  &-warn { background-color: var(--xh-orange); }
+  &-warn { background-color: var(--xh-intent-warning-darker); }
 
-  &-fail { background-color: var(--xh-red); }
+  &-fail { background-color: var(--xh-intent-danger-darker); }
 
   &-inactive { background-color: var(--xh-gray-dark); }
 

package/admin/tabs/server/ServerTab.js

@@ -4,12 +4,14 @@
  *
  * Copyright © 2021 Extremely Heavy Industries Inc.
  */
+import {serverEnvPanel} from '@xh/hoist/admin/tabs/server/environment/ServerEnvPanel';
 import {tabContainer} from '@xh/hoist/cmp/tab';
 import {hoistCmp, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {ehCachePanel} from './ehcache/EhCachePanel';
 import {logLevelPanel} from './logLevel/LogLevelPanel';
 import {logViewer} from './logViewer/LogViewer';
+import {memoryMonitorPanel} from './memory/MemoryMonitorPanel';
 import {servicePanel} from './services/ServicePanel';
 import {webSocketPanel} from './websocket/WebSocketPanel';
 
@@ -21,6 +23,8 @@ export const serverTab = hoistCmp.factory(
             tabs: [
                 {id: 'logViewer', icon: Icon.fileText(), content: logViewer, omit: !XH.getConf('xhEnableLogViewer', true)},
                 {id: 'logLevels', icon: Icon.settings(), content: logLevelPanel},
+                {id: 'memory', title: 'Memory Monitor', icon: Icon.server(), content: memoryMonitorPanel},
+                {id: 'environment', icon: Icon.globe(), content: serverEnvPanel},
                 {id: 'services', icon: Icon.gears(), content: servicePanel},
                 {id: 'ehCache', icon: Icon.database(), title: 'Caches', content: ehCachePanel},
                 {id: 'webSockets', title: 'WebSockets', icon: Icon.bolt(), content: webSocketPanel}

package/admin/tabs/server/ehcache/EhCachePanel.js

@@ -5,7 +5,7 @@
 * Copyright © 2021 Extremely Heavy Industries Inc.
 */
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
-import {filler} from '@xh/hoist/cmp/layout';
+import {filler, span} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button, exportButton} from '@xh/hoist/desktop/cmp/button';
@@ -20,15 +20,22 @@ export const ehCachePanel = hoistCmp.factory({
         return panel({
             mask: 'onLoad',
             tbar: [
+                Icon.info(),
+                span({
+                    item: 'Hibernate (Ehcache) caches for server-side domain objects',
+                    className: 'xh-bold'
+                }),
+                filler(),
                 button({
                     icon: Icon.reset(),
                     text: 'Clear All',
                     intent: 'danger',
                     onClick: () => model.clearAllAsync()
                 }),
-                filler(),
+                '-',
                 gridCountLabel({unit: 'cache'}),
-                storeFilterField(),
+                '-',
+                storeFilterField({matchMode: 'any'}),
                 exportButton()
             ],
             item: grid()

package/admin/tabs/server/environment/ServerEnvModel.js

@@ -0,0 +1,68 @@
+import {GridModel} from '@xh/hoist/cmp/grid';
+import {HoistModel, managed, XH} from '@xh/hoist/core';
+import {FieldType} from '@xh/hoist/data';
+import {checkMinVersion} from '@xh/hoist/utils/js';
+import {forOwn} from 'lodash';
+
+const {STRING} = FieldType;
+
+/**
+ * Model/tab to list server-side environment variables and JVM system properties, as loaded from
+ * a dedicated admin-only endpoint.
+ */
+export class ServerEnvModel extends HoistModel {
+
+    /** @member {GridModel} */
+    @managed gridModel;
+
+    get minVersionWarning() {
+        const minVersion = '10.1.0',
+            currVersion = XH.environmentService.get('hoistCoreVersion');
+        return checkMinVersion(currVersion, minVersion) ? null : `This feature requires Hoist Core v${minVersion} or greater.`;
+    }
+
+    constructor() {
+        super();
+
+        this.gridModel = new GridModel({
+            groupBy: 'type',
+            sortBy: 'name',
+            enableExport: true,
+            store: {idSpec: XH.genId},
+            columns: [
+                {
+                    field: {name: 'type', type: STRING},
+                    hidden: true
+                },
+                {
+                    field: {name: 'name', type: STRING},
+                    width: 300,
+                    cellClass: 'xh-font-family-mono'
+                },
+                {
+                    field: {name: 'value', type: STRING},
+                    flex: 1,
+                    cellClass: 'xh-font-family-mono',
+                    autoHeight: true
+                }
+            ]
+        });
+    }
+
+    async doLoadAsync(loadSpec) {
+        if (this.minVersionWarning) return;
+
+        const resp = await XH.fetchJson({url: 'envAdmin'}),
+            data = [];
+
+        forOwn(resp.environment, (value, name) => {
+            data.push({type: 'Environment Variables', value, name});
+        });
+
+        forOwn(resp.properties, (value, name) => {
+            data.push({type: 'System Properties', value, name});
+        });
+
+        this.gridModel.loadData(data);
+    }
+}

package/admin/tabs/server/environment/ServerEnvPanel.js

@@ -0,0 +1,36 @@
+import {ServerEnvModel} from '@xh/hoist/admin/tabs/server/environment/ServerEnvModel';
+import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
+import {filler, placeholder, span} from '@xh/hoist/cmp/layout';
+import {storeFilterField} from '@xh/hoist/cmp/store';
+import {creates, hoistCmp} from '@xh/hoist/core';
+import {exportButton} from '@xh/hoist/desktop/cmp/button';
+import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {Icon} from '@xh/hoist/icon';
+
+export const serverEnvPanel = hoistCmp.factory({
+    model: creates(ServerEnvModel),
+
+    /** @param {ServerEnvModel} model */
+    render({model}) {
+        const {lastLoadException, minVersionWarning} = model;
+        if (minVersionWarning) return placeholder(minVersionWarning);
+
+        return panel({
+            tbar: [
+                Icon.info(),
+                span({
+                    item: 'Server-side environment variables and JVM system properties',
+                    className: 'xh-bold'
+                }),
+                filler(),
+                gridCountLabel({unit: 'entries'}),
+                '-',
+                storeFilterField({matchMode: 'any'}),
+                exportButton()
+            ],
+            item: lastLoadException ? errorMessage({error: lastLoadException}) : grid(),
+            mask: 'onLoad'
+        });
+    }
+});

package/admin/tabs/{monitor → server/memory}/MemoryMonitorModel.js

@@ -6,11 +6,11 @@
  */
 import {ChartModel} from '@xh/hoist/cmp/chart';
 import {GridModel} from '@xh/hoist/cmp/grid';
-import {HoistModel, XH, managed} from '@xh/hoist/core';
+import {HoistModel, managed, XH} from '@xh/hoist/core';
 import {fmtTime} from '@xh/hoist/format';
 import {checkMinVersion} from '@xh/hoist/utils/js';
 import {forOwn, sortBy} from 'lodash';
-import * as MCol from './MonitorColumns';
+import * as MCol from '../../monitor/MonitorColumns';
 
 export class MemoryMonitorModel extends HoistModel {
 

package/admin/tabs/{monitor → server/memory}/MemoryMonitorPanel.js

@@ -1,4 +1,4 @@
-import {MemoryMonitorModel} from '@xh/hoist/admin/tabs/monitor/MemoryMonitorModel';
+import {MemoryMonitorModel} from '@xh/hoist/admin/tabs/server/memory/MemoryMonitorModel';
 import {chart} from '@xh/hoist/cmp/chart';
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {filler, placeholder} from '@xh/hoist/cmp/layout';
@@ -30,6 +30,7 @@ export const memoryMonitorPanel = hoistCmp.factory({
                 }),
                 filler(),
                 gridCountLabel({unit: 'snapshot'}),
+                '-',
                 exportButton()
             ],
             items: [

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

@@ -5,7 +5,7 @@
  * Copyright © 2021 Extremely Heavy Industries Inc.
  */
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
-import {filler} from '@xh/hoist/cmp/layout';
+import {filler, span} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button, exportButton} from '@xh/hoist/desktop/cmp/button';
@@ -20,6 +20,12 @@ export const servicePanel = hoistCmp.factory({
         return panel({
             mask: 'onLoad',
             tbar: [
+                Icon.info(),
+                span({
+                    item: 'Service classes for server-side Hoist and application-level business logic',
+                    className: 'xh-bold'
+                }),
+                filler(),
                 button({
                     icon: Icon.reset(),
                     text: 'Clear Selected',
@@ -27,9 +33,10 @@ export const servicePanel = hoistCmp.factory({
                     onClick: () => model.clearCachesAsync(),
                     disabled: model.gridModel.selModel.isEmpty
                 }),
-                filler(),
+                '-',
                 gridCountLabel({unit: 'service'}),
-                storeFilterField(),
+                '-',
+                storeFilterField({matchMode: 'any'}),
                 exportButton()
             ],
             item: grid({

package/appcontainer/AppContainerModel.js

@@ -15,6 +15,7 @@ import {ImpersonationBarModel} from './ImpersonationBarModel';
 import {MessageSourceModel} from './MessageSourceModel';
 import {OptionsDialogModel} from './OptionsDialogModel';
 import {SizingModeModel} from './SizingModeModel';
+import {ViewportSizeModel} from './ViewportSizeModel';
 import {ThemeModel} from './ThemeModel';
 import {ToastSourceModel} from './ToastSourceModel';
 
@@ -42,6 +43,7 @@ export class AppContainerModel extends HoistModel {
 
     @managed refreshContextModel = new RootRefreshContextModel();
     @managed sizingModeModel = new SizingModeModel();
+    @managed viewportSizeModel = new ViewportSizeModel();
     @managed themeModel = new ThemeModel();
 
     init() {
@@ -58,6 +60,7 @@ export class AppContainerModel extends HoistModel {
             this.toastSourceModel,
             this.refreshContextModel,
             this.sizingModeModel,
+            this.viewportSizeModel,
             this.themeModel
         ];
         models.forEach(it => {

package/appcontainer/OptionsDialogModel.js

@@ -7,7 +7,7 @@
 import {FormModel} from '@xh/hoist/cmp/form';
 import {HoistModel, managed, TaskObserver, XH} from '@xh/hoist/core';
 import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
-import {assign} from 'lodash';
+import {assign, mapValues, pickBy} from 'lodash';
 import {AppOption} from './AppOption';
 
 /**
@@ -113,11 +113,18 @@ export class OptionsDialogModel extends HoistModel {
     }
 
     async doSaveAsync() {
-        const {formModel} = this;
-        const promises = this.options.map(option => {
-            return option.setValueAsync(option.name, formModel.values[option.name]);
-        });
+        const {formModel} = this,
+            dirtyFields = pickBy(formModel.fields, {isDirty: true}),
+            promises = this.options
+                .filter(o => dirtyFields[o.name])
+                .map(o => o.setValueAsync(o.name, dirtyFields[o.name].value));
         await Promise.allSettled(promises);
-        return XH.prefService.pushPendingAsync();
+        await XH.prefService.pushPendingAsync();
+
+        XH.track({
+            message: 'Changed options',
+            category: 'App',
+            data: mapValues(dirtyFields, f => ({value: f.value, oldValue: f.initialValue}))
+        });
     }
 }

package/appcontainer/ViewportSizeModel.js

@@ -0,0 +1,49 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2021 Extremely Heavy Industries Inc.
+ */
+import {HoistModel} from '@xh/hoist/core';
+import {action, computed, observable, makeObservable} from '@xh/hoist/mobx';
+
+/**
+ * Track observable width / height of the browser viewport, and provide observable
+ * access to device orientation
+ *
+ * @private
+ */
+export class ViewportSizeModel extends HoistModel {
+
+    /** @member {Object} - contains `width` and `height` in pixels */
+    @observable.ref size;
+
+    /** @returns {boolean} */
+    @computed
+    get isPortrait() {
+        return this.size.width < this.size.height;
+    }
+
+    /** @returns {boolean} */
+    get isLandscape() {
+        return !this.isPortrait;
+    }
+
+    constructor() {
+        super();
+        makeObservable(this);
+        window.addEventListener('resize', () => this.setViewportSize());
+        this.setViewportSize();
+    }
+
+    //---------------------
+    // Implementation
+    //---------------------
+    @action
+    setViewportSize() {
+        this.size = {
+            width: window.innerWidth,
+            height: window.innerHeight
+        };
+    }
+}

package/cmp/ag-grid/AgGrid.scss

@@ -391,21 +391,23 @@
 }
 
 //------------------------
-// Context Menu (matching ag-Grid provided menus to BP menus)
+// Context Menu
 //------------------------
 .ag-theme-balham .ag-menu,
 .ag-theme-balham-dark .ag-menu {
   font-family: var(--xh-font-family);
+  font-size: var(--xh-menu-item-font-size-px);
+  color: var(--xh-menu-item-text-color);
 
   // Minimal/high-contrast bg
-  background-color: var(--xh-bg);
-  border: var(--xh-border-solid);
+  background-color: var(--xh-menu-bg);
+  border: var(--xh-menu-border);
 
   // Matching box-shadow of Blueprint context menu popover
   box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4);
 
   .ag-menu-option.ag-menu-option-active {
-    background-color: var(--xh-bg-highlight);
+    background-color: var(--xh-menu-item-highlight-bg);
   }
 
   .ag-menu-option-icon {
@@ -421,6 +423,6 @@
 
   // Keep the submenu caret in the standard text color
   .ag-menu-option-popup-pointer {
-    color: var(--xh-text-color);
+    color: var(--xh-menu-item-text-color);
   }
 }