fix(#2342): navigating to custom route shows blank page

Author: SteKoe

spring-boot-admin-server-ui/src/main/frontend/composables/ViewRegistry.js

@@ -1,4 +1,8 @@
 import ViewRegistry from '../viewRegistry.js';
+import eventBus from '@/services/bus';
+import { debounce } from 'lodash-es';
+
+export const CUSTOM_ROUTES_ADDED_EVENT = 'custom-routes-added';
 
 let viewRegistry;
 
@@ -9,6 +13,10 @@ export function createViewRegistry() {
   return viewRegistry;
 }
 
+const emitCustomRouteAddedEvent = debounce(() => {
+  eventBus.emit(CUSTOM_ROUTES_ADDED_EVENT);
+});
+
 export function useViewRegistry() {
   return {
     views: viewRegistry.views,
@@ -21,17 +29,19 @@ export function useViewRegistry() {
           name: view.name,
           component: view.component,
           props: view.props,
-          meta: { view: view },
+          meta: { view: view }
         });
       } else {
         viewRegistry.router.addRoute({
           path: view.path,
           name: view.name,
           component: view.component,
           props: view.props,
-          meta: { view: view },
+          meta: { view: view }
         });
       }
-    },
+
+      emitCustomRouteAddedEvent();
+    }
   };
 }

spring-boot-admin-server-ui/src/main/frontend/index.js

@@ -20,13 +20,11 @@ import { createApp, h, onBeforeMount, onBeforeUnmount, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 
-
 import './index.css';
 
 
-
 import components from './components';
-import { createViewRegistry, useViewRegistry } from './composables/ViewRegistry.js';
+import { createViewRegistry, CUSTOM_ROUTES_ADDED_EVENT, useViewRegistry } from './composables/ViewRegistry.js';
 import { createApplicationStore, useApplicationStore } from './composables/useApplicationStore.js';
 import i18n from './i18n';
 import { worker } from './mocks/browser';
@@ -35,6 +33,8 @@ import SbaModalPlugin from './plugins/modal';
 import sbaConfig from './sba-config.js';
 import sbaShell from './shell/index.vue';
 import views from './views';
+import eventBus from '@/services/bus';
+import { useRoute, useRouter } from 'vue-router';
 
 
 const applicationStore = createApplicationStore();
@@ -48,7 +48,7 @@ globalThis.SBA.use = ({ install }) => {
   install({
     viewRegistry: globalThis.SBA.viewRegistry,
     applicationStore: globalThis.SBA.useApplicationStore,
-    i18n: i18n.global,
+    i18n: i18n.global
   });
 };
 
@@ -65,29 +65,24 @@ const installables = [Notifications, ...views];
 if (process.env.NODE_ENV === 'development') {
   worker.start({
     serviceWorker: {
-      url: './mockServiceWorker.js',
-    },
+      url: './mockServiceWorker.js'
+    }
   });
 }
 
 installables.forEach((installable) => {
   installable.install({
     viewRegistry,
-    applicationStore,
+    applicationStore
   });
 });
 
 const app = createApp({
   setup() {
-    const { applications, applicationsInitialized, error } =
-      useApplicationStore();
+    const router = useRouter();
+    const route = useRoute();
+    const { applications, applicationsInitialized, error } = useApplicationStore();
     const { t } = useI18n();
-    let props = reactive({
-      applications,
-      applicationsInitialized,
-      error,
-      t,
-    });
 
     onBeforeMount(() => {
       applicationStore.start();
@@ -97,14 +92,25 @@ const app = createApp({
       applicationStore.stop();
     });
 
-    return () => h(sbaShell, props);
-  },
+    let routesAddedEventHandler = async () => {
+      eventBus.off(CUSTOM_ROUTES_ADDED_EVENT, routesAddedEventHandler);
+      await router.replace(route);
+    };
+    eventBus.on(CUSTOM_ROUTES_ADDED_EVENT, routesAddedEventHandler);
+
+    return () => h(sbaShell, reactive({
+      applications,
+      applicationsInitialized,
+      error,
+      t
+    }));
+  }
 });
 
 app.use(i18n);
 app.use(components);
 app.use(NotificationcenterPlugin, {
-  duration: 10_000,
+  duration: 10_000
 });
 app.use(SbaModalPlugin, { i18n });
 app.use(viewRegistry.createRouter());

spring-boot-admin-server-ui/src/main/frontend/plugins/modal/ConfirmButtons.vue

@@ -1,35 +1,35 @@
 <template>
-  <div class="flex gap-1 w-full justify-end">
-    <sba-button primary @click="() => close(true)" v-text="labelOk" />
+  <div class='flex gap-1 w-full justify-end'>
+    <sba-button primary @click='() => close(true)' v-text='labelOk' />
     <sba-button
-      class="button"
-      @click="() => close(false)"
-      v-text="labelCancel"
+      class='button'
+      @click='() => close(false)'
+      v-text='labelCancel'
     />
   </div>
 </template>
 
 <script>
 import SbaButton from '@/components/sba-button';
 
-import eventBus from '@/plugins/modal/bus';
+import eventBus from '@/services/bus';
 
 export default {
   components: { SbaButton },
   props: {
     labelCancel: {
       type: String,
-      required: true,
+      required: true
     },
     labelOk: {
       type: String,
-      required: true,
-    },
+      required: true
+    }
   },
   methods: {
     close(result) {
       eventBus.emit('sba-modal-close', result);
-    },
-  },
+    }
+  }
 };
 </script>

