From 05c0fef6fc234c8f7f49ec5bb231d11fe662a4d7 Mon Sep 17 00:00:00 2001 From: Manjiri Tapaswi Date: Wed, 11 Dec 2024 15:44:06 -0800 Subject: [PATCH 1/9] feat(entities-shared): create shared empty state component [KHCP-14355] --- packages/entities/entities-shared/README.md | 1 + .../docs/entity-empty-state.md | 77 +++++++ .../sandbox/pages/EntityEmptyStatePage.vue | 43 ++++ .../entities-shared/sandbox/routes.ts | 7 + .../entity-empty-state/EntityEmptyState.vue | 204 ++++++++++++++++++ .../entities/entities-shared/src/index.ts | 3 +- .../entities-shared/src/locales/en.json | 4 + .../src/types/entity-empty-state.ts | 5 + .../entities-shared/src/types/index.ts | 1 + 9 files changed, 344 insertions(+), 1 deletion(-) create mode 100644 packages/entities/entities-shared/docs/entity-empty-state.md create mode 100644 packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue create mode 100644 packages/entities/entities-shared/src/components/entity-empty-state/EntityEmptyState.vue create mode 100644 packages/entities/entities-shared/src/types/entity-empty-state.ts diff --git a/packages/entities/entities-shared/README.md b/packages/entities/entities-shared/README.md index 4db2de5425..5128022e62 100644 --- a/packages/entities/entities-shared/README.md +++ b/packages/entities/entities-shared/README.md @@ -77,6 +77,7 @@ import '@kong-ui-public/entities-shared/dist/style.css' - [``](docs/permissions-wrapper.md) - [``](docs/entity-form-section.md) - [``](docs/entity-link.md) +- [``](docs/entity-empty-state.md) - [``](docs/entity-toggle-modal.md) - [``](docs/entity-base-config-card.md) diff --git a/packages/entities/entities-shared/docs/entity-empty-state.md b/packages/entities/entities-shared/docs/entity-empty-state.md new file mode 100644 index 0000000000..bd6a10599b --- /dev/null +++ b/packages/entities/entities-shared/docs/entity-empty-state.md @@ -0,0 +1,77 @@ +# EntityEmptyState.vue + +An empty state component that displays title, description, and optionally pricing, action button, learn more, and a set of features cards. Used for engaging and onboarding new users with rich information and context. + +- [Requirements](#requirements) +- [Usage](#usage) + - [Install](#install) + - [Props](#props) + - [Usage example](#usage-example) +- [TypeScript interfaces](#typescript-interfaces) + +## Requirements + +- `vue` must be initialized in the host application +- `@kong/kongponents` must be added as a `dependency` in the host application, globally available via the Vue Plugin installation, and the package's style imports must be added in the app entry file. [See here for instructions on installing Kongponents](https://kongponents.konghq.com/#globally-install-all-kongponents). + +## Usage + +### Install + +[See instructions for installing the `@kong-ui-public/entities-shared` package.](../README.md#install) + +### Props + +#### `title` + +- type: `String` +- required: `true` + +Title for the empty state. + +#### `description` + +- type: `String` +- default: `''` + +Description for the empty state. + +#### `pricing` + +- type: `String` +- default: `` + +If provided, will display pricing information for transparency. + +#### `actionButtonText` + +- type: `String` +- default: `` + +If provided, a CTA button will show with text and icon typically, for creating an entity. + +#### `learnMoreLink` + +- type: `String` +- default: `` + +If provided, will link to the Learning Hub link for the entity. + +#### `features` + +- type: `Array` +- default: `[]` + +If provided, will display card for each feature of that entity, along with an icon, a tilte and a short description. + +### Usage example + +Please refer to the [sandbox](../src/components/entity-empty-state/EntityEmptyState.vue). + +## TypeScript interfaces + +TypeScript interfaces [are available here](https://github.com/Kong/public-ui-components/blob/main/packages/entities/entities-shared/src/types/entity-empty-state.ts) and can be directly imported into your host application. The following type interfaces are available for import: + +```ts +import type { EmptyStateFeature } from '@kong-ui-public/entities-shared' +``` diff --git a/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue b/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue new file mode 100644 index 0000000000..1716c5a961 --- /dev/null +++ b/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue @@ -0,0 +1,43 @@ + + + diff --git a/packages/entities/entities-shared/sandbox/routes.ts b/packages/entities/entities-shared/sandbox/routes.ts index 0accb82ca3..d6e60a24d8 100644 --- a/packages/entities/entities-shared/sandbox/routes.ts +++ b/packages/entities/entities-shared/sandbox/routes.ts @@ -11,6 +11,13 @@ export const routes: Array = [ label: 'EntityLink', component: () => import('./pages/EntityLinkPage.vue'), }, + + { + path: '/entity-empty-state', + name: 'entity-empty-state', + label: 'EntityEmptyState', + component: () => import('./pages/EntityEmptyStatePage.vue'), + }, { path: '/entity-delete-modal', name: 'entity-delete-modal', diff --git a/packages/entities/entities-shared/src/components/entity-empty-state/EntityEmptyState.vue b/packages/entities/entities-shared/src/components/entity-empty-state/EntityEmptyState.vue new file mode 100644 index 0000000000..b79e8ae121 --- /dev/null +++ b/packages/entities/entities-shared/src/components/entity-empty-state/EntityEmptyState.vue @@ -0,0 +1,204 @@ + + + + + diff --git a/packages/entities/entities-shared/src/index.ts b/packages/entities/entities-shared/src/index.ts index e76058cc88..335a80a7d7 100644 --- a/packages/entities/entities-shared/src/index.ts +++ b/packages/entities/entities-shared/src/index.ts @@ -10,6 +10,7 @@ import EntityToggleModal from './components/entity-toggle-modal/EntityToggleModa import PermissionsWrapper from './components/permissions-wrapper/PermissionsWrapper.vue' import EntityFormSection from './components/entity-form-section/EntityFormSection.vue' import EntityLink from './components/entity-link/EntityLink.vue' +import EntityEmptyState from './components/entity-empty-state/EntityEmptyState.vue' import JsonCodeBlock from './components/common/JsonCodeBlock.vue' import TerraformCodeBlock from './components/common/TerraformCodeBlock.vue' import YamlCodeBlock from './components/common/YamlCodeBlock.vue' @@ -20,7 +21,7 @@ import composables from './composables' const { useAxios, useDeleteUrlBuilder, useErrors, useExternalLinkCreator, useFetchUrlBuilder, useFetcher, useDebouncedFilter, useStringHelpers, useHelpers, useGatewayFeatureSupported, useTruncationDetector, useValidators, useSchemaProvider } = composables // Components -export { EntityBaseConfigCard, ConfigCardItem, ConfigCardDisplay, InternalLinkItem, EntityBaseForm, EntityBaseTable, EntityDeleteModal, EntityFilter, EntityToggleModal, PermissionsWrapper, EntityFormSection, EntityLink, JsonCodeBlock, TerraformCodeBlock, YamlCodeBlock, TableTags } +export { EntityBaseConfigCard, ConfigCardItem, ConfigCardDisplay, InternalLinkItem, EntityBaseForm, EntityBaseTable, EntityDeleteModal, EntityFilter, EntityToggleModal, PermissionsWrapper, EntityFormSection, EntityLink, EntityEmptyState, JsonCodeBlock, TerraformCodeBlock, YamlCodeBlock, TableTags } // Composables export { useAxios, useDeleteUrlBuilder, useErrors, useExternalLinkCreator, useFetchUrlBuilder, useFetcher, useDebouncedFilter, useStringHelpers, useHelpers, useGatewayFeatureSupported, useTruncationDetector, useValidators, useSchemaProvider } diff --git a/packages/entities/entities-shared/src/locales/en.json b/packages/entities/entities-shared/src/locales/en.json index 1e25af98e3..d89ae7205d 100644 --- a/packages/entities/entities-shared/src/locales/en.json +++ b/packages/entities/entities-shared/src/locales/en.json @@ -72,6 +72,10 @@ "structuredFormat": "Structured" } }, + "emptyState": { + "learnMore": "Learn more", + "pricingTitle": "Pricing: " + }, "filter": { "filterButtonText": "Filter", "fieldLabel": "Filter by:", diff --git a/packages/entities/entities-shared/src/types/entity-empty-state.ts b/packages/entities/entities-shared/src/types/entity-empty-state.ts new file mode 100644 index 0000000000..3616335a2e --- /dev/null +++ b/packages/entities/entities-shared/src/types/entity-empty-state.ts @@ -0,0 +1,5 @@ +export interface EmptyStateFeature { + iconVariant: string, + title: string, + description: string +} diff --git a/packages/entities/entities-shared/src/types/index.ts b/packages/entities/entities-shared/src/types/index.ts index b072faa8a0..9567cfdf50 100644 --- a/packages/entities/entities-shared/src/types/index.ts +++ b/packages/entities/entities-shared/src/types/index.ts @@ -10,4 +10,5 @@ export * from './entity-base-table' export * from './entity-base-config-card' export * from './entity-filter' export * from './entity-link' +export * from './entity-empty-state' export * from './utils' From 31c65437f7736a5ba838b406bf65a2cfdd7cc142 Mon Sep 17 00:00:00 2001 From: Manjiri Tapaswi Date: Thu, 12 Dec 2024 12:13:15 -0800 Subject: [PATCH 2/9] fix(*): fix imports and styles --- .../sandbox/pages/EntityEmptyStatePage.vue | 2 + .../entity-empty-state/EntityEmptyState.vue | 83 ++++++++++--------- 2 files changed, 44 insertions(+), 41 deletions(-) diff --git a/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue b/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue index 1716c5a961..b0d5beef25 100644 --- a/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue +++ b/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue @@ -6,6 +6,8 @@ action-button-text="Create a gateway" description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quidem aperiam similique vitae beatae. Repellat quam voluptas vitae, maxime consequuntur praesentium suscipit. Numquam aliquid nulla vel esse accusantium reiciendis error?" :features="features" + learn-more-link="https://konghq.com" + pricing="Lorem ipsum dolor sit amet consectetur adipisicing elit." title="Gateway Manager" > @@ -175,7 +174,7 @@ const { i18n: { t } } = composables.useI18n() } } - .entity-empty-state-description { + .entity-empty-state-description, .entity-empty-state-pricing { color: var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong); font-size: var(--kui-font-size-30, $kui-font-size-30); font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular); From bbbaeac550dcbb7aaf720a0d8ee47c243486c01a Mon Sep 17 00:00:00 2001 From: Manjiri Tapaswi Date: Fri, 13 Dec 2024 11:23:10 -0800 Subject: [PATCH 7/9] fix(*): add icons to features --- .../sandbox/pages/EntityEmptyStatePage.vue | 8 +-- .../entity-empty-state/EntityEmptyState.vue | 49 +++++++++++-------- 2 files changed, 33 insertions(+), 24 deletions(-) diff --git a/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue b/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue index 2ccd8e6aa6..51b8348222 100644 --- a/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue +++ b/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue @@ -26,20 +26,20 @@ import { RuntimesIcon } from '@kong/icons' const features = [ { - icon: RuntimesIcon, + iconVariant: 'deploy', title: 'First', description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quidem aperiam similique vitae beatae', }, { - icon: RuntimesIcon, + iconVariant: 'plug', title: 'Second', description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quidem aperiam similique vitae beatae', }, { - icon: RuntimesIcon, + iconVariant: 'chartData', title: 'Third ', description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quidem aperiam similique vitae beatae', }, { - icon: RuntimesIcon, + iconVariant: 'analytics', title: 'Fourth', description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quidem aperiam similique vitae beatae', }, diff --git a/packages/entities/entities-shared/src/components/entity-empty-state/EntityEmptyState.vue b/packages/entities/entities-shared/src/components/entity-empty-state/EntityEmptyState.vue index c5a8e2aa17..8450b6863d 100644 --- a/packages/entities/entities-shared/src/components/entity-empty-state/EntityEmptyState.vue +++ b/packages/entities/entities-shared/src/components/entity-empty-state/EntityEmptyState.vue @@ -20,12 +20,8 @@
{{ title }}
- - + +
+ {{ actionButtonText }} - -
@@ -102,10 +95,26 @@