chore: adds additional error message to XAction and use it in service…

…/policy listings (#2411) chore: adds additional error message to XAction and use it Signed-off-by: John Cowen <[email protected]>
kumahq · Apr 12, 2024 · e865b09 · e865b09
1 parent d30ed91
commit e865b09
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/src/app/policies/views/PolicyListView.vue b/src/app/policies/views/PolicyListView.vue
@@ -104,7 +104,7 @@
                       @change="route.update"
                     >
                       <template #name="{ row }">
-                        <RouterLink
+                        <XAction
                           :to="{
                             name: 'policy-summary-view',
                             params: {
@@ -119,7 +119,7 @@
                           }"
                         >
                           {{ row.name }}
-                        </RouterLink>
+                        </XAction>
                       </template>
                       <template #namespace="{ row: item }">
                         {{ item.namespace.length > 0 ? item.namespace : t('common.detail.none') }}
@@ -157,7 +157,7 @@
                       </template>
 
                       <template #details="{ row }">
-                        <RouterLink
+                        <XAction
                           class="details-link"
                           data-testid="details-link"
                           :to="{
@@ -175,7 +175,7 @@
                             decorative
                             :size="KUI_ICON_SIZE_30"
                           />
-                        </RouterLink>
+                        </XAction>
                       </template>
                     </AppCollection>
                     <RouterView

diff --git a/src/app/services/views/ServiceListView.vue b/src/app/services/views/ServiceListView.vue
@@ -47,7 +47,7 @@
             >
               <template #name="{ row: item }">
                 <TextWithCopyButton :text="item.name">
-                  <RouterLink
+                  <XAction
                     :to="{
                       name: 'service-detail-view',
                       params: {
@@ -61,7 +61,7 @@
                     }"
                   >
                     {{ item.name }}
-                  </RouterLink>
+                  </XAction>
                 </TextWithCopyButton>
               </template>
 
@@ -94,7 +94,7 @@
               </template>
 
               <template #details="{ row }">
-                <RouterLink
+                <XAction
                   class="details-link"
                   data-testid="details-link"
                   :to="{
@@ -111,7 +111,7 @@
                     decorative
                     :size="KUI_ICON_SIZE_30"
                   />
-                </RouterLink>
+                </XAction>
               </template>
             </AppCollection>
           </KCard>

diff --git a/src/app/x/components/x-action/XAction.vue b/src/app/x/components/x-action/XAction.vue
@@ -39,14 +39,15 @@
 </template>
 <script lang="ts" setup>
 import { computed, watch } from 'vue'
-import { RouterLink } from 'vue-router'
+import { RouterLink, useRouter } from 'vue-router'
 
 import type { RouteLocationNamedRaw } from 'vue-router'
 type BooleanLocationQueryValue = string | number | undefined | boolean
 type BooleanLocationQueryRaw = Record<string | number, BooleanLocationQueryValue | BooleanLocationQueryValue[]>
 type RouteLocationRawWithBooleanQuery = Omit<RouteLocationNamedRaw, 'query'> & {
   query?: BooleanLocationQueryRaw
 }
+const router = useRouter()
 
 const props = withDefaults(defineProps<{
   href?: string
@@ -74,6 +75,7 @@ const query = computed(() => {
     return prev
   }, {})
 })
+
 watch(() => props.mount, (val) => {
   if (typeof val === 'function') {
     val({
@@ -82,4 +84,18 @@ watch(() => props.mount, (val) => {
     })
   }
 }, { immediate: true })
+
+watch(() => props.to, (val) => {
+  try {
+    router.resolve({
+      ...val,
+      query: query.value,
+    })
+  } catch (e) {
+    if (e instanceof Error) {
+      e.message = `${e.toString()}: ${JSON.stringify(val)}`
+    }
+    console.error(e)
+  }
+}, { immediate: true })
 </script>