diff options
| -rw-r--r-- | app/assets/javascripts/vue_pipelines_index/stage.js.es6 | 56 |
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" |