feat: add entity tooltip component

packages/entities/entities-shared/package.json

@@ -65,11 +65,12 @@
     "extends": "../../../package.json"
   },
   "distSizeChecker": {
-    "errorLimit": "564KB"
+    "errorLimit": "600KB"
   },
   "dependencies": {
     "@kong-ui-public/core": "workspace:^",
     "@kong/icons": "^1.13.0",
-    "compare-versions": "^6.1.0"
+    "compare-versions": "^6.1.0",
+    "swrv": "^1.0.4"
   }
 }

packages/entities/entities-shared/sandbox/pages/EntityTooltipPage.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="sandbox-container">
+    <main>
+      <h3>Entity Tooltip</h3>
+      <EntityTooltip
+        :entity-config="tooltipConfig"
+        :external-link="'https://www.google.com'"
+      />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ConfigurationSchemaType, EntityTooltip } from '../../src'
+import type { EntityTooltipConfig } from '../../src/types'
+import { computed } from 'vue'
+
+
+const tooltipData = () => (Promise.resolve({
+  label: 'Test',
+  items: [
+    {
+      key: 'item-1',
+      label: 'Name',
+      value: 'My name',
+    },
+    {
+      key: 'item-2',
+      label: 'Badges',
+      value: ['badge1', 'badge2'],
+      type: ConfigurationSchemaType.BadgeTag,
+    },
+    {
+      key: 'item-3',
+      label: 'Some ID',
+      value: 'my-unique-id',
+      type: ConfigurationSchemaType.ID,
+    },
+    {
+      key: 'item-4',
+      label: 'ID Array',
+      value: ['item1', 'item2'],
+      type: ConfigurationSchemaType.IdArray,
+    },
+    {
+      key: 'item-5',
+      label: 'Redacted ID',
+      value: 'my-unique-id',
+      type: ConfigurationSchemaType.Redacted,
+    },
+    {
+      key: 'item-6',
+      label: 'Redacted Array',
+      value: ['item1', 'item2'],
+      type: ConfigurationSchemaType.RedactedArray,
+    },
+    {
+      key: 'item-7',
+      label: 'Date',
+      value: 1686245746,
+      type: ConfigurationSchemaType.Date,
+    },
+  ],
+}))
+
+const tooltipConfig = computed < EntityTooltipConfig>(() => ({
+  id: 'entity-id',
+  title: 'Title',
+  deleted: false,
+  data: tooltipData,
+}))
+
+</script>

packages/entities/entities-shared/sandbox/routes.ts

@@ -71,4 +71,10 @@ export const routes: Array<RouteRecordRaw & { label?: string }> = [
     label: 'SandboxPermissionsControl',
     component: () => import('./pages/SandboxPermissionsControlPage.vue'),
   },
+  {
+    path: '/entity-tooltip',
+    name: 'entity-tooltip',
+    label: 'EntityToolip',
+    component: () => import('./pages/EntityTooltipPage.vue'),
+  },
 ]

packages/entities/entities-shared/src/components/entity-tooltip/EntityTooltip.vue

