chore: fix ngFor migration for blocked and labeled (#8471)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Aug 12, 2024 · ff6e90c · ff6e90c
1 parent 93dd431
commit ff6e90c
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 9 deletions.
diff --git a/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-blocked.ts b/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-blocked.ts
@@ -42,13 +42,18 @@ export function migrateBlocked({
             Object.entries(sourceCodeLocation.attrs || {}).find(([name]) =>
                 name.includes('size'),
             ) || [];
+        const [, ngForAttrLocation] =
+            Object.entries(sourceCodeLocation.attrs || {}).find(([name]) =>
+                name.includes('*ngfor'),
+            ) || [];
         const sizeAttr = findAttr(attrs, 'size');
+        const ngForAttr = findAttr(attrs, '*ngFor');
 
         const newBlockAttr = `tuiBlock${sizeAttr ? `="${sizeAttr.value === 'xs' ? 's' : sizeAttr.value}"` : ''}`;
 
         recorder.insertRight(
             templateOffset + (sourceCodeLocation.startTag?.startOffset || 1) - 1,
-            `<label ${newBlockAttr}${hideIconAttrLocation ? ' appearance=""' : ''}>`,
+            `<label${ngForAttr ? ` *ngFor="${ngForAttr.value}"` : ''} ${newBlockAttr}${hideIconAttrLocation ? ' appearance=""' : ''}>`,
         );
 
         recorder.remove(
@@ -73,5 +78,12 @@ export function migrateBlocked({
                 sizeAttrLocation.endOffset - sizeAttrLocation.startOffset,
             );
         }
+
+        if (ngForAttrLocation) {
+            recorder.remove(
+                templateOffset + ngForAttrLocation.startOffset,
+                ngForAttrLocation.endOffset - ngForAttrLocation.startOffset,
+            );
+        }
     });
 }
diff --git a/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-labeled.ts b/projects/cdk/schematics/ng-update/v4/steps/templates/migrate-labeled.ts
@@ -3,6 +3,7 @@ import type {DevkitFileSystem} from 'ng-morph';
 
 import {addImportToClosestModule} from '../../../../utils/add-import-to-closest-module';
 import {findElementsByTagNames} from '../../../../utils/templates/elements';
+import {findAttr} from '../../../../utils/templates/inputs';
 import {
     getTemplateFromTemplateResource,
     getTemplateOffset,
@@ -43,11 +44,17 @@ export function migrateLabeled({
         'tui-radio-labeled',
     ]);
 
-    elements.forEach(({sourceCodeLocation, tagName}) => {
+    elements.forEach(({sourceCodeLocation, tagName, attrs}) => {
         if (!sourceCodeLocation) {
             return;
         }
 
+        const [, ngForAttrLocation] =
+            Object.entries(sourceCodeLocation.attrs || {}).find(([name]) =>
+                name.includes('*ngfor'),
+            ) || [];
+        const ngForAttr = findAttr(attrs, '*ngFor');
+
         addImportToClosestModule(
             resource.componentPath,
             tagName === 'tui-checkbox-labeled' ? 'TuiCheckbox' : 'TuiRadio',
@@ -56,7 +63,7 @@ export function migrateLabeled({
 
         recorder.insertRight(
             templateOffset + (sourceCodeLocation.startTag?.startOffset || 1) - 1,
-            '<label tuiLabel>',
+            `<label${ngForAttr ? ` *ngFor="${ngForAttr.value}"` : ''} tuiLabel>`,
         );
         recorder.remove(
             templateOffset + (sourceCodeLocation.endTag?.startOffset ?? 0),
@@ -66,5 +73,12 @@ export function migrateLabeled({
             templateOffset + (sourceCodeLocation.endTag?.startOffset || 1),
             '</label>',
         );
+
+        if (ngForAttrLocation) {
+            recorder.remove(
+                templateOffset + ngForAttrLocation.startOffset,
+                ngForAttrLocation.endOffset - ngForAttrLocation.startOffset,
+            );
+        }
     });
 }
diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-blocked.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-blocked.spec.ts
@@ -60,11 +60,12 @@ const TEMPLATE_BEFORE = `
 </form>
 
 <tui-checkbox-block
+  *ngFor="let block of blocks"
   size="m"
   [hideCheckbox]="true"
   [(ngModel)]="value"
 >
-  Label
+  {{ block.name }}
 </tui-checkbox-block>
 
 <tui-checkbox-block
@@ -108,13 +109,14 @@ const TEMPLATE_AFTER = `
     Pineapples
   </label>
 </form>
-<label tuiBlock="m" appearance="">
+<label *ngFor="let block of blocks" tuiBlock="m" appearance="">
 <input tuiCheckbox type="checkbox"
+  ${''}
   ${''}
   ${''}
   [(ngModel)]="value"
 >
-  Label
+  {{ block.name }}
 </label>
 <label tuiBlock="s" appearance="">
 <input tuiCheckbox type="checkbox"

diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-labeled.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-labeled.spec.ts
@@ -39,7 +39,7 @@ const TEMPLATE_BEFORE = `<tui-checkbox-labeled [(ngModel)]="value">
   Label
 </tui-checkbox-labeled>
 
-<tui-checkbox-labeled [(ngModel)]="value">Content</tui-checkbox-labeled>
+<tui-checkbox-labeled *ngFor="let group of groups" [(ngModel)]="value">{{ group.name }}</tui-checkbox-labeled>
 
 <tui-radio-labeled size="l" [formControl]="control" [item]="value" [identityMatcher]="matcher" [pseudoDisabled]="disabled">
   Label
@@ -49,8 +49,8 @@ const TEMPLATE_BEFORE = `<tui-checkbox-labeled [(ngModel)]="value">
 const TEMPLATE_AFTER = `<label tuiLabel><input tuiCheckbox type="checkbox" [(ngModel)]="value">
   Label
 </label>
-<label tuiLabel>
-<input tuiCheckbox type="checkbox" [(ngModel)]="value">Content</label>
+<label *ngFor="let group of groups" tuiLabel>
+<input tuiCheckbox type="checkbox"  [(ngModel)]="value">{{ group.name }}</label>
 <label tuiLabel>
 <input tuiRadio type="radio" size="m" [formControl]="control" [value]="value" [identityMatcher]="matcher" [tuiAppearanceState]="disabled ? 'disabled' : null">
   Label