Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display the version history tab to instance owned devices #5153

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 42 additions & 1 deletion frontend/src/pages/device/VersionHistory/Snapshots/index.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,44 @@
<template>
<div id="device-snapshots">
<div class="space-y-6">
<div v-if="isOwnedByAnInstance" class="space-y-6">
<EmptyState :feature-unavailable="!features.deviceEditor">
<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...">
Expand Down Expand Up @@ -182,6 +220,9 @@ export default {
},
developerMode () {
return this.device?.mode === 'developer'
},
isOwnedByAnInstance () {
return this.device?.ownerType === 'instance'
}
},
watch: {
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/pages/device/VersionHistory/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -135,6 +135,9 @@ export default {
},
busy () {
return this.busyMakingSnapshot || this.busyImportingSnapshot
},
isOwnedByAnInstance () {
return this.device?.ownerType === 'instance'
}
},
methods: {
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/pages/device/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
{
Expand Down
13 changes: 11 additions & 2 deletions test/e2e/frontend/cypress/tests-ee/devices/snapshots.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
14 changes: 12 additions & 2 deletions test/e2e/frontend/cypress/tests/devices/snapshots.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,18 @@ 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('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('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.')
})
})
Loading