chore(grid): migrate deprecated rowSelectable property to rowSelection

Author: dafo

projects/igniteui-angular/migrations/common/UpdateChanges.ts

@@ -19,6 +19,7 @@ export class UpdateChanges {
     protected themePropsChanges: ThemePropertyChanges;
     protected importsChanges: ImportsChanges;
     protected conditionFunctions: Map<string, Function> = new Map<string, Function>();
+    protected valueTransforms: Map<string, Function> = new Map<string, Function>();
 
     private _templateFiles: string[] = [];
     public get templateFiles(): string[] {
@@ -130,6 +131,10 @@ export class UpdateChanges {
         this.conditionFunctions.set(conditionName, callback);
     }
 
+    public addValueTransform(functionName: string, callback: (oldValue: string) => string) {
+        this.valueTransforms.set(functionName, callback);
+    }
+
     protected updateSelectors(entryPath: string) {
         let fileContent = this.host.read(entryPath).toString();
         let overwrite = false;
@@ -202,8 +207,8 @@ export class UpdateChanges {
                 continue;
             }
 
-            let base;
-            let replace;
+            let base: string;
+            let replace: string;
             let groups = 1;
             let searchPattern;
 
@@ -212,8 +217,8 @@ export class UpdateChanges {
                 replace = `(${change.replaceWith})=$1`;
             } else {
                 // Match both bound - [name] - and regular - name
-                base = String.raw`(\s\[?)${change.name}(\s*\]?=)(["'])`;
-                replace = String.raw`$1${change.replaceWith}$2$3`;
+                base = String.raw`(\s\[?)${change.name}(\s*\]?=)(["'])(.*?)\3`;
+                replace = String.raw`$1${change.replaceWith}$2$3$4$3`;
                 groups = 3;
             }
 
@@ -244,6 +249,14 @@ export class UpdateChanges {
                     fileContent = this.copyPropertyValueBetweenElementTags(fileContent, match, moveMatch);
                 }
 
+                if (change.valueTransform) {
+                    const oldValue = match.match(reg).groups[3];
+                    const transform = this.valueTransforms.get(change.valueTransform);
+                    const newValue = transform(oldValue);
+                    // Check why the regEx does not return the correct value
+                    replace = replace.replace('$4', newValue);
+                }
+
                 fileContent = fileContent.replace(
                     match,
                     match.replace(reg, replace)

projects/igniteui-angular/migrations/common/schema/binding.schema.json

@@ -23,11 +23,15 @@
                     "description": "Component that emits the output or accepts the input"
                 },
                 "remove": {
-                    "description": "Remove directive/component",
+                    "description": "Remove directive/component/property",
                     "type": "boolean"
                 },
                 "replaceWith": {
-                    "description": "Replace original selector with new one",
+                    "description": "Replace original selector/property with new one",
+                    "type": "string"
+                },
+                "valueTransform": {
+                    "description": "A function that transforms the value of an Input",
                     "type": "string"
                 }
             },

projects/igniteui-angular/migrations/common/schema/index.ts

@@ -31,6 +31,8 @@ export interface BindingChange extends ChangeAction {
     moveBetweenElementTags?: boolean;
     /** An array of function names that will be executed as conditions. */
     conditions?: string[];
+    /** A function that transforms the value of an Input */
+    valueTransform?: string;
 }
 
 export interface ClassChanges {

projects/igniteui-angular/migrations/update-9_1_0/changes/inputs.json

@@ -16,6 +16,15 @@
                 "selector": "igx-toast",
                 "type": "component"
            }
+        },
+        {
+            "name": "rowSelectable",
+            "replaceWith": "rowSelection",
+            "valueTransform": "rowSelectable_is_deprecated",
+            "owner": {
+                "selector": "igx-grid",
+                "type": "component"
+            }
         }
     ]
 }

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

@@ -55,4 +55,19 @@ describe('Update 9.1.0', () => {
 
         done();
     });
+
+    // Except for testing for true and false (' and ") check for binded scenarios like "'prop'"
+    fit('should update rowSelectable to rowSelection', done => {
+        appTree.create(
+            `/testSrc/appPrefix/component/input.component.html`,
+            `<igx-grid [rowSelectable]="true"></igx-grid>`
+        );
+
+        const tree = schematicRunner.runSchematic('migration-15', {}, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/input.component.html'))
+        .toEqual(`<igx-grid [rowSelection]="'multiple'"></igx-grid>`);
+
+        done();
+    });
 });

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

@@ -12,6 +12,17 @@ export default function(): Rule {
         context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
 
         const update = new UpdateChanges(__dirname, host, context);
+        update.addValueTransform('rowSelectable_is_deprecated', function(oldValue: string): string {
+
+            switch (oldValue) {
+                case 'true':
+                    return '\'multiple\'';
+                case 'false':
+                    return '\'none\'';
+                default:
+                    return `${oldValue} ? 'multiple' : 'none' `;
+            }
+        });
         update.applyChanges();
     };
 }