fix(entities-*): revamp hide-toolbar logic

Kong · Nov 19, 2024 · 04577da · 04577da
1 parent ad8708b
commit 04577da
Show file tree

Hide file tree

Showing 18 changed files with 253 additions and 265 deletions.
diff --git a/packages/entities/entities-certificates/src/components/CACertificateList.vue b/packages/entities/entities-certificates/src/components/CACertificateList.vue
@@ -8,7 +8,6 @@
       :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"
@@ -33,7 +32,6 @@
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
             <KButton
-              v-show="hasData"
               appearance="primary"
               data-testid="toolbar-add-ca-certificate"
               :size="useActionOutside ? 'medium' : 'large'"
@@ -290,8 +288,6 @@ 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
@@ -422,23 +418,10 @@ const confirmDelete = async (): Promise<void> => {
   }
 }
 
-const hasData = ref(false)
-
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
-  // reset `hasData` to show/hide the teleported Create button
-  if (Array.isArray(state?.response?.data)) {
-    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
@@ -8,7 +8,6 @@
       :error-message="errorMessage"
       :fetcher="fetcher"
       :fetcher-cache-key="fetcherCacheKey"
-      :hide-toolbar="hideTableToolbar"
       pagination-type="offset"
       preferences-storage-key="kong-ui-entities-certificates-list"
       :query="filterQuery"
@@ -33,7 +32,6 @@
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
             <KButton
-              v-show="hasData"
               appearance="primary"
               data-testid="toolbar-add-certificate"
               :size="useActionOutside ? 'medium' : 'large'"
@@ -322,8 +320,6 @@ 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
@@ -469,23 +465,10 @@ const confirmDelete = async (): Promise<void> => {
   }
 }
 
-const hasData = ref(false)
-
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
-  // reset `hasData` to show/hide the teleported Create button
-  if (Array.isArray(state?.response?.data)) {
-    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('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
@@ -9,7 +9,6 @@
       :error-message="errorMessage"
       :fetcher="fetcher"
       :fetcher-cache-key="fetcherCacheKey"
-      :hide-toolbar="hideTableToolbar"
       pagination-type="offset"
       preferences-storage-key="kong-ui-entities-consumer-credentials-list"
       :table-headers="tableHeaders"
@@ -24,7 +23,6 @@
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
             <KButton
-              v-show="hasData"
               appearance="primary"
               data-testid="toolbar-add-credential"
               :size="useActionOutside ? 'medium' : 'large'"
@@ -341,8 +339,6 @@ 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 action
@@ -440,24 +436,10 @@ const confirmDelete = async (): Promise<void> => {
   }
 }
 
-// Remount the table when hasData changes
-const hasData = ref(false)
-
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
-  // reset `hasData` to show/hide the teleported Create button
-  if (Array.isArray(state?.response?.data)) {
-    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('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
@@ -9,7 +9,6 @@
       :error-message="errorMessage"
       :fetcher="fetcher"
       :fetcher-cache-key="fetcherCacheKey"
-      :hide-toolbar="hideTableToolbar"
       pagination-type="offset"
       :preferences-storage-key="preferencesStorageKey"
       :query="filterQuery"
@@ -37,7 +36,6 @@
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
             <KButton
-              v-show="hasData"
               appearance="primary"
               data-testid="toolbar-add-consumer-group"
               :size="useActionOutside ? 'medium' : 'large'"
@@ -355,8 +353,6 @@ 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
@@ -559,23 +555,10 @@ const exitGroups = async (): Promise<void> => {
   }
 }
 
-const hasData = ref(false)
-
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
-  // reset `hasData` to show/hide the teleported Create button
-  if (Array.isArray(state?.response?.data)) {
-    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('consumer_groups.errors.general'),

diff --git a/packages/entities/entities-consumers/src/components/ConsumerList.vue b/packages/entities/entities-consumers/src/components/ConsumerList.vue
@@ -9,7 +9,6 @@
       :fetcher="fetcher"
       :fetcher-cache-key="fetcherCacheKey"
       :hide-pagination="isConsumerGroupPage && !config.paginatedEndpoint"
-      :hide-toolbar="hideTableToolbar"
       pagination-type="offset"
       :preferences-storage-key="preferencesStorageKey"
       :query="filterQuery"
@@ -37,7 +36,6 @@
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
             <KButton
-              v-show="hasData"
               appearance="primary"
               data-testid="toolbar-add-consumer"
               :size="useActionOutside ? 'medium' : 'large'"
@@ -345,8 +343,6 @@ const getRowValue = (val: any) => {
  * 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
@@ -563,23 +559,10 @@ const removeConsumers = async (): Promise<void> => {
   }
 }
 
-const hasData = ref(false)
-
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
-  // reset `hasData` to show/hide the teleported Create button
-  if (Array.isArray(state?.response?.data)) {
-    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('consumers.errors.general'),

diff --git a/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue b/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
@@ -9,7 +9,6 @@
       :error-message="errorMessage"
       :fetcher="fetcher"
       :fetcher-cache-key="fetchCacheKey"
-      :hide-toolbar="hideTableToolbar"
       pagination-type="offset"
       preferences-storage-key="kong-ui-entities-gateway-services-list"
       :query="filterQuery"
@@ -34,7 +33,6 @@
           <PermissionsWrapper :auth-function="() => canCreate()">
             <!-- Hide Create button if table is empty -->
             <KButton
-              v-show="hasData"
               appearance="primary"
               data-testid="toolbar-add-gateway-service"
               :size="useActionOutside ? 'medium' : 'large'"
@@ -346,8 +344,6 @@ 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)
 
 const emptyStateOptions = computed((): EmptyStateOptions => {
   return {
@@ -553,23 +549,10 @@ const deleteRow = async (): Promise<void> => {
   }
 }
 
-const hasData = ref(false)
-
 /**
  * Watchers
  */
 watch(fetcherState, (state) => {
-  // reset `hasData` to show/hide the teleported Create button
-  if (Array.isArray(state?.response?.data)) {
-    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'),