chore: adds XAction component

src/app/data-planes/views/DataPlaneDetailView.vue

@@ -203,20 +203,20 @@
                                 }
                               "
                             >
-                              <RouterLink
+                              <XAction
                                 data-action
                                 :to="{
                                   name: ((name) => name.includes('bound') ? name.replace('-outbound-', '-inbound-') : 'connection-inbound-summary-overview-view')(String(_route.name)),
                                   params: {
                                     connection: item.name,
                                   },
                                   query: {
-                                    inactive: route.params.inactive ? null : undefined,
+                                    inactive: route.params.inactive,
                                   },
                                 }"
                               >
                                 {{ item.name.replace('localhost', '').replace('_', ':') }}
-                              </RouterLink>
+                              </XAction>
                             </ConnectionCard>
                           </template>
                         </template>

src/app/x/components/x-action/README.md

@@ -0,0 +1 @@
+# x-action

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>

src/app/x/components/x-teleport/README.md

@@ -0,0 +1 @@
+# x-teleport

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],
           ]