summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--app/assets/javascripts/vue_pipelines_index/stage.js.es626
1 files 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"