From 617955e084866aec1fd82500ca9fcf0848df6f2c Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 9 Apr 2019 01:37:07 +0100
Subject: [PATCH] Add breadcrumb

---
 src/components/AppBreadcrumb.vue | 67 ++++++++++++++++++++++++++++++++
 src/components/TitleBlock.vue    | 20 +++++++++-
 src/views/Applications.vue       |  4 --
 src/views/Environment.vue        | 23 +----------
 src/views/Environments.vue       | 19 +--------
 5 files changed, 88 insertions(+), 45 deletions(-)
 create mode 100644 src/components/AppBreadcrumb.vue

diff --git a/src/components/AppBreadcrumb.vue b/src/components/AppBreadcrumb.vue
new file mode 100644
index 0000000..f2ac09b
--- /dev/null
+++ b/src/components/AppBreadcrumb.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <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>
+        </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>
+        </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="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>
+</template>
+
+<script>
+export default {
+  props: {
+    application: Object,
+    environment: {
+      type: Object,
+      required: false
+    }
+  },
+
+  computed: {
+    selectedApplication: function () {
+      if (!this.application) {
+        return 'All'
+      }
+
+      return this.application.name
+    },
+
+    selectedEnvironment: function () {
+      if (!this.environment) {
+        return null
+      }
+
+      return this.environment.name
+    },
+
+    selectedOrganisation: function () {
+      if (!this.application) {
+        return 'All'
+      }
+
+      return 'Rebuilding Acquia'
+    }
+  }
+}
+</script>
diff --git a/src/components/TitleBlock.vue b/src/components/TitleBlock.vue
index b370a19..f325479 100644
--- a/src/components/TitleBlock.vue
+++ b/src/components/TitleBlock.vue
@@ -2,10 +2,28 @@
   <div class="border-b-3 border-grey-300">
     <div class="bg-white px-4 lg:px-6 py-5 border-t border-grey-200 flex justify-between items-center">
       <div class="w-full md:w-auto flex flex-col">
-        <slot name="left"></slot>
+        <app-breadcrumb :application="application" :environment="environment"></app-breadcrumb>
       </div>
 
       <slot name="right"></slot>
     </div>
   </div>
 </template>
+
+<script>
+import AppBreadcrumb from '@/components/AppBreadcrumb'
+
+export default {
+  props: {
+    application: Object,
+    environment: {
+      type: Object,
+      required: false
+    }
+  },
+
+  components: {
+    AppBreadcrumb
+  }
+}
+</script>
diff --git a/src/views/Applications.vue b/src/views/Applications.vue
index e336198..19b0e98 100644
--- a/src/views/Applications.vue
+++ b/src/views/Applications.vue
@@ -4,10 +4,6 @@
       <navbar></navbar>
 
       <title-block>
-        <template slot="left">
-          <div class="text-2xl font-hairline mr-2">Applications</div>
-        </template>
-
         <template slot="right">
           <header-buttons :links="[
             { title: 'Add Application', icon: 'alpha__new-app', disabled: false },
diff --git a/src/views/Environment.vue b/src/views/Environment.vue
index 8066cd2..666df64 100644
--- a/src/views/Environment.vue
+++ b/src/views/Environment.vue
@@ -3,28 +3,7 @@
     <div class="fixed top-0 w-full z-30">
       <navbar></navbar>
 
-      <title-block>
-        <template slot="left">
-          <div class="text-xs mb-3">
-            <ol class="list-reset flex">
-              <li class="flex items-center pr-1">
-                <router-link to="/" class="text-blue-300 no-underline hover:underline mr-1">Applications</router-link>
-                <svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
-              </li>
-              <li class="flex items-center pr-1">
-                <router-link :to="{ name: 'environments' }" class="text-blue-300 no-underline hover:underline mr-1">{{ application.name }}</router-link>
-                <svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
-              </li>
-              <li>{{ environment.name }}</li>
-            </ol>
-          </div>
-
-          <button class="flex flex-1 items-center justify-between md:justify-start">
-            <div class="text-2xl font-hairline">{{ application.name }} : {{ environment.name }}</div>
-            <svg class="h-6 w-6 text-blue-300 fill-current ml-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__down-arrow"></use></svg>
-          </button>
-        </template>
-
+      <title-block :application="application" :environment="environment">
         <template slot="right">
           <header-buttons :links="[
             !isProduction ? { title: 'Install Drupal', icon: 'actions__upload', disabled: false } : {},
diff --git a/src/views/Environments.vue b/src/views/Environments.vue
index 54a1dfa..279aea8 100644
--- a/src/views/Environments.vue
+++ b/src/views/Environments.vue
@@ -3,24 +3,7 @@
     <div class="fixed top-0 w-full z-30">
       <navbar></navbar>
 
-      <title-block>
-        <template slot="left">
-          <div class="text-xs mb-3">
-            <ol class="list-reset flex">
-              <li class="flex items-center pr-1">
-                <router-link to="/" class="text-blue-300 no-underline hover:underline mr-1">Applications</router-link>
-                <svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
-              </li>
-              <li>{{ application.name }}</li>
-            </ol>
-          </div>
-
-          <button class="flex flex-1 items-center justify-between md:justify-start">
-            <div class="text-2xl font-hairline mr-2">{{ application.name }}</div>
-            <svg class="h-6 w-6 text-blue-300 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__down-arrow"></use></svg>
-          </button>
-        </template>
-
+      <title-block :application="application">
         <template slot="right">
           <div class="flex items-center">
             <div class="hidden md:block">