phil said this is good - no need to dynamically update since this is a static page for nowpipeline_index_mini_graph_fix

1 files 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"