fix(tabs): Fix header migrations #9402 (#9411)

Author: astaev

projects/igniteui-angular/migrations/update-12_0_0/index.spec.ts

@@ -166,7 +166,13 @@ ${noteText}
         appTree.create(
             '/testSrc/appPrefix/component/custom.component.html', `
 <igx-tabs type="fixed">
-<igx-tab-item label="Tab1" icon="folder" routerLink="view1" [isSelected]="true" class="tabitem">
+<igx-tab-item routerLink="view1" [isSelected]="true" label="Tab1" icon="home" class="tabitem">
+<ng-template igxTab>
+<div class="horizontal-center">
+<igx-icon>playlist_add_check</igx-icon>
+<div class="igx-tabs__item-label" i18n>Strategies</div>
+</div>
+</ng-template>
 </igx-tab-item>
 </igx-tabs>`);
         const tree = await schematicRunner.runSchematicAsync('migration-20', {}, appTree)
@@ -178,8 +184,10 @@ ${noteText}
 <igx-tabs tabAlignment="justify">
 <igx-tab-item [selected]="true">
 <igx-tab-header routerLink="view1" class="tabitem">
-<igx-icon igxTabHeaderIcon>folder</igx-icon>
-<span igxTabHeaderLabel>Tab1</span>
+<div class="horizontal-center">
+<igx-icon>playlist_add_check</igx-icon>
+<div class="igx-tabs__item-label" i18n>Strategies</div>
+</div>
 </igx-tab-header>
 </igx-tab-item>
 </igx-tabs>`);
@@ -302,7 +310,10 @@ Some Content
         appTree.create(
             '/testSrc/appPrefix/component/custom.component.html', `
 <igx-bottom-nav>
-<igx-tab label="Tab1" icon="folder" routerLink="view1" class="igxtab">
+<igx-tab label="Tab1" icon="folder" routerLink="view1" class="igxtab" label="Tab1" icon="home">
+<ng-template igxTab>
+<div>Tab1</div>
+</ng-template>
 </igx-tab>
 </igx-bottom-nav>`);
         const tree = await schematicRunner.runSchematicAsync('migration-20', {}, appTree)
@@ -314,8 +325,7 @@ ${noteText}
 <igx-bottom-nav>
 <igx-bottom-nav-item>
 <igx-bottom-nav-header routerLink="view1" class="igxtab">
-<igx-icon igxBottomNavHeaderIcon>folder</igx-icon>
-<span igxBottomNavHeaderLabel>Tab1</span>
+<div>Tab1</div>
 </igx-bottom-nav-header>
 </igx-bottom-nav-item>
 </igx-bottom-nav>`);

projects/igniteui-angular/migrations/update-12_0_0/index.ts

@@ -10,6 +10,9 @@ export default (): Rule => (host: Tree, context: SchematicContext) => {
         `Applying migration for Ignite UI for Angular to version ${version}`
     );
 
+    // eslint-disable-next-line max-len
+    const UPDATE_NOTE = `<!--NOTE: This component has been updated by Infragistics migration: v${version}\nPlease check your template whether all bindings/event handlers are correct.-->\n`;
+
     const COMPONENTS = [
         {
             component: 'igx-bottom-nav',
@@ -129,7 +132,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t
                     let labelText = '';
                     if (hasAttribute(node, 'label')) {
                         const labelAttr = getAttribute(node, 'label')[0];
-                        labelText = `\n<span ${comp.labelDirective}>${labelAttr.value}</span>\n`;
+                        labelText = `\n<span ${comp.labelDirective}>${labelAttr.value}</span>`;
                     }
                     // Icon content
                     let iconText = '';
@@ -151,9 +154,17 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t
                     }
 
                     if (iconText || labelText || routerLinkText) {
-                        // eslint-disable-next-line max-len
-                        const tabHeader = `\n<${comp.headerItem}${routerLinkText}${classText}>${iconText}${labelText}</${comp.headerItem}>`;
-                        addChange(file.url, new FileChange(startTag.end, tabHeader));
+                        // Get igx-tab-header if it's present
+                        const headerNode = findElementNodes([offset.node], comp.headerItem)
+                            .map(hNode => getSourceOffset(hNode as Element));
+
+                        if (headerNode && headerNode.length > 0) {
+                            addChange(file.url, new FileChange(headerNode[0].startTag.end - 1, `${routerLinkText}${classText}`));
+                        } else {
+                            // eslint-disable-next-line max-len
+                            const tabHeader = `\n<${comp.headerItem}${routerLinkText}${classText}>${iconText}${labelText}\n</${comp.headerItem}>`;
+                            addChange(file.url, new FileChange(startTag.end, tabHeader));
+                        }
                     }
                 });
 
@@ -179,7 +190,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t
                         const tabContentTag = new RegExp(String.raw`${comp.panelItem}`);
                         const hasTabContent = content.match(tabContentTag);
 
-                        if ((!hasTabContent || hasTabContent.length === 0) && !isEmptyOrSpaces(content)) {
+                        if (!hasTabContent && !isEmptyOrSpaces(content)) {
                             const tabPanel = `\n<${comp.panelItem}${classAttrText}>${content}</${comp.panelItem}>\n`;
                             addChange(offset.file.url, new FileChange(tabHeader.sourceSpan.end.offset, tabPanel, content, 'replace'));
                         }
@@ -195,8 +206,7 @@ See https://www.infragistics.com/products/ignite-ui-angular/angular/components/t
                     map(node => getSourceOffset(node as Element)).
                     forEach(offset => {
                         const { startTag, file } = offset;
-                        // eslint-disable-next-line max-len
-                        const commentText = `<!--NOTE: This component has been updated by Infragistics migration: v${version}\nPlease check your template whether all bindings/event handlers are correct.-->\n`;
+                        const commentText = UPDATE_NOTE;
                         addChange(file.url, new FileChange(startTag.start, commentText));
                     });