Frontend for Uploading a Snapshot

[Steve-Mcl]

Task 2 of 3 (part of #3628)

Description

Adds UI parts for Uploading a Snapshot

Details

• The "Upload Snapshot" buttons are added to the instance and device pages (not the application page: reason provided on the issue)
  • The buttons placed adjacent to the "Create Snapshot" buttons on both the table search row AND the empty state actions slot
  • The buttons are only visible to users with the snapshots:import role
  • Fixes the gap between the buttons in the empty state actions slot (in line with the SCSS gap setting for the table search actions slot)
• Adds shared component frontend/src/components/dialogs/SnapshotImportDialog.vue
  • this is reused on both the instance and device pages
• Adds a utility function isSnapshot in forge/routes/api/snapshot.js
  • this is used to do basic validation the snapshot before attempting to import it (browser does not have native support for JSON schema validation, so this is a simple check to ensure the snapshot has the required properties and are of the correct type)
• Adds audit log entry for the import action
  • corrects icon for snapshot log entries
• Adds E2E tests for the new endpoint for both instances and devices

NOTE

• Backend and Docs are in separate PRs (see parent story Enable Snapshot Upload Functionality #3628)

E2E tests added

  FlowForge - Devices - With Billing
    upload snapshot with credentials
    upload snapshot without credentials
  FlowForge - Instance Snapshots
    upload snapshot with credentials
    upload snapshot without credentials
  FlowForge shows audit logs
    for when a snapshot is imported

Related Issue(s)

Closes #3866
Story: #3628

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

• Includes a DB migration? -> add the area:migration label

[Steve-Mcl]

@joepavitt Please review but do not merge until part 1 (Backend API #3868 is merged)

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.26%. Comparing base (41da1c0) to head (0415dce).
Report is 1 commits behind head on main.

❗ Current head 0415dce differs from pull request most recent head e83aa02. Consider uploading reports for the commit e83aa02 to get more accurate results

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3869   +/-   ##
=======================================
  Coverage   79.26%   79.26%           
=======================================
  Files         281      281           
  Lines       12720    12720           
  Branches     2837     2837           
=======================================
  Hits        10082    10082           
  Misses       2638     2638           

Flag	Coverage Δ
backend	79.26% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[joepavitt]

I think the order of the buttons should be this way arund:

The primary option being on the right is a better standard to go by, the "Upload Snapshot" will be less-used

[Steve-Mcl]

I think the order of the buttons should be this way arund:

Resolved in swap upload and create buttons on both empty-state and search toolbar 2e296a6

DEMO

[Steve-Mcl]

@joepavitt backend part is now merged (I have updated this PR too) so you can merge upon approval. Ta.

[joepavitt]

Approved subject to final tests passing, which they have done previously