Add latest changes from gitlab-org/gitlab@master

7 files changed, 111 insertions, 33 deletions

diff --git a/app/assets/javascripts/boards/components/boards_selector.vue b/app/assets/javascripts/boards/components/boards_selector.vue
index 5e8b80cd959..8b44ccfd276 100644
--- a/app/assets/javascripts/boards/components/boards_selector.vue
+++ b/app/assets/javascripts/boards/components/boards_selector.vue
@@ -10,6 +10,11 @@ import {
 } from '@gitlab/ui';
 
 import httpStatusCodes from '~/lib/utils/http_status';
+
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import projectQuery from '../queries/project_boards.query.graphql';
+import groupQuery from '../queries/group_boards.query.graphql';
+
 import boardsStore from '../stores/boards_store';
 import BoardForm from './board_form.vue';
 
@@ -88,8 +93,9 @@ export default {
   },
   data() {
     return {
-      loading: true,
       hasScrollFade: false,
+      loadingBoards: 0,
+      loadingRecentBoards: false,
       scrollFadeInitialized: false,
       boards: [],
       recentBoards: [],
@@ -102,6 +108,12 @@ export default {
     };
   },
   computed: {
+    parentType() {
+      return this.groupId ? 'group' : 'project';
+    },
+    loading() {
+      return this.loadingRecentBoards && this.loadingBoards;
+    },
     currentPage() {
       return this.state.currentPage;
     },
@@ -147,49 +159,71 @@ export default {
         return;
       }
 
-      const recentBoardsPromise = new Promise((resolve, reject) =>
-        boardsStore
-          .recentBoards()
-          .then(resolve)
-          .catch(err => {
-            /**
-             *  If user is unauthorized we'd still want to resolve the
-             *  request to display all boards.
-             */
-            if (err.response.status === httpStatusCodes.UNAUTHORIZED) {
-              resolve({ data: [] }); // recent boards are empty
-              return;
-            }
-            reject(err);
-          }),
-      );
+      this.$apollo.addSmartQuery('boards', {
+        variables() {
+          return { fullPath: this.state.endpoints.fullPath };
+        },
+        query() {
+          return this.groupId ? groupQuery : projectQuery;
+        },
+        loadingKey: 'loadingBoards',
+        update(data) {
+          if (!data?.[this.parentType]) {
+            return [];
+          }
+          return data[this.parentType].boards.edges.map(({ node }) => ({
+            id: getIdFromGraphQLId(node.id),
+            name: node.name,
+          }));
+        },
+      });
 
-      Promise.all([boardsStore.allBoards(), recentBoardsPromise])
-        .then(([allBoards, recentBoards]) => [allBoards.data, recentBoards.data])
-        .then(([allBoardsJson, recentBoardsJson]) => {
-          this.loading = false;
-          this.boards = allBoardsJson;
-          this.recentBoards = recentBoardsJson;
+      this.loadingRecentBoards = true;
+      boardsStore
+        .recentBoards()
+        .then(res => {
+          this.recentBoards = res.data;
+        })
+        .catch(err => {
+          /**
+           *  If user is unauthorized we'd still want to resolve the
+           *  request to display all boards.
+           */
+          if (err?.response?.status === httpStatusCodes.UNAUTHORIZED) {
+            this.recentBoards = []; // recent boards are empty
+            return;
+          }
+          throw err;
         })
         .then(() => this.$nextTick()) // Wait for boards list in DOM
         .then(() => {
           this.setScrollFade();
         })
-        .catch(() => {
-          this.loading = false;
+        .catch(() => {})
+        .finally(() => {
+          this.loadingRecentBoards = false;
         });
     },
     isScrolledUp() {
       const { content } = this.$refs;
+
+      if (!content) {
+        return false;
+      }
+
       const currentPosition = this.contentClientHeight + content.scrollTop;
 
-      return content && currentPosition < this.maxPosition;
+      return currentPosition < this.maxPosition;
     },
     initScrollFade() {
-      this.scrollFadeInitialized = true;
-
       const { content } = this.$refs;
 
+      if (!content) {
+        return;
+      }
+
+      this.scrollFadeInitialized = true;
+
       this.contentClientHeight = content.clientHeight;
       this.maxPosition = content.scrollHeight;
     },
diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js
index f1b481fc386..f72fc8d54b3 100644
--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@@ -98,6 +98,7 @@ export default () => {
         listsEndpoint: this.listsEndpoint,
         bulkUpdatePath: this.bulkUpdatePath,
         boardId: this.boardId,
+        fullPath: $boardApp.dataset.fullPath,
       });
       boardsStore.rootPath = this.boardsEndpoint;
 
diff --git a/app/assets/javascripts/boards/mount_multiple_boards_switcher.js b/app/assets/javascripts/boards/mount_multiple_boards_switcher.js
index 8d22f009784..73d37459bfe 100644
--- a/app/assets/javascripts/boards/mount_multiple_boards_switcher.js
+++ b/app/assets/javascripts/boards/mount_multiple_boards_switcher.js
@@ -1,7 +1,15 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import BoardsSelector from '~/boards/components/boards_selector.vue';
 
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(),
+});
+
 export default () => {
   const boardsSwitcherElement = document.getElementById('js-multiple-boards-switcher');
   return new Vue({
@@ -9,6 +17,7 @@ export default () => {
     components: {
       BoardsSelector,
     },
+    apolloProvider,
     data() {
       const { dataset } = boardsSwitcherElement;
 
diff --git a/app/assets/javascripts/boards/queries/board.fragment.graphql b/app/assets/javascripts/boards/queries/board.fragment.graphql
new file mode 100644
index 00000000000..48f55e899bf
--- /dev/null
+++ b/app/assets/javascripts/boards/queries/board.fragment.graphql
@@ -0,0 +1,4 @@
+fragment BoardFragment on Board {
+  id,
+  name
+}
diff --git a/app/assets/javascripts/boards/queries/group_boards.query.graphql b/app/assets/javascripts/boards/queries/group_boards.query.graphql
new file mode 100644
index 00000000000..74c224add7d
--- /dev/null
+++ b/app/assets/javascripts/boards/queries/group_boards.query.graphql
@@ -0,0 +1,13 @@
+#import "ee_else_ce/boards/queries/board.fragment.graphql"
+
+query group_boards($fullPath: ID!) {
+  group(fullPath: $fullPath) {
+    boards {
+      edges {
+        node {
+          ...BoardFragment
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/boards/queries/project_boards.query.graphql b/app/assets/javascripts/boards/queries/project_boards.query.graphql
new file mode 100644
index 00000000000..a1326bd5eff
--- /dev/null
+++ b/app/assets/javascripts/boards/queries/project_boards.query.graphql
@@ -0,0 +1,13 @@
+#import "ee_else_ce/boards/queries/board.fragment.graphql"
+
+query project_boards($fullPath: ID!) {
+  project(fullPath: $fullPath) {
+    boards {
+      edges {
+        node {
+          ...BoardFragment
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index 2a5571543fb..2a2cff3d07d 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -45,7 +45,14 @@ const boardsStore = {
   },
   multiSelect: { list: [] },
 
-  setEndpoints({ boardsEndpoint, listsEndpoint, bulkUpdatePath, boardId, recentBoardsEndpoint }) {
+  setEndpoints({
+    boardsEndpoint,
+    listsEndpoint,
+    bulkUpdatePath,
+    boardId,
+    recentBoardsEndpoint,
+    fullPath,
+  }) {
     const listsEndpointGenerate = `${listsEndpoint}/generate.json`;
     this.state.endpoints = {
       boardsEndpoint,
@@ -53,6 +60,7 @@ const boardsStore = {
       listsEndpoint,
       listsEndpointGenerate,
       bulkUpdatePath,
+      fullPath,
       recentBoardsEndpoint: `${recentBoardsEndpoint}.json`,
     };
   },
@@ -542,10 +550,6 @@ const boardsStore = {
     return axios.post(endpoint);
   },
 
-  allBoards() {
-    return axios.get(this.generateBoardsPath());
-  },
-
   recentBoards() {
     return axios.get(this.state.endpoints.recentBoardsEndpoint);
   },