1 files changed, 32 insertions, 31 deletions

diff --git a/app/assets/javascripts/boards/components/board_column.vue b/app/assets/javascripts/boards/components/board_column.vue
index dae24338e45..6d216911798 100644
--- a/app/assets/javascripts/boards/components/board_column.vue
+++ b/app/assets/javascripts/boards/components/board_column.vue
@@ -1,9 +1,11 @@
 <script>
+import { mapGetters, mapActions } from 'vuex';
 import Sortable from 'sortablejs';
 import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits';
 import BoardListHeader from 'ee_else_ce/boards/components/board_list_header.vue';
 import Tooltip from '~/vue_shared/directives/tooltip';
 import EmptyComponent from '~/vue_shared/components/empty_component';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import BoardBlankState from './board_blank_state.vue';
 import BoardList from './board_list.vue';
 import boardsStore from '../stores/boards_store';
@@ -21,7 +23,7 @@ export default {
   directives: {
     Tooltip,
   },
-  mixins: [isWipLimitsOn],
+  mixins: [isWipLimitsOn, glFeatureFlagMixin()],
   props: {
     list: {
       type: Object,
@@ -32,27 +34,15 @@ export default {
       type: Boolean,
       required: true,
     },
-    issueLinkBase: {
-      type: String,
-      required: true,
-    },
-    rootPath: {
-      type: String,
-      required: true,
-    },
-    boardId: {
-      type: String,
-      required: true,
-    },
     canAdminList: {
       type: Boolean,
       required: false,
       default: false,
     },
-    groupId: {
-      type: Number,
-      required: false,
-      default: null,
+  },
+  inject: {
+    boardId: {
+      type: String,
     },
   },
   data() {
@@ -62,6 +52,7 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(['getIssues']),
     showBoardListAndBoardInfo() {
       return this.list.type !== ListType.blank && this.list.type !== ListType.promotion;
     },
@@ -69,19 +60,36 @@ export default {
       // eslint-disable-next-line @gitlab/require-i18n-strings
       return `boards.${this.boardId}.${this.list.type}.${this.list.id}`;
     },
+    listIssues() {
+      if (!this.glFeatures.graphqlBoardLists) {
+        return this.list.issues;
+      }
+      return this.getIssues(this.list.id);
+    },
+    shouldFetchIssues() {
+      return this.glFeatures.graphqlBoardLists && this.list.type !== ListType.blank;
+    },
   },
   watch: {
     filter: {
       handler() {
-        this.list.page = 1;
-        this.list.getIssues(true).catch(() => {
-          // TODO: handle request error
-        });
+        if (this.shouldFetchIssues) {
+          this.fetchIssuesForList(this.list.id);
+        } else {
+          this.list.page = 1;
+          this.list.getIssues(true).catch(() => {
+            // TODO: handle request error
+          });
+        }
       },
       deep: true,
     },
   },
   mounted() {
+    if (this.shouldFetchIssues) {
+      this.fetchIssuesForList(this.list.id);
+    }
+
     const instance = this;
 
     const sortableOptions = getBoardSortableDefaultOptions({
@@ -108,6 +116,7 @@ export default {
     Sortable.create(this.$el.parentNode, sortableOptions);
   },
   methods: {
+    ...mapActions(['fetchIssuesForList']),
     showListNewIssueForm(listId) {
       eventHub.$emit('showForm', listId);
     },
@@ -130,22 +139,14 @@ export default {
     <div
       class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base"
     >
-      <board-list-header
-        :can-admin-list="canAdminList"
-        :list="list"
-        :disabled="disabled"
-        :board-id="boardId"
-      />
+      <board-list-header :can-admin-list="canAdminList" :list="list" :disabled="disabled" />
       <board-list
         v-if="showBoardListAndBoardInfo"
         ref="board-list"
         :disabled="disabled"
-        :group-id="groupId || null"
-        :issue-link-base="issueLinkBase"
-        :issues="list.issues"
+        :issues="listIssues"
         :list="list"
         :loading="list.loading"
-        :root-path="rootPath"
       />
       <board-blank-state v-if="canAdminList && list.id === 'blank'" />