feat: plugins list empty state

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

@@ -206,6 +206,12 @@ The table is rendered inside a `KCard`. `title` text is displayed in the upper l
 
 HTML element you want title to be rendered as. Defaults to `h2`.
 
+#### `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

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

@@ -17,6 +17,7 @@
       @clear-search-input="clearFilter"
       @click:row="(row: any) => rowClick(row as EntityRow)"
       @sort="resetPagination"
+      @state="handleStateChange"
     >
       <!-- Filter -->
       <template #toolbar-filter>
@@ -31,21 +32,59 @@
           :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-plugin"
-              :size="useActionOutside ? 'medium' : 'large'"
-              :to="config.createRoute"
+              v-if="!showEmptyState && config.app === 'konnect'"
+              appearance="secondary"
+              class="open-learning-hub"
+              data-testid="plugins-learn-more-button"
+              icon
+              @click="$emit('click:learn-more')"
             >
-              <AddIcon />
-              {{ t('plugins.list.toolbar_actions.new_plugin') }}
+              <BookIcon decorative />
             </KButton>
-          </PermissionsWrapper>
+            <PermissionsWrapper :auth-function="() => canCreate()">
+              <!-- Hide Create button if table is empty -->
+              <KButton
+                appearance="primary"
+                data-testid="toolbar-add-plugin"
+                :size="useActionOutside ? 'medium' : 'large'"
+                :to="config.createRoute"
+              >
+                <AddIcon />
+                {{ t('plugins.list.toolbar_actions.new_plugin') }}
+              </KButton>
+            </PermissionsWrapper>
+          </div>
         </Teleport>
       </template>
 
+      <template
+        v-if="enableV2EmptyStates && config.app === 'konnect'"
+        #empty-state
+      >
+        <EntityEmptyState
+          :action-button-text="t('plugins.list.empty_state_v2.create_cta')"
+          appearance="secondary"
+          :can-create="() => canCreate()"
+          :description="t('plugins.list.empty_state_v2.description')"
+          :learn-more="config.app === 'konnect'"
+          :title="t('plugins.list.empty_state_v2.title')"
+          @click:create="handleCreate"
+          @click:learn-more="$emit('click:learn-more')"
+        >
+          <template #image>
+            <div class="empty-state-icon-gateway">
+              <PlugIcon
+                :color="KUI_COLOR_TEXT_DECORATIVE_AQUA"
+                :size="KUI_ICON_SIZE_50"
+              />
+            </div>
+          </template>
+        </EntityEmptyState>
+      </template>
+
+
       <!-- Column Formatting -->
       <template #name="{ row }">
         <div class="name-cell-wrapper">
@@ -216,11 +255,13 @@ import {
   EntityToggleModal,
   EntityFilter,
   EntityTypes,
+  EntityEmptyState,
   FetcherStatus,
   PermissionsWrapper,
   useAxios,
   useFetcher,
   useDeleteUrlBuilder,
+  useTableState,
   useGatewayFeatureSupported,
   TableTags,
 } from '@kong-ui-public/entities-shared'
@@ -234,7 +275,7 @@ import type {
   FuzzyMatchFilterConfig,
   TableErrorMessage,
 } from '@kong-ui-public/entities-shared'
-import { AddIcon } from '@kong/icons'
+import { AddIcon, BookIcon, PlugIcon } from '@kong/icons'
 
 import composables from '../composables'
 import endpoints from '../plugins-endpoints'
@@ -252,11 +293,14 @@ import PluginIcon from './PluginIcon.vue'
 import type { HeaderTag } from '@kong/kongponents'
 
 import isEmpty from 'lodash-es/isEmpty'
+import { KUI_COLOR_TEXT_DECORATIVE_AQUA, KUI_ICON_SIZE_50 } from '@kong/design-tokens'
+import '@kong-ui-public/entities-shared/dist/style.css'
 
 const pluginMetaData = composables.usePluginMetaData()
 
 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', plugin: EntityRow): void,
@@ -336,12 +380,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 } } = composables.useI18n()
 const router = useRouter()
 
 const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
+const { hideTableToolbar: showEmptyState, handleStateChange } = useTableState(() => filterQuery.value)
+
 
 const isConsumerPage = computed((): boolean => props.config?.entityType === 'consumers')
 const isConsumerGroupPage = computed((): boolean => props.config?.entityType === 'consumer_groups')
@@ -709,6 +763,13 @@ const confirmDelete = async (): Promise<void> => {
     isDeletePending.value = false
   }
 }
+/**
+ * Create New Plugin
+ */
+const handleCreate = (): void => {
+  router.push(props.config.createRoute)
+}
+
 
 /**
  * Watchers
@@ -752,6 +813,12 @@ onBeforeMount(async () => {
 </script>
 
 <style lang="scss" scoped>
+.button-row {
+  align-items: center;
+  display: flex;
+  gap: $kui-space-50;
+}
+
 .kong-ui-entities-plugins-list {
   width: 100%;
 

packages/entities/entities-plugins/src/locales/en.json

@@ -92,6 +92,11 @@
       "empty_state": {
         "title": "Configure a New Plugin",
         "description": "Plugins are used to extend Kong functionality."
+      },
+      "empty_state_v2": {
+        "title": "Configure your first plugin",
+        "description": "Plugins extend API functionalities, offering features like authentication, rate limiting, and request transformations to enhance security and performance.",
+        "create_cta": "New plugin"
       }
     },
     "meta": {