Merge branch '321201-api-fuzzing-form-ux-fine-tuning' into 'master'

API fuzzing - Scroll to top of window on error

See merge request gitlab-org/gitlab!56890

ee/app/assets/javascripts/security_configuration/api_fuzzing/components/configuration_form.vue

@@ -55,7 +55,7 @@ export default {
   data() {
     return {
       isLoading: false,
-      showError: false,
+      isErrorVisible: false,
       targetUrl: {
         field: 'targetUrl',
         label: s__('APIFuzzing|Target URL'),
@@ -184,7 +184,7 @@ export default {
   methods: {
     async onSubmit() {
       this.isLoading = true;
-      this.showError = false;
+      this.dismissError();
       try {
         const input = {
           projectPath: this.fullPath,
@@ -211,21 +211,25 @@ export default {
           variables: { input },
         });
         if (errors.length) {
-          this.showError = true;
+          this.showError();
         } else {
           this.ciYamlEditPath = gitlabCiYamlEditPath;
           this.configurationYaml = configurationYaml;
           this.$refs[CONFIGURATION_SNIPPET_MODAL_ID].show();
         }
       } catch (e) {
-        this.showError = true;
+        this.showError();
         Sentry.captureException(e);
       } finally {
         this.isLoading = false;
       }
     },
+    showError() {
+      this.isErrorVisible = true;
+      window.scrollTo({ top: 0 });
+    },
     dismissError() {
-      this.showError = false;
+      this.isErrorVisible = false;
     },
   },
   SCAN_MODES,
@@ -234,8 +238,8 @@ export default {
 
 <template>
   <form @submit.prevent="onSubmit">
-    <gl-alert v-if="showError" variant="danger" class="gl-mb-5" @dismiss="dismissError">
-      {{ s__('APIFuzzing|The configuration could not be saved, please try again later.') }}
+    <gl-alert v-if="isErrorVisible" variant="danger" class="gl-mb-5" @dismiss="dismissError">
+      {{ s__('APIFuzzing|Code snippet could not be generated. Try again later.') }}
     </gl-alert>
 
     <form-input v-model="targetUrl.value" v-bind="targetUrl" class="gl-mb-7" />

ee/changelogs/unreleased/321201-api-fuzzing-form-ux-fine-tuning.yml

+---
+title: Scroll to top of window when API Fuzzing configuration fails
+merge_request: 56890
+author:
+type: changed

ee/spec/frontend/security_configuration/api_fuzzing/components/configuration_form_spec.js

@@ -270,6 +270,7 @@ variables:
       await waitForPromises();
 
       expect(findAlert().exists()).toBe(true);
+      expect(window.scrollTo).toHaveBeenCalledWith({ top: 0 });
     });
 
     it('shows an error on error-as-data', async () => {
@@ -294,6 +295,7 @@ variables:
       await waitForPromises();
 
       expect(findAlert().exists()).toBe(true);
+      expect(window.scrollTo).toHaveBeenCalledWith({ top: 0 });
     });
   });
 });

locale/gitlab.pot

@@ -1494,6 +1494,9 @@ msgstr ""
 msgid "APIFuzzing|Choose a profile"
 msgstr ""
 
+msgid "APIFuzzing|Code snippet could not be generated. Try again later."
+msgstr ""
+
 msgid "APIFuzzing|Code snippet for the API Fuzzing configuration"
 msgstr ""
 
@@ -1557,9 +1560,6 @@ msgstr ""
 msgid "APIFuzzing|Target URL"
 msgstr ""
 
-msgid "APIFuzzing|The configuration could not be saved, please try again later."
-msgstr ""
-
 msgid "APIFuzzing|There are two ways to perform scans."
 msgstr ""