Add link to GitHub profile from header card

Users have to manually type the URL with the assignee's GitHub
username to check their profiles.

This makes it tedious for users to look at an assignee's GitHub
profile to track issues and PRs contributed or other stuff.

Adding a direct link to the assignee's GitHub profile helps users
check an assignee's profile more conveniently.

Author: nicolaskjh

src/app/issues-viewer/card-view/card-view.component.css

@@ -162,6 +162,11 @@ div.column-header .mat-card-header {
   text-overflow: ellipsis;
 }
 
+.assignee-name.clickable:hover {
+  color: #1a73e8;
+  cursor: pointer;
+}
+
 :host ::ng-deep .pagination-hide-arrow .mat-paginator-navigation-previous {
   display: none !important;
 }

src/app/issues-viewer/card-view/card-view.component.html

@@ -42,7 +42,13 @@
         ></div>
         <mat-card-title>
           <div class="assignee-container">
-            <div class="assignee-name" [matTooltip]="getAssigneeTooltip(assignee)" matTooltipPosition="above">
+            <div
+              class="assignee-name"
+              (click)="goToGithubProfile(assignee.login)"
+              [ngClass]="{ clickable: assignee.login !== 'Unassigned' }"
+              [matTooltip]="getAssigneeTooltip(assignee)"
+              matTooltipPosition="above"
+            >
               {{ assignee.login }}
             </div>
             <div class="row-count count-margins" [matTooltip]="getIssueTooltip()" matTooltipPosition="above">

src/app/issues-viewer/card-view/card-view.component.ts

@@ -149,4 +149,11 @@ export class CardViewComponent implements OnInit, AfterViewInit, OnDestroy, Filt
   getAssigneeTooltip(assignee: any): string {
     return assignee.login;
   }
+
+  goToGithubProfile(username: string): void {
+    if (username && username !== 'Unassigned') {
+      const url = `https://github.com/${username}`;
+      window.open(url, '_blank'); // Opens in new tab
+    }
+  }
 }

src/app/issues-viewer/hidden-groups/hidden-groups.component.css

@@ -41,6 +41,14 @@
   word-break: break-word;
 }
 
+.assignee-name {
+  cursor: pointer;
+}
+
+.assignee-name:hover {
+  color: #1a73e8;
+}
+
 .mat-card-avatar {
   height: 30px;
   width: 30px;

src/app/issues-viewer/hidden-groups/hidden-groups.component.html

@@ -31,7 +31,11 @@
           'background-size': '30px'
         }"
       ></div>
-      <mat-card-title>{{ assignee.login }}</mat-card-title>
+      <mat-card-title>
+        <div class="assignee-name" (click)="goToGithubProfile(assignee.login)">
+          {{ assignee.login }}
+        </div>
+      </mat-card-title>
     </mar-card-header>
   </mat-card>
 </ng-template>

src/app/issues-viewer/hidden-groups/hidden-groups.component.ts

@@ -35,4 +35,11 @@ export class HiddenGroupsComponent implements AfterViewInit {
         return this.defaultCardTemplate;
     }
   }
+
+  goToGithubProfile(username: string): void {
+    if (username) {
+      const url = `https://github.com/${username}`;
+      window.open(url, '_blank'); // Opens in new tab
+    }
+  }
 }