From 315d5dffa90af79c213faf93c23ec78cc55cf03a Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 20 Feb 2025 12:22:17 +0200
Subject: [PATCH 1/5] show the version history tab for instance owned devices
 to unblock the timeline feature

---
 .../device/VersionHistory/Snapshots/index.vue | 43 ++++++++++++++++++-
 frontend/src/pages/device/index.vue           |  3 +-
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/device/VersionHistory/Snapshots/index.vue b/frontend/src/pages/device/VersionHistory/Snapshots/index.vue
index dcd4b57c9c..6a073367ef 100644
--- a/frontend/src/pages/device/VersionHistory/Snapshots/index.vue
+++ b/frontend/src/pages/device/VersionHistory/Snapshots/index.vue
@@ -1,6 +1,44 @@
 <template>
     <div id="device-snapshots">
-        <div class="space-y-6">
+        <div v-if="isOwnedByAnInstance" class="space-y-6">
+            <EmptyState>
+                <template #img>
+                    <img src="../../../../images/empty-states/instance-snapshots.png">
+                </template>
+                <template #header>Snapshots are available when a Remote Instance is assigned to an Application</template>
+                <template #message>
+                    <p>
+                        Snapshots are point-in-time backups of your Node-RED Instances
+                        and capture the flows, credentials and runtime settings.
+                    </p>
+                    <p v-if="device.ownerType !== 'application'" class="block">
+                        A Remote Instance must first be <a class="ff-link" href="https://flowfuse.com/docs/device-agent/register/#assign-the-device-to-an-application" target="_blank" rel="noreferrer">assigned to an Application</a>, in order to create snapshots.
+                    </p>
+                    <p v-else-if="!developerMode" class="block">
+                        A Remote Instance must be in Developer Mode and online to create a Snapshot.
+                    </p>
+                </template>
+                <template v-if="hasPermission('device:snapshot:create')" #actions>
+                    <ff-button
+                        v-if="hasPermission('snapshot:import')"
+                        kind="secondary" :disabled="busy || !features.deviceEditor || device.ownerType !== 'application'"
+                        data-action="import-snapshot"
+                        @click="$emit('show-import-snapshot-dialog')"
+                    >
+                        <template #icon-left><UploadIcon /></template>Upload Snapshot
+                    </ff-button>
+                    <ff-button
+                        kind="primary"
+                        :disabled="!developerMode || busy || !features.deviceEditor || device.ownerType !== 'application'"
+                        data-action="create-snapshot"
+                        @click="$emit('show-create-snapshot-dialog')"
+                    >
+                        <template #icon-left><PlusSmIcon /></template>Create Snapshot
+                    </ff-button>
+                </template>
+            </EmptyState>
+        </div>
+        <div v-else class="space-y-6">
             <ff-loading v-if="loading" message="Loading Snapshots..." />
             <template v-else-if="features.deviceEditor && snapshots.length > 0">
                 <ff-data-table data-el="snapshots" class="space-y-4" :columns="columns" :rows="snapshots" :show-search="true" search-placeholder="Search Snapshots...">
