From 82a1ae1c4a85d533dfb2e9d6c39742d4927ef924 Mon Sep 17 00:00:00 2001
From: Nicole Schmidt <nicole.schmidt@scclouds.com.br>
Date: Mon, 28 Apr 2025 14:38:11 -0300
Subject: [PATCH] Selected type on update traffic type is based on chosen type
 in traffic types tab

---
 ui/src/config/section/infra/phynetworks.js      | 5 ++++-
 ui/src/views/infra/network/EditTrafficLabel.vue | 7 ++++---
 ui/src/views/infra/network/TrafficTypesTab.vue  | 6 +++++-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/ui/src/config/section/infra/phynetworks.js b/ui/src/config/section/infra/phynetworks.js
index 578a12516fac..dbec88706faa 100644
--- a/ui/src/config/section/infra/phynetworks.js
+++ b/ui/src/config/section/infra/phynetworks.js
@@ -15,7 +15,7 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { shallowRef, defineAsyncComponent } from 'vue'
+import { shallowRef, defineAsyncComponent, reactive } from 'vue'
 export default {
   name: 'physicalnetwork',
   title: 'label.physical.network',
@@ -131,3 +131,6 @@ export default {
     }
   ]
 }
+export const trafficTypeTab = reactive({
+  index: 0
+})
diff --git a/ui/src/views/infra/network/EditTrafficLabel.vue b/ui/src/views/infra/network/EditTrafficLabel.vue
index f8f44d9d0b62..db8496455179 100644
--- a/ui/src/views/infra/network/EditTrafficLabel.vue
+++ b/ui/src/views/infra/network/EditTrafficLabel.vue
@@ -99,6 +99,7 @@
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
+import { trafficTypeTab } from '@/config/section/infra/phynetworks.js'
 
 export default {
   name: 'EditTrafficLabel',
@@ -150,9 +151,9 @@ export default {
       api('listTrafficTypes', { physicalnetworkid: this.resource.id })
         .then(json => {
           this.trafficTypes = json.listtraffictypesresponse.traffictype || []
-          this.form.id = this.trafficTypes[0].id || undefined
-          this.trafficResource = this.trafficTypes[0] || {}
-          this.traffictype = this.trafficTypes[0].traffictype || undefined
+          this.form.id = this.trafficTypes[trafficTypeTab.index].id || undefined
+          this.trafficResource = this.trafficTypes[trafficTypeTab.index] || {}
+          this.traffictype = this.trafficTypes[trafficTypeTab.index].traffictype || undefined
           this.fillEditFromFieldValues()
         }).catch(error => {
           this.$notification.error({
diff --git a/ui/src/views/infra/network/TrafficTypesTab.vue b/ui/src/views/infra/network/TrafficTypesTab.vue
index 41da48d993c1..0ae86b199881 100644
--- a/ui/src/views/infra/network/TrafficTypesTab.vue
+++ b/ui/src/views/infra/network/TrafficTypesTab.vue
@@ -17,7 +17,7 @@
 
 <template>
   <a-spin :spinning="fetchLoading">
-    <a-tabs :tabPosition="device === 'mobile' ? 'top' : 'left'" :animated="false">
+    <a-tabs :tabPosition="device === 'mobile' ? 'top' : 'left'" :animated="false" @tabClick="onClick">
       <a-tab-pane v-for="(item, index) in traffictypes" :tab="item.traffictype" :key="index">
         <a-popconfirm
           :title="$t('message.confirm.delete.traffic.type')"
@@ -84,6 +84,7 @@ import IpRangesTabPublic from './IpRangesTabPublic'
 import IpRangesTabManagement from './IpRangesTabManagement'
 import IpRangesTabStorage from './IpRangesTabStorage'
 import IpRangesTabGuest from './IpRangesTabGuest'
+import { trafficTypeTab } from '@/config/section/infra/phynetworks.js'
 
 export default {
   name: 'TrafficTypesTab',
@@ -221,6 +222,9 @@ export default {
         this.fetchLoading = false
         this.fetchTrafficTypes()
       })
+    },
+    onClick (trafficType) {
+      trafficTypeTab.index = trafficType
     }
   }
 }