1 files changed, 92 insertions, 7 deletions

diff --git a/app/assets/javascripts/boards/components/board_content.vue b/app/assets/javascripts/boards/components/board_content.vue
index d99afa8455d..150378f7a7d 100644
--- a/app/assets/javascripts/boards/components/board_content.vue
+++ b/app/assets/javascripts/boards/components/board_content.vue
@@ -1,14 +1,21 @@
 <script>
 import { GlAlert } from '@gitlab/ui';
-import { sortBy } from 'lodash';
+import { sortBy, throttle } from 'lodash';
 import Draggable from 'vuedraggable';
 import { mapState, mapGetters, mapActions } from 'vuex';
+import { s__ } from '~/locale';
+import { formatBoardLists } from 'ee_else_ce/boards/boards_util';
 import BoardAddNewColumn from 'ee_else_ce/boards/components/board_add_new_column.vue';
 import { defaultSortableOptions } from '~/sortable/constants';
-import { DraggableItemTypes } from '../constants';
+import { DraggableItemTypes, BoardType, listsQuery } from 'ee_else_ce/boards/constants';
 import BoardColumn from './board_column.vue';
 
 export default {
+  i18n: {
+    fetchError: s__(
+      'Boards|An error occurred while fetching the board lists. Please reload the page.',
+    ),
+  },
   draggableItemTypes: DraggableItemTypes,
   components: {
     BoardAddNewColumn,
@@ -19,21 +26,78 @@ export default {
     EpicsSwimlanes: () => import('ee_component/boards/components/epics_swimlanes.vue'),
     GlAlert,
   },
-  inject: ['canAdminList'],
+  inject: [
+    'canAdminList',
+    'boardType',
+    'fullPath',
+    'issuableType',
+    'isIssueBoard',
+    'isEpicBoard',
+    'isApolloBoard',
+  ],
   props: {
     disabled: {
       type: Boolean,
       required: true,
     },
+    boardId: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      boardHeight: null,
+      boardListsApollo: {},
+      apolloError: null,
+      updatedBoardId: this.boardId,
+    };
+  },
+  apollo: {
+    boardListsApollo: {
+      query() {
+        return listsQuery[this.issuableType].query;
+      },
+      variables() {
+        return this.queryVariables;
+      },
+      skip() {
+        return !this.isApolloBoard;
+      },
+      update(data) {
+        const { lists } = data[this.boardType].board;
+        return formatBoardLists(lists);
+      },
+      result() {
+        // this allows us to delay fetching lists when we switch a board to fetch the actual board lists
+        // instead of fetching lists for the "previous" board
+        this.updatedBoardId = this.boardId;
+      },
+      error() {
+        this.apolloError = this.$options.i18n.fetchError;
+      },
+    },
   },
   computed: {
     ...mapState(['boardLists', 'error', 'addColumnForm']),
-    ...mapGetters(['isSwimlanesOn', 'isEpicBoard', 'isIssueBoard']),
+    ...mapGetters(['isSwimlanesOn']),
     addColumnFormVisible() {
       return this.addColumnForm?.visible;
     },
+    queryVariables() {
+      return {
+        ...(this.isIssueBoard && {
+          isGroup: this.boardType === BoardType.group,
+          isProject: this.boardType === BoardType.project,
+        }),
+        fullPath: this.fullPath,
+        boardId: this.boardId,
+        filterParams: this.filterParams,
+      };
+    },
     boardListsToUse() {
-      return sortBy([...Object.values(this.boardLists)], 'position');
+      const lists = this.isApolloBoard ? this.boardListsApollo : this.boardLists;
+      return sortBy([...Object.values(lists)], 'position');
     },
     canDragColumns() {
       return this.canAdminList;
@@ -54,6 +118,22 @@ export default {
 
       return this.canDragColumns ? options : {};
     },
+    errorToDisplay() {
+      return this.isApolloBoard ? this.apolloError : this.error;
+    },
+  },
+  mounted() {
+    this.setBoardHeight();
+
+    this.resizeObserver = new ResizeObserver(
+      throttle(() => {
+        this.setBoardHeight();
+      }, 150),
+    );
+    this.resizeObserver.observe(document.body);
+  },
+  unmounted() {
+    this.resizeObserver.disconnect();
   },
   methods: {
     ...mapActions(['moveList', 'unsetError']),
@@ -61,14 +141,17 @@ export default {
       const el = this.canDragColumns ? this.$refs.list.$el : this.$refs.list;
       el.scrollTo({ left: el.scrollWidth, behavior: 'smooth' });
     },
+    setBoardHeight() {
+      this.boardHeight = `${window.innerHeight - this.$el.getBoundingClientRect().top}px`;
+    },
   },
 };
 </script>
 
 <template>
   <div v-cloak data-qa-selector="boards_list">
-    <gl-alert v-if="error" variant="danger" :dismissible="true" @dismiss="unsetError">
-      {{ error }}
+    <gl-alert v-if="errorToDisplay" variant="danger" :dismissible="true" @dismiss="unsetError">
+      {{ errorToDisplay }}
     </gl-alert>
     <component
       :is="boardColumnWrapper"
@@ -76,6 +159,7 @@ export default {
       ref="list"
       v-bind="draggableOptions"
       class="boards-list gl-w-full gl-py-5 gl-pr-3 gl-white-space-nowrap gl-overflow-x-scroll"
+      :style="{ height: boardHeight }"
       @end="moveList"
     >
       <board-column
@@ -99,6 +183,7 @@ export default {
       :lists="boardListsToUse"
       :can-admin-list="canAdminList"
       :disabled="disabled"
+      :style="{ height: boardHeight }"
     />
 
     <board-content-sidebar v-if="isIssueBoard" data-testid="issue-boards-sidebar" />