From e4eeb147bf809e95080dc5779dafd2da779150d3 Mon Sep 17 00:00:00 2001 From: Filip Gutica Date: Thu, 6 Jun 2024 23:22:52 -0700 Subject: [PATCH 1/6] feat: add entity tooltip component --- .../entities/entities-shared/package.json | 5 +- .../entity-tooltip/EntityTooltip.vue | 133 ++++++++++++++++++ .../entities/entities-shared/src/index.ts | 3 +- .../src/types/entity-tooltip-types.ts | 29 ++++ .../entities-shared/src/types/index.ts | 1 + pnpm-lock.yaml | 36 +++-- 6 files changed, 189 insertions(+), 18 deletions(-) create mode 100644 packages/entities/entities-shared/src/components/entity-tooltip/EntityTooltip.vue create mode 100644 packages/entities/entities-shared/src/types/entity-tooltip-types.ts diff --git a/packages/entities/entities-shared/package.json b/packages/entities/entities-shared/package.json index 75f8a63076..a7e073edae 100644 --- a/packages/entities/entities-shared/package.json +++ b/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.9.1", - "compare-versions": "^6.1.0" + "compare-versions": "^6.1.0", + "swrv": "^1.0.4" } } diff --git a/packages/entities/entities-shared/src/components/entity-tooltip/EntityTooltip.vue b/packages/entities/entities-shared/src/components/entity-tooltip/EntityTooltip.vue new file mode 100644 index 0000000000..730bda6810 --- /dev/null +++ b/packages/entities/entities-shared/src/components/entity-tooltip/EntityTooltip.vue @@ -0,0 +1,133 @@ + + + + + diff --git a/packages/entities/entities-shared/src/index.ts b/packages/entities/entities-shared/src/index.ts index d9f50e8e6c..09cbe39f6c 100644 --- a/packages/entities/entities-shared/src/index.ts +++ b/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 } diff --git a/packages/entities/entities-shared/src/types/entity-tooltip-types.ts b/packages/entities/entities-shared/src/types/entity-tooltip-types.ts new file mode 100644 index 0000000000..2f95afffe1 --- /dev/null +++ b/packages/entities/entities-shared/src/types/entity-tooltip-types.ts @@ -0,0 +1,29 @@ +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 { + title: string + deleted: boolean + id: string, + type: EntityType, + data: () => Promise +} diff --git a/packages/entities/entities-shared/src/types/index.ts b/packages/entities/entities-shared/src/types/index.ts index b072faa8a0..beffb18490 100644 --- a/packages/entities/entities-shared/src/types/index.ts +++ b/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' \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f7e607b455..b28f483623 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,5 @@ lockfileVersion: '6.0' -settings: - autoInstallPeers: false - excludeLinksFromLockfile: false - importers: .: @@ -31,7 +27,7 @@ importers: version: 1.0.3(eslint@9.4.0)(typescript@5.3.3) '@kong/kongponents': specifier: 9.0.0-alpha.162 - version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.4.27) + version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.3.13) '@types/flat': specifier: ^5.0.5 version: 5.0.5 @@ -230,7 +226,7 @@ importers: version: 1.12.12 '@kong/kongponents': specifier: 9.0.0-alpha.162 - version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.4.27) + version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.3.13) '@types/uuid': specifier: ^9.0.8 version: 9.0.8 @@ -350,7 +346,7 @@ importers: version: 1.12.12 '@kong/kongponents': specifier: 9.0.0-alpha.162 - version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.4.27) + version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.3.13) json-schema-to-ts: specifier: ^3.0.1 version: 3.0.1 @@ -378,7 +374,7 @@ importers: version: 1.12.12 '@kong/kongponents': specifier: 9.0.0-alpha.162 - version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.4.27) + version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.3.13) vue: specifier: ^3.4.26 version: 3.4.27(typescript@5.3.3) @@ -418,7 +414,7 @@ importers: version: 1.12.12 '@kong/kongponents': specifier: 9.0.0-alpha.162 - version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.4.27) + version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.3.13) '@types/lodash.clonedeep': specifier: ^4.5.9 version: 4.5.9 @@ -520,7 +516,7 @@ importers: version: 1.12.12 '@kong/kongponents': specifier: 9.0.0-alpha.162 - version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.4.27) + version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.3.13) monaco-editor: specifier: 0.21.3 version: 0.21.3 @@ -557,7 +553,7 @@ importers: version: 1.12.12 '@kong/kongponents': specifier: 9.0.0-alpha.162 - version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.4.27) + version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.3.13) '@types/lodash-es': specifier: ^4.17.12 version: 4.17.12 @@ -584,7 +580,7 @@ importers: version: link:../i18n '@kong/kongponents': specifier: 9.0.0-alpha.162 - version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.4.27) + version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.3.13) vue: specifier: ^3.4.26 version: 3.4.27(typescript@5.3.3) @@ -600,7 +596,7 @@ importers: version: 1.12.12 '@kong/kongponents': specifier: 9.0.0-alpha.162 - version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.4.27) + version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.3.13) vue: specifier: ^3.4.26 version: 3.4.27(typescript@5.3.3) @@ -933,6 +929,9 @@ importers: compare-versions: specifier: ^6.1.0 version: 6.1.0 + swrv: + specifier: ^1.0.4 + version: 1.0.4(vue@3.4.27) devDependencies: '@kong-ui-public/i18n': specifier: workspace:^ @@ -1051,7 +1050,7 @@ importers: version: 1.12.12 '@kong/kongponents': specifier: 9.0.0-alpha.162 - version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.4.27) + version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.3.13) '@types/prismjs': specifier: ^1.26.3 version: 1.26.3 @@ -1085,7 +1084,7 @@ importers: version: 1.12.12 '@kong/kongponents': specifier: 9.0.0-alpha.162 - version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.4.27) + version: 9.0.0-alpha.162(axios@1.6.8)(vue-router@4.3.2)(vue@3.3.13) '@modyfi/vite-plugin-yaml': specifier: ^1.1.0 version: 1.1.0(vite@5.2.11) @@ -5334,6 +5333,9 @@ packages: /ajv-formats@2.1.1: resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==} + peerDependenciesMeta: + ajv: + optional: true dependencies: ajv: 8.12.0 dev: true @@ -16094,3 +16096,7 @@ packages: /zenscroll@4.0.2: resolution: {integrity: sha512-jEA1znR7b4C/NnaycInCU6h/d15ZzCd1jmsruqOKnZP6WXQSMH3W2GL+OXbkruslU4h+Tzuos0HdswzRUk/Vgg==} dev: false + +settings: + autoInstallPeers: false + excludeLinksFromLockfile: false From cb87125af80e7cf579560faf15bfc2219416aa08 Mon Sep 17 00:00:00 2001 From: Filip Gutica Date: Wed, 12 Jun 2024 14:27:09 -0700 Subject: [PATCH 2/6] fix: swrv dependency removed in merge --- packages/entities/entities-shared/package.json | 3 ++- pnpm-lock.yaml | 3 +++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/entities/entities-shared/package.json b/packages/entities/entities-shared/package.json index def87ad5b5..09165193cf 100644 --- a/packages/entities/entities-shared/package.json +++ b/packages/entities/entities-shared/package.json @@ -70,6 +70,7 @@ "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" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4e92b7ae25..6e7d19b32c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -929,6 +929,9 @@ importers: compare-versions: specifier: ^6.1.0 version: 6.1.0 + swrv: + specifier: ^1.0.4 + version: 1.0.4(vue@3.4.27) devDependencies: '@kong-ui-public/i18n': specifier: workspace:^ From 11ded9c306847a9982dee85475cd521317f53682 Mon Sep 17 00:00:00 2001 From: Filip Gutica Date: Mon, 17 Jun 2024 08:59:23 -0700 Subject: [PATCH 3/6] fix: tweaks --- .../entities-shared/sandbox/routes.ts | 6 ++++++ .../entity-tooltip/EntityTooltip.vue | 20 ++++++++++++------- .../src/types/entity-tooltip-types.ts | 1 - 3 files changed, 19 insertions(+), 8 deletions(-) diff --git a/packages/entities/entities-shared/sandbox/routes.ts b/packages/entities/entities-shared/sandbox/routes.ts index 0accb82ca3..fa27d90e2c 100644 --- a/packages/entities/entities-shared/sandbox/routes.ts +++ b/packages/entities/entities-shared/sandbox/routes.ts @@ -71,4 +71,10 @@ export const routes: Array = [ label: 'SandboxPermissionsControl', component: () => import('./pages/SandboxPermissionsControlPage.vue'), }, + { + path: '/entity-tooltip', + name: 'entity-tooltip', + label: 'EntityToolip', + component: () => import('./pages/EntityTooltipPage.vue'), + }, ] diff --git a/packages/entities/entities-shared/src/components/entity-tooltip/EntityTooltip.vue b/packages/entities/entities-shared/src/components/entity-tooltip/EntityTooltip.vue index 730bda6810..447c3746d6 100644 --- a/packages/entities/entities-shared/src/components/entity-tooltip/EntityTooltip.vue +++ b/packages/entities/entities-shared/src/components/entity-tooltip/EntityTooltip.vue @@ -12,13 +12,15 @@ v-if="tooltipData?.items" #content > - +
+ +