Skip to content

Commit 9322956

Browse files
JustineoJustineo
authored
fix(entities-*): revamp hide toolbar logic (#1790)
* fix(entities-*): hide toolbar on initial load * fix(entities-*): revamp hide-toolbar logic * fix(entities-*): fix lint error * fix(entities-*): fix hide toolbar logic * fix(entities-*): fix lint error * fix(entities-*): fix hide toolbar * fix(entities-*): reset hasRecord correctly
1 parent de00fba commit 9322956

File tree

18 files changed

+53
-247
lines changed

18 files changed

+53
-247
lines changed

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

-8
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@
3232
<PermissionsWrapper :auth-function="() => canCreate()">
3333
<!-- Hide Create button if table is empty -->
3434
<KButton
35-
v-show="hasData"
3635
appearance="primary"
3736
data-testid="toolbar-add-ca-certificate"
3837
:size="useActionOutside ? 'medium' : 'large'"
@@ -419,17 +418,10 @@ const confirmDelete = async (): Promise<void> => {
419418
}
420419
}
421420
422-
const hasData = ref(false)
423-
424421
/**
425422
* Watchers
426423
*/
427424
watch(fetcherState, (state) => {
428-
// reset `hasData` to show/hide the teleported Create button
429-
if (Array.isArray(state?.response?.data)) {
430-
hasData.value = state.response!.data.length > 0
431-
}
432-
433425
if (state.status === FetcherStatus.Error) {
434426
errorMessage.value = {
435427
title: t('ca-certificates.errors.general'),

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

-17
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
:error-message="errorMessage"
99
:fetcher="fetcher"
1010
:fetcher-cache-key="fetcherCacheKey"
11-
:hide-toolbar="hideTableToolbar"
1211
pagination-type="offset"
1312
preferences-storage-key="kong-ui-entities-certificates-list"
1413
:query="filterQuery"
@@ -33,7 +32,6 @@
3332
<PermissionsWrapper :auth-function="() => canCreate()">
3433
<!-- Hide Create button if table is empty -->
3534
<KButton
36-
v-show="hasData"
3735
appearance="primary"
3836
data-testid="toolbar-add-certificate"
3937
:size="useActionOutside ? 'medium' : 'large'"
@@ -322,8 +320,6 @@ const resetPagination = (): void => {
322320
* loading, Error, Empty state
323321
*/
324322
const errorMessage = ref<TableErrorMessage>(null)
325-
// hide table toolbar in initial loading state or when no records are found
326-
const hideTableToolbar = ref<boolean>(false)
327323
328324
/**
329325
* Copy ID action
@@ -469,23 +465,10 @@ const confirmDelete = async (): Promise<void> => {
469465
}
470466
}
471467
472-
const hasData = ref(false)
473-
474468
/**
475469
* Watchers
476470
*/
477471
watch(fetcherState, (state) => {
478-
// reset `hasData` to show/hide the teleported Create button
479-
if (Array.isArray(state?.response?.data)) {
480-
hasData.value = state.response!.data.length > 0
481-
}
482-
483-
if (state.status === FetcherStatus.NoRecords) {
484-
hideTableToolbar.value = true
485-
} else {
486-
hideTableToolbar.value = false
487-
}
488-
489472
if (state.status === FetcherStatus.Error) {
490473
errorMessage.value = {
491474
title: t('certificates.errors.general'),

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

-18
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
:error-message="errorMessage"
1010
:fetcher="fetcher"
1111
:fetcher-cache-key="fetcherCacheKey"
12-
:hide-toolbar="hideTableToolbar"
1312
pagination-type="offset"
1413
preferences-storage-key="kong-ui-entities-consumer-credentials-list"
1514
:table-headers="tableHeaders"
@@ -24,7 +23,6 @@
2423
<PermissionsWrapper :auth-function="() => canCreate()">
2524
<!-- Hide Create button if table is empty -->
2625
<KButton
27-
v-show="hasData"
2826
appearance="primary"
2927
data-testid="toolbar-add-credential"
3028
:size="useActionOutside ? 'medium' : 'large'"
@@ -341,8 +339,6 @@ const resetPagination = (): void => {
341339
* loading, Error, Empty state
342340
*/
343341
const errorMessage = ref<TableErrorMessage>(null)
344-
// hide table toolbar in initial loading state or when no records are found
345-
const hideTableToolbar = ref<boolean>(false)
346342
347343
/**
348344
* Copy action
@@ -440,24 +436,10 @@ const confirmDelete = async (): Promise<void> => {
440436
}
441437
}
442438
443-
// Remount the table when hasData changes
444-
const hasData = ref(false)
445-
446439
/**
447440
* Watchers
448441
*/
449442
watch(fetcherState, (state) => {
450-
// reset `hasData` to show/hide the teleported Create button
451-
if (Array.isArray(state?.response?.data)) {
452-
hasData.value = state.response!.data.length > 0
453-
}
454-
455-
if (state.status === FetcherStatus.NoRecords) {
456-
hideTableToolbar.value = true
457-
} else {
458-
hideTableToolbar.value = false
459-
}
460-
461443
if (state.status === FetcherStatus.Error) {
462444
errorMessage.value = {
463445
title: t('credentials.error.general'),

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

-17
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
:error-message="errorMessage"
1010
:fetcher="fetcher"
1111
:fetcher-cache-key="fetcherCacheKey"
12-
:hide-toolbar="hideTableToolbar"
1312
pagination-type="offset"
1413
:preferences-storage-key="preferencesStorageKey"
1514
:query="filterQuery"
@@ -37,7 +36,6 @@
3736
<PermissionsWrapper :auth-function="() => canCreate()">
3837
<!-- Hide Create button if table is empty -->
3938
<KButton
40-
v-show="hasData"
4139
appearance="primary"
4240
data-testid="toolbar-add-consumer-group"
4341
:size="useActionOutside ? 'medium' : 'large'"
@@ -355,8 +353,6 @@ const resetPagination = (): void => {
355353
* loading, Error, Empty state
356354
*/
357355
const errorMessage = ref<TableErrorMessage>(null)
358-
// hide table toolbar in initial loading state or when no records are found
359-
const hideTableToolbar = ref<boolean>(false)
360356
361357
/**
362358
* Copy ID action
@@ -559,23 +555,10 @@ const exitGroups = async (): Promise<void> => {
559555
}
560556
}
561557
562-
const hasData = ref(false)
563-
564558
/**
565559
* Watchers
566560
*/
567561
watch(fetcherState, (state) => {
568-
// reset `hasData` to show/hide the teleported Create button
569-
if (Array.isArray(state?.response?.data)) {
570-
hasData.value = state.response!.data.length > 0
571-
}
572-
573-
if (state.status === FetcherStatus.NoRecords) {
574-
hideTableToolbar.value = true
575-
} else {
576-
hideTableToolbar.value = false
577-
}
578-
579562
if (state.status === FetcherStatus.Error) {
580563
errorMessage.value = {
581564
title: t('consumer_groups.errors.general'),

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

-17
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
:fetcher="fetcher"
1010
:fetcher-cache-key="fetcherCacheKey"
1111
:hide-pagination="isConsumerGroupPage && !config.paginatedEndpoint"
12-
:hide-toolbar="hideTableToolbar"
1312
pagination-type="offset"
1413
:preferences-storage-key="preferencesStorageKey"
1514
:query="filterQuery"
@@ -37,7 +36,6 @@
3736
<PermissionsWrapper :auth-function="() => canCreate()">
3837
<!-- Hide Create button if table is empty -->
3938
<KButton
40-
v-show="hasData"
4139
appearance="primary"
4240
data-testid="toolbar-add-consumer"
4341
:size="useActionOutside ? 'medium' : 'large'"
@@ -345,8 +343,6 @@ const getRowValue = (val: any) => {
345343
* loading, Error, Empty state
346344
*/
347345
const errorMessage = ref<TableErrorMessage>(null)
348-
// hide table toolbar in initial loading state or when no records are found
349-
const hideTableToolbar = ref<boolean>(false)
350346
351347
/**
352348
* Copy ID action
@@ -563,23 +559,10 @@ const removeConsumers = async (): Promise<void> => {
563559
}
564560
}
565561
566-
const hasData = ref(false)
567-
568562
/**
569563
* Watchers
570564
*/
571565
watch(fetcherState, (state) => {
572-
// reset `hasData` to show/hide the teleported Create button
573-
if (Array.isArray(state?.response?.data)) {
574-
hasData.value = state.response!.data.length > 0
575-
}
576-
577-
if (state.status === FetcherStatus.NoRecords) {
578-
hideTableToolbar.value = true
579-
} else {
580-
hideTableToolbar.value = false
581-
}
582-
583566
if (state.status === FetcherStatus.Error) {
584567
errorMessage.value = {
585568
title: t('consumers.errors.general'),

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

-17
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
:error-message="errorMessage"
1010
:fetcher="fetcher"
1111
:fetcher-cache-key="fetchCacheKey"
12-
:hide-toolbar="hideTableToolbar"
1312
pagination-type="offset"
1413
preferences-storage-key="kong-ui-entities-gateway-services-list"
1514
:query="filterQuery"
@@ -34,7 +33,6 @@
3433
<PermissionsWrapper :auth-function="() => canCreate()">
3534
<!-- Hide Create button if table is empty -->
3635
<KButton
37-
v-show="hasData"
3836
appearance="primary"
3937
data-testid="toolbar-add-gateway-service"
4038
:size="useActionOutside ? 'medium' : 'large'"
@@ -346,8 +344,6 @@ const resetPagination = (): void => {
346344
* loading, Error, Empty state
347345
*/
348346
const errorMessage = ref<TableErrorMessage>(null)
349-
// hide table toolbar in initial loading state or when no records are found
350-
const hideTableToolbar = ref<boolean>(false)
351347
352348
const emptyStateOptions = computed((): EmptyStateOptions => {
353349
return {
@@ -553,23 +549,10 @@ const deleteRow = async (): Promise<void> => {
553549
}
554550
}
555551
556-
const hasData = ref(false)
557-
558552
/**
559553
* Watchers
560554
*/
561555
watch(fetcherState, (state) => {
562-
// reset `hasData` to show/hide the teleported Create button
563-
if (Array.isArray(state?.response?.data)) {
564-
hasData.value = state.response!.data.length > 0
565-
}
566-
567-
if (state.status === FetcherStatus.NoRecords) {
568-
hideTableToolbar.value = true
569-
} else {
570-
hideTableToolbar.value = false
571-
}
572-
573556
if (state.status === FetcherStatus.Error) {
574557
errorMessage.value = {
575558
title: t('errors.general'),

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

-17
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
:error-message="errorMessage"
99
:fetcher="fetcher"
1010
:fetcher-cache-key="fetcherCacheKey"
11-
:hide-toollbar="hideTableToolbar"
1211
pagination-type="offset"
1312
preferences-storage-key="kong-ui-entities-key-sets-list"
1413
:query="filterQuery"
@@ -33,7 +32,6 @@
3332
<PermissionsWrapper :auth-function="() => canCreate()">
3433
<!-- Hide Create button if table is empty -->
3534
<KButton
36-
v-show="hasData"
3735
appearance="primary"
3836
data-testid="toolbar-add-key-set"
3937
:size="useActionOutside ? 'medium' : 'large'"
@@ -280,8 +278,6 @@ const resetPagination = (): void => {
280278
* loading, Error, Empty state
281279
*/
282280
const errorMessage = ref<TableErrorMessage>(null)
283-
// hide table toolbar in initial loading state or when no records are found
284-
const hideTableToolbar = ref<boolean>(false)
285281
286282
/**
287283
* Copy action
@@ -414,23 +410,10 @@ const confirmDelete = async (): Promise<void> => {
414410
}
415411
}
416412
417-
const hasData = ref(false)
418-
419413
/**
420414
* Watchers
421415
*/
422416
watch(fetcherState, (state) => {
423-
// reset `hasData` to show/hide the teleported Create button
424-
if (Array.isArray(state?.response?.data)) {
425-
hasData.value = state.response!.data.length > 0
426-
}
427-
428-
if (state.status === FetcherStatus.NoRecords) {
429-
hideTableToolbar.value = true
430-
} else {
431-
hideTableToolbar.value = false
432-
}
433-
434417
if (state.status === FetcherStatus.Error) {
435418
errorMessage.value = {
436419
title: t('keySets.errors.general'),

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

-17
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
:error-message="errorMessage"
99
:fetcher="fetcher"
1010
:fetcher-cache-key="fetcherCacheKey"
11-
:hide-toolbar="hideTableToolbar"
1211
pagination-type="offset"
1312
preferences-storage-key="kong-ui-entities-keys-list"
1413
:query="filterQuery"
@@ -33,7 +32,6 @@
3332
<PermissionsWrapper :auth-function="() => canCreate()">
3433
<!-- Hide Create button if table is empty -->
3534
<KButton
36-
v-show="hasData"
3735
appearance="primary"
3836
data-testid="toolbar-add-key"
3937
:size="useActionOutside ? 'medium' : 'large'"
@@ -287,8 +285,6 @@ const resetPagination = (): void => {
287285
* loading, Error, Empty state
288286
*/
289287
const errorMessage = ref<TableErrorMessage>(null)
290-
// hide table toolbar in initial loading state or when no records are found
291-
const hideTableToolbar = ref<boolean>(false)
292288
293289
/**
294290
* Copy action
@@ -421,23 +417,10 @@ const confirmDelete = async (): Promise<void> => {
421417
}
422418
}
423419
424-
const hasData = ref(false)
425-
426420
/**
427421
* Watchers
428422
*/
429423
watch(fetcherState, (state) => {
430-
// reset `hasData` to show/hide the teleported Create button
431-
if (Array.isArray(state?.response?.data)) {
432-
hasData.value = state.response!.data.length > 0
433-
}
434-
435-
if (state.status === FetcherStatus.NoRecords) {
436-
hideTableToolbar.value = true
437-
} else {
438-
hideTableToolbar.value = false
439-
}
440-
441424
if (state.status === FetcherStatus.Error) {
442425
errorMessage.value = {
443426
title: t('keys.errors.general'),

0 commit comments

Comments
 (0)