From e865b09b5ff268836074028099223cc2325ea9f7 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Fri, 12 Apr 2024 13:02:27 +0100
Subject: [PATCH] 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 <john.cowen@konghq.com>
---
 src/app/policies/views/PolicyListView.vue  |  8 ++++----
 src/app/services/views/ServiceListView.vue |  8 ++++----
 src/app/x/components/x-action/XAction.vue  | 18 +++++++++++++++++-
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/app/policies/views/PolicyListView.vue b/src/app/policies/views/PolicyListView.vue
index 8822a0f43..8d4b4ad1a 100644
--- 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
index 5a173fa21..e33a8e8fe 100644
--- 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
index bf6450083..d8c4ebfb1 100644
--- a/src/app/x/components/x-action/XAction.vue
+++ b/src/app/x/components/x-action/XAction.vue
@@ -39,7 +39,7 @@
 </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
@@ -47,6 +47,7 @@ type BooleanLocationQueryRaw = Record<string | number, 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>