refactor(grid): add migrations, upd readme and deprecation warn

Author: teodosiah

projects/igniteui-angular/migrations/migration-collection.json

@@ -110,6 +110,11 @@
             "version": "13.0.0-alpha",
             "description": "Updates Ignite UI for Angular from v12.2.x to v13.0.0",
             "factory": "./update-13_0_0"
+        },
+        "migration-23": {
+            "version": "13.1.0",
+            "description": "Updates Ignite UI for Angular from v13.0.x to v13.1.0",
+            "factory": "./update-13_1_0"
         }
     }
 }

projects/igniteui-angular/migrations/update-13_1_0/index.spec.ts

@@ -0,0 +1,34 @@
+import * as path from 'path';
+
+import { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+const version = '13.1.0';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    const configJson = {
+        defaultProject: 'testProj',
+        projects: {
+            testProj: {
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+    };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    const migrationName = 'migration-23';
+    const lineBreaksAndSpaceRegex = /\s/g;
+
+   
+});

projects/igniteui-angular/migrations/update-13_1_0/index.ts

@@ -0,0 +1,72 @@
+import { Element } from '@angular/compiler';
+import {
+  Rule,
+  SchematicContext,
+  Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+import { nativeImport } from '../common/import-helper.js';
+import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile } from '../common/util';
+
+const version = '13.1.0';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+  context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+  const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
+
+  const update = new UpdateChanges(__dirname, host, context);
+  const GRID_TAGS = ['igx-grid', 'igx-tree-grid', 'igx-hierarchical-grid', 'igx-row-island'];
+  const prop = ['[movable]'];
+  const changes = new Map<string, FileChange[]>();
+
+  const gridsToMigrate = new Set<any>();
+
+  const applyChanges = () => {
+    for (const [path, change] of changes.entries()) {
+      let buffer = host.read(path).toString();
+
+      change.sort((c, c1) => c.position - c1.position)
+        .reverse()
+        .forEach(c => buffer = c.apply(buffer));
+
+      host.overwrite(path, buffer);
+    }
+  };
+
+  const addChange = (path: string, change: FileChange) => {
+    if (changes.has(path)) {
+      changes.get(path).push(change);
+    } else {
+      changes.set(path, [change]);
+    }
+  };
+
+  // migrate movable on column-level to moving on grid-level for grid, tree grid, hierarchical grid and row island
+  for (const path of update.templateFiles) {
+    const grids = findElementNodes(parseFile(new HtmlParser(), host, path), GRID_TAGS);
+    grids.forEach(grid => {
+      const grid_elem = grid as Element;
+      const columns = grid_elem.children.filter(column => (column as Element).name === 'igx-column' && hasAttribute(column as Element, prop));
+      columns.map(node => getSourceOffset(node as Element))
+        .forEach(offset => {
+          const { startTag, file, node } = offset;
+          const { name, value } = getAttribute(node, prop)[0];
+          if (value === 'true') {
+            gridsToMigrate.add(grid_elem);
+          }
+          const repTxt = file.content.substring(startTag.start, startTag.end);
+          const property = `${name}="${value}"`;
+          const removePropTxt = repTxt.replace(property, '');
+          addChange(file.url, new FileChange(startTag.start, removePropTxt, repTxt, 'replace'));
+        });
+    });
+
+    Array.from(gridsToMigrate).map(node => getSourceOffset(node as Element)).forEach(offset => {
+      const { startTag, file } = offset;
+      addChange(file.url, new FileChange(startTag.end - 1, ' [moving]="true"'));
+    });
+  }
+
+  applyChanges();
+  changes.clear();
+};

projects/igniteui-angular/src/lib/grids/README.md

@@ -167,6 +167,7 @@ Below is the list of all inputs that the developers may set to configure the gri
 |`resourceStrings`| IGridResourceStrings | Resource strings of the grid. |
 |`autoGenerate`|boolean|Autogenerate grid's columns, default value is _false_|
 |`batchEditing`|boolean|Toggles batch editing in the grid, default is _false_|
+|`moving`|boolean|Enables the columns moving feature. Defaults to _false_|
 |`paging`|boolean|Enables the paging feature. Defaults to _false_.|
 |`page`| number | The current page index.|
 |`perPage`|number|Visible items per page, default is 15|
@@ -333,7 +334,6 @@ Inputs available on the **IgxGridColumnComponent** to define columns:
 |`hasSummary`| boolean  |Sets whether or not the specific column has summaries enabled.|
 |`summaries`| IgxSummaryOperand |Set custom summary for the specific column|
 |`hidden`|boolean|Visibility of the column|
-|`movable`|boolean|Set column to be movable|
 |`resizable`|boolean|Set column to be resizable|
 |`selectable`|boolean|Set column to be selectable|
 |`selected`|boolean|Set column to be selected|

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -425,8 +425,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      * Sets/gets whether the column is movable.
      * Default value is `false`.
      *
-     * @deprecated
-     * Use `IgxGridComponent.moving` instead.
+     * @deprecated in version 13.1.0. Use `IgxGridComponent.moving` instead.
      *
      * ```typescript
      * let isMovable = this.column.movable;

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -142,6 +142,7 @@ export interface ColumnType {
     resizable: boolean;
     searchable: boolean;
     columnGroup: boolean;
+    /** @deprecated in version 13.1.0. Use `IgxGridComponent.moving` instead.*/
     movable: boolean;
     groupable: boolean;
     sortable: boolean;