1 files changed, 32 insertions, 38 deletions

diff --git a/app/assets/javascripts/boards/components/board_content.vue b/app/assets/javascripts/boards/components/board_content.vue
index c42295792f1..c7b3da0e672 100644
--- a/app/assets/javascripts/boards/components/board_content.vue
+++ b/app/assets/javascripts/boards/components/board_content.vue
@@ -1,13 +1,15 @@
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters, mapActions } from 'vuex';
 import BoardColumn from 'ee_else_ce/boards/components/board_column.vue';
-import EpicsSwimlanes from 'ee_component/boards/components/epics_swimlanes.vue';
+import { GlAlert } from '@gitlab/ui';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
     BoardColumn,
-    EpicsSwimlanes,
+    BoardContentSidebar: () => import('ee_component/boards/components/board_content_sidebar.vue'),
+    EpicsSwimlanes: () => import('ee_component/boards/components/epics_swimlanes.vue'),
+    GlAlert,
   },
   mixins: [glFeatureFlagMixin()],
   props: {
@@ -19,66 +21,58 @@ export default {
       type: Boolean,
       required: true,
     },
-    groupId: {
-      type: Number,
-      required: false,
-      default: null,
-    },
     disabled: {
       type: Boolean,
       required: true,
     },
-    issueLinkBase: {
-      type: String,
-      required: true,
-    },
-    rootPath: {
-      type: String,
-      required: true,
-    },
-    boardId: {
-      type: String,
-      required: true,
-    },
   },
   computed: {
-    ...mapState(['isShowingEpicsSwimlanes', 'boardLists']),
-    isSwimlanesOn() {
-      return this.glFeatures.boardsWithSwimlanes && this.isShowingEpicsSwimlanes;
+    ...mapState(['boardLists', 'error']),
+    ...mapGetters(['isSwimlanesOn']),
+    boardListsToUse() {
+      return this.glFeatures.graphqlBoardLists ? this.boardLists : this.lists;
     },
   },
+  mounted() {
+    if (this.glFeatures.graphqlBoardLists) {
+      this.fetchLists();
+      this.showPromotionList();
+    }
+  },
+  methods: {
+    ...mapActions(['fetchLists', 'showPromotionList']),
+  },
 };
 </script>
 
 <template>
   <div>
+    <gl-alert v-if="error" variant="danger" :dismissible="false">
+      {{ error }}
+    </gl-alert>
     <div
       v-if="!isSwimlanesOn"
       class="boards-list gl-w-full gl-py-5 gl-px-3 gl-white-space-nowrap"
       data-qa-selector="boards_list"
     >
       <board-column
-        v-for="list in lists"
+        v-for="list in boardListsToUse"
         :key="list.id"
         ref="board"
         :can-admin-list="canAdminList"
-        :group-id="groupId"
         :list="list"
         :disabled="disabled"
-        :issue-link-base="issueLinkBase"
-        :root-path="rootPath"
-        :board-id="boardId"
       />
     </div>
-    <epics-swimlanes
-      v-else
-      ref="swimlanes"
-      :lists="boardLists"
-      :can-admin-list="canAdminList"
-      :disabled="disabled"
-      :board-id="boardId"
-      :group-id="groupId"
-      :root-path="rootPath"
-    />
+
+    <template v-else>
+      <epics-swimlanes
+        ref="swimlanes"
+        :lists="boardLists"
+        :can-admin-list="canAdminList"
+        :disabled="disabled"
+      />
+      <board-content-sidebar />
+    </template>
   </div>
 </template>