ui: Save the tab and re-activate it after submitting the form. (#4962)

* save the tab and reactivate it after submitting the form.

* fix for quota resource

Fixes #4961

ui/src/components/view/ResourceView.vue

@@ -83,6 +83,10 @@ export default {
           component: DetailsTab
         }]
       }
+    },
+    historyTab: {
+      type: String,
+      default: ''
     }
   },
   data () {
@@ -128,6 +132,7 @@ export default {
           )
         }).join('&')
       )
+      this.$emit('onTabChange', key)
     },
     showTab (tab) {
       if ('networkServiceFilter' in tab) {
@@ -158,7 +163,20 @@ export default {
       }
     },
     setActiveTab () {
-      this.activeTab = this.$route.query.tab ? this.$route.query.tab : this.tabs[0].name
+      if (this.$route.query.tab) {
+        this.activeTab = this.$route.query.tab
+        return
+      }
+      if (!this.historyTab || !this.$route.meta.tabs || this.$route.meta.tabs.length === 0) {
+        this.activeTab = this.tabs[0].name
+        return
+      }
+      const tabIdx = this.$route.meta.tabs.findIndex(tab => tab.name === this.historyTab)
+      if (tabIdx === -1) {
+        this.activeTab = this.tabs[0].name
+      } else {
+        this.activeTab = this.historyTab
+      }
     }
   }
 }

ui/src/views/network/PublicIpResource.vue

@@ -33,7 +33,9 @@
           v-if="isPublicIpAddress && 'id' in resource"
           :loading="loading"
           :resource="resource"
-          :tabs="tabs" />
+          :historyTab="activeTab"
+          :tabs="tabs"
+          @onTabChange="(tab) => { this.activeTab = tab }" />
       </div>
     </autogen-view>
   </div>
@@ -63,7 +65,8 @@ export default {
       tabs: [{
         name: 'details',
         component: () => import('@/components/view/DetailsTab.vue')
-      }]
+      }],
+      activeTab: ''
     }
   },
   mixins: [mixinDevice],

ui/src/views/plugins/quota/QuotaSummaryResource.vue

@@ -19,7 +19,9 @@
   <resource-view
     :loading="loading"
     :resource="quotaResource"
-    :tabs="tabs"/>
+    :tabs="tabs"
+    :historyTab="activeTab"
+    @onTabChange="(tab) => { this.activeTab = tab }"/>
 </template>
 
 <script>
@@ -48,7 +50,8 @@ export default {
       loading: false,
       quotaResource: {},
       networkService: null,
-      pattern: 'YYYY-MM-DD'
+      pattern: 'YYYY-MM-DD',
+      activeTab: ''
     }
   },
   created () {