@@ -0,0 +1,134 @@
+<template>
+  <KPop
+    hide-close-icon
+    placement="bottom"
+    trigger="hover"
+    width="300"
+  >
+    <div class="label-wrapper">
+      <ConnectionsIcon :size="KUI_ICON_SIZE_30" />
+      <span class="label">{{ tooltipData?.label }}</span>
+    </div>
+    <template
+      v-if="tooltipData?.items"
+      #content
+    >
+      <div class="tooltip-content">
+        <ConfigCardItem
+          v-for="item in tooltipData.items"
+          :key="item.key"
+          :item="item"
+          slim
+          truncated
+        />
+      </div>
+    </template>
+    <template #footer>
+      <div class="footer-container">
+        <KExternalLink
+          :href="externalLink"
+          new-window
+        >
+          View
+        </KExternalLink>
+        <KExternalLink
+          v-if="exploreLink"
+          :href="exploreLink"
+          new-window
+        >
+          Explore
+        </KExternalLink>
+      </div>
+    </template>
+  </KPop>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import ConfigCardItem from '../entity-base-config-card/ConfigCardItem.vue'
+import useSWRV from 'swrv'
+import { ConnectionsIcon } from '@kong/icons'
+import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
+import type { EntityTooltipConfig, TooltipData } from '../../types'
+
+const props = defineProps({
+  entityConfig: {
+    type: Object as PropType<EntityTooltipConfig>,
+    required: true,
+  },
+  externalLink: {
+    type: String,
+    required: true,
+  },
+  exploreLink: {
+    type: String,
+    required: false,
+    default: null,
+  },
+})
+
+const { data: tooltipData } = useSWRV<TooltipData>(
+  () => `entity-tooltip-${props.entityConfig.id}`,
+  async () => {
+
+    const items = await props.entityConfig.data()
+
+    return items
+  },
+  {
+    refreshInterval: 0,
+    revalidateOnFocus: false,
+  },
+)
+</script>
+
+<style lang="scss" scoped>
+:deep(.config-card-details-row) {
+  padding: $kui-space-30 $kui-space-0 $kui-space-30 0 !important;
+}
+
+:deep(.config-card-details-value) {
+  display: flex !important;
+  justify-content: end !important;
+  overflow: hidden;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  width: 60% !important;
+
+  .copy-text {
+    max-width: 15ch !important;
+    overflow: hidden;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+}
+
+:deep(.config-card-details-label) {
+  width: 40% !important;
+}
+
+.label-wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: $kui-space-20;
+
+  .label {
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-style: dashed;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
+  }
+}
+
+.tooltip-content {
+  margin: $kui-space-40;
+}
+
+.footer-container {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 $kui-space-40 0 $kui-space-40;
+  width: 100%;
+}
+</style>

packages/entities/entities-shared/src/index.ts

@@ -12,13 +12,14 @@ import EntityFormSection from './components/entity-form-section/EntityFormSectio
 import EntityLink from './components/entity-link/EntityLink.vue'
 import JsonCodeBlock from './components/common/JsonCodeBlock.vue'
 import YamlCodeBlock from './components/common/YamlCodeBlock.vue'
+import EntityTooltip from './components/entity-tooltip/EntityTooltip.vue'
 import composables from './composables'
 
 // Extract specific composables to export
 const { useAxios, useDeleteUrlBuilder, useErrors, useExternalLinkCreator, useFetchUrlBuilder, useFetcher, useDebouncedFilter, useStringHelpers, useHelpers, useGatewayFeatureSupported, useTruncationDetector, useValidators } = composables
 
 // Components
-export { EntityBaseConfigCard, ConfigCardItem, ConfigCardDisplay, InternalLinkItem, EntityBaseForm, EntityBaseTable, EntityDeleteModal, EntityFilter, EntityToggleModal, PermissionsWrapper, EntityFormSection, EntityLink, JsonCodeBlock, YamlCodeBlock }
+export { EntityBaseConfigCard, ConfigCardItem, ConfigCardDisplay, InternalLinkItem, EntityBaseForm, EntityBaseTable, EntityDeleteModal, EntityFilter, EntityToggleModal, PermissionsWrapper, EntityFormSection, EntityLink, JsonCodeBlock, YamlCodeBlock, EntityTooltip }
 
 // Composables
 export { useAxios, useDeleteUrlBuilder, useErrors, useExternalLinkCreator, useFetchUrlBuilder, useFetcher, useDebouncedFilter, useStringHelpers, useHelpers, useGatewayFeatureSupported, useTruncationDetector, useValidators }

packages/entities/entities-shared/src/types/entity-tooltip-types.ts

@@ -0,0 +1,27 @@
+import type { RecordItem } from './entity-base-config-card'
+
+
+export const entityTypes = [
+  'api_product',
+  'api_product_version',
+  'control_plane',
+  'control_plane_group',
+  'data_plane_node',
+  'gateway_service',
+  'route',
+  'application',
+  'consumer',
+] as const
+
+export type EntityType = typeof entityTypes[number]
+
+export interface TooltipData {
+  items: RecordItem[] | null,
+  label: string,
+}
+
+export interface EntityTooltipConfig {
+  deleted: boolean
+  id: string,
+  data: () => Promise<TooltipData>
+}

packages/entities/entities-shared/src/types/index.ts

@@ -11,3 +11,4 @@ export * from './entity-base-config-card'
 export * from './entity-filter'
 export * from './entity-link'
 export * from './utils'
+export * from './entity-tooltip-types'