Return an instance of a public row classes from certain API calls (#9187)

* feat(grid): public row API, grid and tgrid #8668

* chore(*): add sample for public row api

* style(*): fix lint error #8668

* style(*): fix lint error #8668

* feat(grid): grid and tgrid API enhance #8668

* chore(*): update row api sample

* test(grid): fix test accroding to changes #8668

* chore(*): fix lint errors

* chore(*): fix lint errors

* test(grid): fix grid tests #9139

* test(grid): fix grid tests #9139

* test(grid): fix grid tests #9139

* test(grid): fix тgrid tests #9139

* feat(grid): find data by index recursively in tgrid #8668

* chore(*): fix lint errors

* merge master

* test(grid): fix row editing test

* fix(grid): fix recursive logic to find element in treegrid

* test(grid): exclude test to see how build runs

* fix(grid): fix recursive logic to find element in tgrid

* fix(grid): recursive logic to find element in tgrid by key

* fix(Grid): use recursive logic to find row for every tgrid

* fix(grid): return IgxGroupByrow facade instance

* chore(*): fix lint errors

* chore(*): fix lint errors

* chore(*): allow tests to run

* chore(*): allow tests to run

* fix(grid): implement IgxSummaryRow facade

* chore(*): fix lint errors

* chore(*): fix lint errors

* feat(grid): return IgxSummaryRow instance

* test(grid): fix tests and bugs

* test(grid): fix hier test that use DOM elements

* test(grid): REMOVE F FROM TESTS

* test(grid): fix hier tests, use gridAPI

* test(grid): fix hier tests, use gridAPI

* chore(*): clean code, write examples

* chore(*): fix tests to expect row not to be disabled

* chore(*): revert some changes frm 620d44b

* chore(*): revert some changes frm 620d44b

* chore(*): revert some changes 620d44b

* chore(*): fix test to get row component

* feat(grid): consider all type of rows and pages when finding row

* feat(grid): use top pinning position in first step

* fix(grid): fix small bugs in finfing pinned row

* fix(grid): drop support for get row in other pages

* chore(*): fix lint errors

* fix(Grid): fix failing test for getting row

* fix(grid): get row by key from data rows collection

* fix(Grid): collapsed rows should be undefined

* fix(grid): use current page data for hier grid

* fix(grid): dont add pinned rec to collection, it is already there

* fix(grid): deprecate row.rowData, use row.data instead

* fix(grid): deprecate row.rowID. use key instead

* fix(*): add initial tests #8668

* chore(*): address comments on PR, use dataView

* chore(*): remove fit frrom tests

* chore(*): remove fit frrom tests

* fix(grid): emit RowType row on row pinning

* fix(grid): reuse grouprow toggle method

* chore(*): remove fit from tests

* refactor(grid): extract stuff in BaseRow class

* chore(*): Add row API tests

* fix(grid): explicitly add setters in derived class

* test(grid): update tests to use key isnetad of rowID,dont test disabled

* chore(*): remove fit from test

* chore(*): fix test to test summary row attributes

* chore(*): fix test to verify correct children number

* chore(*): rename deprecated, add HGrid test

* chore(*): Add separate pinning and hasChildren

* chore(*): add final test for editing with update

* fix(grid): clear code, use markForCheck

* chore(*): clear unsused imports

* fix(grid): row drag directive to emit RowType and native element

* fix(grid): keep test in its initial variant

* chore(*): fix lint errrors with member accessors

* fix(grid): dont expose row components in public api

* chore(*): fix lint error property shorthand

* test(grid): add migration and migration tests

* chore(*): update changelog file

* chore(*): fix lint errors

* chore(*): fix replace bug in migration

* chore(*): call update.applyChanges

Co-authored-by: Zdravko Kolev <[email protected]>

Author: hanastasov

CHANGELOG.md

@@ -7,7 +7,12 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Breaking Change** - The `locale` and `pipeArgs` parameters are removed from the `operate` method exposed by the `IgxNumberSummaryOperand`, `IgxDateSummaryOperand`, `IgxCurrencySummaryOperand` and `IgxPercentSummaryOperand`. They are now set in the `igx-grid-summary-cell` template. To change the locale and format setting of the `igx-grid-summary-cell` the user can use the new `summaryFormatter` property of the `IgxColumnComponent`.
-- `IgxTabs`, `IgxBottomNav`
+    - `IgxGridRowComponent`, `IgxGridGroupByRowComponent`, `IgxTreeGridRowComponent`, `IgxHierarchicalRowComponent` are no longer exposed in the public API. Automatic migration will change these imports with `RowType`.
+    - **Behavioral changes**
+    - `getRowByIndex`, `getRowByKey`, `cell.row` now return an object implemening the `RowType` interface.
+    - `dragData` emitted with `IRowDragEndEventArgs`, `IRowDragStartEventArgs` is now `RowType`
+    - `IRowDragEndEventArgs`, `IRowDragStartEventArgs` now emit `dragElement`, which holds the dragged row html element.
+    - `row` in `IPinRowEventArgs` is now `RowType`
     - **Breaking Change** - `IgxTabs` and `IgxBottomNav` components were completely refactored in order to provide more flexible and descriptive way to define tab headers and contents. Please make sure to update via `ng update` in order to migrate the existing `igx-tabs` and `igx-bottom-nav` definitions to the new ones.
 - `IgxForOfDirective`
     - **Breaking Change** - `IgxForOfDirective` events are renamed as follows:

projects/igniteui-angular/migrations/update-12_0_0/index.spec.ts

@@ -336,6 +336,52 @@ igx-bottom-nav-content {
 }
 igx-bottom-nav-header {
     padding: 8px;
+}`);
+    });
+
+    it('Should update row component types with RowType', async () => {
+        appTree.create(
+            '/testSrc/appPrefix/component/rows.component.ts', `
+import { IgxGridComponent, IgxGridRowComponent, IgxHierarchicalRowComponent, RowPinningPosition } from 'igniteui-angular';
+export class HGridMultiRowDragComponent {
+    public onDropAllowed(args: IDropDroppedEventArgs)
+        const hierRow: IgxHierarchicalRowComponent = args.dragData;
+        const row: IgxGridRowComponent = args.dragData;
+        const treeRow: IgxTreeGridRowComponent = args.dragData;
+        const groupByRow: IgxGridGroupByRowComponent = args.dragData;
+        const children = (cell.row as IgxTreeGridRowComponent).children;
+    }
+    public ngOnInit() {
+        const hierRow: this.hierGrid1.getRowByIndex(0) as IgxHierarchicalRowComponent;
+        const row: this.grid1.getRowByIndex(0) as IgxGridRowComponent;
+        const treeRow: this.treeGrid1.getRowByIndex(0) as IgxTreeGridRowComponent;
+        const hierRowComp: this.hierGrid1.hGridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+        const rowComp: this.grid1.gridAPI.get_row_by_index(0) as IgxGridRowComponent;
+        const treeRowComp: this.gridAPI.get_row_by_index(0) as IgxTreeGridRowComponent;
+    }
+}`);
+        const tree = await schematicRunner.runSchematicAsync('migration-20', {}, appTree)
+            .toPromise();
+
+        expect(tree.readContent('/testSrc/appPrefix/component/rows.component.ts'))
+            .toEqual(`
+import { IgxGridComponent, RowType, RowPinningPosition } from 'igniteui-angular';
+export class HGridMultiRowDragComponent {
+    public onDropAllowed(args: IDropDroppedEventArgs)
+        const hierRow: RowType = args.dragData;
+        const row: RowType = args.dragData;
+        const treeRow: RowType = args.dragData;
+        const groupByRow: RowType = args.dragData;
+        const children = (cell.row as RowType).children;
+    }
+    public ngOnInit() {
+        const hierRow: this.hierGrid1.getRowByIndex(0) as RowType;
+        const row: this.grid1.getRowByIndex(0) as RowType;
+        const treeRow: this.treeGrid1.getRowByIndex(0) as RowType;
+        const hierRowComp: this.hierGrid1.hGridAPI.get_row_by_index(0) as RowType;
+        const rowComp: this.grid1.gridAPI.get_row_by_index(0) as RowType;
+        const treeRowComp: this.gridAPI.get_row_by_index(0) as RowType;
+    }
 }`);
     });
 });

projects/igniteui-angular/migrations/update-12_0_0/index.ts

@@ -34,6 +34,7 @@ export default (): Rule => (host: Tree, context: SchematicContext) => {
     const changes = new Map<string, FileChange[]>();
     const htmlFiles = update.templateFiles;
     const sassFiles = update.sassFiles;
+    const tsFiles = update.tsFiles;
     let applyComment = false;
 
     const applyChanges = () => {
@@ -217,6 +218,111 @@ export default (): Rule => (host: Tree, context: SchematicContext) => {
         }
     }
 
-    // Apply all selector and input changes
+    // update row components imports and typings with new RowType interface
+    const rowsImports = [
+        'IgxGridRowComponent, ',
+        'IgxGridGroupByRowComponent, ',
+        'IgxTreeGridRowComponent, ',
+        'IgxHierarchicalRowComponent, '];
+
+    const rowsImportsNoSpace = [
+            'IgxGridRowComponent,',
+            'IgxGridGroupByRowComponent,',
+            'IgxTreeGridRowComponent,',
+            'IgxHierarchicalRowComponent,'];
+
+    const rowsImportsEnd = [
+        ', IgxGridRowComponent }',
+        ', IgxGridGroupByRowComponent }',
+        ', IgxTreeGridRowComponent }',
+        ', IgxHierarchicalRowComponent }'];
+
+    const rowsImportsEndNewLIne = [
+        'IgxGridRowComponent }',
+        'IgxGridGroupByRowComponent }',
+        'IgxTreeGridRowComponent }',
+        'IgxHierarchicalRowComponent }'];
+
+    const typyingsToReplace = [
+        'as IgxGridRowComponent;',
+        'as IgxGridRowComponent).',
+        ': IgxGridRowComponent',
+
+        'as IgxGridGroupByRowComponent;',
+        'as IgxGridGroupByRowComponent).',
+        ': IgxGridGroupByRowComponent',
+
+        'as IgxTreeGridRowComponent;',
+        'as IgxTreeGridRowComponent).',
+        ': IgxTreeGridRowComponent',
+
+        'as IgxHierarchicalRowComponent;',
+        'as IgxHierarchicalRowComponent).',
+        ': IgxHierarchicalRowComponent'
+    ];
+
+    const replacements = [
+        'as RowType;',
+        'as RowType).',
+        ': RowType'
+    ];
+
+
+    for (const entryPath of tsFiles) {
+        let content = host.read(entryPath).toString();
+        let importChanged = 0;
+
+        rowsImports.forEach((n, i) => {
+            if (content.indexOf(n) !== -1) {
+                if (importChanged === 0) {
+                    content = content.replace(n, 'RowType, ');
+                    importChanged++;
+                } else {
+                    content = content.split(n).join('');
+                }
+            }
+        });
+
+        rowsImportsNoSpace.forEach((n, i) => {
+            if (content.indexOf(n) !== -1) {
+                if (importChanged === 0) {
+                    content = content.replace(n, 'RowType,');
+                    importChanged++;
+                } else {
+                    content = content.split(n).join('');
+                }
+            }
+        });
+
+        rowsImportsEnd.forEach((n, i) => {
+            if (content.indexOf(n) !== -1) {
+                if (importChanged === 0) {
+                    content = content.replace(n, ', RowType }');
+                    importChanged++;
+                } else {
+                    content = content.split(n).join(' }');
+                }
+            }
+        });
+
+        rowsImportsEndNewLIne.forEach((n, i) => {
+            if (content.indexOf(n) !== -1) {
+                if (importChanged === 0) {
+                    content = content.replace(n, 'RowType }');
+                    importChanged++;
+                } else {
+                    content = content.split(n).join('}');
+                }
+            }
+        });
+
+        typyingsToReplace.forEach((n, i) => {
+            if (content.indexOf(n) !== -1) {
+                content = content.split(n).join(replacements[i % 3]);
+            }
+        });
+        host.overwrite(entryPath, content);
+    }
+
     update.applyChanges();
 };

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts

@@ -10,10 +10,10 @@ import { IgxActionStripModule } from '../action-strip.module';
 import { UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { IgxHierarchicalGridActionStripComponent } from '../../test-utils/hierarchical-grid-components.spec';
 import {
-    IgxHierarchicalRowComponent,
     IgxHierarchicalGridComponent,
     IgxHierarchicalGridModule
 } from '../../grids/hierarchical-grid/public_api';
+import { IgxHierarchicalRowComponent } from '../../grids/hierarchical-grid/hierarchical-row.component';
 
 describe('igxGridEditingActions #grid ', () => {
     let fixture;
@@ -159,7 +159,7 @@ describe('igxGridEditingActions #grid ', () => {
             grid = fixture.componentInstance.grid;
         }));
         it('should auto-show on mouse enter of row.', () => {
-            const row = grid.getRowByIndex(0);
+            const row = grid.gridAPI.get_row_by_index(0);
             const rowElem = row.nativeElement;
             UIInteractions.simulateMouseEvent('mouseenter', rowElem, 0, 0);
             fixture.detectChanges();
@@ -191,7 +191,7 @@ describe('igxGridEditingActions #grid ', () => {
         }));
 
         it('should auto-show root actionStrip on mouse enter of root row.', () => {
-            const row = hierarchicalGrid.getRowByIndex(0);
+            const row = hierarchicalGrid.gridAPI.get_row_by_index(0);
             const rowElem = row.nativeElement;
             UIInteractions.simulateMouseEvent('mouseenter', rowElem, 0, 0);
             fixture.detectChanges();
@@ -202,13 +202,13 @@ describe('igxGridEditingActions #grid ', () => {
         });
 
         it('should auto-show row island actionStrip on mouse enter of child row.', () => {
-            const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
+            const row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
             row.toggle();
             fixture.detectChanges();
 
             const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[1];
 
-            const childRow = childGrid.getRowByIndex(0);
+            const childRow = childGrid.gridAPI.get_row_by_index(0);
             const rowElem = childRow.nativeElement;
             UIInteractions.simulateMouseEvent('mouseenter', rowElem, 0, 0);
             fixture.detectChanges();
@@ -220,12 +220,12 @@ describe('igxGridEditingActions #grid ', () => {
         });
 
         it('should auto-hide all actionStrip on mouse leave of root grid.', () => {
-            const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
-            row.toggle();
+            const row = hierarchicalGrid.getRowByIndex(0);
+            row.expanded = !row.expanded;
             fixture.detectChanges();
 
             const childGrid = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
-            const childRow = childGrid.getRowByIndex(0);
+            const childRow = childGrid.gridAPI.get_row_by_index(0);
 
             actionStripRoot.show(row);
             actionStripChild.show(childRow);

projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts

@@ -179,7 +179,13 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
      * @memberof IgxDragDirective
      */
     @Input('igxDrag')
-    public data: any;
+    public set data(value: any) {
+        this._data = value;
+    }
+
+    public get data(): any {
+        return this._data;
+    }
 
     /**
      * An @Input property that indicates when the drag should start.
@@ -571,6 +577,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
 
     protected _destroy = new Subject<boolean>();
     protected _removeOnDestroy = true;
+    protected _data: any;
 
     /**
      * An @Input property that specifies the offset of the dragged element relative to the mouse in pixels.