@@ -182,6 +220,9 @@ export default {
         },
         developerMode () {
             return this.device?.mode === 'developer'
+        },
+        isOwnedByAnInstance () {
+            return this.device?.ownerType === 'instance'
         }
     },
     watch: {
diff --git a/frontend/src/pages/device/index.vue b/frontend/src/pages/device/index.vue
index a70072e025..152917724e 100644
--- a/frontend/src/pages/device/index.vue
+++ b/frontend/src/pages/device/index.vue
@@ -247,8 +247,7 @@ export default {
                 {
                     label: 'Version History',
                     to: { name: 'DeviceSnapshots', params: { id: this.$route.params.id } },
-                    tag: 'version-history',
-                    hidden: !(this.device?.ownerType !== 'instance')
+                    tag: 'version-history'
                 },
                 { label: 'Audit Log', to: { name: 'device-audit-log' }, tag: 'device-audit-log' },
                 {

From 17a1105b854b1e0f1c2bc322c1309dc9283e9cf2 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 20 Feb 2025 13:02:24 +0200
Subject: [PATCH 2/5] disable the upload snapshot for instance owned devices

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

diff --git a/frontend/src/pages/device/VersionHistory/index.vue b/frontend/src/pages/device/VersionHistory/index.vue
index 9bf43a681e..d843c5f8e0 100644
--- a/frontend/src/pages/device/VersionHistory/index.vue
+++ b/frontend/src/pages/device/VersionHistory/index.vue
@@ -32,7 +32,7 @@
                     v-if="hasPermission('snapshot:import')"
                     kind="secondary"
                     data-action="import-snapshot"
-                    :disabled="busy"
+                    :disabled="busy || isOwnedByAnInstance"
                     @click="showImportSnapshotDialog"
                 >
                     <template #icon-left><UploadIcon /></template>Upload Snapshot
@@ -135,6 +135,9 @@ export default {
         },
         busy () {
             return this.busyMakingSnapshot || this.busyImportingSnapshot
+        },
+        isOwnedByAnInstance () {
+            return this.device?.ownerType === 'instance'
         }
     },
     methods: {

From 927b51c115fdee47f18fe3da43d1c93a858050d9 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 20 Feb 2025 13:06:46 +0200
Subject: [PATCH 3/5] fix failing e2e test

---
 .../frontend/cypress/tests/devices/snapshots.spec.js  | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/test/e2e/frontend/cypress/tests/devices/snapshots.spec.js b/test/e2e/frontend/cypress/tests/devices/snapshots.spec.js
index a395082d27..64de223cc5 100644
--- a/test/e2e/frontend/cypress/tests/devices/snapshots.spec.js
+++ b/test/e2e/frontend/cypress/tests/devices/snapshots.spec.js
@@ -24,8 +24,15 @@ describe('FlowForge - Devices', () => {
         cy.get('[data-el="page-banner-feature-unavailable"]').should('exist')
     })
 
-    it('does not expose a "Snapshots" tab if assigned to an Instance', () => {
+    it.only('exposes the "Version History" tab if assigned to an Instance but the Snapshots tab has an empty state message', () => {
         cy.contains('span', 'assigned-device-a').click()
-        cy.get('[data-nav="version-history"]').should('not.exist')
+        cy.get('[data-nav="version-history"]').should('exist')
+        cy.get('[data-nav="version-history"]').click()
+
+        cy.get('[data-action="import-snapshot"]').should('exist')
+        cy.get('[data-action="import-snapshot"]').should('be.disabled')
+
+        cy.get('[data-el="empty-state"]').should('exist')
+        cy.get('[data-el="empty-state"]').contains('Snapshots are available when a Remote Instance is assigned to an Application')
     })
 })

From c431ee0757a8a538d0bdb310c9214aa56811acd0 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 20 Feb 2025 13:08:22 +0200
Subject: [PATCH 4/5] add missing feature banner if feature is missing and
 remove testing leftover

---
 frontend/src/pages/device/VersionHistory/Snapshots/index.vue | 2 +-
 test/e2e/frontend/cypress/tests/devices/snapshots.spec.js    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/device/VersionHistory/Snapshots/index.vue b/frontend/src/pages/device/VersionHistory/Snapshots/index.vue
index 6a073367ef..68988d0107 100644
--- a/frontend/src/pages/device/VersionHistory/Snapshots/index.vue
+++ b/frontend/src/pages/device/VersionHistory/Snapshots/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="device-snapshots">
         <div v-if="isOwnedByAnInstance" class="space-y-6">
-            <EmptyState>
+            <EmptyState :feature-unavailable="!features.deviceEditor" :feature-unavailable-message="'This requires Developer Mode on Devices, which is a FlowFuse Enterprise Feature'">
                 <template #img>
                     <img src="../../../../images/empty-states/instance-snapshots.png">
                 </template>
diff --git a/test/e2e/frontend/cypress/tests/devices/snapshots.spec.js b/test/e2e/frontend/cypress/tests/devices/snapshots.spec.js
index 64de223cc5..3b1b8470f4 100644
--- a/test/e2e/frontend/cypress/tests/devices/snapshots.spec.js
+++ b/test/e2e/frontend/cypress/tests/devices/snapshots.spec.js
@@ -24,7 +24,7 @@ describe('FlowForge - Devices', () => {
         cy.get('[data-el="page-banner-feature-unavailable"]').should('exist')
     })
 
-    it.only('exposes the "Version History" tab if assigned to an Instance but the Snapshots tab has an empty state message', () => {
+    it('exposes the "Version History" tab if assigned to an Instance but the Snapshots tab has an empty state message', () => {
         cy.contains('span', 'assigned-device-a').click()
         cy.get('[data-nav="version-history"]').should('exist')
         cy.get('[data-nav="version-history"]').click()

From ee71af9ba5c968b18a94045250249740988c220c Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 20 Feb 2025 13:40:23 +0200
Subject: [PATCH 5/5] fix feature unavailable banner message and e2e tests

---
 .../pages/device/VersionHistory/Snapshots/index.vue |  2 +-
 .../cypress/tests-ee/devices/snapshots.spec.js      | 13 +++++++++++--
 .../cypress/tests/devices/snapshots.spec.js         |  3 +++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/device/VersionHistory/Snapshots/index.vue b/frontend/src/pages/device/VersionHistory/Snapshots/index.vue
index 68988d0107..d8e0cc8b9f 100644
--- a/frontend/src/pages/device/VersionHistory/Snapshots/index.vue
+++ b/frontend/src/pages/device/VersionHistory/Snapshots/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="device-snapshots">
         <div v-if="isOwnedByAnInstance" class="space-y-6">
-            <EmptyState :feature-unavailable="!features.deviceEditor" :feature-unavailable-message="'This requires Developer Mode on Devices, which is a FlowFuse Enterprise Feature'">
+            <EmptyState :feature-unavailable="!features.deviceEditor">
                 <template #img>
                     <img src="../../../../images/empty-states/instance-snapshots.png">
                 </template>
diff --git a/test/e2e/frontend/cypress/tests-ee/devices/snapshots.spec.js b/test/e2e/frontend/cypress/tests-ee/devices/snapshots.spec.js
index 5f45aea86e..a5e50ae597 100644
--- a/test/e2e/frontend/cypress/tests-ee/devices/snapshots.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/devices/snapshots.spec.js
@@ -36,9 +36,18 @@ describe('FlowForge - Devices - With Billing', () => {
         cy.visit('/team/bteam/devices')
     })
 
-    it('doesn\'t show a "Snapshots" tab for devices bound to an Instance', () => {
+    it('exposes the "Version History" tab if assigned to an Instance but the Snapshots tab has an empty state message', () => {
         cy.contains('span', 'assigned-device-a').click()
-        cy.get('[data-nav="version-history"]').should('not.exist')
+        cy.get('[data-nav="version-history"]').should('exist')
+        cy.get('[data-nav="version-history"]').click()
+
+        cy.get('[data-action="import-snapshot"]').should('exist')
+        cy.get('[data-action="import-snapshot"]').should('be.disabled')
+
+        cy.get('[data-el="empty-state"]').should('exist')
+        cy.get('[data-el="empty-state"]').contains('Snapshots are available when a Remote Instance is assigned to an Application')
+
+        cy.get('[data-el="page-banner-feature-unavailable"]').should('not.exist')
     })
 
     it('shows a "Snapshots" tab for unassigned devices', () => {
diff --git a/test/e2e/frontend/cypress/tests/devices/snapshots.spec.js b/test/e2e/frontend/cypress/tests/devices/snapshots.spec.js
index 3b1b8470f4..785ce9ec69 100644
--- a/test/e2e/frontend/cypress/tests/devices/snapshots.spec.js
+++ b/test/e2e/frontend/cypress/tests/devices/snapshots.spec.js
@@ -34,5 +34,8 @@ describe('FlowForge - Devices', () => {
 
         cy.get('[data-el="empty-state"]').should('exist')
         cy.get('[data-el="empty-state"]').contains('Snapshots are available when a Remote Instance is assigned to an Application')
+
+        cy.get('[data-el="page-banner-feature-unavailable"]').should('exist')
+        cy.get('[data-el="page-banner-feature-unavailable"]').contains('This is a FlowFuse Enterprise feature. Please upgrade your instance of FlowFuse in order to use it.')
     })
 })