refactor: add 'required' for mandatory component input parameters (#1498

)


---------

Co-authored-by: Lucas Hengelhaupt <[email protected]>
Co-authored-by: LucasHengelhaupt <[email protected]>
Co-authored-by: Silke <[email protected]>

docs/guides/migrations.md

@@ -29,6 +29,9 @@ We added the eslint rule `@angular-eslint/template/prefer-self-closing-tags` to
 
 The `ngcc` command has been removed from the `package.json` because it is no longer supported and necessary in Angular 16.
 
+Mandatory component input parameters are declared as [required](https://angular.io/guide/update-to-version-16#required-inputs) to ensure that all necessary data is provided.
+This way data dependencies are enforced and potential errors are caught during compilation.
+
 For the optional usage of a shared Redis cache we switched from the plain standard NGINX Docker image to an [OpenResty](https://openresty.org/en/) Docker image that provides more flexibility to configure the underlying NGINX.
 If the NGINX container was customized in the project it has to be checked if those customizations work in the same way with the OpenResty image.
 Without any customizations the switch should not be noticeable and does not require any adaptions.

projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.ts

@@ -8,7 +8,7 @@ import { CostCenter } from 'ish-core/models/cost-center/cost-center.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CostCenterBudgetComponent implements OnChanges {
-  @Input() costCenter: CostCenter;
+  @Input({ required: true }) costCenter: CostCenter;
   @Input() progressBarClass: string;
 
   spentBudgetPercentage: number;

projects/organization-management/src/app/components/cost-center-form/cost-center-form.component.ts

@@ -19,7 +19,7 @@ import { OrganizationManagementFacade } from '../../facades/organization-managem
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CostCenterFormComponent implements OnInit {
-  @Input() form: FormGroup;
+  @Input({ required: true }) form: FormGroup;
   @Input() costCenter: CostCenter;
 
   fields$: Observable<FormlyFieldConfig[]>;

projects/organization-management/src/app/components/cost-center-users-list/cost-center-users-list.component.ts

@@ -20,7 +20,7 @@ type CostCenterBuyersListColumnsType = 'buyerName' | 'orders' | 'pendingOrders'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CostCenterUsersListComponent implements OnInit {
-  @Input() costCenter: CostCenter;
+  @Input({ required: true }) costCenter: CostCenter;
   @Input() isEditable = false;
 
   columnsToDisplay: CostCenterBuyersListColumnsType[] = ['buyerName', 'pendingOrders', 'orders', 'budget', 'actions'];

projects/organization-management/src/app/components/user-budget-form/user-budget-form.component.ts

@@ -22,7 +22,7 @@ interface UserBudgetModel {
   changeDetection: ChangeDetectionStrategy.Default,
 })
 export class UserBudgetFormComponent implements OnInit {
-  @Input() form: FormGroup;
+  @Input({ required: true }) form: FormGroup;
   @Input() budget: UserBudget;
 
   fields: FormlyFieldConfig[];

projects/organization-management/src/app/components/user-profile-form/user-profile-form.component.ts

@@ -13,7 +13,7 @@ import { B2bUser } from '../../models/b2b-user/b2b-user.model';
   changeDetection: ChangeDetectionStrategy.Default,
 })
 export class UserProfileFormComponent implements OnInit {
-  @Input() form: FormGroup;
+  @Input({ required: true }) form: FormGroup;
   @Input() error: HttpError;
   @Input() user: B2bUser;
 

projects/organization-management/src/app/pages/user-detail/user-detail-budget/user-detail-budget.component.ts

@@ -11,5 +11,5 @@ import { UserBudget } from '../../../models/user-budget/user-budget.model';
   changeDetection: ChangeDetectionStrategy.Default,
 })
 export class UserDetailBudgetComponent {
-  @Input() budget: UserBudget;
+  @Input({ required: true }) budget: UserBudget;
 }

projects/organization-management/src/app/pages/users/user-roles-badges/user-roles-badges.component.ts

@@ -10,7 +10,7 @@ import { B2bRole } from '../../../models/b2b-role/b2b-role.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class UserRolesBadgesComponent implements OnChanges {
-  @Input() roleIDs: string[];
+  @Input({ required: true }) roleIDs: string[];
 
   roles$: Observable<B2bRole[]>;
 

projects/requisition-management/src/app/components/checkout-receipt-requisition/checkout-receipt-requisition.component.ts

@@ -14,7 +14,7 @@ import { Requisition } from '../../models/requisition/requisition.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CheckoutReceiptRequisitionComponent implements OnInit {
-  @Input() basket: Basket;
+  @Input({ required: true }) basket: Basket;
 
   requisition$: Observable<Requisition>;
 

projects/requisition-management/src/app/pages/requisition-detail/budget-bar/budget-bar.component.ts

@@ -20,7 +20,7 @@ import { Price } from 'ish-core/models/price/price.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BudgetBarComponent implements OnChanges {
-  @Input() budget: Price;
+  @Input({ required: true }) budget: Price;
   @Input() spentBudget: Price;
   @Input() additionalAmount: Price;
 

projects/requisition-management/src/app/pages/requisition-detail/requisition-buyer-approval/requisition-buyer-approval.component.ts

@@ -14,7 +14,7 @@ import { Requisition } from '../../../models/requisition/requisition.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RequisitionBuyerApprovalComponent implements OnChanges {
-  @Input() requisition: Requisition;
+  @Input({ required: true }) requisition: Requisition;
 
   orderTotal: Price;
   spentPercentage: number;

projects/requisition-management/src/app/pages/requisition-detail/requisition-cost-center-approval/requisition-cost-center-approval.component.ts

@@ -19,7 +19,7 @@ interface BudgetValues {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RequisitionCostCenterApprovalComponent implements OnInit, OnChanges {
-  @Input() requisition: Requisition;
+  @Input({ required: true }) requisition: Requisition;
 
   costCenter: CostCenter;
   orderTotal: Price;

projects/requisition-management/src/app/pages/requisition-detail/requisition-summary/requisition-summary.component.ts

@@ -10,7 +10,7 @@ import { Requisition, RequisitionViewer } from '../../../models/requisition/requ
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RequisitionSummaryComponent implements OnInit {
-  @Input() requisition: Requisition;
+  @Input({ required: true }) requisition: Requisition;
   @Input() view: RequisitionViewer = 'buyer';
 
   costCenterName: string;

src/app/extensions/captcha/exports/lazy-captcha/lazy-captcha.component.ts

@@ -42,15 +42,15 @@ export class LazyCaptchaComponent implements OnInit, AfterViewInit {
   /**
     form containing the captcha form controls
    */
-  @Input() form: FormGroup | FormArray;
+  @Input({ required: true }) form: FormGroup | FormArray;
+
+  @Input({ required: true }) topic: CaptchaTopic;
 
   /**
     css Class for rendering the captcha V2 control, default='offset-md-4 col-md-8'
    */
   @Input() cssClass = 'offset-md-4 col-md-8';
 
-  @Input() topic: CaptchaTopic;
-
   private destroyRef = inject(DestroyRef);
 
   constructor(private captchaFacade: CaptchaFacade, private injector: Injector) {}

src/app/extensions/captcha/shared/captcha-v2/captcha-v2.component.ts

@@ -18,7 +18,7 @@ import { CaptchaFacade } from '../../facades/captcha.facade';
   changeDetection: ChangeDetectionStrategy.Default,
 })
 export class CaptchaV2Component implements OnInit {
-  @Input() parentForm: FormGroup;
+  @Input({ required: true }) parentForm: FormGroup;
   @Input() cssClass: string;
 
   captchaSiteKey$: Observable<string>;

src/app/extensions/captcha/shared/captcha-v3/captcha-v3.component.ts

@@ -25,7 +25,7 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CaptchaV3Component implements OnInit {
-  @Input() parentForm: FormGroup;
+  @Input({ required: true }) parentForm: FormGroup;
 
   private destroyRef = inject(DestroyRef);
 

src/app/extensions/compare/pages/compare/product-compare-paging/product-compare-paging.component.ts

@@ -22,17 +22,17 @@ export class ProductComparePagingComponent implements OnChanges {
   /**
    * The total items number to be considered for paging
    */
-  @Input() totalItems: number;
+  @Input({ required: true }) totalItems: number;
 
   /**
    * The maximum number of items that should be displayed on one page
    */
-  @Input() itemsPerPage: number;
+  @Input({ required: true }) itemsPerPage: number;
 
   /**
    * The current page number
    */
-  @Input() currentPage: number;
+  @Input({ required: true }) currentPage: number;
 
   /**
    * Trigger an event to change the page to the given page number

src/app/extensions/product-notifications/shared/product-notification-delete/product-notification-delete.component.ts

@@ -23,7 +23,7 @@ import { ProductNotification } from '../../models/product-notification/product-n
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductNotificationDeleteComponent implements OnInit {
-  @Input() productNotification: ProductNotification;
+  @Input({ required: true }) productNotification: ProductNotification;
   @Input() cssClass: string;
 
   productName$: Observable<string>;

src/app/extensions/product-notifications/shared/product-notification-edit-form/product-notification-edit-form.component.ts

@@ -33,7 +33,7 @@ import { ProductNotification } from '../../models/product-notification/product-n
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductNotificationEditFormComponent implements OnChanges {
-  @Input() form: FormGroup;
+  @Input({ required: true }) form: FormGroup;
   @Input() productNotification: ProductNotification;
   @Input() userEmail: string;
 

src/app/extensions/punchout/pages/account-punchout/account-punchout-header/account-punchout-header.component.ts

@@ -10,7 +10,7 @@ import { PunchoutType } from '../../../models/punchout-user/punchout-user.model'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccountPunchoutHeaderComponent {
+  @Input({ required: true }) selectedType: PunchoutType;
   @Input() punchoutTypes: PunchoutType[];
-  @Input() selectedType: PunchoutType;
   @Input() error: HttpError;
 }

src/app/extensions/quoting/shared/quote-expiration-date/quote-expiration-date.component.ts

@@ -10,7 +10,7 @@ import { Quote, QuoteStatus } from '../../models/quoting/quoting.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class QuoteExpirationDateComponent implements OnChanges {
-  @Input() quote: Partial<Pick<Quote, 'id' | 'validToDate'>>;
+  @Input({ required: true }) quote: Partial<Pick<Quote, 'id' | 'validToDate'>>;
 
   state$: Observable<QuoteStatus>;
 

src/app/extensions/quoting/shared/quote-line-item-list-element/quote-line-item-list-element.component.ts

@@ -12,7 +12,7 @@ import { QuoteItem, QuoteRequestItem } from '../../models/quoting/quoting.model'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class QuoteLineItemListElementComponent implements OnInit {
-  @Input() lineItem: Partial<
+  @Input({ required: true }) lineItem: Partial<
     Pick<QuoteRequestItem, 'id' | 'productSKU' | 'quantity' | 'singleBasePrice' | 'total'> &
       Pick<
         QuoteItem,

src/app/extensions/quoting/shared/quote-state/quote-state.component.ts

@@ -16,7 +16,7 @@ import { QuoteStatus } from '../../models/quoting/quoting.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class QuoteStateComponent implements OnChanges {
-  @Input() quoteId: string;
+  @Input({ required: true }) quoteId: string;
 
   state$: Observable<QuoteStatus>;
 

src/app/extensions/store-locator/shared/store-address/store-address.component.ts

@@ -8,5 +8,5 @@ import { StoreLocation as StoreModel } from '../../models/store-location/store-l
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StoreAddressComponent {
-  @Input() store: StoreModel;
+  @Input({ required: true }) store: StoreModel;
 }

src/app/extensions/tacton/pages/configure/tacton-bom/tacton-bom.component.ts

@@ -8,5 +8,5 @@ import { TactonProductConfigurationBomItem } from '../../../models/tacton-produc
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TactonBomComponent {
-  @Input() bom: TactonProductConfigurationBomItem[];
+  @Input({ required: true }) bom: TactonProductConfigurationBomItem[];
 }

src/app/extensions/tacton/pages/configure/tacton-config-parameter/tacton-config-parameter.component.ts

@@ -7,7 +7,7 @@ import { TactonProductConfigurationParameter } from '../../../models/tacton-prod
 // eslint-disable-next-line ish-custom-rules/use-component-change-detection
 @Component({ template: '' })
 export abstract class TactonConfigParameterComponent {
-  @Input() parameter: TactonProductConfigurationParameter;
+  @Input({ required: true }) parameter: TactonProductConfigurationParameter;
 
   constructor(protected facade: TactonFacade) {}
 

src/app/extensions/tacton/pages/configure/tacton-group/tacton-group.component.ts

@@ -13,7 +13,7 @@ import { TactonProductConfigurationGroup } from '../../../models/tacton-product-
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TactonGroupComponent {
-  @Input() group: TactonProductConfigurationGroup;
+  @Input({ required: true }) group: TactonProductConfigurationGroup;
   @Input() level = 0;
 
   constructor(private facade: TactonFacade) {}

src/app/extensions/tacton/pages/configure/tacton-parameter/tacton-parameter.component.ts

@@ -10,7 +10,7 @@ import { TactonProductConfigurationParameter } from '../../../models/tacton-prod
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TactonParameterComponent {
-  @Input() item: TactonProductConfigurationParameter;
+  @Input({ required: true }) item: TactonProductConfigurationParameter;
 
   constructor(private facade: TactonFacade) {}
 

src/app/extensions/tacton/pages/configure/tacton-readonly/tacton-readonly.component.ts

@@ -8,5 +8,5 @@ import { TactonProductConfigurationParameter } from '../../../models/tacton-prod
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TactonReadonlyComponent {
-  @Input() parameter: TactonProductConfigurationParameter;
+  @Input({ required: true }) parameter: TactonProductConfigurationParameter;
 }

src/app/extensions/wishlists/pages/account-wishlist-detail/account-wishlist-detail-line-item/account-wishlist-detail-line-item.component.ts

@@ -14,8 +14,8 @@ import { Wishlist, WishlistItem } from '../../../models/wishlist/wishlist.model'
 export class AccountWishlistDetailLineItemComponent {
   constructor(private wishlistsFacade: WishlistsFacade) {}
 
-  @Input() wishlistItemData: WishlistItem;
-  @Input() currentWishlist: Wishlist;
+  @Input({ required: true }) wishlistItemData: WishlistItem;
+  @Input({ required: true }) currentWishlist: Wishlist;
 
   moveItemToOtherWishlist(sku: string, wishlistMoveData: { id: string; title: string }) {
     if (wishlistMoveData.id) {

src/app/extensions/wishlists/shared/select-wishlist-form/select-wishlist-form.component.ts

@@ -16,7 +16,7 @@ import { WishlistsFacade } from '../../facades/wishlists.facade';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SelectWishlistFormComponent implements OnInit {
-  @Input() formGroup: FormGroup;
+  @Input({ required: true }) formGroup: FormGroup;
   /**
    * changes the some logic and the translations keys between add or move a product (default: 'add')
    */

src/app/pages/account-order/account-order/account-order.component.ts

@@ -14,5 +14,5 @@ import { Order } from 'ish-core/models/order/order.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccountOrderComponent {
-  @Input() order: Order;
+  @Input({ required: true }) order: Order;
 }

src/app/pages/account-overview/account-overview/account-overview.component.ts

@@ -15,6 +15,6 @@ import { User } from 'ish-core/models/user/user.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccountOverviewComponent {
-  @Input() user: User;
+  @Input({ required: true }) user: User;
   @Input() customer: Customer;
 }

src/app/pages/account-payment/account-payment-concardis-directdebit/account-payment-concardis-directdebit.component.ts

@@ -8,7 +8,7 @@ import { PaymentInstrument } from 'ish-core/models/payment-instrument/payment-in
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccountPaymentConcardisDirectdebitComponent {
-  @Input() paymentInstrument: PaymentInstrument;
+  @Input({ required: true }) paymentInstrument: PaymentInstrument;
 
   mandateReference: string;
   mandateText: string;

src/app/pages/account-payment/account-payment/account-payment.component.ts

@@ -20,8 +20,8 @@ import { User } from 'ish-core/models/user/user.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccountPaymentComponent implements OnInit, OnChanges {
-  @Input() paymentMethods: PaymentMethod[];
-  @Input() user: User;
+  @Input({ required: true }) paymentMethods: PaymentMethod[];
+  @Input({ required: true }) user: User;
 
   preferredPaymentInstrument: PaymentInstrument;
   savedPaymentMethods: PaymentMethod[];

src/app/pages/account-profile-company/account-profile-company/account-profile-company.component.ts

@@ -18,8 +18,8 @@ import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccountProfileCompanyComponent implements OnInit {
+  @Input({ required: true }) currentCustomer: Customer;
   @Input() error: HttpError;
-  @Input() currentCustomer: Customer;
   @Output() updateCompanyProfile = new EventEmitter<Customer>();
 
   submitted = false;

src/app/pages/account-profile-email/account-profile-email/account-profile-email.component.ts

@@ -18,8 +18,8 @@ import { SpecialValidators } from 'ish-shared/forms/validators/special-validator
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccountProfileEmailComponent implements OnInit {
+  @Input({ required: true }) currentUser: User;
   @Input() error: HttpError;
-  @Input() currentUser: User;
 
   @Output() updateEmail = new EventEmitter<{ user: User; credentials: Credentials }>();
 

src/app/pages/account-profile-user/account-profile-user/account-profile-user.component.ts

@@ -18,7 +18,7 @@ import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccountProfileUserComponent implements OnInit {
-  @Input() currentUser: User;
+  @Input({ required: true }) currentUser: User;
   @Input() error: HttpError;
 
   @Output() updateUserProfile = new EventEmitter<User>();

src/app/pages/account-profile/account-profile/account-profile.component.ts

@@ -9,6 +9,6 @@ import { User } from 'ish-core/models/user/user.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccountProfileComponent {
-  @Input() user: User;
+  @Input({ required: true }) user: User;
   @Input() customer: Customer;
 }

src/app/pages/basket/shopping-basket/shopping-basket.component.ts

@@ -26,7 +26,7 @@ import { HttpError } from 'ish-core/models/http-error/http-error.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShoppingBasketComponent {
-  @Input() basket: BasketView;
+  @Input({ required: true }) basket: BasketView;
   @Input() error: HttpError;
   @Input() loading = false;
 

src/app/pages/category/category-categories/category-categories.component.ts

@@ -9,7 +9,7 @@ import { DeviceType } from 'ish-core/models/viewtype/viewtype.types';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CategoryCategoriesComponent implements OnInit, OnChanges {
-  @Input() category: CategoryView;
+  @Input({ required: true }) category: CategoryView;
   @Input() deviceType: DeviceType;
 
   isCollapsed = false;

src/app/pages/category/category-image/category-image.component.ts

@@ -14,7 +14,7 @@ export class CategoryImageComponent implements OnChanges {
   /**
    * The category for which the image should be displayed
    */
-  @Input() category: Category;
+  @Input({ required: true }) category: Category;
 
   categoryImageUrl = '/assets/img/not-available.svg';