Toolbar refactor (#8158)

* feat(grid-toolbar): Toolbar refactor

Closes #8055

* feat(grid-toolbar): Hierarchical grid implementation

Closes #8055

* refactor(grid-toolbar): Correctly grid context
through templates in hierarchical grid

* fix(grid): Deselect columns for hiding

Change the interaction for column hiding UI.
Updated tests.

Closes #6858

* feat(grid): Emit when the grid is fully available in the DOM

Closes #7924

* refactor(toolbar): Hierachical grid tweaks.
Toolbar actions are rendered once the grid is 'fully' loaded in order to
prevent expression changed after checked errors caused by
updating the column collection.
More unit tests updates.

* chore(*): Dev demos updates

* refactor(toolbar): Toolbar unit tests

* refactor(tests): More unit tests

* refactor(toolbar): Tests, api docs and tweaks

* style(toolbar): provide styling for grid toolbar component

* refactor(*): Unit tests

* refactor(*): More unit tests

* chore(styling): run stylelint --fix

* refactor(toolbar): Even more unit tests

* style(toolbar): update elevations, border & title width

* update dropdowns border

* refactor(toolbar): remove unnecessary selectors

* refactor(toolbar): change elevation variable

* docs(toolbar): remove unnecessary requires from sass docs

* feat(grid-toolbar): Add basic migrations

* feat(toolbar): Clean up migrations
Migrate the toolbar based on the old input prop value

* fix(migrations): File changes ordering

* feat(toolbar): Template directive migration

* fix(toolbar): Focus action comp input on open
Remove filtering overlay keydown `catch'em all` handler.

* feat(toolbar): Hierarchical grid migrations

* fix(toolbar): Migration binding on empty directives

* feat(toolbar): Migrate template context bindings

* fix(toolbar): Backward compatible props

* chore(toolbar): Unit tests tweaks

* fix(toolbar): Toolbar width growing with pinned area

* fix(toolbar): Expression changed error

* fix(toolbar): Dropdown max height

* fix(toolbar): Skip excel export dropdown

* fix(toolbar): Choppy toggling of toolbar elements

* refactor(toolbar): Address review comments

Co-authored-by: Silvia Ivanova <[email protected]>
Co-authored-by: Zdravko Kolev <[email protected]>
Co-authored-by: Stamen Stoychev <[email protected]>

Author: 4 people

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

@@ -147,7 +147,7 @@ export class UpdateChanges {
     }
 
     /** Add condition function. */
-    public addCondition(conditionName: string, callback: (ownerMatch: string) => boolean) {
+    public addCondition(conditionName: string, callback: (ownerMatch: string, path: string) => boolean) {
         this.conditionFunctions.set(conditionName, callback);
     }
 
@@ -266,7 +266,7 @@ export class UpdateChanges {
 
             for (const match of matches) {
                 let replaceStatement = replace;
-                if (!this.areConditionsFulfiled(match, change.conditions)) {
+                if (!this.areConditionsFulfilled(match, change.conditions, entryPath)) {
                     continue;
                 }
 
@@ -403,12 +403,12 @@ export class UpdateChanges {
         }
     }
 
-    private areConditionsFulfiled(match: string, conditions: string[]): boolean {
+    private areConditionsFulfilled(match: string, conditions: string[], entryPath: string): boolean {
         if (conditions) {
             for (const condition of conditions) {
                 if (this.conditionFunctions && this.conditionFunctions.has(condition)) {
                     const callback = this.conditionFunctions.get(condition);
-                    if (callback && !callback(match)) {
+                    if (callback && !callback(match, entryPath)) {
                         return false;
                     }
                 }

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

@@ -3,6 +3,19 @@ import * as path from 'path';
 import { SchematicContext, Tree } from '@angular-devkit/schematics';
 import { WorkspaceSchema, WorkspaceProject, ProjectType } from '@schematics/angular/utility/workspace-models';
 import { execSync } from 'child_process';
+import {
+    Attribute,
+    Comment,
+    Element,
+    Expansion,
+    ExpansionCase,
+    getHtmlTagDefinition,
+    HtmlParser,
+    Node,
+    Text,
+    Visitor
+} from '@angular/compiler';
+import { replaceMatch } from './tsUtils';
 
 const configPaths = ['/.angular.json', '/angular.json'];
 
@@ -111,3 +124,150 @@ export function tryUninstallPackage(context: SchematicContext, packageManager: s
             .warn(`Could not uninstall ${pkg}, you may want to uninstall it manually.`, JSON.parse(e));
     }
 }
+
+interface TagOffset {
+    start: number;
+    end: number;
+}
+
+export interface SourceOffset {
+    startTag: TagOffset;
+    endTag: TagOffset;
+    file: {
+        content: string;
+        url: string;
+    };
+    node?: Element;
+}
+
+
+export class FileChange {
+
+    constructor(
+        public position = 0,
+        public text = '',
+        public replaceText = '',
+        public type: 'insert' | 'replace' = 'insert'
+        ) {}
+
+    apply(content: string) {
+        if (this.type === 'insert') {
+            return `${content.substring(0, this.position)}${this.text}${content.substring(this.position)}`;
+        }
+        return replaceMatch(content, this.replaceText, this.text, this.position);
+    }
+}
+
+/**
+ * Parses an Angular template file/content and returns an array of the root nodes of the file.
+ *
+ * @param host
+ * @param filePath
+ * @param encoding
+ */
+export function parseFile(host: Tree, filePath: string, encoding = 'utf8') {
+    return new HtmlParser().parse(host.read(filePath).toString(encoding), filePath).rootNodes;
+}
+
+export function findElementNodes(root: Node[], tag: string | string[]): Node[] {
+    const tags = new Set(Array.isArray(tag) ? tag : [tag]);
+    return flatten(Array.isArray(root) ? root : [root])
+        .filter((node: Element) => tags.has(node.name));
+}
+
+export function hasAttribute(root: Element, attribute: string | string[]) {
+    const attrs = Array.isArray(attribute) ? attribute : [attribute];
+    return !!root.attrs.find(a => attrs.includes(a.name));
+}
+
+export function getAttribute(root: Element, attribute: string | string[]) {
+    const attrs = Array.isArray(attribute) ? attribute : [attribute];
+    return root.attrs.filter(a => attrs.includes(a.name));
+}
+
+export function getSourceOffset(element: Element): SourceOffset {
+    const { startSourceSpan, endSourceSpan } = element;
+    return {
+        startTag: { start: startSourceSpan.start.offset, end: startSourceSpan.end.offset },
+        endTag: { start: endSourceSpan.start.offset, end: endSourceSpan.end.offset },
+        file: {
+            content: startSourceSpan.start.file.content,
+            url: startSourceSpan.start.file.url
+        },
+        node: element
+    };
+}
+
+
+function isElement(node: Node | Element): node is Element {
+    return (node as Element).children !== undefined;
+}
+
+/**
+ * Given an array of `Node` objects, flattens the ast tree to a single array.
+ * De facto only `Element` type objects have children.
+ *
+ * @param list
+ */
+export function flatten(list: Node[]) {
+    let node: Node;
+    let r: Node[] = [];
+
+    for (let i = 0; i < list.length; i++) {
+        node = list[i];
+        r.push(node);
+
+        if (isElement(node)) {
+            r = r.concat(flatten(node.children));
+        }
+    }
+    return r;
+}
+
+/**
+ * https://github.com/angular/angular/blob/master/packages/compiler/test/ml_parser/util/util.ts
+ *
+ * May be useful for validating the output of our own migrations,
+ */
+class SerializerVisitor implements Visitor {
+
+    visitElement(element: Element, context: any): any {
+        if (getHtmlTagDefinition(element.name).isVoid) {
+            return `<${element.name}${this._visitAll(element.attrs, ' ')}/>`;
+        }
+
+        return `<${element.name}${this._visitAll(element.attrs, ' ')}>${this._visitAll(element.children)}</${element.name}>`;
+    }
+
+    visitAttribute(attribute: Attribute, context: any): any {
+        return attribute.value === '' ? `${attribute.name}` : `${attribute.name}="${attribute.value}"`;
+    }
+
+    visitText(text: Text, context: any): any {
+        return text.value;
+    }
+
+    visitComment(comment: Comment, context: any): any {
+        return `<!--${comment.value}-->`;
+    }
+
+    visitExpansion(expansion: Expansion, context: any): any {
+        return `{${expansion.switchValue}, ${expansion.type},${this._visitAll(expansion.cases)}}`;
+    }
+
+    visitExpansionCase(expansionCase: ExpansionCase, context: any): any {
+        return ` ${expansionCase.value} {${this._visitAll(expansionCase.expression)}}`;
+    }
+
+    private _visitAll(nodes: Node[], join: string = ''): string {
+        if (nodes.length === 0) {
+            return '';
+        }
+        return join + nodes.map(a => a.visit(this, null)).join(join);
+    }
+}
+
+
+export function serializeNodes(nodes: Node[]): string[] {
+    return nodes.map(node => node.visit(new SerializerVisitor(), null));
+}

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

@@ -85,6 +85,11 @@
             "version": "10.2.0",
             "description": "Updates Ignite UI for Angular from v10.1.x to v10.2.0",
             "factory": "./update-10_2_0"
+        },
+        "migration-18": {
+            "version": "11.0.0",
+            "description": "Updates Ignite UI for Angular from v10.2.x to v11.0.0",
+            "factory": "./update-11_0_0"
         }
     }
 }

projects/igniteui-angular/migrations/update-11_0_0/changes/inputs.json

@@ -0,0 +1,37 @@
+{
+    "@scheme": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "showToolbar",
+            "remove": "true",
+            "owner": {
+                "selector": "igx-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "showToolbar",
+            "remove": "true",
+            "owner": {
+                "selector": "igx-tree-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "showToolbar",
+            "remove": "true",
+            "owner": {
+                "selector": "igx-hierarchical-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "showToolbar",
+            "remove": "true",
+            "owner": {
+                "selector": "igx-row-island",
+                "type": "component"
+            }
+        }
+    ]
+}