Add latest changes from gitlab-org/gitlab@master

6 files changed, 74 insertions, 69 deletions

diff --git a/app/assets/javascripts/boards/boards_util.js b/app/assets/javascripts/boards/boards_util.js
index 0142c95e773..4961017b6af 100644
--- a/app/assets/javascripts/boards/boards_util.js
+++ b/app/assets/javascripts/boards/boards_util.js
@@ -1,4 +1,5 @@
 import { sortBy } from 'lodash';
+import axios from '~/lib/utils/axios_utils';
 import { ListType } from './constants';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import boardsStore from '~/boards/stores/boards_store';
@@ -108,10 +109,20 @@ export function moveIssueListHelper(issue, fromList, toList) {
   return updatedIssue;
 }
 
+export function getBoardsPath(endpoint, board) {
+  const path = `${endpoint}${board.id ? `/${board.id}` : ''}.json`;
+
+  if (board.id) {
+    return axios.put(path, { board });
+  }
+  return axios.post(path, { board });
+}
+
 export default {
   getMilestone,
   formatIssue,
   formatListIssues,
   fullBoardId,
   fullLabelId,
+  getBoardsPath,
 };
diff --git a/app/assets/javascripts/boards/components/board_form.vue b/app/assets/javascripts/boards/components/board_form.vue
index 74d538d68ed..ad6829c2e20 100644
--- a/app/assets/javascripts/boards/components/board_form.vue
+++ b/app/assets/javascripts/boards/components/board_form.vue
@@ -1,11 +1,14 @@
 <script>
 import { GlModal } from '@gitlab/ui';
+import { pick } from 'lodash';
 import { __, s__ } from '~/locale';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import { visitUrl } from '~/lib/utils/url_utility';
 import boardsStore from '~/boards/stores/boards_store';
+import { fullBoardId, getBoardsPath } from '../boards_util';
 
 import BoardConfigurationOptions from './board_configuration_options.vue';
+import createBoardMutation from '../graphql/board.mutation.graphql';
 
 const boardDefaults = {
   id: false,
@@ -81,11 +84,19 @@ export default {
       required: false,
       default: false,
     },
+    currentBoard: {
+      type: Object,
+      required: true,
+    },
+  },
+  inject: {
+    endpoints: {
+      default: {},
+    },
   },
   data() {
     return {
       board: { ...boardDefaults, ...this.currentBoard },
-      currentBoard: boardsStore.state.currentBoard,
       currentPage: boardsStore.state.currentPage,
       isLoading: false,
     };
@@ -143,6 +154,15 @@ export default {
         text: this.$options.i18n.cancelButtonText,
       };
     },
