convert notification subscription button into toggle

3 files changed, 11 insertions, 22 deletions

diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
index 7226076a8fc..f4f9d04fcf2 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
@@ -2,11 +2,11 @@
   /* eslint-disable vue/require-default-prop */
   import { __ } from '../../../locale';
   import eventHub from '../../event_hub';
-  import loadingButton from '../../../vue_shared/components/loading_button.vue';
+  import toggleButton from '../../../vue_shared/components/toggle_button.vue';
 
   export default {
     components: {
-      loadingButton,
+      toggleButton,
     },
     props: {
       loading: {
@@ -24,15 +24,8 @@
       },
     },
     computed: {
-      buttonLabel() {
-        let label;
-        if (this.subscribed === false) {
-          label = __('Subscribe');
-        } else if (this.subscribed === true) {
-          label = __('Unsubscribe');
-        }
-
-        return label;
+      showLoadingState() {
+        return this.subscribed === null || this.loading;
       },
     },
     methods: {
@@ -55,12 +48,12 @@
     <span class="issuable-header-text hide-collapsed pull-left">
       {{ __('Notifications') }}
     </span>
-    <loading-button
+    <toggle-button
       ref="loadingButton"
-      class="btn btn-default pull-right hide-collapsed js-issuable-subscribe-button"
-      :loading="loading"
-      :label="buttonLabel"
-      @click="toggleSubscription"
+      class="pull-right hide-collapsed js-issuable-subscribe-button"
+      :is-loading="showLoadingState"
+      :value="subscribed"
+      @change="toggleSubscription"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue
index 2b12718ae96..274ea80c484 100644
--- a/app/assets/javascripts/vue_shared/components/toggle_button.vue
+++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue
@@ -23,11 +23,10 @@
       name: {
         type: String,
         required: false,
-        default: '',
       },
       value: {
         type: Boolean,
-        required: true,
+        required: false,
       },
       disabledInput: {
         type: Boolean,
@@ -61,6 +60,7 @@
 <template>
   <label class="toggle-wrapper">
     <input
+      v-if="name"
       type="hidden"
       :name="name"
       :value="value"
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index ae9a8b0182c..759719a72da 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -162,10 +162,6 @@
       border: 0;
     }
 
-    span {
-      display: inline-block;
-    }
-
     .select2-container span {
       margin-top: 0;
     }