1 files changed, 45 insertions, 0 deletions
diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_vue/dropdown_button.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_vue/dropdown_button.vue
new file mode 100644
index 00000000000..864d9b308e7
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/labels/labels_select_vue/dropdown_button.vue
@@ -0,0 +1,45 @@
+<script>
+import { GlButton, GlIcon } from '@gitlab/ui';
+import { mapActions, mapGetters } from 'vuex';
+
+// @deprecated This component should only be used when there is no GraphQL API.
+// In most cases you should use
+// `app/assets/javascripts/sidebar/components/labels/labels_select_widget` instead.
+export default {
+  components: {
+    GlButton,
+    GlIcon,
+  },
+  computed: {
+    ...mapGetters([
+      'dropdownButtonText',
+      'isDropdownVariantStandalone',
+      'isDropdownVariantEmbedded',
+    ]),
+  },
+  methods: {
+    ...mapActions(['toggleDropdownContents']),
+    handleButtonClick(e) {
+      if (this.isDropdownVariantStandalone || this.isDropdownVariantEmbedded) {
+        this.toggleDropdownContents();
+      }
+
+      if (this.isDropdownVariantStandalone) {
+        e.stopPropagation();
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button
+    class="labels-select-dropdown-button js-dropdown-button w-100 text-left"
+    @click="handleButtonClick"
+  >
+    <span class="dropdown-toggle-text gl-pointer-events-none flex-fill">
+      {{ dropdownButtonText }}
+    </span>
+    <gl-icon name="chevron-down" class="gl-pointer-events-none float-right" />
+  </gl-button>
+</template>