ROU-4571: Set custom tooltip on ColumnGroup (#377)

* Fix tooltip issue when using column group

- Fix bug when using a custom tooltip in a Grid with Column Group
- Created a new file to place the constants used in the file
- Added a method to set the Column Group header tooltip

* Expose tooltip as a Data Grid feature

- This is necessary so the developer can use the new setColumnGroupHeaderTooltip method

* Fix eslint issues

* Add comments

* Changed names and constants based on comments

src/OSFramework/DataGrid/Enum/ErrorMessages.ts

@@ -27,6 +27,7 @@ namespace OSFramework.DataGrid.Enum {
         ApplyRowValidation = 'It seems you are trying to validate a GroupRow.',
         SetCurrentPage = 'An error occurred while trying to set current page.',
         SetCurrentPageServerSidePagination = 'It seems that you have server side pagination turned on. Switch it off and try again.',
+        SetColumnHeaderTooltip = 'You are trying to use the setGroupHeaderTooltip in a cell that is not a Column Group header.',
         SetRowAsSelected = 'It seems that one or more of the row numbers you have providing do not exist on the current page.',
         SuccessMessage = 'Success',
         UnableToAddRow = 'Unable to add row. Please use ArrangeData action to serialize your data.',

src/OSFramework/DataGrid/Feature/ExposedFeatures.ts

@@ -28,6 +28,7 @@ namespace OSFramework.DataGrid.Feature {
         public sort: IColumnSort;
         public styling: IStyling;
         public tabNavigation: ITabNavigation;
+        public tooltip: ITooltip;
         public undoStack: IUndoStack;
         public validationMark: IValidationMark;
         public view: IView;

src/OSFramework/DataGrid/Feature/ITooltip.ts

@@ -0,0 +1,14 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+namespace OSFramework.DataGrid.Feature {
+    export interface ITooltip {
+        /**
+         * Set the Column Group header tooltip content.
+         * @param {HTMLElement} cell
+         * @param {string} tooltipContent
+         */
+        setColumnGroupHeaderTooltip(
+            cell: HTMLElement,
+            tooltipContent: string
+        ): void;
+    }
+}

src/OSFramework/DataGrid/Helper/GlobalEnum.ts

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+namespace OSFramework.DataGrid.Helper.GlobalEnum {
+    export enum HTMLAttributes {
+        Class = 'class'
+    }
+
+    export enum HTMLEvent {
+        MouseOver = 'mouseover',
+        MouseOut = 'mouseout'
+    }
+}

src/Providers/DataGrid/Wijmo/Features/FeatureBuilder.ts

@@ -206,8 +206,8 @@ namespace Providers.DataGrid.Wijmo.Feature {
             return this;
         }
 
-        private _makeToolTip(): FeatureBuilder {
-            this._makeItem(ToolTip);
+        private _makeTooltip(): FeatureBuilder {
+            this._features.tooltip = this._makeItem(Tooltip);
             return this;
         }
 
@@ -234,7 +234,7 @@ namespace Providers.DataGrid.Wijmo.Feature {
                 ._makeGroupPanel(config.groupPanelId)
                 ._makeCellData()
                 ._makeCellStyle()
-                ._makeToolTip()
+                ._makeTooltip()
                 ._makePagination(config.rowsPerPage)
                 ._makeSort(config.allowColumnSort)
                 ._makeGridReorder(config.allowColumnReorder)

src/Providers/DataGrid/Wijmo/Features/ToolTip.ts

@@ -1,7 +1,8 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 namespace Providers.DataGrid.Wijmo.Feature {
-    export class ToolTip
+    export class Tooltip
         implements
+            OSFramework.DataGrid.Feature.ITooltip,
             OSFramework.DataGrid.Interface.IBuilder,
             OSFramework.DataGrid.Interface.IDisposable
     {
@@ -10,11 +11,11 @@ namespace Providers.DataGrid.Wijmo.Feature {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         private _eventMouseOut: any;
         private _grid: Grid.IGridWijmo;
-        private _toolTip: wijmo.Tooltip;
+        private _tooltip: wijmo.Tooltip;
 
         constructor(grid: Grid.IGridWijmo) {
             this._grid = grid;
-            this._toolTip = new wijmo.Tooltip();
+            this._tooltip = new wijmo.Tooltip();
             this._eventMouseEnter = this._onMouseEnter.bind(this);
             this._eventMouseOut = this._onMouseOut.bind(this);
         }
@@ -30,22 +31,31 @@ namespace Providers.DataGrid.Wijmo.Feature {
             ) {
                 //Check if we do have data available, for instance while using filters that make the Grid without results
                 if (this._grid.provider.rows.length > 0) {
-                    this._setCellToolTip(
+                    this._setCellTooltip(
                         _currTarget,
                         ht.getColumn().binding,
                         ht.row
                     );
                 }
             } else if (cellType === wijmo.grid.CellType.ColumnHeader) {
-                this._setHeaderTooltip(_currTarget, ht.col);
+                // If the Column Header is from a Group Column, we need to use a different approach that the regular header
+                if (
+                    _currTarget.classList.contains(
+                        Helper.Constants.CssClasses.ColumnGroup
+                    )
+                ) {
+                    this._setColumnGroupHeaderTooltip(_currTarget);
+                } else {
+                    this._setHeaderTooltip(_currTarget, ht);
+                }
             }
         }
 
         private _onMouseOut(): void {
-            this._toolTip.hide();
+            this._tooltip.hide();
         }
 
-        private _setCellToolTip(
+        private _setCellTooltip(
             cell: HTMLElement,
             binding: string,
             row: number
@@ -59,12 +69,14 @@ namespace Providers.DataGrid.Wijmo.Feature {
                 binding
             );
 
-            if (cell.querySelector('div.dg-cell')) {
-                cell = cell.querySelector('div.dg-cell');
+            if (cell.querySelector(Helper.Constants.CssClasses.CellClass)) {
+                cell = cell.querySelector(
+                    Helper.Constants.CssClasses.CellClass
+                );
             }
 
             //Make sure to apply the correct tooltipClass
-            this._toolTipClass(isInvalid);
+            this._tooltipClass(isInvalid);
 
             //If the cell is valid
             if (isInvalid === false) {
@@ -74,14 +86,14 @@ namespace Providers.DataGrid.Wijmo.Feature {
                     sanitizedValue !== ''
                 ) {
                     //JS asserts the previous declaration as true when they are equal
-                    this._toolTip.show(cell, sanitizedValue); // show tooltip if text is overflow/hidden
+                    this._tooltip.show(cell, sanitizedValue); // show tooltip if text is overflow/hidden
                 } else {
-                    this._toolTip.hide();
+                    this._tooltip.hide();
                 }
             }
             //Otherwise (If the cell is invalid)
             else {
-                this._toolTip.show(
+                this._tooltip.show(
                     cell,
                     this._grid.features.validationMark.errorMessage(
                         row,
@@ -91,14 +103,30 @@ namespace Providers.DataGrid.Wijmo.Feature {
             }
         }
 
-        private _setHeaderTooltip(cell: HTMLElement, columnNumber: number) {
-            const column = this._grid.getColumns()[columnNumber];
-            const widgetId = column?.widgetId;
-            let headerTooltip = column?.config.headerTooltip;
+        private _setColumnGroupHeaderTooltip(cell: HTMLElement) {
+            // Do nothing if a tooltip is already set for this column
+            if (this._tooltip.getTooltip(cell)) return;
+            // Otherwise, the tooltip will be the header text
+            const headerTooltip = OSFramework.DataGrid.Helper.Sanitize(
+                cell.innerText
+            );
+
+            this._tooltipClass(false);
+            this._tooltip.show(cell, headerTooltip);
+        }
+
+        private _setHeaderTooltip(
+            cell: HTMLElement,
+            htCell: wijmo.grid.HitTestInfo
+        ) {
             const sanitizedValue = OSFramework.DataGrid.Helper.Sanitize(
                 cell.innerText
             );
 
+            const column = this._grid.getColumn(htCell.getColumn().binding);
+            const widgetId = column?.widgetId;
+            let headerTooltip = column?.config.headerTooltip;
+
             if (cell && headerTooltip) {
                 if (
                     !!document.getElementById(headerTooltip) &&
@@ -116,40 +144,75 @@ namespace Providers.DataGrid.Wijmo.Feature {
                 headerTooltip = sanitizedValue;
             }
 
-            this._toolTipClass(false);
-            this._toolTip.show(cell, headerTooltip);
+            this._tooltipClass(false);
+            this._tooltip.show(cell, headerTooltip);
         }
 
-        private _toolTipClass(isInvalid: boolean): void {
-            if (isInvalid === true) this._toolTip.cssClass = 'errorValidation';
-            else {
-                this._toolTip.cssClass = '';
+        private _tooltipClass(isInvalid: boolean): void {
+            if (isInvalid === true) {
+                this._tooltip.cssClass =
+                    Helper.Constants.CssClasses.TooltipErrorValidation;
+            } else {
+                this._tooltip.cssClass = '';
 
                 // Implementation of the workaround provided by Wijmo related to ROU-4207 issue.
                 // To be removed after Wijmo fix.
                 if (wijmo.Tooltip._eTip)
-                    wijmo.Tooltip._eTip.setAttribute('class', 'wj-tooltip');
+                    wijmo.Tooltip._eTip.setAttribute(
+                        OSFramework.DataGrid.Helper.GlobalEnum.HTMLAttributes
+                            .Class,
+                        Helper.Constants.CssClasses.Tooltip
+                    );
             }
         }
 
         public build(): void {
             this._grid.provider.formatItem.addHandler(
                 (s: wijmo.grid.FlexGrid, e: wijmo.grid.FormatItemEventArgs) => {
                     e.cell.removeEventListener(
-                        'mouseover',
+                        OSFramework.DataGrid.Helper.GlobalEnum.HTMLEvent
+                            .MouseOver,
+                        this._eventMouseEnter
+                    );
+                    e.cell.addEventListener(
+                        OSFramework.DataGrid.Helper.GlobalEnum.HTMLEvent
+                            .MouseOver,
                         this._eventMouseEnter
                     );
-                    e.cell.addEventListener('mouseover', this._eventMouseEnter);
 
-                    e.cell.removeEventListener('mouseout', this._eventMouseOut);
-                    e.cell.addEventListener('mouseout', this._eventMouseOut);
+                    e.cell.removeEventListener(
+                        OSFramework.DataGrid.Helper.GlobalEnum.HTMLEvent
+                            .MouseOut,
+                        this._eventMouseOut
+                    );
+                    e.cell.addEventListener(
+                        OSFramework.DataGrid.Helper.GlobalEnum.HTMLEvent
+                            .MouseOut,
+                        this._eventMouseOut
+                    );
                 }
             );
         }
 
         public dispose(): void {
-            this._toolTip.dispose();
-            this._toolTip = undefined;
+            this._tooltip.dispose();
+            this._tooltip = undefined;
+        }
+
+        public setColumnGroupHeaderTooltip(
+            cell: HTMLElement,
+            tooltipContent: string
+        ): void {
+            if (
+                cell.classList.contains(Helper.Constants.CssClasses.ColumnGroup)
+            ) {
+                this._tooltip.setTooltip(cell, tooltipContent);
+            } else {
+                console.warn(
+                    OSFramework.DataGrid.Enum.ErrorMessages
+                        .SetColumnHeaderTooltip
+                );
+            }
         }
     }
 }

src/Providers/DataGrid/Wijmo/Helper/Constants.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+namespace Providers.DataGrid.Wijmo.Helper.Constants {
+    export enum CssClasses {
+        CellClass = 'div.dg-cell',
+        ColumnGroup = 'wj-colgroup',
+        Tooltip = 'wj-tooltip',
+        TooltipErrorValidation = 'errorValidation'
+    }
+}