fix(*): hide teleported create button in empty state for all entities

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

@@ -1,6 +1,7 @@
 <template>
   <div class="kong-ui-entities-ca-certificates-list">
     <EntityBaseTable
+      :key="key"
       :cache-identifier="cacheIdentifier"
       disable-pagination-page-jump
       :disable-sorting="disableSorting"
@@ -27,8 +28,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
+        <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside"
+          :disabled="!useActionOutside || !hasData"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -425,10 +427,21 @@ const confirmDelete = async (): Promise<void> => {
   }
 }
 
+// Remount the table when hasData changes
+const key = ref(1)
+const hasData = ref(false)
+const isLoaded = ref(false)
+
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
+  // if table is populated, show the Create button
+  if (fetcherState.value.response?.data?.length && !isLoaded.value) {
+    hasData.value = true
+    isLoaded.value = true
+    key.value++
+  }
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = t('ca-certificates.errors.general')
     // Emit the error for the host app

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

@@ -1,6 +1,7 @@
 <template>
   <div class="kong-ui-entities-certificates-list">
     <EntityBaseTable
+      :key="key"
       :cache-identifier="cacheIdentifier"
       disable-pagination-page-jump
       :disable-sorting="disableSorting"
@@ -27,8 +28,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
+        <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside"
+          :disabled="!useActionOutside || !hasData"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -492,10 +494,21 @@ const confirmDelete = async (): Promise<void> => {
   }
 }
 
+// Remount the table when hasData changes
+const key = ref(1)
+const hasData = ref(false)
+const isLoaded = ref(false)
+
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
+  // if table is populated, show the Create button
+  if (fetcherState.value.response?.data?.length && !isLoaded.value) {
+    hasData.value = true
+    isLoaded.value = true
+    key.value++
+  }
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = t('certificates.errors.general')
     // Emit the error for the host app

packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="kong-ui-entities-consumer-credentials-list">
     <EntityBaseTable
+      :key="key"
       :cache-identifier="cacheIdentifier"
       disable-pagination-page-jump
       disable-row-click
@@ -18,8 +19,9 @@
     >
       <!-- Create action -->
       <template #toolbar-button>
+        <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside"
+          :disabled="!useActionOutside || !hasData"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -453,10 +455,21 @@ const confirmDelete = async (): Promise<void> => {
   }
 }
 
+// Remount the table when hasData changes
+const key = ref(1)
+const hasData = ref(false)
+const isLoaded = ref(false)
+
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
+  // if table is populated, show the Create button
+  if (fetcherState.value.response?.data?.length && !isLoaded.value) {
+    hasData.value = true
+    isLoaded.value = true
+    key.value++
+  }
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = t('credentials.error.general')
     // Emit the error for the host app

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

@@ -1,6 +1,7 @@
 <template>
   <div class="kong-ui-entities-consumer-groups-list">
     <EntityBaseTable
+      :key="key"
       :cache-identifier="cacheIdentifier"
       :disable-pagination="isConsumerPage"
       disable-pagination-page-jump
@@ -31,8 +32,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
+        <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside"
+          :disabled="!useActionOutside || !hasData"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -553,10 +555,21 @@ const exitGroups = async (): Promise<void> => {
   }
 }
 
+// Remount the table when hasData changes
+const key = ref(1)
+const hasData = ref(false)
+const isLoaded = ref(false)
+
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
+  // if table is populated, show the Create button
+  if (fetcherState.value.response?.data?.length && !isLoaded.value) {
+    hasData.value = true
+    isLoaded.value = true
+    key.value++
+  }
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = t('consumer_groups.errors.general')
     // Emit the error for the host app

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

@@ -1,6 +1,7 @@
 <template>
   <div class="kong-ui-entities-consumers-list">
     <EntityBaseTable
+      :key="key"
       :cache-identifier="cacheIdentifier"
       :disable-pagination="isConsumerGroupPage"
       disable-pagination-page-jump
@@ -31,8 +32,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
+        <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside"
+          :disabled="!useActionOutside || !hasData"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -563,10 +565,21 @@ const removeConsumers = async (): Promise<void> => {
   }
 }
 
