chore: Several small cleanup amends around K named components

Signed-off-by: John Cowen <[email protected]>
kumahq · Jan 22, 2025 · 000f12b · 000f12b
1 parent f80108f
commit 000f12b
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 79 deletions.
diff --git a/packages/kuma-gui/docs/1-tldr.md b/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>

diff --git a/packages/kuma-gui/src/app/data-planes/views/DataPlaneDetailView.vue b/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>
diff --git a/packages/kuma-gui/src/app/kuma/views/KumaNotFoundView.vue b/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>

diff --git a/packages/kuma-gui/src/app/x/README.md b/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:
 

diff --git a/packages/kuma-gui/src/app/x/components/x-empty-state/XEmptyState.vue b/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
         >

diff --git a/packages/kuma-gui/src/app/x/components/x-icon/XIcon.vue b/packages/kuma-gui/src/app/x/components/x-icon/XIcon.vue
@@ -2,6 +2,7 @@
   <component
     :is="slots.default ? KTooltip : XAnonymous"
     :placement="props.placement"
+    max-width="400"
   >
     <!-- we hardcode decorative to false for the moment due to an issue with kong/icons -->
     <component
@@ -31,6 +32,8 @@
 <script lang="ts" setup>
 import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
 import {
+  ForwardIcon,
+  GatewayIcon,
   WarningIcon,
   PortalIcon,
   MeshIcon,
@@ -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,

diff --git a/packages/kuma-gui/src/app/zones/views/ZoneDetailView.vue b/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>