1 files changed, 58 insertions, 0 deletions
diff --git a/app/assets/javascripts/issuable_bulk_update_sidebar/components/status_select.vue b/app/assets/javascripts/issuable_bulk_update_sidebar/components/status_select.vue
new file mode 100644
index 00000000000..9509399e91d
--- /dev/null
+++ b/app/assets/javascripts/issuable_bulk_update_sidebar/components/status_select.vue
@@ -0,0 +1,58 @@
+<script>
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { ISSUE_STATUS_SELECT_OPTIONS } from '../constants';
+
+export default {
+  name: 'StatusSelect',
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+  },
+  data() {
+    return {
+      status: null,
+    };
+  },
+  computed: {
+    dropdownText() {
+      return this.status?.text ?? this.$options.i18n.defaultDropdownText;
+    },
+    selectedValue() {
+      return this.status?.value;
+    },
+  },
+  methods: {
+    onDropdownItemClick(statusOption) {
+      // clear status if the currently checked status is clicked again
+      if (this.status?.value === statusOption.value) {
+        this.status = null;
+      } else {
+        this.status = statusOption;
+      }
+    },
+  },
+  i18n: {
+    dropdownTitle: __('Change status'),
+    defaultDropdownText: __('Select status'),
+  },
+  ISSUE_STATUS_SELECT_OPTIONS,
+};
+</script>
+<template>
+  <div>
+    <input type="hidden" name="update[state_event]" :value="selectedValue" />
+    <gl-dropdown :text="dropdownText" :title="$options.i18n.dropdownTitle" class="gl-w-full">
+      <gl-dropdown-item
+        v-for="statusOption in $options.ISSUE_STATUS_SELECT_OPTIONS"
+        :key="statusOption.value"
+        :is-checked="selectedValue === statusOption.value"
+        is-check-item
+        :title="statusOption.text"
+        @click="onDropdownItemClick(statusOption)"
+      >
+        {{ statusOption.text }}
+      </gl-dropdown-item>
+    </gl-dropdown>
+  </div>
+</template>