+// Remount the table when hasData changes
+const key = ref(1)
+const hasData = ref(false)
+const isLoaded = ref(false)
+
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
+  // if table is populated, show the Create button
+  if (fetcherState.value.response?.data?.length && !isLoaded.value) {
+    hasData.value = true
+    isLoaded.value = true
+    key.value++
+  }
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = t('consumers.errors.general')
     // Emit the error for the host app

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

@@ -1,6 +1,7 @@
 <template>
   <div class="kong-ui-entities-gateway-services-list">
     <EntityBaseTable
+      :key="key"
       :cache-identifier="cacheIdentifier"
       disable-pagination-page-jump
       :disable-sorting="disableSorting"
@@ -27,8 +28,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
+        <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside"
+          :disabled="!useActionOutside || !hasData"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -514,11 +516,21 @@ const deleteRow = async (): Promise<void> => {
     isDeletePending.value = false
   }
 }
+// Remount the table when hasData changes
+const key = ref(1)
+const hasData = ref(false)
+const isLoaded = ref(false)
 
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
+  // if table is populated, show the Create button
+  if (fetcherState.value.response?.data?.length && !isLoaded.value) {
+    hasData.value = true
+    isLoaded.value = true
+    key.value++
+  }
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = t('errors.general')
     // Emit the error for the host app

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

@@ -1,6 +1,7 @@
 <template>
   <div class="kong-ui-entities-key-sets-list">
     <EntityBaseTable
+      :key="key"
       :cache-identifier="cacheIdentifier"
       disable-pagination-page-jump
       :disable-sorting="disableSorting"
@@ -27,8 +28,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
+        <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside"
+          :disabled="!useActionOutside || !hasData"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -428,10 +430,21 @@ const confirmDelete = async (): Promise<void> => {
   }
 }
 
+// Remount the table when hasData changes
+const key = ref(1)
+const hasData = ref(false)
+const isLoaded = ref(false)
+
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
+  // if table is populated, show the Create button
+  if (fetcherState.value.response?.data?.length && !isLoaded.value) {
+    hasData.value = true
+    isLoaded.value = true
+    key.value++
+  }
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = t('keySets.errors.general')
     // Emit the error for the host app

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

@@ -1,6 +1,7 @@
 <template>
   <div class="kong-ui-entities-keys-list">
     <EntityBaseTable
+      :key="key"
       :cache-identifier="cacheIdentifier"
       disable-pagination-page-jump
       :disable-sorting="disableSorting"
@@ -27,8 +28,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
+        <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside"
+          :disabled="!useActionOutside || !hasData"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -437,10 +439,21 @@ const confirmDelete = async (): Promise<void> => {
   }
 }
 
+// Remount the table when hasData changes
+const key = ref(1)
+const hasData = ref(false)
+const isLoaded = ref(false)
+
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
+  // if table is populated, show the Create button
+  if (fetcherState.value.response?.data?.length && !isLoaded.value) {
+    hasData.value = true
+    isLoaded.value = true
+    key.value++
+  }
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = t('keys.errors.general')
     // Emit the error for the host app

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

@@ -1,6 +1,7 @@
 <template>
   <div class="kong-ui-entities-plugins-list">
     <EntityBaseTable
+      :key="key"
       :cache-identifier="cacheIdentifier"
       disable-pagination-page-jump
       :disable-sorting="disableSorting"
@@ -29,8 +30,9 @@
       </template>
       <!-- Create action -->
       <template #toolbar-button>
+        <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside"
+          :disabled="!useActionOutside || !hasData"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
@@ -715,10 +717,21 @@ const confirmDelete = async (): Promise<void> => {
   }
 }
 
+// Remount the table when hasData changes
+const key = ref(1)
+const hasData = ref(false)
+const isLoaded = ref(false)
+
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
+  // if table is populated, show the Create button
+  if (fetcherState.value.response?.data?.length && !isLoaded.value) {
+    hasData.value = true
+    isLoaded.value = true
+    key.value++
+  }
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = t('errors.general')
     // Emit the error for the host app