Merge branch...

Merge branch '233453-dast-site-profile-library-implementation-iteration-1-fix-error-handling' into 'master'

Fix error handling for DAST on-demand profile library

See merge request gitlab-org/gitlab!41638

ee/app/assets/javascripts/dast_profiles/components/dast_profiles.vue

@@ -33,8 +33,6 @@ export default {
   data() {
     return {
       profileTypes: {},
-      errorMessage: '',
-      errorDetails: [],
     };
   },
   computed: {
@@ -90,6 +88,8 @@ export default {
       this.$set(this.profileTypes, profileType, {
         profiles: [],
         pageInfo: {},
+        errorMessage: '',
+        errorDetails: [],
       });
     },
     hasMoreProfiles(profileType) {
@@ -110,37 +110,38 @@ export default {
             const profiles = profileEdges.map(({ node }) => node);
             const pageInfo = project?.[profileType].pageInfo;
 
-            this.profileTypes[profileType] = {
-              profiles,
-              pageInfo,
-            };
+            this.profileTypes[profileType].profiles = profiles;
+            this.profileTypes[profileType].pageInfo = pageInfo;
           }
         },
         error(error) {
           this.handleError({
+            profileType,
             exception: error,
             message: this.profileSettings[profileType].i18n.errorMessages.fetchNetworkError,
           });
         },
       };
     },
-    handleError({ exception, message = '', details = [] }) {
+    handleError({ profileType, exception, message = '', details = [] }) {
       Sentry.captureException(exception);
-      this.errorMessage = message;
-      this.errorDetails = details;
+      this.profileTypes[profileType].errorMessage = message;
+      this.profileTypes[profileType].errorDetails = details;
     },
-    resetErrors() {
-      this.errorMessage = '';
-      this.errorDetails = [];
+    resetErrors(profileType) {
+      this.profileTypes[profileType].errorMessage = '';
+      this.profileTypes[profileType].errorDetails = [];
     },
     fetchMoreProfiles(profileType) {
       const {
         $apollo,
-        $options: { i18n },
+        profileSettings: {
+          [profileType]: { i18n },
+        },
       } = this;
       const { pageInfo } = this.profileTypes[profileType];
 
-      this.resetErrors();
+      this.resetErrors(profileType);
 
       $apollo.queries[profileType]
         .fetchMore({
@@ -148,7 +149,11 @@ export default {
           updateQuery: cacheUtils.appendToPreviousResult(profileType),
         })
         .catch(error => {
-          this.handleError({ exception: error, message: i18n.errorMessages.fetchNetworkError });
+          this.handleError({
+            profileType,
+            exception: error,
+            message: i18n.errorMessages.fetchNetworkError,
+          });
         });
     },
     deleteProfile(profileType, profileId) {
@@ -168,7 +173,7 @@ export default {
         },
       } = this;
 
-      this.resetErrors();
+      this.resetErrors(profileType);
 
       this.$apollo
         .mutate({
@@ -201,6 +206,7 @@ export default {
         })
         .catch(error => {
           this.handleError({
+            profileType,
             exception: error,
             message: i18n.errorMessages.deletionNetworkError,
           });
@@ -253,8 +259,8 @@ export default {
 
         <profiles-list
           :data-testid="`${profileType}List`"
-          :error-message="errorMessage"
-          :error-details="errorDetails"
+          :error-message="profileTypes[profileType].errorMessage"
+          :error-details="profileTypes[profileType].errorDetails"
           :has-more-profiles-to-load="hasMoreProfiles(profileType)"
           :is-loading="isLoadingProfiles(profileType)"
           :profiles-per-page="$options.profilesPerPage"

ee/spec/frontend/dast_profiles/components/dast_profiles_spec.js

@@ -223,7 +223,8 @@ describe('EE - DastProfiles', () => {
 
     it.each`
       givenData                                                                   | propName                   | expectedPropValue
-      ${{ errorMessage: 'foo' }}                                                  | ${'errorMessage'}          | ${'foo'}
+      ${{ profileTypes: { [profileType]: { errorMessage: 'foo' } } }}             | ${'errorMessage'}          | ${'foo'}
+      ${{ profileTypes: { [profileType]: { errorDetails: ['foo'] } } }}           | ${'errorDetails'}          | ${['foo']}
       ${{ profileTypes: { [profileType]: { pageInfo: { hasNextPage: true } } } }} | ${'hasMoreProfilesToLoad'} | ${true}
       ${{ profileTypes: { [profileType]: { profiles: [{ foo: 'bar' }] } } }}      | ${'profiles'}              | ${[{ foo: 'bar' }]}
     `('passes down $propName correctly', async ({ givenData, propName, expectedPropValue }) => {