From acc3ec6fb26ce2c1dabdd07f7e4848d0eee6e143 Mon Sep 17 00:00:00 2001
From: Regis <boudinot.regis@yahoo.com>
Date: Thu, 12 Jan 2017 11:46:19 -0500
Subject: fixed issue - description in function (check diff)

---
 .../javascripts/vue_pipelines_index/stage.js.es6   | 26 +++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
index 74a79dcedae..96a2b099843 100644
--- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
@@ -12,7 +12,27 @@
     },
     props: ['stage', 'svgs', 'match'],
     methods: {
-      fetchBuilds() {
+      fetchBuilds(e) {
+        /**
+          This is a very interesting UI problem
+          Essentially we have to clear builds on blur no matter what
+          This was preventing turbolinks to make the request to the link clicked
+          Vue will always look at the VDOM element which is the button
+
+          It has a special attribute 'aria-describedby' which will not exist:
+            - once the build link is clicked
+            - when someone clicks outside of the dropdown
+
+          In order for this to work:
+            - here we setTimeout to give enough time to initialize the request
+            - but short enough that a subsequent click will reset that state
+        */
+        if (!e.currentTarget.attributes['aria-describedby']) {
+          setTimeout(() => {
+            this.request = false;
+          }, 100);
+          return null;
+        }
         if (this.request) return this.clearBuilds();
 
         return this.$http.get(this.stage.dropdown_path)
@@ -56,8 +76,8 @@
     template: `
       <div>
         <button
-          @click='fetchBuilds'
-          @blur='fetchBuilds'
+          @click='fetchBuilds($event)'
+          @blur='fetchBuilds($event)'
           :class="triggerButtonClass"
           :title='stage.title'
           data-placement="top"
-- 
cgit v1.2.1


From 18774f65a19bdd1be08c3d36916bbca36dfcd2ae Mon Sep 17 00:00:00 2001
From: Regis <boudinot.regis@yahoo.com>
Date: Thu, 12 Jan 2017 17:06:09 -0500
Subject: make tests pass - change a bit of logic

---
 app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
index 96a2b099843..f0291ee7826 100644
--- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
@@ -19,7 +19,8 @@
           This was preventing turbolinks to make the request to the link clicked
           Vue will always look at the VDOM element which is the button
 
-          It has a special attribute 'aria-describedby' which will not exist:
+          It has a special attribute 'aria-expanded':
+            - which will let us know if it is expanded
             - once the build link is clicked
             - when someone clicks outside of the dropdown
 
@@ -27,12 +28,13 @@
             - here we setTimeout to give enough time to initialize the request
             - but short enough that a subsequent click will reset that state
         */
-        if (!e.currentTarget.attributes['aria-describedby']) {
-          setTimeout(() => {
-            this.request = false;
-          }, 100);
-          return null;
+
+        const areaExpanded = e.currentTarget.attributes['aria-expanded'];
+
+        if (areaExpanded && areaExpanded.textContent) {
+          return setTimeout(() => (this.request = false), 100);
         }
+
         if (this.request) return this.clearBuilds();
 
         return this.$http.get(this.stage.dropdown_path)
-- 
cgit v1.2.1


From f1ca332bd39bca0a1d9ad40e49d282a5222b87b6 Mon Sep 17 00:00:00 2001
From: Regis <boudinot.regis@yahoo.com>
Date: Sun, 15 Jan 2017 10:07:51 -0500
Subject: fix UI behaviour

---
 app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
index f0291ee7826..b6a20dd5994 100644
--- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
@@ -31,7 +31,7 @@
 
         const areaExpanded = e.currentTarget.attributes['aria-expanded'];
 
-        if (areaExpanded && areaExpanded.textContent) {
+        if (areaExpanded && (areaExpanded.textContent === 'true')) {
           return setTimeout(() => (this.request = false), 100);
         }
 
-- 
cgit v1.2.1


From 258b090fb9719db245be606ca93fd5331dc7e8d1 Mon Sep 17 00:00:00 2001
From: Regis <boudinot.regis@yahoo.com>
Date: Sun, 15 Jan 2017 11:21:12 -0500
Subject: fix UI without Promise or timeOut/interval

---
 app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
index b6a20dd5994..ddfd00df42e 100644
--- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
@@ -1,5 +1,5 @@
 /* global Vue, Flash, gl */
-/* eslint-disable no-param-reassign */
+/* eslint-disable no-param-reassign, no-bitwise */
 
 ((gl) => {
   gl.VueStage = Vue.extend({
@@ -32,7 +32,14 @@
         const areaExpanded = e.currentTarget.attributes['aria-expanded'];
 
         if (areaExpanded && (areaExpanded.textContent === 'true')) {
-          return setTimeout(() => (this.request = false), 100);
+          const related = e.relatedTarget;
+          if (!related) {
+            return this.clearBuilds();
+          } else if (!related.parentElement) {
+            return this.clearBuilds();
+          } else if (~related.parentElement.parentElement.className.indexOf('js-builds-dropdown-container')) {
+            return null;
+          }
         }
 
         if (this.request) return this.clearBuilds();
-- 
cgit v1.2.1


From a5d8a88c0959aa2c75059690d8a26e2dce570dc2 Mon Sep 17 00:00:00 2001
From: Regis <boudinot.regis@yahoo.com>
Date: Sun, 15 Jan 2017 11:33:05 -0500
Subject: fix clicking url bar, browser UI, dev tools collapsing the mini_graph

---
 app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
index ddfd00df42e..04f5d0cd3fe 100644
--- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
@@ -33,8 +33,10 @@
 
         if (areaExpanded && (areaExpanded.textContent === 'true')) {
           const related = e.relatedTarget;
-          if (!related) {
+          if (!related && e.sourceCapabilities) {
             return this.clearBuilds();
+          } else if (!related && !e.sourceCapabilities) {
+            return null;
           } else if (!related.parentElement) {
             return this.clearBuilds();
           } else if (~related.parentElement.parentElement.className.indexOf('js-builds-dropdown-container')) {
-- 
cgit v1.2.1


From eeadce82f1002ca9e4807b1ce180fcfb30b7b999 Mon Sep 17 00:00:00 2001
From: Regis <boudinot.regis@yahoo.com>
Date: Sun, 15 Jan 2017 11:54:28 -0500
Subject: update commented documentation to reflect new changes

---
 app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
index 04f5d0cd3fe..951aefdea96 100644
--- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
@@ -25,8 +25,9 @@
             - when someone clicks outside of the dropdown
 
           In order for this to work:
-            - here we setTimeout to give enough time to initialize the request
-            - but short enough that a subsequent click will reset that state
+            - we check that the event has the correct aria attribute
+            - we make sure that if it does, we check where the event is on the DOM
+            - we also check to see if the event is on the DOM or the native browser client
         */
 
         const areaExpanded = e.currentTarget.attributes['aria-expanded'];
-- 
cgit v1.2.1


From f9f274325010198f4b50c9ba6ca55a7da06cd6ff Mon Sep 17 00:00:00 2001
From: Regis <boudinot.regis@yahoo.com>
Date: Sun, 15 Jan 2017 13:24:32 -0500
Subject: works in browsers without sourceCapabilities API

---
 app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
index 951aefdea96..a25c8d72e3f 100644
--- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
@@ -36,7 +36,10 @@
           const related = e.relatedTarget;
           if (!related && e.sourceCapabilities) {
             return this.clearBuilds();
-          } else if (!related && !e.sourceCapabilities) {
+          } else if (!related && e.sourceCapabilities === null) {
+            return null;
+          } else if (!related && e.sourceCapabilities === undefined) {
+            this.request = false;
             return null;
           } else if (!related.parentElement) {
             return this.clearBuilds();
-- 
cgit v1.2.1


From e99f4534f105e3595195abb6fb86a30602bf7e8b Mon Sep 17 00:00:00 2001
From: Regis <boudinot.regis@yahoo.com>
Date: Sun, 15 Jan 2017 15:39:36 -0500
Subject: phil said this is good - no need to dynamically update since this is
 a static page for now

---
 .../javascripts/vue_pipelines_index/stage.js.es6   | 56 +++-------------------
 1 file changed, 7 insertions(+), 49 deletions(-)

diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
index a25c8d72e3f..f075a995846 100644
--- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
@@ -5,72 +5,31 @@
   gl.VueStage = Vue.extend({
     data() {
       return {
-        request: false,
+        count: 0,
         builds: '',
         spinner: '<span class="fa fa-spinner fa-spin"></span>',
       };
     },
     props: ['stage', 'svgs', 'match'],
     methods: {
-      fetchBuilds(e) {
-        /**
-          This is a very interesting UI problem
-          Essentially we have to clear builds on blur no matter what
-          This was preventing turbolinks to make the request to the link clicked
-          Vue will always look at the VDOM element which is the button
-
-          It has a special attribute 'aria-expanded':
-            - which will let us know if it is expanded
-            - once the build link is clicked
-            - when someone clicks outside of the dropdown
-
-          In order for this to work:
-            - we check that the event has the correct aria attribute
-            - we make sure that if it does, we check where the event is on the DOM
-            - we also check to see if the event is on the DOM or the native browser client
-        */
-
-        const areaExpanded = e.currentTarget.attributes['aria-expanded'];
-
-        if (areaExpanded && (areaExpanded.textContent === 'true')) {
-          const related = e.relatedTarget;
-          if (!related && e.sourceCapabilities) {
-            return this.clearBuilds();
-          } else if (!related && e.sourceCapabilities === null) {
-            return null;
-          } else if (!related && e.sourceCapabilities === undefined) {
-            this.request = false;
-            return null;
-          } else if (!related.parentElement) {
-            return this.clearBuilds();
-          } else if (~related.parentElement.parentElement.className.indexOf('js-builds-dropdown-container')) {
-            return null;
-          }
-        }
-
-        if (this.request) return this.clearBuilds();
-
+      fetchBuilds() {
+        if (this.count > 0) return null;
         return this.$http.get(this.stage.dropdown_path)
           .then((response) => {
-            this.request = true;
+            this.count += 1;
             this.builds = JSON.parse(response.body).html;
           }, () => {
             const flash = new Flash('Something went wrong on our end.');
-            this.request = false;
             return flash;
           });
       },
-      clearBuilds() {
-        this.builds = '';
-        this.request = false;
-      },
     },
     computed: {
       buildsOrSpinner() {
-        return this.request ? this.builds : this.spinner;
+        return this.builds ? this.builds : this.spinner;
       },
       dropdownClass() {
-        if (this.request) return 'js-builds-dropdown-container';
+        if (this.builds) return 'js-builds-dropdown-container';
         return 'js-builds-dropdown-loading builds-dropdown-loading';
       },
       buildStatus() {
@@ -91,8 +50,7 @@
     template: `
       <div>
         <button
-          @click='fetchBuilds($event)'
-          @blur='fetchBuilds($event)'
+          @click='fetchBuilds'
           :class="triggerButtonClass"
           :title='stage.title'
           data-placement="top"
-- 
cgit v1.2.1