chore: improve error messages

frontend/src/config/integrations/gerrit/components/gerrit-settings-drawer.vue

@@ -119,6 +119,9 @@ import { Platform } from '@/shared/modules/platform/types/Platform';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfCheckbox from '@/ui-kit/checkbox/Checkbox.vue';
+import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
+import { IntegrationService } from '@/modules/integration/integration-service';
+import { ToastStore } from '@/shared/message/notification';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps<{
@@ -192,6 +195,7 @@ const connect = async () => {
     enableGit: form.enableGit,
     segmentId: props.segmentId,
     grandparentId: props.grandparentId,
+    errorHandler,
   })
     .then(() => {
       trackEvent({
@@ -210,6 +214,23 @@ const connect = async () => {
       loading.value = false;
     });
 };
+
+const errorHandler = (error: any) => {
+  const errorMessage = error?.response?.data;
+  const parsedError = parseDuplicateRepoError(errorMessage, 'There was an error mapping gerrit repositories');
+
+  if (parsedError) {
+    const { repo, eId } = parsedError;
+    // TODO: This is returning 404 error for some reason. It could be that the data returned by the error is incorrect.
+    IntegrationService.find(eId)
+      .then((integration) => {
+        customRepoErrorMessage(integration.segment, repo, 'gerrit');
+      })
+      .catch(() => {
+        ToastStore.error(errorMessage);
+      });
+  }
+};
 </script>
 
 <script lang="ts">

frontend/src/config/integrations/git/components/git-settings-drawer.vue

@@ -86,6 +86,9 @@ import { Platform } from '@/shared/modules/platform/types/Platform';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
+import { IntegrationService } from '@/modules/integration/integration-service';
+import { ToastStore } from '@/shared/message/notification';
+import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -156,6 +159,7 @@ const connect = async () => {
     isUpdate,
     segmentId: props.segmentId,
     grandparentId: props.grandparentId,
+    errorHandler,
   })
     .then(() => {
       trackEvent({
@@ -172,6 +176,23 @@ const connect = async () => {
       loading.value = false;
     });
 };
+
+const errorHandler = (error) => {
+  const errorMessage = error?.response?.data;
+  const parsedError = parseDuplicateRepoError(errorMessage, 'There was an error mapping git repositories');
+
+  if (parsedError) {
+    const { repo, eId } = parsedError;
+    // TODO: This is returning 404 error for some reason. It could be that the data returned by the error is incorrect.
+    IntegrationService.find(eId)
+      .then((integration) => {
+        customRepoErrorMessage(integration.segment, repo, 'git');
+      })
+      .catch(() => {
+        ToastStore.error(errorMessage);
+      });
+  }
+};
 </script>
 
 <script>

frontend/src/config/integrations/github-nango/components/settings/github-settings-drawer.vue

@@ -106,6 +106,7 @@ import {
 import { Platform } from '@/shared/modules/platform/types/Platform';
 import { showIntegrationProgressNotification } from '@/modules/integration/helpers/integration-progress-notification';
 import { dateHelper } from '@/shared/date-helper/date-helper';
+import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
 
 const props = defineProps<{
   modelValue: boolean;
@@ -221,15 +222,30 @@ const connect = () => {
 
       isDrawerVisible.value = false;
     })
-    .catch(() => {
-      ToastStore.error(
-        props.integration?.id
-          ? 'There was error updating settings'
-          : 'There was error connecting GitHub',
-      );
+    .catch((error) => {
+      errorHandler(error);
     });
 };
 
+const errorHandler = (error: any) => {
+  const errorMessage = error?.response?.data;
+  const parsedError = parseDuplicateRepoError(errorMessage, props.integration?.id
+    ? 'There was error updating settings'
+    : 'There was error connecting GitHub');
+
+  if (parsedError) {
+    const { repo, eId } = parsedError;
+    // TODO: This is returning 404 error for some reason. It could be that the data returned by the error is incorrect.
+    IntegrationService.find(eId)
+      .then((integration) => {
+        customRepoErrorMessage(integration.segment, repo, 'github');
+      })
+      .catch(() => {
+        ToastStore.error(errorMessage);
+      });
+  }
+};
+
 const fetchGithubMappings = () => {
   if (!props.integration) return;
   IntegrationService.fetchGitHubMappings(props.integration).then(

frontend/src/config/integrations/github/components/settings/github-settings-drawer.vue

@@ -200,7 +200,7 @@
 
 <script lang="ts" setup>
 import {
-  computed, h, onMounted, ref,
+  computed, onMounted, ref,
 } from 'vue';
 import { ToastStore } from '@/shared/message/notification';
 import github from '@/config/integrations/github/config';
@@ -224,6 +224,7 @@ import LfSvg from '@/shared/svg/svg.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import { ProjectGroup, SubProject } from '@/modules/lf/segments/types/Segments';
+import { parseDuplicateRepoError, customRepoErrorMessage } from '@/shared/helpers/error-message.helper';
 
 const props = defineProps<{
   modelValue: boolean;
@@ -346,63 +347,28 @@ const connect = () => {
         });
       })
       .catch((error) => {
-        handleMessage(error);
+        errorHandler(error);
       });
   });
 };
 
-const handleMessage = (error: any) => {
+const errorHandler = (error: any) => {
   const errorMessage = error?.response?.data;
+  const parsedError = parseDuplicateRepoError(errorMessage, 'There was an error mapping github repositories');
 
-  const pattern = /github repo (?<repo>[^\s]+) mapping with integrationId (?<IId>[^\s]+) but it is already mapped to integration (?<eId>[^\s!]+)/;
-  const match = errorMessage.match(pattern);
-
-  if (match?.groups) {
-    const { repo, eId } = match.groups;
+  if (parsedError) {
+    const { repo, eId } = parsedError;
+    // TODO: This is returning 404 error for some reason. It could be that the data returned by the error is incorrect.
     IntegrationService.find(eId)
       .then((integration) => {
-        customErrorMessage(integration.segment, repo);
+        customRepoErrorMessage(integration.segment, repo, 'github');
       })
       .catch(() => {
         ToastStore.error(errorMessage);
       });
-  } else {
-    ToastStore.error('There was an error mapping github repos');
   }
 };
 
-const customErrorMessage = (segment: any, githubRepo: string) => {
-  ToastStore.error(
-    h(
-      'span',
-      {
-        class: 'whitespace-normal',
-      },
-      [
-        'The github repo',
-        ' ',
-        h('strong', githubRepo),
-        ' ',
-        'is already connected with project',
-        ' ',
-        h(
-          'a',
-          {
-            href: getSegmentLink(segment),
-            class: 'text-blue-500 underline hover:text-blue-600',
-          },
-          segment.name || 'Unknown Project',
-        ),
-      ],
-    ),
-    {
-      title: 'Conflict Detected',
-    },
-  );
-};
-
-const getSegmentLink = (segment: any) => `/integrations/${segment.grandparentId}/${segment.id}`;
-
 // Fetching subprojects
 const subprojects = ref<SubProject[]>([]);
 const loading = ref(false);

frontend/src/modules/admin/modules/projects/components/form/lf-project-group-form.vue

@@ -150,6 +150,8 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
 import { segmentService } from '@/modules/lf/segments/segments.service';
 import { TanstackKey } from '@/shared/types/tanstack';
 import { ProjectGroup } from '@/modules/lf/segments/types/Segments';
+import { AxiosError } from 'axios';
+import { getAxiosErrorMessage } from '@/shared/helpers/error-message.helper';
 
 import { ToastStore } from '@/shared/message/notification';
 
@@ -273,8 +275,8 @@ const onSuccess = () => {
   ToastStore.success(`Project Group ${props.id ? 'updated' : 'created'} successfully`);
 };
 
-const onError = () => {
-  ToastStore.error(`Something went wrong while ${props.id ? 'updating' : 'creating'} the project group`);
+const onError = (err: AxiosError) => {
+  ToastStore.error(getAxiosErrorMessage(err, `Something went wrong while ${props.id ? 'updating' : 'creating'} the project group`));
 };
 
 const updateMutation = useMutation({

frontend/src/modules/integration/integration-store.js

@@ -541,7 +541,7 @@ export default {
     async doGitConnect(
       { commit },
       {
-        remotes, isUpdate, segmentId, grandparentId,
+        remotes, isUpdate, segmentId, grandparentId, errorHandler,
       },
     ) {
       try {
@@ -571,7 +571,11 @@ export default {
           },
         });
       } catch (error) {
-        Errors.handle(error);
+        if (errorHandler) {
+          errorHandler(error);
+        } else {
+          Errors.handle(error);
+        }
         commit('CREATE_ERROR');
       }
     },
@@ -628,6 +632,7 @@ export default {
         enableGit,
         segmentId,
         grandparentId,
+        errorHandler,
       },
     ) {
       try {
@@ -665,7 +670,11 @@ export default {
           },
         });
       } catch (error) {
-        Errors.handle(error);
+        if (errorHandler) {
+          errorHandler(error);
+        } else {
+          Errors.handle(error);
+        }
         commit('CREATE_ERROR');
       }
     },

frontend/src/modules/lf/segments/store/actions.js

@@ -5,6 +5,7 @@ import { router } from '@/router';
 import { useAuthStore } from '@/modules/auth/store/auth.store';
 import { storeToRefs } from 'pinia';
 import { LfRole } from '@/shared/modules/permissions/types/Roles';
+import { getAxiosErrorMessage } from '@/shared/helpers/error-message.helper';
 
 const isAdminOnly = () => {
   const authStore = useAuthStore();
@@ -199,8 +200,8 @@ export default {
         ToastStore.success('Project created successfully');
         this.listProjects();
       })
-      .catch(() => {
-        ToastStore.error('Something went wrong while creating the project');
+      .catch((err) => {
+        ToastStore.error(getAxiosErrorMessage(err, 'Something went wrong while creating the project'));
       })
       .finally(() => Promise.resolve());
   },
@@ -210,8 +211,8 @@ export default {
         ToastStore.success('Project updated successfully');
         this.updateProjectList(id, data);
       })
-      .catch(() => {
-        ToastStore.error('Something went wrong while updating the project');
+      .catch((err) => {
+        ToastStore.error(getAxiosErrorMessage(err, 'Something went wrong while updating the project'));
       })
       .finally(() => Promise.resolve());
   },
@@ -242,8 +243,8 @@ export default {
         ToastStore.success('Sub-project created successfully');
         this.listProjects();
       })
-      .catch(() => {
-        ToastStore.error('Something went wrong while creating the sub-project');
+      .catch((err) => {
+        ToastStore.error(getAxiosErrorMessage(err, 'Something went wrong while creating the sub-project'));
       })
       .finally(() => Promise.resolve());
   },
@@ -253,8 +254,8 @@ export default {
         ToastStore.success('Sub-project updated successfully');
         this.listProjects();
       })
-      .catch(() => {
-        ToastStore.error('Something went wrong while updating the sub-project');
+      .catch((err) => {
+        ToastStore.error(getAxiosErrorMessage(err, 'Something went wrong while updating the sub-project'));
       })
       .finally(() => Promise.resolve());
   },