@genesislcap/grid-pro 14.292.0 → 14.293.0

package/dist/esm/datasource/error-handler.dialog.js

@@ -0,0 +1,116 @@
+import { css, html, when, repeat } from '@microsoft/fast-element';
+const extractMessage = (detail) => {
+    if (!detail)
+        return '';
+    if (typeof detail === 'string')
+        return detail;
+    if (Array.isArray(detail)) {
+        return detail.map(extractMessage).join(', ');
+    }
+    if (typeof detail === 'object') {
+        if ('message' in detail && typeof detail.message === 'string')
+            return detail.message;
+        if ('TEXT' in detail && typeof detail.TEXT === 'string')
+            return detail.TEXT;
+        return JSON.stringify(detail);
+    }
+    return String(detail);
+};
+export const errorHandlerDialogStyles = css `
+  .overlay {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--datasource-error-background-color, var(--neutral-layer-4));
+    opacity: var(--datasource-error-background-opacity, 0.5);
+    z-index: 1000;
+    pointer-events: auto;
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .dialog-container {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1001;
+    max-width: 90vw;
+    max-height: 90vh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    opacity: 1 !important;
+    filter: none !important;
+    box-sizing: border-box;
+  }
+  .grid-datasource-error-dialog {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    max-width: 400px;
+    width: 100%;
+    box-sizing: border-box;
+    background: var(--dialog-background, #2d2533);
+    box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.45);
+    overflow: visible;
+    min-height: 120px;
+  }
+  .error-details {
+    max-height: 120px;
+    overflow: auto;
+    width: 100%;
+    margin-top: 8px;
+  }
+`;
+export function getErrorHandlerDialogTemplate(prefix, gridErrorItems) {
+    const dialogTag = `${prefix}-dialog`;
+    const buttonTag = `${prefix}-button`;
+    return html `
+    ${when(() => gridErrorItems && gridErrorItems.length > 0, html `
+        <div class="overlay"></div>
+        <div class="dialog-container">
+          <${dialogTag}
+            class="grid-datasource-error-dialog"
+            type="error"
+            show-close-icon="false"
+            open
+          >
+            <h2 slot="top" class="title">Datasource Error</h2>
+            <div>
+              <p>
+                The Datasource is currently unavailable due to an error.
+              </p>
+              <p>
+                This may be due to a network issue, server maintenance or a Datasource configuration error.
+              </p>
+              <details class="error-details">
+                <summary>Show error details</summary>
+                ${repeat(() => gridErrorItems, html `
+                    <p>
+                      <strong>Error:</strong>
+                      ${(x) => extractMessage(x.detail) || 'Unknown error occurred'}
+                    </p>
+                  `)}
+              </details>
+            </div>
+            <div slot="bottom">
+              <${buttonTag} appearance="lightweight" @click=${(x) => {
+        var _a;
+        x.hideDatasourceError();
+        (_a = x.gridProDatasource) === null || _a === void 0 ? void 0 : _a.restart();
+    }}>
+                Reload
+              </${buttonTag}>
+            </div>
+          </${dialogTag}>
+        </div>
+      `)}
+  `;
+}

package/dist/esm/datasource/server-side.datasource.js

@@ -106,6 +106,7 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
             if (!shouldRunConnect)
                 return;
             this.init();
