fix(*): avoid jump of cta button for all entities

Kong · Nov 20, 2023 · f733ba5 · f733ba5
1 parent 73e7dbe
commit f733ba5
Show file tree

Hide file tree

Showing 14 changed files with 54 additions and 111 deletions.
diff --git a/packages/entities/entities-certificates/src/components/CACertificateList.vue b/packages/entities/entities-certificates/src/components/CACertificateList.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="kong-ui-entities-ca-certificates-list">
     <EntityBaseTable
-      :key="key"
       :cache-identifier="cacheIdentifier"
       disable-pagination-page-jump
       :disable-sorting="disableSorting"
@@ -30,11 +29,12 @@
       <template #toolbar-button>
         <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside || !hasData"
+          :disabled="!useActionOutside"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <KButton
+              v-show="hasData"
               appearance="primary"
               data-testid="toolbar-add-ca-certificate"
               icon="plus"
@@ -427,20 +427,15 @@ 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) {
+  if (state.status !== FetcherStatus.NoResults && state.status !== FetcherStatus.Loading && state.status !== FetcherStatus.Error) {
     hasData.value = true
-    isLoaded.value = true
-    key.value++
   }
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = t('ca-certificates.errors.general')

diff --git a/packages/entities/entities-certificates/src/components/CertificateList.vue b/packages/entities/entities-certificates/src/components/CertificateList.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="kong-ui-entities-certificates-list">
     <EntityBaseTable
-      :key="key"
       :cache-identifier="cacheIdentifier"
       disable-pagination-page-jump
       :disable-sorting="disableSorting"
@@ -30,11 +29,12 @@
       <template #toolbar-button>
         <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside || !hasData"
+          :disabled="!useActionOutside"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <KButton
+              v-show="hasData"
               appearance="primary"
               data-testid="toolbar-add-certificate"
               icon="plus"
@@ -494,20 +494,15 @@ 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) {
+  if (state.status !== FetcherStatus.NoResults && state.status !== FetcherStatus.Loading && state.status !== FetcherStatus.Error) {
     hasData.value = true
-    isLoaded.value = true
-    key.value++
   }
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = t('certificates.errors.general')

diff --git a/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue b/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="kong-ui-entities-consumer-credentials-list">
     <EntityBaseTable
-      :key="key"
       :cache-identifier="cacheIdentifier"
       disable-pagination-page-jump
       disable-row-click
@@ -21,11 +20,12 @@
       <template #toolbar-button>
         <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside || !hasData"
+          :disabled="!useActionOutside"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <KButton
+              v-show="hasData"
               appearance="primary"
               data-testid="toolbar-add-credential"
               icon="plus"
@@ -456,19 +456,15 @@ 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) {
+  if (state.status !== FetcherStatus.NoResults && state.status !== FetcherStatus.Loading && state.status !== FetcherStatus.Error) {
     hasData.value = true
-    isLoaded.value = true
-    key.value++
   }
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = t('credentials.error.general')

diff --git a/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue b/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="kong-ui-entities-consumer-groups-list">
     <EntityBaseTable
-      :key="key"
       :cache-identifier="cacheIdentifier"
       :disable-pagination="isConsumerPage"
       disable-pagination-page-jump
@@ -34,11 +33,12 @@
       <template #toolbar-button>
         <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside || !hasData"
+          :disabled="!useActionOutside"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <KButton
+              v-show="hasData"
               appearance="primary"
               data-testid="toolbar-add-consumer-group"
               icon="plus"
@@ -555,21 +555,17 @@ 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) {
+  if (state.status !== FetcherStatus.NoResults && state.status !== FetcherStatus.Loading && state.status !== FetcherStatus.Error) {
     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

diff --git a/packages/entities/entities-consumers/src/components/ConsumerList.vue b/packages/entities/entities-consumers/src/components/ConsumerList.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="kong-ui-entities-consumers-list">
     <EntityBaseTable
-      :key="key"
       :cache-identifier="cacheIdentifier"
       :disable-pagination="isConsumerGroupPage"
       disable-pagination-page-jump
@@ -34,11 +33,12 @@
       <template #toolbar-button>
         <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside || !hasData"
+          :disabled="!useActionOutside"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <KButton
+              v-show="hasData"
               appearance="primary"
               data-testid="toolbar-add-consumer"
               icon="plus"
@@ -565,21 +565,17 @@ 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) {
+  if (state.status !== FetcherStatus.NoResults && state.status !== FetcherStatus.Loading && state.status !== FetcherStatus.Error) {
     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

diff --git a/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue b/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="kong-ui-entities-gateway-services-list">
     <EntityBaseTable
-      :key="key"
       :cache-identifier="cacheIdentifier"
       disable-pagination-page-jump
       :disable-sorting="disableSorting"
@@ -30,11 +29,12 @@
       <template #toolbar-button>
         <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside || !hasData"
+          :disabled="!useActionOutside"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <KButton
+              v-show="hasData"
               appearance="primary"
               data-testid="toolbar-add-gateway-service"
               icon="plus"
@@ -516,21 +516,18 @@ 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) {
+  if (state.status !== FetcherStatus.NoResults && state.status !== FetcherStatus.Loading && state.status !== FetcherStatus.Error) {
     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

diff --git a/packages/entities/entities-key-sets/src/components/KeySetList.vue b/packages/entities/entities-key-sets/src/components/KeySetList.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="kong-ui-entities-key-sets-list">
     <EntityBaseTable
-      :key="key"
       :cache-identifier="cacheIdentifier"
       disable-pagination-page-jump
       :disable-sorting="disableSorting"
@@ -30,11 +29,12 @@
       <template #toolbar-button>
         <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside || !hasData"
+          :disabled="!useActionOutside"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <KButton
+              v-show="hasData"
               appearance="primary"
               data-testid="toolbar-add-key-set"
               icon="plus"
@@ -430,21 +430,17 @@ 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) {
+  if (state.status !== FetcherStatus.NoResults && state.status !== FetcherStatus.Loading && state.status !== FetcherStatus.Error) {
     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

diff --git a/packages/entities/entities-keys/src/components/KeyList.vue b/packages/entities/entities-keys/src/components/KeyList.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="kong-ui-entities-keys-list">
     <EntityBaseTable
-      :key="key"
       :cache-identifier="cacheIdentifier"
       disable-pagination-page-jump
       :disable-sorting="disableSorting"
@@ -30,11 +29,12 @@
       <template #toolbar-button>
         <!-- Hide Create button if table is empty -->
         <Teleport
-          :disabled="!useActionOutside || !hasData"
+          :disabled="!useActionOutside"
           to="#kong-ui-app-page-header-action-button"
         >
           <PermissionsWrapper :auth-function="() => canCreate()">
             <KButton
+              v-show="hasData"
               appearance="primary"
               data-testid="toolbar-add-key"
               icon="plus"
@@ -439,21 +439,17 @@ 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) {
+  if (state.status !== FetcherStatus.NoResults && state.status !== FetcherStatus.Loading && state.status !== FetcherStatus.Error) {
     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