chore(simple-combo): Adding migrations for disableFiltering

Author: Ivan Kitanov

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

@@ -236,6 +236,11 @@
             "version": "20.0.2",
             "description": "Updates Ignite UI for Angular from v20.0.0 to v20.0.2",
             "factory": "./update-20_0_2"
+        },
+        "migration-48": {
+            "version": "20.0.5",
+            "description": "Updates Ignite UI for Angular from v20.0.2 to v20.0.5",
+            "factory": "./update-20_0_5"
         }
     }
 }

projects/igniteui-angular/migrations/update-20_0_5/changes/inputs.json

@@ -0,0 +1,13 @@
+{
+    "$schema": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "filteringOptions.filterable",
+            "replaceWith": "disableFiltering",
+            "owner": {
+                "selector": "igx-simple-combo",
+                "type": "component"
+            }
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-20_0_5/index.spec.ts

@@ -0,0 +1,53 @@
+import * as path from 'path';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { setupTestTree } from '../common/setup.spec';
+
+describe('Migration 20.0.5 - Replace filteringOptions.filterable', () => {
+    let appTree: UnitTestTree;
+    const runner = new SchematicTestRunner(
+        'ig-migrate',
+        path.join(__dirname, '../migration-collection.json')
+    );
+    const migrationName = 'migration-48';
+    const makeTemplate = (name: string) => `/testSrc/appPrefix/component/${name}.component.html`;
+
+    beforeEach(() => {
+        appTree = setupTestTree();
+    });
+
+    it('should replace simple inline filteringOptions', async () => {
+        const input = `<igx-simple-combo [filteringOptions]="{ filterable: true }"></igx-simple-combo>`;
+        appTree.create(makeTemplate('inline1'), input);
+
+        const tree = await runner.runSchematic(migrationName, {}, appTree);
+        const output = tree.readContent(makeTemplate('inline1'));
+
+        expect(output).toContain(`[disableFiltering]="false"`);
+        expect(output).not.toContain('filterable');
+    });
+
+    it('should handle mixed object literal correctly', async () => {
+        const input = `<igx-simple-combo [filteringOptions]="{ filterable: false, caseSensitive: true }"></igx-simple-combo>`;
+        appTree.create(makeTemplate('inline2'), input);
+
+        const tree = await runner.runSchematic(migrationName, {}, appTree);
+        const output = tree.readContent(makeTemplate('inline2'));
+
+        expect(output).toContain(`[disableFiltering]="true"`);
+        expect(output).toContain(`[filteringOptions]="{ caseSensitive: true }"`);
+    });
+
+    it('should warn on variable reference', async () => {
+        const input = `<igx-simple-combo [filteringOptions]="filterOpts"></igx-simple-combo>`;
+        const warnMsg = "Manual migration needed: please use 'disableFiltering' instead of filteringOptions.filterable." +
+            "If you were using filteringOptions please include them without 'filterable'";
+
+        appTree.create(makeTemplate('referenceInTsFile'), input);
+
+        const tree = await runner.runSchematic(migrationName, {}, appTree);
+        const output = tree.readContent(makeTemplate('referenceInTsFile'));
+
+        expect(output).not.toContain('[filteringOptions]');
+        expect(output).toContain(warnMsg);
+    });
+});

projects/igniteui-angular/migrations/update-20_0_5/index.ts

@@ -0,0 +1,102 @@
+import { Element } from '@angular/compiler';
+import type { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+import {
+    FileChange,
+    findElementNodes,
+    getSourceOffset,
+    parseFile
+} from '../common/util';
+import { nativeImport } from 'igniteui-angular/migrations/common/import-helper.js';
+
+const version = '20.0.5';
+
+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 changes = new Map<string, FileChange[]>();
+    const parser = new HtmlParser();
+
+    const warnMsg = "Manual migration needed: please use 'disableFiltering' instead of filteringOptions.filterable." +
+     "If you were using filteringOptions please include them without 'filterable'";
+
+    const applyChanges = () => {
+        for (const [path, fileChanges] of changes.entries()) {
+            let content = host.read(path).toString();
+            fileChanges.sort((a, b) => b.position - a.position).forEach(c => {
+                content = c.apply(content);
+            });
+            host.overwrite(path, content);
+        }
+    };
+
+    const addChange = (path: string, change: FileChange) => {
+        if (!changes.has(path)) {
+            changes.set(path, []);
+        }
+        changes.get(path).push(change);
+    };
+
+    const COMBO_TAG = 'igx-simple-combo';
+
+    for (const path of update.templateFiles) {
+        const nodes = findElementNodes(parseFile(parser, host, path), COMBO_TAG);
+
+        for (const node of nodes) {
+            if (!(node instanceof Element)) continue;
+
+            const attr = node.attrs.find(a => a.name === '[filteringOptions]');
+            if (!attr) continue;
+
+            const attrVal = attr.value.trim();
+            const offset = getSourceOffset(node);
+            const file = offset.file;
+
+            let replacementText = '';
+
+            if (attrVal.startsWith('{')) {
+                // inline object literal
+                const parsed = eval('(' + attrVal + ')');
+                const filterable = parsed.filterable;
+
+                if (typeof filterable === 'boolean') {
+                    replacementText += `[disableFiltering]="${!filterable}"`;
+                }
+
+                const remaining = { ...parsed };
+                delete remaining.filterable;
+                const remainingProps = Object.entries(remaining)
+                    .map(([k, v]) => `${k}: ${JSON.stringify(v)}`)
+                    .join(', ');
+
+                if (remainingProps.length > 0) {
+                    replacementText += ` [filteringOptions]="{ ${remainingProps} }"`;
+                }
+
+                // Replace whole [filteringOptions] attribute
+                const match = node.sourceSpan.toString().match(/\[filteringOptions\]="([^"]+)"/);
+                if (match) {
+                    const attrText = match[0];
+                    const attrPos = file.content.indexOf(attrText, offset.startTag.start);
+                    addChange(file.url, new FileChange(attrPos, replacementText, attrText, 'replace'));
+                }
+            } else {
+                // log for manual TS edit
+                const attrText = `[filteringOptions]="${attrVal}"`;
+                const attrPos = file.content.indexOf(attrText, offset.startTag.start);
+
+                addChange(file.url, new FileChange(attrPos, '', attrText, 'replace'));
+                addChange(file.url, new FileChange(offset.startTag.end, warnMsg));
+            }
+        }
+    }
+
+    applyChanges();
+
+    update.applyChanges();
+};