+            this.subscribeToConnection();
         });
     }
     disconnectedCallback() {
@@ -115,6 +116,7 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
             if (!shouldRunDisconnect)
                 return;
             yield this.destroy();
+            this.unsubscribeFromConnection();
         }));
     }
     deepClone() {
@@ -137,10 +139,11 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
             // Cache the current filter model before clearing data to preserve column filters
             yield ((_b = this.agGrid) === null || _b === void 0 ? void 0 : _b.cacheFilterConfig());
             this.clearRowData(withoutColumnDefs);
+            this.setDisconnected(false);
             (_c = this.agGrid.gridApi) === null || _c === void 0 ? void 0 : _c.refreshServerSide({ purge: true });
             if (params) {
                 const options = Object.assign(Object.assign({}, this.datasourceOptions()), params);
-                const initOK = yield this.datasource.init(options, true, false);
+                const initOK = yield this.initializeDatasource(options, true, false);
                 if (!initOK) {
                     (_d = this.agGrid.gridApi) === null || _d === void 0 ? void 0 : _d.setServerSideDatasource(null);
                     logger.error('Genesis Datasource re-init failed on filtering/sorting.');
@@ -215,13 +218,15 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
                 this.agGrid.gridOptions = gridOptions;
                 this.agGrid['initGrid']();
                 this.agGrid.addEventListener(Events.EVENT_GRID_READY, () => __awaiter(this, void 0, void 0, function* () {
-                    const initOK = yield this.datasource.init(this.datasourceOptions(), true, false);
+                    const initOK = yield this.initializeDatasource(this.datasourceOptions(), true, false);
                     if (!initOK) {
                         logger.debug(`Genesis Datasource init failed for ${this.resourceName}`);
                         this.clearRowData();
+                        this.setDisconnected(true);
                         return;
                     }
                     this.$emit(gridProGenesisDatasourceEventNames.dataInit);
+                    this.setDisconnected(false);
                     this.indexes = this.getResourceIndexes(this.datasource.availableIndexes);
                     const fieldMetadata = toFieldMetadata(this.datasource.originalFieldDef);
                     const agColumnDefs = yield this.getAgColumnDefs(fieldMetadata);
@@ -230,6 +235,7 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
                         this.ssrmDatasource = new ReqRepServerSideDatasource({
                             createReqRepRequestFunc: this.createReqRepRequest.bind(this),
                             reloadResourceDataFunc: this.reloadResourceData.bind(this),
+                            errorHandlerFunc: this.handleErrors.bind(this),
                             resourceName: this.resourceName,
                             resourceParams: this.params,
                             resourceIndexes: this.indexes,
@@ -245,6 +251,7 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
                         this.ssrmDatasource = new DataserverServerSideDatasource({
                             createDataserverStreamFunc: this.createDataserverStream.bind(this),
                             reloadResourceDataFunc: this.reloadResourceData.bind(this),
+                            errorHandlerFunc: this.handleErrors.bind(this),
                             resourceName: this.resourceName,
                             resourceParams: this.params,
                             resourceIndexes: this.indexes,
@@ -264,7 +271,7 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
                 }), { once: true });
                 return;
             }
-            logger.warn(`Application not connected, falling back to local columnDefs/rowData`);
+            this.handleErrors('Application not connected or invalid resource name, datasource will not work.', 'unknown');
         });
     }
     onPaginationChanged(event) {
@@ -379,7 +386,11 @@ let GridProServerSideDatasource = class GridProServerSideDatasource extends Life
                         }
                     }
                 });
-                const onError = (error) => logger.error(error);
+                const onError = (error) => {
+                    var _a;
+                    logger.error(error);
+                    this.handleErrors(((_a = error.receivedMessage) === null || _a === void 0 ? void 0 : _a.ERROR) || error.message, 'stream');
+                };
                 this.liveUpdatesStream = this.connect
                     .stream(this.resourceName, () => { }, onError, existingParams !== null && existingParams !== void 0 ? existingParams : this.params)
                     .subscribe((message) => streamOnMessage(message));

package/dist/esm/datasource/server-side.resource-base.js

