Scroll to top of window on error

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

@@ -54,7 +54,7 @@ export default {
   data() {
     return {
       isLoading: false,
-      showError: false,
+      isErrorVisible: false,
       targetUrl: {
         field: 'targetUrl',
         label: s__('APIFuzzing|Target URL'),
@@ -159,7 +159,7 @@ export default {
   methods: {
     async onSubmit() {
       this.isLoading = true;
-      this.showError = false;
+      this.dismissError();
       try {
         const input = {
           projectPath: this.fullPath,
@@ -186,21 +186,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,
@@ -209,7 +213,7 @@ export default {
 
 <template>
   <form @submit.prevent="onSubmit">
-    <gl-alert v-if="showError" variant="danger" class="gl-mb-5" @dismiss="dismissError">
+    <gl-alert v-if="isErrorVisible" variant="danger" class="gl-mb-5" @dismiss="dismissError">
       {{ s__('APIFuzzing|The configuration could not be saved, please try again later.') }}
     </gl-alert>
 

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

@@ -263,6 +263,7 @@ describe('EE - ApiFuzzingConfigurationForm', () => {
       await waitForPromises();
 
       expect(findAlert().exists()).toBe(true);
+      expect(window.scrollTo).toHaveBeenCalledWith({ top: 0 });
     });
 
     it('shows an error on error-as-data', async () => {
@@ -287,6 +288,7 @@ describe('EE - ApiFuzzingConfigurationForm', () => {
       await waitForPromises();
 
       expect(findAlert().exists()).toBe(true);
+      expect(window.scrollTo).toHaveBeenCalledWith({ top: 0 });
     });
   });
 });