Merge branch 'main' into chore/docu-guru

CHANGELOG.md

@@ -14,6 +14,10 @@ _**For better traceability add the corresponding GitHub issue number in each cha
 
 ### Changed
 - Updated RELEASE.md to the latest release guide (added more steps)
+- #515 Fixed notification toast click area
+
+### Removed
+- #625 Removed the header and breadcrumbs section from app layout
 
 ## [10.6.0 - 04.03.2024]
 

frontend/src/app/modules/core/layout/header/header.component.html

@@ -41,16 +41,6 @@
       <app-user-navigation></app-user-navigation>
     </div>
   </nav>
-
-  <div class="header--breadcrumb-container">
-    <app-breadcrumbs></app-breadcrumbs>
-  </div>
-
-  <div *ngIf="activeMenu" class="header--app-header">
-    <h3>{{ 'pageTitle.' + activeMenu | i18n }}</h3>
-  </div>
-
-  <img src="/assets/images/header-subtract.png" class="header--stylish-curve" alt="" />
 </div>
 
 <ng-template let-type="value" let-role="role" #menuItem>

frontend/src/app/modules/core/layout/layout/layout.component.spec.ts

@@ -36,7 +36,7 @@ describe('LayoutComponent', () => {
       imports: [ LayoutModule ],
       providers: [ LayoutComponent ],
     });
-    let header = fixture.debugElement.query(By.css('.header--breadcrumb-container'));
+    let header = fixture.debugElement.query(By.css('.layout-content__box-modal'));
     expect(header).not.toBeNull();
     let toast = fixture.debugElement.query(By.css('.layout-toast-component'));
     let headerDistanceToTop = header.nativeElement.getBoundingClientRect().y + 'px';

frontend/src/app/modules/core/layout/layout/layout.component.ts

@@ -36,9 +36,9 @@ export class LayoutComponent {
      * This Block positions the toast component to the start of the header breadcrumb component (vertical top distance)
      * so that on every screen size the position stays the same (not relative)
      */
-    const headerBreadCrumbRef = this.elementRef.nativeElement.querySelector('.header--breadcrumb-container');
+    const layoutContentRef = this.elementRef.nativeElement.querySelector('.layout-content__box-modal');
     const toastLayoutRef = this.elementRef.nativeElement.querySelector('.layout-toast-component');
-    const elementTopDistance = headerBreadCrumbRef.getBoundingClientRect().top;
+    const elementTopDistance = layoutContentRef.getBoundingClientRect().top;
     this.renderer.setStyle(toastLayoutRef, 'top', `${ elementTopDistance }px`);
   }
 

frontend/src/app/modules/shared/components/toasts/toast-message/toast-message.component.html

@@ -23,19 +23,20 @@
   <span class="hfull check-icon-container mr-2 mb-2 toast-icon-{{ toastMessage.status }}" data-testid="toast-container">
     <mat-icon class="text-1xl">{{toastMessage.status}}</mat-icon>
   </span>
-  <label class="large-text p-3 text-dark flex flex-wrap" id="toast-message">
+  <div class="large-text p-3 text-dark flex flex-wrap" id="toast-message">
     {{ toastMessage.message | i18n }} {{toastMessage.stringMessage}}
     <a *ngIf="toastMessage.actions"
-       href="{{toastMessage?.actions[0].link}}?tabIndex=1">{{toastMessage?.actions[0].text | i18n}}</a>
+       href="{{toastMessage?.actions[0].link}}?tabIndex=1">{{toastMessage?.actions[0].text | i18n}}
+    </a>
     <app-button *ngIf="toastMessage?.retry"
                 class="mt-1"
-                (click)="handleClick()">
+                (click)="handleClick($event)">
       <div class="button-content font-semiBold">
         {{"retry" | i18n}} <mat-icon class="retry-icon">refresh</mat-icon>
       </div>
     </app-button>
-  </label>
-  <button class="btn-close p-0.5 flex flex-end">
-    <mat-icon class="text-grey mt-1" (click)="this.removeToast.emit(toastMessage)">close</mat-icon>
-  </button>
+  </div>
+  <div class="btn-close p-0.5 flex flex-end">
+    <mat-icon class="text-grey mt-1 cursor-pointer" (click)="this.removeToast.emit(toastMessage)">close</mat-icon>
+  </div>
 </div>

frontend/src/app/modules/shared/components/toasts/toast-message/toast-message.component.spec.ts

@@ -51,9 +51,9 @@ describe('ToastMessageComponent', () => {
   it('should call toastService.emitClick() when handleClick is called', () => {
     // Arrange
     component.toastMessage = new ToastMessage(1, 'test', ToastStatus.Informative, 500);
-
+    let event = new MouseEvent("");
     // Act
-    component.handleClick();
+    component.handleClick(event);
 
     // Assert
     expect(toastService.emitClick).toHaveBeenCalled();