@@ -25,6 +25,7 @@ export class BaseServerSideDatasource {
         this.calculatedRowsCount = 0;
         this.currentSequenceId = null;
         this.reloadResourceDataFunc = options.reloadResourceDataFunc;
+        this.errorHandlerFunc = options.errorHandlerFunc;
         this.resourceName = options.resourceName;
         this.resourceParams = options.resourceParams;
         this.originalCriteriaMatch = options.resourceParams.CRITERIA_MATCH;

package/dist/esm/datasource/server-side.resource-dataserver.js

@@ -79,6 +79,13 @@ export class DataserverServerSideDatasource extends BaseServerSideDatasource {
         const messageType = result.MESSAGE_TYPE;
         if (messageType &&
             (messageType === MessageType.LOGOFF_ACK || messageType === MessageType.MSG_NACK)) {
+            // Trigger error dialog for connection/authentication errors
+            if (this.errorHandlerFunc) {
+                const errorMessage = messageType === MessageType.LOGOFF_ACK
+                    ? `Connection lost to ${this.resourceName}`
+                    : `Authentication failed for ${this.resourceName}`;
+                this.errorHandlerFunc(errorMessage, 'connection');
+            }
             params.fail();
             return;
         }

package/dist/esm/datasource/server-side.resource-reqrep.js

@@ -58,6 +58,13 @@ export class ReqRepServerSideDatasource extends BaseServerSideDatasource {
         const messageType = result.MESSAGE_TYPE;
         if (messageType &&
             (messageType === MessageType.LOGOFF_ACK || messageType === MessageType.MSG_NACK)) {
+            // Trigger error dialog for connection/authentication errors
+            if (this.errorHandlerFunc) {
+                const errorMessage = messageType === MessageType.LOGOFF_ACK
+                    ? `Connection lost to ${this.resourceName}`
+                    : `Authentication failed for ${this.resourceName}`;
+                this.errorHandlerFunc(errorMessage, 'connection');
+            }
             params.fail();
             return;
         }

package/dist/esm/grid-pro-genesis-datasource/grid-pro-genesis-datasource.js

@@ -24,7 +24,6 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
         this.applyAsyncFuncName = 'applyTransactionAsync';
         // Cache for rowData array to avoid repeated Array.from() calls
         this.cachedRowArray = [];
-        this.restartOnReconnection = true;
         this.keepColDefsOnClearRowData = false;
         this.requiresFullRowDataAndColDefs = true;
         this._lastMoreRows = false;
@@ -57,18 +56,7 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
             if (!shouldRunConnect)
                 return;
             this.init();
-        });
-        this.connectionSub = this.connect.isConnected$.subscribe((isConnected) => {
-            var _a;
-            if (isConnected && ((_a = this.agGrid) === null || _a === void 0 ? void 0 : _a.attributes['ds-disconnected'])) {
-                this.agGrid.removeAttribute('ds-disconnected');
-                if (this.restartOnReconnection) {
-                    this.reloadResourceData();
-                }
-            }
-            if (!isConnected) {
-                this.agGrid.setAttribute('ds-disconnected', 'ds-disconnected');
-            }
+            this.subscribeToConnection();
         });
     }
     disconnectedCallback() {
@@ -78,6 +66,7 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
             if (!shouldRunDisconnect)
                 return;
             this.destroy();
+            this.unsubscribeFromConnection();
         });
     }
     deepClone() {
@@ -142,7 +131,7 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
                 });
                 return;
             }
