chore: adds XAction component

Signed-off-by: John Cowen <john.cowen@konghq.com>
kumahq · Mar 6, 2024 · a215963 · a215963
1 parent 6a0a5fb
commit a215963
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 6 deletions.
diff --git a/src/app/data-planes/views/DataPlaneDetailView.vue b/src/app/data-planes/views/DataPlaneDetailView.vue
@@ -179,19 +179,19 @@
                               v-for="name in [`${item.name.replace(`_${item.port}`, '').replace('localhost', '')}:${item.port}`]"
                               :key="name"
                             >
-                              <RouterLink
+                              <XAction
                                 :to="{
                                   name: ((name) => name.includes('bound') ? name.replace('-outbound-', '-inbound-') : 'connection-inbound-summary-overview-view')(String(_route.name)),
                                   params: {
                                     service: name,
                                   },
                                   query: {
-                                    inactive: route.params.inactive ? null : undefined,
+                                    inactive: route.params.inactive,
                                   },
                                 }"
                               >
                                 {{ name }}
-                              </RouterLink>
+                              </XAction>
                             </template>
                             <TagList
                               :tags="[{label: 'kuma.io/service', value: item.tags['kuma.io/service']}]"
@@ -276,19 +276,19 @@
                               :traffic="item"
                               :direction="direction"
                             >
-                              <RouterLink
+                              <XAction
                                 :to="{
                                   name: ((name) => name.includes('bound') ? name.replace('-inbound-', '-outbound-') : 'connection-outbound-summary-overview-view')(String(_route.name)),
                                   params: {
                                     service: item.name,
                                   },
                                   query: {
-                                    inactive: route.params.inactive ? null : undefined,
+                                    inactive: route.params.inactive,
                                   },
                                 }"
                               >
                                 {{ item.name }}
-                              </RouterLink>
+                              </XAction>
                             </ConnectionCard>
                           </template>
                         </ConnectionGroup>

diff --git a/src/app/x/components/x-action/README.md 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
@@ -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
@@ -0,0 +1 @@
+# x-teleport
diff --git a/src/app/x/index.ts b/src/app/x/index.ts
@@ -1,16 +1,26 @@
+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'
 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],
           ]