Fix board settings sidebar FOSS specs

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/38363

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

 <script>
-import { GlDrawer, GlLabel, GlAvatarLink, GlAvatarLabeled, GlLink } from '@gitlab/ui';
+import { GlDrawer, GlLabel } from '@gitlab/ui';
 import { mapActions, mapState } from 'vuex';
 import { __ } from '~/locale';
 import boardsStore from '~/boards/stores/boards_store';
@@ -15,16 +15,13 @@ export default {
   milestone: 'milestone',
   label: 'label',
   labelListText: __('Label'),
-  labelMilestoneText: __('Milestone'),
-  labelAssigneeText: __('Assignee'),
   components: {
     GlDrawer,
     GlLabel,
-    GlAvatarLink,
-    GlAvatarLabeled,
-    GlLink,
     BoardSettingsSidebarWipLimit: () =>
       import('ee_component/boards/components/board_settings_wip_limit.vue'),
+    BoardSettingsListTypes: () =>
+      import('ee_component/boards/components/board_settings_list_types.vue'),
   },
   computed: {
     ...mapState(['activeId']),
@@ -41,30 +38,11 @@ export default {
     activeListLabel() {
       return this.activeList.label;
     },
-    activeListMilestone() {
-      return this.activeList.milestone;
-    },
-    activeListAssignee() {
-      return this.activeList.assignee;
-    },
     boardListType() {
       return this.activeList.type || null;
     },
     listTypeTitle() {
-      switch (this.boardListType) {
-        case this.$options.milestone: {
-          return this.$options.labelMilestoneText;
-        }
-        case this.$options.label: {
-          return this.$options.labelListText;
-        }
-        case this.$options.assignee: {
-          return this.$options.labelAssigneeText;
-        }
-        default: {
-          return '';
-        }
-      }
+      return this.$options.labelListText;
     },
   },
   created() {
@@ -94,32 +72,20 @@ export default {
   >
     <template #header>{{ $options.listSettingsText }}</template>
     <template v-if="isSidebarOpen">
-      <div class="d-flex flex-column align-items-start">
-        <label class="js-list-label">{{ listTypeTitle }}</label>
-        <template v-if="boardListType === $options.label">
-          <gl-label
-            :title="activeListLabel.title"
-            :background-color="activeListLabel.color"
-            :scoped="showScopedLabels(activeListLabel)"
-          />
-        </template>
-        <template v-else-if="boardListType === $options.assignee">
-          <gl-avatar-link class="js-assignee" :href="activeListAssignee.webUrl">
-            <gl-avatar-labeled
-              :size="32"
-              :label="activeListAssignee.name"
-              :sub-label="`@${activeListAssignee.username}`"
-              :src="activeListAssignee.avatar"
-            />
-          </gl-avatar-link>
-        </template>
-        <template v-else-if="boardListType === $options.milestone">
-          <gl-link class="js-milestone" :href="activeListMilestone.webUrl">
-            {{ activeListMilestone.title }}
-          </gl-link>
-        </template>
+      <div v-if="boardListType === $options.label">
+        <label class="js-list-label gl-display-block">{{ listTypeTitle }}</label>
+        <gl-label
+          :title="activeListLabel.title"
+          :background-color="activeListLabel.color"
+          :scoped="showScopedLabels(activeListLabel)"
+        />
       </div>
 
+      <board-settings-list-types
+        v-else
+        :active-list="activeList"
+        :board-list-type="boardListType"
+      />
       <board-settings-sidebar-wip-limit :max-issue-count="activeList.maxIssueCount" />
     </template>
   </gl-drawer>

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

+<script>
+import { GlAvatarLink, GlAvatarLabeled, GlLink } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  milestone: 'milestone',
+  assignee: 'assignee',
+  labelMilestoneText: __('Milestone'),
+  labelAssigneeText: __('Assignee'),
+  components: {
+    GlLink,
+    GlAvatarLink,
+    GlAvatarLabeled,
+  },
+  props: {
+    boardListType: {
+      type: String,
+      required: true,
+    },
+    activeList: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    activeListAssignee() {
+      return this.activeList.assignee;
+    },
+    activeListMilestone() {
+      return this.activeList.milestone;
+    },
+    listTypeTitle() {
+      switch (this.boardListType) {
+        case this.$options.milestone: {
+          return this.$options.labelMilestoneText;
+        }
+        case this.$options.assignee: {
+          return this.$options.labelAssigneeText;
+        }
+        default: {
+          return '';
+        }
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <label class="js-list-label gl-display-block">{{ listTypeTitle }}</label>
+    <gl-link
+      v-if="boardListType === $options.milestone"
+      class="js-milestone"
+      :href="activeListMilestone.webUrl"
+      >{{ activeListMilestone.title }}</gl-link
+    >
+    <gl-avatar-link
+      v-else-if="boardListType === $options.assignee"
+      class="js-assignee"
+      :href="activeListAssignee.webUrl"
+    >
+      <gl-avatar-labeled
+        :size="32"
+        :label="activeListAssignee.name"
+        :sub-label="`@${activeListAssignee.username}`"
+        :src="activeListAssignee.avatar"
+      />
+    </gl-avatar-link>
+  </div>
+</template>

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

+import { shallowMount } from '@vue/test-utils';
+import { GlAvatarLink, GlAvatarLabeled } from '@gitlab/ui';
+import BoardSettingsListTypes from 'ee_component/boards/components/board_settings_list_types.vue';
+
+describe('BoardSettingsListType', () => {
+  let wrapper;
+  const activeList = {
+    milestone: {
+      webUrl: 'https://gitlab.com/h5bp/html5-boilerplate/-/milestones/1',
+      title: 'Backlog',
+    },
+    assignee: { webUrl: 'https://gitlab.com/root', name: 'root', username: 'root' },
+  };
+  const createComponent = props => {
+    wrapper = shallowMount(BoardSettingsListTypes, {
+      propsData: { ...props, activeList },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when list type is "milestone"', () => {
+    it('renders the correct milestone text', () => {
+      createComponent({ activeId: 1, boardListType: 'milestone' });
+
+      expect(wrapper.find('.js-milestone').text()).toBe('Backlog');
+    });
+
+    it('renders the correct list type text', () => {
+      createComponent({ activeId: 1, boardListType: 'milestone' });
+
+      expect(wrapper.find('.js-list-label').text()).toBe('Milestone');
+    });
+  });
+
+  describe('when list type is "assignee"', () => {
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('renders gl-avatar-link with correct href', () => {
+      createComponent({ activeId: 1, boardListType: 'assignee' });
+
+      expect(wrapper.find(GlAvatarLink).exists()).toBe(true);
+      expect(wrapper.find(GlAvatarLink).attributes('href')).toBe('https://gitlab.com/root');
+    });
+
+    it('renders gl-avatar-labeled with "root" as username and name as "root"', () => {
+      createComponent({ activeId: 1, boardListType: 'assignee' });
+
+      expect(wrapper.find(GlAvatarLabeled).exists()).toBe(true);
+      expect(wrapper.find(GlAvatarLabeled).attributes('label')).toBe('root');
+      expect(wrapper.find(GlAvatarLabeled).attributes('sublabel')).toBe('@root');
+    });
+
+    it('renders the correct list type text', () => {
+      createComponent({ activeId: 1, boardListType: 'assignee' });
+
+      expect(wrapper.find('.js-list-label').text()).toBe('Assignee');
+    });
+  });
+});

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

@@ -5,6 +5,7 @@ import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue';
 import BoardSettingsWipLimit from 'ee_component/boards/components/board_settings_wip_limit.vue';
+import BoardSettingsListTypes from 'ee_component/boards/components/board_settings_list_types.vue';
 import boardsStore from '~/boards/stores/boards_store';
 import { inactiveId } from '~/boards/constants';
 
@@ -33,6 +34,7 @@ describe('ee/BoardSettingsSidebar', () => {
       localVue,
       stubs: {
         'board-settings-sidebar-wip-limit': BoardSettingsWipLimit,
+        'board-settings-list-types': BoardSettingsListTypes,
       },
     });
   };
@@ -59,4 +61,20 @@ describe('ee/BoardSettingsSidebar', () => {
 
     expect(wrapper.find(BoardSettingsWipLimit).exists()).toBe(true);
   });
+
+  it('confirms we render BoardSettingsListTypes', () => {
+    boardsStore.addList({
+      id: 1,
+      milestone: {
+        webUrl: 'https://gitlab.com/h5bp/html5-boilerplate/-/milestones/1',
+        title: 'Backlog',
+      },
+      max_issue_count: 1,
+      list_type: 'milestone',
+    });
+
+    createComponent({ activeId: listId });
+
+    expect(wrapper.find(BoardSettingsListTypes).exists()).toBe(true);
+  });
 });

spec/frontend/boards/components/board_settings_sidebar_spec.js

@@ -3,7 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
 import axios from 'axios';
 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { GlDrawer, GlLabel, GlAvatarLink, GlAvatarLabeled } from '@gitlab/ui';
+import { GlDrawer, GlLabel } from '@gitlab/ui';
 import BoardSettingsSidebar from '~/boards/components/board_settings_sidebar.vue';
 import boardsStore from '~/boards/stores/boards_store';
 import sidebarEventHub from '~/sidebar/event_hub';
@@ -156,82 +156,4 @@ describe('BoardSettingsSidebar', () => {
       expect(findLabel().exists()).toBe(false);
     });
   });
-
-  describe('when activeList is present', () => {
-    beforeEach(() => {
-      mock = new MockAdapter(axios);
-    });
-
-    afterEach(() => {
-      boardsStore.removeList(listId);
-    });
-
-    describe('when list type is "milestone"', () => {
-      beforeEach(() => {
-        boardsStore.addList({
-          id: 1,
-          milestone: {
-            webUrl: 'https://gitlab.com/h5bp/html5-boilerplate/-/milestones/1',
-            title: 'Backlog',
-          },
-          max_issue_count: 1,
-          list_type: 'milestone',
-        });
-      });
-
-      afterEach(() => {
-        boardsStore.removeList(1, 'milestone');
-        wrapper.destroy();
-      });
-
-      it('renders the correct milestone text', () => {
-        createComponent({ activeId: 1 });
-
-        expect(wrapper.find('.js-milestone').text()).toBe('Backlog');
-      });
-
-      it('renders the correct list type text', () => {
-        createComponent({ activeId: 1 });
-
-        expect(wrapper.find('.js-list-label').text()).toBe('Milestone');
-      });
-    });
-
-    describe('when list type is "assignee"', () => {
-      beforeEach(() => {
-        boardsStore.addList({
-          id: 1,
-          user: { username: 'root', avatar: '', name: 'Test', webUrl: 'https://gitlab.com/root' },
-          max_issue_count: 1,
-          list_type: 'assignee',
-        });
-      });
-
-      afterEach(() => {
-        boardsStore.removeList(1, 'assignee');
-        wrapper.destroy();
-      });
-
-      it('renders gl-avatar-link with correct href', () => {
-        createComponent({ activeId: 1 });
-
-        expect(wrapper.find(GlAvatarLink).exists()).toBe(true);
-        expect(wrapper.find(GlAvatarLink).attributes('href')).toBe('https://gitlab.com/root');
-      });
-
-      it('renders gl-avatar-labeled with "root" as username and name as "Test"', () => {
-        createComponent({ activeId: 1 });
-
-        expect(wrapper.find(GlAvatarLabeled).exists()).toBe(true);
-        expect(wrapper.find(GlAvatarLabeled).attributes('label')).toBe('Test');
-        expect(wrapper.find(GlAvatarLabeled).attributes('sublabel')).toBe('@root');
-      });
-
-      it('renders the correct list type text', () => {
-        createComponent({ activeId: 1 });
-
-        expect(wrapper.find('.js-list-label').text()).toBe('Assignee');
-      });
-    });
-  });
 });