feat: added snis new empty state (#1941)

* feat: added snis new empty state * fix: removed prop usage, added docs * fix: handle create * fix: refactor lh logic
Kong · Feb 17, 2025 · 0be3966 · 0be3966
1 parent 0023154
commit 0be3966
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 10 deletions.
diff --git a/packages/entities/entities-snis/docs/sni-list.md b/packages/entities/entities-snis/docs/sni-list.md
@@ -146,6 +146,13 @@ A synchronous or asynchronous function, that returns a boolean, that evaluates i
 
 A synchronous or asynchronous function, that returns a boolean, that evaluates if the user can retrieve (view details) a given entity.
 
+#### `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-snis/sandbox/pages/SniListPage.vue b/packages/entities/entities-snis/sandbox/pages/SniListPage.vue
@@ -2,6 +2,10 @@
   <SandboxPermissionsControl
     @update="handlePermissionsUpdate"
   />
+
+  <h2>Konnect Actions Outside</h2>
+  <div id="kong-ui-app-page-header-action-button" />
+
   <h2>Konnect API</h2>
   <SniList
     v-if="permissions"
@@ -12,6 +16,7 @@
     :can-edit="permissions.canEdit"
     :can-retrieve="permissions.canRetrieve"
     :config="konnectConfig"
+    use-action-outside
     @copy:error="onCopyError"
     @copy:success="onCopySuccess"
     @delete:success="onDeleteSNISuccess"

diff --git a/packages/entities/entities-snis/src/components/SniList.vue b/packages/entities/entities-snis/src/components/SniList.vue
@@ -16,6 +16,7 @@
       :table-headers="tableHeaders"
       @clear-search-input="clearFilter"
       @sort="resetPagination"
+      @state="handleStateChange"
     >
       <!-- Filter -->
       <template #toolbar-filter>
@@ -30,21 +31,79 @@
           :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-sni"
-              :size="useActionOutside ? 'medium' : 'large'"
-              :to="config.createRoute"
+              v-if="showHeaderLHButton"
+              appearance="secondary"
+              class="open-learning-hub"
+              data-testid="snis-learn-more-button"
+              icon
+              @click="$emit('click:learn-more')"
             >
-              <AddIcon />
-              {{ t('snis.list.toolbar_actions.new') }}
+              <BookIcon decorative />
             </KButton>
-          </PermissionsWrapper>
+            <PermissionsWrapper :auth-function="() => canCreate()">
+              <!-- Hide Create button if table is empty -->
+              <KButton
+                appearance="primary"
+                data-testid="toolbar-add-sni"
+                :size="useActionOutside ? 'medium' : 'large'"
+                :to="config.createRoute"
+              >
+                <AddIcon />
+                {{ t('snis.list.toolbar_actions.new') }}
+              </KButton>
+            </PermissionsWrapper>
+          </div>
         </Teleport>
       </template>
 
+      <!-- TODO: remove this slot when empty states M2 is cleaned up -->
+      <template
+        v-if="!hasRecords && isLegacyLHButton"
+        #outside-actions
+      >
+        <Teleport
+          :disabled="!useActionOutside"
+          to="#kong-ui-app-page-header-action-button"
+        >
+          <KButton
+            appearance="secondary"
+            class="open-learning-hub"
+            data-testid="sni-learn-more-button"
+            icon
+            @click="$emit('click:learn-more')"
+          >
+            <BookIcon decorative />
+          </KButton>
+        </Teleport>
+      </template>
+
+      <template
+        v-if="enableV2EmptyStates && config.app === 'konnect'"
+        #empty-state
+      >
+        <EntityEmptyState
+          :action-button-text="t('snis.list.toolbar_actions.new')"
+          appearance="secondary"
+          :can-create="() => canCreate()"
+          :description="t('snis.list.empty_state_v2.description')"
+          :learn-more="config.app === 'konnect'"
+          :title="t('snis.list.empty_state_v2.title')"
+          @click:create="handleCreate"
+          @click:learn-more="$emit('click:learn-more')"
+        >
+          <template #image>
+            <div class="empty-state-icon-gateway">
+              <CloudIcon
+                :color="KUI_COLOR_TEXT_DECORATIVE_AQUA"
+                :size="KUI_ICON_SIZE_50"
+              />
+            </div>
+          </template>
+        </EntityEmptyState>
+      </template>
+
       <!-- Column Formatting -->
       <template #name="{ rowValue }">
         <b>{{ rowValue ?? '-' }}</b>
@@ -119,6 +178,7 @@
 import type { PropType } from 'vue'
 import { computed, ref, watch, onBeforeMount } from 'vue'
 import type { AxiosError } from 'axios'
+import { useRouter } from 'vue-router'
 import composables from '../composables'
 import endpoints from '../snis-endpoints'
 import {
@@ -130,7 +190,9 @@ import {
   PermissionsWrapper,
   useAxios,
   useFetcher,
+  EntityEmptyState,
   useDeleteUrlBuilder,
+  useTableState,
   TableTags,
 } from '@kong-ui-public/entities-shared'
 import type {
@@ -148,10 +210,12 @@ import type {
   TableErrorMessage,
 } from '@kong-ui-public/entities-shared'
 import '@kong-ui-public/entities-shared/dist/style.css'
-import { AddIcon } from '@kong/icons'
+import { AddIcon, BookIcon, CloudIcon } from '@kong/icons'
+import { KUI_COLOR_TEXT_DECORATIVE_AQUA, KUI_ICON_SIZE_50 } from '@kong/design-tokens'
 
 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', sni: EntityRow): void,
@@ -204,11 +268,28 @@ 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 } } = composables.useI18n()
+const router = useRouter()
+
 
 const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
+const { hasRecords, handleStateChange } = useTableState(() => filterQuery.value)
+// Current empty state logic is only for Konnect, KM will pick up at GA.
+// If new empty states are enabled, show the learning hub button when the empty state is hidden (for Konnect)
+// If new empty states are not enabled, show the learning hub button (for Konnect)
+const showHeaderLHButton = computed((): boolean => hasRecords.value && props.config.app === 'konnect')
+const isLegacyLHButton = computed((): boolean => !props.enableV2EmptyStates && props.config.app === 'konnect')
+
 
 /**
  * Table Headers
@@ -410,6 +491,10 @@ const confirmDelete = async (): Promise<void> => {
   }
 }
 
+const handleCreate = (): void => {
+  router.push(props.config.createRoute)
+}
+
 /**
  * Watchers
  */
@@ -443,6 +528,12 @@ onBeforeMount(async () => {
 </script>
 
 <style lang="scss" scoped>
+.button-row {
+  align-items: center;
+  display: flex;
+  gap: $kui-space-50;
+}
+
 .kong-ui-entities-snis-list {
   width: 100%;
 

diff --git a/packages/entities/entities-snis/src/locales/en.json b/packages/entities/entities-snis/src/locales/en.json
@@ -27,6 +27,11 @@
       "empty_state": {
         "title": "Configure a New SNI",
         "description": "SNIs are used to map hostnames to a certificate."
+      },
+      "empty_state_v2": {
+        "title": "Configure your first SNI",
+        "description": "Server Name Indications (SNIs) map hostnames to SSL/TLS certificates, enabling secure connections for domain-specific traffic.",
+        "create_cta": "New SNI"
       }
     }
   },