Add latest changes from gitlab-org/gitlab@13-2-stable-ee

8 files changed, 94 insertions, 44 deletions

diff --git a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
index 550a1be1e64..0987603cafd 100644
--- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import { __ } from '~/locale';
 import Flash from '~/flash';
 import tooltip from '~/vue_shared/directives/tooltip';
@@ -18,6 +18,10 @@ export default {
   },
   mixins: [recaptchaModalImplementor],
   props: {
+    fullPath: {
+      required: true,
+      type: String,
+    },
     isEditable: {
       required: true,
       type: Boolean,
@@ -42,16 +46,24 @@ export default {
     },
   },
   created() {
+    eventHub.$on('updateConfidentialAttribute', this.updateConfidentialAttribute);
     eventHub.$on('closeConfidentialityForm', this.toggleForm);
   },
   beforeDestroy() {
+    eventHub.$off('updateConfidentialAttribute', this.updateConfidentialAttribute);
     eventHub.$off('closeConfidentialityForm', this.toggleForm);
   },
   methods: {
+    ...mapActions(['setConfidentiality']),
     toggleForm() {
       this.edit = !this.edit;
     },
-    updateConfidentialAttribute(confidential) {
+    closeForm() {
+      this.edit = false;
+    },
+    updateConfidentialAttribute() {
+      // TODO: rm when FF is defaulted to on.
+      const confidential = !this.confidential;
       this.service
         .update('issue', { confidential })
         .then(({ data }) => this.checkForSpam(data))
@@ -97,12 +109,8 @@ export default {
       >
     </div>
     <div class="value sidebar-item-value hide-collapsed">
-      <edit-form
-        v-if="edit"
-        :is-confidential="confidential"
-        :update-confidential-attribute="updateConfidentialAttribute"
-      />
-      <div v-if="!confidential" class="no-value sidebar-item-value">
+      <edit-form v-if="edit" :is-confidential="confidential" :full-path="fullPath" />
+      <div v-if="!confidential" class="no-value sidebar-item-value" data-testid="not-confidential">
         <icon :size="16" name="eye" aria-hidden="true" class="sidebar-item-icon inline" />
         {{ __('Not confidential') }}
       </div>
diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form.vue
index 0ecbf934c25..9dd4f04acdb 100644
--- a/app/assets/javascripts/sidebar/components/confidential/edit_form.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/edit_form.vue
@@ -11,9 +11,9 @@ export default {
       required: true,
       type: Boolean,
     },
-    updateConfidentialAttribute: {
+    fullPath: {
       required: true,
-      type: Function,
+      type: String,
     },
   },
   computed: {
@@ -37,10 +37,7 @@ export default {
       <div>
         <p v-if="!isConfidential" v-html="confidentialityOnWarning"></p>
         <p v-else v-html="confidentialityOffWarning"></p>
-        <edit-form-buttons
-          :is-confidential="isConfidential"
-          :update-confidential-attribute="updateConfidentialAttribute"
-        />
+        <edit-form-buttons :full-path="fullPath" />
       </div>
     </div>
   </div>
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>
diff --git a/app/assets/javascripts/sidebar/components/confidential/queries/update_issue_confidential.mutation.graphql b/app/assets/javascripts/sidebar/components/confidential/queries/update_issue_confidential.mutation.graphql
new file mode 100644
index 00000000000..2459aa346c9
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/confidential/queries/update_issue_confidential.mutation.graphql
@@ -0,0 +1,7 @@
+mutation updateIssueConfidential($input: IssueSetConfidentialInput!) {
+  issueSetConfidential(input: $input) {
+    issue {
+      confidential
+    }
+  }
+}
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
index f88bde624b4..2e85ded8ade 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
@@ -41,7 +41,7 @@ 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>
 
diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index e371091fc53..2c108835c36 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -11,6 +11,7 @@ import sidebarSubscriptions from './components/subscriptions/sidebar_subscriptio
 import Translate from '../vue_shared/translate';
 import createDefaultClient from '~/lib/graphql';
 import { store } from '~/notes/stores';
+import { isInIssuePage } from '~/lib/utils/common_utils';
 
 Vue.use(Translate);
 Vue.use(VueApollo);
@@ -43,7 +44,7 @@ function mountAssigneesComponent(mediator) {
           projectPath: fullPath,
           field: el.dataset.field,
           signedIn: el.hasAttribute('data-signed-in'),
-          issuableType: gl.utils.isInIssuePage() ? 'issue' : 'merge_request',
+          issuableType: isInIssuePage() ? 'issue' : 'merge_request',
         },
       }),
   });
@@ -52,20 +53,30 @@ function mountAssigneesComponent(mediator) {
 function mountConfidentialComponent(mediator) {
   const el = document.getElementById('js-confidential-entry-point');
 
+  const { fullPath, iid } = getSidebarOptions();
+
   if (!el) return;
 
   const dataNode = document.getElementById('js-confidential-issue-data');
   const initialData = JSON.parse(dataNode.innerHTML);
 
-  const ConfidentialComp = Vue.extend(ConfidentialIssueSidebar);
-
-  new ConfidentialComp({
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
     store,
-    propsData: {
-      isEditable: initialData.is_editable,
-      service: mediator.service,
+    components: {
+      ConfidentialIssueSidebar,
     },
-  }).$mount(el);
+    render: createElement =>
+      createElement('confidential-issue-sidebar', {
+        props: {
+          iid: String(iid),
+          fullPath,
+          isEditable: initialData.is_editable,
+          service: mediator.service,
+        },
+      }),
+  });
 }
 
 function mountLockComponent(mediator) {
@@ -83,7 +94,7 @@ function mountLockComponent(mediator) {
       isLocked: initialData.is_locked,
       isEditable: initialData.is_editable,
       mediator,
-      issuableType: gl.utils.isInIssuePage() ? 'issue' : 'merge_request',
+      issuableType: isInIssuePage() ? 'issue' : 'merge_request',
     },
   }).$mount(el);
 }
diff --git a/app/assets/javascripts/sidebar/queries/sidebarDetails.query.graphql b/app/assets/javascripts/sidebar/queries/sidebarDetails.query.graphql
index 8cc68f6ea9a..2aff7da4605 100644
--- a/app/assets/javascripts/sidebar/queries/sidebarDetails.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/sidebarDetails.query.graphql
@@ -1,6 +1,6 @@
-query ($fullPath: ID!, $iid: String!) {
-  project (fullPath: $fullPath) {
-    issue (iid: $iid) {
+query($fullPath: ID!, $iid: String!) {
+  project(fullPath: $fullPath) {
+    issue(iid: $iid) {
       iid
     }
   }
diff --git a/app/assets/javascripts/sidebar/queries/sidebarDetailsForHealthStatusFeatureFlag.query.graphql b/app/assets/javascripts/sidebar/queries/sidebarDetailsForHealthStatusFeatureFlag.query.graphql
index 8cc68f6ea9a..2aff7da4605 100644
--- a/app/assets/javascripts/sidebar/queries/sidebarDetailsForHealthStatusFeatureFlag.query.graphql
+++ b/app/assets/javascripts/sidebar/queries/sidebarDetailsForHealthStatusFeatureFlag.query.graphql
@@ -1,6 +1,6 @@
-query ($fullPath: ID!, $iid: String!) {
-  project (fullPath: $fullPath) {
-    issue (iid: $iid) {
+query($fullPath: ID!, $iid: String!) {
+  project(fullPath: $fullPath) {
+    issue(iid: $iid) {
       iid
     }
   }