fix(sidebar): expanding custom ui sidebar groups was not working as expected

Author: SteKoe

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

@@ -22,8 +22,8 @@ const emitCustomRouteAddedEvent = debounce(() => {
 export function useViewRegistry() {
   return {
     views: viewRegistry.views,
-    addView(view) {
-      viewRegistry.addView(view);
+    addView(viewToAdd) {
+      const view = viewRegistry.addView(viewToAdd)[0];
 
       if (view.parent) {
         viewRegistry.router.addRoute(view.parent, {

spring-boot-admin-server-ui/src/main/frontend/viewRegistry.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { remove } from 'lodash-es';
-import { Text, VNode, h, markRaw, reactive, shallowRef } from 'vue';
+import { Text, VNode, h, markRaw, reactive, shallowRef, toRaw } from 'vue';
 import { Router, createRouter, createWebHistory } from 'vue-router';
 
 import sbaConfig from './sba-config';
@@ -82,8 +82,8 @@ export default class ViewRegistry {
     return Array.prototype.find.call(this._views, (v) => v.name === name);
   }
 
-  addView(...views: View[]) {
-    views.forEach((view) => this._addView(view));
+  addView(...views: View[]): SbaView[] {
+    return views.map((view) => this._addView(view));
   }
 
   addRedirect(path: string, redirect: string | object) {
@@ -94,7 +94,7 @@ export default class ViewRegistry {
     }
   }
 
-  _addView(viewConfig: ViewConfig) {
+  _addView(viewConfig: ViewConfig): SbaView {
     const view = { ...viewConfig } as SbaView;
     view.hasChildren = !!viewConfig.children;
 
@@ -132,6 +132,8 @@ export default class ViewRegistry {
 
     this._removeExistingView(view);
     this._views.push(view);
+
+    return view;
   }
 
   _removeExistingView(view) {
@@ -151,7 +153,7 @@ export default class ViewRegistry {
         name: view.name,
         component: view.component,
         props: view.props,
-        meta: { view: view },
+        meta: { view: toRaw(view) },
         children,
       };
     });

spring-boot-admin-server-ui/src/main/frontend/views/instances/shell/sidebar.vue

@@ -117,7 +117,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 
 import SbaButton from '@/components/sba-button.vue';
 
@@ -195,7 +195,7 @@ export default defineComponent({
       return key === translated ? groupId : translated;
     },
     isActiveGroup(group) {
-      return group.views.includes(this.$route.meta.view);
+      return group.views.some((v) => toRaw(v) === this.$route.meta.view);
     },
     hasMultipleViews(group) {
       return group.views.length > 1;
@@ -208,10 +208,12 @@ export default defineComponent({
 .instance-info-block {
   @apply bg-sba-50 bg-opacity-40 text-sba-900 flex items-center text-sm py-4 px-6 text-left overflow-hidden text-ellipsis rounded transition duration-300 ease-in-out cursor-pointer;
 }
+
 .navbar-link {
   @apply cursor-pointer bg-sba-50 bg-opacity-40 duration-300 ease-in-out flex  items-center overflow-hidden py-4 rounded text-sm transition whitespace-nowrap;
   @apply text-gray-700;
 }
+
 .navbar-link:hover,
 .navbar-link__active {
   @apply bg-sba-50 bg-opacity-80 text-sba-900;