Enable url redirect for activity dashboard

src/app/activity-dashboard/activity-dashboard.component.css

@@ -2,3 +2,9 @@
   display: flex;
   overflow-x: auto;
 }
+
+.loading-spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/app/activity-dashboard/activity-dashboard.component.html

@@ -1,40 +1,46 @@
 <div>
-  <mat-grid-list cols="4" rowHeight="80px">
-    <mat-grid-tile>
-      <div class="grid-flush-left">
-        <h1 class="mat-headline" style="margin: 0px">Activity</h1>
-      </div>
-    </mat-grid-tile>
+  <div class="loading-spinner" *ngIf="this.viewService.isChangingRepo | async; else elseBlock">
+    <mat-progress-spinner color="primary" mode="indeterminate" diameter="50" strokeWidth="5"> </mat-progress-spinner>
+  </div>
 
-    <mat-grid-tile>
-      <mat-form-field appearance="fill">
-        <mat-label>Start Date</mat-label>
-        <input matInput [min]="startMinDate" [max]="startMaxDate" [matDatepicker]="startPicker" (dateChange)="pickStartDate($event)" />
-        <mat-hint>MM/DD/YYYY</mat-hint>
-        <mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
-        <mat-datepicker startView="year" #startPicker></mat-datepicker>
-      </mat-form-field>
-    </mat-grid-tile>
+  <ng-template #elseBlock>
+    <mat-grid-list cols="4" rowHeight="80px">
+      <mat-grid-tile>
+        <div class="grid-flush-left">
+          <h1 class="mat-headline" style="margin: 0px">Activity</h1>
+        </div>
+      </mat-grid-tile>
 
-    <mat-grid-tile>
-      <mat-form-field appearance="fill">
-        <mat-label>End Date</mat-label>
-        <input matInput [min]="endMinDate" [max]="endMaxDate" [matDatepicker]="endPicker" (dateChange)="pickEndDate($event)" />
-        <mat-hint>MM/DD/YYYY</mat-hint>
-        <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
-        <mat-datepicker startView="year" #endPicker></mat-datepicker>
-      </mat-form-field>
-    </mat-grid-tile>
-  </mat-grid-list>
-</div>
+      <mat-grid-tile>
+        <mat-form-field appearance="fill">
+          <mat-label>Start Date</mat-label>
+          <input matInput [min]="startMinDate" [max]="startMaxDate" [matDatepicker]="startPicker" (dateChange)="pickStartDate($event)" />
+          <mat-hint>MM/DD/YYYY</mat-hint>
+          <mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
+          <mat-datepicker startView="year" #startPicker></mat-datepicker>
+        </mat-form-field>
+      </mat-grid-tile>
+
+      <mat-grid-tile>
+        <mat-form-field appearance="fill">
+          <mat-label>End Date</mat-label>
+          <input matInput [min]="endMinDate" [max]="endMaxDate" [matDatepicker]="endPicker" (dateChange)="pickEndDate($event)" />
+          <mat-hint>MM/DD/YYYY</mat-hint>
+          <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
+          <mat-datepicker startView="year" #endPicker></mat-datepicker>
+        </mat-form-field>
+      </mat-grid-tile>
+    </mat-grid-list>
 
-<div class="event-tables-wrapper">
-  <app-event-tables
-    *ngFor="let assignee of assignees"
-    class="issue-table"
-    [actor]="assignee"
-    [columnsToDisplay]="this.displayedColumns"
-    [expandedColumnsToDisplay]="this.expandedColumns"
-    [actions]="this.actionButtons"
-  ></app-event-tables>
+    <div class="event-tables-wrapper">
+      <app-event-tables
+        *ngFor="let assignee of assignees"
+        class="issue-table"
+        [actor]="assignee"
+        [columnsToDisplay]="this.displayedColumns"
+        [expandedColumnsToDisplay]="this.expandedColumns"
+        [actions]="this.actionButtons"
+      ></app-event-tables>
+    </div>
+  </ng-template>
 </div>

src/app/activity-dashboard/activity-dashboard.component.ts

@@ -1,9 +1,11 @@
-import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { Component, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';
 import { MatDatepickerInputEvent } from '@angular/material/datepicker';
 import * as moment from 'moment';
+import { Subscription } from 'rxjs';
 import { GithubUser } from '../core/models/github-user.model';
 import { GithubService } from '../core/services/github.service';
 import { GithubEventService } from '../core/services/githubevent.service';
+import { ViewService } from '../core/services/view.service';
 import { EXPANDED_TABLE_COLUMNS, TABLE_COLUMNS } from './event-tables/event-tables-columns';
 import { ACTION_BUTTONS, EventTablesComponent } from './event-tables/event-tables.component';
 
@@ -12,11 +14,14 @@ import { ACTION_BUTTONS, EventTablesComponent } from './event-tables/event-table
   templateUrl: './activity-dashboard.component.html',
   styleUrls: ['./activity-dashboard.component.css']
 })
