@xh/hoist 63.0.0 → 63.0.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 63.0.2 - 2024-04-16
+
+### 🐞 Bug Fixes
+
+* Fixed issue with GroupingChooser: dragged items were not correctly positioned.
+* Removed extraneous internal padding override to Blueprint menu styles. Fixes overhang of menu
+divider borders and avoids possible triggering of horizontal scrollbars.
+
+## 63.0.1 - 2024-04-05
+
+### 🐞 Bug Fixes
+
+* New filterable fields exposed in the Admin Console for `ActivityTracking` and `ClientErrors` modules.
+    * `url`, `appEnvironment`, `appVersion` in `ActivityTracking`
+    * `impersonating` in `ClientErrors`
+
 ## 63.0.0 - 2024-04-04
 
 ### 💥 Breaking Changes (upgrade difficulty: 🟠 MEDIUM - for apps with styling overrides or direct use of Blueprint components)

package/admin/tabs/activity/clienterrors/ClientErrorDetail.ts

@@ -35,12 +35,32 @@ export const clientErrorDetail = hoistCmp.factory<ClientErrorsModel>(({model}) =
                     style: {width: '400px'},
                     items: [
                         h3(Icon.info(), 'Error Info'),
-                        formField({field: 'username'}),
+                        formField({
+                            field: 'username',
+                            readonlyRenderer: username => {
+                                if (!username) return naSpan();
+                                const {impersonating} = formModel.values,
+                                    impSpan = impersonating
+                                        ? span({
+                                              className: 'xh-text-color-accent',
+                                              item: ` (impersonating ${impersonating})`
+                                          })
+                                        : null;
+                                return span(username, impSpan);
+                            }
+                        }),
                         formField({
                             field: 'dateCreated',
                             readonlyRenderer: v => fmtDateTimeSec(v)
                         }),
-                        formField({field: 'appVersion'}),
+                        formField({
+                            field: 'appVersion',
+                            readonlyRenderer: appVersion => {
+                                if (!appVersion) return naSpan();
+                                const {appEnvironment} = formModel.values;
+                                return `${appVersion} (${appEnvironment})`;
+                            }
+                        }),
                         formField({
                             field: 'userAlerted',
                             label: 'User Alerted?'

package/admin/tabs/activity/clienterrors/ClientErrorsModel.ts

@@ -53,6 +53,7 @@ export class ClientErrorsModel extends HoistModel {
                 {...Col.userMessageFlag},
                 {...Col.userAlertedFlag},
                 {...Col.entryId, hidden},
+                {...Col.impersonatingFlag},
                 {...Col.username},
                 {...Col.browser},
                 {...Col.device},
@@ -63,7 +64,8 @@ export class ClientErrorsModel extends HoistModel {
                 {...Col.error, hidden},
                 {...Col.url},
                 {...Col.day},
-                {...Col.dateCreatedWithSec, displayName: 'Timestamp'}
+                {...Col.dateCreatedWithSec, displayName: 'Timestamp'},
+                {...Col.impersonating, hidden}
             ]
         });
 
@@ -102,6 +104,9 @@ export class ClientErrorsModel extends HoistModel {
                 },
                 {
                     field: 'url'
+                },
+                {
+                    field: 'impersonating'
                 }
             ]
         });

package/admin/tabs/activity/tracking/ActivityTrackingModel.ts

@@ -99,7 +99,10 @@ export class ActivityTrackingModel extends HoistModel {
                 Col.userAgent.field,
                 Col.username.field,
                 {name: 'count', type: 'int', aggregator: 'CHILD_COUNT'},
-                {name: 'month', type: 'string', isDimension: true, aggregator: 'UNIQUE'}
+                {name: 'month', type: 'string', isDimension: true, aggregator: 'UNIQUE'},
+                Col.url.field,
+                Col.appVersion.field,
+                Col.appEnvironment.field
             ] as CubeFieldSpec[]
         });
 
