feat: gateway-services empty states (#1932)

* feat: added new empty states * fix: fixed docs, learn more button * fix: styling issues * fix: docs
Kong · Feb 7, 2025 · 377525f · 377525f
1 parent 71ba295
commit 377525f
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 10 deletions.
diff --git a/packages/entities/entities-gateway-services/docs/gateway-service-list.md b/packages/entities/entities-gateway-services/docs/gateway-service-list.md
@@ -166,6 +166,13 @@ A synchronous or asynchronous function, that returns a boolean, that evaluates i
 
 Indicates that the user is in the onboarding Serverless control plane and should use explanatory text.
 
+#### `enableV2EmptyStates`
+
+- type: `boolean`
+- default: `false`
+
+Enables the new empty state design, this prop can be removed when the khcp-14756-empty-states-m2 FF is removed.
+
 ### Events
 
 #### error

diff --git a/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue b/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
@@ -16,6 +16,7 @@
       @clear-search-input="clearFilter"
       @click:row="(row: any) => rowClick(row as EntityRow)"
       @sort="resetPagination"
+      @state="handleStateChange"
     >
       <!-- Filter -->
       <template #toolbar-filter>
@@ -30,21 +31,58 @@
           :disabled="!useActionOutside"
           to="#kong-ui-app-page-header-action-button"
         >
-          <PermissionsWrapper :auth-function="() => canCreate()">
-            <!-- Hide Create button if table is empty -->
+          <div class="button-row">
             <KButton
-              appearance="primary"
-              data-testid="toolbar-add-gateway-service"
-              :size="useActionOutside ? 'medium' : 'large'"
-              :to="config.createRoute"
+              v-if="!showEmptyState && config.app === 'konnect'"
+              appearance="secondary"
+              class="open-learning-hub"
+              data-testid="gateway-services-learn-more-button"
+              icon
+              @click="$emit('click:learn-more')"
             >
-              <AddIcon />
-              {{ t('gateway_services.list.toolbar_actions.new_gateway_service') }}
+              <BookIcon decorative />
             </KButton>
-          </PermissionsWrapper>
+            <PermissionsWrapper :auth-function="() => canCreate()">
+              <!-- Hide Create button if table is empty -->
+              <KButton
+                appearance="primary"
+                data-testid="toolbar-add-gateway-service"
+                :size="useActionOutside ? 'medium' : 'large'"
+                :to="config.createRoute"
+              >
+                <AddIcon />
+                {{ t('gateway_services.list.toolbar_actions.new_gateway_service') }}
+              </KButton>
+            </PermissionsWrapper>
+          </div>
         </Teleport>
       </template>
 
+      <template
+        v-if="enableV2EmptyStates && config.app === 'konnect'"
+        #empty-state
+      >
+        <EntityEmptyState
+          :action-button-text="t('gateway_services.empty_state_v2.create')"
+          appearance="secondary"
+          :can-create="() => canCreate()"
+          :description="t('gateway_services.empty_state_v2.description')"
+          :learn-more="config.app === 'konnect'"
+          :title="t('gateway_services.empty_state_v2.title')"
+          @click:create="handleCreate"
+          @click:learn-more="$emit('click:learn-more')"
+        >
+          <template #image>
+            <div class="empty-state-icon-gateway">
+              <ServicesIcon
+                :color="KUI_COLOR_TEXT_DECORATIVE_AQUA"
+                :size="KUI_ICON_SIZE_50"
+              />
+            </div>
+          </template>
+        </EntityEmptyState>
+      </template>
+
       <!-- Column Formatting -->
       <template #name="{ rowValue }">
         <b>{{ rowValue ?? '-' }}</b>
@@ -160,7 +198,7 @@
 import type { PropType } from 'vue'
 import { computed, ref, watch, onBeforeMount } from 'vue'
 import { useRouter } from 'vue-router'
-import { AddIcon } from '@kong/icons'
+import { AddIcon, BookIcon, ServicesIcon } from '@kong/icons'
 import composables from '../composables'
 import endpoints from '../gateway-services-endpoints'
 import type { AxiosError } from 'axios'
@@ -184,17 +222,21 @@ import {
   EntityFilter,
   EntityToggleModal,
   EntityTypes,
+  EntityEmptyState,
   FetcherStatus,
   PermissionsWrapper,
   useAxios,
+  useTableState,
   useFetcher,
   useDeleteUrlBuilder,
   TableTags,
 } from '@kong-ui-public/entities-shared'
+import { KUI_ICON_SIZE_50, KUI_COLOR_TEXT_DECORATIVE_AQUA } from '@kong/design-tokens'
 import '@kong-ui-public/entities-shared/dist/style.css'
 
 const emit = defineEmits<{
   (e: 'error', error: AxiosError): void,
+  (e: 'click:learn-more'): void,
   (e: 'copy:success', payload: CopyEventPayload): void,
   (e: 'copy:error', payload: CopyEventPayload): void,
   (e: 'delete:success', gatewayService: EntityRow): void,
@@ -253,12 +295,22 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  /**
+   * Enables the new empty state design, this prop can be removed when
+   * the khcp-14756-empty-states-m2 FF is removed.
+   */
+  enableV2EmptyStates: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { i18n: { t, formatUnixTimeStamp } } = composables.useI18n()
 const router = useRouter()
 
 const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
+const { hideTableToolbar: showEmptyState, handleStateChange } = useTableState(() => filterQuery.value)
+
 
 /**
  * Table Headers
@@ -551,6 +603,12 @@ const deleteRow = async (): Promise<void> => {
     isDeletePending.value = false
   }
 }
+/**
+ * Add Gateway Service
+ */
+const handleCreate = (): void => {
+  router.push(props.config.createRoute)
+}
 
 /**
  * Watchers
@@ -579,6 +637,12 @@ onBeforeMount(async () => {
 </script>
 
 <style lang="scss" scoped>
+.button-row {
+  align-items: center;
+  display: flex;
+  gap: $kui-space-50;
+}
+
 .kong-ui-entities-gateway-services-list {
   width: 100%;
 

diff --git a/packages/entities/entities-gateway-services/src/locales/en.json b/packages/entities/entities-gateway-services/src/locales/en.json
@@ -44,6 +44,11 @@
         "serverless_title": "Configure your first Gateway Service"
       }
     },
+    "empty_state_v2": {
+      "create": "New gateway service",
+      "title": "Configure your first gateway service",
+      "description": "Services represent your upstream APIs, allowing for centralized configuration and streamlined management of backend endpoints."
+    },
     "form": {
       "sections": {
         "general": {