@xh/hoist 60.0.1 → 60.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 60.1.0 - 2024-01-18
+
+### 🐞 Bug Fixes
+* Fixed transparent background for popup inline editors.
+* Exceptions that occur in custom application tooltips will now be caught and logged to console,
+ rather than crashing grid.
+
+### ⚙️ Technical
+* Improvements to exception handling during app initialization
+
 ## 60.0.1 - 2024-01-16
 
 ### 🐞 Bug Fixes

package/admin/tabs/general/roles/RoleModel.ts

@@ -291,12 +291,12 @@ export class RoleModel extends HoistModel {
             fieldSpecs: compact([
                 'name',
                 'category',
-                config.assignUsers && 'users',
-                config.assignDirectoryGroups && 'directoryGroups',
+                config.userAssignmentSupported && 'users',
+                config.directoryGroupsSupported && 'directoryGroups',
                 'roles',
                 'inheritedRoleNames',
                 'effectiveUserNames',
-                config.assignDirectoryGroups && 'effectiveDirectoryGroupNames',
+                config.directoryGroupsSupported && 'effectiveDirectoryGroupNames',
                 'effectiveRoleNames',
                 'lastUpdatedBy',
                 {

package/admin/tabs/general/roles/Types.ts

@@ -38,12 +38,7 @@ export type RoleMemberType = 'USER' | 'DIRECTORY_GROUP' | 'ROLE';
 
 export interface RoleModuleConfig {
     enabled: boolean;
-    assignDirectoryGroups: boolean;
-    assignUsers: boolean;
-    refreshIntervalSecs: number;
-    infoTooltips: {
-        users: string;
-        directoryGroups: string;
-        roles: string;
-    };
+    userAssignmentSupported: boolean;
+    directoryGroupsSupported: boolean;
+    directoryGroupsDescription: string;
 }

package/admin/tabs/general/roles/details/members/RoleMembers.ts

@@ -104,11 +104,11 @@ const count = hoistCmp.factory<CountProps>(({count, icon}) =>
 
 const bbar = hoistCmp.factory<RoleMembersModel>(({model}) => {
     const {directCounts, moduleConfig} = model;
-    if (!moduleConfig?.assignDirectoryGroups && directCounts.DIRECTORY_GROUP) {
+    if (!moduleConfig?.directoryGroupsSupported && directCounts.DIRECTORY_GROUP) {
         return warningBanner({
             message: 'Directory Groups disabled. Will ignore.'
         });
-    } else if (!moduleConfig?.assignUsers && directCounts.USER) {
+    } else if (!moduleConfig?.userAssignmentSupported && directCounts.USER) {
         return warningBanner({
             message: 'Users assignment disabled. Will ignore.'
         });

package/admin/tabs/general/roles/details/members/RoleMembersModel.ts

@@ -57,7 +57,7 @@ export class RoleMembersModel extends HoistModel {
         const {effectiveUsers, effectiveDirectoryGroups, effectiveRoles} = this.selectedRole;
         return {
             USER: effectiveUsers.length,
-            DIRECTORY_GROUP: this.moduleConfig?.assignDirectoryGroups
+            DIRECTORY_GROUP: this.moduleConfig?.directoryGroupsSupported
                 ? effectiveDirectoryGroups.length
                 : 0,
             ROLE: effectiveRoles.length
@@ -105,7 +105,7 @@ export class RoleMembersModel extends HoistModel {
                 })),
 
                 // 2 - Directory Groups
-                ...(this.moduleConfig?.assignDirectoryGroups
+                ...(this.moduleConfig?.directoryGroupsSupported
                     ? role.effectiveDirectoryGroups.map(it => ({
                           name: it.name,
                           sources: this.sortThisRoleFirst(it.sourceRoles.map(role => ({role}))),
@@ -234,8 +234,8 @@ export class RoleMembersModel extends HoistModel {
 
                 if (
                     !includeEffective &&
-                    ((type === types.USER && !moduleConfig.assignUsers) ||
-                        (isDirectoryGroup && !moduleConfig.assignDirectoryGroups))
+                    ((type === types.USER && !moduleConfig.userAssignmentSupported) ||
+                        (isDirectoryGroup && !moduleConfig.directoryGroupsSupported))
                 ) {
                     return {hidden: true};
                 }

package/admin/tabs/general/roles/editor/form/RoleForm.ts

@@ -68,12 +68,12 @@ const assignments = hoistCmp.factory<RoleFormModel>(({model}) =>
         items: [
             assignmentsPanel({
                 entity: 'USER',
-                omit: !model.moduleConfig?.assignUsers && model.usersGridModel.empty
+                omit: !model.moduleConfig?.userAssignmentSupported && model.usersGridModel.empty
             }),
             assignmentsPanel({
                 entity: 'DIRECTORY_GROUP',
                 omit:
-                    !model.moduleConfig?.assignDirectoryGroups &&
+                    !model.moduleConfig?.directoryGroupsSupported &&
                     model.directoryGroupsGridModel.empty
             }),
             assignmentsPanel({entity: 'ROLE'})
@@ -138,13 +138,13 @@ const bbar = hoistCmp.factory<AssignmentsPanelProps>(({entity, model}) => {
             return warningBanner({
                 compact: true,
                 message: 'Users assignment disabled. Will ignore.',
-                omit: model.moduleConfig?.assignUsers
+                omit: model.moduleConfig?.userAssignmentSupported
             });
         case 'DIRECTORY_GROUP':
             return warningBanner({
                 compact: true,
                 message: 'Directory Groups disabled. Will ignore.',
-                omit: model.moduleConfig?.assignDirectoryGroups
+                omit: model.moduleConfig?.directoryGroupsSupported
             });
         default:
             return null;
@@ -153,15 +153,20 @@ const bbar = hoistCmp.factory<AssignmentsPanelProps>(({entity, model}) => {
 
 const infoIcon = hoistCmp.factory<AssignmentsPanelProps>({
     render({entity, model}) {
-        const tooltips = model.moduleConfig?.infoTooltips,
-            tooltipText =
-                entity === 'USER'
-                    ? tooltips?.users ?? 'All users listed here will be directly granted this role.'
-                    : entity === 'DIRECTORY_GROUP'
-                      ? tooltips?.directoryGroups ??
-                        'All members of these directory groups will be granted this role.'
-                      : tooltips?.roles ??
-                        'All users holding these roles will also be granted this role.';
+        let tooltipText = null;
+        switch (entity) {
+            case 'USER':
+                tooltipText = 'All users listed here will be directly granted this role.';
+                break;
+            case 'DIRECTORY_GROUP':
+                tooltipText =
+                    model.moduleConfig?.directoryGroupsDescription ??
+                    'All members of these directory groups will be granted this role.';
+                break;
+            case 'ROLE':
+                tooltipText = 'All users holding these roles will also be granted this role.';
+                break;
+        }
         return tooltip({
             item: Icon.info(),
             content: tooltipText,

package/cmp/ag-grid/AgGrid.scss

@@ -445,6 +445,9 @@ body.xh-app {
     .ag-popup-child {
       z-index: 30;
     }
+    .ag-popup-editor {
+      background: var(--xh-grid-bg);
+    }
   }
 
   //------------------------

package/cmp/grid/columns/Column.ts

@@ -42,7 +42,7 @@ import {
 } from 'react';
 import {GridModel} from '../GridModel';
 import {GridSorter} from '../GridSorter';
-import {managedRenderer} from '../impl/Utils';
+import {getAgHeaderClassFn, managedRenderer} from '../impl/Utils';
 import {
     ColumnCellClassFn,
     ColumnCellClassRuleFn,
@@ -62,10 +62,8 @@ import {
 } from '../Types';
 import {ExcelFormat} from '../enums/ExcelFormat';
 import {FunctionComponent} from 'react';
-import {ColumnGroup} from './ColumnGroup';
 import type {
     ColDef,
-    HeaderClassParams,
     ITooltipParams,
     ValueGetterParams,
     ValueSetterParams
@@ -817,9 +815,15 @@ export class Column {
                             store
                         });
 
-                    ret = isFunction(tooltip)
-                        ? tooltip(val, {record, column: this, gridModel, agParams})
-                        : val;
+                    if (isFunction(tooltip)) {
+                        try {
+                            ret = tooltip(val, {record, gridModel, agParams, column: this});
+                        } catch (e) {
+                            logWarn([`Failure in tooltip for '${this.displayName}'`, e], 'Column');
+                        }
+                    } else {
+                        ret = val;
+                    }
                 }
 
                 const isElement = isValidElement(ret);
@@ -1083,34 +1087,3 @@ export class Column {
             : record?.data[sortValue] ?? v;
     }
 }
-
-export function getAgHeaderClassFn(
-    column: Column | ColumnGroup
-): (params: HeaderClassParams) => string[] {
-    // Generate CSS classes for headers.
-    // Default alignment classes are mixed in with any provided custom classes.
-    const {headerClass, headerAlign, gridModel} = column;
-
-    return agParams => {
-        let r = [];
-        if (headerClass) {
-            r = castArray(
-                isFunction(headerClass) ? headerClass({column, gridModel, agParams}) : headerClass
-            );
-        }
-
-        if (headerAlign === 'center' || headerAlign === 'right') {
-            r.push('xh-column-header-align-' + headerAlign);
-        }
-
-        if (column instanceof Column && column.isTreeColumn && column.headerHasExpandCollapse) {
-            r.push('xh-column-header--with-expand-collapse');
-        }
-
-        if (gridModel.headerMenuDisplay === 'hover') {
-            r.push('xh-column-header--hoverable');
-        }
-
-        return r;
-    };
-}

package/cmp/grid/columns/ColumnGroup.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {getAgHeaderClassFn} from '@xh/hoist/cmp/grid/impl/Utils';
 import {HAlign, PlainObject, Some, Thunkable, XH} from '@xh/hoist/core';
 import {genDisplayName} from '@xh/hoist/data';
 
@@ -13,7 +14,7 @@ import {clone, isEmpty, isFunction, isString, keysIn} from 'lodash';
 import {ReactNode} from 'react';
 import {GridModel} from '../GridModel';
 import {ColumnHeaderClassFn, ColumnHeaderNameFn} from '../Types';
-import {Column, ColumnSpec, getAgHeaderClassFn} from './Column';
+import {Column, ColumnSpec} from './Column';
 
 export interface ColumnGroupSpec {
     /** Column or ColumnGroup configs for children of this group.*/

package/cmp/grid/impl/Utils.ts

@@ -4,12 +4,11 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {ColumnRenderer, GroupRowRenderer} from '@xh/hoist/cmp/grid';
-import {isFunction} from 'lodash';
+import {Column, ColumnGroup, ColumnRenderer, GroupRowRenderer} from '@xh/hoist/cmp/grid';
+import {HeaderClassParams} from '@xh/hoist/kit/ag-grid';
+import {castArray, isFunction} from 'lodash';
 
-/**
- * @internal
- */
+/** @internal */
 export function managedRenderer<T extends ColumnRenderer | GroupRowRenderer>(
     fn: T,
     identifier: string
@@ -24,3 +23,38 @@ export function managedRenderer<T extends ColumnRenderer | GroupRowRenderer>(
         }
     } as unknown as T;
 }
+
+/**
+ *   Generate CSS classes for headers.
+ *   Default alignment classes are mixed in with any provided custom classes.
+ *
+ *   @internal
+ */
+export function getAgHeaderClassFn(
+    column: Column | ColumnGroup
+): (params: HeaderClassParams) => string[] {
+    const {headerClass, headerAlign, gridModel} = column;
+
+    return agParams => {
+        let r = [];
+        if (headerClass) {
+            r = castArray(
+                isFunction(headerClass) ? headerClass({column, gridModel, agParams}) : headerClass
+            );
+        }
+
+        if (headerAlign === 'center' || headerAlign === 'right') {
+            r.push('xh-column-header-align-' + headerAlign);
+        }
+
+        if (column instanceof Column && column.isTreeColumn && column.headerHasExpandCollapse) {
+            r.push('xh-column-header--with-expand-collapse');
+        }
+
+        if (gridModel.headerMenuDisplay === 'hover') {
+            r.push('xh-column-header--hoverable');
+        }
+
+        return r;
+    };
+}

package/core/exception/Exception.ts

@@ -168,12 +168,13 @@ export class Exception {
             origin = match
                 ? match[0]
                 : protocolPattern.test(XH.baseUrl)
-                ? XH.baseUrl
-                : window.location.origin;
+                  ? XH.baseUrl
+                  : window.location.origin;
 
         return this.createFetchException({
             name: 'Server Unavailable',
             message: `Unable to contact the server at ${origin}`,
+            isServerUnavailable: true,
             fetchOptions,
             cause
         });

package/desktop/cmp/form/FormField.ts

@@ -163,7 +163,7 @@ export const [FormField, formField] = hoistCmp.withFactory<FormFieldProps>({
         if (disabled) classes.push('xh-form-field-disabled');
         if (displayNotValid) classes.push('xh-form-field-invalid');
 
-        const testId = getFormFieldTestId(props, formContext, model.name);
+        const testId = getFormFieldTestId(props, formContext, model?.name);
         useOnMount(() => instanceManager.registerModelWithTestId(testId, model));
         useOnUnmount(() => instanceManager.unregisterModelWithTestId(testId));
 
@@ -369,5 +369,8 @@ function getFormFieldTestId(
     formContext: FormContextType,
     fieldName: string
 ): string {
-    return props.testId ?? (formContext.testId ? `${formContext.testId}-${fieldName}` : undefined);
+    return (
+        props.testId ??
+        (formContext.testId && fieldName ? `${formContext.testId}-${fieldName}` : undefined)
+    );
 }

package/package.json

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

package/svc/FetchService.ts

@@ -46,19 +46,22 @@ export class FetchService extends HoistService {
         try {
             await this.fetch({url: 'ping'});
         } catch (e) {
-            const {baseUrl} = XH,
-                pingURL = baseUrl.startsWith('http')
-                    ? `${baseUrl}ping`
-                    : `${window.location.origin}${baseUrl}ping`;
-
-            throw XH.exception({
-                name: 'UI Server Unavailable',
-                detail: e.message,
-                message:
-                    'Client cannot reach UI server.  Please check UI server at the ' +
-                    `following location: ${pingURL}`,
-                logOnServer: false
-            });
+            if (e.isServerUnavailable) {
+                const {baseUrl} = XH,
+                    pingURL = baseUrl.startsWith('http')
+                        ? `${baseUrl}ping`
+                        : `${window.location.origin}${baseUrl}ping`;
+
+                throw XH.exception({
+                    name: 'UI Server Unavailable',
+                    detail: e.message,
+                    message:
+                        'Client cannot reach UI server.  Please check UI server at the ' +
+                        `following location: ${pingURL}`
+                });
+            }
+
+            throw e;
         }
     }