Fix race condition when changing teams while on the application page

- removed the team dispatch on beforeMount and beforeRouteEnter causing the issue
- update how we change the team, updating the team is more than enough while pushing a new route for browser history consistency
- a bit of code cleanup on the application page

frontend/src/components/TeamSelection.vue

@@ -51,12 +51,14 @@ export default {
     methods: {
         selectTeam (team) {
             if (team) {
-                this.$router.push({
-                    name: 'Team',
-                    params: {
-                        team_slug: team.slug
-                    }
-                })
+                this.$store.dispatch('account/setTeam', team.slug)
+                    .then(() => this.$router.push({
+                        name: 'Team',
+                        params: {
+                            team_slug: team.slug
+                        }
+                    }))
+                    .catch(e => console.warn(e))
             }
         },
         createTeam () {

frontend/src/pages/account/Teams/Invitations.vue

@@ -53,12 +53,14 @@ export default {
             await this.$store.dispatch('account/refreshTeams')
             Alerts.emit(`Invite to "${invite.team.name}" has been accepted.`, 'confirmation')
             // navigate to team dashboad once invite accepted
-            this.$router.push({
-                name: 'Team',
-                params: {
-                    team_slug: invite.team.slug
-                }
-            })
+            this.$store.dispatch('account/setTeam', invite.team.slug)
+                .then(() => this.$router.push({
+                    name: 'Team',
+                    params: {
+                        team_slug: invite.team.slug
+                    }
+                }))
+                .catch(e => console.warn(e))
         },
         async rejectInvite (invite) {
             await userApi.rejectTeamInvitation(invite.id, invite.team.id)

frontend/src/pages/admin/Teams.vue

@@ -221,12 +221,14 @@ export default {
             this.loading = false
         },
         viewTeam (row) {
-            this.$router.push({
-                name: 'Team',
-                params: {
-                    team_slug: row.slug
-                }
-            })
+            this.$store.dispatch('account/setTeam', row.slug)
+                .then(() => this.$router.push({
+                    name: 'Team',
+                    params: {
+                        team_slug: row.slug
+                    }
+                }))
+                .catch(e => console.warn(e))
         }
     }
 }

frontend/src/pages/application/index.vue

@@ -57,11 +57,6 @@ export default {
         InstanceStatusPolling
     },
     mixins: [permissionsMixin, applicationMixin, instanceActionsMixin],
-    data: function () {
-        return {
-            mounted: false
-        }
-    },
     computed: {
         ...mapState('account', ['features']),
         navigation () {
@@ -106,20 +101,11 @@ export default {
             return routes
         }
     },
-    async created () {
-        await this.updateApplication()
-
-        this.$watch(
-            () => this.$route.params.id,
-            async () => {
-                await this.updateApplication()
-            }
-        )
-    },
-    mounted () {
-        this.mounted = true
-    },
-    methods: {
+    watch: {
+        'team.name': {
+            handler: 'updateApplication',
+            immediate: true
+        }
     }
 }
 </script>

frontend/src/pages/team/index.vue

@@ -19,7 +19,6 @@
 </template>
 
 <script>
-import { useRoute } from 'vue-router'
 import { mapGetters, mapState } from 'vuex'
 
 import Loading from '../../components/Loading.vue'
@@ -40,7 +39,6 @@ export default {
         TeamTrialBanner
     },
     async beforeRouteUpdate (to, from, next) {
-        await this.$store.dispatch('account/setTeam', to.params.team_slug)
         // even if billing is not yet enabled, users should be able to see these screens,
         // in order to delete the project, or setup billing
         await this.checkRoute(to)
@@ -72,17 +70,16 @@ export default {
         this.mounted = true
     },
     async beforeMount () {
-        await this.$store.dispatch('account/setTeam', useRoute().params.team_slug)
         this.checkRoute(this.$route)
     },
     methods: {
         checkRoute: async function (route) {
             const allowedRoutes = [
-                '/team/' + this.team.slug + '/billing',
-                '/team/' + this.team.slug + '/settings',
-                '/team/' + this.team.slug + '/settings/general',
-                '/team/' + this.team.slug + '/settings/danger',
-                '/team/' + this.team.slug + '/settings/change-type'
+                '/team/' + this.team?.slug + '/billing',
+                '/team/' + this.team?.slug + '/settings',
+                '/team/' + this.team?.slug + '/settings/general',
+                '/team/' + this.team?.slug + '/settings/danger',
+                '/team/' + this.team?.slug + '/settings/change-type'
             ]
             if (allowedRoutes.indexOf(route.path) === -1) {
                 // if we're on a path that requires billing