Merge branch 'main' into deploy-v1.2.1

CATcher-org · Apr 3, 2024 · 09f271a · 09f271a
2 parents 4549bdf + 695eabb
commit 09f271a
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 52 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "WATcher",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "main.js",
   "scripts": {
     "ng": "ng",

diff --git a/src/app/core/services/filters.service.ts b/src/app/core/services/filters.service.ts
@@ -72,20 +72,53 @@ export class FiltersService {
   ) {}
 
   private pushFiltersToUrl(): void {
-    const queryParams = {};
+    const queryParams = { ...this.route.snapshot.queryParams };
+
     for (const filterName of Object.keys(this.filter$.value)) {
-      if (this.filter$.value[filterName] instanceof Set) {
-        queryParams[filterName] = JSON.stringify([...this.filter$.value[filterName]]);
-      } else {
-        queryParams[filterName] = JSON.stringify(this.filter$.value[filterName]);
+      const filterValue = this.filter$.value[filterName];
+
+      // Don't include empty or null filters
+      // Intended behaviour to reset to default if 0 of a certain filter are selected
+      switch (filterName) {
+        // Strings
+        case 'title':
+        case 'type':
+          if (!filterValue) {
+            delete queryParams[filterName];
+            continue;
+          }
+          queryParams[filterName] = filterValue;
+          break;
+        // Arrays
+        case 'status':
+        case 'labels':
+        case 'milestones':
+          if (filterValue.length === 0) {
+            delete queryParams[filterName];
+            continue;
+          }
+          queryParams[filterName] = filterValue;
+          break;
+        // Sets
+        case 'selectedLabels':
+        case 'deselectedLabels':
+          if (filterValue.size === 0) {
+            delete queryParams[filterName];
+          }
+          queryParams[filterName] = [...filterValue];
+          break;
+        // Objects
+        case 'sort':
+          queryParams[filterName] = JSON.stringify(filterValue);
+          break;
+        default:
       }
     }
     queryParams[FiltersService.PRESET_VIEW_QUERY_PARAM_KEY] = this.presetView$.value;
 
     this.router.navigate([], {
       relativeTo: this.route,
       queryParams,
-      queryParamsHandling: 'merge',
       replaceUrl: true
     });
   }
@@ -100,24 +133,48 @@ export class FiltersService {
     const queryParams = this.route.snapshot.queryParamMap;
     try {
       const presetView = queryParams.get(FiltersService.PRESET_VIEW_QUERY_PARAM_KEY);
-
       // Use preset view if set in url
       if (presetView && this.presetViews.hasOwnProperty(presetView) && presetView !== 'custom') {
         this.updatePresetView(presetView);
         return;
       }
 
+      // No preset view and no other filters in params, use default view
+      if (!presetView && Object.keys(nextFilter).every((filterName) => queryParams.get(filterName) === null)) {
+        this.updatePresetView('currentlyActive');
+        return;
+      }
+
       for (const filterName of Object.keys(nextFilter)) {
-        const stringifiedFilterData = queryParams.get(filterName);
-        if (!stringifiedFilterData) {
+        // Check if there is no such param in url
+        if (queryParams.get(filterName) === null) {
           continue;
         }
-        const filterData = JSON.parse(stringifiedFilterData);
 
-        if (nextFilter[filterName] instanceof Set) {
-          nextFilter[filterName] = new Set(filterData);
-        } else {
-          nextFilter[filterName] = filterData;
+        const filterData = queryParams.getAll(filterName);
+
+        switch (filterName) {
+          // Strings
+          case 'title':
+          case 'type':
+            nextFilter[filterName] = filterData[0];
+            break;
+          // Arrays
+          case 'status':
+          case 'labels':
+          case 'milestones':
+            nextFilter[filterName] = filterData;
+            break;
+          // Sets
+          case 'selectedLabels':
+          case 'deselectedLabels':
+            nextFilter[filterName] = new Set(filterData);
+            break;
+          // Objects
+          case 'sort':
+            nextFilter[filterName] = JSON.parse(filterData[0]);
+            break;
+          default:
         }
       }
       this.updateFilters(nextFilter);
@@ -227,14 +284,14 @@ export class FiltersService {
   getMilestonesForCurrentlyActive(): Milestone[] {
     const earliestOpenMilestone = this.milestoneService.getEarliestOpenMilestone();
     if (earliestOpenMilestone) {
-      return [earliestOpenMilestone];
+      return [earliestOpenMilestone, Milestone.PRWithoutMilestone];
     }
 
     const latestClosedMilestone = this.milestoneService.getLatestClosedMilestone();
     if (latestClosedMilestone) {
-      return [latestClosedMilestone];
+      return [latestClosedMilestone, Milestone.PRWithoutMilestone];
     }
 
-    return this.milestoneService.milestones;
+    return [...this.milestoneService.milestones, Milestone.PRWithoutMilestone];
   }
 }
diff --git a/src/app/issues-viewer/card-view/card-view.component.css b/src/app/issues-viewer/card-view/card-view.component.css
@@ -1,5 +1,8 @@
 .card-column {
   margin: 8px;
+  height: 77vh;
+  display: flex;
+  flex-direction: column;
 }
 
 .card {
@@ -45,17 +48,10 @@ div.column-header .mat-card-header {
 }
 
 .scrollable-container {
-  height: 53vh;
-  overflow: auto;
   margin-bottom: 2px;
-  scrollbar-width: none;
   position: relative;
 }
 
-.scrollable-container::-webkit-scrollbar {
-  display: none;
-}
-
 /* Ref: https://css-scroll-shadows.vercel.app */
 .scrollable-container::before {
   pointer-events: none;
@@ -82,6 +78,13 @@ div.column-header .mat-card-header {
 
 .scrollable-container-wrapper {
   position: relative;
+  scrollbar-width: none;
+  overflow: auto;
+  flex-grow: 1;
+}
+
+.scrollable-container-wrapper::-webkit-scrollbar {
+  display: none;
 }
 
 .scrollable-container-wrapper::before {
@@ -142,6 +145,6 @@ div.column-header .mat-card-header {
   display: none !important;
 }
 
-:host ::ng-deep .mat-paginator-range-actions {
-  height: 47px;
+:host ::ng-deep .pagination-hide-arrow .mat-paginator-range-actions {
+  display: none !important;
 }
diff --git a/src/app/issues-viewer/card-view/card-view.component.html b/src/app/issues-viewer/card-view/card-view.component.html
@@ -6,7 +6,7 @@
   <div class="scrollable-container-wrapper">
     <div class="scrollable-container">
       <div class="issue-pr-cards" *ngFor="let issue of this.issues$ | async; index as i">
-        <app-issue-pr-card [issue]="issue" [filter]="issues.filter"></app-issue-pr-card>
+        <app-issue-pr-card [issue]="issue" [filter]="issues.filter" [milestoneService]="milestoneService"></app-issue-pr-card>
       </div>
       <mat-card class="loading-spinner" *ngIf="this.issues.isLoading$ | async">
         <mat-progress-spinner color="primary" mode="indeterminate" diameter="50" strokeWidth="5"></mat-progress-spinner>

diff --git a/src/app/shared/issue-pr-card/issue-pr-card-milestone/issue-pr-card-milestone.component.html b/src/app/shared/issue-pr-card/issue-pr-card-milestone/issue-pr-card-milestone.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="milestone.state" class="milestone">
-  <span class="octicon-milestone" octicon="milestone" color="grey" size="8"> </span>
-  {{ milestone.title }}
+<div *ngIf="repoHasMilestones" class="milestone" [ngStyle]="{ color: milestone.state ? 'grey' : 'red' }">
+  <span class="octicon-milestone" octicon="milestone" [color]="milestone.state ? 'grey' : 'red'" size="8"> </span>
+  {{ milestone.state ? milestone.title : '???' }}
 </div>
diff --git a/src/app/shared/issue-pr-card/issue-pr-card-milestone/issue-pr-card-milestone.component.ts b/src/app/shared/issue-pr-card/issue-pr-card-milestone/issue-pr-card-milestone.component.ts
@@ -8,6 +8,7 @@ import { Milestone } from '../../../core/models/milestone.model';
 })
 export class IssuePrCardMilestoneComponent {
   @Input() milestone: Milestone;
+  @Input() repoHasMilestones: boolean;
 
   constructor() {}
 }
diff --git a/src/app/shared/issue-pr-card/issue-pr-card.component.html b/src/app/shared/issue-pr-card/issue-pr-card.component.html
@@ -3,7 +3,10 @@
     <span [matTooltip]="this.issue.updated_at">
       <app-issue-pr-card-header [issue]="issue"></app-issue-pr-card-header>
       <mat-card-content>
-        <app-issue-pr-card-milestone [milestone]="issue.milestone"></app-issue-pr-card-milestone>
+        <app-issue-pr-card-milestone
+          [milestone]="issue.milestone"
+          [repoHasMilestones]="!milestoneService.hasNoMilestones"
+        ></app-issue-pr-card-milestone>
         <app-issue-pr-card-labels [labels]="issue.githubLabels" [labelSet]="filter?.hiddenLabels"></app-issue-pr-card-labels>
       </mat-card-content>
     </span>

diff --git a/src/app/shared/issue-pr-card/issue-pr-card.component.ts b/src/app/shared/issue-pr-card/issue-pr-card.component.ts
@@ -4,6 +4,7 @@ import { Filter } from '../../core/services/filters.service';
 import { GithubService } from '../../core/services/github.service';
 import { LabelService } from '../../core/services/label.service';
 import { LoggingService } from '../../core/services/logging.service';
+import { MilestoneService } from '../../core/services/milestone.service';
 
 @Component({
   selector: 'app-issue-pr-card',
@@ -14,7 +15,12 @@ export class IssuePrCardComponent {
   @Input() issue: Issue;
   @Input() filter?: Filter;
 
-  constructor(private logger: LoggingService, private githubService: GithubService, public labelService: LabelService) {}
+  constructor(
+    private logger: LoggingService,
+    private githubService: GithubService,
+    public labelService: LabelService,
+    public milestoneService: MilestoneService
+  ) {}
 
   /** Opens issue in new window */
   viewIssueInBrowser(event: Event) {

diff --git a/src/app/shared/layout/header.component.css b/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;
+}
diff --git a/src/app/shared/layout/header.component.html b/src/app/shared/layout/header.component.html
@@ -11,8 +11,8 @@
   <a class="mat-toolbar mat-primary" style="text-decoration: none" [routerLink]="viewService.isRepoSet() ? viewService.currentView : null"
     >WATcher v{{ this.getVersion() }}</a
   >
-  <span id="view-descriptor" *ngIf="auth.isAuthenticated()" style="margin-left: 10px">
-    ({{ this.presetViews[this.filtersService.presetView$.value] }})
+  <span id="view-descriptor" *ngIf="auth.isAuthenticated()" style="margin-left: 70px">
+    {{ this.presetViews[this.filtersService.presetView$.value] }}
   </span>
 
   <!-- Gateway to activity dashboard, do not delete -->
@@ -37,19 +37,17 @@
   <div *ngIf="auth.isAuthenticated()">
     <button mat-button [matMenuTriggerFor]="menu"><mat-icon style="color: white">expand_more</mat-icon></button>
     <mat-menu #menu="matMenu">
-      <button
-        mat-menu-item
-        *ngFor="let presetView of this.presetViews | keyvalue"
-        (click)="this.filtersService.updatePresetView(presetView.key)"
-      >
-        <span>
-          <mat-icon
-            [ngStyle]="{ color: 'green', visibility: this.filtersService.presetView$.value === presetView.key ? 'visible' : 'hidden' }"
-            >done</mat-icon
-          >
-          {{ presetView.value }}
-        </span>
-      </button>
+      <div *ngFor="let presetView of this.presetViews | keyvalue">
+        <button mat-menu-item *ngIf="presetView.key !== 'custom'" (click)="this.filtersService.updatePresetView(presetView.key)">
+          <span>
+            <mat-icon
+              [ngStyle]="{ color: 'green', visibility: this.filtersService.presetView$.value === presetView.key ? 'visible' : 'hidden' }"
+              >done</mat-icon
+            >
+            {{ presetView.value }}
+          </span>
+        </button>
+      </div>
     </mat-menu>
   </div>
 
@@ -62,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()">