1 files changed, 79 insertions, 40 deletions
diff --git a/app/assets/javascripts/boards/components/board_add_new_column_form.vue b/app/assets/javascripts/boards/components/board_add_new_column_form.vue
index d85343a5390..70ba90bb1d4 100644
--- a/app/assets/javascripts/boards/components/board_add_new_column_form.vue
+++ b/app/assets/javascripts/boards/components/board_add_new_column_form.vue
@@ -1,5 +1,12 @@
 <script>
-import { GlButton, GlFormGroup, GlSearchBoxByType, GlSkeletonLoader } from '@gitlab/ui';
+import {
+  GlButton,
+  GlDropdown,
+  GlFormGroup,
+  GlIcon,
+  GlSearchBoxByType,
+  GlSkeletonLoader,
+} from '@gitlab/ui';
 import { mapActions } from 'vuex';
 import { __ } from '~/locale';
 
@@ -8,13 +15,16 @@ export default {
     add: __('Add to board'),
     cancel: __('Cancel'),
     newList: __('New list'),
-    noneSelected: __('None'),
     noResults: __('No matching results'),
+    scope: __('Scope'),
+    scopeDescription: __('Issues must match this scope to appear in this list.'),
     selected: __('Selected'),
   },
   components: {
     GlButton,
+    GlDropdown,
     GlFormGroup,
+    GlIcon,
     GlSearchBoxByType,
     GlSkeletonLoader,
   },
@@ -23,11 +33,12 @@ export default {
       type: Boolean,
       required: true,
     },
-    formDescription: {
+    searchLabel: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
-    searchLabel: {
+    noneSelected: {
       type: String,
       required: true,
     },
@@ -46,8 +57,23 @@ export default {
       searchValue: '',
     };
   },
+  watch: {
+    selectedId(val) {
+      if (val) {
+        this.$refs.dropdown.hide(true);
+      }
+    },
+  },
   methods: {
     ...mapActions(['setAddColumnFormVisibility']),
+    setFocus() {
+      this.$refs.searchBox.focusInput();
+    },
+    onHide() {
+      this.searchValue = '';
+      this.$emit('filter-items', '');
+      this.$emit('hide');
+    },
   },
 };
 </script>
@@ -62,51 +88,64 @@ export default {
       class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base gl-bg-white"
     >
       <h3
-        class="gl-font-base gl-px-5 gl-py-5 gl-m-0 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
+        class="gl-font-size-h2 gl-px-5 gl-py-4 gl-m-0 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
         data-testid="board-add-column-form-title"
       >
         {{ $options.i18n.newList }}
       </h3>
 
-      <div class="gl-display-flex gl-flex-direction-column gl-h-full gl-overflow-hidden">
-        <slot name="select-list-type">
-          <div class="gl-mb-5"></div>
-        </slot>
+      <div
+        class="gl-display-flex gl-flex-direction-column gl-h-full gl-overflow-y-auto gl-align-items-flex-start"
+      >
+        <div class="gl-px-5">
+          <h3 class="gl-font-lg gl-mt-5 gl-mb-2">
+            {{ $options.i18n.scope }}
+          </h3>
+          <p class="gl-mb-3">{{ $options.i18n.scopeDescription }}</p>
+        </div>
 
-        <p class="gl-px-5">{{ formDescription }}</p>
+        <slot name="select-list-type"></slot>
 
-        <div class="gl-px-5 gl-pb-4">
-          <label class="gl-mb-2">{{ $options.i18n.selected }}</label>
-          <slot name="selected">
-            <div class="gl-text-gray-500">{{ $options.i18n.noneSelected }}</div>
-          </slot>
-        </div>
+        <gl-form-group class="gl-px-5 lg-mb-3 gl-max-w-full" :label="searchLabel">
+          <gl-dropdown
+            ref="dropdown"
+            class="gl-mb-3 gl-max-w-full"
+            toggle-class="gl-max-w-full gl-display-flex gl-align-items-center gl-text-trunate"
+            boundary="viewport"
+            @shown="setFocus"
+            @hide="onHide"
+          >
+            <template #button-content>
+              <slot name="selected">
+                <div>{{ noneSelected }}</div>
+              </slot>
+              <gl-icon class="dropdown-chevron gl-flex-shrink-0" name="chevron-down" />
+            </template>
 
-        <gl-form-group
-          class="gl-mx-5 gl-mb-3"
-          :label="searchLabel"
-          label-for="board-available-column-entities"
-        >
-          <gl-search-box-by-type
-            id="board-available-column-entities"
-            v-model="searchValue"
-            debounce="250"
-            :placeholder="searchPlaceholder"
-            @input="$emit('filter-items', $event)"
-          />
-        </gl-form-group>
+            <template #header>
+              <gl-search-box-by-type
+                ref="searchBox"
+                v-model="searchValue"
+                debounce="250"
+                class="gl-mt-0!"
+                :placeholder="searchPlaceholder"
+                @input="$emit('filter-items', $event)"
+              />
+            </template>
 
-        <div v-if="loading" class="gl-px-5">
-          <gl-skeleton-loader :width="500" :height="172">
-            <rect width="480" height="20" x="10" y="15" rx="4" />
-            <rect width="380" height="20" x="10" y="50" rx="4" />
-            <rect width="430" height="20" x="10" y="85" rx="4" />
-          </gl-skeleton-loader>
-        </div>
+            <div v-if="loading" class="gl-px-5">
+              <gl-skeleton-loader :width="400" :height="172">
+                <rect width="380" height="20" x="10" y="15" rx="4" />
+                <rect width="280" height="20" x="10" y="50" rx="4" />
+                <rect width="330" height="20" x="10" y="85" rx="4" />
+              </gl-skeleton-loader>
+            </div>
 
-        <slot v-else name="items">
-          <p class="gl-mx-5">{{ $options.i18n.noResults }}</p>
-        </slot>
+            <slot v-else name="items">
+              <p class="gl-mx-5">{{ $options.i18n.noResults }}</p>
+            </slot>
+          </gl-dropdown>
+        </gl-form-group>
       </div>
       <div
         class="gl-display-flex gl-p-3 gl-border-t-1 gl-border-t-solid gl-border-gray-100 gl-bg-gray-10 gl-rounded-bottom-left-base gl-rounded-bottom-right-base"