Merge branch 'master' into qa-264

.gitattributes

+Dangerfile gitlab-language=ruby

.gitlab-ci.yml

@@ -348,6 +348,24 @@ retrieve-tests-metadata:
     - wget -O $FLAKY_RSPEC_SUITE_REPORT_PATH http://${TESTS_METADATA_S3_BUCKET}.s3.amazonaws.com/$FLAKY_RSPEC_SUITE_REPORT_PATH || rm $FLAKY_RSPEC_SUITE_REPORT_PATH
     - '[[ -f $FLAKY_RSPEC_SUITE_REPORT_PATH ]] || echo "{}" > ${FLAKY_RSPEC_SUITE_REPORT_PATH}'
 
+danger-review:
+  image: registry.gitlab.com/gitlab-org/gitaly/dangercontainer:latest
+  stage: prepare
+  before_script:
+    - source scripts/utils.sh
+    - retry gem install danger --no-ri --no-rdoc
+  cache: {}
+  only:
+    refs:
+      - branches@gitlab-org/gitlab-ce
+      - branches@gitlab-org/gitlab-ee
+  except:
+    variables:
+      - $CI_COMMIT_REF_NAME =~ /^ce-to-ee-.*/
+  script:
+    - git version
+    - danger --fail-on-errors=true
+
 update-tests-metadata:
   <<: *tests-metadata-state
   <<: *only-canonical-masters

Dangerfile

+danger.import_dangerfile(path: 'danger/metadata')
+danger.import_dangerfile(path: 'danger/changes_size')
+danger.import_dangerfile(path: 'danger/changelog')
+danger.import_dangerfile(path: 'danger/specs')
+danger.import_dangerfile(path: 'danger/gemfile')
+danger.import_dangerfile(path: 'danger/database')

GITALY_SERVER_VERSION

-0.111.0
+0.112.0

GITLAB_SHELL_VERSION

-7.1.4
+7.1.5

app/assets/javascripts/confirm_danger_modal.js

