Add latest changes from gitlab-org/gitlab@master

2 files changed, 26 insertions, 29 deletions

diff --git a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue
index 0851ee21289..62b7e02c52a 100644
--- a/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue
+++ b/app/assets/javascripts/sidebar/components/labels/sidebar_labels.vue
@@ -1,7 +1,6 @@
 <script>
 import $ from 'jquery';
 import { difference, union } from 'lodash';
-import { mapState, mapActions } from 'vuex';
 import flash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
@@ -26,47 +25,49 @@ export default {
     'projectIssuesPath',
     'projectPath',
   ],
-  data: () => ({
-    labelsSelectInProgress: false,
-  }),
-  computed: {
-    ...mapState(['selectedLabels']),
-  },
-  mounted() {
-    this.setInitialState({
+  data() {
+    return {
+      isLabelsSelectInProgress: false,
       selectedLabels: this.initiallySelectedLabels,
-    });
+    };
   },
   methods: {
-    ...mapActions(['setInitialState', 'replaceSelectedLabels']),
     handleDropdownClose() {
       $(this.$el).trigger('hidden.gl.dropdown');
     },
-    handleUpdateSelectedLabels(labels) {
+    handleUpdateSelectedLabels(dropdownLabels) {
       const currentLabelIds = this.selectedLabels.map(label => label.id);
-      const userAddedLabelIds = labels.filter(label => label.set).map(label => label.id);
-      const userRemovedLabelIds = labels.filter(label => !label.set).map(label => label.id);
+      const userAddedLabelIds = dropdownLabels.filter(label => label.set).map(label => label.id);
+      const userRemovedLabelIds = dropdownLabels.filter(label => !label.set).map(label => label.id);
 
-      const issuableLabels = difference(
-        union(currentLabelIds, userAddedLabelIds),
-        userRemovedLabelIds,
-      );
+      const labelIds = difference(union(currentLabelIds, userAddedLabelIds), userRemovedLabelIds);
 
-      this.labelsSelectInProgress = true;
+      this.updateSelectedLabels(labelIds);
+    },
+    handleLabelRemove(labelId) {
+      const currentLabelIds = this.selectedLabels.map(label => label.id);
+      const labelIds = difference(currentLabelIds, [labelId]);
+
+      this.updateSelectedLabels(labelIds);
+    },
+    updateSelectedLabels(labelIds) {
+      this.isLabelsSelectInProgress = true;
 
       axios({
         data: {
           [this.issuableType]: {
-            label_ids: issuableLabels,
+            label_ids: labelIds,
           },
         },
         method: 'put',
         url: this.labelsUpdatePath,
       })
-        .then(({ data }) => this.replaceSelectedLabels(data.labels))
+        .then(({ data }) => {
+          this.selectedLabels = data.labels;
+        })
         .catch(() => flash(__('An error occurred while updating labels.')))
         .finally(() => {
-          this.labelsSelectInProgress = false;
+          this.isLabelsSelectInProgress = false;
         });
     },
   },
@@ -76,6 +77,7 @@ export default {
 <template>
   <labels-select
     class="block labels js-labels-block"
+    :allow-label-remove="true"
     :allow-label-create="allowLabelCreate"
     :allow-label-edit="allowLabelEdit"
     :allow-multiselect="true"
@@ -86,11 +88,12 @@ export default {
     :labels-fetch-path="labelsFetchPath"
     :labels-filter-base-path="projectIssuesPath"
     :labels-manage-path="labelsManagePath"
-    :labels-select-in-progress="labelsSelectInProgress"
+    :labels-select-in-progress="isLabelsSelectInProgress"
     :selected-labels="selectedLabels"
     :variant="$options.sidebar"
     data-qa-selector="labels_block"
     @onDropdownClose="handleDropdownClose"
+    @onLabelRemove="handleLabelRemove"
     @updateSelectedLabels="handleUpdateSelectedLabels"
   >
     {{ __('None') }}
diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index a25a7b0b2fe..00b4e2de5e5 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -1,7 +1,6 @@
 import $ from 'jquery';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import Vuex from 'vuex';
 import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking.vue';
 import SidebarAssignees from './components/assignees/sidebar_assignees.vue';
 import SidebarLabels from './components/labels/sidebar_labels.vue';
@@ -17,11 +16,9 @@ import createDefaultClient from '~/lib/graphql';
 import { isInIssuePage, isInIncidentPage, parseBoolean } from '~/lib/utils/common_utils';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
-import labelsSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store';
 
 Vue.use(Translate);
 Vue.use(VueApollo);
-Vue.use(Vuex);
 
 function getSidebarOptions(sidebarOptEl = document.querySelector('.js-sidebar-options')) {
   return JSON.parse(sidebarOptEl.innerHTML);
@@ -94,8 +91,6 @@ export function mountSidebarLabels() {
     return false;
   }
 
-  const labelsStore = new Vuex.Store(labelsSelectModule());
-
   return new Vue({
     el,
     provide: {
@@ -105,7 +100,6 @@ export function mountSidebarLabels() {
       allowScopedLabels: parseBoolean(el.dataset.allowScopedLabels),
       initiallySelectedLabels: JSON.parse(el.dataset.selectedLabels),
     },
-    store: labelsStore,
     render: createElement => createElement(SidebarLabels),
   });
 }