feat(entities): add additionMessageForEmptyState (#1226)

Author: Leopoldthecoder

packages/entities/entities-certificates/docs/ca-certificate-list.md

@@ -66,6 +66,12 @@ A table component for ca-certificates.
     - required: `true`
     - default: `undefined`
     - A function that returns the route for editing a route.
+  
+  - `additionMessageForEmptyState`:
+    - type: `string`
+    - required: `false`
+    - default: `undefined`
+    - Additional message to show when there are no records.
 
   - `workspace`:
     - type: `string`

packages/entities/entities-certificates/docs/certificate-list.md

@@ -73,6 +73,12 @@ A table component for certificates.
     - default: `undefined`
     - A function that returns the route for adding an SNI with certificate specified.
 
+  - `additionMessageForEmptyState`:
+    - type: `string`
+    - required: `false`
+    - default: `undefined`
+    - Additional message to show when there are no records.
+
   - `workspace`:
     - type: `string`
     - required: `true`

packages/entities/entities-certificates/src/components/CACertificateList.vue

@@ -462,7 +462,7 @@ watch(fetcherState, (state) => {
 const emptyStateOptions = ref<EmptyStateOptions>({
   ctaPath: props.config.createRoute,
   ctaText: undefined,
-  message: t('ca-certificates.list.empty_state.description'),
+  message: `${t('ca-certificates.list.empty_state.description')}${props.config.additionMessageForEmptyState ? ` ${props.config.additionMessageForEmptyState}` : ''}`,
   title: t('ca-certificates.title'),
 })
 

packages/entities/entities-certificates/src/components/CertificateList.vue

@@ -509,7 +509,7 @@ watch(fetcherState, (state) => {
 const emptyStateOptions = ref<EmptyStateOptions>({
   ctaPath: props.config.createRoute,
   ctaText: undefined,
-  message: t('certificates.list.empty_state.description'),
+  message: `${t('certificates.list.empty_state.description')}${props.config.additionMessageForEmptyState ? ` ${props.config.additionMessageForEmptyState}` : ''}`,
   title: t('certificates.title'),
 })
 

packages/entities/entities-consumer-groups/docs/consumer-group-list.md

@@ -85,6 +85,12 @@ A table component for consumer groups.
     - default: `null`
     - A boolean to indicate if the paginated endpoint is used when `consumerId` is provided.
 
+  - `additionMessageForEmptyState`:
+    - type: `string`
+    - required: `false`
+    - default: `undefined`
+    - Additional message to show when there are no records.
+
   - `workspace`:
     - type: `string`
     - required: `true`

packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue

@@ -592,7 +592,7 @@ watch(fetcherState, (state) => {
 const emptyStateOptions = ref<EmptyStateOptions>({
   ctaPath: isConsumerPage.value ? undefined : props.config.createRoute,
   ctaText: undefined,
-  message: t('consumer_groups.list.empty_state.description'),
+  message: `${t('consumer_groups.list.empty_state.description')}${props.config.additionMessageForEmptyState ? ` ${props.config.additionMessageForEmptyState}` : ''}`,
   title: t('consumer_groups.title'),
 })
 

packages/entities/entities-consumers/docs/consumer-list.md

@@ -85,6 +85,12 @@ A table component for consumers.
     - default: `null`
     - A boolean to indicate if the paginated endpoint is used when `consumerGroupId` is provided.
 
+  - `additionMessageForEmptyState`:
+    - type: `string`
+    - required: `false`
+    - default: `undefined`
+    - Additional message to show when there are no records.
+
   - `workspace`:
     - type: `string`
     - required: `true`

packages/entities/entities-consumers/src/components/ConsumerList.vue

@@ -602,7 +602,7 @@ watch(fetcherState, (state) => {
 const emptyStateOptions = ref<EmptyStateOptions>({
   ctaPath: isConsumerGroupPage.value ? undefined : props.config.createRoute,
   ctaText: undefined,
-  message: t('consumers.list.empty_state.description'),
+  message: `${t('consumers.list.empty_state.description')}${props.config.additionMessageForEmptyState ? ` ${props.config.additionMessageForEmptyState}` : ''}`,
   title: t('consumers.title'),
 })
 

packages/entities/entities-gateway-services/docs/gateway-service-list.md

@@ -67,6 +67,12 @@ A table component for gateway services.
     - default: `undefined`
     - A function that returns the route for editing a gateway service.
 
+  - `additionMessageForEmptyState`:
+    - type: `string`
+    - required: `false`
+    - default: `undefined`
+    - Additional message to show when there are no records.
+
   - `getControlPlaneRoute`:
     - type: `(id: string) => RouteLocationRaw`
     - required: `false`

packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue

@@ -341,7 +341,7 @@ const emptyStateOptions = computed((): EmptyStateOptions => {
   return {
     ctaPath: props.config.createRoute,
     ctaText: userCanCreate.value ? t('actions.create') : undefined,
-    message: t('gateway_services.list.empty_state.description'),
+    message: `${t('gateway_services.list.empty_state.description')}${props.config.additionMessageForEmptyState ? ` ${props.config.additionMessageForEmptyState}` : ''}`,
     title: userCanCreate.value ? t('gateway_services.list.empty_state.title') : t('gateway_services.title'),
   }
 })

packages/entities/entities-key-sets/docs/key-set-list.md

@@ -61,6 +61,12 @@ A table component for key sets.
     - default: `undefined`
     - A function that returns the route for editing a key set.
 
+  - `additionMessageForEmptyState`:
+    - type: `string`
+    - required: `false`
+    - default: `undefined`
+    - Additional message to show when there are no records.
+
   - `workspace`:
     - type: `string`
     - required: `true`

packages/entities/entities-key-sets/src/components/KeySetList.vue

@@ -453,7 +453,7 @@ watch(fetcherState, (state) => {
 const emptyStateOptions = ref<EmptyStateOptions>({
   ctaPath: props.config.createRoute,
   ctaText: undefined,
-  message: t('keySets.list.empty_state.description'),
+  message: `${t('keySets.list.empty_state.description')}${props.config.additionMessageForEmptyState ? ` ${props.config.additionMessageForEmptyState}` : ''}`,
   title: t('keySets.title'),
 })
 

packages/entities/entities-keys/docs/key-list.md

@@ -67,6 +67,12 @@ A table component for keys.
     - default: `null`
     - Current key set id if the KeyList in nested in the keys tab on a key set detail page.
 
+  - `additionMessageForEmptyState`:
+    - type: `string`
+    - required: `false`
+    - default: `undefined`
+    - Additional message to show when there are no records.
+
   - `workspace`:
     - type: `string`
     - required: `true`

packages/entities/entities-keys/src/components/KeyList.vue

@@ -460,7 +460,7 @@ watch(fetcherState, (state) => {
 const emptyStateOptions = ref<EmptyStateOptions>({
   ctaPath: props.config.createRoute,
   ctaText: undefined,
-  message: t('keys.list.empty_state.description'),
+  message: `${t('keys.list.empty_state.description')}${props.config.additionMessageForEmptyState ? ` ${props.config.additionMessageForEmptyState}` : ''}`,
   title: t('keys.title'),
 })
 

packages/entities/entities-plugins/docs/plugin-list.md

@@ -83,6 +83,12 @@ A table component for plugins.
     - default: `() => null`,
     - A synchronous function, that returns a string for a entity row, will be displayed on the switch hover tooltip. A null return will not make tooltip displayed. Please note it's a synchronous function.
 
+  - `additionMessageForEmptyState`:
+    - type: `string`
+    - required: `false`
+    - default: `undefined`
+    - Additional message to show when there are no records.
+
   - `workspace`:
     - type: `string`
     - required: `true`

packages/entities/entities-plugins/src/components/PluginList.vue

@@ -751,7 +751,7 @@ watch(fetcherState, (state) => {
 const emptyStateOptions = ref<EmptyStateOptions>({
   ctaPath: props.config.createRoute,
   ctaText: undefined,
-  message: t('plugins.list.empty_state.description'),
+  message: `${t('plugins.list.empty_state.description')}${props.config.additionMessageForEmptyState ? ` ${props.config.additionMessageForEmptyState}` : ''}`,
   title: t('plugins.title'),
 })
 

packages/entities/entities-routes/docs/route-list.md

@@ -77,6 +77,12 @@ A table component for routes.
     - default: `null`
     - Current service id if the RouteList is nested in the routes tab on a service detail page.
 
+  - `additionMessageForEmptyState`:
+    - type: `string`
+    - required: `false`
+    - default: `undefined`
+    - Additional message to show when there are no records.
+
   - `workspace`:
     - type: `string`
     - required: `true`

packages/entities/entities-routes/src/components/RouteList.vue

@@ -521,7 +521,7 @@ watch(fetcherState, (state) => {
 const emptyStateOptions = ref<EmptyStateOptions>({
   ctaPath: props.config.createRoute,
   ctaText: undefined,
-  message: t('routes.list.empty_state.description'),
+  message: `${t('routes.list.empty_state.description')}${props.config.additionMessageForEmptyState ? ` ${props.config.additionMessageForEmptyState}` : ''}`,
   title: t('routes.title'),
 })
 

packages/entities/entities-shared/src/types/entity-base-table.ts

@@ -1,13 +1,18 @@
 import type { RouteLocationRaw } from 'vue-router'
 import type { Field, KongManagerConfig, KonnectConfig } from './index'
 
-export interface KonnectBaseTableConfig extends KonnectConfig {}
+export interface KonnectBaseTableConfig extends KonnectConfig {
+  /** Additional message to show when there are no records */
+  additionMessageForEmptyState?: string
+}
 
 export interface KongManagerBaseTableConfig extends KongManagerConfig {
+  /** Additional message to show when there are no records */
+  additionMessageForEmptyState?: string
   /** Whether to use exact match or not */
-  isExactMatch?: boolean;
+  isExactMatch?: boolean
   /** Whether to disable table sorting */
-  disableSorting?: boolean;
+  disableSorting?: boolean
 }
 
 export interface BaseTableHeaders {

packages/entities/entities-snis/docs/sni-list.md

@@ -67,6 +67,12 @@ A table component for SNIs.
     - default: `undefined`
     - A function that returns the route for editing an SNI.
 
+  - `additionMessageForEmptyState`:
+    - type: `string`
+    - required: `false`
+    - default: `undefined`
+    - Additional message to show when there are no records.
+
   - `workspace`:
     - type: `string`
     - required: `true`

packages/entities/entities-snis/src/components/SniList.vue

@@ -307,7 +307,7 @@ const errorMessage = ref<TableErrorMessage>(null)
 const emptyStateOptions = ref<EmptyStateOptions>({
   ctaPath: props.config.createRoute,
   ctaText: undefined,
-  message: t('snis.list.empty_state.description'),
+  message: `${t('snis.list.empty_state.description')}${props.config.additionMessageForEmptyState ? ` ${props.config.additionMessageForEmptyState}` : ''}`,
   title: t('snis.title'),
 })
 

packages/entities/entities-upstreams-targets/docs/targets-list.md

@@ -58,6 +58,12 @@ A table component for targets. Includes target create/edit form modal out of the
     - Route for creating a target.
     - Optional because a form could open in a modal or in a new page.
 
+  - `additionMessageForEmptyState`:
+    - type: `string`
+    - required: `false`
+    - default: `undefined`
+    - Additional message to show when there are no records.
+
   - `workspace`:
     - type: `string`
     - required: `true`

packages/entities/entities-upstreams-targets/docs/upstreams-list.md

@@ -68,6 +68,12 @@ A table component for upstreams.
     - default: `undefined`
     - A function that returns the route for editing an upstream.
 
+  - `additionMessageForEmptyState`:
+    - type: `string`
+    - required: `false`
+    - default: `undefined`
+    - Additional message to show when there are no records.
+
   - `workspace`:
     - type: `string`
     - required: `true`

packages/entities/entities-upstreams-targets/src/components/TargetsList.vue

@@ -433,7 +433,7 @@ watch(fetcherState, (state) => {
 // IMPORTANT: you must initialize this object assuming the user does **NOT** have create permissions so that the onBeforeMount hook can properly evaluate the props.canCreate function.
 const emptyStateOptions = ref<EmptyStateOptions>({
   ctaText: undefined,
-  message: t('targets.list.empty_state.description'),
+  message: `${t('targets.list.empty_state.description')}${props.config.additionMessageForEmptyState ? ` ${props.config.additionMessageForEmptyState}` : ''}`,
   title: t('targets.title'),
   ...(props.config.createRoute && {
     // If `createRoute` provided in config, add a `ctaPath` to empty state CTA button so it becomes a link

packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue

@@ -444,7 +444,7 @@ watch(fetcherState, (state) => {
 const emptyStateOptions = ref<EmptyStateOptions>({
   ctaPath: props.config.createRoute,
   ctaText: undefined,
-  message: t('upstreams.list.empty_state.description'),
+  message: `${t('upstreams.list.empty_state.description')}${props.config.additionMessageForEmptyState ? ` ${props.config.additionMessageForEmptyState}` : ''}`,
   title: t('upstreams.title'),
 })
 

packages/entities/entities-vaults/docs/vault-list.md

@@ -65,6 +65,12 @@ A table component for vaults.
     - default: `undefined`
     - A function that returns the route for editing a vault.
 
+  - `additionMessageForEmptyState`:
+    - type: `string`
+    - required: `false`
+    - default: `undefined`
+    - Additional message to show when there are no records.
+
   - `workspace`:
     - type: `string`
     - required: `true`

packages/entities/entities-vaults/src/components/VaultList.vue

@@ -462,7 +462,7 @@ watch(fetcherState, (state) => {
 const emptyStateOptions = ref<EmptyStateOptions>({
   ctaPath: props.config.createRoute,
   ctaText: undefined,
-  message: t('vaults.list.empty_state.description'),
+  message: `${t('vaults.list.empty_state.description')}${props.config.additionMessageForEmptyState ? ` ${props.config.additionMessageForEmptyState}` : ''}`,
   title: t('vaults.title'),
 })