@@ -2,13 +2,16 @@ import $ from 'jquery';
 import { rstrip } from './lib/utils/common_utils';
 
 function openConfirmDangerModal($form, text) {
+  const $input = $('.js-confirm-danger-input');
+  $input.val('');
+
   $('.js-confirm-text').text(text || '');
-  $('.js-confirm-danger-input').val('');
   $('#modal-confirm-danger').modal('show');
 
   const confirmTextMatch = $('.js-confirm-danger-match').text();
   const $submit = $('.js-confirm-danger-submit');
   $submit.disable();
+  $input.focus();
 
   $('.js-confirm-danger-input').off('input').on('input', function handleInput() {
     const confirmText = rstrip($(this).val());

app/assets/javascripts/diffs/components/diff_file.vue

@@ -31,9 +31,6 @@ export default {
     };
   },
   computed: {
-    isDiscussionsExpanded() {
-      return true; // TODO: @fatihacet - Fix this.
-    },
     isCollapsed() {
       return this.file.collapsed || false;
     },
@@ -131,7 +128,6 @@ export default {
       :diff-file="file"
       :collapsible="true"
       :expanded="!isCollapsed"
-      :discussions-expanded="isDiscussionsExpanded"
       :add-merge-request-buttons="true"
       class="js-file-title file-title"
       @toggleFile="handleToggle"

app/assets/javascripts/diffs/components/diff_file_header.vue

 <script>
 import _ from 'underscore';
+import { mapActions, mapGetters } from 'vuex';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
@@ -38,11 +39,6 @@ export default {
       required: false,
       default: true,
     },
-    discussionsExpanded: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
     currentUser: {
       type: Object,
       required: true,
@@ -54,6 +50,10 @@ export default {
     };
   },
   computed: {
+    ...mapGetters('diffs', ['diffHasExpandedDiscussions']),
+    hasExpandedDiscussions() {
+      return this.diffHasExpandedDiscussions(this.diffFile);
+    },
     icon() {
       if (this.diffFile.submodule) {
         return 'archive';
@@ -88,9 +88,6 @@ export default {
     collapseIcon() {
       return this.expanded ? 'chevron-down' : 'chevron-right';
     },
-    isDiscussionsExpanded() {
-      return this.discussionsExpanded && this.expanded;
-    },
     viewFileButtonText() {
       const truncatedContentSha = _.escape(truncateSha(this.diffFile.contentSha));
       return sprintf(
@@ -113,7 +110,8 @@ export default {
     },
   },
   methods: {
-    handleToggle(e, checkTarget) {
+    ...mapActions('diffs', ['toggleFileDiscussions']),
+    handleToggleFile(e, checkTarget) {
       if (
         !checkTarget ||
         e.target === this.$refs.header ||
@@ -125,6 +123,9 @@ export default {
     showForkMessage() {
       this.$emit('showForkMessage');
     },
+    handleToggleDiscussions() {
+      this.toggleFileDiscussions(this.diffFile);
+    },
   },
 };
 </script>
@@ -133,7 +134,7 @@ export default {
   <div
     ref="header"
     class="js-file-title file-title file-title-flex-parent"
-    @click="handleToggle($event, true)"
+    @click="handleToggleFile($event, true)"
   >
     <div class="file-header-content">
       <icon
@@ -216,10 +217,11 @@ export default {
         v-if="diffFile.blob && diffFile.blob.readableText"
       >
         <button
-          :class="{ active: isDiscussionsExpanded }"
+          :class="{ active: hasExpandedDiscussions }"
           :title="s__('MergeRequests|Toggle comments for this file')"
-          class="btn js-toggle-diff-comments"
+          class="js-btn-vue-toggle-comments btn"
           type="button"
+          @click="handleToggleDiscussions"
         >
           <icon name="comment" />
         </button>

app/assets/javascripts/diffs/store/actions.js

@@ -82,14 +82,32 @@ export const expandAllFiles = ({ commit }) => {
   commit(types.EXPAND_ALL_FILES);
 };
 
-export default {
-  setBaseConfig,
-  fetchDiffFiles,
-  setInlineDiffViewType,
-  setParallelDiffViewType,
-  showCommentForm,
-  cancelCommentForm,
-  loadMoreLines,
-  loadCollapsedDiff,
-  expandAllFiles,
+/**
+ * Toggles the file discussions after user clicked on the toggle discussions button.
+ *
+ * Gets the discussions for the provided diff.
+ *
+ * If all discussions are expanded, it will collapse all of them
+ * If all discussions are collapsed, it will expand all of them
+ * If some discussions are open and others closed, it will expand the closed ones.
+ *
+ * @param {Object} diff
+ */
+export const toggleFileDiscussions = ({ getters, dispatch }, diff) => {
+  const discussions = getters.getDiffFileDiscussions(diff);
+  const shouldCloseAll = getters.diffHasAllExpandedDiscussions(diff);
+  const shouldExpandAll = getters.diffHasAllCollpasedDiscussions(diff);
+
+  discussions.forEach(discussion => {
+    const data = { discussionId: discussion.id };
+
+    if (shouldCloseAll) {
+      dispatch('collapseDiscussion', data, { root: true });
+    } else if (shouldExpandAll || (!shouldCloseAll && !shouldExpandAll && !discussion.expanded)) {
+      dispatch('expandDiscussion', data, { root: true });
+    }
+  });
 };
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};

app/assets/javascripts/diffs/store/getters.js

+import _ from 'underscore';
 import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '../constants';
 
 export const isParallelView = state => state.diffViewType === PARALLEL_DIFF_VIEW_TYPE;
@@ -8,5 +9,52 @@ export const areAllFilesCollapsed = state => state.diffFiles.every(file => file.
 
 export const commitId = state => (state.commit && state.commit.id ? state.commit.id : null);
 
-// prevent babel-plugin-rewire from generating an invalid default during karma tests
+/**
+ * Checks if the diff has all discussions expanded
+ * @param {Object} diff
+ * @returns {Boolean}
+ */
+export const diffHasAllExpandedDiscussions = (state, getters) => diff => {
+  const discussions = getters.getDiffFileDiscussions(diff);
+
+  return (discussions.length && discussions.every(discussion => discussion.expanded)) || false;
+};
+
+/**
+ * Checks if the diff has all discussions collpased
+ * @param {Object} diff
+ * @returns {Boolean}
+ */
+export const diffHasAllCollpasedDiscussions = (state, getters) => diff => {
+  const discussions = getters.getDiffFileDiscussions(diff);
+
+  return (discussions.length && discussions.every(discussion => !discussion.expanded)) || false;
+};
+
+/**
+ * Checks if the diff has any open discussions
+ * @param {Object} diff
+ * @returns {Boolean}
+ */
+export const diffHasExpandedDiscussions = (state, getters) => diff => {
+  const discussions = getters.getDiffFileDiscussions(diff);
+
+  return (
+    (discussions.length && discussions.find(discussion => discussion.expanded) !== undefined) ||
+    false
+  );
+};
+
+/**
+ * Returns an array with the discussions of the given diff
+ * @param {Object} diff
+ * @returns {Array}
+ */
+export const getDiffFileDiscussions = (state, getters, rootState, rootGetters) => diff =>
+  rootGetters.discussions.filter(
+    discussion =>
+      discussion.diff_discussion && _.isEqual(discussion.diff_file.file_hash, diff.fileHash),
+  ) || [];
+
+// prevent babel-plugin-rewire from generating an invalid default during karma∂ tests
 export default () => {};

app/assets/javascripts/diffs/store/index.js

-import Vue from 'vue';
-import Vuex from 'vuex';
-import diffsModule from './modules';
-
-Vue.use(Vuex);
-
-export default new Vuex.Store({
-  modules: {
-    diffs: diffsModule,
-  },
-});

app/assets/javascripts/diffs/store/modules/index.js

-import actions from '../actions';
+import * as actions from '../actions';
 import * as getters from '../getters';
 import mutations from '../mutations';
 import createState from './diff_state';

app/assets/javascripts/environments/components/environment_actions.vue

 <script>
-  import Icon from '~/vue_shared/components/icon.vue';
-  import eventHub from '../event_hub';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
+import Icon from '~/vue_shared/components/icon.vue';
+import eventHub from '../event_hub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
 
-  export default {
+export default {
   directives: {
     tooltip,
   },
@@ -33,7 +33,7 @@
     onClickAction(endpoint) {
       this.isLoading = true;
 
-        eventHub.$emit('postAction', endpoint);
+      eventHub.$emit('postAction', { endpoint });
     },
 
     isActionDisabled(action) {
@@ -44,7 +44,7 @@
       return !action.playable;
     },
   },
-  };
+};
 </script>
 <template>
   <div
@@ -61,10 +61,7 @@
       data-toggle="dropdown"
     >
       <span>
-        <icon
-          :size="12"
-          name="play"
-        />
+        <icon name="play" />
         <i
           class="fa fa-caret-down"
           aria-hidden="true"
@@ -85,10 +82,6 @@
           class="js-manual-action-link no-btn btn"
           @click="onClickAction(action.play_path)"
         >
-          <icon
-            :size="12"
-            name="play"
-          />
           <span>
             {{ action.name }}
           </span>

app/assets/javascripts/environments/components/environment_external_url.vue

 <script>
-  import Icon from '~/vue_shared/components/icon.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
-  import { s__ } from '../../locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
+import { s__ } from '../../locale';
 
-  /**
+/**
  * Renders the external url link in environments table.
  */
-  export default {
+export default {
   components: {
     Icon,
   },
@@ -21,10 +21,10 @@
   },
   computed: {
     title() {
-        return s__('Environments|Open');
+      return s__('Environments|Open live environment');
     },
   },
-  };
+};
 </script>
 <template>
   <a
@@ -37,9 +37,6 @@
     target="_blank"
     rel="noopener noreferrer nofollow"
   >
-    <icon
-      :size="12"
-      name="external-link"
-    />
+    <icon name="external-link" />
   </a>
 </template>

app/assets/javascripts/environments/components/environment_item.vue

 <script>
-  import Timeago from 'timeago.js';
-  import _ from 'underscore';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
-  import { humanize } from '~/lib/utils/text_utility';
-  import ActionsComponent from './environment_actions.vue';
-  import ExternalUrlComponent from './environment_external_url.vue';
-  import StopComponent from './environment_stop.vue';
-  import RollbackComponent from './environment_rollback.vue';
-  import TerminalButtonComponent from './environment_terminal_button.vue';
-  import MonitoringButtonComponent from './environment_monitoring.vue';
-  import CommitComponent from '../../vue_shared/components/commit.vue';
-  import eventHub from '../event_hub';
-
-  /**
+import Timeago from 'timeago.js';
+import _ from 'underscore';
+import tooltip from '~/vue_shared/directives/tooltip';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import { humanize } from '~/lib/utils/text_utility';
+import ActionsComponent from './environment_actions.vue';
+import ExternalUrlComponent from './environment_external_url.vue';
+import StopComponent from './environment_stop.vue';
+import RollbackComponent from './environment_rollback.vue';
+import TerminalButtonComponent from './environment_terminal_button.vue';
+import MonitoringButtonComponent from './environment_monitoring.vue';
+import CommitComponent from '../../vue_shared/components/commit.vue';
+import eventHub from '../event_hub';
+
+/**
  * Envrionment Item Component
  *
  * Renders a table row for each environment.
  */
-  const timeagoInstance = new Timeago();
+const timeagoInstance = new Timeago();
 
-  export default {
+export default {
   components: {
     UserAvatarLink,
     CommitComponent,
@@ -65,9 +65,7 @@
      * @returns {Boolean}
      */
     hasLastDeploymentKey() {
-        if (this.model &&
-          this.model.last_deployment &&
-          !_.isEmpty(this.model.last_deployment)) {
+      if (this.model && this.model.last_deployment && !_.isEmpty(this.model.last_deployment)) {
         return true;
       }
       return false;
@@ -80,19 +78,21 @@
      * @returns {Boolean|Undefined}
      */
     hasManualActions() {
-        return this.model &&
+      return (
+        this.model &&
         this.model.last_deployment &&
         this.model.last_deployment.manual_actions &&
-          this.model.last_deployment.manual_actions.length > 0;
+        this.model.last_deployment.manual_actions.length > 0
+      );
     },
 
     /**
-      * Returns the value of the `stop_action?` key provided in the response.
+     * Returns whether the environment can be stopped.
      *
      * @returns {Boolean}
      */
-      hasStopAction() {
-        return this.model && this.model['stop_action?'];
+    canStopEnvironment() {
+      return this.model && this.model.can_stop;
     },
 
     /**
@@ -102,10 +102,12 @@
      * @returns {Boolean|Undefined}
      */
     canRetry() {
-        return this.model &&
+      return (
+        this.model &&
         this.hasLastDeploymentKey &&
         this.model.last_deployment &&
-          this.model.last_deployment.deployable;
+        this.model.last_deployment.deployable
+      );
     },
 
     /**
@@ -114,10 +116,12 @@
      * @returns {Boolean|Undefined}
      */
     canShowDate() {
-        return this.model &&
+      return (
+        this.model &&
         this.model.last_deployment &&
         this.model.last_deployment.deployable &&
-          this.model.last_deployment.deployable !== undefined;
+        this.model.last_deployment.deployable !== undefined
+      );
     },
 
     /**
@@ -126,10 +130,12 @@
      * @returns {String}
      */
     createdDate() {
-        if (this.model &&
+      if (
+        this.model &&
         this.model.last_deployment &&
         this.model.last_deployment.deployable &&
-          this.model.last_deployment.deployable.created_at) {
+        this.model.last_deployment.deployable.created_at
+      ) {
         return timeagoInstance.format(this.model.last_deployment.deployable.created_at);
       }
       return '';
@@ -142,7 +148,7 @@
      */
     manualActions() {
       if (this.hasManualActions) {
-          return this.model.last_deployment.manual_actions.map((action) => {
+        return this.model.last_deployment.manual_actions.map(action => {
           const parsedAction = {
             name: humanize(action.name),
             play_path: action.play_path,
@@ -160,10 +166,12 @@
      * @returns {String}
      */
     userImageAltDescription() {
-        if (this.model &&
+      if (
+        this.model &&
         this.model.last_deployment &&
         this.model.last_deployment.user &&
-          this.model.last_deployment.user.username) {
+        this.model.last_deployment.user.username
+      ) {
         return `${this.model.last_deployment.user.username}'s avatar'`;
       }
       return '';
@@ -175,9 +183,7 @@
      * @returns {String|Undefined}
      */
     commitTag() {
-        if (this.model &&
-          this.model.last_deployment &&
-          this.model.last_deployment.tag) {
+      if (this.model && this.model.last_deployment && this.model.last_deployment.tag) {
         return this.model.last_deployment.tag;
       }
       return undefined;
@@ -189,9 +195,7 @@
      * @returns {Object|Undefined}
      */
     commitRef() {
-        if (this.model &&
-          this.model.last_deployment &&
-          this.model.last_deployment.ref) {
+      if (this.model && this.model.last_deployment && this.model.last_deployment.ref) {
         return this.model.last_deployment.ref;
       }
       return undefined;
@@ -203,10 +207,12 @@
      * @returns {String|Undefined}
      */
     commitUrl() {
-        if (this.model &&
+      if (
+        this.model &&
         this.model.last_deployment &&
         this.model.last_deployment.commit &&
-          this.model.last_deployment.commit.commit_path) {
+        this.model.last_deployment.commit.commit_path
+      ) {
         return this.model.last_deployment.commit.commit_path;
       }
       return undefined;
@@ -218,10 +224,12 @@
      * @returns {String|Undefined}
      */
     commitShortSha() {
-        if (this.model &&
+      if (
+        this.model &&
         this.model.last_deployment &&
         this.model.last_deployment.commit &&
-          this.model.last_deployment.commit.short_id) {
+        this.model.last_deployment.commit.short_id
+      ) {
         return this.model.last_deployment.commit.short_id;
       }
       return undefined;
@@ -233,10 +241,12 @@
      * @returns {String|Undefined}
      */
     commitTitle() {
-        if (this.model &&
+      if (
+        this.model &&
         this.model.last_deployment &&
         this.model.last_deployment.commit &&
-          this.model.last_deployment.commit.title) {
+        this.model.last_deployment.commit.title
+      ) {
         return this.model.last_deployment.commit.title;
       }
       return undefined;
@@ -248,10 +258,12 @@
      * @returns {Object|Undefined}
      */
     commitAuthor() {
-        if (this.model &&
+      if (
+        this.model &&
         this.model.last_deployment &&
         this.model.last_deployment.commit &&
-          this.model.last_deployment.commit.author) {
+        this.model.last_deployment.commit.author
+      ) {
         return this.model.last_deployment.commit.author;
       }
 
@@ -264,10 +276,12 @@
      * @returns {String|Undefined}
      */
     retryUrl() {
-        if (this.model &&
+      if (
+        this.model &&
         this.model.last_deployment &&
         this.model.last_deployment.deployable &&
-          this.model.last_deployment.deployable.retry_path) {
+        this.model.last_deployment.deployable.retry_path
+      ) {
         return this.model.last_deployment.deployable.retry_path;
       }
       return undefined;
@@ -279,8 +293,7 @@
      * @returns {Boolean|Undefined}
      */
     isLastDeployment() {
-        return this.model && this.model.last_deployment &&
-          this.model.last_deployment['last?'];
+      return this.model && this.model.last_deployment && this.model.last_deployment['last?'];
     },
 
     /**
@@ -289,9 +302,7 @@
      * @returns {String}
      */
     buildName() {
-        if (this.model &&
-          this.model.last_deployment &&
-          this.model.last_deployment.deployable) {
+      if (this.model && this.model.last_deployment && this.model.last_deployment.deployable) {
         const { deployable } = this.model.last_deployment;
         return `${deployable.name} #${deployable.id}`;
       }
@@ -304,9 +315,7 @@
      * @returns {String}
      */
     deploymentInternalId() {
-        if (this.model &&
-          this.model.last_deployment &&
-          this.model.last_deployment.iid) {
+      if (this.model && this.model.last_deployment && this.model.last_deployment.iid) {
         return `#${this.model.last_deployment.iid}`;
       }
       return '';
@@ -318,9 +327,11 @@
      * @returns {Boolean}
      */
     deploymentHasUser() {
-        return this.model &&
+      return (
+        this.model &&
         !_.isEmpty(this.model.last_deployment) &&
-          !_.isEmpty(this.model.last_deployment.user);
+        !_.isEmpty(this.model.last_deployment.user)
+      );
     },
 
     /**
@@ -330,9 +341,11 @@
      * @returns {Object}
      */
     deploymentUser() {
-        if (this.model &&
+      if (
+        this.model &&
         !_.isEmpty(this.model.last_deployment) &&
-          !_.isEmpty(this.model.last_deployment.user)) {
+        !_.isEmpty(this.model.last_deployment.user)
+      ) {
         return this.model.last_deployment.user;
       }
       return {};
@@ -346,9 +359,11 @@
      * @returns {Boolean}
      */
     shouldRenderBuildName() {
-        return !this.model.isFolder &&
+      return (
+        !this.model.isFolder &&
         !_.isEmpty(this.model.last_deployment) &&
-          !_.isEmpty(this.model.last_deployment.deployable);
+        !_.isEmpty(this.model.last_deployment.deployable)
+      );
     },
 
     /**
@@ -357,10 +372,12 @@
      * @return {String}
      */
     buildPath() {
-        if (this.model &&
+      if (
+        this.model &&
         this.model.last_deployment &&
         this.model.last_deployment.deployable &&
-          this.model.last_deployment.deployable.build_path) {
+        this.model.last_deployment.deployable.build_path
+      ) {
         return this.model.last_deployment.deployable.build_path;
       }
 
@@ -388,9 +405,11 @@
      * @returns {Boolean}
      */
     shouldRenderDeploymentID() {
-        return !this.model.isFolder &&
+      return (
+        !this.model.isFolder &&
         !_.isEmpty(this.model.last_deployment) &&
-          this.model.last_deployment.iid !== undefined;
+        this.model.last_deployment.iid !== undefined
+      );
     },
 
     environmentPath() {
@@ -410,11 +429,13 @@
     },
 
     displayEnvironmentActions() {
-        return this.hasManualActions ||
+      return (
+        this.hasManualActions ||
         this.externalURL ||
         this.monitoringUrl ||
-              this.hasStopAction ||
-              this.canRetry;
+        this.canStopEnvironment ||
+        this.canRetry
+      );
     },
   },
 
@@ -423,7 +444,7 @@
       eventHub.$emit('toggleFolder', this.model);
     },
   },
-  };
+};
 </script>
 <template>
   <div
@@ -580,11 +601,6 @@
         class="btn-group table-action-buttons"
         role="group">
 
-        <actions-component
-          v-if="hasManualActions && canCreateDeployment"
-          :actions="manualActions"
-        />
-
         <external-url-component
           v-if="externalURL && canReadEnvironment"
           :external-url="externalURL"
@@ -595,21 +611,26 @@
           :monitoring-url="monitoringUrl"
         />
 
+        <actions-component
+          v-if="hasManualActions && canCreateDeployment"
+          :actions="manualActions"
+        />
+
         <terminal-button-component
           v-if="model && model.terminal_path"
           :terminal-path="model.terminal_path"
         />
 
-        <stop-component
-          v-if="hasStopAction && canCreateDeployment"
-          :stop-url="model.stop_path"
-        />
-
         <rollback-component
           v-if="canRetry && canCreateDeployment"
           :is-last-deployment="isLastDeployment"
           :retry-url="retryUrl"
         />
+
+        <stop-component
+          v-if="canStopEnvironment"
+          :environment="model"
+        />
       </div>
     </div>
   </div>

app/assets/javascripts/environments/components/environment_monitoring.vue

 <script>
-  /**
+/**
  * Renders the Monitoring (Metrics) link in environments table.
  */
-  import Icon from '~/vue_shared/components/icon.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
 
-  export default {
+export default {
   components: {
     Icon,
   },
@@ -23,7 +23,7 @@
       return 'Monitoring';
     },
   },
-  };
+};
 </script>
 <template>
   <a
@@ -35,9 +35,6 @@
     data-container="body"
     rel="noopener noreferrer nofollow"
   >
-    <icon
-      :size="12"
-      name="chart"
-    />
+    <icon name="chart" />
   </a>
 </template>

app/assets/javascripts/environments/components/environment_rollback.vue

 <script>
-  /**
+/**
  * Renders Rollback or Re deploy button in environments table depending
  * of the provided property `isLastDeployment`.
  *
  * Makes a post request when the button is clicked.
  */
-  import eventHub from '../event_hub';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import { s__ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import eventHub from '../event_hub';
+import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
 
-  export default {
+export default {
   components: {
-      loadingIcon,
+    Icon,
+    LoadingIcon,
   },
+
+  directives: {
+    tooltip,
+  },
+
   props: {
     retryUrl: {
       type: String,
@@ -28,29 +37,38 @@
       isLoading: false,
     };
   },
+
+  computed: {
+    title() {
+      return this.isLastDeployment ? s__('Environments|Re-deploy to environment') : s__('Environments|Rollback environment');
+    },
+  },
+
   methods: {
     onClick() {
       this.isLoading = true;
 
-        eventHub.$emit('postAction', this.retryUrl);
+      eventHub.$emit('postAction', { endpoint: this.retryUrl });
     },
   },
-  };
+};
 </script>
 <template>
   <button
+    v-tooltip
     :disabled="isLoading"
+    :title="title"
     type="button"
     class="btn d-none d-sm-none d-md-block"
     @click="onClick"
   >
 
-    <span v-if="isLastDeployment">
-      {{ s__("Environments|Re-deploy") }}
-    </span>
-    <span v-else>
-      {{ s__("Environments|Rollback") }}
-    </span>
+    <icon
+      v-if="isLastDeployment"
+      name="repeat" />
+    <icon
+      v-else
+      name="redo"/>
 
     <loading-icon v-if="isLoading" />
   </button>

app/assets/javascripts/environments/components/environment_stop.vue

 <script>
-  /**
+/**
  * Renders the stop "button" that allows stop an environment.
  * Used in environments table.
  */
 
-  import $ from 'jquery';
-  import eventHub from '../event_hub';
-  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
+import $ from 'jquery';
+import Icon from '~/vue_shared/components/icon.vue';
+import { s__ } from '~/locale';
+import eventHub from '../event_hub';
+import LoadingButton from '../../vue_shared/components/loading_button.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
 
-  export default {
+export default {
   components: {
-      loadingIcon,
+    Icon,
+    LoadingButton,
   },
 
   directives: {
@@ -19,9 +22,9 @@
   },
 
   props: {
-      stopUrl: {
-        type: String,
-        default: '',
+    environment: {
+      type: Object,
+      required: true,
     },
   },
 
@@ -33,40 +36,43 @@
 
   computed: {
     title() {
-        return 'Stop';
+      return s__('Environments|Stop environment');
     },
   },
 
+  mounted() {
+    eventHub.$on('stopEnvironment', this.onStopEnvironment);
+  },
+
+  beforeDestroy() {
+    eventHub.$off('stopEnvironment', this.onStopEnvironment);
+  },
+
   methods: {
     onClick() {
-        // eslint-disable-next-line no-alert
-        if (window.confirm('Are you sure you want to stop this environment?')) {
-          this.isLoading = true;
-
       $(this.$el).tooltip('dispose');
-
-          eventHub.$emit('postAction', this.stopUrl);
+      eventHub.$emit('requestStopEnvironment', this.environment);
+    },
+    onStopEnvironment(environment) {
+      if (this.environment.id === environment.id) {
+        this.isLoading = true;
       }
     },
   },
-  };
+};
 </script>
 <template>
-  <button
+  <loading-button
     v-tooltip
-    :disabled="isLoading"
+    :loading="isLoading"
     :title="title"
     :aria-label="title"
-    type="button"
-    class="btn stop-env-link d-none d-sm-none d-md-block"
+    container-class="btn btn-danger d-none d-sm-none d-md-block"
     data-container="body"
+    data-toggle="modal"
+    data-target="#stop-environment-modal"
     @click="onClick"
   >
-    <i
-      class="fa fa-stop stop-env-icon"
-      aria-hidden="true"
-    >
-    </i>
-    <loading-icon v-if="isLoading" />
-  </button>
+    <icon name="stop"/>
+  </loading-button>
 </template>

app/assets/javascripts/environments/components/environment_terminal_button.vue

 <script>
-  /**
+/**
  * Renders a terminal button to open a web terminal.
  * Used in environments table.
  */
-  import Icon from '~/vue_shared/components/icon.vue';
-  import tooltip from '../../vue_shared/directives/tooltip';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
 
-  export default {
+export default {
   components: {
     Icon,
   },
@@ -25,7 +25,7 @@
       return 'Terminal';
     },
   },
-  };
+};
 </script>
 <template>
   <a
@@ -36,9 +36,6 @@
     class="btn terminal-button d-none d-sm-none d-md-block"
     data-container="body"
   >
-    <icon
-      :size="12"
-      name="terminal"
-    />
+    <icon name="terminal" />
   </a>
 </template>

app/assets/javascripts/environments/components/environments_app.vue

@@ -5,10 +5,12 @@
   import eventHub from '../event_hub';
   import environmentsMixin from '../mixins/environments_mixin';
   import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
+  import StopEnvironmentModal from './stop_environment_modal.vue';
 
   export default {
     components: {
       emptyState,
+      StopEnvironmentModal,
     },
 
     mixins: [
@@ -90,6 +92,8 @@
 </script>
 <template>
   <div :class="cssContainerClass">
+    <stop-environment-modal :environment="environmentInStopModal" />
+
     <div class="top-area">
       <tabs
         :tabs="tabs"