Merge branch 'ss/dont-render-label-in-sidebar' into 'master'

Do not render label in sidebar when not shown

See merge request gitlab-org/gitlab!22813

ee/app/assets/javascripts/boards/components/board_settings_sidebar.vue

@@ -44,20 +44,12 @@ export default {
       return this.activeListId > 0;
     },
     activeListLabel() {
-      if (this.activeList) {
-        return this.activeList.label;
-      }
-
-      return { color: '', title: '' };
+      return this.activeList.label;
     },
     activeListWipLimit() {
-      if (this.activeList) {
-        return this.activeList.maxIssueCount === 0
-          ? this.$options.noneText
-          : this.activeList.maxIssueCount;
-      }
-
-      return this.$options.noneText;
+      return this.activeList.maxIssueCount === 0
+        ? this.$options.noneText
+        : this.activeList.maxIssueCount;
     },
   },
   methods: {
@@ -111,7 +103,7 @@ export default {
     @close="closeSidebar"
   >
     <template #header>{{ $options.listSettingsText }}</template>
-    <template>
+    <template v-if="isSidebarOpen">
       <div class="d-flex flex-column align-items-start">
         <label>{{ $options.labelListText }}</label>
         <gl-label
@@ -136,9 +128,9 @@ export default {
           />
           <p v-else class="js-wip-limit bold">{{ activeListWipLimit }}</p>
         </div>
-        <gl-button class="h-100 border-0 gl-line-height-14" variant="link" @click="showInput">
-          {{ $options.editLinkText }}
-        </gl-button>
+        <gl-button class="h-100 border-0 gl-line-height-14" variant="link" @click="showInput">{{
+          $options.editLinkText
+        }}</gl-button>
       </div>
     </template>
   </gl-drawer>

ee/spec/frontend/boards/components/board_settings_sidebar_spec.js

@@ -110,6 +110,20 @@ describe('BoardSettingsSideBar', () => {
     });
 
     describe('when activeListId is greater than zero', () => {
+      beforeEach(() => {
+        mock = new MockAdapter(axios);
+
+        boardsStore.store.addList({
+          id: listId,
+          label: { title: labelTitle, color: labelColor },
+          list_type: 'label',
+        });
+      });
+
+      afterEach(() => {
+        boardsStore.store.removeList(listId);
+      });
+
       it('renders GlDrawer with open false', () => {
         createComponent({ activeListId: 1 });
 
@@ -156,12 +170,8 @@ describe('BoardSettingsSideBar', () => {
         mock.restore();
       });
 
-      it('renders label title', () => {
-        expect(wrapper.find(GlLabel).props('title')).toEqual('');
-      });
-
-      it('renders label background color', () => {
-        expect(wrapper.find(GlLabel).props('backgroundColor')).toEqual('');
+      it('does not render GlLabel', () => {
+        expect(wrapper.find(GlLabel).exists()).toBe(false);
       });
     });
   });