1 files changed, 41 insertions, 14 deletions
diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
index e106afea9f5..80928649a03 100644
--- a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
@@ -1,35 +1,60 @@
 <script>
 import $ from 'jquery';
-import eventHub from '../../event_hub';
+import { GlLoadingIcon } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
 import { __ } from '~/locale';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import Flash from '~/flash';
+import eventHub from '../../event_hub';
 
 export default {
+  components: {
+    GlLoadingIcon,
+  },
+  mixins: [glFeatureFlagsMixin()],
   props: {
-    isConfidential: {
-      required: true,
-      type: Boolean,
-    },
-    updateConfidentialAttribute: {
+    fullPath: {
       required: true,
-      type: Function,
+      type: String,
     },
   },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
   computed: {
+    ...mapState({ confidential: ({ noteableData }) => noteableData.confidential }),
     toggleButtonText() {
-      return this.isConfidential ? __('Turn Off') : __('Turn On');
-    },
-    updateConfidentialBool() {
-      return !this.isConfidential;
+      if (this.isLoading) {
+        return __('Applying');
+      }
+
+      return this.confidential ? __('Turn Off') : __('Turn On');
     },
   },
   methods: {
+    ...mapActions(['updateConfidentialityOnIssue']),
     closeForm() {
       eventHub.$emit('closeConfidentialityForm');
       $(this.$el).trigger('hidden.gl.dropdown');
     },
     submitForm() {
-      this.closeForm();
-      this.updateConfidentialAttribute(this.updateConfidentialBool);
+      this.isLoading = true;
+      const confidential = !this.confidential;
+
+      if (this.glFeatures.confidentialApolloSidebar) {
+        this.updateConfidentialityOnIssue({ confidential, fullPath: this.fullPath })
+          .catch(() => {
+            Flash(__('Something went wrong trying to change the confidentiality of this issue'));
+          })
+          .finally(() => {
+            this.closeForm();
+            this.isLoading = false;
+          });
+      } else {
+        eventHub.$emit('updateConfidentialAttribute');
+      }
     },
   },
 };
@@ -37,15 +62,17 @@ export default {
 
 <template>
   <div class="sidebar-item-warning-message-actions">
-    <button type="button" class="btn btn-default append-right-10" @click="closeForm">
+    <button type="button" class="btn btn-default gl-mr-3" @click="closeForm">
       {{ __('Cancel') }}
     </button>
     <button
       type="button"
       class="btn btn-close"
       data-testid="confidential-toggle"
+      :disabled="isLoading"
       @click.prevent="submitForm"
     >
+      <gl-loading-icon v-if="isLoading" inline />
       {{ toggleButtonText }}
     </button>
   </div>