Bug/1013 routing to overview (#1084)

* Add permanent teamverwaltung button and make logo route to / * Make router links leading to homepage preserve query params * Change tag around logo from span to a * Add e2e tests that test if route is preserved --------- Co-authored-by: Jannik Pulfer <[email protected]> Co-authored-by: GitHub Actions <[email protected]>
puzzle · Nov 6, 2024 · 165d4f4 · 165d4f4
1 parent 56caefd
commit 165d4f4
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 22 deletions.
diff --git a/frontend/cypress/e2e/tab.cy.ts b/frontend/cypress/e2e/tab.cy.ts
@@ -124,6 +124,7 @@ describe('Tab workflow tests', () => {
       cy.loginAsUser(users.gl);
       onlyOn('chrome');
       cy.tabForward();
+      cy.tabForward();
     });
 
     // Header from here

diff --git a/frontend/cypress/e2e/teammanagement.cy.ts b/frontend/cypress/e2e/teammanagement.cy.ts
@@ -5,6 +5,40 @@ describe('Team management tests', () => {
   const teamName = uniqueSuffix('New Team');
   const nameEsha = users.bl.name;
 
+  describe('Routing to overview', () => {
+    beforeEach(() => {
+      cy.loginAsUser(users.gl);
+    });
+    it('should navigate to overview when clicking logo', () => {
+      cy.getByTestId('team-management').click();
+      cy.getByTestId('logo').click();
+      cy.url().should('not.include', 'team-management');
+    });
+    it('should navigate to overview when pressing back to overview', () => {
+      cy.getByTestId('team-management').click();
+      cy.getByTestId('routerLink-to-overview').click();
+      cy.url().should('not.include', 'team-management');
+    });
+    it('should preserve team filter', () => {
+      cy.get('mat-chip:visible:contains("/BBT")').click();
+      cy.get('mat-chip:visible:contains("Puzzle ITC")').click();
+      checkTeamsSelected();
+      cy.getByTestId('team-management').click();
+      checkTeamsSelected();
+      cy.getByTestId('routerLink-to-overview').click();
+      checkTeamsSelected();
+      cy.getByTestId('team-management').click();
+      cy.getByTestId('logo').click();
+      checkTeamsSelected();
+    });
+
+    function checkTeamsSelected() {
+      cy.url().should('include', 'teams=');
+      cy.url().should('include', '6');
+      cy.url().should('include', '4');
+    }
+  });
+
   describe('As GL', () => {
     before(() => {
       // login as bl to ensure this user exists in database

diff --git a/frontend/src/app/components/application-top-bar/application-top-bar.component.html b/frontend/src/app/components/application-top-bar/application-top-bar.component.html
@@ -1,24 +1,26 @@
 <div id="topBarHeight">
   <div id="okrTopbar">
-    <span class="d-flex h-100 align-items-center ps-4">
-      <img alt="okr-logo" height="32" ngSrc="{{ this.logoSrc$ | async }}" width="140" priority />
-    </span>
+    <a routerLink="/" queryParamsHandling="preserve" class="d-flex h-100 align-items-center ps-4">
+      <img
+        [attr.data-testId]="'logo'"
+        alt="okr-logo"
+        height="32"
+        ngSrc="{{ this.logoSrc$ | async }}"
+        width="140"
+        priority
+      />
+    </a>
     <div class="d-flex align-items-center me-md-5 me-1">
       <button
-        *ngIf="teamManagementVisible$ | async"
         routerLink="team-management"
         [attr.data-testId]="'team-management'"
         class="topBarEntry btn visible-by-default"
+        queryParamsHandling="preserve"
       >
         <mat-icon aria-hidden="false" aria-label="Group icon" fontIcon="group"></mat-icon>
         <span class="d-none d-md-flex">Teamverwaltung </span>
       </button>
 
-      <button *ngIf="!(teamManagementVisible$ | async)" routerLink="/" class="topBarEntry btn visible-by-default">
-        <mat-icon aria-hidden="false" aria-label="Group icon" fontIcon="group"></mat-icon>
-        <span class="d-none d-md-flex">OKR Übersicht </span>
-      </button>
-
       <button
         id="hilfeButton"
         class="topBarEntry btn"

diff --git a/frontend/src/app/components/application-top-bar/application-top-bar.component.ts b/frontend/src/app/components/application-top-bar/application-top-bar.component.ts
@@ -15,7 +15,6 @@ import { getFullNameFromUser } from '../../shared/types/model/User';
 export class ApplicationTopBarComponent implements OnInit, OnDestroy {
   userFullName: string = '';
   menuIsOpen = false;
-  teamManagementVisible$: Observable<boolean> | undefined;
   logoSrc$ = new BehaviorSubject<String>('assets/images/empty.svg');
   private subscription?: Subscription;
 
@@ -35,9 +34,7 @@ export class ApplicationTopBarComponent implements OnInit, OnDestroy {
         }
       },
     });
-
     this.initUserFullName();
-    this.initTeamManagementVisible();
   }
 
   ngOnDestroy(): void {
@@ -60,13 +57,4 @@ export class ApplicationTopBarComponent implements OnInit, OnDestroy {
       }
     });
   }
-
-  private initTeamManagementVisible() {
-    this.teamManagementVisible$ = this.router.events.pipe(
-      filter((e): e is NavigationEnd => e instanceof NavigationEnd),
-      switchMap(() => {
-        return of(this.router.url.split('?')[0] === '/');
-      }),
-    );
-  }
 }
diff --git a/...tend/src/app/team-management/team-management-banner/team-management-banner.component.html b/...tend/src/app/team-management/team-management-banner/team-management-banner.component.html
@@ -1,7 +1,9 @@
 <div id="okrBanner" class="container-fluid">
   <div class="row first-line">
     <div class="col-12">
-      <a routerLink="/">Zurück zur OKR Übersicht</a>
+      <a [attr.data-testId]="'routerLink-to-overview'" routerLink="/" queryParamsHandling="preserve"
+        >Zurück zur OKR Übersicht</a
+      >
     </div>
   </div>
   <div class="row second-line">