fix(entities-*): hide toolbar on initial load

Kong · Nov 18, 2024 · ad8708b · ad8708b
1 parent a4fb45e
commit ad8708b
Show file tree

Hide file tree

Showing 15 changed files with 32 additions and 14 deletions.
diff --git a/packages/entities/entities-certificates/src/components/CACertificateList.vue b/packages/entities/entities-certificates/src/components/CACertificateList.vue
@@ -8,6 +8,7 @@
       :error-message="errorMessage"
       :fetcher="fetcher"
       :fetcher-cache-key="fetcherCacheKey"
+      :hide-toolbar="hideTableToolbar"
       pagination-type="offset"
       preferences-storage-key="kong-ui-entities-ca-certificates-list"
       :query="filterQuery"
@@ -289,6 +290,8 @@ const resetPagination = (): void => {
  * loading, Error, Empty state
  */
 const errorMessage = ref<TableErrorMessage>(null)
+// hide table toolbar in initial loading state or when no records are found
+const hideTableToolbar = ref<boolean>(false)
 
 /**
  * Copy ID action
@@ -430,6 +433,12 @@ watch(fetcherState, (state) => {
     hasData.value = state.response!.data.length > 0
   }
 
+  if (state.status === FetcherStatus.InitialLoad || state.status === FetcherStatus.NoRecords) {
+    hideTableToolbar.value = true
+  } else {
+    hideTableToolbar.value = false
+  }
+
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = {
       title: 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
@@ -480,7 +480,7 @@ watch(fetcherState, (state) => {
     hasData.value = state.response!.data.length > 0
   }
 
-  if (state.status === FetcherStatus.NoRecords) {
+  if (state.status === FetcherStatus.InitialLoad || state.status === FetcherStatus.NoRecords) {
     hideTableToolbar.value = true
   } else {
     hideTableToolbar.value = false

diff --git a/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue b/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
@@ -452,7 +452,7 @@ watch(fetcherState, (state) => {
     hasData.value = state.response!.data.length > 0
   }
 
-  if (state.status === FetcherStatus.NoRecords) {
+  if (state.status === FetcherStatus.InitialLoad || state.status === FetcherStatus.NoRecords) {
     hideTableToolbar.value = true
   } else {
     hideTableToolbar.value = false

diff --git a/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue b/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue
@@ -570,7 +570,7 @@ watch(fetcherState, (state) => {
     hasData.value = state.response!.data.length > 0
   }
 
-  if (state.status === FetcherStatus.NoRecords) {
+  if (state.status === FetcherStatus.InitialLoad || state.status === FetcherStatus.NoRecords) {
     hideTableToolbar.value = true
   } else {
     hideTableToolbar.value = false

diff --git a/packages/entities/entities-consumers/src/components/ConsumerList.vue b/packages/entities/entities-consumers/src/components/ConsumerList.vue
@@ -574,7 +574,7 @@ watch(fetcherState, (state) => {
     hasData.value = state.response!.data.length > 0
   }
 
-  if (state.status === FetcherStatus.NoRecords) {
+  if (state.status === FetcherStatus.InitialLoad || state.status === FetcherStatus.NoRecords) {
     hideTableToolbar.value = true
   } else {
     hideTableToolbar.value = false

diff --git a/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue b/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
@@ -564,7 +564,7 @@ watch(fetcherState, (state) => {
     hasData.value = state.response!.data.length > 0
   }
 
-  if (state.status === FetcherStatus.NoRecords) {
+  if (state.status === FetcherStatus.InitialLoad || state.status === FetcherStatus.NoRecords) {
     hideTableToolbar.value = true
   } else {
     hideTableToolbar.value = false

diff --git a/packages/entities/entities-key-sets/src/components/KeySetList.vue b/packages/entities/entities-key-sets/src/components/KeySetList.vue
@@ -8,7 +8,7 @@
       :error-message="errorMessage"
       :fetcher="fetcher"
       :fetcher-cache-key="fetcherCacheKey"
-      :hide-toollbar="hideTableToolbar"
+      :hide-toolbar="hideTableToolbar"
       pagination-type="offset"
       preferences-storage-key="kong-ui-entities-key-sets-list"
       :query="filterQuery"
@@ -425,7 +425,7 @@ watch(fetcherState, (state) => {
     hasData.value = state.response!.data.length > 0
   }
 
-  if (state.status === FetcherStatus.NoRecords) {
+  if (state.status === FetcherStatus.InitialLoad || state.status === FetcherStatus.NoRecords) {
     hideTableToolbar.value = true
   } else {
     hideTableToolbar.value = false

diff --git a/packages/entities/entities-keys/src/components/KeyList.vue b/packages/entities/entities-keys/src/components/KeyList.vue
@@ -432,7 +432,7 @@ watch(fetcherState, (state) => {
     hasData.value = state.response!.data.length > 0
   }
 
-  if (state.status === FetcherStatus.NoRecords) {
+  if (state.status === FetcherStatus.InitialLoad || state.status === FetcherStatus.NoRecords) {
     hideTableToolbar.value = true
   } else {
     hideTableToolbar.value = false

diff --git a/packages/entities/entities-plugins/src/components/PluginList.vue b/packages/entities/entities-plugins/src/components/PluginList.vue
@@ -723,7 +723,7 @@ watch(fetcherState, (state) => {
     hasData.value = state.response!.data.length > 0
   }
 
-  if (state.status === FetcherStatus.NoRecords) {
+  if (state.status === FetcherStatus.InitialLoad || state.status === FetcherStatus.NoRecords) {
     hideTableToolbar.value = true
   } else {
     hideTableToolbar.value = false

diff --git a/packages/entities/entities-routes/src/components/RouteList.vue b/packages/entities/entities-routes/src/components/RouteList.vue
@@ -540,7 +540,7 @@ watch(fetcherState, (state) => {
     hasData.value = state.response!.data.length > 0
   }
 
-  if (state.status === FetcherStatus.NoRecords) {
+  if (state.status === FetcherStatus.InitialLoad || state.status === FetcherStatus.NoRecords) {
     hideTableToolbar.value = true
   } else {
     hideTableToolbar.value = false

diff --git a/packages/entities/entities-snis/src/components/SniList.vue b/packages/entities/entities-snis/src/components/SniList.vue
@@ -422,7 +422,7 @@ watch(fetcherState, (state) => {
     hasData.value = state.response!.data.length > 0
   }
 
-  if (state.status === FetcherStatus.NoRecords) {
+  if (state.status === FetcherStatus.InitialLoad || state.status === FetcherStatus.NoRecords) {
     hideTableToolbar.value = true
   } else {
     hideTableToolbar.value = false

diff --git a/packages/entities/entities-upstreams-targets/src/components/TargetsList.vue b/packages/entities/entities-upstreams-targets/src/components/TargetsList.vue
@@ -411,7 +411,7 @@ watch(fetcherState, (state) => {
     hasData.value = state.response!.data.length > 0
   }
 
-  if (state.status === FetcherStatus.NoRecords) {
+  if (state.status === FetcherStatus.InitialLoad || state.status === FetcherStatus.NoRecords) {
     hideTableToolbar.value = true
   } else {
     hideTableToolbar.value = false

diff --git a/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue b/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue
@@ -420,7 +420,7 @@ watch(fetcherState, (state) => {
     hasData.value = state.response!.data.length > 0
   }
 
-  if (state.status === FetcherStatus.NoRecords) {
+  if (state.status === FetcherStatus.InitialLoad || state.status === FetcherStatus.NoRecords) {
     hideTableToolbar.value = true
   } else {
     hideTableToolbar.value = false

diff --git a/packages/entities/entities-vaults/src/components/SecretListInner.vue b/packages/entities/entities-vaults/src/components/SecretListInner.vue
@@ -7,6 +7,7 @@
     :error-message="errorMessage"
     :fetcher="fetcher"
     :fetcher-cache-key="fetcherCacheKey"
+    :hide-toolbar="hideTableToolbar"
     pagination-type="offset"
     preferences-storage-key="kong-ui-entities-secrets-list"
     :query="filterQuery"
@@ -213,6 +214,8 @@ const clearFilter = (): void => {
  * loading, Error, Empty state
  */
 const errorMessage = ref<TableErrorMessage>(null)
+// hide table toolbar in initial loading state or when no records are found
+const hideTableToolbar = ref<boolean>(false)
 
 /**
  * Edit action
@@ -283,6 +286,12 @@ watch(fetcherState, (state) => {
     hasData.value = state.response!.data.length > 0
   }
 
+  if (state.status === FetcherStatus.InitialLoad || state.status === FetcherStatus.NoRecords) {
+    hideTableToolbar.value = true
+  } else {
+    hideTableToolbar.value = false
+  }
+
   if (state.status === FetcherStatus.Error) {
     errorMessage.value = {
       title: t('errors.general'),

diff --git a/packages/entities/entities-vaults/src/components/VaultList.vue b/packages/entities/entities-vaults/src/components/VaultList.vue
@@ -451,7 +451,7 @@ watch(fetcherState, (state) => {
     hasData.value = state.response!.data.length > 0
   }
 
-  if (state.status === FetcherStatus.NoRecords) {
+  if (state.status === FetcherStatus.InitialLoad || state.status === FetcherStatus.NoRecords) {
     hideTableToolbar.value = true
   } else {
     hideTableToolbar.value = false