Merge branch 'main' into 6649_add-remote-instance-immersive-view-instance-controls

Steve-Mcl · web-flow · commit 3d21b7347932 · 2026-02-16T11:44:20.000Z
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,38 @@
+#### 2.27.0: Release
+
+ - Bump JS-DevTools/npm-publish from 4.1.4 to 4.1.5 (#6614)
+ - Bump aws-actions/configure-aws-credentials from 5.1.1 to 6.0.0 (#6673)
+ - Bump cypress-io/github-action from 7.1.1 to 7.1.2 (#6674)
+ - Bump flowfuse/github-actions-workflows/.github/workflows/build_container_image.yml (#6676)
+ - Bump flowfuse/github-actions-workflows/.github/workflows/publish_node_package.yml (#6675)
+ - Fix concurrency group setting in `Create pre-staging environment` workflow (#6656)
+ - Add X-Forwarded headers to nginx ingress docs (#6630)
+ - Ensure UI honors TeamType Enable All flag (#6686) @hardillb
+ - Bump @modelcontextprotocol/sdk from 1.25.3 to 1.26.0 (#6632) @app/dependabot
+ - Update device editor navigation to use named route configuration (#6690) @cstns
+ - Add 4.1.5 to Device Agent Node-RED versions (#6688) @hardillb
+ - Improve clarity of instance assignment in docs (#6554) @sumitshinde-84
+ - Allow snapshot to be restored to a remote instance in dev mode (#6679) @knolleary
+ - Hide billing selector when billing is disabled (#6671) @cstns
+ - fix(ui): wrap DialogBox in Teleport to fix positioning in drawer cont… (#6255) @dimitrieh
+ - Reenable immersive mode for remote instances (#6684) @cstns
+ - Use correct favicon and use provided link to package (#6678) @Steve-Mcl
+ - Ensure consistent Open Editor behavior — always default to immersive experience (#6670) @dimitrieh
+ - FlowFuse Expert context UI (#6631) @Steve-Mcl
+ - Remove WebSocket communication handling and associated methods from the immersive device editor (#6668) @cstns
+ - Add WebSocket disconnection details by logging event details (#6667) @cstns
+ - Enhance remote instance editor with connection polling, communication… (#6647) @cstns
+ - Add the drawer sub routes and the FF Expert to the immersive remote instance (#6629) @cstns
+ - Add the embedded remote instance editor route (#6628) @cstns
+ - Relocate immersive editor components to a common namespace (#6624) @cstns
+ - ci: Update NR versions on pre-staging stacks (#6641) @ppawlowski
+ - Refactor device routes and update references to use consistent naming convention (#6623) @cstns
+ - Chore: extract common immersive styling (#6622) @cstns
+ - Refactor drawer: extract reusable functionality into composable (#6621) @cstns
+ - Chore/use the resizing helper to resize the instance immersive drawer (#6610) @cstns
+ - Bump @isaacs/brace-expansion from 5.0.0 to 5.0.1 (#6627) @app/dependabot
+ - Bump dompurify from 3.3.0 to 3.3.1 (#6612) @app/dependabot
+
 #### 2.26.2: Release
 
  - Bump cypress-io/github-action from 7.1.0 to 7.1.1 (#6616)
diff --git a/docs/device-agent/register.md b/docs/device-agent/register.md
@@ -147,7 +147,6 @@ flowfuse-device-agent
 You will see the Device Agent start and perform a 'call-home' where it connects back
 to the platform to check what it should be running.
 
-
 #### Additional Information
 
 If you copy or download a **Device Provisioning Configuration** file to your hardware,
@@ -164,12 +163,12 @@ you've followed [Single Device Registration](#single-remote-instance-registratio
 [Bulk Registration](#bulk-registration) to register your device, it will
 automatically be assigned to an Application or Instance.
 
-### Applications (Recommended)
-
-#### Assign to Application
+### Applications
 
 This step will permit you to push Snapshots to your Remote Instance via [DevOps Pipelines](/docs/user/devops-pipelines.md), or via a [Target Snapshot](/docs/user/snapshots/#application-owned-devices) from the Application.
 
+#### Assign to Application
+
 1. Go to your teams's **Remote Instances** page.
 2. Open the dropdown menu to the right of the Remote Instance you want to assign and
    select the **Add to Application** option.
@@ -206,14 +205,17 @@ NOTE: If you wish to keep the flows currently running on the Remote Instance, it
 
 ### Hosted Instances
 
-This method permits you to set a [Target Snapshot](/docs/user/snapshots/#instance-owned-devices) from the Hosted Instance to the Remote Instance. Note though, you can only push nodes and flows that are supported by _both_ Hosted and Remote Instances. The best use case for Remote Instances are generally to be assigned by an Application instead.
+This method establishes a deployment relationship where a Hosted Instance becomes the source for snapshot deployments to your Remote Instance(s).
+
+**Important:** This is a legacy feature; [assigning to Applications](./register.md#applications) is the recommended approach as it provides better fleet management and DevOps Pipeline capabilities. For guidance, see [when to use each approach](/docs/user/concepts.md#when-to-use-instance-assignment-vs-devops-pipelines).
 
 #### Assign to Hosted Instance
 
-1. Go to your teams's **Remote Instances** page.
-2. Open the dropdown menu to the right of the Remote Instance you want to assign and
-   select the **Add to Hosted Instance** option.
-3. Select the instance in the dialog and click **Add** to continue.
+1. Go to your team's **Remote Instances** page.
+2. Open the dropdown menu to the right of the Remote Instance you want to assign and select the **Add to Instance** option.
+3. Select the Hosted Instance in the dialog and click **Add** to continue.
+
+**Note:** There are constraints on which instances can be assigned to each other. For detailed information, refer to [Assignment Rules and Constraints](/docs/user/concepts.md#assignment-rules).
 
 ### Remove from Hosted Instance
 
diff --git a/docs/device-agent/running.md b/docs/device-agent/running.md
@@ -51,6 +51,7 @@ Options
   -i, --interval secs
   -p, --port number
   -m, --moduleCache     Use local npm module cache rather than install
+  --node-options        Adds NodeJS command line arguments, can be specified multiple times
 
 Web UI Options
 
@@ -89,6 +90,12 @@ _Start the agent with a different working directory and the Web UI enabled_
 flowfuse-device-agent -d /path/to/working/directory -w --ui-user admin --ui-pass password --ui-port 8081
 ```
 
+_Start the agent with a larger NodeJS memory space and using the openssl CA certs_
+
+```bash
+flowfuse-device-agent -d /path/to/working/directory --node-options='--max_old_space_size=1024' --node_options='--use-openssl-ca'
+```
+
 ## Running behind a HTTP Proxy
 
 If the Remote Instance is behind a HTTP proxy, the agent can be configured to use the proxy by setting the `http_proxy`, `https_proxy` or `all_proxy` environment variables.
@@ -146,4 +153,4 @@ OS and Architecture as your target device, and then copy the modules on to your
 2. Place this file in an empty directory on your local device.
 3. Run `npm install` to install the modules. This will create a `node_modules` directory.
 4. On your target Remote Instance, create a directory called `module_cache` inside the Device Agent Configuration directory.
-5. Copy the `node_modules` directory from your local instance to the target instance so that it is under the `module_cache` directory.
+5. Copy the `node_modules` directory from your local instance to the target instance so that it is under the `module_cache` directory.
diff --git a/docs/user/concepts.md b/docs/user/concepts.md
@@ -5,7 +5,7 @@ navOrder: 2
 
 # FlowFuse Concepts
 
-FlowFuse makes it easy to create, manage, and scale Node-RED instances. The platform introduces a few core concepts to help you organize and work with it effectively. Throughout the platform, you’ll also see ⓘ icons that you can click on to get pop-up explanations for different features and terms.
+FlowFuse makes it easy to create, manage, and scale Node-RED instances. The platform introduces a few core concepts to help you organize and work with it effectively. Throughout the platform, you'll also see ⓘ icons that you can click on to get pop-up explanations for different features and terms.
 
 ## Table of Contents
 
@@ -25,7 +25,11 @@ FlowFuse makes it easy to create, manage, and scale Node-RED instances. The plat
     - [Template](#template)
     - [Snapshot](#snapshot)
       - [Hosted Instance Snapshot](#hosted-instance-snapshot)
-      - [Remote Instances (Device Snapshot)](#remote-instance-snapshot)
+      - [Remote Instance Snapshot](#remote-instance-snapshot)
+    - [Assigning Remote Instances to Hosted Instances](#assigning-remote-instances-to-hosted-instances)
+      - [How It Works](#how-it-works)
+      - [Assignment Rules](#assignment-rules)
+      - [When to Use Instance Assignment vs DevOps Pipelines](#when-to-use-instance-assignment-vs-devops-pipelines)
   - [Device](#device)
     - [Device Agent](#device-agent)
     - [Fleet Mode vs Developer Mode](#fleet-mode-vs-developer-mode)
@@ -50,7 +54,7 @@ To organize your Node-RED instances, they are grouped within Applications. With
 
 Applications provide logical organization of related instances, support for DevOps pipeline workflows, simplified device group management, application-level audit logging, and clear organizational boundaries for managing multiple instances and devices.
 
-With FlowFuse’s Granular RBAC, Applications can now also act as an authorization boundary. This means user roles and permissions can be managed at the application level, providing finer control over access to instances, snapshots, and devices within a given application.
+With FlowFuse's Granular RBAC, Applications can now also act as an authorization boundary. This means user roles and permissions can be managed at the application level, providing finer control over access to instances, snapshots, and devices within a given application.
 
 ### DevOps Pipeline
 
@@ -125,6 +129,35 @@ A user can create an hosted instance snapshot and then mark it as the *target* s
 
 Similar to instance snapshots, a device snapshot is a point-in-time backup of a Node-RED instance running on a remote device. It captures the flows, credentials, and runtime settings. The difference is that local changes made on a device during developer mode are pulled into the FlowFuse platform and stored as a snapshot. The dashboard also allows you to see and manage these snapshots. With devices assigned to an application, a user can create a device snapshot from the remote device.
 
+### Assigning Remote Instances to Hosted Instances
+
+**Note:** This is a legacy feature that predates DevOps Pipelines. For new deployments, consider using [DevOps Pipelines](#devops-pipeline) instead, which provide more flexible and powerful deployment workflows.
+
+Instance assignment establishes a parent-child deployment relationship between a hosted instance and remote instances. When assigned, the hosted instance becomes the source of truth and automatically pushes snapshots to the remote instance. You can only push nodes and flows that are supported by both Hosted and Remote Instances. For more information on how this works, see [How Instance Assignment Works](/docs/user/concepts.md#how-it-works).
+
+#### How It Works
+
+Instance assignment creates a parent-child deployment relationship with the following behavior:
+
+- **Hosted Instance (Parent)**: Acts as the deployment controller and source of truth for snapshots
+- **Remote Instance (Child)**: Receives and applies snapshot updates from the parent
+- **Deployment Flow**: When you set a [Target Snapshot](/docs/user/snapshots/#instance-owned-devices) on the hosted instance, all assigned remote instances automatically restart on that snapshot
+- **One-Way Relationship**: Changes flow exclusively from the hosted instance to remote instances, ensuring consistent deployments across your fleet
+
+#### Assignment Rules
+
+FlowFuse enforces specific constraints on instance assignment:
+
+- Remote instances can be assigned to hosted instances
+- Remote instances cannot be assigned to other remote instances
+- Hosted instances cannot be assigned to any other instances
+
+#### When to Use Instance Assignment vs DevOps Pipelines
+
+Instance assignment suits straightforward scenarios where you need to push snapshots from a single hosted instance directly to one or more remote instances. It works well for maintaining existing deployments or when you simply need one hosted instance deploying to multiple remote instances without staging environments.
+
+DevOps Pipelines are recommended for most deployment workflows. They support staged environments for testing changes in development before promoting to production, enable deployment to device groups for easier fleet management, and offer more flexibility aligned with modern development practices. If you're setting up a new deployment process, use DevOps Pipelines.
+
 ## Device
 
 The FlowFuse platform can be used to manage Node-RED applications running on remote devices. A Device is essentially a **Remote Instance** that runs a software agent to connect back to the platform and receive updates.
@@ -155,4 +188,4 @@ Device groups allow you to organize your devices into logical groups. These grou
 
 Device groups provide logical organization of devices by location, function, environment, or other criteria. They enable simplified mass deployments through DevOps pipelines, allow you to target specific device groups for staged rollouts, and let you manage subsets of devices independently.
 
-Read more [about Device Groups](./device-groups.md).
+Read more [about Device Groups](./device-groups.md).
diff --git a/docs/user/ff-tables.md b/docs/user/ff-tables.md
@@ -5,7 +5,7 @@ navTitle: FlowFuse Tables
 # FlowFuse Tables
 
 <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 px-4 py-4 mb-4 rounded" role="alert">
-  <span class="block leading-none">This feature is currently in <a href="https://flowfuse.com/handbook/development/releases/#beta-release">the beta state</a></span>
+  <span class="block leading-none">This feature is currently in <a href="https://flowfuse.com/handbook/engineering/releases/#beta-release">the beta state</a></span>
 </div>
 
 From FlowFuse v2.20.0 Teams (Enterprise teams only) can create a relational database to use to store data.
diff --git a/frontend/src/pages/account/Security/dialogs/TokenCreated.vue b/frontend/src/pages/account/Security/dialogs/TokenCreated.vue
@@ -1,7 +1,7 @@
 <template>
     <ff-dialog ref="dialog" data-el="add-token-confirmation" header="Token Created">
         <template #default>
-            <p>Your token is <code>{{ token.token }}</code></p>
+            <p>Your token is <code>{{ token?.token }}</code></p>
             <p>This is the only time it will be shown, so please ensure you make a note</p>
         </template>
         <template #actions>
@@ -18,14 +18,6 @@ import Alerts from '../../../../services/alerts.js'
 export default {
     name: 'TokenCreated',
     mixins: [clipboardMixin],
-    setup () {
-        return {
-            showToken (token) {
-                this.token = token
-                this.$refs.dialog.show()
-            }
-        }
-    },
     data () {
         return {
             token: null
@@ -34,7 +26,7 @@ export default {
     methods: {
         close () {
             this.$refs.dialog.close()
-            this.token = undefined
+            this.token = null
         },
         copy () {
             this.copyToClipboard(this.token.token).then(() => {
@@ -43,6 +35,10 @@ export default {
                 console.warn('Clipboard write permission denied: ', err)
                 Alerts.emit('Clipboard write permission denied.', 'warning')
             })
+        },
+        showToken (token) {
+            this.token = token
+            this.$refs.dialog.show()
         }
     }
 }
diff --git a/frontend/src/pages/admin/TeamTypes/dialogs/TeamTypeEditDialog.vue b/frontend/src/pages/admin/TeamTypes/dialogs/TeamTypeEditDialog.vue
@@ -252,6 +252,7 @@ export default {
                     this.input.properties.features = teamType.properties?.features || {}
                     this.input.properties.billing = teamType.properties?.billing || {}
                     this.input.properties.trial = teamType.properties?.trial || {}
+                    this.input.properties.enableAllFeatures = teamType.properties?.enableAllFeatures || false
                     this.input.properties.autoStackUpdate = teamType.properties?.autoStackUpdate || { enabled: false, days: [], hours: [] }
                     if (this.input.properties.trial.active && !this.input.properties.trial.instanceType) {
                         this.input.properties.trial.instanceType = '_'
@@ -454,7 +455,8 @@ export default {
                         instances: { ...this.input.properties.instances },
                         features: { ...this.input.properties.features },
                         teamBroker: { ...this.input.properties.teamBroker },
-                        autoStackUpdate: { ...this.input.properties.autoStackUpdate }
+                        autoStackUpdate: { ...this.input.properties.autoStackUpdate },
+                        enableAllFeatures: this.input.properties.enableAllFeatures
                     }
                 }
                 // Utility function that ensures the specific property is
diff --git a/frontend/src/pages/device/Settings/General.vue b/frontend/src/pages/device/Settings/General.vue
@@ -228,36 +228,10 @@ export default {
                 nodeRedVersion: ''
             },
             availableNrVersions: [
-                '3.1.0',
-                '3.1.1',
-                '3.1.2',
-                '3.1.3',
-                '3.1.4',
-                '3.1.5',
-                '3.1.6',
-                '3.1.7',
-                '3.1.8',
-                '3.1.9',
-                '3.1.10',
-                '3.1.11',
-                '3.1.12',
-                '3.1.13',
-                '3.1.14',
                 '3.1.15',
-                '4.0.0',
-                '4.0.1',
-                '4.0.2',
-                '4.0.3',
-                '4.0.4',
-                '4.0.5',
-                '4.0.6',
-                '4.0.7',
-                '4.0.8',
                 '4.0.9',
-                '4.1.0',
-                '4.1.1',
-                '4.1.2',
-                '4.1.3'
+                '4.1.4',
+                '4.1.5'
 
             ]
         }
diff --git a/frontend/src/pages/device/index.vue b/frontend/src/pages/device/index.vue
@@ -468,7 +468,7 @@ export default {
             if (!immersive) {
                 this.openInANewTab(this.deviceEditorURL, `device-editor-${this.device.id}`)
             } else {
-                this.navigateTo('editor', event, { target: `device-editor-${this.device.id}` })
+                this.navigateTo({ name: 'device-editor' }, event, { target: `device-editor-${this.device.id}` })
             }
         },
         async openTunnel ({
diff --git a/frontend/src/pages/instance/Overview.vue b/frontend/src/pages/instance/Overview.vue
@@ -234,34 +234,33 @@ export default {
         }
     },
     watch: {
-        'instance.id': function (old, news) {
-            this.loadLogs()
-            this.getUpdateSchedule(this.instance.id)
+        instance: {
+            handler: function (instance) {
+                if (instance) {
+                    this.loadLogs()
+                    this.getUpdateSchedule(instance.id)
+                }
+            },
+            immediate: true
         }
     },
-    mounted () {
-        this.loadLogs()
-        this.getUpdateSchedule(this.instance.id)
-    },
     methods: {
         openUrl () {
             this.openInANewTab(this.instance.url, `_${this.instance.id}`)
         },
         loadLogs () {
-            if (this.instance && this.instance.id) {
-                this.loading = true
-                this.loadItems(this.instance.id)
-                    .then((data) => {
-                        this.auditLog = data.log
-                    })
-                    .catch((error) => {
-                        console.error('Error loading logs:', error)
-                        this.auditLog = []
-                    })
-                    .finally(() => {
-                        this.loading = false
-                    })
-            }
+            this.loading = true
+            this.loadItems(this.instance.id)
+                .then((data) => {
+                    this.auditLog = data.log
+                })
+                .catch((error) => {
+                    console.error('Error loading logs:', error)
+                    this.auditLog = []
+                })
+                .finally(() => {
+                    this.loading = false
+                })
         },
         loadItems: async function (instanceId, cursor) {
             return await InstanceApi.getInstanceAuditLog(instanceId, null, cursor, 4)
diff --git a/frontend/src/store/modules/account/index.js b/frontend/src/store/modules/account/index.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/test/e2e/frontend/environments/standard.js b/test/e2e/frontend/environments/standard.js

Original file line number	Diff line number	Diff line change
`@@ -468,7 +468,7 @@ export default {`
`468`	`468`	`if (!immersive) {`
`469`	`469`	this.openInANewTab(this.deviceEditorURL, `device-editor-${this.device.id}`)
`470`	`470`	`} else {`
`471`		- this.navigateTo('editor', event, { target: `device-editor-${this.device.id}` })
	`471`	+ this.navigateTo({ name: 'device-editor' }, event, { target: `device-editor-${this.device.id}` })
`472`	`472`	`}`
`473`	`473`	`},`
`474`	`474`	`async openTunnel ({`