Implement dropdown menu for repo change (#347)

Introduce a dropdown menu for repository selection,
simplifying the process of switching between repositories. 

This enhancement offers users a quicker and more
intuitive method to navigate to previously visited repositories.

src/app/shared/layout/header.component.css

@@ -0,0 +1,32 @@
+.repo-menu-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  padding: 10px;
+}
+
+.new-repo-button {
+  flex-grow: 1;
+}
+
+.keep-filter-button {
+  margin-left: 2px;
+}
+
+.repo-options {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.repo-options button {
+  font-size: 17px;
+}
+
+/* Overwrite the width of the menu */
+::ng-deep .repo-menu {
+  width: fit-content !important;
+  min-width: 320px !important;
+}

src/app/shared/layout/header.component.html

@@ -60,14 +60,40 @@
       {{ this.currentRepo || 'No Repository Set' }}
     </span>
     <button
-      mat-button
+      mat-icon-button
       matTooltip="{{ viewService.isRepoSet() ? 'Change Repository' : 'Select Repository' }}"
-      (click)="this.openChangeRepoDialog()"
+      [matMenuTriggerFor]="repoMenu"
     >
       <mat-icon>edit</mat-icon>
     </button>
   </div>
 
+  <mat-menu #repoMenu xPosition="before" class="repo-menu">
+    <div class="repo-options">
+      <div *ngFor="let repo of this.repoUrlCacheService.suggestions">
+        <button mat-menu-item *ngIf="repo !== this.currentRepo" (click)="this.applyRepoDropdown(repo, true)">
+          {{ repo }}
+        </button>
+      </div>
+    </div>
+
+    <div class="repo-menu-footer">
+      <button mat-flat-button color="primary" class="new-repo-button" (click)="this.openChangeRepoDialog()" matTooltip="Add new repository">
+        <mat-icon>add</mat-icon>
+      </button>
+
+      <button
+        mat-icon-button
+        (click)="toggleKeepFilters($event)"
+        class="keep-filter-button"
+        matTooltip="{{ keepFilters ? 'Keep filter on' : 'Keep filter off' }}"
+        color="{{ keepFilters ? 'primary' : 'warn' }}"
+      >
+        <mat-icon>{{ keepFilters ? 'filter_alt' : 'filter_alt_off' }}</mat-icon>
+      </button>
+    </div>
+  </mat-menu>
+
   <span style="flex: 1 1 auto"></span>
 
   <button mat-button matTooltip="Download WATcher Log" (click)="this.exportLogFile()">

src/app/shared/layout/header.component.ts

@@ -27,7 +27,8 @@ const ISSUE_TRACKER_URL = 'https://github.com/CATcher-org/WATcher/issues';
 
 @Component({
   selector: 'app-layout-header',
-  templateUrl: './header.component.html'
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
 })
 export class HeaderComponent implements OnInit {
   private prevUrl;
@@ -55,16 +56,18 @@ export class HeaderComponent implements OnInit {
   /** Model for the displayed repository name */
   currentRepo = '';
 
+  keepFilters = false;
+
   constructor(
     private router: Router,
     public auth: AuthService,
     public viewService: ViewService,
     public userService: UserService,
     public logger: LoggingService,
+    public repoUrlCacheService: RepoUrlCacheService,
     private location: Location,
     private githubEventService: GithubEventService,
     private issueService: IssueService,
-    private repoUrlCacheService: RepoUrlCacheService,
     private labelService: LabelService,
     private errorHandlingService: ErrorHandlingService,
     private githubService: GithubService,
@@ -265,6 +268,16 @@ export class HeaderComponent implements OnInit {
       });
   }
 
+  applyRepoDropdown(repoString: string) {
+    const newRepo = Repo.of(repoString);
+    this.changeRepositoryIfValid(newRepo, newRepo.toString(), this.keepFilters);
+  }
+
+  toggleKeepFilters(event: MouseEvent) {
+    event.stopPropagation();
+    this.keepFilters = !this.keepFilters;
+  }
+
   openChangeRepoDialog() {
     const dialogRef = this.dialogService.openChangeRepoDialog(this.currentRepo);