Merge pull request #6684 from FlowFuse/reenable-immersive-mode-for-remote-instances

cstns · web-flow · commit d45bbf735abe · 2026-02-10T15:59:00.000+02:00
Reenable immersive mode for remote instances
diff --git a/frontend/src/pages/device/components/DeviceEditorLink.vue b/frontend/src/pages/device/components/DeviceEditorLink.vue
@@ -0,0 +1,111 @@
+<template>
+    <div>
+        <slot name="default">
+            <!-- Minimal view: simple icon-only button (used in InstanceTile) -->
+            <ff-button
+                v-if="minimalView"
+                :title="(editorDisabled || disabled) ? disabledReason : undefined"
+                kind="tertiary"
+                data-action="open-editor"
+                :disabled="buttonDisabled"
+                class="whitespace-nowrap ff-btn-icon editor-link-minimal"
+                :emit-instead-of-navigate="true"
+                @click.stop.prevent="openImmersiveEditor"
+                @click.middle.stop.prevent="openImmersiveEditor"
+            >
+                <template #icon-left>
+                    <ProjectIcon />
+                </template>
+            </ff-button>
+
+            <!-- Full view: split dropdown button -->
+            <div v-else class="editor-link-split" :class="{ 'editor-link-split--primary': primary }">
+                <button
+                    :title="buttonDisabled ? disabledReason : undefined"
+                    class="editor-link-split__action"
+                    :class="{ 'editor-link-split--disabled': buttonDisabled }"
+                    data-action="open-editor"
+                    :disabled="buttonDisabled"
+                    @click.stop.prevent="openImmersiveEditor"
+                    @click.middle.stop.prevent="openImmersiveEditor"
+                >
+                    <ProjectIcon class="ff-btn--icon mr-2" />
+                    <span class="hidden sm:inline editor-link-text">{{ editorDisabled ? 'Editor Disabled' : 'Open Editor' }}</span>
+                </button>
+                <DropdownMenu
+                    class="editor-link-split__dropdown"
+                    :buttonClass="'editor-link-split__toggle' + (buttonDisabled ? ' editor-link-split--disabled' : '')"
+                    :options="dropdownOptions"
+                    :disabled="buttonDisabled"
+                    @click.stop
+                />
+            </div>
+        </slot>
+    </div>
+</template>
+
+<script>
+import DropdownMenu from '../../../components/DropdownMenu.vue'
+import ProjectIcon from '../../../components/icons/Projects.js'
+
+export default {
+    name: 'DeviceEditorLink',
+    components: {
+        ProjectIcon,
+        DropdownMenu
+    },
+    props: {
+        editorDisabled: {
+            default: false,
+            type: Boolean
+        },
+        disabled: {
+            default: false,
+            type: Boolean
+        },
+        disabledReason: {
+            default: null,
+            type: String
+        },
+        device: {
+            type: Object,
+            required: true
+        },
+        showText: {
+            default: true,
+            type: Boolean
+        },
+        minimalView: {
+            type: Boolean,
+            default: false
+        },
+        primary: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['open-immersive-editor', 'open-editor'],
+    computed: {
+        buttonDisabled () {
+            return !!(this.disabled && !this.device?.editor?.url)
+        },
+        dropdownOptions () {
+            return [
+                { name: 'Open Direct URL', action: this.openEditor }
+            ]
+        }
+    },
+    methods: {
+        openImmersiveEditor (event) {
+            this.$emit('open-immersive-editor', event)
+        },
+        openEditor (event) {
+            this.$emit('open-editor', event)
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/frontend/src/pages/device/index.vue b/frontend/src/pages/device/index.vue
@@ -38,15 +38,26 @@
                 <div class="flex gap-2 align-center" style="height: 34px;">
                     <template v-if="isDevModeAvailable">
                         <DeveloperModeToggle data-el="device-devmode-toggle" :device="device" :disabled="disableModeToggle" :disabledReason="disableModeToggleReason" @mode-change="setDeviceMode" />
-                        <button v-if="!isVisitingAdmin" v-ff-tooltip:left="!editorAvailable ? 'You can edit flows directly when Developer Mode is enabled, and your Edge Instance is connected.' : 'Open Edge Instance Editor'" data-action="open-editor" class="ff-btn transition-fade--color ff-btn--secondary ff-btn-icon h-9" :disabled="!editorAvailable" @click="openTunnel(true)">
-                            Open Editor
-                            <span class="ff-btn--icon ff-btn--icon-right">
-                                <ExternalLinkIcon />
-                            </span>
-                        </button>
+                        <device-editor-link
+                            :device="device"
+                            :title="!editorAvailable ? 'You can edit flows directly when Developer Mode is enabled, and your Edge Instance is connected.' : 'Open Edge Instance Editor'"
+                            :disabled="!editorAvailable"
+                            :primary="editorAvailable"
+                            data-action="open-editor"
+                            @open-immersive-editor="openTunnel({launchEditor: true, event: $event, immersive: true})"
+                            @open-editor="openTunnel({launchEditor: true, event: $event, immersive: false})"
+                        />
                     </template>
                     <FinishSetupButton v-if="hasPermission('device:create', {application: device.application}) && neverConnected" :device="device" />
-                    <DropdownMenu v-if="hasPermission('device:change-status', permissionContext) && actionsDropdownOptions.length" data-el="device-actions-dropdown" buttonClass="ff-btn ff-btn--primary" :options="actionsDropdownOptions">Actions</DropdownMenu>
+                    <DropdownMenu
+                        v-if="hasPermission('device:change-status', permissionContext) && actionsDropdownOptions.length"
+                        data-el="device-actions-dropdown"
+                        :buttonClass="`ff-btn ff-btn-icon ${ editorAvailable ? 'ff-btn--secondary' : 'ff-btn--primary'}`"
+                        :options="actionsDropdownOptions"
+                    >
+                        <CogIcon class="ff-btn--icon ff-btn--icon-left" />
+                        Actions
+                    </DropdownMenu>
                 </div>
             </template>
         </SectionNavigationHeader>
@@ -110,8 +121,7 @@
 
 <script>
 
-import { ExternalLinkIcon } from '@heroicons/vue/outline'
-// import { TerminalIcon } from '@heroicons/vue/solid'
+import { CogIcon } from '@heroicons/vue/solid/index.js'
 import semver from 'semver'
 import { mapState } from 'vuex'
 
@@ -122,6 +132,7 @@ import SectionNavigationHeader from '../../components/SectionNavigationHeader.vu
 import StatusBadge from '../../components/StatusBadge.vue'
 import SubscriptionExpiredBanner from '../../components/banners/SubscriptionExpired.vue'
 import TeamTrialBanner from '../../components/banners/TeamTrial.vue'
+import { useNavigationHelper } from '../../composables/NavigationHelper.js'
 import usePermissions from '../../composables/Permissions.js'
 import deviceActionsMixin from '../../mixins/DeviceActions.js'
 
@@ -136,6 +147,7 @@ import DeviceAssignInstanceDialog from '../team/Devices/dialogs/DeviceAssignInst
 import AssignDeviceDialog from './components/AssignDeviceDialog.vue'
 
 import DeveloperModeToggle from './components/DeveloperModeToggle.vue'
+import DeviceEditorLink from './components/DeviceEditorLink.vue'
 import DeviceLastSeenBadge from './components/DeviceLastSeenBadge.vue'
 import DeviceModeBadge from './components/DeviceModeBadge.vue'
 
@@ -155,8 +167,9 @@ const deviceTransitionStates = [
 export default {
     name: 'DevicePage',
     components: {
+        CogIcon,
+        DeviceEditorLink,
         FinishSetupButton,
-        ExternalLinkIcon,
         DeveloperModeToggle,
         DeviceModeBadge,
         DeviceLastSeenBadge,
@@ -172,8 +185,9 @@ export default {
     mixins: [deviceActionsMixin],
     setup () {
         const { hasPermission, isVisitingAdmin } = usePermissions()
+        const { navigateTo, openInANewTab } = useNavigationHelper()
 
-        return { hasPermission, isVisitingAdmin }
+        return { hasPermission, isVisitingAdmin, navigateTo, openInANewTab }
     },
     data: function () {
         return {
@@ -425,16 +439,23 @@ export default {
 
             Alerts.emit('Device successfully assigned to application.', 'confirmation')
         },
-        openEditor () {
+        openEditor ({ event = null, immersive = false } = {}) {
             this.$store.dispatch('ux/validateUserAction', 'hasOpenedDeviceEditor')
-            window.open(this.deviceEditorURL, `device-editor-${this.device.id}`)
-            // this.$router.push({ name: 'device-editor' })
+            if (!immersive) {
+                this.openInANewTab(this.deviceEditorURL, `device-editor-${this.device.id}`)
+            } else {
+                this.navigateTo('editor', event, { target: `device-editor-${this.device.id}` })
+            }
         },
-        async openTunnel (launchEditor = false) {
+        async openTunnel ({
+            event,
+            immersive = true,
+            launchEditor = false
+        } = {}) {
             try {
                 if (this.deviceRunning) {
                     if (this.device.editor?.enabled && this.device.editor?.connected && this.device.editor?.local) {
-                        this.openEditor()
+                        this.openEditor({ event, immersive })
                     } else {
                         this.openingTunnel = true
                         this.$refs.dialog.show()
@@ -448,7 +469,7 @@ export default {
                                     if (this.device.editor?.enabled && this.device.editor?.connected) {
                                         if (this.device.editor?.local) {
                                             if (launchEditor) {
-                                                this.openEditor()
+                                                this.openEditor({ event, immersive })
                                             }
                                         } else {
                                             pollTunnelStatus(done, attempt + 1, 200)
diff --git a/frontend/src/pages/instance/Overview.vue b/frontend/src/pages/instance/Overview.vue
@@ -161,8 +161,7 @@
 </template>
 
 <script>
-import { ExternalLinkIcon, ServerIcon, TemplateIcon, TrendingUpIcon } from '@heroicons/vue/outline'
-import { ArrowRightIcon } from '@heroicons/vue/outline'
+import { ArrowRightIcon, ExternalLinkIcon, ServerIcon, TemplateIcon, TrendingUpIcon } from '@heroicons/vue/outline'
 import { mapState } from 'vuex'
 
 import InstanceApi from '../../api/instances.js'
diff --git a/frontend/src/pages/instance/components/EditorLink.vue b/frontend/src/pages/instance/components/EditorLink.vue
@@ -29,7 +29,7 @@
                     @click.stop.prevent="openEditor"
                     @click.middle.stop.prevent="openEditor"
                 >
-                    <ProjectIcon class="ff-btn--icon" />
+                    <ProjectIcon class="ff-btn--icon mr-2" />
                     <span class="hidden sm:inline editor-link-text">{{ editorDisabled ? 'Editor Disabled' : 'Open Editor' }}</span>
                 </button>
                 <DropdownMenu
diff --git a/frontend/src/pages/team/Home/components/RecentlyModifiedDevices.vue b/frontend/src/pages/team/Home/components/RecentlyModifiedDevices.vue
@@ -139,6 +139,7 @@ export default {
             display: flex;
             width: 100%;
             height: fit-content;
+            min-height: 55px;
             justify-content: space-between;
             align-items: center;
             gap: 10px;
diff --git a/frontend/src/pages/team/Home/components/RecentlyModifiedInstances.vue b/frontend/src/pages/team/Home/components/RecentlyModifiedInstances.vue
@@ -110,6 +110,7 @@ export default {
             display: flex;
             width: 100%;
             height: fit-content;
+            min-height: 55px;
             justify-content: space-between;
             align-items: center;
             gap: 10px;

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@`
`29`	`29`	`@click.stop.prevent="openEditor"`
`30`	`30`	`@click.middle.stop.prevent="openEditor"`
`31`	`31`	`>`
`32`		`- <ProjectIcon class="ff-btn--icon" />`
	`32`	`+ <ProjectIcon class="ff-btn--icon mr-2" />`
`33`	`33`	`<span class="hidden sm:inline editor-link-text">{{ editorDisabled ? 'Editor Disabled' : 'Open Editor' }}</span>`
`34`	`34`	`</button>`
`35`	`35`	`<DropdownMenu`