-            this.handleErrors('Application not connected or invalid resource name, datasource will not work. Falling back to local columnDefs/rowData.');
+            this.handleErrors('Application not connected or invalid resource name, datasource will not work.', 'unknown');
         });
     }
     /**
@@ -164,6 +153,7 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
             this.connectionSub.unsubscribe();
             this.connectionSub = undefined;
         }
+        this._sourceRef = undefined;
         this.clearRowData();
         this._lastMoreRows = false;
         this._isMoreRowsResult = false;
@@ -173,7 +163,7 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
         this.criteriaFromFilters = new Map();
         (_a = this.update) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         this.update = new BehaviorSubject(new Map());
-        this.agGrid.removeAttribute('ds-disconnected');
+        this.setDisconnected(false);
         // TODO: There may need to be a full destroy path. Datasources need some love!
         this.datasource.destroy();
     }
@@ -301,7 +291,7 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
             yield ((_a = this.agGrid) === null || _a === void 0 ? void 0 : _a.cacheFilterConfig());
             this.clearRowData(withoutColumnDefs);
             (_c = (_b = this.agGrid) === null || _b === void 0 ? void 0 : _b.gridApi) === null || _c === void 0 ? void 0 : _c.showLoadingOverlay();
-            this.agGrid.removeAttribute('ds-disconnected');
+            this.setDisconnected(false);
             yield this.loadResourceData(withoutFullInit);
         });
     }
@@ -317,7 +307,8 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
         return __awaiter(this, void 0, void 0, function* () {
             const requiresMetadataFetch = withFullInit || !this.datasource.initialized;
             try {
-                const initOK = yield this.datasource.init(this.datasourceOptions(), requiresMetadataFetch, false);
+                // Use the base datasource error handling
+                const initOK = yield this.initializeDatasource(this.datasourceOptions(), requiresMetadataFetch, false);
                 if (!initOK) {
                     logger.debug(`Genesis Datasource init failed for ${this.resourceName}`);
                     this.clearRowData();
@@ -337,7 +328,8 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
                 this.dataSub = this.datasource.stream
                     .pipe(catchError((err) => {
                     var _a;
-                    this.handleErrors((_a = err === null || err === void 0 ? void 0 : err.receivedMessage) === null || _a === void 0 ? void 0 : _a.ERROR);
+                    // Use base error handling for stream errors
+                    this.handleErrors(((_a = err === null || err === void 0 ? void 0 : err.receivedMessage) === null || _a === void 0 ? void 0 : _a.ERROR) || (err === null || err === void 0 ? void 0 : err.message) || err, 'stream');
                     return EMPTY;
                 }))
                     .subscribe((result) => {
@@ -346,11 +338,11 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
                     const hasRowsCountInResult = 'ROWS_COUNT' in result;
                     this._isMoreRowsResult = hasMoreRowsInResult && !hasRowsCountInResult;
                     if (result === null || result === void 0 ? void 0 : result.ERROR) {
-                        this.handleErrors(result.ERROR);
+                        this.handleErrors(result.ERROR, 'criteria');
                     }
                     const messageType = result.MESSAGE_TYPE;
                     if (messageType && messageType === MessageType.LOGOFF_ACK) {
-                        this.handleErrors(`Genesis datasource for ${this.resourceName} disconnected.`);
+                        this.handleErrors(`Genesis datasource for ${this.resourceName} disconnected.`, 'connection');
                         this.dataSubWasLoggedOff = true;
                         return;
                     }
@@ -381,7 +373,8 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
                     message = error.receivedMessage.ERROR;
                 }
                 logger.error(message);
-                this.handleErrors(message);
+                // Use base error handling for general errors
+                this.handleErrors(message, 'unknown');
             }
         });
     }
@@ -396,30 +389,6 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
         }
         return result.inserts;
     }
-    handleErrors(errors) {
-        let message;
-        if (Array.isArray(errors)) {
-            const stringArray = errors.map((item) => {
-                if (typeof item === 'string') {
-                    return item;
-                }
-                else if (typeof item === 'object' && item !== null && 'TEXT' in item) {
-                    return item.TEXT;
-                }
-                else {
-                    throw new Error('Array contains invalid elements');
-                }
-            });
-            message = stringArray.join(', ');
-        }
-        if (this.agGrid) {
-            this.agGrid.setAttribute('ds-disconnected', 'ds-disconnected');
-        }
-        if (message) {
-            logger.error(message);
-            this.$emit(gridProGenesisDatasourceEventNames.error, { message });
-        }
-    }
     handleStreamResult(result) {
         if (!result)
             return;
@@ -574,9 +543,6 @@ let GridProGenesisDatasource = class GridProGenesisDatasource extends LifecycleM
         this.connect.getMoreRows(this._sourceRef);
     }
 };
-__decorate([
-    attr({ mode: 'boolean', attribute: 'restart-on-reconnection' })
-], GridProGenesisDatasource.prototype, "restartOnReconnection", void 0);
 __decorate([
     attr({ mode: 'boolean', attribute: 'keep-col-defs-on-clear-row-data' })
 ], GridProGenesisDatasource.prototype, "keepColDefsOnClearRowData", void 0);

package/dist/esm/grid-pro.js

@@ -14,6 +14,7 @@ import { DateEditor, MultiselectEditor, NumberEditor, SelectEditor, StringEditor
 import { ActionRenderer, ActionsMenuRenderer, BooleanRenderer, EditableRenderer, StatusPillRenderer, SelectRenderer, } from './cell-renderers';
 import { GridProColumn } from './column';
 import { GridProClientSideDatasource, GridProServerSideDatasource } from './datasource';
+import { baseDatasourceEventNames } from './datasource/base.types';
 import { agThemeFontFaceMap, defaultAgGridFontFace } from './external';
 import { GridProGenesisDatasource, gridProGenesisDatasourceEventNames, } from './grid-pro-genesis-datasource';
 import { DEBOUNCED_RESIZE_TIME, gridProErrorNames, gridProEventNames, } from './grid-pro.definitions';
@@ -162,9 +163,14 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
             return map;
         }, {});
         const hideDataSourceError = this.hideDatasourceError.bind(this);
-        this.rootEventsListeners.push({ key: gridProGenesisDatasourceEventNames.dataInit, action: hideDataSourceError }, { key: gridProEventNames.datasourceErrorClose, action: hideDataSourceError }, {
-            key: gridProGenesisDatasourceEventNames.error,
-            action: this.handleError.bind(this, gridProErrorNames.datasource),
+        this.rootEventsListeners.push({ key: gridProGenesisDatasourceEventNames.dataInit, action: hideDataSourceError }, { key: gridProEventNames.datasourceErrorClose, action: hideDataSourceError }, 
+        // Base datasource error handling for resource validation and initialization errors
+        {
+            key: baseDatasourceEventNames.error,
+            action: this.handleBaseDatasourceError.bind(this),
+        }, {
+            key: baseDatasourceEventNames.connected,
+            action: hideDataSourceError,
         });
     }
     /**
@@ -194,6 +200,17 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
     handleError(type, event) {
         this.gridErrorItems = [...this.gridErrorItems, { detail: event.detail, type }];
     }
+    handleBaseDatasourceError(event) {
+        // Map base datasource errors to grid-pro error format
+        const gridProError = {
+            detail: { message: event.detail.message },
+            type: gridProErrorNames.datasource,
+        };
+        this.gridErrorItems = [
+            ...this.gridErrorItems,
+            { detail: gridProError.detail, type: gridProError.type },
+        ];
+    }
     hideDatasourceError() {
         this.gridErrorItems = this.gridErrorItems.filter((item) => item.type !== gridProErrorNames.datasource);
     }

package/dist/esm/grid-pro.styles.js

@@ -1,4 +1,5 @@
 import { css } from '@microsoft/fast-element';
+import { errorHandlerDialogStyles } from './datasource/error-handler.dialog';
 import { agExternalStockStyles } from './external';
 /**
  * The Grid Pro styles.
@@ -7,6 +8,7 @@ import { agExternalStockStyles } from './external';
  */
 export const foundationGridProStyles = css `
   ${agExternalStockStyles}
+  ${errorHandlerDialogStyles}
   :host {
     --datasource-error-background-color: var(--neutral-layer-4);
     --datasource-error-background-opacity: 0.5;
@@ -43,28 +45,6 @@ export const foundationGridProStyles = css `
     display: none;
   }
 
