Merge branch 'master' into bootstrap4

17 files changed, 117 insertions, 106 deletions

diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index c0be72f7401..3da762446c9 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -68,8 +68,7 @@
         this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', showLoader);
 
         this.service.getFolderContent(folder.folder_path)
-          .then(resp => resp.json())
-          .then(response => this.store.setfolderContent(folder, response.environments))
+          .then(response => this.store.setfolderContent(folder, response.data.environments))
           .then(() => this.store.updateEnvironmentProp(folder, 'isLoadingFolderContent', false))
           .catch(() => {
             Flash(s__('Environments|An error occurred while fetching the environments.'));
diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js
index 34d18d55120..a7a79dbca70 100644
--- a/app/assets/javascripts/environments/mixins/environments_mixin.js
+++ b/app/assets/javascripts/environments/mixins/environments_mixin.js
@@ -6,7 +6,6 @@ import Visibility from 'visibilityjs';
 import Poll from '../../lib/utils/poll';
 import {
   getParameterByName,
-  parseQueryStringIntoObject,
 } from '../../lib/utils/common_utils';
 import { s__ } from '../../locale';
 import Flash from '../../flash';
@@ -46,17 +45,14 @@ export default {
 
   methods: {
     saveData(resp) {
-      const headers = resp.headers;
-      return resp.json().then((response) => {
-        this.isLoading = false;
-
-        if (_.isEqual(parseQueryStringIntoObject(resp.url.split('?')[1]), this.requestData)) {
-          this.store.storeAvailableCount(response.available_count);
-          this.store.storeStoppedCount(response.stopped_count);
-          this.store.storeEnvironments(response.environments);
-          this.store.setPagination(headers);
-        }
-      });
+      this.isLoading = false;
+
+      if (_.isEqual(resp.config.params, this.requestData)) {
+        this.store.storeAvailableCount(resp.data.available_count);
+        this.store.storeStoppedCount(resp.data.stopped_count);
+        this.store.storeEnvironments(resp.data.environments);
+        this.store.setPagination(resp.headers);
+      }
     },
 
     /**
@@ -70,7 +66,7 @@ export default {
     updateContent(parameters) {
       this.updateInternalState(parameters);
       // fetch new data
-      return this.service.get(this.requestData)
+      return this.service.fetchEnvironments(this.requestData)
         .then(response => this.successCallback(response))
         .then(() => {
           // restart polling
@@ -105,7 +101,7 @@ export default {
     fetchEnvironments() {
       this.isLoading = true;
 
-      return this.service.get(this.requestData)
+      return this.service.fetchEnvironments(this.requestData)
         .then(this.successCallback)
         .catch(this.errorCallback);
     },
@@ -141,7 +137,7 @@ export default {
 
     this.poll = new Poll({
       resource: this.service,
-      method: 'get',
+      method: 'fetchEnvironments',
       data: this.requestData,
       successCallback: this.successCallback,
       errorCallback: this.errorCallback,
diff --git a/app/assets/javascripts/environments/services/environments_service.js b/app/assets/javascripts/environments/services/environments_service.js
index 03ab74b3338..3b121551aca 100644
--- a/app/assets/javascripts/environments/services/environments_service.js
+++ b/app/assets/javascripts/environments/services/environments_service.js
@@ -1,25 +1,22 @@
-/* eslint-disable class-methods-use-this */
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
+import axios from '~/lib/utils/axios_utils';
 
 export default class EnvironmentsService {
   constructor(endpoint) {
-    this.environments = Vue.resource(endpoint);
+    this.environmentsEndpoint = endpoint;
     this.folderResults = 3;
   }
 
-  get(options = {}) {
+  fetchEnvironments(options = {}) {
     const { scope, page } = options;
-    return this.environments.get({ scope, page });
+    return axios.get(this.environmentsEndpoint, { params: { scope, page } });
   }
 
+  // eslint-disable-next-line class-methods-use-this
   postAction(endpoint) {
-    return Vue.http.post(endpoint, {}, { emulateJSON: true });
+    return axios.post(endpoint, {}, { emulateJSON: true });
   }
 
   getFolderContent(folderUrl) {
-    return Vue.http.get(`${folderUrl}.json?per_page=${this.folderResults}`);
+    return axios.get(`${folderUrl}.json?per_page=${this.folderResults}`);
   }
 }
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
index 4a645c827ad..81961fe3c57 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
@@ -5,7 +5,7 @@ import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import CommitMessageField from './message_field.vue';
 import Actions from './actions.vue';
 import SuccessMessage from './success_message.vue';
-import { activityBarViews, MAX_WINDOW_HEIGHT_COMPACT, COMMIT_ITEM_PADDING } from '../../constants';
+import { activityBarViews, MAX_WINDOW_HEIGHT_COMPACT } from '../../constants';
 
 export default {
   components: {
@@ -70,7 +70,7 @@ export default {
         ? this.$refs.formEl && this.$refs.formEl.offsetHeight
         : this.$refs.compactEl && this.$refs.compactEl.offsetHeight;
 
-      this.componentHeight = elHeight + COMMIT_ITEM_PADDING;
+      this.componentHeight = elHeight;
     },
     enterTransition() {
       this.$nextTick(() => {
@@ -78,7 +78,7 @@ export default {
           ? this.$refs.compactEl && this.$refs.compactEl.offsetHeight
           : this.$refs.formEl && this.$refs.formEl.offsetHeight;
 
-        this.componentHeight = elHeight + COMMIT_ITEM_PADDING;
+        this.componentHeight = elHeight;
       });
     },
     afterEndTransition() {
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 50ebad56cf0..442697e1c80 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -122,11 +122,11 @@ export default {
     <div
       class="file"
       :class="fileClass"
+      @click="clickFile"
+      role="button"
     >
       <div
         class="file-name"
-        @click="clickFile"
-        role="button"
       >
         <span
           class="ide-file-name str-truncated"
diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js
index 48d4cc43198..83fe22f40a4 100644
--- a/app/assets/javascripts/ide/constants.js
+++ b/app/assets/javascripts/ide/constants.js
@@ -5,8 +5,6 @@ export const FILE_FINDER_EMPTY_ROW_HEIGHT = 33;
 
 export const MAX_WINDOW_HEIGHT_COMPACT = 750;
 
-export const COMMIT_ITEM_PADDING = 32;
-
 // Commit message textarea
 export const MAX_TITLE_LENGTH = 50;
 export const MAX_BODY_LENGTH = 72;
diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index fd3491c7fe0..82b4ce083fb 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -1,11 +1,21 @@
 <script>
 import $ from 'jquery';
-import tooltip from '../../../vue_shared/directives/tooltip';
-import Icon from '../../../vue_shared/components/icon.vue';
-import { dasherize } from '../../../lib/utils/text_utility';
-import eventHub from '../../event_hub';
+import axios from '~/lib/utils/axios_utils';
+import { dasherize } from '~/lib/utils/text_utility';
+import { __ } from '~/locale';
+import createFlash from '~/flash';
+import tooltip from '~/vue_shared/directives/tooltip';
+import Icon from '~/vue_shared/components/icon.vue';
+
 /**
- * Renders either a cancel, retry or play icon pointing to the given path.
+ * Renders either a cancel, retry or play icon button and handles the post request
+ *
+ * Used in:
+ * - mr widget mini pipeline graph: `mr_widget_pipeline.vue`
+ * - pipelines table
+ * - pipelines table in merge request page
+ * - pipelines table in commit page
+ * - pipelines detail page in big graph
  */
 export default {
   components: {
@@ -32,16 +42,10 @@ export default {
       required: true,
     },
 
-    requestFinishedFor: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
   data() {
     return {
       isDisabled: false,
-      linkRequested: '',
     };
   },
 
@@ -51,19 +55,28 @@ export default {
       return `${actionIconDash} js-icon-${actionIconDash}`;
     },
   },
-  watch: {
-    requestFinishedFor() {
-      if (this.requestFinishedFor === this.linkRequested) {
-        this.isDisabled = false;
-      }
-    },
-  },
   methods: {
+    /**
+     * The request should not be handled here.
+     * However due to this component being used in several
+     * different apps it avoids repetition & complexity.
+     *
+     */
     onClickAction() {
       $(this.$el).tooltip('hide');
-      eventHub.$emit('postAction', this.link);
-      this.linkRequested = this.link;
+
       this.isDisabled = true;
+
+      axios.post(`${this.link}.json`)
+        .then(() => {
+          this.isDisabled = false;
+          this.$emit('pipelineActionRequestComplete');
+        })
+        .catch(() => {
+          this.isDisabled = false;
+
+          createFlash(__('An error occurred while making the request.'));
+        });
     },
   },
 };
@@ -80,6 +93,6 @@ btn-transparent ci-action-icon-container ci-action-icon-wrapper"
     data-container="body"
     :disabled="isDisabled"
   >
-    <icon :name="actionIcon" />
+    <icon :name="actionIcon"/>
   </button>
 </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 4027d26098f..7bfe11ab8cd 100644
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
@@ -42,11 +42,6 @@ export default {
       type: Object,
       required: true,
     },
-    requestFinishedFor: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
 
   computed: {
@@ -76,11 +71,15 @@ export default {
         e.stopPropagation();
       });
     },
+
+    pipelineActionRequestComplete() {
+      this.$emit('pipelineActionRequestComplete');
+    },
   },
 };
 </script>
 <template>
-  <div class="ci-job-dropdown-container">
+  <div class="ci-job-dropdown-container dropdown">
     <button
       v-tooltip
       type="button"
@@ -110,7 +109,7 @@ export default {
             <job-component
               :job="item"
               css-class-job-name="mini-pipeline-graph-dropdown-item"
-              :request-finished-for="requestFinishedFor"
+              @pipelineActionRequestComplete="pipelineActionRequestComplete"
             />
           </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 7b8a5edcbff..4ec67f6c01b 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -16,11 +16,6 @@ export default {
       type: Object,
       required: true,
     },
-    requestFinishedFor: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
 
   computed: {
@@ -51,6 +46,10 @@ export default {
 
       return className;
     },
+
+    refreshPipelineGraph() {
+      this.$emit('refreshPipelineGraph');
+    },
   },
 };
 </script>
@@ -74,7 +73,7 @@ export default {
           :key="stage.name"
           :stage-connector-class="stageConnectorClass(index, stage)"
           :is-first-column="isFirstColumn(index)"
-          :request-finished-for="requestFinishedFor"
+          @refreshPipelineGraph="refreshPipelineGraph"
         />
       </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 c1f0f051b63..27b938c4985 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue
@@ -46,11 +46,6 @@ export default {
       required: false,
       default: '',
     },
-    requestFinishedFor: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
   computed: {
     status() {
@@ -84,6 +79,11 @@ export default {
       return this.job.status && this.job.status.action && this.job.status.action.path;
     },
   },
+  methods: {
+    pipelineActionRequestComplete() {
+      this.$emit('pipelineActionRequestComplete');
+    },
+  },
 };
 </script>
 <template>
@@ -126,7 +126,7 @@ export default {
       :tooltip-text="status.action.title"
       :link="status.action.path"
       :action-icon="status.action.icon"
-      :request-finished-for="requestFinishedFor"
+      @pipelineActionRequestComplete="pipelineActionRequestComplete"
     />
   </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 5461fdbbadd..f32368947e8 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -29,12 +29,6 @@ export default {
       required: false,
       default: '',
     },
-
-    requestFinishedFor: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
 
   methods: {
@@ -49,6 +43,10 @@ export default {
     buildConnnectorClass(index) {
       return index === 0 && !this.isFirstColumn ? 'left-connector' : '';
     },
+
+    pipelineActionRequestComplete() {
+      this.$emit('refreshPipelineGraph');
+    },
   },
 };
 </script>
@@ -75,12 +73,13 @@ export default {
             v-if="job.size === 1"
             :job="job"
             css-class-job-name="build-content"
+            @pipelineActionRequestComplete="pipelineActionRequestComplete"
           />
 
           <dropdown-job-component
             v-if="job.size > 1"
             :job="job"
-            :request-finished-for="requestFinishedFor"
+            @pipelineActionRequestComplete="pipelineActionRequestComplete"
           />
 
         </li>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index eaff0b25354..691c95651b5 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -9,6 +9,7 @@
   import CommitComponent from '../../vue_shared/components/commit.vue';
   import LoadingButton from '../../vue_shared/components/loading_button.vue';
   import Icon from '../../vue_shared/components/icon.vue';
+  import { PIPELINES_TABLE } from '../constants';
 
   /**
    * Pipeline table row.
@@ -46,6 +47,7 @@
         required: true,
       },
     },
+    pipelinesTable: PIPELINES_TABLE,
     data() {
       return {
         isRetrying: false,
@@ -297,6 +299,7 @@
             v-for="(stage, index) in pipeline.details.stages"
             :key="index">
             <pipeline-stage
+              :type="$options.pipelinesTable"
               :stage="stage"
               :update-dropdown="updateGraphDropdown"
             />
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index a65485c05eb..f9769815796 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -21,6 +21,7 @@ import Icon from '../../vue_shared/components/icon.vue';
 import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
 import JobComponent from './graph/job_component.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
+import { PIPELINES_TABLE } from '../constants';
 
 export default {
   components: {
@@ -44,6 +45,12 @@ export default {
       required: false,
       default: false,
     },
+
+    type: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
 
   data() {
@@ -133,6 +140,16 @@ export default {
     isDropdownOpen() {
       return this.$el.classList.contains('open');
     },
+
+    pipelineActionRequestComplete() {
+      if (this.type === PIPELINES_TABLE) {
+        // warn the table to update
+        eventHub.$emit('refreshPipelinesTable');
+      } else {
+        // close the dropdown in mr widget
+        $(this.$refs.dropdown).dropdown('toggle');
+      }
+    },
   },
 };
 </script>
@@ -151,6 +168,7 @@ export default {
       id="stageDropdown"
       aria-haspopup="true"
       aria-expanded="false"
+      ref="dropdown"
     >
 
       <span
@@ -188,6 +206,7 @@ export default {
             <job-component
               :job="job"
               css-class-job-name="mini-pipeline-graph-dropdown-item"
+              @pipelineActionRequestComplete="pipelineActionRequestComplete"
             />
           </li>
         </ul>
diff --git a/app/assets/javascripts/pipelines/constants.js b/app/assets/javascripts/pipelines/constants.js
index b384c7500e7..eaa11a84cb9 100644
--- a/app/assets/javascripts/pipelines/constants.js
+++ b/app/assets/javascripts/pipelines/constants.js
@@ -1,2 +1,2 @@
-// eslint-disable-next-line import/prefer-default-export
 export const CANCEL_REQUEST = 'CANCEL_REQUEST';
+export const PIPELINES_TABLE = 'PIPELINES_TABLE';
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js
index de0faf181e5..30b1eee186d 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines.js
+++ b/app/assets/javascripts/pipelines/mixins/pipelines.js
@@ -55,11 +55,13 @@ export default {
     eventHub.$on('postAction', this.postAction);
     eventHub.$on('retryPipeline', this.postAction);
     eventHub.$on('clickedDropdown', this.updateTable);
+    eventHub.$on('refreshPipelinesTable', this.fetchPipelines);
   },
   beforeDestroy() {
     eventHub.$off('postAction', this.postAction);
     eventHub.$off('retryPipeline', this.postAction);
     eventHub.$off('clickedDropdown', this.updateTable);
+    eventHub.$off('refreshPipelinesTable', this.fetchPipelines);
   },
   destroyed() {
     this.poll.stop();
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index 04fe7958fe6..b49a16a87e6 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -25,30 +25,14 @@ export default () => {
     data() {
       return {
         mediator,
-        requestFinishedFor: null,
       };
     },
-    created() {
-      eventHub.$on('postAction', this.postAction);
-    },
-    beforeDestroy() {
-      eventHub.$off('postAction', this.postAction);
-    },
     methods: {
-      postAction(action) {
-        // Click was made, reset this variable
-        this.requestFinishedFor = null;
-
-        this.mediator.service
-          .postAction(action)
-          .then(() => {
-            this.mediator.refreshPipeline();
-            this.requestFinishedFor = action;
-          })
-          .catch(() => {
-            this.requestFinishedFor = action;
-            Flash(__('An error occurred while making the request.'));
-          });
+      requestRefreshPipelineGraph() {
+        // When an action is clicked
+        // (wether in the dropdown or in the main nodes, we refresh the big graph)
+        this.mediator.refreshPipeline()
+          .catch(() => Flash(__('An error occurred while making the request.')));
       },
     },
     render(createElement) {
@@ -56,7 +40,9 @@ export default () => {
         props: {
           isLoading: this.mediator.state.isLoading,
           pipeline: this.mediator.store.state.pipeline,
-          requestFinishedFor: this.requestFinishedFor,
+        },
+        on: {
+          refreshPipelineGraph: this.requestRefreshPipelineGraph,
         },
       });
     },
diff --git a/app/assets/javascripts/shortcuts_navigation.js b/app/assets/javascripts/shortcuts_navigation.js
index a4d10850471..78f7353eb0d 100644
--- a/app/assets/javascripts/shortcuts_navigation.js
+++ b/app/assets/javascripts/shortcuts_navigation.js
@@ -7,7 +7,7 @@ export default class ShortcutsNavigation extends Shortcuts {
     super();
 
     Mousetrap.bind('g p', () => findAndFollowLink('.shortcuts-project'));
-    Mousetrap.bind('g e', () => findAndFollowLink('.shortcuts-project-activity'));
+    Mousetrap.bind('g v', () => findAndFollowLink('.shortcuts-project-activity'));
     Mousetrap.bind('g f', () => findAndFollowLink('.shortcuts-tree'));
     Mousetrap.bind('g c', () => findAndFollowLink('.shortcuts-commits'));
     Mousetrap.bind('g j', () => findAndFollowLink('.shortcuts-builds'));
@@ -16,9 +16,10 @@ export default class ShortcutsNavigation extends Shortcuts {
     Mousetrap.bind('g i', () => findAndFollowLink('.shortcuts-issues'));
     Mousetrap.bind('g b', () => findAndFollowLink('.shortcuts-issue-boards'));
     Mousetrap.bind('g m', () => findAndFollowLink('.shortcuts-merge_requests'));
-    Mousetrap.bind('g t', () => findAndFollowLink('.shortcuts-todos'));
     Mousetrap.bind('g w', () => findAndFollowLink('.shortcuts-wiki'));
     Mousetrap.bind('g s', () => findAndFollowLink('.shortcuts-snippets'));
+    Mousetrap.bind('g k', () => findAndFollowLink('.shortcuts-kubernetes'));
+    Mousetrap.bind('g e', () => findAndFollowLink('.shortcuts-environments'));
     Mousetrap.bind('i', () => findAndFollowLink('.shortcuts-new-issue'));
 
     this.enabledHelp.push('.hidden-shortcut.project');