Add latest changes from gitlab-org/gitlab@master

12 files changed, 60 insertions, 32 deletions

diff --git a/app/assets/javascripts/boards/components/board_assignee_dropdown.vue b/app/assets/javascripts/boards/components/board_assignee_dropdown.vue
index a04b1361d4e..b2c3b6aa8ab 100644
--- a/app/assets/javascripts/boards/components/board_assignee_dropdown.vue
+++ b/app/assets/javascripts/boards/components/board_assignee_dropdown.vue
@@ -26,7 +26,7 @@ export default {
   data() {
     return {
       participants: [],
-      selected: this.$store.getters.getActiveIssue.assignees,
+      selected: this.$store.getters.activeIssue.assignees,
     };
   },
   apollo: {
@@ -34,7 +34,7 @@ export default {
       query: getIssueParticipants,
       variables() {
         return {
-          id: `gid://gitlab/Issue/${this.getActiveIssue.iid}`,
+          id: `gid://gitlab/Issue/${this.activeIssue.iid}`,
         };
       },
       update(data) {
@@ -43,7 +43,7 @@ export default {
     },
   },
   computed: {
-    ...mapGetters(['getActiveIssue']),
+    ...mapGetters(['activeIssue']),
     assigneeText() {
       return n__('Assignee', '%d Assignees', this.selected.length);
     },
@@ -88,7 +88,7 @@ export default {
 <template>
   <board-editable-item :title="assigneeText" @close="saveAssignees">
     <template #collapsed>
-      <issuable-assignees :users="getActiveIssue.assignees" />
+      <issuable-assignees :users="activeIssue.assignees" />
     </template>
 
     <template #default>
diff --git a/app/assets/javascripts/boards/components/board_column.vue b/app/assets/javascripts/boards/components/board_column.vue
index 7a468abddf1..c8b713b0c5a 100644
--- a/app/assets/javascripts/boards/components/board_column.vue
+++ b/app/assets/javascripts/boards/components/board_column.vue
@@ -46,7 +46,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['getIssues']),
+    ...mapGetters(['getIssuesByList']),
     showBoardListAndBoardInfo() {
       return this.list.type !== ListType.promotion;
     },
@@ -58,7 +58,7 @@ export default {
       if (!this.glFeatures.graphqlBoardLists) {
         return this.list.issues;
       }
-      return this.getIssues(this.list.id);
+      return this.getIssuesByList(this.list.id);
     },
     shouldFetchIssues() {
       return this.glFeatures.graphqlBoardLists && this.list.type !== ListType.blank;
diff --git a/app/assets/javascripts/boards/components/board_settings_sidebar.vue b/app/assets/javascripts/boards/components/board_settings_sidebar.vue
index 06319df6ea5..80070b25bd0 100644
--- a/app/assets/javascripts/boards/components/board_settings_sidebar.vue
+++ b/app/assets/javascripts/boards/components/board_settings_sidebar.vue
@@ -69,14 +69,18 @@ export default {
     eventHub.$off('sidebar.closeAll', this.unsetActiveId);
   },
   methods: {
-    ...mapActions(['unsetActiveId']),
+    ...mapActions(['unsetActiveId', 'removeList']),
     showScopedLabels(label) {
       return boardsStore.scopedLabels.enabled && isScopedLabel(label);
     },
     deleteBoard() {
       // eslint-disable-next-line no-alert
-      if (window.confirm(__('Are you sure you want to delete this list?'))) {
-        this.activeList.destroy();
+      if (window.confirm(__('Are you sure you want to remove this list?'))) {
+        if (this.shouldUseGraphQL) {
+          this.removeList(this.activeId);
+        } else {
+          this.activeList.destroy();
+        }
         this.unsetActiveId();
       }
     },
diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js b/app/assets/javascripts/boards/components/new_list_dropdown.js
index c8926c5ef2a..47eee5306da 100644
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js
+++ b/app/assets/javascripts/boards/components/new_list_dropdown.js
@@ -7,6 +7,7 @@ import { deprecatedCreateFlash as flash } from '~/flash';
 import CreateLabelDropdown from '../../create_label';
 import boardsStore from '../stores/boards_store';
 import { fullLabelId } from '../boards_util';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import store from '~/boards/stores';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
@@ -61,7 +62,7 @@ export default function initNewListDropdown() {
         const active = boardsStore.findListByLabelId(label.id);
         const $li = $('<li />');
         const $a = $('<a />', {
-          class: active ? `is-active js-board-list-${active.id}` : '',
+          class: active ? `is-active js-board-list-${getIdFromGraphQLId(active.id)}` : '',
           text: label.title,
           href: '#',
         });
diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_due_date.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_due_date.vue
index 97fe7572493..19e6f8a2269 100644
--- a/app/assets/javascripts/boards/components/sidebar/board_sidebar_due_date.vue
+++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_due_date.vue
@@ -18,7 +18,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({ issue: 'getActiveIssue' }),
+    ...mapGetters({ issue: 'activeIssue' }),
     hasDueDate() {
       return this.issue.dueDate != null;
     },
diff --git a/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue b/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue
index 0f063c7582e..31094939733 100644
--- a/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue
+++ b/app/assets/javascripts/boards/components/sidebar/board_sidebar_labels_select.vue
@@ -21,7 +21,7 @@ export default {
   },
   inject: ['labelsFetchPath', 'labelsManagePath', 'labelsFilterBasePath'],
   computed: {
-    ...mapGetters({ issue: 'getActiveIssue' }),
+    ...mapGetters({ issue: 'activeIssue' }),
     selectedLabels() {
       const { labels = [] } = this.issue;
 
diff --git a/app/assets/javascripts/boards/queries/board_list_destroy.mutation.graphql b/app/assets/javascripts/boards/queries/board_list_destroy.mutation.graphql
new file mode 100644
index 00000000000..ef3fd36e980
--- /dev/null
+++ b/app/assets/javascripts/boards/queries/board_list_destroy.mutation.graphql
@@ -0,0 +1,5 @@
+mutation DestroyBoardList($listId: ID!) {
+  destroyBoardList(input: { listId: $listId }) {
+    errors
+  }
+}
diff --git a/app/assets/javascripts/boards/stores/actions.js b/app/assets/javascripts/boards/stores/actions.js
index df5b84a974a..bbc7559cd86 100644
--- a/app/assets/javascripts/boards/stores/actions.js
+++ b/app/assets/javascripts/boards/stores/actions.js
@@ -18,6 +18,7 @@ import boardLabelsQuery from '../queries/board_labels.query.graphql';
 import createBoardListMutation from '../queries/board_list_create.mutation.graphql';
 import updateBoardListMutation from '../queries/board_list_update.mutation.graphql';
 import issueMoveListMutation from '../queries/issue_move_list.mutation.graphql';
+import destroyBoardListMutation from '../queries/board_list_destroy.mutation.graphql';
 import updateAssignees from '~/vue_shared/components/sidebar/queries/updateAssignees.mutation.graphql';
 import issueSetLabels from '../queries/issue_set_labels.mutation.graphql';
 import issueSetDueDate from '../queries/issue_set_due_date.mutation.graphql';
@@ -212,8 +213,26 @@ export default {
       });
   },
 
-  deleteList: () => {
-    notImplemented();
+  removeList: ({ state, commit }, listId) => {
+    const listsBackup = { ...state.boardLists };
+
+    commit(types.REMOVE_LIST, listId);
+
+    return gqlClient
+      .mutate({
+        mutation: destroyBoardListMutation,
+        variables: {
+          listId,
+        },
+      })
+      .then(({ data: { destroyBoardList: { errors } } }) => {
+        if (errors.length > 0) {
+          commit(types.REMOVE_LIST_FAILURE, listsBackup);
+        }
+      })
+      .catch(() => {
+        commit(types.REMOVE_LIST_FAILURE, listsBackup);
+      });
   },
 
   fetchIssuesForList: ({ state, commit }, { listId, fetchNext = false }) => {
@@ -324,7 +343,7 @@ export default {
   },
 
   setActiveIssueLabels: async ({ commit, getters }, input) => {
-    const activeIssue = getters.getActiveIssue;
+    const { activeIssue } = getters;
     const { data } = await gqlClient.mutate({
       mutation: issueSetLabels,
       variables: {
@@ -349,7 +368,7 @@ export default {
   },
 
   setActiveIssueDueDate: async ({ commit, getters }, input) => {
-    const activeIssue = getters.getActiveIssue;
+    const { activeIssue } = getters;
     const { data } = await gqlClient.mutate({
       mutation: issueSetDueDate,
       variables: {
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index d1a5db1bcc5..337b2897fe9 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -1,7 +1,6 @@
 /* eslint-disable no-shadow, no-param-reassign,consistent-return */
 /* global List */
 /* global ListIssue */
-import $ from 'jquery';
 import { sortBy, pick } from 'lodash';
 import Vue from 'vue';
 import Cookies from 'js-cookie';
@@ -119,8 +118,12 @@ const boardsStore = {
         // https://gitlab.com/gitlab-org/gitlab-foss/issues/30821
       });
   },
+
   updateNewListDropdown(listId) {
-    $(`.js-board-list-${listId}`).removeClass('is-active');
+    // eslint-disable-next-line no-unused-expressions
+    document
+      .querySelector(`.js-board-list-${getIdFromGraphQLId(listId)}`)
+      ?.classList.remove('is-active');
   },
   shouldAddBlankState() {
     // Decide whether to add the blank state
diff --git a/app/assets/javascripts/boards/stores/getters.js b/app/assets/javascripts/boards/stores/getters.js
index 89a3b14b262..f717b4101ab 100644
--- a/app/assets/javascripts/boards/stores/getters.js
+++ b/app/assets/javascripts/boards/stores/getters.js
@@ -2,7 +2,7 @@ import { find } from 'lodash';
 import { inactiveId } from '../constants';
 
 export default {
-  getLabelToggleState: state => (state.isShowingLabels ? 'on' : 'off'),
+  labelToggleState: state => (state.isShowingLabels ? 'on' : 'off'),
   isSidebarOpen: state => state.activeId !== inactiveId,
   isSwimlanesOn: state => {
     if (!gon?.features?.boardsWithSwimlanes && !gon?.features?.swimlanes) {
@@ -15,12 +15,12 @@ export default {
     return state.issues[id] || {};
   },
 
-  getIssues: (state, getters) => listId => {
+  getIssuesByList: (state, getters) => listId => {
     const listIssueIds = state.issuesByListId[listId] || [];
     return listIssueIds.map(id => getters.getIssueById(id));
   },
 
-  getActiveIssue: state => {
+  activeIssue: state => {
     return state.issues[state.activeId] || {};
   },
 
diff --git a/app/assets/javascripts/boards/stores/mutation_types.js b/app/assets/javascripts/boards/stores/mutation_types.js
index d5ddba710a9..29468105b5c 100644
--- a/app/assets/javascripts/boards/stores/mutation_types.js
+++ b/app/assets/javascripts/boards/stores/mutation_types.js
@@ -12,9 +12,8 @@ export const RECEIVE_ADD_LIST_SUCCESS = 'RECEIVE_ADD_LIST_SUCCESS';
 export const RECEIVE_ADD_LIST_ERROR = 'RECEIVE_ADD_LIST_ERROR';
 export const MOVE_LIST = 'MOVE_LIST';
 export const UPDATE_LIST_FAILURE = 'UPDATE_LIST_FAILURE';
-export const REQUEST_REMOVE_LIST = 'REQUEST_REMOVE_LIST';
-export const RECEIVE_REMOVE_LIST_SUCCESS = 'RECEIVE_REMOVE_LIST_SUCCESS';
-export const RECEIVE_REMOVE_LIST_ERROR = 'RECEIVE_REMOVE_LIST_ERROR';
+export const REMOVE_LIST = 'REMOVE_LIST';
+export const REMOVE_LIST_FAILURE = 'REMOVE_LIST_FAILURE';
 export const REQUEST_ISSUES_FOR_LIST = 'REQUEST_ISSUES_FOR_LIST';
 export const RECEIVE_ISSUES_FOR_LIST_FAILURE = 'RECEIVE_ISSUES_FOR_LIST_FAILURE';
 export const RECEIVE_ISSUES_FOR_LIST_SUCCESS = 'RECEIVE_ISSUES_FOR_LIST_SUCCESS';
diff --git a/app/assets/javascripts/boards/stores/mutations.js b/app/assets/javascripts/boards/stores/mutations.js
index 361bb94abe0..eb2003a6ed3 100644
--- a/app/assets/javascripts/boards/stores/mutations.js
+++ b/app/assets/javascripts/boards/stores/mutations.js
@@ -93,16 +93,13 @@ export default {
     Vue.set(state, 'boardLists', backupList);
   },
 
-  [mutationTypes.REQUEST_REMOVE_LIST]: () => {
-    notImplemented();
+  [mutationTypes.REMOVE_LIST]: (state, listId) => {
+    Vue.delete(state.boardLists, listId);
   },
 
-  [mutationTypes.RECEIVE_REMOVE_LIST_SUCCESS]: () => {
-    notImplemented();
-  },
-
-  [mutationTypes.RECEIVE_REMOVE_LIST_ERROR]: () => {
-    notImplemented();
+  [mutationTypes.REMOVE_LIST_FAILURE](state, listsBackup) {
+    state.error = s__('Boards|An error occurred while removing the list. Please try again.');
+    state.boardLists = listsBackup;
   },
 
   [mutationTypes.REQUEST_ISSUES_FOR_LIST]: (state, { listId, fetchNext }) => {