Fix selecting new board type from big lists

If list of items was bigger that what we store in items
it was being cleared when using filters

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

@@ -5,7 +5,6 @@ import BoardAddNewColumnForm from '~/boards/components/board_add_new_column_form
 import { ListType } from '~/boards/constants';
 import boardsStore from '~/boards/stores/boards_store';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { isScopedLabel } from '~/lib/utils/common_utils';
 
 export default {
   components: {
@@ -20,17 +19,12 @@ export default {
   data() {
     return {
       selectedId: null,
+      selectedLabel: null,
     };
   },
   computed: {
     ...mapState(['labels', 'labelsLoading']),
     ...mapGetters(['getListByLabelId', 'shouldUseGraphQL']),
-    selectedLabel() {
-      if (!this.selectedId) {
-        return null;
-      }
-      return this.labels.find(({ id }) => id === this.selectedId);
-    },
     columnForSelected() {
       return this.getListByLabelId(this.selectedId);
     },
@@ -83,8 +77,13 @@ export default {
       this.fetchLabels(searchTerm);
     },
 
-    showScopedLabels(label) {
-      return this.scopedLabelsAvailable && isScopedLabel(label);
+    setSelectedItem(selectedId) {
+      const label = this.labels.find(({ id }) => id === selectedId);
+      if (!selectedId || !label) {
+        this.selectedLabel = null;
+      } else {
+        this.selectedLabel = { ...label };
+      }
     },
   },
 };
@@ -116,6 +115,7 @@ export default {
         v-if="labels.length > 0"
         v-model="selectedId"
         class="gl-overflow-y-auto gl-px-5 gl-pt-3"
+        @change="setSelectedItem"
       >
         <label
           v-for="label in labels"

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

@@ -72,6 +72,7 @@ export default {
   data() {
     return {
       selectedId: null,
+      selectedItem: null,
       columnType: ListType.label,
     };
   },
@@ -113,10 +114,6 @@ export default {
       return this.columnType === ListType.iteration;
     },
 
-    selectedItem() {
-      return this.items.find(({ id }) => id === this.selectedId);
-    },
-
     hasLabelSelection() {
       return this.labelTypeSelected && this.selectedItem;
     },
@@ -262,11 +259,17 @@ export default {
     setColumnType(type) {
       this.columnType = type;
       this.selectedId = null;
+      this.setSelectedItem(null);
       this.filterItems();
     },
 
-    hideDropdown() {
-      this.$root.$emit('bv::dropdown::hide');
+    setSelectedItem(selectedId) {
+      const item = this.items.find(({ id }) => id === selectedId);
+      if (!selectedId || !item) {
+        this.selectedItem = null;
+      } else {
+        this.selectedItem = { ...item };
+      }
     },
   },
 };
@@ -337,7 +340,8 @@ export default {
       <gl-form-radio-group
         v-model="selectedId"
         class="gl-overflow-y-auto gl-px-5"
-        @change="hideDropdown"
+        data-testid="selectItem"
+        @change="setSelectedItem"
       >
         <label
           v-for="item in items"

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

@@ -17,6 +17,10 @@ describe('BoardAddNewColumn', () => {
   let wrapper;
   let shouldUseGraphQL;
 
+  const selectItem = (id) => {
+    wrapper.findByTestId('selectItem').vm.$emit('change', id);
+  };
+
   const createStore = ({ actions = {}, getters = {}, state = {} } = {}) => {
     return new Vuex.Store({
       state: {
@@ -76,6 +80,11 @@ describe('BoardAddNewColumn', () => {
         },
       }),
     );
+
+    // trigger change event
+    if (selectedId) {
+      selectItem(selectedId);
+    }
   };
 
   afterEach(() => {

spec/frontend/boards/components/board_add_new_column_spec.js

+import { GlFormRadioGroup } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
@@ -12,6 +13,10 @@ Vue.use(Vuex);
 describe('Board card layout', () => {
   let wrapper;
 
+  const selectLabel = (id) => {
+    wrapper.findComponent(GlFormRadioGroup).vm.$emit('change', id);
+  };
+
   const createStore = ({ actions = {}, getters = {}, state = {} } = {}) => {
     return new Vuex.Store({
       state: {
@@ -57,6 +62,11 @@ describe('Board card layout', () => {
         },
       }),
     );
+
+    // trigger change event
+    if (selectedId) {
+      selectLabel(selectedId);
+    }
   };
 
   afterEach(() => {