From 36a46ca65294275328c06950caf40a618c32e4ba Mon Sep 17 00:00:00 2001
From: John Cowen <john.cowen@konghq.com>
Date: Wed, 6 Mar 2024 14:17:25 +0000
Subject: [PATCH] chore: adds XAction component

Signed-off-by: John Cowen <john.cowen@konghq.com>
---
 .../data-planes/views/DataPlaneDetailView.vue |  6 +-
 src/app/x/components/x-action/README.md       |  1 +
 src/app/x/components/x-action/XAction.vue     | 75 +++++++++++++++++++
 src/app/x/components/x-teleport/README.md     |  1 +
 src/app/x/index.ts                            | 10 +++
 5 files changed, 90 insertions(+), 3 deletions(-)
 create mode 100644 src/app/x/components/x-action/README.md
 create mode 100644 src/app/x/components/x-action/XAction.vue
 create mode 100644 src/app/x/components/x-teleport/README.md

diff --git a/src/app/data-planes/views/DataPlaneDetailView.vue b/src/app/data-planes/views/DataPlaneDetailView.vue
index 02f26067b..94e6fbdf5 100644
--- a/src/app/data-planes/views/DataPlaneDetailView.vue
+++ b/src/app/data-planes/views/DataPlaneDetailView.vue
@@ -203,7 +203,7 @@
                                 }
                               "
                             >
-                              <RouterLink
+                              <XAction
                                 data-action
                                 :to="{
                                   name: ((name) => name.includes('bound') ? name.replace('-outbound-', '-inbound-') : 'connection-inbound-summary-overview-view')(String(_route.name)),
@@ -211,12 +211,12 @@
                                     connection: item.name,
                                   },
                                   query: {
-                                    inactive: route.params.inactive ? null : undefined,
+                                    inactive: route.params.inactive,
                                   },
                                 }"
                               >
                                 {{ item.name.replace('localhost', '').replace('_', ':') }}
-                              </RouterLink>
+                              </XAction>
                             </ConnectionCard>
                           </template>
                         </template>
diff --git a/src/app/x/components/x-action/README.md b/src/app/x/components/x-action/README.md
new file mode 100644
index 000000000..b7370dc18
--- /dev/null
+++ b/src/app/x/components/x-action/README.md
@@ -0,0 +1 @@
+# x-action
diff --git a/src/app/x/components/x-action/XAction.vue b/src/app/x/components/x-action/XAction.vue
new file mode 100644
index 000000000..dc6c38009
--- /dev/null
+++ b/src/app/x/components/x-action/XAction.vue
@@ -0,0 +1,75 @@
+<template>
+  <template
+    v-if="Object.keys(props.to).length > 0"
+  >
+    <RouterLink
+      :to="{
+        ...props.to,
+        query,
+      }"
+    >
+      <slot name="default" />
+    </RouterLink>
+  </template>
+  <template
+    v-else-if="props.href.length > 0"
+  >
+    <a
+      :href="props.href"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <slot name="default" />
+    </a>
+  </template>
+  <template
+    v-else-if="props.for.length > 0"
+  >
+    <label :for="props.for">
+      <slot name="default" />
+    </label>
+  </template>
+  <template
+    v-else
+  >
+    <button type="button">
+      <slot name="default" />
+    </button>
+  </template>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { RouterLink } 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 props = withDefaults(defineProps<{
+  href?: string
+  to?: RouteLocationRawWithBooleanQuery
+  for?: string
+}>(), {
+  href: '',
+  to: () => ({}),
+  for: '',
+})
+const query = computed(() => {
+  return Object.entries(props.to.query ?? {}).reduce<Record<string, string | number | null | undefined>>((prev, [key, value]) => {
+    switch (true) {
+      case value === true:
+        prev[key] = null
+        break
+      case value === false:
+        prev[key] = undefined
+        break
+      default:
+        prev[key] = value as string | number | undefined
+    }
+    return prev
+  }, {})
+})
+</script>
diff --git a/src/app/x/components/x-teleport/README.md b/src/app/x/components/x-teleport/README.md
new file mode 100644
index 000000000..ceae0a70e
--- /dev/null
+++ b/src/app/x/components/x-teleport/README.md
@@ -0,0 +1 @@
+# x-teleport
diff --git a/src/app/x/index.ts b/src/app/x/index.ts
index 73b6582f5..f4286271b 100644
--- a/src/app/x/index.ts
+++ b/src/app/x/index.ts
@@ -1,3 +1,4 @@
+import XAction from './components/x-action/XAction.vue'
 import XTeleportSlot from './components/x-teleport/XTeleportSlot.vue'
 import XTeleportTemplate from './components/x-teleport/XTeleportTemplate.vue'
 import type { ServiceDefinition } from '@/services/utils'
@@ -5,12 +6,21 @@ import { token } from '@/services/utils'
 
 type Token = ReturnType<typeof token>
 
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    XAction: typeof XAction
+    XTeleportTemplate: typeof XTeleportTemplate
+    XTeleportSlot: typeof XTeleportSlot
+  }
+}
+
 export const services = (app: Record<string, Token>): ServiceDefinition[] => {
   return [
     [token('x.vue.components'),
       {
         service: () => {
           return [
+            ['XAction', XAction],
             ['XTeleportTemplate', XTeleportTemplate],
             ['XTeleportSlot', XTeleportSlot],
           ]