spring-boot-admin-server-ui/src/main/frontend/plugins/modal/Modal.vue

@@ -1,51 +1,51 @@
 <template>
   <TransitionRoot
-    ref="root"
-    :show="isOpen"
+    ref='root'
+    :show='isOpen'
     appear
-    as="template"
-    @close="closeModal"
+    as='template'
+    @close='closeModal'
   >
-    <Dialog as="div" class="relative z-10 modal">
+    <Dialog as='div' class='relative z-10 modal'>
       <TransitionChild
-        as="template"
-        enter="duration-300 ease-out"
-        enter-from="opacity-0"
-        enter-to="opacity-100"
-        leave="duration-200 ease-in"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
+        as='template'
+        enter='duration-300 ease-out'
+        enter-from='opacity-0'
+        enter-to='opacity-100'
+        leave='duration-200 ease-in'
+        leave-from='opacity-100'
+        leave-to='opacity-0'
       >
-        <div class="fixed inset-0 bg-black bg-opacity-25" />
+        <div class='fixed inset-0 bg-black bg-opacity-25' />
       </TransitionChild>
 
-      <div class="fixed inset-0 overflow-y-auto">
+      <div class='fixed inset-0 overflow-y-auto'>
         <div
-          class="flex min-h-full items-center justify-center p-4 text-center"
+          class='flex min-h-full items-center justify-center p-4 text-center'
         >
           <TransitionChild
-            as="template"
-            enter="duration-300 ease-out"
-            enter-from="opacity-0 scale-95"
-            enter-to="opacity-100 scale-100"
-            leave="duration-200 ease-in"
-            leave-from="opacity-100 scale-100"
-            leave-to="opacity-0 scale-95"
+            as='template'
+            enter='duration-300 ease-out'
+            enter-from='opacity-0 scale-95'
+            enter-to='opacity-100 scale-100'
+            leave='duration-200 ease-in'
+            leave-from='opacity-100 scale-100'
+            leave-to='opacity-0 scale-95'
           >
             <DialogPanel
-              class="w-full max-w-md transform overflow-hidden rounded bg-white p-6 text-left align-middle shadow-xl transition-all"
+              class='w-full max-w-md transform overflow-hidden rounded bg-white p-6 text-left align-middle shadow-xl transition-all'
             >
               <DialogTitle
-                as="h3"
-                class="text-lg font-medium leading-6 text-gray-900 flex justify-between"
+                as='h3'
+                class='text-lg font-medium leading-6 text-gray-900 flex justify-between'
               >
                 {{ title }}
               </DialogTitle>
-              <div class="mt-2 mb-2">
-                <slot name="body" />
+              <div class='mt-2 mb-2'>
+                <slot name='body' />
               </div>
-              <div class="mt-4">
-                <slot name="buttons" />
+              <div class='mt-4'>
+                <slot name='buttons' />
               </div>
             </DialogPanel>
           </TransitionChild>
@@ -56,35 +56,29 @@
 </template>
 
 <script>
-import {
-  Dialog,
-  DialogPanel,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot,
-} from '@headlessui/vue';
+import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
 import { defineComponent, ref } from 'vue';
 
-import eventBus from '@/plugins/modal/bus';
+import eventBus from '@/services/bus';
 
 export default defineComponent({
   components: {
     Dialog,
     DialogPanel,
     DialogTitle,
     TransitionRoot,
-    TransitionChild,
+    TransitionChild
   },
   props: {
     title: {
       type: String,
-      required: true,
-    },
+      required: true
+    }
   },
   emits: ['close'],
   setup() {
     return {
-      isOpen: ref(true),
+      isOpen: ref(true)
     };
   },
   mounted() {
@@ -96,7 +90,7 @@ export default defineComponent({
   methods: {
     closeModal() {
       this.isOpen = false;
-    },
-  },
+    }
+  }
 });
 </script>

spring-boot-admin-server-ui/src/main/frontend/plugins/modal/api.js

@@ -2,13 +2,13 @@ import { h } from 'vue';
 
 import ConfirmButtons from './ConfirmButtons';
 import Modal from './Modal';
-import eventBus from './bus';
 import { createComponent } from './helpers';
+import eventBus from '@/services/bus';
 
 export const useModal = (globalProps = {}) => {
   const t =
     globalProps.i18n?.global.t ||
-    function (value) {
+    function(value) {
       return value;
     };
 
@@ -18,7 +18,7 @@ export const useModal = (globalProps = {}) => {
       if (typeof options === 'string') title = options;
 
       const defaultProps = {
-        title,
+        title
       };
 
       const propsData = Object.assign({}, defaultProps, globalProps, options);
@@ -29,7 +29,7 @@ export const useModal = (globalProps = {}) => {
         h(
           'span',
           {
-            innerHTML: body,
+            innerHTML: body
           },
           []
         );
@@ -40,9 +40,9 @@ export const useModal = (globalProps = {}) => {
           buttons: () =>
             h(ConfirmButtons, {
               labelOk: t('term.ok'),
-              labelCancel: t('term.cancel'),
+              labelCancel: t('term.cancel')
             }),
-          body: bodyFn,
+          body: bodyFn
         }
       );
 
@@ -52,6 +52,6 @@ export const useModal = (globalProps = {}) => {
           resolve(result);
         });
       });
-    },
+    }
   };
 };