Generate snapshot-specific filename on download

config/cypress-shared.config.js

@@ -1,3 +1,5 @@
+const { readdir } = require('fs/promises')
+
 module.exports = {
     viewportWidth: 1024,
     viewportHeight: 768,
@@ -7,6 +9,35 @@ module.exports = {
         fixturesFolder: 'test/e2e/frontend/cypress/fixtures',
         screenshotsFolder: 'test/e2e/frontend/cypress/screenshots',
         supportFile: 'test/e2e/frontend/cypress/support/index.js',
-        videosFolder: 'test/e2e/frontend/cypress/videos'
+        videosFolder: 'test/e2e/frontend/cypress/videos',
+        setupNodeEvents (on, config) {
+            on('task', {
+                // Check if a file exists in a dir. Unlike cypress readFile,
+                // this can be used with a regex for 'fileName'
+                fileExists (options) {
+                    const baseDir = options.dir
+                    let fileName = options.file
+                    let debug = ''
+                    return readdir(baseDir).then(files => {
+                        if (options.file) {
+                            return files.includes(options.file)
+                        } else if (options.fileRE) {
+                            const re = new RegExp(options.fileRE)
+                            fileName = re.toString()
+                            // fileName looks like a regex
+                            debug = debug + JSON.stringify(files)
+                            const filteredList = files.filter(file => !!file.match(re))
+                            return filteredList.length === 1
+                        }
+                        return false
+                    }).then(result => {
+                        if (!result) {
+                            throw new Error(`${fileName} not found in ${baseDir} ${debug}`)
+                        }
+                        return true
+                    })
+                }
+            })
+        }
     }
 }

frontend/src/pages/instance/Snapshots/dialogs/SnapshotExportDialog.vue

@@ -104,7 +104,8 @@ export default {
                 snapshotApi.exportInstanceSnapshot(this.project.id, this.snapshot.id, opts).then((data) => {
                     return data
                 }).then(data => {
-                    this.download(data, 'snapshot.json')
+                    const snapshotDate = this.snapshot.updatedAt.replace(/[-:]/g, '').replace(/\..*$/, '').replace('T', '-')
+                    this.download(data, `snapshot-${this.snapshot.id}-${snapshotDate}.json`)
                     alerts.emit('Snapshot exported.', 'confirmation')
                     this.$refs.dialog.close()
                 }).catch(err => {
@@ -131,7 +132,7 @@ export default {
                 document.body.removeChild(element)
             }
         },
-        generateRandomKey (length = 32) {
+        generateRandomKey (length = 16) {
             const array = new Uint8Array(length)
             window.crypto.getRandomValues(array)
             return Array.from(array, byte => ('0' + (byte & 0xFF).toString(16)).slice(-2)).join('')

test/e2e/frontend/cypress/tests/instances/snapshots.spec.js

@@ -1,5 +1,4 @@
 /// <reference types="cypress" />
-const path = require('path')
 describe('FlowForge - Instance Snapshots', () => {
     beforeEach(() => {
         cy.intercept('GET', '/api/*/projects/*/snapshots').as('getProjectSnapshots')
@@ -92,11 +91,14 @@ describe('FlowForge - Instance Snapshots', () => {
         cy.get('[data-el="dialog-export-snapshot"] [data-action="dialog-confirm"]').click()
 
         // wait for `api/v1/projects/*/snapshots/*/export` to respond
-        cy.wait('@exportSnapshot')
-
-        // check the downloaded file
-        const downloadsFolder = Cypress.config('downloadsFolder')
-        cy.readFile(path.join(downloadsFolder, 'snapshot.json'))
+        let response
+        cy.wait('@exportSnapshot').then(interception => {
+            response = interception.response.body
+            // check the downloaded file
+            const downloadsFolder = Cypress.config('downloadsFolder')
+            // generate the expected snapshot filename structure
+            cy.task('fileExists', { dir: downloadsFolder, fileRE: `snapshot-${response.id}-\\d{8}-\\d{6}\\.json` })
+        })
     })
 
     it('download snapshot package.json', () => {
@@ -106,7 +108,7 @@ describe('FlowForge - Instance Snapshots', () => {
         cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(2).click()
 
         const downloadsFolder = Cypress.config('downloadsFolder')
-        cy.readFile(path.join(downloadsFolder, 'package.json'))
+        cy.task('fileExists', { dir: downloadsFolder, file: 'package.json' })
     })
 
     it('can delete a snapshot', () => {