From d47d0ae2e6a062dc4483613bd6cb52e144232801 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 9 Apr 2019 02:07:46 +0100
Subject: [PATCH] Add router links if values are set

---
 src/components/AppBreadcrumb.vue | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/AppBreadcrumb.vue b/src/components/AppBreadcrumb.vue
index f2ac09b..ec11260 100644
--- a/src/components/AppBreadcrumb.vue
+++ b/src/components/AppBreadcrumb.vue
@@ -3,26 +3,27 @@
     <ul class="flex -ml-3">
       <li class="flex items-center ml-3">
         <div class="flex flex-col-reverse">
-          <span class="uppercase text-sm">Organisation</span>
-          <span class="font-bold block mb-1" v-text="selectedOrganisation"></span>
+          <span class="text-grey-700 uppercase text-sm">Organisation</span>
+          <span v-if="!selectedOrganisation" class="font-bold block mb-1">All</span>
+          <router-link v-else :to="{name: 'applications'}" class="font-bold block mb-1 hover:text-blue-400" v-text="selectedOrganisation"></router-link>
         </div>
         <svg class="ml-3" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M5.94 19.73L15.6 10 5.94.27A.88.88 0 0 0 5.3 0a.89.89 0 0 0-.65 1.51L13.06 10l-8.41 8.49a.89.89 0 0 0 1.29 1.24z"/></svg>
       </li>
 
       <li class="flex items-center ml-3">
         <div class="flex flex-col-reverse">
-          <span class="uppercase text-sm">Application</span>
-          <span class="font-bold block mb-1" v-text="selectedApplication"></span>
+          <span class="text-grey-700 uppercase text-sm">Application</span>
+          <span v-if="!selectedOrganisation" class="font-bold block mb-1">All</span>
+          <router-link v-else :to="{name: 'environments'}" class="font-bold block mb-1 hover:text-blue-400" v-text="selectedApplication"></router-link>
         </div>
         <svg class="ml-3" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M5.94 19.73L15.6 10 5.94.27A.88.88 0 0 0 5.3 0a.89.89 0 0 0-.65 1.51L13.06 10l-8.41 8.49a.89.89 0 0 0 1.29 1.24z"/></svg>
       </li>
 
       <li class="flex items-center ml-3">
         <div class="flex flex-col-reverse">
-          <span class="uppercase text-sm">Environment</span>
+          <span class="text-grey-700 uppercase text-sm">Environment</span>
           <span class="font-bold block mb-1">{{ selectedEnvironment || '--' }}</span>
         </div>
-        <svg class="ml-3" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M19 4.5l-9 11-9-11h18z"/></svg>
       </li>
     </ul>
   </div>
@@ -48,16 +49,20 @@ export default {
     },
 
     selectedEnvironment: function () {
-      if (!this.environment) {
+      if (!this.application) {
         return null
       }
 
+      if (!this.environment) {
+        return 'All'
+      }
+
       return this.environment.name
     },
 
     selectedOrganisation: function () {
       if (!this.application) {
-        return 'All'
+        return null
       }
 
       return 'Rebuilding Acquia'