1 files changed, 24 insertions, 29 deletions

diff --git a/app/assets/javascripts/boards/components/board_settings_sidebar.vue b/app/assets/javascripts/boards/components/board_settings_sidebar.vue
index c089a6a39af..6b7c08d05a5 100644
--- a/app/assets/javascripts/boards/components/board_settings_sidebar.vue
+++ b/app/assets/javascripts/boards/components/board_settings_sidebar.vue
@@ -3,7 +3,6 @@ import { GlButton, GlDrawer, GlLabel } from '@gitlab/ui';
 import { MountingPortal } from 'portal-vue';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { LIST, ListType, ListTypeTitles } from '~/boards/constants';
-import boardsStore from '~/boards/stores/boards_store';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import eventHub from '~/sidebar/event_hub';
@@ -23,7 +22,7 @@ export default {
       import('ee_component/boards/components/board_settings_list_types.vue'),
   },
   mixins: [glFeatureFlagMixin(), Tracking.mixin()],
-  inject: ['canAdminList'],
+  inject: ['canAdminList', 'scopedLabelsAvailable'],
   inheritAttrs: false,
   data() {
     return {
@@ -31,20 +30,13 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['isSidebarOpen', 'shouldUseGraphQL', 'isEpicBoard']),
+    ...mapGetters(['isSidebarOpen', 'isEpicBoard']),
     ...mapState(['activeId', 'sidebarType', 'boardLists']),
     isWipLimitsOn() {
       return this.glFeatures.wipLimits && !this.isEpicBoard;
     },
     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.shouldUseGraphQL || this.isEpicBoard) {
-        return this.boardLists[this.activeId];
-      }
-      return boardsStore.state.lists.find(({ id }) => id === this.activeId);
+      return this.boardLists[this.activeId] || {};
     },
     activeListLabel() {
       return this.activeList.label;
@@ -68,17 +60,13 @@ export default {
   methods: {
     ...mapActions(['unsetActiveId', 'removeList']),
     showScopedLabels(label) {
-      return boardsStore.scopedLabels.enabled && isScopedLabel(label);
+      return this.scopedLabelsAvailable && isScopedLabel(label);
     },
     deleteBoard() {
       // eslint-disable-next-line no-alert
       if (window.confirm(__('Are you sure you want to remove this list?'))) {
-        if (this.shouldUseGraphQL || this.isEpicBoard) {
-          this.track('click_button', { label: 'remove_list' });
-          this.removeList(this.activeId);
-        } else {
-          this.activeList.destroy();
-        }
+        this.track('click_button', { label: 'remove_list' });
+        this.removeList(this.activeId);
         this.unsetActiveId();
       }
     },
@@ -93,9 +81,26 @@ export default {
       v-bind="$attrs"
       class="js-board-settings-sidebar gl-absolute"
       :open="isSidebarOpen"
+      variant="sidebar"
       @close="unsetActiveId"
     >
-      <template #title>{{ $options.listSettingsText }}</template>
+      <template #title>
+        <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24">
+          {{ $options.listSettingsText }}
+        </h2>
+      </template>
+      <template #header>
+        <div v-if="canAdminList && activeList.id" class="gl-mt-3">
+          <gl-button
+            variant="danger"
+            category="secondary"
+            size="small"
+            data-testid="remove-list"
+            @click.stop="deleteBoard"
+            >{{ __('Remove list') }}
+          </gl-button>
+        </div>
+      </template>
       <template v-if="isSidebarOpen">
         <div v-if="boardListType === ListType.label">
           <label class="js-list-label gl-display-block">{{ listTypeTitle }}</label>
@@ -115,16 +120,6 @@ export default {
           v-if="isWipLimitsOn"
           :max-issue-count="activeList.maxIssueCount"
         />
-        <div v-if="canAdminList && !activeList.preset && activeList.id" class="gl-mt-4">
-          <gl-button
-            variant="danger"
-            category="secondary"
-            icon="remove"
-            data-testid="remove-list"
-            @click.stop="deleteBoard"
-            >{{ __('Remove list') }}
-          </gl-button>
-        </div>
       </template>
     </gl-drawer>
   </mounting-portal>