From d0784b8981a2cb15883ac37fde6066a73e58d9c9 Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Tue, 30 Sep 2025 13:40:01 +0100
Subject: [PATCH 1/3] Home: "Add Instance" button for Hosted & Remote Instances

---
 .../team/Home/components/DashboardSection.vue | 19 +++--
 frontend/src/pages/team/Home/index.vue        | 82 +++++++++++++++++--
 2 files changed, 86 insertions(+), 15 deletions(-)

diff --git a/frontend/src/pages/team/Home/components/DashboardSection.vue b/frontend/src/pages/team/Home/components/DashboardSection.vue
index d5575cc4a8..4a3da02890 100644
--- a/frontend/src/pages/team/Home/components/DashboardSection.vue
+++ b/frontend/src/pages/team/Home/components/DashboardSection.vue
@@ -1,14 +1,17 @@
 <template>
     <div class="ff-box" :data-el="`dashboard-section-${type}`">
         <div class="ff-box-header">
-            <span v-if="$slots.icon" class="icon">
-                <slot name="icon" />
-            </span>
-            <h3 v-if="title" class="ff-box-title">
-                <span>
-                    {{ title }}
+            <div class="flex items-center gap-2">
+                <span v-if="$slots.icon" class="icon">
+                    <slot name="icon" />
                 </span>
-            </h3>
+                <h3 v-if="title" class="ff-box-title">
+                    <span>
+                        {{ title }}
+                    </span>
+                </h3>
+            </div>
+            <slot name="actions" />
         </div>
         <div class="ff-box-content flex flex-col flex-1 overflow-auto">
             <slot />
