Indicate clickable issue/pr and milestone (#380)

Clicking on issue/pr card will link to the issue/pr. Cursor indicates text selection when put over issue/pr title and milestone title. It should link to different pages when clicked on different things on the card and indicate clickable links. Let's make milestone clickable and make cursor a pointer when put over the titles.
CATcher-org · Jul 26, 2024 · 4305a0f · 4305a0f
1 parent 610fa8d
commit 4305a0f
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 10 deletions.
diff --git a/src/app/core/models/milestone.model.ts b/src/app/core/models/milestone.model.ts
@@ -9,11 +9,13 @@ export class Milestone implements Group {
   title: string;
   state: string;
   deadline?: Date;
+  number?: number;
 
-  constructor(milestone: { title: string; state: string; due_on?: string }) {
+  constructor(milestone: { title: string; state: string; due_on?: string; number?: string }) {
     this.title = milestone.title;
     this.state = milestone.state;
     this.deadline = milestone.due_on ? new Date(milestone.due_on) : undefined;
+    this.number = milestone.number ? +milestone.number : undefined;
   }
 
   public equals(other: any) {

diff --git a/src/app/core/services/error-message.service.ts b/src/app/core/services/error-message.service.ts
@@ -68,6 +68,10 @@ export class ErrorMessageService {
     return 'Unable to open this issue in Browser';
   }
 
+  public static unableToOpenMilestoneInBrowserMessage() {
+    return 'Milestone unassigned';
+  }
+
   public static applicationVersionOutdatedMessage() {
     return 'Please update to the latest version of WATcher.';
   }

diff --git a/src/app/core/services/github.service.ts b/src/app/core/services/github.service.ts
@@ -452,6 +452,15 @@ export class GithubService {
     event.stopPropagation();
   }
 
+  viewMilestoneInBrowser(id: number, event: Event) {
+    if (id) {
+      window.open('https://github.com/'.concat(this.getRepoURL()).concat('/milestone/').concat(String(id)));
+    } else {
+      this.errorHandlingService.handleError(new Error(ErrorMessageService.unableToOpenMilestoneInBrowserMessage()));
+    }
+    event.stopPropagation();
+  }
+
   reset(): void {
     this.logger.info(`GithubService: Resetting issues cache`);
     this.issuesCacheManager.clear();

diff --git a/src/app/shared/issue-pr-card/issue-pr-card-header/issue-pr-card-header.component.css b/src/app/shared/issue-pr-card/issue-pr-card-header/issue-pr-card-header.component.css
@@ -20,6 +20,7 @@ span.octicon {
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 :host ::ng-deep .mat-card-header-text {

diff --git a/src/app/shared/issue-pr-card/issue-pr-card-milestone/issue-pr-card-milestone.component.css b/src/app/shared/issue-pr-card/issue-pr-card-milestone/issue-pr-card-milestone.component.css
@@ -9,4 +9,11 @@ span.octicon-milestone {
   margin-bottom: 0px;
   margin-top: 0px;
   align-items: center;
+  transition: box-shadow 0.3s ease-in-out;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.milestone:hover {
+  box-shadow: 2px 2px rgba(160, 160, 160, 0.2);
 }
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
@@ -1,14 +1,15 @@
 <mat-card class="card" [ngClass]="getIssueOpenOrCloseColorCSSClass()">
-  <a class="no-underline link-grey-dark" (click)="viewIssueInBrowser($event)">
+  <a class="no-underline link-grey-dark">
     <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"
-          [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>
+      <app-issue-pr-card-header [issue]="issue" (click)="viewIssueInBrowser($event)"></app-issue-pr-card-header>
     </span>
   </a>
+  <mat-card-content>
+    <app-issue-pr-card-milestone
+      [milestone]="issue.milestone"
+      [repoHasMilestones]="!milestoneService.hasNoMilestones"
+      (click)="viewMilestoneInBrowser($event)"
+    ></app-issue-pr-card-milestone>
+    <app-issue-pr-card-labels [labels]="issue.githubLabels" [labelSet]="filter?.hiddenLabels"></app-issue-pr-card-labels>
+  </mat-card-content>
 </mat-card>
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
@@ -28,6 +28,12 @@ export class IssuePrCardComponent {
     this.githubService.viewIssueInBrowser(this.issue.id, event);
   }
 
+  /** Opens milestone in new window */
+  viewMilestoneInBrowser(event: Event) {
+    this.logger.info(`CardViewComponent: Opening Milestone ${this.issue.milestone.number} on Github`);
+    this.githubService.viewMilestoneInBrowser(this.issue.milestone.number, event);
+  }
+
   /** Returns CSS class for border color */
   getIssueOpenOrCloseColorCSSClass() {
     if (this.issue.state === 'OPEN') {