From 1940af54d2fd95cd0fa0fe7253828f40292e7e5e Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 18 Dec 2024 18:26:58 +0200
Subject: [PATCH 1/2] Add a new TeamLink component and replace existing routes

---
 frontend/src/components/DevicesBrowser.vue    | 10 ++---
 .../src/components/router-links/TeamLink.vue  | 38 +++++++++++++++++++
 frontend/src/main.js                          |  2 +
 frontend/src/pages/device/Overview.vue        |  4 +-
 frontend/src/pages/device/index.vue           |  4 +-
 frontend/src/pages/instance/index.vue         |  4 +-
 .../components/compact/DevicesWrapper.vue     |  2 +-
 frontend/src/pages/team/Instances.vue         |  4 +-
 8 files changed, 55 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/router-links/TeamLink.vue

diff --git a/frontend/src/components/DevicesBrowser.vue b/frontend/src/components/DevicesBrowser.vue
index df0db31e85..f9ed438234 100644
--- a/frontend/src/components/DevicesBrowser.vue
+++ b/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>
@@ -245,7 +245,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'}">Team Settings</ff-team-link>
             </p>
             <p class="my-4">
                 Further info on Devices can be found
diff --git a/frontend/src/components/router-links/TeamLink.vue b/frontend/src/components/router-links/TeamLink.vue
new file mode 100644
index 0000000000..657d58305b
--- /dev/null
+++ b/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>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 6c6fb85a92..8e40ac7995 100644
--- a/frontend/src/main.js
+++ b/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
diff --git a/frontend/src/pages/device/Overview.vue b/frontend/src/pages/device/Overview.vue
index 5879f0d24e..dd244faca0 100644
--- a/frontend/src/pages/device/Overview.vue
+++ b/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>
diff --git a/frontend/src/pages/device/index.vue b/frontend/src/pages/device/index.vue
index 59a5d03a4f..f24e55479a 100644
--- a/frontend/src/pages/device/index.vue
+++ b/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: {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>
diff --git a/frontend/src/pages/instance/index.vue b/frontend/src/pages/instance/index.vue
index 8980f309bb..f414584695 100644
--- a/frontend/src/pages/instance/index.vue
+++ b/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">
diff --git a/frontend/src/pages/team/Applications/components/compact/DevicesWrapper.vue b/frontend/src/pages/team/Applications/components/compact/DevicesWrapper.vue
index 1000775955..c5c8576741 100644
--- a/frontend/src/pages/team/Applications/components/compact/DevicesWrapper.vue
+++ b/frontend/src/pages/team/Applications/components/compact/DevicesWrapper.vue
@@ -54,7 +54,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
diff --git a/frontend/src/pages/team/Instances.vue b/frontend/src/pages/team/Instances.vue
index aa6c3edbc2..b277b43a36 100644
--- a/frontend/src/pages/team/Instances.vue
+++ b/frontend/src/pages/team/Instances.vue
@@ -67,12 +67,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.

From 9d04ad9a319aa6d17c93b3fd08a1b2cfe0a68de2 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 14 Jan 2025 12:02:57 +0200
Subject: [PATCH 2/2] add a fallback to the back button in case there's no team
 loaded

---
 frontend/src/pages/team/routes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/team/routes.js b/frontend/src/pages/team/routes.js
index a5f04a88e4..fc15a929ab 100644
--- a/frontend/src/pages/team/routes.js
+++ b/frontend/src/pages/team/routes.js
@@ -230,7 +230,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 } }
                             }
                         }
                     }