fix(entity-consumers): optimize consumer data fetching in `<AddConsum…

…erModal />` (#935)

Previously, `<AddConsumerModal />` and `<AddToGroupModal />` triggers `loadItems`
during `onBeforeMount`, leading to premature and unnecessary data fetching,
especially in scenarios where only browsing the list is required.

This fetching strategy also resulted in outdated, non-refreshable data.
To resolve this, `loadItems` has been shifted to a `watch` block, ensuring timely
and relevant data fetching.

Additionally, the sandbox page now references `VITE_KONG_MANAGER_CONSUMER_GROUP_ID`
for dynamic consumer group ID handling, replacing the previously hardcoded value.

.env.development.local.example

@@ -28,6 +28,7 @@ VITE_KONNECT_CONTROL_PLANE_ID=
 
 # Kong Manager Consumer Id
 VITE_KONG_MANAGER_CONSUMER_ID=
+VITE_KONG_MANAGER_CONSUMER_GROUP_ID=
 
 # Konnect Consumer Id
 VITE_KONNECT_CONSUMER_ID=

packages/entities/entities-consumer-groups/sandbox/pages/ConsumerGroupListPage.vue

@@ -68,7 +68,7 @@ const kongManagerConfig = ref<KongManagerConsumerGroupListConfig>({
   apiBaseUrl: '/kong-manager', // For local dev server proxy
   isExactMatch: false,
   // Uncomment to test Consumer -> Consumer Groups
-  // consumerId: 'b20b1848-6640-4200-9102-73a184de976e',
+  // consumerId: import.meta.env.VITE_KONG_MANAGER_CONSUMER_ID,
   // consumerUsername: 'c-1',
   createRoute: { name: 'create-consumer-group' },
   getViewRoute: (id: string) => ({ name: 'view-consumer-group', params: { id } }),

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

@@ -55,7 +55,7 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { computed, ref, watch, onBeforeMount } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type {
   KongManagerConsumerGroupListConfig,
   KonnectConsumerGroupListConfig,
@@ -253,10 +253,11 @@ watch(availableConsumerGroups, () => {
   consumerGroupsSelectKey.value++
 }, { immediate: true, deep: true })
 
-onBeforeMount(async () => {
-  // load consumer groups
-  await loadItems()
-})
+watch(() => props.visible, () => {
+  if (props.visible) {
+    loadItems() // load consumer groups
+  }
+}, { immediate: true })
 </script>
 
 <style lang="scss" scoped>

packages/entities/entities-consumers/sandbox/pages/ConsumerListPage.vue

@@ -72,7 +72,7 @@ const kongManagerConfig = ref<KongManagerConsumerListConfig>({
   isExactMatch: false,
   createRoute: { name: 'create-consumer' },
   // Uncomment to test Consumer Groups -> Consumers
-  consumerGroupId: '0de87974-352c-4054-8969-238cdd82a57f',
+  // consumerGroupId: import.meta.env.VITE_KONG_MANAGER_CONSUMER_GROUP_ID,
   // consumerGroupName: 'Group 1',
   getViewRoute: (id: string) => ({ name: 'view-consumer', params: { id } }),
   getEditRoute: (id: string) => ({ name: 'edit-consumer', params: { id } }),

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

@@ -67,7 +67,7 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { computed, ref, watch, onBeforeMount } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type {
   KongManagerConsumerListConfig,
   KonnectConsumerListConfig,
@@ -268,10 +268,11 @@ watch(availableConsumers, () => {
   consumersSelectKey.value++
 }, { immediate: true, deep: true })
 
-onBeforeMount(async () => {
-  // load consumers
-  await loadItems()
-})
+watch(() => props.visible, () => {
+  if (props.visible) {
+    loadItems() // load consumers
+  }
+}, { immediate: true })
 </script>
 
 <style lang="scss" scoped>