3 files changed, 123 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
new file mode 100644
index 00000000000..c159333d89a
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
@@ -0,0 +1,55 @@
+<script>
+import { __ } from '~/locale';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+
+export default {
+  components: {
+    LoadingIcon,
+  },
+  props: {
+    isDisabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    toggleText: {
+      type: String,
+      required: false,
+      default: __('Select'),
+    },
+  },
+};
+</script>
+
+<template>
+  <button
+    class="dropdown-menu-toggle dropdown-menu-full-width"
+    type="button"
+    data-toggle="dropdown"
+    aria-expanded="false"
+    :disabled="isDisabled || isLoading"
+  >
+    <loading-icon
+      v-show="isLoading"
+      :inline="true"
+    />
+    <span class="dropdown-toggle-text">
+      {{ toggleText }}
+    </span>
+    <span
+      class="dropdown-toggle-icon"
+      v-show="!isLoading"
+    >
+      <i
+        class="fa fa-chevron-down"
+        aria-hidden="true"
+        data-hidden="true"
+      ></i>
+    </span>
+  </button>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue
new file mode 100644
index 00000000000..1fe27eb97ab
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_hidden_input.vue
@@ -0,0 +1,22 @@
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <input
+    type="hidden"
+    :name="name"
+    :value="value"
+  />
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
new file mode 100644
index 00000000000..c2145a26e64
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_search_input.vue
@@ -0,0 +1,46 @@
+<script>
+import { __ } from '~/locale';
+
+export default {
+  props: {
+    placeholderText: {
+      type: String,
+      required: true,
+      default: __('Search'),
+    },
+  },
+  data() {
+    return { searchQuery: this.value };
+  },
+  watch: {
+    searchQuery(query) {
+      this.$emit('input', query);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="dropdown-input">
+    <input
+      class="dropdown-input-field"
+      type="search"
+      v-model="searchQuery"
+      :placeholder="placeholderText"
+      autocomplete="off"
+    />
+    <i
+      class="fa fa-search dropdown-input-search"
+      aria-hidden="true"
+      data-hidden="true"
+    >
+    </i>
+    <i
+      class="fa fa-times dropdown-input-clear js-dropdown-input-clear"
+      aria-hidden="true"
+      data-hidden="true"
+      role="button"
+    >
+    </i>
+  </div>
+</template>