1 files changed, 17 insertions, 13 deletions

diff --git a/app/assets/javascripts/boards/components/board_settings_sidebar.vue b/app/assets/javascripts/boards/components/board_settings_sidebar.vue
index 3149762ecdf..e2600883e89 100644
--- a/app/assets/javascripts/boards/components/board_settings_sidebar.vue
+++ b/app/assets/javascripts/boards/components/board_settings_sidebar.vue
@@ -1,11 +1,12 @@
 <script>
 import { GlDrawer, GlLabel } from '@gitlab/ui';
-import { mapActions, mapState } from 'vuex';
+import { mapActions, mapState, mapGetters } from 'vuex';
 import { __ } from '~/locale';
 import boardsStore from '~/boards/stores/boards_store';
 import eventHub from '~/sidebar/event_hub';
 import { isScopedLabel } from '~/lib/utils/common_utils';
-import { inactiveId } from '~/boards/constants';
+import { LIST } from '~/boards/constants';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 // NOTE: need to revisit how we handle headerHeight, because we have so many different header and footer options.
 export default {
@@ -23,18 +24,20 @@ export default {
     BoardSettingsListTypes: () =>
       import('ee_component/boards/components/board_settings_list_types.vue'),
   },
+  mixins: [glFeatureFlagMixin()],
   computed: {
-    ...mapState(['activeId']),
+    ...mapGetters(['isSidebarOpen']),
+    ...mapState(['activeId', 'sidebarType', 'boardLists']),
     activeList() {
       /*
         Warning: Though a computed property it is not reactive because we are
         referencing a List Model class. Reactivity only applies to plain JS objects
       */
+      if (this.glFeatures.graphqlBoardLists) {
+        return this.boardLists.find(({ id }) => id === this.activeId);
+      }
       return boardsStore.state.lists.find(({ id }) => id === this.activeId);
     },
-    isSidebarOpen() {
-      return this.activeId !== inactiveId;
-    },
     activeListLabel() {
       return this.activeList.label;
     },
@@ -44,18 +47,18 @@ export default {
     listTypeTitle() {
       return this.$options.labelListText;
     },
+    showSidebar() {
+      return this.sidebarType === LIST;
+    },
   },
   created() {
-    eventHub.$on('sidebar.closeAll', this.closeSidebar);
+    eventHub.$on('sidebar.closeAll', this.unsetActiveId);
   },
   beforeDestroy() {
-    eventHub.$off('sidebar.closeAll', this.closeSidebar);
+    eventHub.$off('sidebar.closeAll', this.unsetActiveId);
   },
   methods: {
-    ...mapActions(['setActiveId']),
-    closeSidebar() {
-      this.setActiveId(inactiveId);
-    },
+    ...mapActions(['unsetActiveId']),
     showScopedLabels(label) {
       return boardsStore.scopedLabels.enabled && isScopedLabel(label);
     },
@@ -65,10 +68,11 @@ export default {
 
 <template>
   <gl-drawer
+    v-if="showSidebar"
     class="js-board-settings-sidebar"
     :open="isSidebarOpen"
     :header-height="$options.headerHeight"
-    @close="closeSidebar"
+    @close="unsetActiveId"
   >
     <template #header>{{ $options.listSettingsText }}</template>
     <template v-if="isSidebarOpen">