refactor(toolbar): deprecate grid property, add migrations

damyanpetev · damyanpetev · commit bc9809004ba0 · 2024-02-15T16:36:25.000+02:00
diff --git a/projects/igniteui-angular/migrations/update-17_1_0/changes/inputs.json b/projects/igniteui-angular/migrations/update-17_1_0/changes/inputs.json
@@ -0,0 +1,13 @@
+{
+    "$schema": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "grid",
+            "remove": true,
+            "owner": {
+                "selector": "igx-grid-toolbar",
+                "type": "component"
+            }
+        }
+    ]
+}
diff --git a/projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts b/projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts
@@ -113,4 +113,44 @@ describe(`Update to ${version}`, () => {
         `
         );
     });
+
+    it('should remove toolbar grid property', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <igx-hierarchical-grid #grid1>
+            <igx-grid-toolbar>
+                <app-grid-search-box [grid]="grid1"></app-grid-search-box>
+            </igx-grid-toolbar>
+            <igx-row-island>
+                <igx-grid-toolbar [grid]="childGrid" *igxGridToolbar="let childGrid">
+                    <igx-grid-toolbar-title>Child toolbar {{ gridRef.parentIsland.level }}</igx-grid-toolbar-title>
+                    <igx-grid-toolbar-actions>
+                        <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
+                    </igx-grid-toolbar-actions>
+                </igx-grid-toolbar>
+            </igx-row-island>
+        </igx-hierarchical-grid>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <igx-hierarchical-grid #grid1>
+            <igx-grid-toolbar>
+                <app-grid-search-box [grid]="grid1"></app-grid-search-box>
+            </igx-grid-toolbar>
+            <igx-row-island>
+                <igx-grid-toolbar *igxGridToolbar="let childGrid">
+                    <igx-grid-toolbar-title>Child toolbar {{ gridRef.parentIsland.level }}</igx-grid-toolbar-title>
+                    <igx-grid-toolbar-actions>
+                        <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
+                    </igx-grid-toolbar-actions>
+                </igx-grid-toolbar>
+            </igx-row-island>
+        </igx-hierarchical-grid>
+        `
+        );
+    });
 });
diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts
@@ -47,6 +47,9 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements OnDes
     public showProgress = false;
 
     /**
+     * @deprecated since version 17.1.0
+     * No longer required to be set for the Hierarchical Grid child grid template
+     *
      * Gets/sets the grid component for the toolbar component.
      *
      * @remarks
diff --git a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts
@@ -30,7 +30,7 @@ import { IgxPaginatorDirective } from '../paginator/paginator-interfaces';
         </igx-column-group>
         <igx-paginator *ngIf="paging"></igx-paginator>
         <igx-row-island [key]="'childData'" #rowIsland [allowFiltering]="true" [rowEditable]="true" [primaryKey]="'ID'">
-            <igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid"></igx-grid-toolbar>
+            <igx-grid-toolbar *igxGridToolbar></igx-grid-toolbar>
             <igx-column field="ID" [groupable]="true" [hasSummary]='true'>
                 <ng-template igxHeader let-columnRef="column">
                     <div>
@@ -104,7 +104,7 @@ export class IgxHierarchicalGridTestBaseComponent {
         </igx-column-group>
         <igx-paginator *ngIf="paging"></igx-paginator>
         <igx-row-island [key]="'childData'" #rowIsland [allowFiltering]="true" [rowEditable]="true" [primaryKey]="'ID'">
-            <igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid"></igx-grid-toolbar>
+            <igx-grid-toolbar *igxGridToolbar></igx-grid-toolbar>
             <igx-column field="ID" [groupable]="true" [hasSummary]='true'>
                 <ng-template igxHeader let-columnRef="column">
                     <div>
@@ -355,7 +355,7 @@ export class IgxHierarchicalGridCustomSelectorsComponent implements OnInit {
             <button type="button" igxButton="contained">Parent Button</button>
         </igx-grid-toolbar>
         <igx-row-island [key]="'childData1'" #rowIsland1 [primaryKey]="'ID'" [autoGenerate]="true">
-            <igx-grid-toolbar *igxGridToolbar="let grid" [grid]="grid">
+            <igx-grid-toolbar *igxGridToolbar>
                 <button type="button" igxButton="contained">Child 1 Button</button>
             </igx-grid-toolbar>
         </igx-row-island>
diff --git a/src/app/hierarchical-grid-remote/hierarchical-grid-remote.sample.html b/src/app/hierarchical-grid-remote/hierarchical-grid-remote.sample.html
@@ -14,7 +14,7 @@
     <igx-column field="Country"></igx-column>
     <igx-column field="Phone"></igx-column>
     <igx-row-island #rowIsland1 [key]="'Orders'" [primaryKey]="'OrderID'" [autoGenerate]="false" [rowSelection]='selectionMode' (gridCreated)="gridCreated($event, rowIsland1)" [emptyGridMessage]="''">
-        <igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid">
+        <igx-grid-toolbar *igxGridToolbar>
             <igx-grid-toolbar-title>Child Toolbar - Level 2</igx-grid-toolbar-title>
             <igx-grid-toolbar-actions>
                 <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
@@ -26,7 +26,7 @@
         <igx-column field="ShipCity"></igx-column>
         <igx-column field="ShipAddress"></igx-column>
         <igx-row-island #rowIsland2 [key]="'Order_Details'" [primaryKey]="'ProductID'" [autoGenerate]="false" [rowSelection]='selectionMode' (gridCreated)="gridCreated($event, rowIsland2)" [emptyGridMessage]="''">
-            <igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid">
+            <igx-grid-toolbar *igxGridToolbar>
                 <igx-grid-toolbar-title>Child Toolbar - Level 3</igx-grid-toolbar-title>
                 <igx-grid-toolbar-actions>
                     <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/src/app/hierarchical-grid/hierarchical-grid.sample.html
@@ -90,7 +90,7 @@ <h4 class="sample-title">Sample One</h4>
             </ng-template>
             <igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelection]='selectionMode' [batchEditing]="true" [rowEditable]="true"
                 [allowFiltering]="true">
-                <igx-grid-toolbar [grid]="childGrid" *igxGridToolbar="let childGrid">
+                <igx-grid-toolbar *igxGridToolbar>
                     <igx-grid-toolbar-title>Child of the Child</igx-grid-toolbar-title>
                 </igx-grid-toolbar>
                 <igx-column field="ID" [hasSummary]='true'></igx-column>

Original file line number	Diff line number	Diff line change
`@@ -47,6 +47,9 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements OnDes`
`47`	`47`	`public showProgress = false;`
`48`	`48`
`49`	`49`	`/**`
	`50`	`+ * @deprecated since version 17.1.0`
	`51`	`+ * No longer required to be set for the Hierarchical Grid child grid template`
	`52`	`+ *`
`50`	`53`	`* Gets/sets the grid component for the toolbar component.`
`51`	`54`	`*`
`52`	`55`	`* @remarks`