Merge branch 'master' into qa-264

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

+<script>
+import GlModal from '~/vue_shared/components/gl_modal.vue';
+import { s__, sprintf } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import eventHub from '../event_hub';
+
+export default {
+  id: 'stop-environment-modal',
+  name: 'StopEnvironmentModal',
+
+  components: {
+    GlModal,
+    LoadingButton,
+  },
+
+  directives: {
+    tooltip,
+  },
+
+  props: {
+    environment: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    noStopActionMessage() {
+      return sprintf(
+        s__(
+          `Environments|Note that this action will stop the environment,
+        but it will %{emphasisStart}not%{emphasisEnd} have an effect on any existing deployment
+        due to no “stop environment action” being defined
+        in the %{ciConfigLinkStart}.gitlab-ci.yml%{ciConfigLinkEnd} file.`,
+        ),
+        {
+          emphasisStart: '<strong>',
+          emphasisEnd: '</strong>',
+          ciConfigLinkStart:
+            '<a href="https://docs.gitlab.com/ee/ci/yaml/" target="_blank" rel="noopener noreferrer">',
+          ciConfigLinkEnd: '</a>',
+        },
+        false,
+      );
+    },
+  },
+
+  methods: {
+    onSubmit() {
+      eventHub.$emit('stopEnvironment', this.environment);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    :id="$options.id"
+    :footer-primary-button-text="s__('Environments|Stop environment')"
+    footer-primary-button-variant="danger"
+    @submit="onSubmit"
+  >
+    <template slot="header">
+      <h4
+        class="modal-title d-flex mw-100"
+      >
+        Stopping
+        <span
+          v-tooltip
+          :title="environment.name"
+          class="text-truncate ml-1 mr-1 flex-fill"
+        >{{ environment.name }}</span>
+        ?
+      </h4>
+    </template>
+
+    <p>{{ s__('Environments|Are you sure you want to stop this environment?') }}</p>
+
+    <div
+      v-if="!environment.has_stop_action"
+      class="warning_message"
+    >
+      <p v-html="noStopActionMessage"></p>
+      <a
+        href="https://docs.gitlab.com/ee/ci/environments.html#stopping-an-environment"
+        target="_blank"
+        rel="noopener noreferrer"
+      >{{ s__('Environments|Learn more about stopping environments') }}</a>
+    </div>
+  </gl-modal>
+</template>

app/assets/javascripts/environments/folder/environments_folder_view.vue

 <script>
   import environmentsMixin from '../mixins/environments_mixin';
   import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
+  import StopEnvironmentModal from '../components/stop_environment_modal.vue';
 
   export default {
+    components: {
+      StopEnvironmentModal,
+    },
+
     mixins: [
       environmentsMixin,
       CIPaginationMixin,
     ],
+
     props: {
       endpoint: {
         type: String,
@@ -38,6 +44,8 @@
 </script>
 <template>
   <div :class="cssContainerClass">
+    <stop-environment-modal :environment="environmentInStopModal" />
+
     <div
       v-if="!isLoading"
       class="top-area"

app/assets/javascripts/environments/mixins/environments_mixin.js

@@ -40,6 +40,7 @@ export default {
       scope: getParameterByName('scope') || 'available',
       page: getParameterByName('page') || '1',
       requestData: {},
+      environmentInStopModal: {},
     };
   },
 
@@ -85,7 +86,7 @@ export default {
       Flash(s__('Environments|An error occurred while fetching the environments.'));
     },
 
-    postAction(endpoint) {
+    postAction({ endpoint, errorMessage }) {
       if (!this.isMakingRequest) {
         this.isLoading = true;
 
@@ -93,7 +94,7 @@ export default {
           .then(() => this.fetchEnvironments())
           .catch(() => {
             this.isLoading = false;
-            Flash(s__('Environments|An error occurred while making the request.'));
+            Flash(errorMessage || s__('Environments|An error occurred while making the request.'));
           });
       }
     },
@@ -106,6 +107,15 @@ export default {
         .catch(this.errorCallback);
     },
 
+    updateStopModal(environment) {
+      this.environmentInStopModal = environment;
+    },
+
+    stopEnvironment(environment) {
+      const endpoint = environment.stop_path;
+      const errorMessage = s__('Environments|An error occurred while stopping the environment, please try again');
+      this.postAction({ endpoint, errorMessage });
+    },
   },
 
   computed: {
@@ -162,9 +172,13 @@ export default {
     });
 
     eventHub.$on('postAction', this.postAction);
+    eventHub.$on('requestStopEnvironment', this.updateStopModal);
+    eventHub.$on('stopEnvironment', this.stopEnvironment);
   },
 
-  beforeDestroyed() {
-    eventHub.$off('postAction');
+  beforeDestroy() {
+    eventHub.$off('postAction', this.postAction);
+    eventHub.$off('requestStopEnvironment', this.updateStopModal);
+    eventHub.$off('stopEnvironment', this.stopEnvironment);
   },
 };

app/assets/javascripts/environments/services/environments_service.js

@@ -13,7 +13,7 @@ export default class EnvironmentsService {
 
   // eslint-disable-next-line class-methods-use-this
   postAction(endpoint) {
-    return axios.post(endpoint, {}, { emulateJSON: true });
+    return axios.post(endpoint, {});
   }
 
   getFolderContent(folderUrl) {

app/assets/javascripts/notes/components/note_form.vue

@@ -200,7 +200,7 @@ js-autosize markdown-area js-vue-issue-note-form js-vue-textarea"
           class="btn btn-cancel note-edit-cancel js-close-discussion-note-form"
           type="button"
           @click="cancelHandler()">
-          {{ __('Discard draft') }}
+          Cancel
         </button>
       </div>
     </form>

app/assets/javascripts/notes/stores/actions.js

@@ -15,6 +15,8 @@ let eTagPoll;
 
 export const expandDiscussion = ({ commit }, data) => commit(types.EXPAND_DISCUSSION, data);
 
+export const collapseDiscussion = ({ commit }, data) => commit(types.COLLAPSE_DISCUSSION, data);
+
 export const setNotesData = ({ commit }, data) => commit(types.SET_NOTES_DATA, data);
 
 export const setNoteableData = ({ commit }, data) => commit(types.SET_NOTEABLE_DATA, data);

app/assets/javascripts/notes/stores/mutation_types.js

 export const ADD_NEW_NOTE = 'ADD_NEW_NOTE';
 export const ADD_NEW_REPLY_TO_DISCUSSION = 'ADD_NEW_REPLY_TO_DISCUSSION';
 export const DELETE_NOTE = 'DELETE_NOTE';
-export const EXPAND_DISCUSSION = 'EXPAND_DISCUSSION';
 export const REMOVE_PLACEHOLDER_NOTES = 'REMOVE_PLACEHOLDER_NOTES';
 export const SET_NOTES_DATA = 'SET_NOTES_DATA';
 export const SET_NOTEABLE_DATA = 'SET_NOTEABLE_DATA';
@@ -11,12 +10,16 @@ export const SET_LAST_FETCHED_AT = 'SET_LAST_FETCHED_AT';
 export const SET_TARGET_NOTE_HASH = 'SET_TARGET_NOTE_HASH';
 export const SHOW_PLACEHOLDER_NOTE = 'SHOW_PLACEHOLDER_NOTE';
 export const TOGGLE_AWARD = 'TOGGLE_AWARD';
-export const TOGGLE_DISCUSSION = 'TOGGLE_DISCUSSION';
 export const UPDATE_NOTE = 'UPDATE_NOTE';
 export const UPDATE_DISCUSSION = 'UPDATE_DISCUSSION';
 export const SET_DISCUSSION_DIFF_LINES = 'SET_DISCUSSION_DIFF_LINES';
 export const SET_NOTES_FETCHED_STATE = 'SET_NOTES_FETCHED_STATE';
 
+// DISCUSSION
+export const COLLAPSE_DISCUSSION = 'COLLAPSE_DISCUSSION';
+export const EXPAND_DISCUSSION = 'EXPAND_DISCUSSION';
+export const TOGGLE_DISCUSSION = 'TOGGLE_DISCUSSION';
+
 // Issue
 export const CLOSE_ISSUE = 'CLOSE_ISSUE';
 export const REOPEN_ISSUE = 'REOPEN_ISSUE';

app/assets/javascripts/notes/stores/mutations.js

@@ -58,6 +58,11 @@ export default {
     discussion.expanded = true;
   },
 
+  [types.COLLAPSE_DISCUSSION](state, { discussionId }) {
+    const discussion = utils.findNoteObjectById(state.discussions, discussionId);
+    discussion.expanded = false;
+  },
+
   [types.REMOVE_PLACEHOLDER_NOTES](state) {
     const { discussions } = state;
 

app/assets/javascripts/pages/dashboard/todos/index/todos.js

@@ -39,7 +39,6 @@ export default class Todos {
   }
 
   initFilters() {
-    this.initFilterDropdown($('.js-group-search'), 'group_id', ['text']);
     this.initFilterDropdown($('.js-project-search'), 'project_id', ['text']);
     this.initFilterDropdown($('.js-type-search'), 'type');
     this.initFilterDropdown($('.js-action-search'), 'action_id');
@@ -54,16 +53,7 @@ export default class Todos {
       filterable: searchFields ? true : false,
       search: { fields: searchFields },
       data: $dropdown.data('data'),
-      clicked: () => {
-        const $formEl = $dropdown.closest('form.filter-form');
-        const mutexDropdowns = {
-          group_id: 'project_id',
-          project_id: 'group_id',
-        };
-
-        $formEl.find(`input[name="${mutexDropdowns[fieldName]}"]`).remove();
-        $formEl.submit();
-      },
+      clicked: () => $dropdown.closest('form.filter-form').submit(),
     });
   }
 

app/assets/javascripts/sidebar/components/todo_toggle/todo.vue

-<script>
-import { __ } from '~/locale';
-import tooltip from '~/vue_shared/directives/tooltip';
-
-import Icon from '~/vue_shared/components/icon.vue';
-import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
-
-const MARK_TEXT = __('Mark todo as done');
-const TODO_TEXT = __('Add todo');
-
-export default {
-  directives: {
-    tooltip,
-  },
-  components: {
-    Icon,
-    LoadingIcon,
-  },
-  props: {
-    issuableId: {
-      type: Number,
-      required: true,
-    },
-    issuableType: {
-      type: String,
-      required: true,
-    },
-    isTodo: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    isActionActive: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    collapsed: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    buttonClasses() {
-      return this.collapsed ?
-        'btn-blank btn-todo sidebar-collapsed-icon dont-change-state' :
-        'btn btn-default btn-todo issuable-header-btn float-right';
-    },
-    buttonLabel() {
-      return this.isTodo ? MARK_TEXT : TODO_TEXT;
-    },
-    collapsedButtonIconClasses() {
-      return this.isTodo ? 'todo-undone' : '';
-    },
-    collapsedButtonIcon() {
-      return this.isTodo ? 'todo-done' : 'todo-add';
-    },
-  },
-  methods: {
-    handleButtonClick() {
-      this.$emit('toggleTodo');
-    },
-  },
-};
-</script>
-
-<template>
-  <button
-    v-tooltip
-    :class="buttonClasses"
-    :title="buttonLabel"
-    :aria-label="buttonLabel"
-    :data-issuable-id="issuableId"
-    :data-issuable-type="issuableType"
-    type="button"
-    data-container="body"
-    data-placement="left"
-    data-boundary="viewport"
-    @click="handleButtonClick"
-  >
-    <icon
-      v-show="collapsed"
-      :css-classes="collapsedButtonIconClasses"
-      :name="collapsedButtonIcon"
-    />
-    <span
-      v-show="!collapsed"
-      class="issuable-todo-inner"
-    >
-      {{ buttonLabel }}
-    </span>
-    <loading-icon
-      v-show="isActionActive"
-      :inline="true"
-    />
-  </button>
-</template>

app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue

@@ -12,11 +12,6 @@ export default {
       type: Boolean,
       required: true,
     },
-    cssClasses: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
   computed: {
     tooltipLabel() {
@@ -35,12 +30,10 @@ export default {
   <button
     v-tooltip
     :title="tooltipLabel"
-    :class="cssClasses"
     type="button"
     class="btn btn-blank gutter-toggle btn-sidebar-action"
     data-container="body"
     data-placement="left"
-    data-boundary="viewport"
     @click="toggle"
   >
     <i

app/assets/stylesheets/pages/environments.scss

@@ -23,7 +23,7 @@
     }
 
     .btn-group {
-      > a {
+      > .btn:not(.btn-danger) {
         color: $gl-text-color-secondary;
       }
 

app/assets/stylesheets/pages/issuable.scss

@@ -449,7 +449,6 @@
 
       .todo-undone {
         color: $gl-link-color;
-        fill: $gl-link-color;
       }
 
       .author {

app/assets/stylesheets/pages/merge_requests.scss

@@ -116,10 +116,8 @@
 
       .modify-merge-commit-link {
         padding: 0;
-
         background-color: transparent;
         border: 0;
-
         color: $gl-text-color;
 
         &:hover,
@@ -501,10 +499,6 @@
   }
 }
 
-.merge-request-details .content-block {
-  border-bottom: 0;
-}
-
 .mr-source-target {
   display: flex;
   flex-wrap: wrap;

app/assets/stylesheets/pages/todos.scss

@@ -174,18 +174,6 @@
   }
 }
 
-@include media-breakpoint-down(lg) {
-  .todos-filters {
-    .filter-categories {
-      width: 75%;
-
-      .filter-item {
-        margin-bottom: 10px;
-      }
-    }
-  }
-}
-
 @include media-breakpoint-down(xs) {
   .todo {
     .avatar {
@@ -211,10 +199,6 @@
   }
 
   .todos-filters {
-    .filter-categories {
-      width: auto;
-    }
-
     .dropdown-menu-toggle {
       width: 100%;
     }

app/controllers/concerns/todos_actions.rb

-module TodosActions
-  extend ActiveSupport::Concern
-
-  def create
-    todo = TodoService.new.mark_todo(issuable, current_user)
-
-    render json: {
-      count: TodosFinder.new(current_user, state: :pending).execute.count,
-      delete_path: dashboard_todo_path(todo)
-    }
-  end
-end

app/controllers/dashboard/todos_controller.rb

@@ -70,7 +70,7 @@ class Dashboard::TodosController < Dashboard::ApplicationController
   end
 
   def todo_params
-    params.permit(:action_id, :author_id, :project_id, :type, :sort, :state, :group_id)
+    params.permit(:action_id, :author_id, :project_id, :type, :sort, :state)
   end
 
   def redirect_out_of_range(todos)

app/controllers/projects/environments_controller.rb

@@ -2,7 +2,7 @@ class Projects::EnvironmentsController < Projects::ApplicationController
   layout 'project'
   before_action :authorize_read_environment!
   before_action :authorize_create_environment!, only: [:new, :create]
-  before_action :authorize_create_deployment!, only: [:stop]
+  before_action :authorize_stop_environment!, only: [:stop]
   before_action :authorize_update_environment!, only: [:edit, :update]
   before_action :authorize_admin_environment!, only: [:terminal, :terminal_websocket_authorize]
   before_action :environment, only: [:show, :edit, :update, :stop, :terminal, :terminal_websocket_authorize, :metrics]
@@ -175,4 +175,8 @@ class Projects::EnvironmentsController < Projects::ApplicationController
   def environment
     @environment ||= project.environments.find(params[:id])
   end
+
+  def authorize_stop_environment!
+    access_denied! unless can?(current_user, :stop_environment, environment)
+  end
 end

app/controllers/projects/merge_requests_controller.rb

@@ -192,7 +192,7 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
           deployment = environment.first_deployment_for(@merge_request.diff_head_sha)
 
           stop_url =
-            if environment.stop_action? && can?(current_user, :create_deployment, environment)
+            if can?(current_user, :stop_environment, environment)
               stop_project_environment_path(project, environment)
             end
 

app/controllers/projects/todos_controller.rb

 class Projects::TodosController < Projects::ApplicationController
-  include Gitlab::Utils::StrongMemoize
-  include TodosActions
-
   before_action :authenticate_user!, only: [:create]
 
+  def create
+    todo = TodoService.new.mark_todo(issuable, current_user)
+
+    render json: {
+      count: TodosFinder.new(current_user, state: :pending).execute.count,
+      delete_path: dashboard_todo_path(todo)
+    }
+  end
+
   private
 
   def issuable
-    strong_memoize(:issuable) do
+    @issuable ||= begin
       case params[:issuable_type]
       when "issue"
         IssuesFinder.new(current_user, project_id: @project.id).find(params[:issuable_id])