chore: Several small cleanup amends around K named components

packages/kuma-gui/docs/1-tldr.md

@@ -144,19 +144,15 @@ For more detail see:
 ## GUI Components
 
 Apart from our `Data*` components we also have a set of `X*` components which
-are generic GUI specific components. We also use the
-[Kongponents](https://kongponents.konghq.com/) component library which
-use `K*` a naming scheme.
+are generic GUI specific components.
 
 These 'x' components are generally 'thin wrappers' over either native Vue
 components or Kongponents to make them easier to work with.
 
-We globally import our generic GUI `X*`, our `Data*` components and `K*`
-[Kongponents](https://kongponents.konghq.com/)
+We globally import our generic GUI `X*` and our `Data*` components.
 
 Links:
 
-- K\* Kongponents <https://kongponents.konghq.com/>
 - X\* components [These docs](/src/app/x/README)
 - Data\* Components [These docs](/src/app/application/components/data-source/README)
 - Design Tokens from <https://github.com/Kong/design-tokens>

packages/kuma-gui/src/app/data-planes/views/DataPlaneDetailView.vue

@@ -53,7 +53,9 @@
               </template>
 
               <template #body>
-                <div class="status-with-reason">
+                <XLayout
+                  type="separated"
+                >
                   <StatusBadge :status="props.data.status" />
                   <DataCollection
                     v-if="props.data.dataplaneType === 'standard'"
@@ -62,26 +64,20 @@
                     :empty="false"
                     v-slot="{ items : unhealthyInbounds }"
                   >
-                    <KTooltip
-                      class="reason-tooltip"
+                    <XIcon
+                      name="info"
                     >
-                      <InfoIcon
-                        :color="KUI_COLOR_BACKGROUND_NEUTRAL"
-                        :size="KUI_ICON_SIZE_30"
-                      />
-                      <template #content>
-                        <ul>
-                          <li
-                            v-for="inbound in unhealthyInbounds"
-                            :key="`${inbound.service}:${inbound.port}`"
-                          >
-                            {{ t('data-planes.routes.item.unhealthy_inbound', { service: inbound.service, port: inbound.port }) }}
-                          </li>
-                        </ul>
-                      </template>
-                    </KTooltip>
+                      <ul>
+                        <li
+                          v-for="inbound in unhealthyInbounds"
+                          :key="`${inbound.service}:${inbound.port}`"
+                        >
+                          {{ t('data-planes.routes.item.unhealthy_inbound', { service: inbound.service, port: inbound.port }) }}
+                        </li>
+                      </ul>
+                    </XIcon>
                   </DataCollection>
-                </div>
+                </XLayout>
               </template>
             </DefinitionCard>
 
@@ -176,12 +172,10 @@
             >
               <ConnectionTraffic>
                 <template #title>
-                  <ForwardIcon
-                    display="inline-block"
-                    decorative
-                    :size="KUI_ICON_SIZE_30"
-                  />
-                  Inbounds
+                  <XLayout type="separated">
+                    <XIcon name="inbound" />
+                    <span>Inbounds</span>
+                  </XLayout>
                 </template>
                 <!-- if we are a builtin gateway proxy i.e. a 'gateway' proxy -->
                 <!-- use its first and only inbounds as a template  -->
@@ -306,12 +300,10 @@
                   </XAction>
                 </template>
                 <template #title>
-                  <GatewayIcon
-                    display="inline-block"
-                    decorative
-                    :size="KUI_ICON_SIZE_30"
-                  />
-                  <span>Outbounds</span>
+                  <XLayout type="separated">
+                    <XIcon name="outbound" />
+                    <span>Outbounds</span>
+                  </XLayout>
                 </template>
                 <!-- we don't want to show an error here -->
                 <!-- instead we show a No Data EmptyState -->
@@ -589,8 +581,6 @@
 </template>
 
 <script lang="ts" setup>
-import { KUI_COLOR_BACKGROUND_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
-import { InfoIcon, ForwardIcon, GatewayIcon } from '@kong/icons'
 import { computed } from 'vue'
 
 import type { DataplaneOverview, DataplaneInbound } from '../data'
@@ -640,22 +630,4 @@ const warnings = computed(() => props.data.warnings.concat(...(props.data.isCert
     background: none;
   }
 }
-
-.status-with-reason {
-  display: flex;
-  align-items: center;
-  gap: $kui-space-50;
-}
-
-.reason-tooltip :deep(.kong-icon) {
-  display: flex;
-  align-items: center;
-}
-
-.inbound-list > * + * {
-  border: 1px solid red;
-  margin-block-start: $kui-space-60;
-  border-top: $kui-border-width-10 solid $kui-color-border;
-  padding-block-start: $kui-space-60;
-}
 </style>

packages/kuma-gui/src/app/kuma/views/KumaNotFoundView.vue

@@ -4,7 +4,7 @@
   >
     <AppView>
       <div class="overview">
-        <KEmptyState>
+        <XEmptyState>
           <template #icon>
             <XIcon
               name="warning"
@@ -30,7 +30,7 @@
               Go Home
             </XAction>
           </template>
-        </KEmptyState>
+        </XEmptyState>
       </div>
     </AppView>
   </RouteView>

packages/kuma-gui/src/app/x/README.md

@@ -6,7 +6,9 @@ section: Packages
 Our application level UI components.
 
 These 'x' components are generally 'thin wrappers' over either native Vue
-components or Kongponents to make them easier to work with.
+components or [Kongponents](https://kongponents.konghq.com/) to make them
+easier to work with.
+
 
 For example:
 

packages/kuma-gui/src/app/x/components/x-empty-state/XEmptyState.vue

@@ -19,6 +19,11 @@
         class="x-empty-state"
         data-testid="empty-block"
       >
+        <template
+          #icon
+        >
+          <slot name="icon" />
+        </template>
         <template
           #title
         >

packages/kuma-gui/src/app/x/components/x-icon/XIcon.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    :is="slots.default ? KTooltip : XAnonymous"
+    :is="slots.default ? XTooltip : XAnonymous"
     :placement="props.placement"
   >
     <!-- we hardcode decorative to false for the moment due to an issue with kong/icons -->
@@ -31,6 +31,8 @@
 <script lang="ts" setup>
 import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
 import {
+  ForwardIcon,
+  GatewayIcon,
   WarningIcon,
   PortalIcon,
   MeshIcon,
@@ -48,11 +50,12 @@ import {
   ProgressIcon,
   InfoIcon,
 } from '@kong/icons'
-import { KTooltip, PopPlacements } from '@kong/kongponents'
 import { useSlots, useAttrs } from 'vue'
 
 import { uniqueId } from '@/app/application'
 import XAnonymous from '@/app/x/components/x-anonymous/XAnonymous.vue'
+import XTooltip from '@/app/x/components/x-tooltip/XTooltip.vue'
+import type { PopPlacements } from '@kong/kongponents'
 
 defineOptions({
   inheritAttrs: false,
@@ -62,6 +65,8 @@ const attrs = useAttrs()
 const icons = {
   standard: 'span',
   'policy-role-producer': 'span',
+  inbound: ForwardIcon,
+  outbound: GatewayIcon,
   builtin: PortalIcon,
   delegated: PortalIcon,
   warning: WarningIcon,

packages/kuma-gui/src/app/x/components/x-tooltip/README.md

@@ -0,0 +1 @@
+# XTooltip

packages/kuma-gui/src/app/x/components/x-tooltip/XTooltip.vue

@@ -0,0 +1,22 @@
+<template>
+  <KTooltip
+    max-width="400"
+  >
+    <template
+      v-for="(_, slotName) in slots"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <slot
+        :name="slotName"
+        v-bind="(slotProps)"
+      />
+    </template>
+  </KTooltip>
+</template>
+<script lang="ts" setup>
+import { KTooltip } from '@kong/kongponents'
+
+const slots = defineSlots()
+</script>
+

packages/kuma-gui/src/app/x/index.ts

@@ -1,4 +1,4 @@
-import Kongponents, { KTooltip, KCard, KPop, KRadio } from '@kong/kongponents'
+import Kongponents, { KCard, KPop, KRadio } from '@kong/kongponents'
 
 import XAboutCard from './components/x-about-card/XAboutCard.vue'
 import XAction from './components/x-action/XAction.vue'
@@ -25,6 +25,7 @@ import XSelect from './components/x-select/XSelect.vue'
 import XTabs from './components/x-tabs/XTabs.vue'
 import XTeleportSlot from './components/x-teleport/XTeleportSlot.vue'
 import XTeleportTemplate from './components/x-teleport/XTeleportTemplate.vue'
+import XTooltip from './components/x-tooltip/XTooltip.vue'
 import locales from './locales/en-us/index.yaml'
 import type { ServiceDefinition } from '@/services/utils'
 import { token } from '@/services/utils'
@@ -36,7 +37,6 @@ declare module 'vue' {
     XCard: typeof KCard
     XPop: typeof KPop
     XRadio: typeof KRadio
-    XTooltip: typeof KTooltip
     //
     XAlert: typeof XAlert
     XAnonymous: typeof XAnonymous
@@ -59,6 +59,7 @@ declare module 'vue' {
     XTabs: typeof XTabs
     XTeleportTemplate: typeof XTeleportTemplate
     XTeleportSlot: typeof XTeleportSlot
+    XTooltip: typeof XTooltip
     XDisclosure: typeof XDisclosure
     XAboutCard: typeof XAboutCard
     XInputSwitch: typeof XInputSwitch
@@ -89,7 +90,6 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => {
           ['XCard', KCard],
           ['XPop', KPop],
           ['XRadio', KRadio],
-          ['XTooltip', KTooltip],
           //
           ['XAction', XAction],
           ['XActionGroup', XActionGroup],
@@ -111,6 +111,7 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => {
           ['XTabs', XTabs],
           ['XTeleportTemplate', XTeleportTemplate],
           ['XTeleportSlot', XTeleportSlot],
+          ['XTooltip', XTooltip],
           ['XDisclosure', XDisclosure],
           ['XAboutCard', XAboutCard],
           ['XInputSwitch', XInputSwitch],

packages/kuma-gui/src/app/zones/views/ZoneDetailView.vue

@@ -73,19 +73,13 @@
                   <template
                     v-if="version?.outdated === true"
                   >
-                    <KTooltip
-                      max-width="300"
+                    <XIcon
+                      name="info"
                     >
-                      <InfoIcon
-                        :color="KUI_COLOR_BACKGROUND_NEUTRAL"
-                        :size="KUI_ICON_SIZE_30"
+                      <div
+                        v-html="t('zone-cps.routes.item.version_warning')"
                       />
-                      <template #content>
-                        <div
-                          v-html="t('zone-cps.routes.item.version_warning')"
-                        />
-                      </template>
-                    </KTooltip>
+                    </XIcon>
                   </template>
                 </XLayout>
               </template>
@@ -206,9 +200,6 @@
 </template>
 
 <script lang="ts" setup>
-import { KUI_COLOR_BACKGROUND_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
-import { InfoIcon } from '@kong/icons'
-
 import type { ZoneOverview } from '../data'
 import AppCollection from '@/app/application/components/app-collection/AppCollection.vue'
 import DefinitionCard from '@/app/common/DefinitionCard.vue'
@@ -220,8 +211,3 @@ const props = defineProps<{
   data: ZoneOverview
 }>()
 </script>
-<style lang="scss" scoped>
-.version.outdated :deep(.definition-card-container) {
-  color: #{$kui-color-text-warning};
-}
-</style>