2 files changed, 54 insertions, 3 deletions
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
index 99e7c825b72..0fba1cb5e4e 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue
@@ -4,10 +4,10 @@ import { createAlert } from '~/flash';
 import { IssuableType } from '~/issues/constants';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import { __, sprintf } from '~/locale';
-import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import toast from '~/vue_shared/plugins/global_toast';
-import { subscribedQueries, Tracking } from '~/sidebar/constants';
+import { subscribedQueries, Tracking } from '../../constants';
+import SidebarEditableItem from '../sidebar_editable_item.vue';
 
 const ICON_ON = 'notifications';
 const ICON_OFF = 'notifications-off';
@@ -182,7 +182,7 @@ export default {
 </script>
 
 <template>
-  <gl-dropdown-form v-if="isMergeRequest" class="gl-new-dropdown-item">
+  <gl-dropdown-form v-if="isMergeRequest" class="gl-dropdown-item">
     <div class="gl-px-5 gl-pb-2 gl-pt-1">
       <gl-toggle
         :value="subscribed"
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions_dropdown.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions_dropdown.vue
new file mode 100644
index 00000000000..4c3ba76d12d
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions_dropdown.vue
@@ -0,0 +1,51 @@
+<script>
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { subscriptionsDropdownOptions } from '../../constants';
+
+export default {
+  subscriptionsDropdownOptions,
+  i18n: {
+    defaultDropdownText: __('Select subscription'),
+    headerText: __('Change subscription'),
+  },
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+  },
+  data() {
+    return {
+      subscription: undefined,
+    };
+  },
+  computed: {
+    dropdownText() {
+      return this.subscription?.text ?? this.$options.i18n.defaultDropdownText;
+    },
+    selectedValue() {
+      return this.subscription?.value;
+    },
+  },
+  methods: {
+    handleClick(option) {
+      this.subscription = option.value === this.subscription?.value ? undefined : option;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <input type="hidden" name="update[subscription_event]" :value="selectedValue" />
+    <gl-dropdown class="gl-w-full" :header-text="$options.i18n.headerText" :text="dropdownText">
+      <gl-dropdown-item
+        v-for="subscriptionsOption in $options.subscriptionsDropdownOptions"
+        :key="subscriptionsOption.value"
+        is-check-item
+        :is-checked="selectedValue === subscriptionsOption.value"
+        @click="handleClick(subscriptionsOption)"
+      >
+        {{ subscriptionsOption.text }}
+      </gl-dropdown-item>
+    </gl-dropdown>
+  </div>
+</template>