ui: fix form data double fetch/reset form data by ownership selection (#11705)

* ui: fix form data double fetch/reset form data by ownership selection

Fixes #10832

Author: shwstppr

ui/src/views/compute/DeployVM.vue

@@ -2339,7 +2339,9 @@ export default {
         this.owner.domainid = null
         this.owner.projectid = OwnerOptions.selectedProject
       }
-      this.resetData()
+      if (OwnerOptions.initialized) {
+        this.resetData()
+      }
     },
     fetchZones (zoneId, listZoneAllow) {
       this.zones = []

ui/src/views/compute/wizard/OwnershipSelection.vue

@@ -19,7 +19,7 @@
   <a-form layout="vertical" >
     <a-form-item :label="$t('label.owner.type')">
       <a-select
-        @change="changeDomain"
+        @change="changeAccountTypeOrDomain"
         v-model:value="selectedAccountType"
         defaultValue="account"
         autoFocus
@@ -37,7 +37,7 @@
     </a-form-item>
     <a-form-item :label="$t('label.domain')" required>
       <a-select
-        @change="changeDomain"
+        @change="changeAccountTypeOrDomain"
         v-model:value="selectedDomain"
         showSearch
         optionFilterProp="label"
@@ -136,14 +136,16 @@ export default {
   components: { ResourceIcon },
   data () {
     return {
+      initialized: false,
       domains: [],
       accounts: [],
       projects: [],
       selectedAccountType: this.$store.getters.project?.id ? 'Project' : 'Account',
       selectedDomain: null,
       selectedAccount: null,
       selectedProject: null,
-      loading: false
+      loading: false,
+      requestToken: 0
     }
   },
   props: {
@@ -177,7 +179,7 @@ export default {
           const domainIds = this.domains?.map(domain => domain.id)
           const ownerDomainId = this.$store.getters.project?.domainid || this.$store.getters.userInfo.domainid
           this.selectedDomain = domainIds?.includes(ownerDomainId) ? ownerDomainId : this.domains?.[0]?.id
-          this.changeDomain()
+          this.fetchOwnerData()
         })
         .catch((error) => {
           this.$notifyError(error)
@@ -186,8 +188,13 @@ export default {
           this.loading = false
         })
     },
+    incrementAndGetRequestToken () {
+      this.requestToken += 1
+      return this.requestToken
+    },
     fetchAccounts () {
       this.loading = true
+      const currentToken = this.incrementAndGetRequestToken()
       api('listAccounts', {
         response: 'json',
         domainId: this.selectedDomain,
@@ -196,6 +203,9 @@ export default {
         isrecursive: false
       })
         .then((response) => {
+          if (currentToken !== this.requestToken) {
+            return
+          }
           this.accounts = response.listaccountsresponse.account || []
           if (this.override?.accounts && this.accounts) {
             this.accounts = this.accounts.filter(item => this.override.accounts.has(item.name))
@@ -214,10 +224,12 @@ export default {
         })
         .finally(() => {
           this.loading = false
+          this.initialized = true
         })
     },
     fetchProjects () {
       this.loading = true
+      const currentToken = this.incrementAndGetRequestToken()
       api('listProjects', {
         response: 'json',
         domainId: this.selectedDomain,
@@ -227,6 +239,9 @@ export default {
         isrecursive: false
       })
         .then((response) => {
+          if (currentToken !== this.requestToken) {
+            return
+          }
           this.projects = response.listprojectsresponse.project
           if (this.override?.projects && this.projects) {
             this.projects = this.projects.filter(item => this.override.projects.has(item.id))
@@ -240,9 +255,14 @@ export default {
         })
         .finally(() => {
           this.loading = false
+          this.initialized = true
         })
     },
-    changeDomain () {
+    changeAccountTypeOrDomain () {
+      this.initialized = true
+      this.fetchOwnerData()
+    },
+    fetchOwnerData () {
       if (this.selectedAccountType === 'Account') {
         this.fetchAccounts()
       } else {

ui/src/views/network/CreateIsolatedNetworkForm.vue

@@ -507,7 +507,7 @@ export default {
         this.owner.domainid = null
         this.owner.projectid = OwnerOptions.selectedProject
       }
-      if (isAdminOrDomainAdmin()) {
+      if (OwnerOptions.initialized && isAdminOrDomainAdmin()) {
         this.updateVPCCheckAndFetchNetworkOfferingData()
       }
     },

ui/src/views/network/CreateL2NetworkForm.vue

@@ -309,7 +309,7 @@ export default {
         this.owner.domainid = null
         this.owner.projectid = OwnerOptions.selectedProject
       }
-      if (isAdminOrDomainAdmin()) {
+      if (OwnerOptions.initialized && this.isAdminOrDomainAdmin()) {
         this.updateVPCCheckAndFetchNetworkOfferingData()
       }
     },

ui/src/views/storage/CreateSharedFS.vue

@@ -272,23 +272,21 @@ export default {
     },
     fetchOwnerOptions (OwnerOptions) {
       this.owner = {}
-      console.log('fetching owner')
       if (OwnerOptions.selectedAccountType === 'Account') {
         if (!OwnerOptions.selectedAccount) {
           return
         }
-        console.log('fetched account')
         this.owner.account = OwnerOptions.selectedAccount
         this.owner.domainid = OwnerOptions.selectedDomain
       } else if (OwnerOptions.selectedAccountType === 'Project') {
         if (!OwnerOptions.selectedProject) {
           return
         }
-        console.log('fetched project')
         this.owner.projectid = OwnerOptions.selectedProject
       }
-      console.log('fetched owner')
-      this.fetchData()
+      if (OwnerOptions.initialized) {
+        this.fetchData()
+      }
     },
     fetchData () {
       this.minCpu = store.getters.features.sharedfsvmmincpucount

ui/src/views/storage/CreateVolume.vue

@@ -272,7 +272,9 @@ export default {
         }
         this.owner.projectid = OwnerOptions.selectedProject
       }
-      this.fetchData()
+      if (OwnerOptions.initialized) {
+        this.fetchData()
+      }
     },
     fetchData () {
       if (this.createVolumeFromSnapshot) {