refactor: replace deprecated formly field configuration properties

* execute formly-migrate schematic for each project * replace deprecated leftover properties manually * adapt inline documentation and rename some variables * remove eslint deprecated rule exception for formly field properties BREAKING CHANGE: replace all deprecated formly field configuration properties
intershop · Mar 1, 2023 · fad6075 · fad6075
1 parent 932cafa
commit fad6075
Show file tree

Hide file tree

Showing 128 changed files with 337 additions and 341 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -182,14 +182,7 @@
         "dot-notation": "off", // disabled in favor of @typescript-eslint/dot-notation
         "eqeqeq": ["error", "always"],
         "etc/no-commented-out-code": "warn",
-        "etc/no-deprecated": [
-          "warn",
-          {
-            "ignored": {
-              "templateOptions|to|FormlyTemplateOptions|expressionProperties": "name" // deprecated formly methods are temporarily ignored
-            }
-          }
-        ],
+        "etc/no-deprecated": ["warn"],
         "id-blacklist": [
           "error",
           "any",

diff --git a/...c/app/components/cost-center-buyer-edit-dialog/cost-center-buyer-edit-dialog.component.ts b/...c/app/components/cost-center-buyer-edit-dialog/cost-center-buyer-edit-dialog.component.ts
@@ -49,7 +49,7 @@ export class CostCenterBuyerEditDialogComponent implements OnInit {
             key: 'buyerName',
             type: 'ish-plain-text-field',
             className: 'col-8',
-            templateOptions: {
+            props: {
               labelClass: 'col-4',
               fieldClass: 'col-8',
               label: 'account.costcenter.details.buyers.list.header.name',
@@ -59,7 +59,7 @@ export class CostCenterBuyerEditDialogComponent implements OnInit {
             key: 'budgetValue',
             type: 'ish-text-input-field',
             className: ' col-6 col-md-8',
-            templateOptions: {
+            props: {
               postWrappers: [{ wrapper: 'input-addon', index: -1 }],
               labelClass: 'col-md-4',
               fieldClass: 'col-md-8  pr-0',
@@ -81,7 +81,7 @@ export class CostCenterBuyerEditDialogComponent implements OnInit {
             key: 'budgetPeriod',
             type: 'ish-select-field',
             className: 'col-6 col-md-4',
-            templateOptions: {
+            props: {
               fieldClass: 'col-12 label-empty',
               options: FormsService.getCostCenterBudgetPeriodOptions(),
             },

diff --git a/...organization-management/src/app/components/cost-center-form/cost-center-form.component.ts b/...organization-management/src/app/components/cost-center-form/cost-center-form.component.ts
@@ -73,15 +73,15 @@ export class CostCenterFormComponent implements OnInit {
           {
             key: 'currency',
             type: 'ish-text-input-field',
-            templateOptions: {
+            props: {
               fieldClass: 'd-none',
               required: true,
             },
           },
           {
             key: 'costCenterId',
             type: 'ish-text-input-field',
-            templateOptions: {
+            props: {
               label: 'account.costcenter.id.label',
               required: true,
               hideRequiredMarker: true,
@@ -100,7 +100,7 @@ export class CostCenterFormComponent implements OnInit {
           {
             key: 'name',
             type: 'ish-text-input-field',
-            templateOptions: {
+            props: {
               label: 'account.costcenter.name.label',
               required: true,
               hideRequiredMarker: true,
@@ -118,7 +118,7 @@ export class CostCenterFormComponent implements OnInit {
                 className: 'col-6 col-md-8',
                 key: 'budgetValue',
                 type: 'ish-text-input-field',
-                templateOptions: {
+                props: {
                   postWrappers: [{ wrapper: 'input-addon', index: -1 }],
                   labelClass: 'col-md-6',
                   fieldClass: 'col-md-6 pr-0',
@@ -143,7 +143,7 @@ export class CostCenterFormComponent implements OnInit {
                 className: 'col-6 col-md-4',
                 type: 'ish-select-field',
                 key: 'budgetPeriod',
-                templateOptions: {
+                props: {
                   fieldClass: 'col-12 label-empty',
                   options: FormsService.getCostCenterBudgetPeriodOptions(),
                 },
@@ -153,7 +153,7 @@ export class CostCenterFormComponent implements OnInit {
           {
             key: 'costCenterManager',
             type: 'ish-select-field',
-            templateOptions: {
+            props: {
               label: 'account.costcenter.manager.label',
               required: true,
               hideRequiredMarker: true,
@@ -169,15 +169,15 @@ export class CostCenterFormComponent implements OnInit {
       },
       {
         type: 'ish-fieldset-field',
-        templateOptions: {
+        props: {
           // hide active flag for new cost centers
           fieldsetClass: !this.costCenter ? 'd-none' : undefined,
         },
         fieldGroup: [
           {
             key: 'active',
             type: 'ish-checkbox-field',
-            templateOptions: {
+            props: {
               label: 'account.costCenter.active.label',
             },
           },

diff --git a/...organization-management/src/app/components/user-budget-form/user-budget-form.component.ts b/...organization-management/src/app/components/user-budget-form/user-budget-form.component.ts
@@ -74,15 +74,15 @@ export class UserBudgetFormComponent implements OnInit, OnDestroy {
           {
             key: 'currency',
             type: 'ish-text-input-field',
-            templateOptions: {
+            props: {
               fieldClass: 'd-none',
               required: true,
             },
           },
           {
             key: 'orderSpentLimitValue',
             type: 'ish-text-input-field',
-            templateOptions: {
+            props: {
               postWrappers: [{ wrapper: 'input-addon', index: -1 }],
               label: 'account.user.new.order_spend_limit.label',
               placeholder: 'account.budget.unlimited',
@@ -106,7 +106,7 @@ export class UserBudgetFormComponent implements OnInit, OnDestroy {
                 className: 'col-8',
                 key: 'budgetValue',
                 type: 'ish-text-input-field',
-                templateOptions: {
+                props: {
                   postWrappers: [{ wrapper: 'input-addon', index: -1 }],
                   labelClass: 'col-md-6',
                   fieldClass: 'col-md-6 pr-0',
@@ -129,7 +129,7 @@ export class UserBudgetFormComponent implements OnInit, OnDestroy {
                 className: 'col-4',
                 type: 'ish-select-field',
                 key: 'budgetPeriod',
-                templateOptions: {
+                props: {
                   fieldClass: 'col-12 label-empty',
                   options: this.periods.map(period => ({
                     value: period,

diff --git a/...ganization-management/src/app/components/user-profile-form/user-profile-form.component.ts b/...ganization-management/src/app/components/user-profile-form/user-profile-form.component.ts
@@ -52,7 +52,7 @@ export class UserProfileFormComponent implements OnInit {
             ? {
                 key: 'email',
                 type: 'ish-email-field',
-                templateOptions: {
+                props: {
                   label: 'account.user.email.label',
                   required: true,
                 },
@@ -61,7 +61,7 @@ export class UserProfileFormComponent implements OnInit {
           {
             key: 'active',
             type: 'ish-checkbox-field',
-            templateOptions: {
+            props: {
               label: 'account.user.active.label',
             },
           },

diff --git a/...nization-management/src/app/pages/cost-center-buyers/cost-center-buyers-page.component.ts b/...nization-management/src/app/pages/cost-center-buyers/cost-center-buyers-page.component.ts
@@ -94,7 +94,7 @@ export class CostCenterBuyersPageComponent implements OnDestroy, OnInit {
       {
         key: 'addBuyers',
         type: 'repeatCostCenterBuyers',
-        templateOptions: {},
+        props: {},
         fieldArray: {
           fieldGroupClassName: 'row list-item-row',
           fieldGroup: [
@@ -103,23 +103,23 @@ export class CostCenterBuyersPageComponent implements OnDestroy, OnInit {
               key: 'selected',
               defaultValue: false,
               className: 'col-1 col-md-2 list-item pb-0',
-              templateOptions: {
+              props: {
                 fieldClass: 'offset-md-2 col-2 mt-1',
               },
             },
             {
               key: 'name',
               type: 'ish-html-text-field',
               className: 'col-11 col-sm-10 col-md-3 list-item pb-0',
-              templateOptions: {
+              props: {
                 inputClass: 'col-form-label pb-0',
               },
             },
             {
               key: 'budgetValue',
               type: 'ish-text-input-field',
               className: 'col-6 col-md-4 list-item',
-              templateOptions: {
+              props: {
                 fieldClass: 'col-12',
                 postWrappers: [{ wrapper: 'input-addon', index: -1 }],
                 addonLeft: {
@@ -139,7 +139,7 @@ export class CostCenterBuyersPageComponent implements OnDestroy, OnInit {
               key: 'budgetPeriod',
               type: 'ish-select-field',
               className: 'col-6 col-md-3 list-item',
-              templateOptions: {
+              props: {
                 fieldClass: 'col-12',
                 options: FormsService.getCostCenterBudgetPeriodOptions(),
               },

diff --git a/...pages/requisition-detail/requisition-reject-dialog/requisition-reject-dialog.component.ts b/...pages/requisition-detail/requisition-reject-dialog/requisition-reject-dialog.component.ts
@@ -54,7 +54,7 @@ export class RequisitionRejectDialogComponent implements OnInit {
       {
         key: 'comment',
         type: 'ish-textarea-field',
-        templateOptions: {
+        props: {
           label: 'approval.rejectform.add_a_comment.label',
           required: true,
           maxLength: 1000,

diff --git a/src/app/core/models/payment-method/payment-method.mapper.spec.ts b/src/app/core/models/payment-method/payment-method.mapper.spec.ts
@@ -129,13 +129,13 @@ describe('Payment Method Mapper', () => {
       expect(paymentMethod.parameters[0].type).toEqual('ish-text-input-field');
       expect(paymentMethod.parameters[0].key).toEqual('holder');
       expect(paymentMethod.parameters[0].hide).toBeFalse();
-      expect(paymentMethod.parameters[0].templateOptions.type).toEqual('text');
-      expect(paymentMethod.parameters[0].templateOptions.required).toBeTrue();
+      expect(paymentMethod.parameters[0].props.type).toEqual('text');
+      expect(paymentMethod.parameters[0].props.required).toBeTrue();
 
-      expect(paymentMethod.parameters[1].templateOptions.pattern).toBe(regexp);
-      expect(paymentMethod.parameters[1].templateOptions.minLength).toBe(15);
-      expect(paymentMethod.parameters[1].templateOptions.maxLength).toBe(34);
-      expect(paymentMethod.parameters[1].templateOptions.attributes).toBeObject();
+      expect(paymentMethod.parameters[1].props.pattern).toBe(regexp);
+      expect(paymentMethod.parameters[1].props.minLength).toBe(15);
+      expect(paymentMethod.parameters[1].props.maxLength).toBe(34);
+      expect(paymentMethod.parameters[1].props.attributes).toBeObject();
 
       expect(paymentMethod.parameters[3].hide).toBeTrue();
     });

diff --git a/src/app/core/models/payment-method/payment-method.mapper.ts b/src/app/core/models/payment-method/payment-method.mapper.ts
@@ -171,7 +171,7 @@ export class PaymentMethodMapper {
       const param: FormlyFieldConfig = {
         key: p.name,
         type: p.options ? 'ish-select-field' : 'ish-text-input-field',
-        templateOptions: {
+        props: {
           labelClass: 'col-md-4',
           fieldClass: 'col-sm-6',
           type: p.type === 'string' ? 'text' : (p.type as string).toLowerCase(),
@@ -192,20 +192,20 @@ export class PaymentMethodMapper {
 
       if (p.constraints) {
         if (p.constraints.required) {
-          param.templateOptions.required = true;
+          param.props.required = true;
           param.validation.messages = { ...param.validation.messages, required: p.constraints.required.message };
         }
         if (p.constraints.size) {
-          param.templateOptions.minLength = p.constraints.size.min;
-          param.templateOptions.maxLength = p.constraints.size.max;
+          param.props.minLength = p.constraints.size.min;
+          param.props.maxLength = p.constraints.size.max;
           param.validation.messages = {
             ...param.validation.messages,
             minLength: p.constraints.size.message,
             maxLength: p.constraints.size.message,
           };
         }
         if (p.constraints.pattern) {
-          param.templateOptions.pattern = p.constraints.pattern.regexp;
+          param.props.pattern = p.constraints.pattern.regexp;
           param.validation.messages = {
             ...param.validation.messages,
             pattern: p.constraints.pattern.message,

diff --git a/src/app/core/utils/dev/basket-mock-data.ts b/src/app/core/utils/dev/basket-mock-data.ts
@@ -95,7 +95,7 @@ export class BasketMockData {
         {
           key: 'IBAN',
           type: 'input',
-          templateOptions: {
+          props: {
             type: 'text',
             required: true,
           },

diff --git a/src/app/extensions/contact-us/pages/contact/contact-form/contact-form.component.ts b/src/app/extensions/contact-us/pages/contact/contact-form/contact-form.component.ts
@@ -46,7 +46,7 @@ export class ContactFormComponent implements OnInit {
       {
         key: 'name',
         type: 'ish-text-input-field',
-        templateOptions: {
+        props: {
           label: 'helpdesk.contactus.name.label',
           required: true,
         },
@@ -59,30 +59,30 @@ export class ContactFormComponent implements OnInit {
       {
         key: 'email',
         type: 'ish-email-field',
-        templateOptions: {
+        props: {
           label: 'helpdesk.contactus.email.label',
           required: true,
         },
       },
       {
         key: 'phone',
         type: 'ish-phone-field',
-        templateOptions: {
+        props: {
           label: 'helpdesk.contactus.phone.label',
           required: true,
         },
       },
       {
         key: 'order',
         type: 'ish-text-input-field',
-        templateOptions: {
+        props: {
           label: 'helpdesk.contactus.order.label',
         },
       },
       {
         key: 'subject',
         type: 'ish-select-field',
-        templateOptions: {
+        props: {
           label: 'helpdesk.contactus.subject.label',
           required: true,
           options: this.contactUsFacade.contactSubjects$().pipe(
@@ -101,7 +101,7 @@ export class ContactFormComponent implements OnInit {
       {
         key: 'comment',
         type: 'ish-textarea-field',
-        templateOptions: {
+        props: {
           label: 'helpdesk.contactus.comments.label',
           required: true,
           maxLength: 30000,
@@ -115,7 +115,7 @@ export class ContactFormComponent implements OnInit {
       },
       {
         type: 'ish-captcha-field',
-        templateOptions: {
+        props: {
           topic: 'contactUs',
         },
       },

diff --git a/...s/shared/order-template-preferences-dialog/order-template-preferences-dialog.component.ts b/...s/shared/order-template-preferences-dialog/order-template-preferences-dialog.component.ts
@@ -66,7 +66,7 @@ export class OrderTemplatePreferencesDialogComponent implements OnInit {
       {
         key: 'title',
         type: 'ish-text-input-field',
-        templateOptions: {
+        props: {
           required: true,
           label: 'account.order_template.form.name.label',
           hideRequiredMarker: true,