commit c5c2ae99f6e9b91526ea5896b3029ab8a7480c6f
author Sukanya Pandey <sukapan1@in.ibm.com> Wed Dec 09 16:14:19 2020 +0530
committer Derick Montague <derick.montague@ibm.com> Tue Dec 15 23:16:56 2020 +0000
tree 5992782ede6c5f457f15a7037c5f71902588845a
parent f6df801b384118b946bb3b7b3248832ec70cfd0a

Show asset name in the app header

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: If5394604d6c91b3604eaadb33178376fe6da672c

src/components/AppHeader/AppHeader.vue

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 68de7d9..5b36cf8 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -26,13 +26,21 @@
           />
         </b-button>
         <b-navbar-nav>
-          <b-navbar-brand to="/" data-test-id="appHeader-container-overview">
+          <b-navbar-brand
+            class="mr-0"
+            to="/"
+            data-test-id="appHeader-container-overview"
+          >
             <img
               class="header-logo"
               src="@/assets/images/logo-header.svg"
               :alt="altLogo"
             />
           </b-navbar-brand>
+          <div v-if="assetTag" class="asset-tag">
+            <span class="pr-2">|</span>
+            <span>{{ assetTag }}</span>
+          </div>
         </b-navbar-nav>
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto helper-menu">
@@ -120,6 +128,9 @@
     };
   },
   computed: {
+    assetTag() {
+      return this.$store.getters['global/assetTag'];
+    },
     isAuthorized() {
       return this.$store.getters['global/isAuthorized'];
     },
@@ -280,6 +291,9 @@
     .nav-link {
       transition: $focus-transition;
     }
+    .asset-tag {
+      color: theme-color-level(light, 3);
+    }
   }
 
   .nav-trigger {