From 44a222adea18eb4b543d696c961e69196a4928f5 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 20 Apr 2018 15:38:34 +0100
Subject: Use axios request to interact with API instead of UJS

---
 .../components/graph/action_component.vue          |  2 +-
 .../components/graph/dropdown_action_component.vue | 53 ----------------------
 .../components/graph/dropdown_job_component.vue    | 29 ++++++------
 .../pipelines/components/graph/job_component.vue   | 18 +-------
 4 files changed, 16 insertions(+), 86 deletions(-)
 delete mode 100644 app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue

(limited to 'app/assets/javascripts/pipelines/components/graph')

diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index e99d949801f..558bf812fef 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -62,7 +62,7 @@ export default {
     @click="onClickAction"
     v-tooltip
     :title="tooltipText"
-    class="btn btn-blank btn-transparent ci-action-icon-container ci-action-icon-wrapper"
+    class="js-ci-action btn btn-blank btn-transparent ci-action-icon-container ci-action-icon-wrapper"
     :class="cssClass"
     data-container="body"
     :disabled="isDisabled"
diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue
deleted file mode 100644
index 7c4fd65e36f..00000000000
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-  import icon from '../../../vue_shared/components/icon.vue';
-  import tooltip from '../../../vue_shared/directives/tooltip';
-
-  /**
-   * Renders either a cancel, retry or play icon pointing to the given path.
-   * TODO: Remove UJS from here and use an async request instead.
-   */
-  export default {
-    components: {
-      icon,
-    },
-
-    directives: {
-      tooltip,
-    },
-    props: {
-      tooltipText: {
-        type: String,
-        required: true,
-      },
-
-      link: {
-        type: String,
-        required: true,
-      },
-
-      actionMethod: {
-        type: String,
-        required: true,
-      },
-
-      actionIcon: {
-        type: String,
-        required: true,
-      },
-    },
-  };
-</script>
-<template>
-  <a
-    v-tooltip
-    :data-method="actionMethod"
-    :title="tooltipText"
-    :href="link"
-    rel="nofollow"
-    class="ci-action-icon-wrapper js-ci-status-icon"
-    data-container="body"
-    aria-label="Job's action"
-  >
-    <icon :name="actionIcon" />
-  </a>
-</template>
diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
index be213c2ee78..30e40259146 100644
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
@@ -1,7 +1,7 @@
 <script>
   import $ from 'jquery';
-  import jobNameComponent from './job_name_component.vue';
-  import jobComponent from './job_component.vue';
+  import JobNameComponent from './job_name_component.vue';
+  import JobComponent from './job_component.vue';
   import tooltip from '../../../vue_shared/directives/tooltip';
 
   /**
@@ -33,8 +33,8 @@
     },
 
     components: {
-      jobComponent,
-      jobNameComponent,
+      JobComponent,
+      JobNameComponent,
     },
 
     props: {
@@ -56,17 +56,17 @@
 
     methods: {
       /**
-     * When the user right clicks or cmd/ctrl + click in the job name
-     * the dropdown should not be closed and the link should open in another tab,
-     * so we stop propagation of the click event inside the dropdown.
-     *
-     * Since this component is rendered multiple times per page we need to guarantee we only
-     * target the click event of this component.
-     */
+       * When the user right clicks or cmd/ctrl + click in the job name or the action icon
+       * the dropdown should not be closed so we stop propagation of the click event inside the dropdown.
+       *
+       * Since this component is rendered multiple times per page we need to guarantee we only
+       * target the click event of this component.
+       */
       stopDropdownClickPropagation() {
-        $(this.$el
-          .querySelectorAll('.js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item'))
-          .on('click', (e) => {
+        $(
+          '.js-grouped-pipeline-dropdown button, .js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item',
+          this.$el,
+        ).on('click', (e) => {
             e.stopPropagation();
           });
       },
@@ -101,7 +101,6 @@
             :key="i">
             <job-component
               :job="item"
-              :is-dropdown="true"
               css-class-job-name="mini-pipeline-graph-dropdown-item"
             />
           </li>
diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue
index c6e5ae6df41..29680235a9e 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue
@@ -1,6 +1,5 @@
 <script>
 import ActionComponent from './action_component.vue';
-import DropdownActionComponent from './dropdown_action_component.vue';
 import JobNameComponent from './job_name_component.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
 
@@ -32,7 +31,6 @@ import tooltip from '../../../vue_shared/directives/tooltip';
 export default {
   components: {
     ActionComponent,
-    DropdownActionComponent,
     JobNameComponent,
   },
 
@@ -51,12 +49,6 @@ export default {
       default: '',
     },
 
-    isDropdown: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
     actionDisabled: {
       type: String,
       required: false,
@@ -134,19 +126,11 @@ export default {
     </div>
 
     <action-component
-      v-if="hasAction && !isDropdown"
+      v-if="hasAction"
       :tooltip-text="status.action.title"
       :link="status.action.path"
       :action-icon="status.action.icon"
       :button-disabled="actionDisabled"
     />
-
-    <dropdown-action-component
-      v-if="hasAction && isDropdown"
-      :tooltip-text="status.action.title"
-      :link="status.action.path"
-      :action-icon="status.action.icon"
-      :action-method="status.action.method"
-    />
   </div>
 </template>
-- 
cgit v1.2.1


From a527c9b915ac7c690c03f8b2cd16edf1777f1f32 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 20 Apr 2018 15:43:58 +0100
Subject: Fix disabled state while making a request

Provide props down instead of an event
---
 .../components/graph/action_component.vue          |  25 +++-
 .../components/graph/dropdown_job_component.vue    | 135 +++++++++++----------
 .../pipelines/components/graph/graph_component.vue |   7 +-
 .../pipelines/components/graph/job_component.vue   |  10 +-
 .../components/graph/stage_column_component.vue    |   7 +-
 5 files changed, 100 insertions(+), 84 deletions(-)

(limited to 'app/assets/javascripts/pipelines/components/graph')

diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index 558bf812fef..29ee73a2a6f 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -32,26 +32,38 @@ export default {
       required: true,
     },
 
-    buttonDisabled: {
+    requestFinishedFor: {
       type: String,
       required: false,
-      default: null,
+      default: '',
     },
   },
+  data() {
+    return {
+      isDisabled: false,
+      linkRequested: '',
+    };
+  },
+
   computed: {
     cssClass() {
       const actionIconDash = dasherize(this.actionIcon);
       return `${actionIconDash} js-icon-${actionIconDash}`;
     },
-    isDisabled() {
-      return this.buttonDisabled === this.link;
+  },
+  watch: {
+    requestFinishedFor() {
+      if (this.requestFinishedFor === this.linkRequested) {
+        this.isDisabled = false;
+      }
     },
   },
-
   methods: {
     onClickAction() {
       $(this.$el).tooltip('hide');
       eventHub.$emit('graphAction', this.link);
+      this.linkRequested = this.link;
+      this.isDisabled = true;
     },
   },
 };
@@ -62,7 +74,8 @@ export default {
     @click="onClickAction"
     v-tooltip
     :title="tooltipText"
-    class="js-ci-action btn btn-blank btn-transparent ci-action-icon-container ci-action-icon-wrapper"
+    class="js-ci-action btn btn-blank
+btn-transparent ci-action-icon-container ci-action-icon-wrapper"
     :class="cssClass"
     data-container="body"
     :disabled="isDisabled"
diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
index 30e40259146..9adc8881831 100644
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
@@ -1,77 +1,83 @@
 <script>
-  import $ from 'jquery';
-  import JobNameComponent from './job_name_component.vue';
-  import JobComponent from './job_component.vue';
-  import tooltip from '../../../vue_shared/directives/tooltip';
+import $ from 'jquery';
+import JobNameComponent from './job_name_component.vue';
+import JobComponent from './job_component.vue';
+import tooltip from '../../../vue_shared/directives/tooltip';
 
-  /**
-   * Renders the dropdown for the pipeline graph.
-   *
-   * The following object should be provided as `job`:
-   *
-   * {
-   *   "id": 4256,
-   *   "name": "test",
-   *   "status": {
-   *     "icon": "icon_status_success",
-   *     "text": "passed",
-   *     "label": "passed",
-   *     "group": "success",
-   *     "details_path": "/root/ci-mock/builds/4256",
-   *     "action": {
-   *       "icon": "retry",
-   *       "title": "Retry",
-   *       "path": "/root/ci-mock/builds/4256/retry",
-   *       "method": "post"
-   *     }
-   *   }
-   * }
-   */
-  export default {
-    directives: {
-      tooltip,
-    },
+/**
+ * Renders the dropdown for the pipeline graph.
+ *
+ * The following object should be provided as `job`:
+ *
+ * {
+ *   "id": 4256,
+ *   "name": "test",
+ *   "status": {
+ *     "icon": "icon_status_success",
+ *     "text": "passed",
+ *     "label": "passed",
+ *     "group": "success",
+ *     "details_path": "/root/ci-mock/builds/4256",
+ *     "action": {
+ *       "icon": "retry",
+ *       "title": "Retry",
+ *       "path": "/root/ci-mock/builds/4256/retry",
+ *       "method": "post"
+ *     }
+ *   }
+ * }
+ */
+export default {
+  directives: {
+    tooltip,
+  },
 
-    components: {
-      JobComponent,
-      JobNameComponent,
-    },
+  components: {
+    JobComponent,
+    JobNameComponent,
+  },
 
-    props: {
-      job: {
-        type: Object,
-        required: true,
-      },
+  props: {
+    job: {
+      type: Object,
+      required: true,
     },
-
-    computed: {
-      tooltipText() {
-        return `${this.job.name} - ${this.job.status.label}`;
-      },
+    requestFinishedFor: {
+      type: String,
+      required: false,
+      default: '',
     },
+  },
 
-    mounted() {
-      this.stopDropdownClickPropagation();
+  computed: {
+    tooltipText() {
+      return `${this.job.name} - ${this.job.status.label}`;
     },
+  },
+
+  mounted() {
+    this.stopDropdownClickPropagation();
+  },
 
-    methods: {
-      /**
-       * When the user right clicks or cmd/ctrl + click in the job name or the action icon
-       * the dropdown should not be closed so we stop propagation of the click event inside the dropdown.
-       *
-       * Since this component is rendered multiple times per page we need to guarantee we only
-       * target the click event of this component.
-       */
-      stopDropdownClickPropagation() {
-        $(
-          '.js-grouped-pipeline-dropdown button, .js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item',
-          this.$el,
-        ).on('click', (e) => {
-            e.stopPropagation();
-          });
-      },
+  methods: {
+    /**
+     * When the user right clicks or cmd/ctrl + click in the job name or the action icon
+     * the dropdown should not be closed so we stop propagation
+     * of the click event inside the dropdown.
+     *
+     * Since this component is rendered multiple times per page we need to guarantee we only
+     * target the click event of this component.
+     */
+    stopDropdownClickPropagation() {
+      $(
+        '.js-grouped-pipeline-dropdown button, .js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item',
+        this.$el
+      ).on('click', e => {
+        e.stopPropagation();
+      });
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="ci-job-dropdown-container">
@@ -102,6 +108,7 @@
             <job-component
               :job="item"
               css-class-job-name="mini-pipeline-graph-dropdown-item"
+              :request-finished-for="requestFinishedFor"
             />
           </li>
         </ul>
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index ac9ce7e47d6..7b8a5edcbff 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -7,7 +7,6 @@ export default {
     StageColumnComponent,
     LoadingIcon,
   },
-
   props: {
     isLoading: {
       type: Boolean,
@@ -17,10 +16,10 @@ export default {
       type: Object,
       required: true,
     },
-    actionDisabled: {
+    requestFinishedFor: {
       type: String,
       required: false,
-      default: null,
+      default: '',
     },
   },
 
@@ -75,7 +74,7 @@ export default {
           :key="stage.name"
           :stage-connector-class="stageConnectorClass(index, stage)"
           :is-first-column="isFirstColumn(index)"
-          :action-disabled="actionDisabled"
+          :request-finished-for="requestFinishedFor"
         />
       </ul>
     </div>
diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue
index 29680235a9e..4fcd4b79f4a 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue
@@ -33,7 +33,6 @@ export default {
     ActionComponent,
     JobNameComponent,
   },
-
   directives: {
     tooltip,
   },
@@ -42,20 +41,17 @@ export default {
       type: Object,
       required: true,
     },
-
     cssClassJobName: {
       type: String,
       required: false,
       default: '',
     },
-
-    actionDisabled: {
+    requestFinishedFor: {
       type: String,
       required: false,
-      default: null,
+      default: '',
     },
   },
-
   computed: {
     status() {
       return this.job && this.job.status ? this.job.status : {};
@@ -130,7 +126,7 @@ export default {
       :tooltip-text="status.action.title"
       :link="status.action.path"
       :action-icon="status.action.icon"
-      :button-disabled="actionDisabled"
+      :request-finished-for="requestFinishedFor"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
index f6e6569e15b..5461fdbbadd 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -29,10 +29,11 @@ export default {
       required: false,
       default: '',
     },
-    actionDisabled: {
+
+    requestFinishedFor: {
       type: String,
       required: false,
-      default: null,
+      default: '',
     },
   },
 
@@ -74,12 +75,12 @@ export default {
             v-if="job.size === 1"
             :job="job"
             css-class-job-name="build-content"
-            :action-disabled="actionDisabled"
           />
 
           <dropdown-job-component
             v-if="job.size > 1"
             :job="job"
+            :request-finished-for="requestFinishedFor"
           />
 
         </li>
-- 
cgit v1.2.1


From 6673934d0e487baf447f2a99b50dd721e0c635ac Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 23 Apr 2018 12:08:11 +0100
Subject: Fix eslint

---
 .../javascripts/pipelines/components/graph/dropdown_job_component.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/assets/javascripts/pipelines/components/graph')

diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
index 9adc8881831..43121dd38f3 100644
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
@@ -71,7 +71,7 @@ export default {
     stopDropdownClickPropagation() {
       $(
         '.js-grouped-pipeline-dropdown button, .js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item',
-        this.$el
+        this.$el,
       ).on('click', e => {
         e.stopPropagation();
       });
-- 
cgit v1.2.1