Merge branch 'ce-5787-extract-ee-boards' into 'master'

Port of EE refactoring to extract EE lines from boards

See merge request gitlab-org/gitlab-ce!19486

app/assets/javascripts/boards/components/modal/footer.vue

@@ -28,23 +28,29 @@ export default {
     },
   },
   methods: {
+    buildUpdateRequest(list) {
+      return {
+        add_label_ids: [list.label.id],
+      };
+    },
     addIssues() {
       const firstListIndex = 1;
       const list = this.modal.selectedList || this.state.lists[firstListIndex];
       const selectedIssues = ModalStore.getSelectedIssues();
       const issueIds = selectedIssues.map(issue => issue.id);
+      const req = this.buildUpdateRequest(list);
 
       // Post the data to the backend
-      gl.boardService.bulkUpdate(issueIds, {
-        add_label_ids: [list.label.id],
-      }).catch(() => {
-        Flash(__('Failed to update issues, please try again.'));
+      gl.boardService
+        .bulkUpdate(issueIds, req)
+        .catch(() => {
+          Flash(__('Failed to update issues, please try again.'));
 
-        selectedIssues.forEach((issue) => {
-          list.removeIssue(issue);
-          list.issuesSize -= 1;
+          selectedIssues.forEach((issue) => {
+            list.removeIssue(issue);
+            list.issuesSize -= 1;
+          });
         });
-      });
 
       // Add the issues on the frontend
       selectedIssues.forEach((issue) => {

app/assets/javascripts/boards/components/modal/list.vue

@@ -121,8 +121,7 @@
     <div
       v-if="issuesCount > 0 && issues.length === 0"
       class="empty-state add-issues-empty-state-filter text-center">
-      <div
-        class="svg-content">
+      <div class="svg-content">
         <img :src="emptyStateSvg" />
       </div>
       <div class="text-content">

app/assets/javascripts/boards/components/sidebar/remove_issue.vue

@@ -5,7 +5,7 @@
 
   const Store = gl.issueBoards.BoardsStore;
 
-  export default {
+  export default Vue.extend({
     props: {
       issue: {
         type: Object,
@@ -25,19 +25,16 @@
       removeIssue() {
         const { issue } = this;
         const lists = issue.getLists();
-        const listLabelIds = lists.map(list => list.label.id);
-
-        let labelIds = issue.labels.map(label => label.id).filter(id => !listLabelIds.includes(id));
-        if (labelIds.length === 0) {
-          labelIds = [''];
-        }
+        const req = this.buildPatchRequest(issue, lists);
 
         const data = {
-          issue: {
-            label_ids: labelIds,
-          },
+          issue: this.seedPatchRequest(issue, req),
         };
 
+        if (data.issue.label_ids.length === 0) {
+          data.issue.label_ids = [''];
+        }
+
         // Post the remove data
         Vue.http.patch(this.updateUrl, data).catch(() => {
           Flash(__('Failed to remove issue from board, please try again.'));
@@ -54,8 +51,30 @@
 
         Store.detail.issue = {};
       },
+      /**
+      * Build the default patch request.
+      */
+      buildPatchRequest(issue, lists) {
+        const listLabelIds = lists.map(list => list.label.id);
+
+        const labelIds = issue.labels
+          .map(label => label.id)
+          .filter(id => !listLabelIds.includes(id));
+
+        return {
+          label_ids: labelIds,
+        };
+      },
+      /**
+      * Seed the given patch request.
+      *
+      * (This is overridden in EE)
+      */
+      seedPatchRequest(issue, req) {
+        return req;
+      },
     },
-  };
+  });
 </script>
 <template>
   <div

app/assets/javascripts/boards/models/issue.js

@@ -4,6 +4,7 @@
 /* global ListAssignee */
 
 import Vue from 'vue';
+import '~/vue_shared/models/label';
 import IssueProject from './project';
 
 class ListIssue {

app/assets/javascripts/boards/models/list.js

@@ -7,6 +7,24 @@ import queryData from '../utils/query_data';
 
 const PER_PAGE = 20;
 
+const TYPES = {
+  backlog: {
+    isPreset: true,
+    isExpandable: true,
+    isBlank: false,
+  },
+  closed: {
+    isPreset: true,
+    isExpandable: true,
+    isBlank: false,
+  },
+  blank: {
+    isPreset: true,
+    isExpandable: false,
+    isBlank: true,
+  },
+};
+
 class List {
   constructor(obj, defaultAvatar) {
     this.id = obj.id;
@@ -14,8 +32,10 @@ class List {
     this.position = obj.position;
     this.title = obj.title;
     this.type = obj.list_type;
-    this.preset = ['backlog', 'closed', 'blank'].indexOf(this.type) > -1;
-    this.isExpandable = ['backlog', 'closed'].indexOf(this.type) > -1;
+
+    const typeInfo = this.getTypeInfo(this.type);
+    this.preset = !!typeInfo.isPreset;
+    this.isExpandable = !!typeInfo.isExpandable;
     this.isExpanded = true;
     this.page = 1;
     this.loading = true;
@@ -31,7 +51,7 @@ class List {
       this.title = this.assignee.name;
     }
 
-    if (this.type !== 'blank' && this.id) {
+    if (!typeInfo.isBlank && this.id) {
       this.getIssues().catch(() => {
         // TODO: handle request error
       });
@@ -107,7 +127,7 @@ class List {
     return gl.boardService
       .getIssuesForList(this.id, data)
       .then(res => res.data)
-      .then((data) => {
+      .then(data => {
         this.loading = false;
         this.issuesSize = data.size;
 
@@ -126,18 +146,7 @@ class List {
     return gl.boardService
       .newIssue(this.id, issue)
       .then(res => res.data)
-      .then((data) => {
-        issue.id = data.id;
-        issue.iid = data.iid;
-        issue.project = data.project;
-        issue.path = data.real_path;
-        issue.referencePath = data.reference_path;
-
-        if (this.issuesSize > 1) {
-          const moveBeforeId = this.issues[1].id;
-          gl.boardService.moveIssue(issue.id, null, null, null, moveBeforeId);
-        }
-      });
+      .then(data => this.onNewIssueResponse(issue, data));
   }
 
   createIssues(data) {
@@ -217,6 +226,25 @@ class List {
       return !matchesRemove;
     });
   }
+
+  getTypeInfo (type) {
+    return TYPES[type] || {};
+  }
+
+  onNewIssueResponse (issue, data) {
+    issue.id = data.id;
+    issue.iid = data.iid;
+    issue.project = data.project;
+    issue.path = data.real_path;
+    issue.referencePath = data.reference_path;
+
+    if (this.issuesSize > 1) {
+      const moveBeforeId = this.issues[1].id;
+      gl.boardService.moveIssue(issue.id, null, null, null, moveBeforeId);
+    }
+  }
 }
 
 window.List = List;
+
+export default List;

app/assets/javascripts/milestone_select.js

@@ -5,6 +5,7 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import { __ } from '~/locale';
+import '~/gl_dropdown';
 import axios from './lib/utils/axios_utils';
 import { timeFor } from './lib/utils/datetime_utility';
 import ModalStore from './boards/stores/modal_store';
@@ -251,3 +252,5 @@ export default class MilestoneSelect {
     });
   }
 }
+
+window.MilestoneSelect = MilestoneSelect;