@@ -44,8 +47,8 @@ export default {
 
     .ff-box-header {
         display: flex;
+        justify-content: space-between;
         align-items: center;
-        gap: 10px;
         margin-bottom: 10px;
 
         .ff-box-title {
diff --git a/frontend/src/pages/team/Home/index.vue b/frontend/src/pages/team/Home/index.vue
index 70c1affa60..e7dea876a6 100644
--- a/frontend/src/pages/team/Home/index.vue
+++ b/frontend/src/pages/team/Home/index.vue
@@ -34,6 +34,21 @@
                                 />
                             </div>
 
+                            <template #actions>
+                                <ff-button
+                                    v-ff-tooltip:left="!hasPermission('project:create') && 'Your role does not allow creating new instances. Contact a team admin to change your role.'"
+                                    data-action="create-project"
+                                    kind="secondary"
+                                    :to="{name: 'CreateInstance'}"
+                                    :disabled="!hasPermission('project:create')"
+                                >
+                                    <template #icon-left>
+                                        <PlusIcon class="ff-icon" />
+                                    </template>
+                                    Add Instance
+                                </ff-button>
+                            </template>
+
                             <RecentlyModifiedInstances :total-instances="totalInstances" @delete-instance="openDeleteInstanceForm" />
                         </DashboardSection>
 
@@ -57,6 +72,21 @@
                                 />
                             </div>
 
+                            <template #actions>
+                                <ff-button
+                                    v-ff-tooltip:left="!hasPermission('device:create') && 'Your role does not allow creating new remote instances. Contact a team admin to change your role.'"
+                                    data-action="create-project"
+                                    kind="secondary"
+                                    :disabled="!hasPermission('device:create')"
+                                    @click="showCreateDeviceDialog"
+                                >
+                                    <template #icon-left>
+                                        <PlusIcon class="ff-icon" />
+                                    </template>
+                                    Add Instance
+                                </ff-button>
+                            </template>
+
                             <RecentlyModifiedDevices :total-devices="totalDevices" />
                         </DashboardSection>
                     </section>
@@ -78,21 +108,39 @@
             </transition>
         </div>
     </ff-page>
+    <TeamDeviceCreateDialog
+        v-if="team && modals.addDevice"
+        ref="teamDeviceCreateDialog"
+        :team="team"
+        :teamDeviceCount="totalDevices"
+        @device-created="deviceCreated"
+        @close="modals.addDevice = false"
+    >
+        <template #description>
+            <p v-if="!featuresCheck?.isHostedInstancesEnabledForTeam && tours.firstDevice">
+                Describe your new Remote Instance here, e.g. "Raspberry Pi", "Allen-Bradley PLC", etc.
+            </p>
+            <p v-else>
+                Remote Instances are managed using the <a href="https://flowfuse.com/docs/user/devices/" target="_blank">FlowFuse Device Agent</a>. The agent will need to be setup on the hardware where you want your Remote Instance to run.
+            </p>
+        </template>
+    </TeamDeviceCreateDialog>
 </template>
 
 <script>
-import { ChipIcon, DatabaseIcon } from '@heroicons/vue/outline'
+import { ChipIcon, DatabaseIcon, PlusIcon } from '@heroicons/vue/outline'
 
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 
 import TeamAPI from '../../../api/team.js'
 import AuditLog from '../../../components/audit-log/AuditLog.vue'
-
 import ProjectsIcon from '../../../components/icons/Projects.js'
 import InstanceStat from '../../../components/tiles/InstanceCounter.vue'
 import { useInstanceStates } from '../../../composables/InstanceStates.js'
+import usePermissions from '../../../composables/Permissions.js'
 import Alerts from '../../../services/alerts.js'
 import ConfirmInstanceDeleteDialog from '../../instance/Settings/dialogs/ConfirmInstanceDeleteDialog.vue'
+import TeamDeviceCreateDialog from '../Devices/dialogs/TeamDeviceCreateDialog.vue'
 
 import DashboardSection from './components/DashboardSection.vue'
 import RecentlyModifiedDevices from './components/RecentlyModifiedDevices.vue'
@@ -109,14 +157,18 @@ export default {
         ChipIcon,
         ProjectsIcon,
         DatabaseIcon,
-        RecentlyModifiedDevices
+        PlusIcon,
+        RecentlyModifiedDevices,
+        TeamDeviceCreateDialog
     },
     setup () {
         const { groupBySimplifiedStates, statesMap: instanceStatesMap } = useInstanceStates()
 
+        const { hasPermission } = usePermissions()
         return {
             groupBySimplifiedStates,
-            instanceStatesMap
+            instanceStatesMap,
+            hasPermission
         }
     },
     data () {
@@ -127,11 +179,15 @@ export default {
             instanceStateCounts: {},
             deviceStateCounts: {},
             isDeleteInstanceDialogOpen: false,
-            devices: []
+            devices: [],
+            modals: {
+                addDevice: false
+            }
         }
     },
     computed: {
-        ...mapGetters('account', ['team', 'pendingTeamChange']),
+        ...mapState('ux/tours', ['tours']),
+        ...mapGetters('account', ['team', 'pendingTeamChange', 'featuresCheck']),
         instanceStats () {
             return this.groupBySimplifiedStates(this.instanceStateCounts)
         },
@@ -205,6 +261,18 @@ export default {
             this.isDeleteInstanceDialogOpen = false
             // get the new number of instances which triggers a recently modified instances list refresh
             this.getInstanceStateCounts()
+        },
+        showCreateDeviceDialog () {
+            this.modals.addDevice = true
+            this.$nextTick(() => {
+                console.log('showCreateDeviceDialog', this.$refs.teamDeviceCreateDialog)
+                this.$refs.teamDeviceCreateDialog.show(null, null, null, true)
+            })
+        },
+        deviceCreated (device) {
+            console.log('deviceCreated', device)
+            // navigate to the new Remote Instance
+            this.$router.push({ name: 'DeviceOverview', params: { id: device.id } })
         }
     }
 }

From b57ed9f8bed7fe7c23a97e47cf2909975dcf0f2e Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Tue, 30 Sep 2025 14:00:28 +0100
Subject: [PATCH 2/3] Remove console.logs

---
 frontend/src/pages/team/Home/index.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/pages/team/Home/index.vue b/frontend/src/pages/team/Home/index.vue
index e7dea876a6..ce7a6de62a 100644
--- a/frontend/src/pages/team/Home/index.vue
+++ b/frontend/src/pages/team/Home/index.vue
@@ -265,12 +265,10 @@ export default {
         showCreateDeviceDialog () {
             this.modals.addDevice = true
             this.$nextTick(() => {
-                console.log('showCreateDeviceDialog', this.$refs.teamDeviceCreateDialog)
                 this.$refs.teamDeviceCreateDialog.show(null, null, null, true)
             })
         },
         deviceCreated (device) {
-            console.log('deviceCreated', device)
             // navigate to the new Remote Instance
             this.$router.push({ name: 'DeviceOverview', params: { id: device.id } })
         }

From 6fc996e9aac389ae883db0a8c0d607a4ca735e60 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 8 Oct 2025 12:09:12 +0300
Subject: [PATCH 3/3] replace redirect callback with showing the credentials
 dialog after creating a device from the team dashboard

---
 frontend/src/pages/team/Home/index.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/team/Home/index.vue b/frontend/src/pages/team/Home/index.vue
index ce7a6de62a..f47b0d5e54 100644
--- a/frontend/src/pages/team/Home/index.vue
+++ b/frontend/src/pages/team/Home/index.vue
@@ -125,6 +125,7 @@
             </p>
         </template>
     </TeamDeviceCreateDialog>
+    <DeviceCredentialsDialog ref="deviceCredentialsDialog" />
 </template>
 
 <script>
@@ -140,6 +141,7 @@ import { useInstanceStates } from '../../../composables/InstanceStates.js'
 import usePermissions from '../../../composables/Permissions.js'
 import Alerts from '../../../services/alerts.js'
 import ConfirmInstanceDeleteDialog from '../../instance/Settings/dialogs/ConfirmInstanceDeleteDialog.vue'
+import DeviceCredentialsDialog from '../Devices/dialogs/DeviceCredentialsDialog.vue'
 import TeamDeviceCreateDialog from '../Devices/dialogs/TeamDeviceCreateDialog.vue'
 
 import DashboardSection from './components/DashboardSection.vue'
@@ -149,6 +151,7 @@ import RecentlyModifiedInstances from './components/RecentlyModifiedInstances.vu
 export default {
     name: 'TeamHome',
     components: {
+        DeviceCredentialsDialog,
         ConfirmInstanceDeleteDialog,
         InstanceStat,
         RecentlyModifiedInstances,
@@ -270,7 +273,7 @@ export default {
         },
         deviceCreated (device) {
             // navigate to the new Remote Instance
-            this.$router.push({ name: 'DeviceOverview', params: { id: device.id } })
+            this.$refs.deviceCredentialsDialog.show(device)
         }
     }
 }