@@ -131,20 +134,17 @@ export class ActivityTrackingModel extends HoistModel {
                     },
                     fieldType: 'number'
                 },
-                {
-                    field: 'msg'
-                },
-                {
-                    field: 'data'
-                },
-                {
-                    field: 'userAgent'
-                }
+                {field: 'msg'},
+                {field: 'data'},
+                {field: 'userAgent'},
+                {field: 'url'},
+                {field: 'appVersion'},
+                {field: 'appEnvironment'}
             ]
         });
 
         this.loadLookupsAsync();
-      
+
         this.groupingChooserModel = new GroupingChooserModel({
             dimensions: this.cube.dimensions,
             persistWith: this.persistWith,
@@ -186,7 +186,10 @@ export class ActivityTrackingModel extends HoistModel {
                 {...Col.elapsed, headerName: 'Elapsed (avg)', hidden},
                 {...Col.dayRange, hidden},
                 {...Col.entryCount},
-                {field: 'count', hidden}
+                {field: 'count', hidden},
+                {...Col.appEnvironment, hidden},
+                {...Col.appVersion, hidden},
+                {...Col.url, hidden}
             ]
         });
 

package/admin/tabs/activity/tracking/detail/ActivityDetailModel.ts

@@ -30,8 +30,7 @@ export class ActivityDetailModel extends HoistModel {
     }
 
     override onLinked() {
-        const hidden = true,
-            filterable = true;
+        const hidden = true;
 
         this.gridModel = new GridModel({
             sortBy: 'dateCreated|desc',
@@ -46,16 +45,19 @@ export class ActivityDetailModel extends HoistModel {
             columns: [
                 {...Col.impersonatingFlag},
                 {...Col.entryId, hidden},
-                {...Col.username, filterable},
+                {...Col.username},
                 {...Col.impersonating, hidden},
-                {...Col.category, filterable},
-                {...Col.msg, filterable},
+                {...Col.category},
+                {...Col.msg},
+                {...Col.url},
+                {...Col.appVersion},
+                {...Col.appEnvironment, hidden},
                 {...Col.data, hidden},
-                {...Col.device, filterable},
-                {...Col.browser, filterable},
-                {...Col.userAgent, hidden, filterable},
-                {...Col.elapsed, filterable},
-                {...Col.dateCreatedWithSec, displayName: 'Timestamp', filterable}
+                {...Col.device},
+                {...Col.browser},
+                {...Col.userAgent, hidden},
+                {...Col.elapsed},
+                {...Col.dateCreatedWithSec, displayName: 'Timestamp'}
             ]
         });
 

package/admin/tabs/activity/tracking/detail/ActivityDetailView.ts

@@ -6,7 +6,7 @@
  */
 import {form} from '@xh/hoist/cmp/form';
 import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
-import {div, filler, h3, hframe, placeholder, span} from '@xh/hoist/cmp/layout';
+import {a, div, filler, h3, hframe, placeholder, span} from '@xh/hoist/cmp/layout';
 import {hoistCmp, creates} from '@xh/hoist/core';
 import {colChooserButton, exportButton} from '@xh/hoist/desktop/cmp/button';
 import {formField} from '@xh/hoist/desktop/cmp/form';
@@ -81,6 +81,14 @@ const detailRecForm = hoistCmp.factory<ActivityDetailModel>(({model}) => {
                               }
                           }),
                           formField({field: 'category'}),
+                          formField({
+                              field: 'appVersion',
+                              readonlyRenderer: appVersion => {
+                                  if (!appVersion) return naSpan();
+                                  const {appEnvironment} = formModel.values;
+                                  return `${appVersion} (${appEnvironment})`;
+                              }
+                          }),
                           formField({field: 'msg'}),
                           formField({
                               field: 'dateCreated',
@@ -95,6 +103,10 @@ const detailRecForm = hoistCmp.factory<ActivityDetailModel>(({model}) => {
                               })
                           }),
                           formField({field: 'id'}),
+                          formField({
+                              field: 'url',
+                              readonlyRenderer: hyperlinkVal
+                          }),
                           h3(Icon.desktop(), 'Device / Browser'),
                           formField({field: 'device'}),
                           formField({field: 'browser'}),
@@ -123,3 +135,4 @@ const additionalDataJsonInput = hoistCmp.factory<ActivityDetailModel>(({model})
 
 const valOrNa = v => (v != null ? v : naSpan());
 const naSpan = () => span({item: 'N/A', className: 'xh-text-color-muted'});
+const hyperlinkVal = v => a({href: v, item: v, target: '_blank'});

package/desktop/cmp/grouping/GroupingChooser.ts

@@ -195,7 +195,11 @@ const dimensionRow = hoistCmp.factory<GroupingChooserModel>({
                 let transform = dndProps.draggableProps.style.transform;
                 if (dndState.isDragging || dndState.isDropAnimating) {
                     let rowValues = parseTransform(transform),
-                        popoverValues = parseTransform(model.popoverRef.current.style.transform);
+                        pPos = model.popoverRef.current.getBoundingClientRect(),
+                        popoverValues = {
+                            x: pPos.left,
+                            y: pPos.top
+                        };
 
                     // Account for drop animation
                     if (dndState.isDropAnimating) {
@@ -204,9 +208,9 @@ const dimensionRow = hoistCmp.factory<GroupingChooserModel>({
                     }
 
                     // Subtract the popover's X / Y translation from the row's
-                    if (!isEmpty(rowValues) && !isEmpty(popoverValues)) {
-                        const x = rowValues[0] - popoverValues[0],
-                            y = rowValues[1] - popoverValues[1];
+                    if (!isEmpty(rowValues)) {
+                        const x = rowValues[0] - popoverValues.x,
+                            y = rowValues[1] - popoverValues.y;
                         transform = `translate(${x}px, ${y}px)`;
                     }
                 }
@@ -288,7 +292,7 @@ const addDimensionControl = hoistCmp.factory<GroupingChooserModel>({
  * Works for both `translate` and `translate3d`
  * e.g. `translate3d(250px, 150px, 0px)` is equivalent to [250, 150, 0]
  */
-function parseTransform(transformStr) {
+function parseTransform(transformStr: string): number[] {
     return transformStr
         ?.replace('3d', '')
         .match(/[-]{0,1}[\d]*[.]{0,1}[\d]+/g)

package/kit/blueprint/styles.scss

@@ -64,9 +64,9 @@ $pt-transition-ease: cubic-bezier(0.4, 1, 0.75, 0.9) !default;
 $pt-transition-ease-bounce: cubic-bezier(0.54, 1.12, 0.38, 1.11) !default;
 $pt-transition-duration: 100ms !default;
 
-// This override is taken from the popover source SCSS - there it is scoped under the minimal class.
-// https://github.com/palantir/blueprint/blob/1bfd1e42303d2626bfc3923eec2195ab4dc696d2/packages/core/src/components/popover/_popover.scss#L54
 .bp5-popover {
+  // This override is taken from the popover source SCSS - there it is scoped under the minimal class.
+  // https://github.com/palantir/blueprint/blob/1bfd1e42303d2626bfc3923eec2195ab4dc696d2/packages/core/src/components/popover/_popover.scss#L54
   @include react-transition(
     'bp5-popover',
     (
@@ -85,7 +85,13 @@ $pt-transition-duration: 100ms !default;
   background-color: var(--xh-menu-bg);
   border: var(--xh-menu-border);
   color: var(--xh-menu-item-text-color);
-  padding: 5px 0;
+
+  // Constrain menu height to the viewport, for menus with more items than will fit vertically.
+  // Note that this is not perfect - menus are shown relative to their target, and if a menu is
+  // in the middle of the page and forced to render above/below the target, it can still clip.
+  // The 100px offset is designed to account for menus shown from app/tab-level top/bottom toolbars.
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
 
   .bp5-menu-item {
     // Default alignment of flex-start leaves Hoist icons shifted up - could target

package/package.json

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