Address frontend reviewer feedback

- touch up specs
- add ability to deselect item
- move select options to constant

app/assets/javascripts/issuable_bulk_update_sidebar/components/status_select.vue

 <script>
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { __ } from '~/locale';
+import { ISSUE_STATUS_SELECT_OPTIONS } from '../constants';
 
 export default {
   name: 'StatusSelect',
@@ -15,37 +16,42 @@ export default {
   },
   computed: {
     dropdownText() {
-      return this.status?.text ?? __('Select status');
+      return this.status?.text ?? this.$options.i18n.defaultDropdownText;
     },
     selectedValue() {
       return this.status?.value;
     },
   },
-  selectOptions: [
-    {
-      value: 'reopen',
-      text: __('Open'),
+  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;
+      }
     },
-    {
-      value: 'close',
-      text: __('Closed'),
   },
-  ],
+  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="__('Change status')" class="gl-w-full">
+    <gl-dropdown :text="dropdownText" :title="$options.i18n.dropdownTitle" class="gl-w-full">
       <gl-dropdown-item
-        v-for="item in $options.selectOptions"
-        :key="item.value"
-        :is-checked="selectedValue === item.value"
+        v-for="statusOption in $options.ISSUE_STATUS_SELECT_OPTIONS"
+        :key="statusOption.value"
+        :is-checked="selectedValue === statusOption.value"
         is-check-item
-        :title="item.text"
-        @click="status = item"
+        :title="statusOption.text"
+        @click="onDropdownItemClick(statusOption)"
       >
-        {{ item.text }}
+        {{ statusOption.text }}
       </gl-dropdown-item>
     </gl-dropdown>
   </div>

app/assets/javascripts/issuable_bulk_update_sidebar/constants.js

+import { __ } from '~/locale';
+
+export const ISSUE_STATUS_MODIFIERS = {
+  REOPEN: 'reopen',
+  CLOSE: 'close',
+};
+
+export const ISSUE_STATUS_SELECT_OPTIONS = [
+  {
+    value: ISSUE_STATUS_MODIFIERS.REOPEN,
+    text: __('Open'),
+  },
+  {
+    value: ISSUE_STATUS_MODIFIERS.CLOSE,
+    text: __('Closed'),
+  },
+];

spec/frontend/issuable_bulk_update_sidebar/components/status_select_spec.js

 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import StatusSelect from '~/issuable_bulk_update_sidebar/components/status_select.vue';
+import { ISSUE_STATUS_SELECT_OPTIONS } from '~/issuable_bulk_update_sidebar/constants';
 
 describe('StatusSelect', () => {
   let wrapper;
@@ -8,16 +9,24 @@ describe('StatusSelect', () => {
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
   const findHiddenInput = () => wrapper.find('input');
+
   function createComponent() {
     wrapper = shallowMount(StatusSelect);
   }
 
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
   describe('with no value selected', () => {
-    it('renders default text', () => {
+    beforeEach(() => {
       createComponent();
+    });
 
+    it('renders default text', () => {
       expect(findDropdown().props('text')).toBe('Select status');
     });
+
     it('renders dropdown items with `is-checked` prop set to `false`', () => {
       const dropdownItems = findAllDropdownItems();
 
@@ -27,18 +36,23 @@ describe('StatusSelect', () => {
   });
 
   describe('when selecting a value', () => {
+    const selectItemAtIndex = 0;
+
     beforeEach(async () => {
       createComponent();
-      findAllDropdownItems().at(0).vm.$emit('click');
-      await wrapper.vm.$nextTick();
+      await findAllDropdownItems().at(selectItemAtIndex).vm.$emit('click');
     });
 
     it('updates value of the hidden input', () => {
-      expect(findHiddenInput().attributes('value')).toBe('reopen');
+      expect(findHiddenInput().attributes('value')).toBe(
+        ISSUE_STATUS_SELECT_OPTIONS[selectItemAtIndex].value,
+      );
     });
 
     it('updates the dropdown text prop', () => {
-      expect(findDropdown().props('text')).toBe('Open');
+      expect(findDropdown().props('text')).toBe(
+        ISSUE_STATUS_SELECT_OPTIONS[selectItemAtIndex].text,
+      );
     });
 
     it('sets dropdown item `is-checked` prop to `true`', () => {
@@ -47,5 +61,17 @@ describe('StatusSelect', () => {
       expect(dropdownItems.at(0).props('isChecked')).toBe(true);
       expect(dropdownItems.at(1).props('isChecked')).toBe(false);
     });
+
+    describe('when selecting the value that is already selected', () => {
+      it('clears dropdown selection', async () => {
+        await findAllDropdownItems().at(selectItemAtIndex).vm.$emit('click');
+
+        const dropdownItems = findAllDropdownItems();
+
+        expect(dropdownItems.at(0).props('isChecked')).toBe(false);
+        expect(dropdownItems.at(1).props('isChecked')).toBe(false);
+        expect(findDropdown().props('text')).toBe('Select status');
+      });
+    });
   });
 });