-  .grid-datasource-error-dialog::part(dialog) {
-    position: absolute;
-    z-index: 2;
-    max-width: var(--datasource-error-dialog-max-width);
-
-    --dialog-min-width: var(--datasource-error-dialog-min-width);
-  }
-
-  .grid-datasource-error-dialog::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 0;
-    height: 100%;
-    width: 100%;
-    border-radius: 2px;
-    background-color: var(--datasource-error-background-color);
-    opacity: var(--datasource-error-background-opacity);
-    z-index: 1;
-  }
-
   .error {
     border-color: var(--error-color) !important;
   }

package/dist/esm/grid-pro.template.js

@@ -1,5 +1,5 @@
 import { html, ref } from '@microsoft/fast-element';
-import { gridProErrorNames } from './grid-pro.definitions';
+import { getErrorHandlerDialogTemplate } from './datasource/error-handler.dialog';
 /**
  * Get a Design System prefixed The Grid Pro template.
  * @param prefix - The design system prefix to use. Defaults to 'foundation'.
@@ -12,43 +12,13 @@ export const getGridProTemplate = (prefix = 'foundation') => html `
       <slot name="grid" ${ref('gridSlot')}></slot>
       <slot></slot>
     </span>
-    <slot
-        name="grid-datasource-error"
-        part="grid-datasource-error"
-        class="${(x) => (x.gridErrorItems.filter(({ type }) => type === gridProErrorNames.datasource).length > 0 ? '' : 'hidden')}"
-      >
-        <${prefix}-dialog
-          class="grid-datasource-error-dialog"
-          type="error"
-          show-close-icon="false"
-          open
-        >
-          <h2 slot="top" class="title">Component unavailable</h2>
-          <p>
-            Please refresh to reconnect.
-            It is recommended that you save your data before refreshing.
-            Data is not current and may be incomplete.
-          </p>
-          <div slot="bottom">
-            <${prefix}-button
-              appearance="lightweight"
-              @click=${(x) => {
-    var _a;
-    x.hideDatasourceError();
-    (_a = x.gridProDatasource) === null || _a === void 0 ? void 0 : _a.restart();
-}}
-            >
-              Refresh
-            </${prefix}-button>
-          </div>
-        </${prefix}-dialog>
-      </slot>
+    ${(x) => getErrorHandlerDialogTemplate(prefix, x.gridErrorItems.filter(({ type }) => type === 'datasource'))}
   </template>
 `;
 /**
  *
  * @public
  * @remarks
- * HTML Element: \<foundation-grid-pro\>
+ * HTML Element: <foundation-grid-pro>
  */
 export const gridProTemplate = getGridProTemplate();