Restructure vue-router and views to leverage nested router-view mounts

This change ensures that we are properly leveraging nested router
definitions correctly and that it shows up on the vue tools inspector as
intended. It also does a first crack at ensuring that only route points
that require query parameter handling leverage the createProps helper.
Lastly, a duplicate route definition is removed.

Signed-off-by: Jeremy Ho <[email protected]>

frontend/src/router/index.ts

@@ -19,8 +19,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: RouteNames.HOME,
-    component: () => import('../views/HomeView.vue'),
-    props: createProps
+    component: () => import('../views/HomeView.vue')
   },
   // {
   //   path: '/create',
@@ -35,11 +34,12 @@ const routes: Array<RouteRecordRaw> = [
   // },
   {
     path: '/detail',
+    component: () => import('@/views/GenericView.vue'),
     children: [
       {
         path: 'objects',
         name: RouteNames.DETAIL_OBJECTS,
-        component: () => import('../views/DetailObjectsView.vue'),
+        component: () => import('@/views/detail/DetailObjectsView.vue'),
         meta: { requiresAuth: true },
         props: createProps
       }
@@ -48,46 +48,42 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/developer',
     name: RouteNames.DEVELOPER,
-    component: () => import('../views/DeveloperView.vue'),
-    meta: { requiresAuth: true, breadcrumb: 'Developer' },
-    props: createProps
+    component: () => import('@/views/DeveloperView.vue'),
+    meta: { requiresAuth: true, breadcrumb: 'Developer' }
   },
   {
     path: '/list',
+    component: () => import('@/views/GenericView.vue'),
     children: [
       {
         path: 'buckets',
         name: RouteNames.LIST_BUCKETS,
-        component: () => import('../views/ListBucketsView.vue'),
-        meta: { requiresAuth: true, breadcrumb: 'Buckets' }
+        component: () => import('@/views/list/ListBucketsView.vue'),
+        meta: { requiresAuth: true, breadcrumb: 'Buckets' },
+        props: createProps
       },
       {
         path: 'objects',
         name: RouteNames.LIST_OBJECTS,
-        component: () => import('../views/ListObjectsView.vue'),
-        meta: { requiresAuth: true, breadcrumb: '__listObjectsDynamic' }
-      },
-      {
-        path: 'detail/object',
-        name: RouteNames.DETAIL_OBJECTS,
-        component: () => import('../views/DetailObjectsView.vue'),
-        meta: { requiresAuth: true }
-      },
-    ],
-    props: createProps
+        component: () => import('@/views/list/ListObjectsView.vue'),
+        meta: { requiresAuth: true, breadcrumb: '__listObjectsDynamic' },
+        props: createProps
+      }
+    ]
   },
   {
     path: '/oidc',
+    component: () => import('@/views/GenericView.vue'),
     children: [
       {
         path: 'callback',
         name: RouteNames.CALLBACK,
-        component: () => import('../views/OidcCallbackView.vue'),
+        component: () => import('@/views/oidc/OidcCallbackView.vue'),
       },
       {
         path: 'login',
         name: RouteNames.LOGIN,
-        component: () => import('../views/OidcLoginView.vue'),
+        component: () => import('@/views/oidc/OidcLoginView.vue'),
         beforeEnter: () => {
           const entrypoint = `${window.location.pathname}${window.location.search}${window.location.hash}`;
           window.sessionStorage.setItem(StorageKey.AUTH, entrypoint);
@@ -96,7 +92,7 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: 'logout',
         name: RouteNames.LOGOUT,
-        component: () => import('../views/OidcLogoutView.vue')
+        component: () => import('@/views/oidc/OidcLogoutView.vue')
       },
     ]
   },
@@ -146,4 +142,3 @@ export default function getRouter() {
 
   return router;
 }
-

frontend/src/views/GenericView.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts" />
+
+<template>
+  <router-view />
+</template>

frontend/src/views/ListObjectsView.vue → frontend/src/views/list/ListObjectsView.vue

@@ -1,26 +1,38 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { storeToRefs } from 'pinia';
+import { useToast } from 'primevue/usetoast';
+import { onErrorCaptured, onMounted, ref } from 'vue';
 
 import ObjectList from '@/components/object/ObjectList.vue';
-import { useBucketStore } from '@/store';
 import { RouteNames } from '@/utils/constants';
 
+import { useBucketStore } from '@/store';
+
 import type { Ref } from 'vue';
-import type { Bucket } from '@/types';
+import type { Bucket } from '@/interfaces';
+
+type Props = {
+  bucketId?: string
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  bucketId: undefined
+});
 
-// Store
 const bucketStore = useBucketStore();
-const { getBuckets } = storeToRefs(bucketStore);
-const route = useRoute();
 
-// State
-const bucket: Ref<Bucket | undefined> = ref(undefined);
+const bucket: Ref< Bucket | undefined > = ref(undefined);
+
+async function getBucketName() {
+  bucket.value = props.bucketId ? await bucketStore.getBucketById(props.bucketId) : undefined;
+}
+
+onErrorCaptured((e: Error) => {
+  const toast = useToast();
+  toast.add({ severity: 'error', summary: 'Unable to load bucket information.', detail: e.message, life: 5000 });
+});
 
-// Actions
-watch( getBuckets, () => {
-  bucket.value = bucketStore.getBucketById(route.query.bucketId as string);
+onMounted(async () => {
+  await getBucketName();
 });
 </script>