+    boardPayload() {
+      const { assignee, milestone, labels } = this.board;
+      return {
+        ...this.board,
+        assignee_id: assignee?.id,
+        milestone_id: milestone?.id,
+        label_ids: labels.length ? labels.map(b => b.id) : [''],
+      };
+    },
   },
   mounted() {
     this.resetFormState();
@@ -151,6 +171,31 @@ export default {
     }
   },
   methods: {
+    callBoardMutation(id) {
+      return this.$apollo.mutate({
+        mutation: createBoardMutation,
+        variables: {
+          ...pick(this.boardPayload, ['hideClosedList', 'hideBacklogList']),
+          id,
+        },
+      });
+    },
+    async updateBoard() {
+      const responses = await Promise.all([
+        // Remove unnecessary REST API call when https://gitlab.com/gitlab-org/gitlab/-/issues/282299#note_462996301 is resolved
+        getBoardsPath(this.endpoints.boardsEndpoint, this.boardPayload),
+        this.callBoardMutation(fullBoardId(this.boardPayload.id)),
+      ]);
+
+      return responses[0].data;
+    },
+    async createBoard() {
+      // TODO: change this to use `createBoard` mutation https://gitlab.com/gitlab-org/gitlab/-/issues/292466 is resolved
+      const boardData = await getBoardsPath(this.endpoints.boardsEndpoint, this.boardPayload);
+      await this.callBoardMutation(fullBoardId(boardData.data.id));
+
+      return boardData.data || boardData;
+    },
     submit() {
       if (this.board.name.length === 0) return;
       this.isLoading = true;
@@ -166,21 +211,9 @@ export default {
             this.isLoading = false;
           });
       } else {
-        boardsStore
-          .createBoard(this.board)
-          .then(resp => {
-            // This handles 2 use cases
-            // - In create call we only get one parameter, the new board
-            // - In update call, due to Promise.all, we get REST response in
-            // array index 0
-
-            if (Array.isArray(resp)) {
-              return resp[0].data;
-            }
-            return resp.data ? resp.data : resp;
-          })
+        const boardAction = this.boardPayload.id ? this.updateBoard : this.createBoard;
+        boardAction()
           .then(data => {
-            this.isLoading = false;
             visitUrl(data.board_path);
           })
           .catch(() => {
@@ -219,9 +252,11 @@ export default {
     @close="cancel"
     @hide.prevent
   >
-    <p v-if="isDeleteForm">{{ $options.i18n.deleteConfirmationMessage }}</p>
-    <form v-else class="js-board-config-modal" @submit.prevent>
-      <div v-if="!readonly" class="gl-mb-5">
+    <p v-if="isDeleteForm" data-testid="delete-confirmation-message">
+      {{ $options.i18n.deleteConfirmationMessage }}
+    </p>
+    <form v-else class="js-board-config-modal" data-testid="board-form-wrapper" @submit.prevent>
+      <div v-if="!readonly" class="gl-mb-5" data-testid="board-form">
         <label class="gl-font-weight-bold gl-font-lg" for="board-new-name">
           {{ $options.i18n.titleFieldLabel }}
         </label>
diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue
index 7fc91bc4aee..b0521e69b93 100644
--- a/app/assets/javascripts/boards/components/boards_selector.vue
+++ b/app/assets/javascripts/boards/components/boards_selector.vue
@@ -345,6 +345,7 @@ export default {
         :scoped-issue-board-feature-enabled="scopedIssueBoardFeatureEnabled"
         :weights="weights"
         :enable-scoped-labels="enabledScopedLabels"
+        :current-board="currentBoard"
       />
     </span>
   </div>
diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js
index cb9782b08ed..a58afa759fb 100644
--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@@ -349,5 +349,8 @@ export default () => {
     toggleEpicsSwimlanes();
   }
 
-  mountMultipleBoardsSwitcher();
+  mountMultipleBoardsSwitcher({
+    boardsEndpoint: $boardApp.dataset.boardsEndpoint,
+    recentBoardsEndpoint: $boardApp.dataset.recentBoardsEndpoint,
+  });
 };
diff --git a/app/assets/javascripts/boards/mount_multiple_boards_switcher.js b/app/assets/javascripts/boards/mount_multiple_boards_switcher.js
index 51bb72b7657..df65ebb7526 100644
--- a/app/assets/javascripts/boards/mount_multiple_boards_switcher.js
+++ b/app/assets/javascripts/boards/mount_multiple_boards_switcher.js
@@ -10,7 +10,7 @@ const apolloProvider = new VueApollo({
   defaultClient: createDefaultClient(),
 });
 
-export default () => {
+export default (endpoints = {}) => {
   const boardsSwitcherElement = document.getElementById('js-multiple-boards-switcher');
   return new Vue({
     el: boardsSwitcherElement,
@@ -35,6 +35,9 @@ export default () => {
 
       return { boardsSelectorProps };
     },
+    provide: {
+      endpoints,
+    },
     render(createElement) {
       return createElement(BoardsSelector, {
         props: this.boardsSelectorProps,
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index 4505155d7d6..90ca4851a4c 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-shadow, no-param-reassign,consistent-return */
 /* global List */
 /* global ListIssue */
-import { sortBy, pick } from 'lodash';
+import { sortBy } from 'lodash';
 import Vue from 'vue';
 import BoardsStoreEE from 'ee_else_ce/boards/stores/boards_store_ee';
 import {
@@ -21,8 +21,6 @@ import ListLabel from '../models/label';
 import ListAssignee from '../models/assignee';
 import ListMilestone from '../models/milestone';
 
-import createBoardMutation from '../graphql/board.mutation.graphql';
-
 const PER_PAGE = 20;
 export const gqlClient = createDefaultClient();
 
@@ -759,52 +757,6 @@ const boardsStore = {
     return axios.get(this.state.endpoints.recentBoardsEndpoint);
   },
 
-  createBoard(board) {
-    const boardPayload = { ...board };
-    boardPayload.label_ids = (board.labels || []).map(b => b.id);
-
-    if (boardPayload.label_ids.length === 0) {
-      boardPayload.label_ids = [''];
-    }
-
-    if (boardPayload.assignee) {
-      boardPayload.assignee_id = boardPayload.assignee.id;
-    }
-
-    if (boardPayload.milestone) {
-      boardPayload.milestone_id = boardPayload.milestone.id;
-    }
-
-    if (boardPayload.id) {
-      const input = {
-        ...pick(boardPayload, ['hideClosedList', 'hideBacklogList']),
-        id: this.generateBoardGid(boardPayload.id),
-      };
-
-      return Promise.all([
-        axios.put(this.generateBoardsPath(boardPayload.id), { board: boardPayload }),
-        gqlClient.mutate({
-          mutation: createBoardMutation,
-          variables: input,
-        }),
-      ]);
-    }
-
-    return axios
-      .post(this.generateBoardsPath(), { board: boardPayload })
-      .then(resp => resp.data)
-      .then(data => {
-        gqlClient.mutate({
-          mutation: createBoardMutation,
-          variables: {
-            ...pick(boardPayload, ['hideClosedList', 'hideBacklogList']),
-            id: this.generateBoardGid(data.id),
-          },
-        });
-        return data;
-      });
-  },
-
   deleteBoard({ id }) {
     return axios.delete(this.generateBoardsPath(id));
   },