-export class ActivityDashboardComponent implements OnInit {
+export class ActivityDashboardComponent implements OnInit, OnDestroy {
   readonly displayedColumns = [TABLE_COLUMNS.DATE_START, TABLE_COLUMNS.ISSUE_COUNT, TABLE_COLUMNS.PR_COUNT, TABLE_COLUMNS.COMMENT_COUNT];
   readonly expandedColumns = [EXPANDED_TABLE_COLUMNS.TITLE, EXPANDED_TABLE_COLUMNS.DATE];
   readonly actionButtons: ACTION_BUTTONS[] = [ACTION_BUTTONS.VIEW_IN_WEB];
 
+  /** Observes for changes of repo*/
+  repoChangeSubscription: Subscription;
+
   startMinDate: Date;
   startMaxDate = moment().endOf('day').toDate();
   endMinDate: Date;
@@ -26,11 +31,26 @@ export class ActivityDashboardComponent implements OnInit {
 
   @ViewChildren(EventTablesComponent) tables: QueryList<EventTablesComponent>;
 
-  constructor(private githubService: GithubService, private githubEventService: GithubEventService) {}
+  constructor(private githubService: GithubService, private githubEventService: GithubEventService, public viewService: ViewService) {
+    this.repoChangeSubscription = this.viewService.repoChanged$.subscribe((newRepo) => {
+      this.initialize();
+    });
+  }
 
   ngOnInit() {
+    this.initialize();
+  }
+
+  ngOnDestroy(): void {
+    this.repoChangeSubscription.unsubscribe();
+  }
+
+  private initialize(): void {
     this.githubEventService.getEvents();
-    this.githubService.getUsersAssignable().subscribe((x) => (this.assignees = x));
+    this.assignees = [];
+    this.githubService.getUsersAssignable().subscribe((x) => {
+      this.assignees = x;
+    });
   }
 
   pickStartDate(event: MatDatepickerInputEvent<Date>) {

src/app/core/services/view.service.ts

@@ -85,11 +85,7 @@ export class ViewService {
     this.sessionData.sessionRepo.find((x) => x.view === this.currentView).repos = this.getRepository();
     this.githubService.storeViewDetails(this.currentRepo.owner, this.currentRepo.name);
     localStorage.setItem('sessionData', JSON.stringify(this.sessionData));
-    this.router.navigate(['issuesViewer'], {
-      queryParams: {
-        [ViewService.REPO_QUERY_PARAM_KEY]: repo.toString()
-      }
-    });
+    this.navigate();
   }
 
   /**
@@ -172,6 +168,8 @@ export class ViewService {
           throw new Error(ErrorMessageService.invalidUrlMessage());
         }
 
+        this.currentView = View[viewName];
+
         const newRepo = Repo.of(repoName);
         if (newRepo) {
           window.localStorage.setItem(STORAGE_KEYS.ORG, newRepo.owner);
@@ -184,13 +182,13 @@ export class ViewService {
 
   getViewAndRepoFromUrl(url: string): [string, string] {
     const urlObject = new URL(`${location.protocol}//${location.host}${url}`);
-    const pathname = urlObject.pathname;
+    const viewname = urlObject.pathname.substring(1);
     const reponame = urlObject.searchParams.get(ViewService.REPO_QUERY_PARAM_KEY);
-    return [pathname, reponame];
+    return [viewname, reponame];
   }
 
   isViewAllowed(viewName: string) {
-    return viewName === '/' + View.issuesViewer;
+    return viewName in View;
   }
 
   isRepoSet(): boolean {
@@ -204,6 +202,8 @@ export class ViewService {
   changeView(view: View) {
     this.currentView = view;
 
+    this.navigate();
+
     // For now, assumes repository stays the same
     this.githubService.storeViewDetails(this.currentRepo.owner, this.currentRepo.name);
   }
@@ -215,4 +215,15 @@ export class ViewService {
   reset() {
     this.currentView = STARTING_VIEW;
   }
+
+  /**
+   * Navigate with current phase and current repo
+   */
+  private navigate() {
+    this.router.navigate([this.currentView], {
+      queryParams: {
+        [ViewService.REPO_QUERY_PARAM_KEY]: this.currentRepo.toString()
+      }
+    });
+  }
 }

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

@@ -112,9 +112,6 @@ export class HeaderComponent implements OnInit {
     this.issueService.reset(false);
     this.labelService.reset();
     this.reload();
-
-    // Route app to new view.
-    this.router.navigateByUrl(this.viewService.currentView);
   }
 
   isBackButtonShown(): boolean {

tests/services/view.service.spec.ts

@@ -128,14 +128,17 @@ describe('ViewService', () => {
   });
 
   describe('changeView(View)', () => {
-    it('should set current view', () => {
+    it('should set current view and redirect with current view and repo', () => {
       viewService.setRepository(WATCHER_REPO);
 
       expect(viewService.currentView).toEqual(View.issuesViewer);
 
       viewService.changeView(View.activityDashboard);
 
       expect(viewService.currentView).toEqual(View.activityDashboard);
+      expect(routerSpy.navigate).toHaveBeenCalledWith([View.activityDashboard], {
+        queryParams: { repo: WATCHER_REPO.toString() }
+      });
     });
   });