Add latest changes from gitlab-org/gitlab@master

3 files changed, 63 insertions, 1 deletions

diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue
index ffb5e242973..629f9b03255 100644
--- a/app/assets/javascripts/snippets/components/edit.vue
+++ b/app/assets/javascripts/snippets/components/edit.vue
@@ -32,6 +32,7 @@ export default {
     SnippetBlobActionsEdit,
     TitleField,
     FormFooterActions,
+    CaptchaModal: () => import('~/captcha/captcha_modal.vue'),
     GlButton,
     GlLoadingIcon,
   },
@@ -66,12 +67,25 @@ export default {
         description: '',
         visibilityLevel: this.selectedLevel,
       },
+      captchaResponse: '',
+      needsCaptchaResponse: false,
+      captchaSiteKey: '',
+      spamLogId: '',
     };
   },
   computed: {
     hasBlobChanges() {
       return this.actions.length > 0;
     },
+    hasNoChanges() {
+      return (
+        this.actions.every(
+          (action) => !action.content && !action.filePath && !action.previousPath,
+        ) &&
+        !this.snippet.title &&
+        !this.snippet.description
+      );
+    },
     hasValidBlobs() {
       return this.actions.every((x) => x.content);
     },
@@ -88,6 +102,8 @@ export default {
         description: this.snippet.description,
         visibilityLevel: this.snippet.visibilityLevel,
         blobActions: this.actions,
+        ...(this.spamLogId && { spamLogId: this.spamLogId }),
+        ...(this.captchaResponse && { captchaResponse: this.captchaResponse }),
       };
     },
     saveButtonLabel() {
@@ -116,7 +132,7 @@ export default {
     onBeforeUnload(e = {}) {
       const returnValue = __('Are you sure you want to lose unsaved changes?');
 
-      if (!this.hasBlobChanges || this.isUpdating) return undefined;
+      if (!this.hasBlobChanges || this.hasNoChanges || this.isUpdating) return undefined;
 
       Object.assign(e, { returnValue });
       return returnValue;
@@ -159,6 +175,13 @@ export default {
         .then(({ data }) => {
           const baseObj = this.newSnippet ? data?.createSnippet : data?.updateSnippet;
 
+          if (baseObj.needsCaptchaResponse) {
+            // If we need a captcha response, start process for receiving captcha response.
+            // We will resubmit after the response is obtained.
+            this.requestCaptchaResponse(baseObj.captchaSiteKey, baseObj.spamLogId);
+            return;
+          }
+
           const errors = baseObj?.errors;
           if (errors.length) {
             this.flashAPIFailure(errors[0]);
@@ -173,6 +196,35 @@ export default {
     updateActions(actions) {
       this.actions = actions;
     },
+    /**
+     * Start process for getting captcha response from user
+     *
+     * @param captchaSiteKey Stored in data and used to display the captcha.
+     * @param spamLogId Stored in data and included when the form is re-submitted.
+     */
+    requestCaptchaResponse(captchaSiteKey, spamLogId) {
+      this.captchaSiteKey = captchaSiteKey;
+      this.spamLogId = spamLogId;
+      this.needsCaptchaResponse = true;
+    },
+    /**
+     * Handle the captcha response from the user
+     *
+     * @param captchaResponse The captchaResponse value emitted from the modal.
+     */
+    receivedCaptchaResponse(captchaResponse) {
+      this.needsCaptchaResponse = false;
+      this.captchaResponse = captchaResponse;
+
+      if (this.captchaResponse) {
+        // If the user solved the captcha resubmit the form.
+        this.handleFormSubmit();
+      } else {
+        // If the user didn't solve the captcha (e.g. they just closed the modal),
+        // finish the update and allow them to continue editing or manually resubmit the form.
+        this.isUpdating = false;
+      }
+    },
   },
 };
 </script>
@@ -190,6 +242,11 @@ export default {
       class="loading-animation prepend-top-20 gl-mb-6"
     />
     <template v-else>
+      <captcha-modal
+        :captcha-site-key="captchaSiteKey"
+        :needs-captcha-response="needsCaptchaResponse"
+        @receivedCaptchaResponse="receivedCaptchaResponse"
+      />
       <title-field
         id="snippet-title"
         v-model="snippet.title"
diff --git a/app/assets/javascripts/snippets/mutations/createSnippet.mutation.graphql b/app/assets/javascripts/snippets/mutations/createSnippet.mutation.graphql
index f688868d1b9..64d5d7c30fa 100644
--- a/app/assets/javascripts/snippets/mutations/createSnippet.mutation.graphql
+++ b/app/assets/javascripts/snippets/mutations/createSnippet.mutation.graphql
@@ -4,5 +4,7 @@ mutation CreateSnippet($input: CreateSnippetInput!) {
     snippet {
       webUrl
     }
+    needsCaptchaResponse
+    captchaSiteKey
   }
 }
diff --git a/app/assets/javascripts/snippets/mutations/updateSnippet.mutation.graphql b/app/assets/javascripts/snippets/mutations/updateSnippet.mutation.graphql
index 548725f7357..0a72f71b7c9 100644
--- a/app/assets/javascripts/snippets/mutations/updateSnippet.mutation.graphql
+++ b/app/assets/javascripts/snippets/mutations/updateSnippet.mutation.graphql
@@ -4,5 +4,8 @@ mutation UpdateSnippet($input: UpdateSnippetInput!) {
     snippet {
       webUrl
     }
+    needsCaptchaResponse
+    captchaSiteKey
+    spamLogId
   }
 }