feat: Integrate useModuleUpdateRoute composable for route updates and remove routerBase from mountInsightsApp

Author: Aldemylla

src/components/SystemInsights.vue

@@ -4,9 +4,10 @@ import { useRoute } from 'vue-router';
 
 import LoadingModule from './modules/LoadingModule.vue';
 import ExternalSystem from './ExternalSystem.vue';
-import { tryImportWithRetries } from '../utils/moduleFederation';
+import { tryImportWithRetries } from '@/utils/moduleFederation';
 import { useSharedStore } from '@/store/Shared';
-import { useFeatureFlagsStore } from '../store/featureFlags';
+import { useFeatureFlagsStore } from '@/store/featureFlags';
+import { useModuleUpdateRoute } from '@/composables/useModuleUpdateRoute';
 
 const insightsApp = ref(null);
 const useIframe = ref(false);
@@ -25,6 +26,8 @@ const route = useRoute();
 const sharedStore = useSharedStore();
 const featureFlagsStore = useFeatureFlagsStore();
 
+useModuleUpdateRoute('insights');
+
 async function mount({ force = false } = {}) {
   if (!force && !props.modelValue) {
     return;
@@ -47,7 +50,6 @@ async function mount({ force = false } = {}) {
 
   insightsApp.value = await mountInsightsApp({
     containerId: 'insights-app',
-    routerBase: `/projects/${sharedStore.current.project.uuid}/insights`,
   });
 }
 

src/composables/useModuleUpdateRoute.js

@@ -0,0 +1,36 @@
+import { onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+/**
+ * Composable to handle updateRoute window events
+ * @param {string} routeName - The name of the route to navigate to
+ * @returns {void}
+ */
+export function useModuleUpdateRoute(routeName) {
+  const router = useRouter();
+
+  const handleUpdateRoute = (event) => {
+    const path = event.detail.path
+      .split('/')
+      .slice(1)
+      .filter((item) => item);
+
+    if (path.length) {
+      router.replace({
+        name: routeName,
+        params: {
+          internal: path,
+        },
+        query: event.detail?.query,
+      });
+    }
+  };
+
+  onMounted(() => {
+    window.addEventListener('updateRoute', handleUpdateRoute);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('updateRoute', handleUpdateRoute);
+  });
+}