Add a team link component to simplify routing

frontend/src/components/DevicesBrowser.vue

@@ -153,12 +153,12 @@
                                 You can deploy <router-link class="ff-link" :to="{name: 'instance-snapshots', params: {id: instance.id}}">Snapshots</router-link> of this Instance to your connected Devices.
                             </p>
                             <p>
-                                A full list of your Team's Devices are available <router-link
+                                A full list of your Team's Devices are available <ff-team-link
                                     class="ff-link"
                                     :to="{name: 'TeamDevices', params: {team_slug: team.slug}}"
                                 >
                                     here
-                                </router-link>.
+                                </ff-team-link>.
                             </p>
                         </template>
                         <template #actions>
@@ -192,12 +192,12 @@
                                 You can deploy <router-link class="ff-link" :to="{name: 'ApplicationSnapshots'}">Snapshots</router-link> of this Application to your connected Devices.
                             </p>
                             <p>
-                                A full list of your Team's Devices are available <router-link
+                                A full list of your Team's Devices are available <ff-team-link
                                     class="ff-link"
                                     :to="{name: 'TeamDevices', params: {team_slug: team.slug}}"
                                 >
                                     here
-                                </router-link>.
+                                </ff-team-link>.
                             </p>
                         </template>
                         <template #actions>

frontend/src/components/router-links/TeamLink.vue

@@ -0,0 +1,38 @@
+<template>
+    <router-link
+        v-slot="{ href, navigate }"
+        v-bind="extendedProps"
+        custom
+    >
+        <a
+            v-bind="$attrs"
+            :href="href"
+            @click="navigate"
+        >
+            <slot />
+        </a>
+    </router-link>
+</template>
+
+<script>
+import { RouterLink as DefaultRouterLink } from 'vue-router'
+import { mapState } from 'vuex'
+
+export default {
+    name: 'TeamLink',
+    inheritAttrs: false,
+    props: {
+        ...DefaultRouterLink.props
+    },
+    computed: {
+        ...mapState('account', ['team']),
+        extendedProps () {
+            const props = { ...this.$props }
+            if (!props.to.params.team_slug) {
+                props.to.params.team_slug = this.team.slug
+            }
+            return props
+        }
+    }
+}
+</script>

frontend/src/main.js

@@ -12,6 +12,7 @@ import VueShepherdPlugin from 'vue-shepherd'
 import App from './App.vue'
 import Loading from './components/Loading.vue'
 import SectionNavigationHeader from './components/SectionNavigationHeader.vue'
+import TeamLink from './components/router-links/TeamLink.vue'
 import PageLayout from './layouts/Page.vue'
 import router from './routes.js'
 import Alerts from './services/alerts.js'
@@ -38,6 +39,7 @@ app.component('lottie-animation', LottieAnimation)
 app.component('ff-page', PageLayout)
 app.component('ff-page-header', SectionNavigationHeader)
 app.component('ff-loading', Loading)
+app.component('ff-team-link', TeamLink)
 
 app.config.errorHandler = function (err, vm, info) {
     // Uncaught XHR errors bubble to here

frontend/src/pages/device/Overview.vue

@@ -32,9 +32,9 @@
             <template #content>
                 <InfoCardRow property="Application:">
                     <template #value>
-                        <router-link v-if="device?.application" :to="{name: 'Application', params: { id: device.application.id, team_slug: team.slug }}">
+                        <ff-team-link v-if="device?.application" :to="{name: 'Application', params: { id: device.application.id }}">
                             {{ device.application?.name }}
-                        </router-link>
+                        </ff-team-link>
                         <span v-else>None</span>
                     </template>
                 </InfoCardRow>

frontend/src/pages/device/index.vue

@@ -20,11 +20,11 @@
                 <template #context>
                     <div v-if="device?.ownerType === 'application' && device.application" data-el="device-assigned-application">
                         Application:
-                        <router-link :to="{name: 'Application', params: {team_slug: team.slug, id: device.application?.id}}" class="text-blue-600 cursor-pointer hover:text-blue-700 hover:underline">{{ device.application?.name }}</router-link>
+                        <ff-team-link :to="{name: 'Application', params: {id: device.application?.id}}" class="text-blue-600 cursor-pointer hover:text-blue-700 hover:underline">{{ device.application?.name }}</ff-team-link>
                     </div>
                     <div v-else-if="device?.ownerType === 'instance' && device.instance" data-el="device-assigned-instance">
                         Instance:
-                        <router-link :to="{name: 'Instance', params: {id: device.instance.id}}" class="text-blue-600 cursor-pointer hover:text-blue-700 hover:underline">{{ device.instance.name }}</router-link>
+                        <ff-team-link :to="{name: 'Instance', params: {id: device.instance.id}}" class="text-blue-600 cursor-pointer hover:text-blue-700 hover:underline">{{ device.instance.name }}</ff-team-link>
                     </div>
                     <div v-else data-el="device-assigned-none">
                         <span class="italic">No Application or Instance Assigned</span> - <a class="ff-link" data-action="assign-device" @click="openAssignmentDialog">Assign</a>

frontend/src/pages/instance/index.vue

@@ -20,7 +20,9 @@
                 </template>
                 <template #context>
                     Application:
-                    <router-link :to="{name: 'Application', params: {id: instance.application.id, team_slug: team.slug}}" class="text-blue-600 cursor-pointer hover:text-blue-700 hover:underline">{{ instance.application.name }}</router-link>
+                    <ff-team-link :to="{name: 'Application', params: {id: instance.application.id}}" class="text-blue-600 cursor-pointer hover:text-blue-700 hover:underline">
+                        {{ instance.application.name }}
+                    </ff-team-link>
                 </template>
                 <template #tools>
                     <div class="space-x-2 flex align-center">

frontend/src/pages/team/Applications/components/compact/DevicesWrapper.vue

@@ -53,7 +53,7 @@
                 </p>
                 <p class="my-4">
                     If you want your device to be automatically registered to an instance, in order to remotely deploy flows, you can use provisioning tokens
-                    in your <router-link :to="{'name': 'TeamSettingsDevices', 'params': {team_slug: team.slug}}">Team Settings</router-link>
+                    in your <ff-team-link :to="{'name': 'TeamSettingsDevices', 'params': {team_slug: team.slug}}">Team Settings</ff-team-link>
                 </p>
                 <p class="my-4">
                     Further info on Devices can be found

frontend/src/pages/team/Instances.vue

@@ -70,12 +70,12 @@
                     <template #header>Get Started with your First Node-RED Instance</template>
                     <template #message>
                         <p>
-                            Instances are managed in FlowFuse via <router-link
+                            Instances are managed in FlowFuse via <ff-team-link
                                 class="ff-link"
                                 :to="{name:'Applications', params: {team_slug: team.slug}}"
                             >
                                 Applications
-                            </router-link>.
+                            </ff-team-link>.
                         </p>
                         <p>
                             You can create your first Instance when creating your first Application, or add an Instance to an existing Application if you have one.

frontend/src/pages/team/routes.js

@@ -239,7 +239,7 @@ export default [
                         backTo: ({ team }) => {
                             return {
                                 label: 'Back to Dashboard',
-                                to: { name: 'Team', params: { team_slug: team.slug } }
+                                to: { name: 'Team', params: { team_slug: team?.slug } }
                             }
                         }
                     }