From ccdd6bed38ca7017e78fd3c68932bd706a18e312 Mon Sep 17 00:00:00 2001
From: Sky Blaise <69448615+SkyBlaise99@users.noreply.github.com>
Date: Mon, 11 Jul 2022 11:01:13 +0800
Subject: [PATCH] [#1726] Use respective icons for known repository types
 (#1800)

Currently, 'database' is used as the generic icon for all repository
types.

As we allow more repository types, it will be clearer to the user if
the icon reflects the repository used. Currently we are supporting
'GitHub', 'GitLab', and 'BitBucket'. 'database' icon is kept as the
default icon for repositories that does not belong to any of the above
mentioned.

Let's use the respective icons for known repository types.
---
 frontend/src/components/v-summary-charts.vue  | 19 +++++++++++++++++--
 frontend/src/utils/load-font-awesome-icons.js |  7 ++++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/v-summary-charts.vue b/frontend/src/components/v-summary-charts.vue
index 3d987b5b05..772c173a07 100644
--- a/frontend/src/components/v-summary-charts.vue
+++ b/frontend/src/components/v-summary-charts.vue
@@ -41,7 +41,7 @@
         v-bind:href="getRepoLink(repo[0])", target="_blank"
       )
         .tooltip
-          font-awesome-icon.icon-button(:icon="['fas', 'database']")
+          font-awesome-icon.icon-button(:icon="getRepoIcon(repo[0])")
           span.tooltip-text Click to view group's repo
       a(
         v-else-if="filterGroupSelection === 'groupByAuthors'",
@@ -104,7 +104,7 @@
           v-bind:href="getRepoLink(repo[j])", target="_blank"
         )
           .tooltip
-            font-awesome-icon.icon-button(:icon="['fas', 'database']")
+            font-awesome-icon.icon-button(:icon="getRepoIcon(repo[0])")
             span.tooltip-text Click to view repo
         a(
           v-if="filterGroupSelection !== 'groupByAuthors'",
@@ -316,6 +316,21 @@ export default {
       return repo.location;
     },
 
+    getRepoIcon(repo) {
+      const domainName = window.REPOS[repo.repoId].location.domainName;
+
+      switch (domainName) {
+      case 'github':
+        return ['fab', 'github'];
+      case 'gitlab':
+        return ['fab', 'gitlab'];
+      case 'bitbucket':
+        return ['fab', 'bitbucket'];
+      default:
+        return ['fas', 'database'];
+      }
+    },
+
     // triggering opening of tabs //
     openTabAuthorship(user, repo, index, isMerged) {
       const {
diff --git a/frontend/src/utils/load-font-awesome-icons.js b/frontend/src/utils/load-font-awesome-icons.js
index b8538480e9..88caf4925c 100644
--- a/frontend/src/utils/load-font-awesome-icons.js
+++ b/frontend/src/utils/load-font-awesome-icons.js
@@ -7,6 +7,10 @@ import {
   faDatabase,
 } from '@fortawesome/free-solid-svg-icons';
 
+import {
+  faGithub, faGitlab, faBitbucket,
+} from '@fortawesome/free-brands-svg-icons';
+
 // app
 library.add(faExclamation, faSpinner, faCode, faListUl);
 
@@ -17,7 +21,8 @@ library.add(faCaretRight);
 library.add(faExclamation);
 
 // v-summary-charts
-library.add(faChevronUp, faChevronDown, faDatabase, faUser, faCode, faListUl, faCircle);
+library.add(faChevronUp, faChevronDown, faDatabase, faUser, faCode, faListUl, faCircle, faGithub, faGitlab,
+    faBitbucket);
 
 // v-zoom
 library.add(faTags, faEllipsisH);