From 89ae5d7d10363b6de6f17e961b7d7e5a03d9cd26 Mon Sep 17 00:00:00 2001
From: Kyle Morel <kmorel@parcsystems.ca>
Date: Thu, 2 Mar 2023 16:42:45 -0800
Subject: [PATCH] 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 <jujaga@gmail.com>
---
 frontend/src/router/index.ts                  | 41 ++++++++-----------
 frontend/src/views/GenericView.vue            |  5 +++
 .../views/{ => detail}/DetailObjectsView.vue  |  0
 .../src/views/{ => list}/ListBucketsView.vue  |  0
 .../src/views/{ => list}/ListObjectsView.vue  | 38 +++++++++++------
 .../src/views/{ => oidc}/OidcCallbackView.vue |  0
 .../src/views/{ => oidc}/OidcLoginView.vue    |  0
 .../src/views/{ => oidc}/OidcLogoutView.vue   |  0
 8 files changed, 48 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/views/GenericView.vue
 rename frontend/src/views/{ => detail}/DetailObjectsView.vue (100%)
 rename frontend/src/views/{ => list}/ListBucketsView.vue (100%)
 rename frontend/src/views/{ => list}/ListObjectsView.vue (51%)
 rename frontend/src/views/{ => oidc}/OidcCallbackView.vue (100%)
 rename frontend/src/views/{ => oidc}/OidcLoginView.vue (100%)
 rename frontend/src/views/{ => oidc}/OidcLogoutView.vue (100%)

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 9cc365cb..56b50a94 100644
--- a/frontend/src/router/index.ts
+++ b/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;
 }
-
diff --git a/frontend/src/views/GenericView.vue b/frontend/src/views/GenericView.vue
new file mode 100644
index 00000000..a302d570
--- /dev/null
+++ b/frontend/src/views/GenericView.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts" />
+
+<template>
+  <router-view />
+</template>
diff --git a/frontend/src/views/DetailObjectsView.vue b/frontend/src/views/detail/DetailObjectsView.vue
similarity index 100%
rename from frontend/src/views/DetailObjectsView.vue
rename to frontend/src/views/detail/DetailObjectsView.vue
diff --git a/frontend/src/views/ListBucketsView.vue b/frontend/src/views/list/ListBucketsView.vue
similarity index 100%
rename from frontend/src/views/ListBucketsView.vue
rename to frontend/src/views/list/ListBucketsView.vue
diff --git a/frontend/src/views/ListObjectsView.vue b/frontend/src/views/list/ListObjectsView.vue
similarity index 51%
rename from frontend/src/views/ListObjectsView.vue
rename to frontend/src/views/list/ListObjectsView.vue
index ca27cf20..84b01759 100644
--- a/frontend/src/views/ListObjectsView.vue
+++ b/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>
 
diff --git a/frontend/src/views/OidcCallbackView.vue b/frontend/src/views/oidc/OidcCallbackView.vue
similarity index 100%
rename from frontend/src/views/OidcCallbackView.vue
rename to frontend/src/views/oidc/OidcCallbackView.vue
diff --git a/frontend/src/views/OidcLoginView.vue b/frontend/src/views/oidc/OidcLoginView.vue
similarity index 100%
rename from frontend/src/views/OidcLoginView.vue
rename to frontend/src/views/oidc/OidcLoginView.vue
diff --git a/frontend/src/views/OidcLogoutView.vue b/frontend/src/views/oidc/OidcLogoutView.vue
similarity index 100%
rename from frontend/src/views/OidcLogoutView.vue
rename to frontend/src/views/oidc/OidcLogoutView.vue