From 4f0ff1d365a3b233ed5e337672f3f723a378e799 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 1 Oct 2024 11:19:55 +0300
Subject: [PATCH 01/47] add bulk notification update

---
 forge/db/models/Notification.js       | 17 ++++++++
 forge/routes/api/userNotifications.js | 63 ++++++++++++++++-----------
 forge/services/notifications.js       |  8 ++++
 3 files changed, 63 insertions(+), 25 deletions(-)
 create mode 100644 forge/services/notifications.js

diff --git a/forge/db/models/Notification.js b/forge/db/models/Notification.js
index f299238e68..15f6111977 100644
--- a/forge/db/models/Notification.js
+++ b/forge/db/models/Notification.js
@@ -89,6 +89,23 @@ module.exports = {
                         count,
                         notifications: rows
                     }
+                },
+                markNotificationsAsRead: async ({ read = true, ids = [] }, user) => {
+                    if (ids.length === 0) {
+                        return
+                    }
+
+                    ids = ids.map(id => Number.isNaN(id) ? M.Notification.decodeHashid(id) : id)
+
+                    await M.Notification.update(
+                        { read: read ? 1 : 0 },
+                        {
+                            where: {
+                                id: ids.map(M.Notification.decodeHashid),
+                                UserId: user.id
+                            }
+                        }
+                    )
                 }
             }
         }
diff --git a/forge/routes/api/userNotifications.js b/forge/routes/api/userNotifications.js
index e921f35a6c..f2d633b0e7 100644
--- a/forge/routes/api/userNotifications.js
+++ b/forge/routes/api/userNotifications.js
@@ -1,3 +1,5 @@
+const { getNotifications } = require('../../services/notifications.js')
+
 /**
  * User Notification api routes
  *
@@ -27,35 +29,46 @@ module.exports = async function (app) {
             }
         }
     }, async (request, reply) => {
-        const paginationOptions = app.getPaginationOptions(request)
-        const notifications = await app.db.models.Notification.forUser(request.session.User, paginationOptions)
-        notifications.notifications = app.db.views.Notification.notificationList(notifications.notifications)
+        const notifications = await getNotifications(app, request)
+
         reply.send(notifications)
     })
 
     // Bulk update
-    // app.put('/', {
-    //     schema: {
-    //         summary: 'Mark notifications as read',
-    //         tags: ['User'],
-    //         body: {
-    //             type: 'object',
-    //             properties: {
-    //                 id: { type: 'string' },
-    //                 read: { type: 'boolean' }
-    //             }
-    //         },
-    //         response: {
-    //             200: {
-    //                 $ref: 'APIStatus'
-    //             },
-    //             '4xx': {
-    //                 $ref: 'APIError'
-    //             }
-    //         }
-    //     }
-    // }, async (request, reply) => {
-    // })
+    app.put('/', {
+        schema: {
+            summary: 'Mark notifications as read',
+            tags: ['User'],
+            body: {
+                type: 'object',
+                properties: {
+                    ids: { type: 'array', items: { type: 'string' } },
+                    read: { type: 'boolean' }
+                }
+            },
+            response: {
+                200: {
+                    type: 'object',
+                    properties: {
+                        meta: { $ref: 'PaginationMeta' },
+                        count: { type: 'number' },
+                        notifications: { $ref: 'NotificationList' }
+                    }
+                },
+                '4xx': {
+                    $ref: 'APIError'
+                }
+            }
+        }
+    }, async (request, reply) => {
+        const payload = { read: request.body.read, ids: request.body.ids }
+
+        await app.db.models.Notification.markNotificationsAsRead(payload, request.session.User)
+
+        const notifications = await getNotifications(app, request)
+
+        reply.send(notifications)
+    })
 
     // Bulk delete
     // app.delete('/', {
diff --git a/forge/services/notifications.js b/forge/services/notifications.js
new file mode 100644
index 0000000000..9e46b90c36
--- /dev/null
+++ b/forge/services/notifications.js
@@ -0,0 +1,8 @@
+module.exports.getNotifications = async (app, request) => {
+    const paginationOptions = app.getPaginationOptions(request)
+    const notifications = await app.db.models.Notification.forUser(request.session.User, paginationOptions)
+
+    notifications.notifications = app.db.views.Notification.notificationList(notifications.notifications)
+
+    return notifications
+}

From d773207fd6f9631cc9a51f8fd89f6aecda5e8f83 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 1 Oct 2024 11:20:29 +0300
Subject: [PATCH 02/47] add bulkNotification client call

---
 frontend/src/api/user.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/src/api/user.js b/frontend/src/api/user.js
index 8f21ada2ec..21bf7c906a 100644
--- a/frontend/src/api/user.js
+++ b/frontend/src/api/user.js
@@ -94,7 +94,18 @@ const markNotificationRead = async (id) => {
         read: true
     })
 }
-
+const markNotificationsBulk = async (ids, data = { read: true }) => {
+    return client.put('/api/v1/user/notifications/', {
+        ids,
+        ...data
+    }).then(res => {
+        res.data.notifications = res.data.notifications.map(n => {
+            n.createdSince = daysSince(n.createdAt)
+            return n
+        })
+        return res.data
+    })
+}
 const getTeamInvitations = async () => {
     return client.get('/api/v1/user/invitations').then(res => {
         res.data.invitations = res.data.invitations.map(r => {
@@ -240,6 +251,7 @@ export default {
     deleteUser,
     getNotifications,
     markNotificationRead,
+    markNotificationsBulk,
     getTeamInvitations,
     acceptTeamInvitation,
     rejectTeamInvitation,

From deb71df3f16cbdbe6108e5ebc5241a60cd5bc3ac Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 1 Oct 2024 11:20:49 +0300
Subject: [PATCH 03/47] add a set notification store action

---
 frontend/src/store/account.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/store/account.js b/frontend/src/store/account.js
index 5c35f37e45..4d350fc413 100644
--- a/frontend/src/store/account.js
+++ b/frontend/src/store/account.js
@@ -389,6 +389,9 @@ const actions = {
             })
             .catch(_ => {})
     },
+    setNotifications (state, notifications) {
+        state.commit('setNotifications', notifications)
+    },
     async getInvitations (state) {
         await userApi.getTeamInvitations()
             .then((invitations) => {

From a87a2c4eea19dbbf5cbe3c2767442ed7aa2b4758 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 1 Oct 2024 11:22:53 +0300
Subject: [PATCH 04/47] bubble up onSelect events

---
 frontend/src/components/notifications/Generic.vue              | 2 ++
 frontend/src/components/notifications/invitations/Accepted.vue | 2 ++
 frontend/src/components/notifications/invitations/Received.vue | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/frontend/src/components/notifications/Generic.vue b/frontend/src/components/notifications/Generic.vue
index dae05e30a4..b7450d2f34 100644
--- a/frontend/src/components/notifications/Generic.vue
+++ b/frontend/src/components/notifications/Generic.vue
@@ -3,6 +3,8 @@
         :notification="notification"
         :selections="selections"
         data-el="generic-notification" :to="to"
+        @selected="onSelect"
+        @deselected="onDeselect"
     >
         <template #icon>
             <component :is="notificationData.iconComponent" />
diff --git a/frontend/src/components/notifications/invitations/Accepted.vue b/frontend/src/components/notifications/invitations/Accepted.vue
index 07b6e7ea70..15d381f670 100644
--- a/frontend/src/components/notifications/invitations/Accepted.vue
+++ b/frontend/src/components/notifications/invitations/Accepted.vue
@@ -3,6 +3,8 @@
         :notification="notification"
         :selections="selections"
         data-el="invitation-message" :to="to"
+        @selected="onSelect"
+        @deselected="onDeselect"
     >
         <template #icon>
             <UserAddIcon />
diff --git a/frontend/src/components/notifications/invitations/Received.vue b/frontend/src/components/notifications/invitations/Received.vue
index 9dca53832a..b1b7ec5141 100644
--- a/frontend/src/components/notifications/invitations/Received.vue
+++ b/frontend/src/components/notifications/invitations/Received.vue
@@ -3,6 +3,8 @@
         :notification="notification"
         :selections="selections"
         data-el="invitation-message" :to="{name: 'User Invitations'}"
+        @selected="onSelect"
+        @deselected="onDeselect"
     >
         <template #icon>
             <UserAddIcon />

From 08ee3c85c25899d58c5dac5de4cb0fd125515c19 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 1 Oct 2024 11:25:36 +0300
Subject: [PATCH 05/47] add ui functionality to interact with notifications

---
 .../notifications/NotificationsDrawer.vue     | 39 ++++++++++++++-----
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
index 3719b76199..7923a06446 100644
--- a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
+++ b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
@@ -8,12 +8,12 @@
                 </ff-checkbox>
             </div>
 
-            <!--            <div class="actions">-->
-            <!--                <span class="forge-badge" :class="{disabled: !canSelectAll}" @click="selectAll">select all</span>-->
-            <!--                <span class="forge-badge" :class="{disabled: !canDeselectAll}" @click="deselectAll">deselect all</span>-->
-            <!--                <span class="forge-badge disabled">mark as read</span>-->
-            <!--                <span class="forge-badge disabled">mark as unread</span>-->
-            <!--            </div>-->
+            <div class="actions">
+                <span class="forge-badge" :class="{disabled: !canSelectAll}" @click="selectAll">select all</span>
+                <span class="forge-badge" :class="{disabled: !canDeselectAll}" @click="deselectAll">deselect all</span>
+                <span class="forge-badge" :class="{disabled: !canMarkAsRead}" @click="bulkNotificationAction(true)">mark as read</span>
+                <span class="forge-badge" :class="{disabled: !canMarkAsUnread}" @click="bulkNotificationAction(false)">mark as unread</span>
+            </div>
         </div>
         <ul v-if="hasNotificationMessages" class="messages-wrapper" data-el="messages-wrapper">
             <li v-for="notification in filteredNotifications" :key="notification.id" data-el="message">
@@ -37,8 +37,11 @@
 
 <script>
 import { markRaw } from 'vue'
-import { mapGetters } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
+
+import userAPI from '../../../api/user.js'
 
+import alerts from '../../../services/alerts.js'
 import GenericNotification from '../../notifications/Generic.vue'
 import TeamInvitationAcceptedNotification from '../../notifications/invitations/Accepted.vue'
 import TeamInvitationReceivedNotification from '../../notifications/invitations/Received.vue'
@@ -55,11 +58,17 @@ export default {
     computed: {
         ...mapGetters('account', ['notifications']),
         canSelectAll () {
-            return this.notifications.length !== this.selections.length
+            return this.filteredNotifications.length !== this.selections.length
         },
         canDeselectAll () {
             return this.selections.length > 0
         },
+        canMarkAsRead () {
+            return this.selections.filter(s => s.read === false).length > 0
+        },
+        canMarkAsUnread () {
+            return this.selections.filter(s => s.read === true).length > 0
+        },
         hasNotificationMessages () {
             return this.filteredNotifications.length > 0
         },
@@ -67,7 +76,11 @@ export default {
             return this.hideReadNotifications ? this.notifications.filter(n => !n.read) : this.notifications
         }
     },
+    unmounted () {
+        this.selections = []
+    },
     methods: {
+        ...mapActions('account', ['setNotifications']),
         getNotificationsComponent (notification) {
             let comp = this.componentCache[notification.type]
             if (comp) {
@@ -99,10 +112,18 @@ export default {
             }
         },
         selectAll () {
-            this.selections = [...this.notifications]
+            this.selections = [...this.filteredNotifications]
         },
         deselectAll () {
             this.selections = []
+        },
+        bulkNotificationAction (markAsRead = true) {
+            userAPI.markNotificationsBulk(this.selections.map(n => n.id), { read: markAsRead })
+                .then(response => this.setNotifications(response.notifications))
+                .catch(() => alerts.emit('Whoops! Something went wrong.', 'warning'))
+                .finally(() => {
+                    this.selections = []
+                })
         }
     }
 }

From bc326cf2bb98a72257289d6842a999b20fa511e8 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 1 Oct 2024 11:25:40 +0300
Subject: [PATCH 06/47] bubble up onSelect events

---
 .../src/components/notifications/Notification.vue    | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/frontend/src/components/notifications/Notification.vue b/frontend/src/components/notifications/Notification.vue
index db1d13333f..25739bde15 100644
--- a/frontend/src/components/notifications/Notification.vue
+++ b/frontend/src/components/notifications/Notification.vue
@@ -19,6 +19,9 @@
             </div>
         </div>
         <div class="footer">
+            <div class="action" @click.prevent.stop>
+                <ff-checkbox v-model="isSelected" @click="toggleSelection" />
+            </div>
             <slot name="timestamp">
                 <span v-ff-tooltip:left="tooltip"> {{ notification.createdSince }} </span>
             </slot>
@@ -135,6 +138,15 @@ export default {
                 background-color: $info;
             }
         }
+
+        .footer {
+            display: flex;
+            justify-content: space-between;
+
+            .action {
+                margin-left: -15px;
+            }
+        }
     }
 }
 </style>

From 9bc34698640108694318d3b54175b8e60d494ca4 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 1 Oct 2024 15:57:29 +0300
Subject: [PATCH 07/47] styling

---
 .../components/notifications/Notification.vue | 105 +-----
 .../notifications/invitations/Accepted.vue    |   8 +-
 .../notifications/invitations/Received.vue    |   2 +-
 .../stylesheets/components/notifications.scss | 344 +++++++++++-------
 4 files changed, 239 insertions(+), 220 deletions(-)

diff --git a/frontend/src/components/notifications/Notification.vue b/frontend/src/components/notifications/Notification.vue
index 25739bde15..331098cfad 100644
--- a/frontend/src/components/notifications/Notification.vue
+++ b/frontend/src/components/notifications/Notification.vue
@@ -1,30 +1,28 @@
 <template>
-    <div class="message" :class="messageClass" @click="go(to)">
+    <div class="message-wrapper" :class="messageClass" @click="go(to)">
+        <div class="action" @click.prevent.stop>
+            <ff-checkbox v-model="isSelected" @click="toggleSelection" />
+        </div>
         <div class="body">
-            <div class="icon ff-icon ff-icon-lg">
-                <slot name="icon" />
-            </div>
-            <div class="text">
-                <div class="header">
-                    <h4 class="title"><slot name="title" /></h4>
-                    <div class="counter">
-                        <slot name="counter">
-                            <ff-notification-pill v-if="counter" v-ff-tooltip:left="counter + ' occurrences'" :count="counter" />
-                        </slot>
-                    </div>
+            <div class="header">
+                <div class="icon ff-icon ff-icon-lg">
+                    <slot name="icon" />
                 </div>
-                <div class="content">
-                    <slot name="message" />
+                <h4 class="title"><slot name="title" /></h4>
+                <div class="counter">
+                    <slot name="counter">
+                        <ff-notification-pill v-if="counter" v-ff-tooltip:left="counter + ' occurrences'" :count="counter" />
+                    </slot>
                 </div>
             </div>
-        </div>
-        <div class="footer">
-            <div class="action" @click.prevent.stop>
-                <ff-checkbox v-model="isSelected" @click="toggleSelection" />
+            <div class="text">
+                <slot name="message" />
+            </div>
+            <div class="footer">
+                <slot name="timestamp">
+                    <span v-ff-tooltip:left="tooltip"> {{ notification.createdSince }} </span>
+                </slot>
             </div>
-            <slot name="timestamp">
-                <span v-ff-tooltip:left="tooltip"> {{ notification.createdSince }} </span>
-            </slot>
         </div>
     </div>
 </template>
@@ -85,68 +83,3 @@ export default {
     }
 }
 </script>
-
-<style scoped lang="scss">
-.messages-wrapper {
-    $read: $ff-grey-400;
-    $info: blue;
-    $warning: $ff-yellow-600;
-    $error: $ff-red-500;
-    .message {
-        .icon {
-            min-width: 20px;
-            min-height: 20px;
-            max-width: fit-content;
-            max-height: fit-content;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .counter {
-            margin-top: 0.2rem;
-
-            .ff-notification-pill {
-                background-color: $read;
-                color: white;
-                padding: 2px 7px;
-                border-radius: 6px;
-                font-size: 0.65rem;
-            }
-        }
-
-        &.unread {
-            border-left: 3px solid $info;
-
-            &.warning {
-                border-left: 3px solid $warning;
-
-                .counter .ff-notification-pill {
-                    background-color: $warning;
-                }
-            }
-
-            &.error {
-                border-left: 3px solid $error;
-
-                .counter .ff-notification-pill {
-                    background-color: $error;
-                }
-            }
-
-            .counter .ff-notification-pill {
-                background-color: $info;
-            }
-        }
-
-        .footer {
-            display: flex;
-            justify-content: space-between;
-
-            .action {
-                margin-left: -15px;
-            }
-        }
-    }
-}
-</style>
diff --git a/frontend/src/components/notifications/invitations/Accepted.vue b/frontend/src/components/notifications/invitations/Accepted.vue
index 15d381f670..f73ee99f04 100644
--- a/frontend/src/components/notifications/invitations/Accepted.vue
+++ b/frontend/src/components/notifications/invitations/Accepted.vue
@@ -13,7 +13,13 @@
             Team Invitation: Accepted
         </template>
         <template #message>
-            <i>"{{ inviteeName }}"</i> has accepted your invitation to join <i>"{{ teamName }}"</i> as a <i>"{{ role }}".</i>
+            <p>
+                <i>"{{ inviteeName }}"</i>
+                has accepted your invitation to join
+                <i>"{{ teamName }}"</i>
+                as a
+                <i>"{{ role }}".</i>
+            </p>
         </template>
     </NotificationMessage>
 </template>
diff --git a/frontend/src/components/notifications/invitations/Received.vue b/frontend/src/components/notifications/invitations/Received.vue
index b1b7ec5141..7a0411fa90 100644
--- a/frontend/src/components/notifications/invitations/Received.vue
+++ b/frontend/src/components/notifications/invitations/Received.vue
@@ -13,7 +13,7 @@
             Team Invitation
         </template>
         <template #message>
-            You have been invited by <i>"{{ invitorName }}"</i> to join <i>"{{ teamName }}"</i>.
+            <p>You have been invited by <i>"{{ invitorName }}"</i> to join <i>"{{ teamName }}"</i>.</p>
         </template>
     </NotificationMessage>
 </template>
diff --git a/frontend/src/stylesheets/components/notifications.scss b/frontend/src/stylesheets/components/notifications.scss
index 62c855bf92..a9766300e4 100644
--- a/frontend/src/stylesheets/components/notifications.scss
+++ b/frontend/src/stylesheets/components/notifications.scss
@@ -1,157 +1,237 @@
 .ff-notification-interview {
-    max-width: 450px;
-    border: 1px solid $ff-grey-400;
-    background-color: $ff-white;
-    box-shadow: -6px 6px 6px #00000040;
-    border-radius: 0 6px 6px 0;
-    padding: 12px 9px 12px 18px;
-    border: 1px solid $ff-blue-700;
-    border-left: 8px solid $ff-blue-700;
-    h3 {
-        font-size: 1.1rem;
-        margin-bottom: 12px;
-    }
-    p {
-        font-size: 1.1rem;
-    }
-    &--actions {
-        margin-top: 24px;
-        gap: 12px;
-        display: flex;
-        flex-direction: row-reverse;
-        justify-content: space-between;
-        font-size: 1rem;
-        .ff-btn.ff-btn--primary {
-            background-color: $ff-blue-700;
-            border-color: $ff-blue-700;
-            &:hover {
-                background-color: $ff-blue-800;
-            }
-        }
+  max-width: 450px;
+  background-color: $ff-white;
+  box-shadow: -6px 6px 6px #00000040;
+  border-radius: 0 6px 6px 0;
+  padding: 12px 9px 12px 18px;
+  border: 1px solid $ff-blue-700;
+  border-left: 8px solid $ff-blue-700;
+
+  h3 {
+    font-size: 1.1rem;
+    margin-bottom: 12px;
+  }
+
+  p {
+    font-size: 1.1rem;
+  }
+
+  &--actions {
+    margin-top: 24px;
+    gap: 12px;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    font-size: 1rem;
+
+    .ff-btn.ff-btn--primary {
+      background-color: $ff-blue-700;
+      border-color: $ff-blue-700;
+
+      &:hover {
+        background-color: $ff-blue-800;
+      }
     }
+  }
 }
 
-$ff-notifications-drawer-side-padding: 12px;
+$ff-notifications-drawer-side-padding: 6px;
 
 .ff-notifications-drawer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  > .header {
+    border-bottom: 1px solid $ff-grey-300;
+    padding: 10px 0;
+    width: 100%;
+
+    .title {
+      padding: 0 $ff-notifications-drawer-side-padding;
+      margin: 0;
+      color: $ff-grey-800;
+      font-weight: bold;
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+    }
+
+    .actions {
+      margin-top: 5px;
+      padding: 0 12px;
+      display: flex;
+      gap: 5px;
+
+      .forge-badge {
+        background-color: $ff-grey-100;
+        border-radius: 5px;
+
+        &:hover {
+          cursor: pointer;
+          background-color: $ff-grey-300
+        }
+
+        &.disabled {
+          color: $ff-grey-400;
+
+          &:hover {
+            cursor: not-allowed;
+          }
+        }
+      }
+    }
+  }
+
+  .messages-wrapper {
+    flex: 1;
     width: 100%;
-    
-    > .header {
-        border-bottom: 1px solid $ff-grey-300;
-        padding: 10px 0;
-        width: 100%;
-
-        .title {
-            padding: 0 $ff-notifications-drawer-side-padding;
+    background-color: $ff-grey-100;
+    $read: $ff-grey-400;
+    $info: blue;
+    $warning: $ff-yellow-600;
+    $error: $ff-red-500;
+
+    .message-wrapper {
+      display: flex;
+      flex-direction: row;
+      color: $ff-grey-400;
+      background-color: $ff-white;
+      border-bottom: 1px solid $ff-grey-300;
+      border-left: 3px solid rgba(0, 0, 0, 0);
+      transition: ease-in-out .3s;
+      cursor: pointer;
+
+      .counter {
+        margin-top: 0.2rem;
+
+        .ff-notification-pill {
+          background-color: $read;
+          color: white;
+          padding: 2px 7px;
+          border-radius: 6px;
+          font-size: 0.65rem;
+        }
+      }
+
+      .action {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 40px;
+        cursor: default;
+
+        .ff-checkbox {
+          height: 13px;
+          width: 13px;
+          padding: 0;
+
+          span {
             margin: 0;
-            color: $ff-grey-800;
-            font-weight: bold;
-            font-size: 1.25rem;
-            line-height: 1.75rem;
+            padding: 0;
+          }
         }
+      }
 
-        .actions {
-            padding: 0 5px;
-            display: flex;
-            gap: 5px;
+      &:hover .title {
+        color: $ff-blue-500;
+      }
 
-            .forge-badge {
-                background-color: $ff-grey-100;
+      &.unread {
+        border-left: 3px solid $info;
+        border-left-color: $ff-blue-500;
+        color: $ff-grey-800;
 
-                &:hover {
-                    cursor: pointer;
-                    background-color: $ff-grey-300
-                }
+        &.warning {
+          border-left: 3px solid $warning;
 
-                &.disabled {
-                    color: $ff-grey-400;
+          .counter .ff-notification-pill {
+            background-color: $warning;
+          }
+        }
 
-                    &:hover {
-                        cursor: not-allowed;
-                    }
-                }
-            }
+        &.error {
+          border-left: 3px solid $error;
+
+          .counter .ff-notification-pill {
+            background-color: $error;
+          }
         }
-    }
 
-    .messages-wrapper {
-        flex: 1;
-        width: 100%;
-        background-color: $ff-grey-100;
-        
-        .message {
-            color: $ff-grey-400;
-            background-color: $ff-white;
-            border-bottom: 1px solid $ff-grey-300;
-            border-left: 3px solid rgba(0,0,0,0);
-            padding: 9px $ff-notifications-drawer-side-padding;
-            transition: ease-in-out .3s;
-            
-            cursor: pointer;
+        .counter .ff-notification-pill {
+          background-color: $info;
+        }
+      }
 
-            &:hover .title {
-                color: $ff-blue-500;
-            }
-            &.unread {
-                border-left-color: $ff-blue-500;
-                color: $ff-grey-800;
-            }
-            .body {
-                flex: 1;
-                display: flex;
-                align-items: center;
-            }
+      .body {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 9px $ff-notifications-drawer-side-padding;
 
-            .text {
-                padding: 0 $ff-notifications-drawer-side-padding;
-                flex-grow: 1;
-            }
+        .header {
+          gap: 5px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
 
-            .header {
-                display: flex;
-                justify-content: space-between;
-                .title {
-                    flex: 1;
-                    transition: ease-in-out .3s;
-                    h4 {
-                        margin: 0;
-                    }
-                }
-
-                input {
-                    &:hover {
-                        cursor: pointer;
-                    }
-                }
-            }
+          .ff-icon {
+            height: 20px;
+            min-width: 20px;
+            min-height: 20px;
+            max-width: fit-content;
+            max-height: fit-content;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
 
-            .footer {
-                margin-top: 6px;
-                text-align: right;
-                color: $ff-grey-400;
-                font-size: 80%;
-                padding: 0 $ff-notifications-drawer-side-padding;
-            }
+          .title {
+            flex: 1;
+            transition: ease-in-out .3s;
+            margin: 0;
+          }
 
+          input {
             &:hover {
-                background-color: $ff-grey-100;
+              cursor: pointer;
             }
-        }   
-    }
-    
-    .empty {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        color: $ff-grey-400;
-        width: 100%;
+          }
+        }
+
+        .text {
+          display: flex;
+          margin: 10px 0;
+          align-items: center;
+          line-height: 1.5rem;
+        }
+
+        .footer {
+          display: flex;
+          text-align: right;
+          color: $ff-grey-400;
+          font-size: 80%;
+          padding: 0 $ff-notifications-drawer-side-padding;
+          justify-content: flex-end;
+        }
+      }
+
+      &:hover {
         background-color: $ff-grey-100;
+      }
     }
-    
-}
\ No newline at end of file
+  }
+
+  .empty {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: $ff-grey-400;
+    width: 100%;
+    background-color: $ff-grey-100;
+  }
+
+}

From 6401865877267e5d671c1f56ee2a3d788d39f96c Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 1 Oct 2024 16:16:11 +0300
Subject: [PATCH 08/47] styling ocs

---
 .../notifications/NotificationsDrawer.vue     |  2 +-
 .../stylesheets/components/notifications.scss | 25 +++++++++++++------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
index 7923a06446..3f6bbcfa19 100644
--- a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
+++ b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="ff-notifications-drawer" data-el="notifications-drawer">
         <div class="header">
-            <div class="flex">
+            <div class="flex content">
                 <h2 class="title flex-grow">Notifications</h2>
                 <ff-checkbox v-model="hideReadNotifications" class=" mt-2 mr-4" data-action="show-read-check">
                     Hide Read
diff --git a/frontend/src/stylesheets/components/notifications.scss b/frontend/src/stylesheets/components/notifications.scss
index a9766300e4..2d4f1e9bca 100644
--- a/frontend/src/stylesheets/components/notifications.scss
+++ b/frontend/src/stylesheets/components/notifications.scss
@@ -49,13 +49,22 @@ $ff-notifications-drawer-side-padding: 6px;
     padding: 10px 0;
     width: 100%;
 
-    .title {
-      padding: 0 $ff-notifications-drawer-side-padding;
-      margin: 0;
-      color: $ff-grey-800;
-      font-weight: bold;
-      font-size: 1.25rem;
-      line-height: 1.75rem;
+    .content {
+      padding: 0 $ff-notifications-drawer-side-padding*2;
+      display: flex;
+      align-items: baseline;
+
+      .title {
+        margin: 0;
+        color: $ff-grey-800;
+        font-weight: bold;
+        font-size: 1.25rem;
+        line-height: 1.75rem;
+      }
+
+      .ff-checkbox {
+        margin: 0;
+      }
     }
 
     .actions {
@@ -168,7 +177,7 @@ $ff-notifications-drawer-side-padding: 6px;
         flex: 1;
         display: flex;
         flex-direction: column;
-        padding: 9px $ff-notifications-drawer-side-padding;
+        padding: 9px $ff-notifications-drawer-side-padding*2 9px $ff-notifications-drawer-side-padding;
 
         .header {
           gap: 5px;

From 76b286aa496f664cfc00ac5ed1dc40d9d77ad050 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 1 Oct 2024 16:48:47 +0300
Subject: [PATCH 09/47] extract invites to fixtures

---
 .../notifications/alice-invites-to-ateam.json | 19 ++++++
 .../notifications/bob-invites-to-bteam.json   | 19 ++++++
 .../cypress/tests/notifications.spec.js       | 64 ++++++-------------
 3 files changed, 56 insertions(+), 46 deletions(-)
 create mode 100644 test/e2e/frontend/cypress/fixtures/notifications/alice-invites-to-ateam.json
 create mode 100644 test/e2e/frontend/cypress/fixtures/notifications/bob-invites-to-bteam.json

diff --git a/test/e2e/frontend/cypress/fixtures/notifications/alice-invites-to-ateam.json b/test/e2e/frontend/cypress/fixtures/notifications/alice-invites-to-ateam.json
new file mode 100644
index 0000000000..ac7a07b779
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/notifications/alice-invites-to-ateam.json
@@ -0,0 +1,19 @@
+{
+  "id": "1",
+  "type": "team-invite",
+  "createdAt": null,
+  "read": false,
+  "data": {
+    "invite": {
+      "id": "abcd1"
+    },
+    "team": {
+      "id": "gY9GQjDb2k",
+      "name": "ATeam"
+    },
+    "invitor": {
+      "username": "alice"
+    },
+    "role": 30
+  }
+}
diff --git a/test/e2e/frontend/cypress/fixtures/notifications/bob-invites-to-bteam.json b/test/e2e/frontend/cypress/fixtures/notifications/bob-invites-to-bteam.json
new file mode 100644
index 0000000000..73908419f4
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/notifications/bob-invites-to-bteam.json
@@ -0,0 +1,19 @@
+{
+  "id": "2",
+  "type": "team-invite",
+  "createdAt": null,
+  "read": false,
+  "data": {
+    "invite": {
+      "id": "abcd2"
+    },
+    "team": {
+      "id": "gY9GQjDb2k",
+      "name": "BTeam"
+    },
+    "invitor": {
+      "username": "bob"
+    },
+    "role": 30
+  }
+}
diff --git a/test/e2e/frontend/cypress/tests/notifications.spec.js b/test/e2e/frontend/cypress/tests/notifications.spec.js
index 06cd7730a8..611b3a9056 100644
--- a/test/e2e/frontend/cypress/tests/notifications.spec.js
+++ b/test/e2e/frontend/cypress/tests/notifications.spec.js
@@ -1,3 +1,5 @@
+const aliceInviteToATeam = require('../fixtures/notifications/alice-invites-to-ateam.json')
+const bobInviteToATeam = require('../fixtures/notifications/bob-invites-to-bteam.json')
 describe('FlowForge - Notifications', () => {
     describe('Team Invitations', () => {
         describe('appear as notification messages', () => {
@@ -12,42 +14,12 @@ describe('FlowForge - Notifications', () => {
                     count: 2,
                     notifications: [
                         {
-                            id: '1',
-                            type: 'team-invite',
-                            createdAt: new Date().setTime((new Date()).getTime() - 3600000),
-                            read: false,
-                            data: {
-                                invite: {
-                                    id: 'abcd1'
-                                },
-                                team: {
-                                    id: 'gY9GQjDb2k',
-                                    name: 'ATeam'
-                                },
-                                invitor: {
-                                    username: 'alice'
-                                },
-                                role: 30
-                            }
+                            ...aliceInviteToATeam,
+                            createdAt: new Date().setTime((new Date()).getTime() - 3600000)
                         },
                         {
-                            id: '2',
-                            type: 'team-invite',
-                            createdAt: new Date().setTime((new Date()).getTime() - 3600000),
-                            read: false,
-                            data: {
-                                invite: {
-                                    id: 'abcd2'
-                                },
-                                team: {
-                                    id: 'gY9GQjDb2k',
-                                    name: 'BTeam'
-                                },
-                                invitor: {
-                                    username: 'bob'
-                                },
-                                role: 30
-                            }
+                            ...bobInviteToATeam,
+                            createdAt: new Date().setTime((new Date()).getTime() - 3600000)
                         }
                     ]
                 }).as('getNotifications')
@@ -64,19 +36,19 @@ describe('FlowForge - Notifications', () => {
                 cy.wait('@getTeams')
                 cy.wait('@getNotifications')
 
-                cy.get('[data-el="right-drawer"').should('not.be.visible')
+                cy.get('[data-el="right-drawer"]').should('not.be.visible')
 
                 cy.get('[data-el="desktop-nav-right"]').within(() => {
-                    cy.get('[data-el="notifications-button"')
+                    cy.get('[data-el="notifications-button"]')
                         .should('exist')
                         .contains(2)
 
-                    cy.get('[data-el="notifications-button"').click()
+                    cy.get('[data-el="notifications-button"]').click()
                 })
 
-                cy.get('[data-el="right-drawer"').should('be.visible')
+                cy.get('[data-el="right-drawer"]').should('be.visible')
 
-                cy.get('[data-el="right-drawer"').within(() => {
+                cy.get('[data-el="right-drawer"]').within(() => {
                     cy.get('[data-el="notifications-drawer"]')
 
                     cy.get('[data-el="invitation-message"]').should('have.length', 2)
@@ -89,7 +61,7 @@ describe('FlowForge - Notifications', () => {
                     cy.url().should('include', 'account/teams/invitations')
                 })
 
-                cy.get('[data-el="notifications-button"')
+                cy.get('[data-el="notifications-button"]')
                     .should('exist')
                     .contains(1)
             })
@@ -135,19 +107,19 @@ describe('FlowForge - Notifications', () => {
                 cy.wait('@getTeams')
                 cy.wait('@getNotifications')
 
-                cy.get('[data-el="right-drawer"').should('not.be.visible')
+                cy.get('[data-el="right-drawer"]').should('not.be.visible')
 
                 cy.get('[data-el="desktop-nav-right"]').within(() => {
-                    cy.get('[data-el="notifications-button"')
+                    cy.get('[data-el="notifications-button"]')
                         .should('exist')
                         .contains(1)
 
-                    cy.get('[data-el="notifications-button"').click()
+                    cy.get('[data-el="notifications-button"]').click()
                 })
 
-                cy.get('[data-el="right-drawer"').should('be.visible')
+                cy.get('[data-el="right-drawer"]').should('be.visible')
 
-                cy.get('[data-el="right-drawer"').within(() => {
+                cy.get('[data-el="right-drawer"]').within(() => {
                     cy.get('[data-el="notifications-drawer"]')
 
                     cy.get('[data-el="invitation-message"]').should('have.length', 1)
@@ -160,7 +132,7 @@ describe('FlowForge - Notifications', () => {
 
                     cy.url().should('include', 'account/teams/invitations')
                 })
-                cy.get('[data-el="notifications-button"')
+                cy.get('[data-el="notifications-button"]')
                     .should('exist')
                     .contains(1).should('not.exist')
             })

From 55fc8dc72b229e03359b824d25d4deea8bba85e7 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 1 Oct 2024 17:00:18 +0300
Subject: [PATCH 10/47] add a new accepted invitation notification e2e test

---
 .../eddy-accepted-invite-to-ateam.json        | 18 ++++++
 .../notifications/instance-crashed.json       |  0
 .../cypress/tests/notifications.spec.js       | 55 +++++++++++++++++++
 3 files changed, 73 insertions(+)
 create mode 100644 test/e2e/frontend/cypress/fixtures/notifications/eddy-accepted-invite-to-ateam.json
 create mode 100644 test/e2e/frontend/cypress/fixtures/notifications/instance-crashed.json

diff --git a/test/e2e/frontend/cypress/fixtures/notifications/eddy-accepted-invite-to-ateam.json b/test/e2e/frontend/cypress/fixtures/notifications/eddy-accepted-invite-to-ateam.json
new file mode 100644
index 0000000000..4647fb2f08
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/notifications/eddy-accepted-invite-to-ateam.json
@@ -0,0 +1,18 @@
+{
+  "id": "vkg9yBPJ5E",
+  "type": "team-invite-accepted-invitor",
+  "createdAt": "2024-08-26T14:01:33.710Z",
+  "read": false,
+  "data": {
+    "team": {
+      "name": "Alice's Team"
+    },
+    "invitee": {
+      "username": "eddy"
+    },
+    "invitor": {
+      "username": "alice"
+    },
+    "role": 5
+  }
+}
diff --git a/test/e2e/frontend/cypress/fixtures/notifications/instance-crashed.json b/test/e2e/frontend/cypress/fixtures/notifications/instance-crashed.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/e2e/frontend/cypress/tests/notifications.spec.js b/test/e2e/frontend/cypress/tests/notifications.spec.js
index 611b3a9056..b868ff8ed1 100644
--- a/test/e2e/frontend/cypress/tests/notifications.spec.js
+++ b/test/e2e/frontend/cypress/tests/notifications.spec.js
@@ -1,5 +1,7 @@
 const aliceInviteToATeam = require('../fixtures/notifications/alice-invites-to-ateam.json')
 const bobInviteToATeam = require('../fixtures/notifications/bob-invites-to-bteam.json')
+const eddyAcceptedInvite = require('../fixtures/notifications/eddy-accepted-invite-to-ateam.json')
+
 describe('FlowForge - Notifications', () => {
     describe('Team Invitations', () => {
         describe('appear as notification messages', () => {
@@ -136,6 +138,59 @@ describe('FlowForge - Notifications', () => {
                     .should('exist')
                     .contains(1).should('not.exist')
             })
+
+            it.only('shows a user accepted invitation notification', () => {
+                cy.login('alice', 'aaPassword')
+
+                cy.intercept('/api/*/user').as('getUser')
+                cy.intercept('/api/*/settings').as('getSettings')
+                cy.intercept('/api/*/user/teams').as('getTeams')
+                cy.intercept('/api/*/user/notifications', {
+                    meta: {},
+                    count: 2,
+                    notifications: [
+                        {
+                            ...eddyAcceptedInvite,
+                            createdAt: new Date().setTime((new Date()).getTime() - 3600000)
+                        }
+                    ]
+                }).as('getNotifications')
+
+                cy.intercept('PUT', '/api/*/user/notifications/*', {}).as('markInvitationRead')
+
+                cy.intercept('/api/*/admin/stats').as('getAdminStats')
+                cy.intercept('/api/*/admin/license').as('getAdminLicense')
+
+                cy.visit('/')
+
+                cy.wait('@getUser')
+                cy.wait('@getSettings')
+                cy.wait('@getTeams')
+                cy.wait('@getNotifications')
+
+                cy.get('[data-el="desktop-nav-right"]').within(() => {
+                    cy.get('[data-el="notifications-button"]')
+                        .should('exist')
+                        .contains(1)
+
+                    cy.get('[data-el="notifications-button"]').click()
+                })
+
+                cy.get('[data-el="right-drawer"]').should('be.visible')
+
+                cy.get('[data-el="right-drawer"]').within(() => {
+                    cy.get('[data-el="notifications-drawer"]')
+
+                    cy.get('[data-el="invitation-message"]').should('have.length', 1)
+
+                    cy.get('[data-el="invitation-message"]').contains('Team Invitation: Accepted')
+                    cy.get('[data-el="invitation-message"]').contains('"eddy" has accepted your invitation to join "Alice\'s Team" as a "dashboard".')
+
+                    cy.get('[data-el="invitation-message"]').contains('Team Invitation').click()
+                    cy.wait('@markInvitationRead')
+                    cy.url().should('include', '/members/general')
+                })
+            })
         })
     })
 })

From 6e425c602718b0c38b699e1b8cd24a969ae3e068 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 1 Oct 2024 17:24:01 +0300
Subject: [PATCH 11/47] add instance crash notification e2e test

---
 .../notifications/instance-crashed.json       | 16 +++++
 .../cypress/tests/notifications.spec.js       | 58 ++++++++++++++++++-
 2 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/test/e2e/frontend/cypress/fixtures/notifications/instance-crashed.json b/test/e2e/frontend/cypress/fixtures/notifications/instance-crashed.json
index e69de29bb2..d4e8f92a55 100644
--- a/test/e2e/frontend/cypress/fixtures/notifications/instance-crashed.json
+++ b/test/e2e/frontend/cypress/fixtures/notifications/instance-crashed.json
@@ -0,0 +1,16 @@
+{
+  "id": "EJbDk594Xk",
+  "type": "instance-crashed",
+  "createdAt": null,
+  "read": false,
+  "data": {
+    "instance": {
+      "id": "cda79585-1112-420e-8652-852fbebb69d7",
+      "name": "instance-1-1"
+    },
+    "meta": {
+      "severity": "error",
+      "counter": 2
+    }
+  }
+}
diff --git a/test/e2e/frontend/cypress/tests/notifications.spec.js b/test/e2e/frontend/cypress/tests/notifications.spec.js
index b868ff8ed1..11d3b26211 100644
--- a/test/e2e/frontend/cypress/tests/notifications.spec.js
+++ b/test/e2e/frontend/cypress/tests/notifications.spec.js
@@ -1,6 +1,7 @@
 const aliceInviteToATeam = require('../fixtures/notifications/alice-invites-to-ateam.json')
 const bobInviteToATeam = require('../fixtures/notifications/bob-invites-to-bteam.json')
 const eddyAcceptedInvite = require('../fixtures/notifications/eddy-accepted-invite-to-ateam.json')
+const instanceCrash = require('../fixtures/notifications/instance-crashed.json')
 
 describe('FlowForge - Notifications', () => {
     describe('Team Invitations', () => {
@@ -139,7 +140,7 @@ describe('FlowForge - Notifications', () => {
                     .contains(1).should('not.exist')
             })
 
-            it.only('shows a user accepted invitation notification', () => {
+            it('shows a user accepted invitation notification', () => {
                 cy.login('alice', 'aaPassword')
 
                 cy.intercept('/api/*/user').as('getUser')
@@ -193,4 +194,59 @@ describe('FlowForge - Notifications', () => {
             })
         })
     })
+
+    describe('Instance Crashes', () => {
+        it('appear as notification messages', () => {
+            cy.login('alice', 'aaPassword')
+
+            cy.intercept('/api/*/user').as('getUser')
+            cy.intercept('/api/*/settings').as('getSettings')
+            cy.intercept('/api/*/user/teams').as('getTeams')
+            cy.intercept('/api/*/user/notifications', {
+                meta: {},
+                count: 1,
+                notifications: [
+                    {
+                        ...instanceCrash,
+                        createdAt: new Date().setTime((new Date()).getTime() - 3600000)
+                    }
+                ]
+            }).as('getNotifications')
+
+            cy.intercept('PUT', '/api/*/user/notifications/*', {}).as('markInvitationRead')
+
+            cy.intercept('/api/*/admin/stats').as('getAdminStats')
+            cy.intercept('/api/*/admin/license').as('getAdminLicense')
+
+            cy.visit('/')
+
+            cy.wait('@getUser')
+            cy.wait('@getSettings')
+            cy.wait('@getTeams')
+            cy.wait('@getNotifications')
+
+            cy.get('[data-el="desktop-nav-right"]').within(() => {
+                cy.get('[data-el="notifications-button"]')
+                    .should('exist')
+                    .contains(2)
+
+                cy.get('[data-el="notifications-button"]').click()
+            })
+
+            cy.get('[data-el="right-drawer"]').should('be.visible')
+
+            cy.get('[data-el="right-drawer"]').within(() => {
+                cy.get('[data-el="notifications-drawer"]')
+
+                cy.get('[data-el="generic-notification"]').should('have.length', 1)
+
+                cy.get('[data-el="generic-notification"]').contains('Node-RED Instance Crashed')
+                cy.get('[data-el="generic-notification"]').contains('"instance-1-1" has crashed')
+
+                cy.get('[data-el="generic-notification"]').contains('Node-RED Instance Crashed').click()
+                cy.wait('@markInvitationRead')
+                cy.url().should('match', /instance\/.*\/overview/)
+            })
+        })
+    })
 })

From cb007395369a33f420b879b3ab19a5723a365a43 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 2 Oct 2024 10:53:33 +0300
Subject: [PATCH 12/47] notifications bulk actions e2e test

---
 .../notifications/NotificationsDrawer.vue     |  36 +++-
 .../components/notifications/Notification.vue |   5 +-
 .../cypress/tests/notifications.spec.js       | 165 ++++++++++++++++++
 3 files changed, 200 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
index 3f6bbcfa19..a8ec82c450 100644
--- a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
+++ b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
@@ -9,10 +9,38 @@
             </div>
 
             <div class="actions">
-                <span class="forge-badge" :class="{disabled: !canSelectAll}" @click="selectAll">select all</span>
-                <span class="forge-badge" :class="{disabled: !canDeselectAll}" @click="deselectAll">deselect all</span>
-                <span class="forge-badge" :class="{disabled: !canMarkAsRead}" @click="bulkNotificationAction(true)">mark as read</span>
-                <span class="forge-badge" :class="{disabled: !canMarkAsUnread}" @click="bulkNotificationAction(false)">mark as unread</span>
+                <span
+                    class="forge-badge"
+                    :class="{disabled: !canSelectAll}"
+                    data-action="select-all"
+                    @click="selectAll"
+                >
+                    select all
+                </span>
+                <span
+                    class="forge-badge"
+                    :class="{disabled: !canDeselectAll}"
+                    data-action="deselect-all"
+                    @click="deselectAll"
+                >
+                    deselect all
+                </span>
+                <span
+                    class="forge-badge"
+                    :class="{disabled: !canMarkAsRead}"
+                    data-action="mark-as-read"
+                    @click="bulkNotificationAction(true)"
+                >
+                    mark as read
+                </span>
+                <span
+                    class="forge-badge"
+                    :class="{disabled: !canMarkAsUnread}"
+                    data-action="mark-as-unread"
+                    @click="bulkNotificationAction(false)"
+                >
+                    mark as unread
+                </span>
             </div>
         </div>
         <ul v-if="hasNotificationMessages" class="messages-wrapper" data-el="messages-wrapper">
diff --git a/frontend/src/components/notifications/Notification.vue b/frontend/src/components/notifications/Notification.vue
index 331098cfad..5d89fa27a6 100644
--- a/frontend/src/components/notifications/Notification.vue
+++ b/frontend/src/components/notifications/Notification.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="message-wrapper" :class="messageClass" @click="go(to)">
         <div class="action" @click.prevent.stop>
-            <ff-checkbox v-model="isSelected" @click="toggleSelection" />
+            <ff-checkbox v-model="isSelected" data-action="select-notification" @click="toggleSelection" />
         </div>
         <div class="body">
             <div class="header">
@@ -63,7 +63,8 @@ export default {
             return {
                 unread: !this.notification.read,
                 warning: this.notification.data?.meta?.severity === 'warning',
-                error: this.notification.data?.meta?.severity === 'error'
+                error: this.notification.data?.meta?.severity === 'error',
+                selected: this.isSelected
             }
         }
     },
diff --git a/test/e2e/frontend/cypress/tests/notifications.spec.js b/test/e2e/frontend/cypress/tests/notifications.spec.js
index 11d3b26211..24546874d7 100644
--- a/test/e2e/frontend/cypress/tests/notifications.spec.js
+++ b/test/e2e/frontend/cypress/tests/notifications.spec.js
@@ -249,4 +249,169 @@ describe('FlowForge - Notifications', () => {
             })
         })
     })
+
+    describe('Can preform bulk actions', () => {
+        beforeEach(() => {
+            cy.login('alice', 'aaPassword')
+
+            cy.intercept('/api/*/user').as('getUser')
+            cy.intercept('/api/*/settings').as('getSettings')
+            cy.intercept('/api/*/user/teams').as('getTeams')
+
+            cy.intercept('PUT', '/api/*/user/notifications/*', {}).as('markInvitationRead')
+
+            cy.intercept('/api/*/admin/stats').as('getAdminStats')
+            cy.intercept('/api/*/admin/license').as('getAdminLicense')
+
+            cy.visit('/')
+        })
+
+        it('has all of the action buttons disabled when no notifications are present', () => {
+            cy.intercept('/api/*/user/notifications', {
+                meta: {},
+                count: 0,
+                notifications: []
+            }).as('getNotifications')
+
+            cy.wait('@getUser')
+            cy.wait('@getSettings')
+            cy.wait('@getTeams')
+            cy.wait('@getNotifications')
+
+            cy.get('[data-el="desktop-nav-right"]').within(() => {
+                cy.get('[data-el="notifications-button"]').click()
+            })
+
+            cy.get('[data-el="right-drawer"]').should('be.visible')
+
+            cy.get('[data-el="notifications-drawer"]').within(() => {
+                cy.get('[data-action="select-all"]').should('have.class', 'disabled')
+                cy.get('[data-action="deselect-all"]').should('have.class', 'disabled')
+                cy.get('[data-action="mark-as-read"]').should('have.class', 'disabled')
+                cy.get('[data-action="mark-as-unread"]').should('have.class', 'disabled')
+            })
+        })
+
+        it('can select and deselect notifications', () => {
+            cy.intercept('/api/*/user/notifications', {
+                meta: {},
+                count: 4,
+                notifications: [
+                    {
+                        ...aliceInviteToATeam,
+                        createdAt: new Date().setTime((new Date()).getTime() - 3600000)
+                    },
+                    {
+                        ...bobInviteToATeam,
+                        createdAt: new Date().setTime((new Date()).getTime() - 3600000)
+                    },
+                    {
+                        ...eddyAcceptedInvite,
+                        createdAt: new Date().setTime((new Date()).getTime() - 3600000),
+                        read: true
+                    },
+                    {
+                        ...instanceCrash,
+                        createdAt: new Date().setTime((new Date()).getTime() - 3600000)
+                    }
+                ]
+            }).as('getNotifications')
+
+            cy.wait('@getUser')
+            cy.wait('@getSettings')
+            cy.wait('@getTeams')
+            cy.wait('@getNotifications')
+
+            cy.get('[data-el="desktop-nav-right"]').within(() => {
+                cy.get('[data-el="notifications-button"]').click()
+            })
+
+            cy.get('[data-el="right-drawer"]').should('be.visible')
+
+            cy.get('[data-el="notifications-drawer"]').within(() => {
+                // has 4 notifications available, should be able to select all but not deselect or mark as read/unread
+                cy.get('[data-action="select-all"]').should('not.have.class', 'disabled')
+                cy.get('[data-action="deselect-all"]').should('have.class', 'disabled')
+                cy.get('[data-action="mark-as-read"]').should('have.class', 'disabled')
+                cy.get('[data-action="mark-as-unread"]').should('have.class', 'disabled')
+
+                // select one read notification
+                //      select all should be enabled because we have other notifications that can be selected
+                //      deselect should be enabled
+                //      mark as read should be enabled
+                //      mark as unread should be disabled
+                //      notification should have class selected?
+                cy.get('[data-el="messages-wrapper"] [data-el="message"]').should('have.length', 3)
+                cy.get('[data-el="messages-wrapper"] [data-el="message"]:first-of-type [data-action="select-notification"]')
+                    .click()
+                cy.get('[data-action="select-all"]').should('not.have.class', 'disabled')
+                cy.get('[data-action="deselect-all"]').should('not.have.class', 'disabled')
+                cy.get('[data-action="mark-as-read"]').should('not.have.class', 'disabled')
+                cy.get('[data-action="mark-as-unread"]').should('have.class', 'disabled')
+                cy.get('[data-el="messages-wrapper"] [data-el="message"] .selected').should('have.length', 1)
+
+                // clicking select all will select all notifications
+                cy.get('[data-action="select-all"]').click()
+                cy.get('[data-action="select-all"]').should('have.class', 'disabled')
+                cy.get('[data-action="deselect-all"]').should('not.have.class', 'disabled')
+                cy.get('[data-el="messages-wrapper"] [data-el="message"] .selected').should('have.length', 3)
+
+                // clicking deselect all will select all notifications
+                cy.get('[data-action="deselect-all"]').click()
+                cy.get('[data-action="deselect-all"]').should('have.class', 'disabled')
+                cy.get('[data-action="select-all"]').should('not.have.class', 'disabled')
+                cy.get('[data-el="messages-wrapper"] [data-el="message"] .selected').should('have.length', 0)
+
+                // selecting all and showing read notifications allows you to select more
+                cy.get('[data-action="select-all"]').click()
+                cy.get('[data-action="select-all"]').should('have.class', 'disabled')
+                cy.get('[data-action="deselect-all"]').should('not.have.class', 'disabled')
+                cy.get('[data-el="messages-wrapper"] [data-el="message"] .selected').should('have.length', 3)
+                cy.get('[data-action="mark-as-read"]').should('not.have.class', 'disabled')
+                cy.get('[data-action="mark-as-unread"]').should('have.class', 'disabled')
+                cy.get('[data-action="show-read-check"]').click()
+                cy.get('[data-action="select-all"]').should('not.have.class', 'disabled')
+
+                // selecting unread notifications will enable the mark as unread button
+                cy.get('[data-action="select-all"]').click()
+                cy.get('[data-action="select-all"]').should('have.class', 'disabled')
+                cy.get('[data-action="mark-as-unread"]').should('not.have.class', 'disabled')
+
+                // marking notifications as read will preform an api call and refresh the notifications list
+                cy.intercept('/api/*/user/notifications', {
+                    meta: {},
+                    count: 4,
+                    notifications: [
+                        {
+                            ...aliceInviteToATeam,
+                            createdAt: new Date().setTime((new Date()).getTime() - 3600000),
+                            read: true
+                        },
+                        {
+                            ...bobInviteToATeam,
+                            createdAt: new Date().setTime((new Date()).getTime() - 3600000),
+                            read: true
+                        },
+                        {
+                            ...eddyAcceptedInvite,
+                            createdAt: new Date().setTime((new Date()).getTime() - 3600000),
+                            read: true
+                        },
+                        {
+                            ...instanceCrash,
+                            createdAt: new Date().setTime((new Date()).getTime() - 3600000),
+                            read: true
+                        }
+                    ]
+                }).as('getNotifications')
+                cy.get('[data-action="mark-as-read"]').click()
+
+                // selecting only read notifications will enable the mark as unread button and keep the mark as read button disabled
+                cy.get('[data-action="select-all"]').click()
+                cy.get('[data-action="select-all"]').should('have.class', 'disabled')
+                cy.get('[data-action="mark-as-unread"]').should('not.have.class', 'disabled')
+                cy.get('[data-action="mark-as-read"]').should('have.class', 'disabled')
+            })
+        })
+    })
 })

From 904e2fa77f1e5e21f965b0bb200d4e0e811296a1 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 2 Oct 2024 11:16:22 +0300
Subject: [PATCH 13/47] add unit test coverage

---
 .../routes/api/userNotifications_spec.js      | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/test/unit/forge/routes/api/userNotifications_spec.js b/test/unit/forge/routes/api/userNotifications_spec.js
index 10612d247e..b4f4b83761 100644
--- a/test/unit/forge/routes/api/userNotifications_spec.js
+++ b/test/unit/forge/routes/api/userNotifications_spec.js
@@ -176,6 +176,40 @@ describe('User Notifications API', async function () {
             aliceNotifications3.notifications[0].should.have.property('read', false)
             aliceNotifications3.notifications[1].should.have.property('read', false)
         })
+        it('user can mark notification as read/unread in bulk', async function () {
+            const notificationType = 'crashed'
+            const notificationRef = `${notificationType}:${TestObjects.Project1.id}`
+            await app.notifications.send(TestObjects.alice, notificationType, { user: 'alice', i: 1 }, notificationRef, { upsert: false })
+            await app.notifications.send(TestObjects.alice, notificationType, { user: 'alice', i: 1 }, notificationRef, { upsert: false })
+
+            const aliceNotifications = await getNotifications(TestObjects.tokens.alice)
+            aliceNotifications.should.have.property('count', 2)
+
+            const ids = aliceNotifications.notifications.map(n => n.id)
+            const response1 = await app.inject({
+                method: 'PUT',
+                url: '/api/v1/user/notifications/',
+                payload: { read: true, ids },
+                cookies: { sid: TestObjects.tokens.alice }
+            })
+            response1.statusCode.should.equal(200)
+
+            const aliceNotifications2 = await getNotifications(TestObjects.tokens.alice)
+            aliceNotifications2.notifications[0].should.have.property('read', true)
+            aliceNotifications2.notifications[1].should.have.property('read', true)
+
+            const response2 = await app.inject({
+                method: 'PUT',
+                url: '/api/v1/user/notifications/',
+                payload: { read: false, ids },
+                cookies: { sid: TestObjects.tokens.alice }
+            })
+            response2.statusCode.should.equal(200)
+
+            const aliceNotifications3 = await getNotifications(TestObjects.tokens.alice)
+            aliceNotifications3.notifications[0].should.have.property('read', false)
+            aliceNotifications3.notifications[1].should.have.property('read', false)
+        })
         it('user cannot modify another users notification', async function () {
             const aliceNotifications = await getNotifications(TestObjects.tokens.alice)
             // Try to update alice's notifications using bob

From 0ace68463fca642a2a8d29f1f207454ccb40ffbc Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 2 Oct 2024 12:01:12 +0300
Subject: [PATCH 14/47] create a new test user to prevent further
 userNotification unit test coupling

---
 test/unit/forge/routes/api/userNotifications_spec.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/test/unit/forge/routes/api/userNotifications_spec.js b/test/unit/forge/routes/api/userNotifications_spec.js
index b4f4b83761..c384bfd0fb 100644
--- a/test/unit/forge/routes/api/userNotifications_spec.js
+++ b/test/unit/forge/routes/api/userNotifications_spec.js
@@ -15,9 +15,11 @@ describe('User Notifications API', async function () {
 
         TestObjects.alice = await app.db.models.User.byUsername('alice')
         TestObjects.bob = await app.db.models.User.create({ username: 'bob', name: 'Bob Solo', email: 'bob@example.com', email_verified: true, password: 'bbPassword', admin: true, sso_enabled: true })
+        TestObjects.colin = await app.db.models.User.create({ username: 'colin', name: 'Colin Solo', email: 'colin@example.com', email_verified: true, password: 'ccPassword', admin: false, sso_enabled: true })
 
         await login('alice', 'aaPassword')
         await login('bob', 'bbPassword')
+        await login('colin', 'ccPassword')
     }
 
     before(async function () {
@@ -179,8 +181,8 @@ describe('User Notifications API', async function () {
         it('user can mark notification as read/unread in bulk', async function () {
             const notificationType = 'crashed'
             const notificationRef = `${notificationType}:${TestObjects.Project1.id}`
-            await app.notifications.send(TestObjects.alice, notificationType, { user: 'alice', i: 1 }, notificationRef, { upsert: false })
-            await app.notifications.send(TestObjects.alice, notificationType, { user: 'alice', i: 1 }, notificationRef, { upsert: false })
+            await app.notifications.send(TestObjects.colin, notificationType, { user: 'colin', i: 1 }, notificationRef, { upsert: false })
+            await app.notifications.send(TestObjects.colin, notificationType, { user: 'colin', i: 1 }, notificationRef, { upsert: false })
 
             const aliceNotifications = await getNotifications(TestObjects.tokens.alice)
             aliceNotifications.should.have.property('count', 2)

From 770b28ca7945191973dce15fe278181090be2b61 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 3 Oct 2024 17:08:37 +0100
Subject: [PATCH 15/47] duplicate unused components

---
 .eslintrc                                     |   2 -
 .../components/ExportProjectComponents.vue    | 101 -------------
 .../components/ImportProjectComponents.vue    | 133 ------------------
 3 files changed, 236 deletions(-)
 delete mode 100644 frontend/src/pages/application/components/ExportProjectComponents.vue
 delete mode 100644 frontend/src/pages/application/components/ImportProjectComponents.vue

diff --git a/.eslintrc b/.eslintrc
index 5f678417bd..e1f5da1104 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -253,8 +253,6 @@
                 "frontend/src/components/tables/cells/TeamTypeCell.vue",
                 "frontend/src/components/tables/cells/UserCell.vue",
                 "frontend/src/components/tables/cells/UserRoleCell.vue",
-                "frontend/src/pages/application/components/ExportProjectComponents.vue",
-                "frontend/src/pages/application/components/ImportProjectComponents.vue",
                 "frontend/src/pages/application/Debug.vue",
                 "frontend/src/pages/device/components/DeviceLastSeenBadge.vue",
                 "frontend/src/pages/device/Overview.vue",
diff --git a/frontend/src/pages/application/components/ExportProjectComponents.vue b/frontend/src/pages/application/components/ExportProjectComponents.vue
deleted file mode 100644
index 6a9c7479d0..0000000000
--- a/frontend/src/pages/application/components/ExportProjectComponents.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-    <div class="space-y-4 my-3">
-        <FormRow v-model="parts.flows" type="checkbox">
-            Flows
-        </FormRow>
-        <div :class="parts.flows?'opacity-100':'opacity-30'">
-            <FormRow v-model="parts.credentials" type="checkbox" :disabled="!parts.flows">
-                Credentials
-            </FormRow>
-        </div>
-        <FormRow v-if="showTemplate" v-model="parts.template" type="checkbox">
-            Template
-        </FormRow>
-        <FormRow v-if="showSecret" v-model="parts.credsSecret" type="text" :disabled="!parts.flows && !parts.credentials">
-            Secret
-            <template #description>Provide a Secret to encrypt the exported Credentials</template>
-        </FormRow>
-        <FormRow v-if="showSettings" v-model="parts.settings" type="checkbox">
-            Application Settings
-        </FormRow>
-        <FormRow v-model="envVarOpts.envVars" type="checkbox">
-            Environment Variables
-        </FormRow>
-        <div :class="['space-y-4', envVarOpts.envVars?'opacity-100':'opacity-30']">
-            <ff-radio-group v-model="envVarOpts.envVarsKo" class="ml-9" orientation="vertical" :options="envVarKeyOptions" />
-        </div>
-    </div>
-</template>
-
-<script>
-import FormRow from '../../../components/FormRow.vue'
-
-/**
- * flows
- * credentials
- * template
- * showSecret
- * envVars
- * envVarsKo
- */
-export default {
-    name: 'ExportProjectComponents',
-    components: {
-        FormRow
-    },
-    props: ['modelValue', 'showSecret', 'showTemplate', 'showSettings'],
-    emits: ['update:modelValue'],
-    setup () {
-        return {
-            envVarKeyOptions: [{
-                label: 'Keys and Values',
-                value: 'all'
-            }, {
-                label: 'Keys Only',
-                value: 'keys'
-            }]
-        }
-    },
-    data () {
-        return {
-            envVarOpts: {
-                envVars: true,
-                envVarsKo: ''
-            }
-        }
-    },
-    computed: {
-        parts: {
-            get () {
-                return this.modelValue
-            },
-            set (localValue) {
-                this.$emit('update:modelValue', localValue)
-            }
-        }
-    },
-    watch: {
-        envVarOpts: {
-            deep: true,
-            handler: function (value) {
-                if (!value.envVars) {
-                    this.parts.envVars = false
-                } else {
-                    this.parts.envVars = value.envVarsKo
-                }
-            }
-        }
-    },
-    mounted () {
-        if (this.parts.envVars === false) {
-            this.envVarOpts.envVars = false
-        } else if (this.parts.envVars === true || this.parts.envVars === 'all') {
-            this.envVarOpts.envVars = true
-            this.envVarOpts.envVarsKo = 'all'
-        } else {
-            this.envVarOpts.envVars = true
-            this.envVarOpts.envVarsKo = 'keys'
-        }
-    }
-}
-</script>
diff --git a/frontend/src/pages/application/components/ImportProjectComponents.vue b/frontend/src/pages/application/components/ImportProjectComponents.vue
deleted file mode 100644
index 29d10e3d6f..0000000000
--- a/frontend/src/pages/application/components/ImportProjectComponents.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-    <div class="space-y-4 my-3">
-        <FormRow ref="flows" v-model="localData.flows" type="file" accept=".json" :error="errors.flows">
-            Flow File
-        </FormRow>
-        <FormRow ref="creds" v-model="localData.creds" type="file" accept=".json" :errors="errors.creds">
-            Credentials File
-        </FormRow>
-        <FormRow v-model="localData.secret" :disabled="withCreds" type="text">
-            Credentials Secret
-        </FormRow>
-    </div>
-</template>
-
-<script>
-import FormRow from '../../../components/FormRow.vue'
-
-export default {
-    name: 'ImportProjectComponent',
-    components: {
-        FormRow
-    },
-    props: ['modelValue'],
-    emits: ['update:modelValue'],
-    data () {
-        return {
-            disableCredsSecret: true,
-            localData: {
-                flows: '',
-                creds: '',
-                secret: ''
-            },
-            errors: {
-                flows: '',
-                creds: '',
-                secret: ''
-            }
-        }
-    },
-    computed: {
-        parts: {
-            get () {
-                return this.modelValue
-            },
-            set (localValue) {
-                this.$emit('update:modelValue', localValue)
-            }
-        },
-        withCreds () {
-            return this.disableCredsSecret
-        }
-    },
-    watch: {
-        localData: {
-            deep: true,
-            handler (value) {
-                if (value.flows?.val) {
-                    this.getFlowFile(value.flows.obj.files[0])
-                }
-                if (value.creds?.val) {
-                    this.disableCredsSecret = false
-                    this.getCredsFile(value.creds.obj.files[0])
-                }
-
-                this.parts.credsSecret = value.secret
-            }
-        }
-    },
-    mounted () {
-        this.disableCredsSecret = true
-        this.localData.flows = null
-        this.localData.creds = null
-        this.localData.secret = ''
-    },
-    methods: {
-        getFlowFile (file) {
-            const reader = new FileReader()
-            reader.onload = (evt) => {
-                try {
-                    const flow = JSON.parse(reader.result)
-                    if (Array.isArray(flow)) {
-                        // Good Start
-                        this.parts.flows = reader.result
-                        this.errors.flows = ''
-                    } else {
-                        this.parts.flows = undefined
-                        this.errors.flows = 'Does not look like a flow file'
-                    }
-                } catch (err) {
-                    // problem
-                    console.error(err)
-                    this.parts.flows = undefined
-                    this.errors.flows = 'Not JSON'
-                }
-            }
-            reader.readAsText(file)
-        },
-        getCredsFile (file) {
-            const reader = new FileReader()
-            reader.onload = (evt) => {
-                try {
-                    const creds = JSON.parse(reader.result)
-                    if (creds.$) {
-                        // Good Start
-                        this.parts.credentials = reader.result
-                        this.errors.creds = ''
-                    } else {
-                        this.parts.credentials = undefined
-                        this.errors.creds = 'Does not look like a creds file'
-                    }
-                } catch (err) {
-                    // problem
-                    console.error(err)
-                    this.parts.credentials = undefined
-                    this.errors.creds = 'Not JSON'
-                }
-            }
-            reader.readAsText(file)
-        },
-        clear () {
-            if (this.localData.flows?.obj) {
-                this.localData.flows.obj.value = ''
-            }
-            this.localData.flows = undefined
-            if (this.localData.creds?.obj) {
-                this.localData.creds.obj.value = ''
-            }
-            this.localData.creds = undefined
-            this.localData.secret = ''
-        }
-    }
-}
-</script>

From c305f909ee8680b06174d96f603193ff65416a3c Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 3 Oct 2024 17:09:41 +0100
Subject: [PATCH 16/47] repurpose ExportInstanceComponents as
 ExportImportComponents

---
 ...ponents.vue => ExportImportComponents.vue} | 41 +++++++++++++++++--
 1 file changed, 37 insertions(+), 4 deletions(-)
 rename frontend/src/pages/instance/components/{ExportInstanceComponents.vue => ExportImportComponents.vue} (74%)

diff --git a/frontend/src/pages/instance/components/ExportInstanceComponents.vue b/frontend/src/pages/instance/components/ExportImportComponents.vue
similarity index 74%
rename from frontend/src/pages/instance/components/ExportInstanceComponents.vue
rename to frontend/src/pages/instance/components/ExportImportComponents.vue
index 6f29e78dc3..de81e8dee6 100644
--- a/frontend/src/pages/instance/components/ExportInstanceComponents.vue
+++ b/frontend/src/pages/instance/components/ExportImportComponents.vue
@@ -1,9 +1,12 @@
 <template>
-    <div class="space-y-4 my-3">
+    <div class="space-y-4">
+        <p v-if="header" class="text-gray-800 block text-sm font-medium">
+            {{ header }}
+        </p>
         <FormRow v-model="parts.flows" type="checkbox">
             Flows
         </FormRow>
-        <div :class="parts.flows?'opacity-100':'opacity-30'">
+        <div v-if="showCredentials" :class="parts.flows?'opacity-100':'opacity-30'">
             <FormRow v-model="parts.credentials" type="checkbox" :disabled="!parts.flows">
                 Credentials
             </FormRow>
@@ -24,6 +27,7 @@
         <div :class="['space-y-4', envVarOpts.envVars?'opacity-100':'opacity-30']">
             <ff-radio-group v-model="envVarOpts.envVarsKo" class="ml-9" orientation="vertical" :options="envVarKeyOptions" />
         </div>
+        <div v-if="error" class="text-red-400 text-xs">{{ error }}</div>
     </div>
 </template>
 
@@ -39,11 +43,40 @@ import FormRow from '../../../components/FormRow.vue'
  * envVarsKo
  */
 export default {
-    name: 'ExportInstanceComponents',
+    name: 'ExportImportComponents',
     components: {
         FormRow
     },
-    props: ['modelValue', 'showSecret', 'showTemplate', 'showSettings'],
+    props: {
+        modelValue: {
+            type: Object,
+            required: true
+        },
+        showSecret: {
+            type: Boolean,
+            default: false
+        },
+        showTemplate: {
+            type: Boolean,
+            default: false
+        },
+        showCredentials: {
+            type: Boolean,
+            default: true
+        },
+        showSettings: {
+            type: Boolean,
+            default: false
+        },
+        header: {
+            type: String,
+            default: ''
+        },
+        error: {
+            type: String,
+            default: ''
+        }
+    },
     emits: ['update:modelValue'],
     setup () {
         return {

From 504a6f64ab9b1518786c886ac1cc77472defe5d5 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 3 Oct 2024 17:10:37 +0100
Subject: [PATCH 17/47] update snapshot controller to support component options

---
 forge/db/controllers/Snapshot.js | 119 ++++++++++++++++++++++++++-----
 1 file changed, 100 insertions(+), 19 deletions(-)

diff --git a/forge/db/controllers/Snapshot.js b/forge/db/controllers/Snapshot.js
index 3ed3dfa7c6..7bc7f13ce1 100644
--- a/forge/db/controllers/Snapshot.js
+++ b/forge/db/controllers/Snapshot.js
@@ -20,9 +20,22 @@ module.exports = {
      * @param {String} [options.credentialSecret] secret to encrypt credentials with.
      * @param {Object} [options.credentials] (Optional) credentials to export. If omitted, credentials of the current owner will be re-encrypted with the provided `credentialSecret`.
      * @param {Object} [options.owner] (Optional) The owner project or device. If omitted, the snapshot's owner will be obtained from the database.
+     * @param {Object} [options.components] (Optional) Components to include in the snapshot. Defaults to all components.
+     * @param {Boolean} [options.components.flows] (Optional) Include flows in the snapshot. Defaults to true.
+     * @param {Boolean} [options.components.credentials] (Optional) Include credentials in the snapshot. Defaults to true if `options.components.flows` is true, otherwise false.
+     * @param {'all' | 'keys' | false} [options.components.envVars='all'] (Optional) Env Var options: `'All'` will keep keys and values, `'keys'` will keep only keys, `false` will remove them.
      */
     exportSnapshot: async function (app, snapshot, options) {
-        if (!options.credentialSecret) {
+        const components = {
+            flows: options.components?.flows ?? true,
+            credentials: options.components?.credentials ?? true,
+            envVars: ['all', 'keys', false].includes(options.components?.envVars) ? options.components.envVars : 'all'
+        }
+        if (components.flows === false) {
+            components.credentials = false // no flows, no credentials!
+        }
+
+        if (components.credentials !== false && !options.credentialSecret) {
             return null
         }
 
@@ -54,6 +67,28 @@ module.exports = {
             ...snapshot.toJSON()
         }
 
+        // include/exclude components of the snapshot
+        if (components.flows === false) {
+            result.flows = {
+                flows: [],
+                credentials: {} // no flows, no credentials!
+            }
+        } else if (components.credentials === false) {
+            result.flows = {
+                flows: snapshot.flows.flows || [],
+                credentials: {} // no credentials!
+            }
+        }
+        if (components.envVars === false) {
+            result.settings.env = {}
+        } else if (components.envVars === 'keys' && snapshot.settings?.env && Object.keys(snapshot.settings.env).length > 0) {
+            const keysOnly = Object.keys(snapshot.settings.env).reduce((acc, key) => {
+                acc[key] = ''
+                return acc
+            }, {})
+            result.settings = Object.assign({}, snapshot.settings, { env: keysOnly })
+        }
+
         // loop keys of result.settings.env and remove any that match FF_*
         Object.keys(result.settings.env).forEach((key) => {
             if (key.startsWith('FF_')) {
@@ -61,15 +96,19 @@ module.exports = {
             }
         })
 
-        // use the secret stored in the snapshot, if available...
-        const currentSecret = result.credentialSecret || owner.credentialSecret || (owner.getCredentialSecret && await owner.getCredentialSecret())
-        const credentials = options.credentials ? options.credentials : result.flows.credentials
+        if (components.flows === false || components.credentials === false) {
+            result.flows.credentials = {}
+        } else {
+            // use the secret stored in the snapshot, if available...
+            const currentSecret = result.credentialSecret || owner.credentialSecret || (owner.getCredentialSecret && await owner.getCredentialSecret())
+            const credentials = options.credentials ? options.credentials : result.flows.credentials
 
-        // if provided credentials already encrypted: "exportCredentials" will just return the same credentials
-        // if provided credentials are raw: "exportCredentials" will encrypt them with the secret provided
-        // if credentials are not provided: project's flows credentials will be used, they will be encrypted with the provided secret
-        const keyToDecrypt = (options.credentials && options.credentials.$) ? options.credentialSecret : currentSecret
-        result.flows.credentials = app.db.controllers.Project.exportCredentials(credentials || {}, keyToDecrypt, options.credentialSecret)
+            // if provided credentials already encrypted: "exportCredentials" will just return the same credentials
+            // if provided credentials are raw: "exportCredentials" will encrypt them with the secret provided
+            // if credentials are not provided: project's flows credentials will be used, they will be encrypted with the provided secret
+            const keyToDecrypt = (options.credentials && options.credentials.$) ? options.credentialSecret : currentSecret
+            result.flows.credentials = app.db.controllers.Project.exportCredentials(credentials || {}, keyToDecrypt, options.credentialSecret)
+        }
 
         return result
     },
@@ -143,8 +182,13 @@ module.exports = {
      * @param {*} snapshot - snapshot data
      * @param {String} credentialSecret - secret to encrypt credentials with. Can be null if the snapshot does not contain credentials.
      * @param {*} user - user who uploaded the snapshot
+     * @param {Object} [options] - additional options
+     * @param {Object} [options.components] - Include flows in the snapshot. Defaults to true.
+     * @param {Boolean} [options.components.flows] - Include flows in the snapshot. Defaults to true.
+     * @param {Boolean} [options.components.credentials] - Include credentials in the snapshot. Defaults to true if `options.components.flows` is true, otherwise false.
+     * @param {'all' | 'keys' | false} [options.components.envVars='all'] - Env Var options: `'All'` will keep keys and values, `'keys'` will keep only keys, `false` will remove them.
      */
-    async uploadSnapshot (app, owner, snapshot, credentialSecret, user) {
+    async uploadSnapshot (app, owner, snapshot, credentialSecret, user, options) {
         // Validate the owner
         let ownerType
         if (owner.constructor.name === 'Project') {
@@ -155,33 +199,70 @@ module.exports = {
             throw new Error('Invalid owner type')
         }
 
+        const components = {
+            flows: options?.components?.flows ?? true,
+            credentials: options?.components?.credentials ?? true,
+            envVars: ['all', 'keys', false].includes(options?.components?.envVars) ? options?.components.envVars : 'all'
+        }
+        if (components.flows === false) {
+            components.credentials = false // no flows, no credentials!
+        }
+
+        // shallow clone the snapshot before modifying it
+        const importSnapshot = Object.assign({}, snapshot)
+
+        // include/exclude components of the snapshot
+        if (components.flows === false) {
+            importSnapshot.flows = {
+                flows: [],
+                credentials: {} // no flows, no credentials!
+            }
+        } else if (components.credentials === false) {
+            importSnapshot.flows = {
+                flows: snapshot.flows.flows || [],
+                credentials: {} // no credentials!
+            }
+        }
+        if (components.envVars === false) {
+            importSnapshot.settings = {
+                ...snapshot.settings,
+                env: {} // no env vars!
+            }
+        } else if (components.envVars === 'keys' && snapshot.settings?.env && Object.keys(snapshot.settings.env).length > 0) {
+            const keysOnly = Object.keys(snapshot.settings.env).reduce((acc, key) => {
+                acc[key] = ''
+                return acc
+            }, {})
+            importSnapshot.settings = Object.assign({}, snapshot.settings, { env: keysOnly })
+        }
+
         const targetCredentialSecret = owner.credentialSecret || (owner.getCredentialSecret && await owner.getCredentialSecret()) || credentialSecret
         // 1. If the snapshot includes credentials but no credentialSecret, we should reject it
         // 2. if the snapshot includes credentials and a credentialSecret, we should reencrypt for the owner
-        if (snapshot.flows.credentials?.$) {
+        if (importSnapshot.flows.credentials?.$) {
             if (!credentialSecret) {
                 throw new Error('Missing credentialSecret')
             }
             // Need to re-encrypt the credentials for the target
-            snapshot.flows.credentials = app.db.controllers.Project.exportCredentials(snapshot.flows.credentials, credentialSecret, targetCredentialSecret)
+            importSnapshot.flows.credentials = app.db.controllers.Project.exportCredentials(importSnapshot.flows.credentials, credentialSecret, targetCredentialSecret)
         }
 
         const ProjectId = ownerType === 'instance' ? owner.id : null
         const DeviceId = ownerType === 'device' ? owner.id : null
 
         const snapshotOptions = {
-            name: snapshot.name,
-            description: snapshot.description || '',
+            name: importSnapshot.name,
+            description: importSnapshot.description || '',
             credentialSecret: targetCredentialSecret,
             settings: {
-                settings: snapshot.settings?.settings || {},
-                env: snapshot.settings?.env || {},
-                modules: snapshot.settings?.modules || {}
+                settings: importSnapshot.settings?.settings || {},
+                env: importSnapshot.settings?.env || {},
+                modules: importSnapshot.settings?.modules || {}
 
             },
             flows: {
-                flows: snapshot.flows.flows || [],
-                credentials: snapshot.flows.credentials || { }
+                flows: importSnapshot.flows.flows || [],
+                credentials: importSnapshot.flows.credentials || { }
             },
             ProjectId,
             DeviceId,

From cb8dba1957cb4edb2f1826e9ff1e0793541f64bf Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 3 Oct 2024 17:12:14 +0100
Subject: [PATCH 18/47] update snapshot import/export API to support component
 options

---
 forge/routes/api/snapshot.js | 46 ++++++++++++++++++++++++++++++------
 1 file changed, 39 insertions(+), 7 deletions(-)

diff --git a/forge/routes/api/snapshot.js b/forge/routes/api/snapshot.js
index 4ab2de5314..7f2631f0dc 100644
--- a/forge/routes/api/snapshot.js
+++ b/forge/routes/api/snapshot.js
@@ -227,7 +227,20 @@ module.exports = async function (app) {
             body: {
                 type: 'object',
                 properties: {
-                    credentialSecret: { type: 'string' }
+                    credentialSecret: { type: 'string' },
+                    components: {
+                        type: 'object',
+                        properties: {
+                            flows: { type: 'boolean', default: true },
+                            credentials: { type: 'boolean', default: true },
+                            envVars: {
+                                anyOf: [
+                                    { type: 'string', enum: ['all', 'keys'] },
+                                    { type: 'boolean', enum: [false] }
+                                ]
+                            }
+                        }
+                    }
                 }
             },
             response: {
@@ -243,7 +256,8 @@ module.exports = async function (app) {
         const options = {
             credentialSecret: request.body.credentialSecret,
             credentials: request.body.credentials,
-            owner: request.owner // the instance or device that owns the snapshot
+            owner: request.owner, // the instance or device that owns the snapshot
+            components: request.body.components
         }
 
         if (!options.credentialSecret) {
@@ -304,7 +318,20 @@ module.exports = async function (app) {
                         },
                         required: ['name', 'flows', 'settings']
                     },
-                    credentialSecret: { type: 'string' }
+                    credentialSecret: { type: 'string' },
+                    components: {
+                        type: 'object',
+                        properties: {
+                            flows: { type: 'boolean', default: true },
+                            credentials: { type: 'boolean', default: true },
+                            envVars: {
+                                anyOf: [
+                                    { type: 'string', enum: ['all', 'keys'] },
+                                    { type: 'boolean', enum: [false] }
+                                ]
+                            }
+                        }
+                    }
                 }
             },
             response: {
@@ -323,12 +350,17 @@ module.exports = async function (app) {
             reply.code(400).send({ code: 'bad_request', error: 'owner and snapshot are mandatory in the body' })
             return
         }
-        if (snapshot.flows.credentials?.$ && !request.body.credentialSecret) {
-            reply.code(400).send({ code: 'bad_request', error: 'Credential secret is required when importing a snapshot with credentials' })
-            return
+        if (request.body.components?.credentials !== false) {
+            if (snapshot.flows.credentials?.$ && !request.body.credentialSecret) {
+                reply.code(400).send({ code: 'bad_request', error: 'Credential secret is required when importing a snapshot with credentials' })
+                return
+            }
         }
         try {
-            const newSnapshot = await snapshotController.uploadSnapshot(owner, snapshot, request.body.credentialSecret, request.session.User)
+            const options = {
+                components: request.body.components || null
+            }
+            const newSnapshot = await snapshotController.uploadSnapshot(owner, snapshot, request.body.credentialSecret, request.session.User, options)
             if (!newSnapshot) {
                 throw new Error('Failed to upload snapshot')
             }

From 884fde6550dc674fad7d31e38410273ee1dd4e1f Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 3 Oct 2024 17:14:09 +0100
Subject: [PATCH 19/47] update frontend API to support component options

---
 frontend/src/api/snapshots.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/api/snapshots.js b/frontend/src/api/snapshots.js
index 8cd5986b5d..b438388268 100644
--- a/frontend/src/api/snapshots.js
+++ b/frontend/src/api/snapshots.js
@@ -45,12 +45,13 @@ const exportSnapshot = (snapshotId, options) => {
  * @param {Object} snapshot - snapshot object to import
  * @param {String} [credentialSecret] - secret to use when decrypting credentials in the snapshot object (optional/only required when the snapshot contains credentials)
  */
-const importSnapshot = async (ownerId, ownerType, snapshot, credentialSecret) => {
+const importSnapshot = async (ownerId, ownerType, snapshot, credentialSecret, options) => {
     return client.post('/api/v1/snapshots/import', {
         ownerId,
         ownerType,
         snapshot,
-        credentialSecret
+        credentialSecret,
+        components: options?.components
     }).then(res => {
         const props = {
             'snapshot-id': res.data.id

From 034a7b027ea9a7f5c0c06c027f5612e68df4c662 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 3 Oct 2024 17:14:48 +0100
Subject: [PATCH 20/47] Update UI for snapshot import/export component options

---
 .../dialogs/SnapshotImportDialog.vue          | 49 ++++++++--
 .../dialogs/SnapshotExportDialog.vue          | 92 ++++++++++++-------
 .../instance/components/InstanceForm.vue      |  2 +-
 3 files changed, 101 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/dialogs/SnapshotImportDialog.vue b/frontend/src/components/dialogs/SnapshotImportDialog.vue
index 91fbeafd82..21005fd294 100644
--- a/frontend/src/components/dialogs/SnapshotImportDialog.vue
+++ b/frontend/src/components/dialogs/SnapshotImportDialog.vue
@@ -15,7 +15,6 @@
                         </ff-button>
                     </template>
                 </FormRow>
-                <FormRow v-if="snapshotNeedsSecret" v-model="input.secret" :error="validateField.secret ? errors.secret : ''" data-form="import-snapshot-secret">Credentials Secret</FormRow>
                 <FormRow v-model="input.name" :error="validateField.name ? errors.name : ''" data-form="import-snapshot-name">Name</FormRow>
                 <FormRow data-form="import-snapshot-description">
                     Description
@@ -23,6 +22,8 @@
                         <textarea v-model="input.description" rows="8" class="ff-input ff-text-input" style="height: auto" />
                     </template>
                 </FormRow>
+                <ImportInstanceComponents v-model="parts" header="Select the components to include in the upload" :error="validateField.parts ? errors.parts : ''" :showCredentials="snapshotNeedsSecret" />
+                <FormRow v-if="snapshotNeedsSecret && parts.credentials !== false" v-model="input.secret" :error="validateField.secret ? errors.secret : ''" data-form="import-snapshot-secret">Credentials Secret</FormRow>
             </form>
         </template>
     </ff-dialog>
@@ -32,6 +33,7 @@
 import { DocumentIcon } from '@heroicons/vue/outline'
 
 import snapshotsApi from '../../api/snapshots.js'
+import ImportInstanceComponents from '../../pages/instance/components/ExportImportComponents.vue'
 import alerts from '../../services/alerts.js'
 import { isSnapshot } from '../../utils/snapshot.js'
 import FormRow from '../FormRow.vue'
@@ -40,7 +42,8 @@ export default {
     name: 'SnapshotImportDialog',
     components: {
         FormRow,
-        DocumentIcon
+        DocumentIcon,
+        ImportInstanceComponents
     },
     props: {
         owner: {
@@ -84,21 +87,31 @@ export default {
             errors: {
                 file: '',
                 secret: '',
-                name: ''
+                name: '',
+                parts: ''
             },
             validateField: {
                 file: false,
                 secret: false,
-                name: false
+                name: false,
+                parts: false
+            },
+            parts: {
+                flows: true,
+                credentials: true,
+                envVars: 'all'
             }
         }
     },
     computed: {
         formValid () {
-            return !Object.values(this.errors).some(error => !!error) && this.input.file && this.input.name && (!this.snapshotNeedsSecret || this.input.secret)
+            return !Object.values(this.errors).some(error => !!error) && this.input.file && this.input.name && (this.parts.flows || this.parts.envVars)
         },
         snapshotNeedsSecret () {
-            return !!(this.input.snapshot && this.input.snapshot.flows?.credentials)
+            if (!this.input.snapshot?.flows?.credentials) {
+                return false
+            }
+            return Object.keys(this.input.snapshot.flows.credentials).length > 0
         }
     },
     watch: {
@@ -119,6 +132,15 @@ export default {
                 this.validateField.secret = true
                 this.validate()
             }
+        },
+        parts: {
+            handler () {
+                if (this.shown) {
+                    this.validateField.parts = true
+                    this.validate()
+                }
+            },
+            deep: true
         }
     },
     mounted () {
@@ -129,6 +151,7 @@ export default {
             this.errors.file = null
             this.validateField.file = true
             this.validateField.secret = true
+            this.validateField.parts = true
             const reader = new FileReader()
             reader.onload = () => {
                 const data = reader.result
@@ -157,7 +180,12 @@ export default {
         validate () {
             this.errors.file = !this.input.file ? 'Snapshot file is required' : ''
             this.errors.name = !this.input.name ? 'Name is required' : ''
-            this.errors.secret = this.snapshotNeedsSecret ? (this.input.secret ? '' : 'Secret is required') : ''
+            if (this.parts.flows && this.parts.credentials) {
+                this.errors.secret = this.snapshotNeedsSecret ? (this.input.secret ? '' : 'Secret is required') : ''
+            } else {
+                this.errors.secret = ''
+            }
+            this.errors.parts = !this.parts.flows && this.parts.envVars === false ? 'At least one component must be selected' : ''
             return this.formValid
         },
         confirm () {
@@ -177,7 +205,12 @@ export default {
                 if (this.snapshotNeedsSecret) {
                     secret = this.input.secret
                 }
-                snapshotsApi.importSnapshot(this.owner.id, this.ownerType, importSnapshot, secret).then((response) => {
+                const components = {
+                    flows: this.parts.flows,
+                    credentials: this.parts.credentials,
+                    envVars: this.parts.envVars
+                }
+                snapshotsApi.importSnapshot(this.owner.id, this.ownerType, importSnapshot, secret, { components }).then((response) => {
                     this.$emit('snapshot-import-success', response)
                     this.$refs.dialog.close()
                     this.shown = false
diff --git a/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue b/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue
index 5ea1a7f80d..c88a268456 100644
--- a/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue
+++ b/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue
@@ -1,29 +1,32 @@
 <template>
     <ff-dialog ref="dialog" header="Download Snapshot" confirm-label="Download" :closeOnConfirm="false" :disable-primary="!formValid" data-el="snapshot-download-dialog" @confirm="confirm()">
         <template #default>
-            <form class="space-y-6 mt-2" data-form="snapshot-export" @submit.prevent>
-                <p>Please make a note of the secret used to encrypt the snapshot credentials. It will be required when importing the snapshot.</p>
-                <FormRow containerClass="w-auto" :error="errors.secret" data-form="snapshot-secret">
-                    Secret
-                    <template #description>
-                        <p class="text-sm">A key used to encrypt any credentials in the snapshot.</p>
-                    </template>
-                    <template #input>
-                        <div class="flex items-center w-full">
-                            <ff-text-input ref="secret" v-model="input.secret" type="text" placeholder="Secret" />
-                            <ff-button v-ff-tooltip:top="'Random Secret'" kind="secondary" size="small" class="ml-2" data-el="refresh" @click="input.secret = generateRandomKey()">
-                                <template #icon>
-                                    <RefreshIcon />
-                                </template>
-                            </ff-button>
-                            <ff-button v-if="clipboardSupported" v-ff-tooltip:top="'Copy to Clipboard'" kind="secondary" size="small" class="ml-2" @click="copySecret()">
-                                <template #icon>
-                                    <ClipboardCopyIcon />
-                                </template>
-                            </ff-button>
-                        </div>
-                    </template>
-                </FormRow>
+            <form data-form="snapshot-export" @submit.prevent>
+                <ExportInstanceComponents v-model="parts" :error="errors.parts" header="Select the components to include in the snapshot" />
+                <template v-if="needsSecret">
+                    <FormRow containerClass="w-auto mt-6" :error="errors.secret" data-form="snapshot-secret">
+                        Secret
+                        <template #description>
+                            <p class="text-sm">A key used to encrypt any credentials in the snapshot.</p>
+                        </template>
+                        <template #input>
+                            <div class="flex items-center w-full">
+                                <ff-text-input ref="secret" v-model="input.secret" type="text" placeholder="Secret" />
+                                <ff-button v-ff-tooltip:top="'Random Secret'" kind="secondary" size="small" class="ml-2" data-el="refresh" @click="input.secret = generateRandomKey()">
+                                    <template #icon>
+                                        <RefreshIcon />
+                                    </template>
+                                </ff-button>
+                                <ff-button v-if="clipboardSupported" v-ff-tooltip:top="'Copy to Clipboard'" kind="secondary" size="small" class="ml-2" @click="copySecret()">
+                                    <template #icon>
+                                        <ClipboardCopyIcon />
+                                    </template>
+                                </ff-button>
+                            </div>
+                        </template>
+                    </FormRow>
+                    <div class="mt-2">Please make a note of the secret used to encrypt the snapshot credentials. It will be required when importing the snapshot.</div>
+                </template>
             </form>
         </template>
     </ff-dialog>
@@ -32,16 +35,17 @@
 import { ClipboardCopyIcon, RefreshIcon } from '@heroicons/vue/outline'
 
 import snapshotsApi from '../../../../../api/snapshots.js'
-
 import FormRow from '../../../../../components/FormRow.vue'
 import { downloadData } from '../../../../../composables/Download.js'
 import clipboardMixin from '../../../../../mixins/Clipboard.js'
 import alerts from '../../../../../services/alerts.js'
+import ExportInstanceComponents from '../../../../instance/components/ExportImportComponents.vue'
 
 export default {
     name: 'SnapshotExportDialog',
     components: {
         ClipboardCopyIcon,
+        ExportInstanceComponents,
         FormRow,
         RefreshIcon
     },
@@ -67,34 +71,56 @@ export default {
                 secret: ''
             },
             snapshot: null,
-            errors: {}
+            errors: {},
+            parts: {
+                flows: true,
+                credentials: true,
+                envVars: 'all'
+            }
         }
     },
     computed: {
         formValid () {
             return this.validate()
+        },
+        needsSecret () {
+            return this.parts.flows && this.parts.credentials
         }
     },
     mounted () {
     },
     methods: {
         validate () {
-            if (!this.input.secret) {
-                this.errors.secret = 'Secret is required'
-            } else if (this.input.secret.length < 8) {
-                this.errors.secret = 'Secret must be at least 8 characters'
-            } else if (/^\s/.test(this.input.secret) || /\s$/.test(this.input.secret)) {
-                this.errors.secret = 'Secret cannot start or end with a space'
+            if (this.needsSecret) {
+                if (!this.input.secret) {
+                    this.errors.secret = 'Secret is required'
+                } else if (this.input.secret.length < 8) {
+                    this.errors.secret = 'Secret must be at least 8 characters'
+                } else if (/^\s/.test(this.input.secret) || /\s$/.test(this.input.secret)) {
+                    this.errors.secret = 'Secret cannot start or end with a space'
+                } else {
+                    this.errors.secret = ''
+                }
             } else {
                 this.errors.secret = ''
             }
-            return !this.submitted && !!(this.input.secret) && !this.errors.secret
+            if (this.parts.flows === false && this.parts.envVars === false) {
+                this.errors.parts = 'At least one component must be selected'
+            } else {
+                this.errors.parts = ''
+            }
+            return !this.submitted && !this.errors.parts && !this.errors.secret
         },
         confirm () {
             if (this.validate()) {
                 this.submitted = true
                 const opts = {
-                    credentialSecret: this.input.secret
+                    credentialSecret: this.input.secret,
+                    components: {
+                        flows: this.parts.flows,
+                        credentials: this.parts.credentials,
+                        envVars: this.parts.envVars
+                    }
                 }
                 snapshotsApi.exportSnapshot(this.snapshot.id, opts).then((data) => {
                     return data
diff --git a/frontend/src/pages/instance/components/InstanceForm.vue b/frontend/src/pages/instance/components/InstanceForm.vue
index a5435190f4..11bff9ec02 100644
--- a/frontend/src/pages/instance/components/InstanceForm.vue
+++ b/frontend/src/pages/instance/components/InstanceForm.vue
@@ -255,7 +255,7 @@ import NameGenerator from '../../../utils/name-generator/index.js'
 
 import BlueprintTileSmall from '../Blueprints/BlueprintTileSmall.vue'
 
-import ExportInstanceComponents from './ExportInstanceComponents.vue'
+import ExportInstanceComponents from './ExportImportComponents.vue'
 import InstanceChargesTable from './InstanceChargesTable.vue'
 import InstanceCreditBanner from './InstanceCreditBanner.vue'
 

From e2dfe8d01939e58d79abbf22e522572b943aebb6 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 3 Oct 2024 17:15:39 +0100
Subject: [PATCH 21/47] add unit tests for import/export snapshot component
 options

---
 .../forge/db/controllers/Snapshot_spec.js     | 515 ++++++++++++++++++
 1 file changed, 515 insertions(+)
 create mode 100644 test/unit/forge/db/controllers/Snapshot_spec.js

diff --git a/test/unit/forge/db/controllers/Snapshot_spec.js b/test/unit/forge/db/controllers/Snapshot_spec.js
new file mode 100644
index 0000000000..3e438ab43b
--- /dev/null
+++ b/test/unit/forge/db/controllers/Snapshot_spec.js
@@ -0,0 +1,515 @@
+const crypto = require('crypto')
+
+const should = require('should') // eslint-disable-line
+const { decryptCreds } = require('../../../../lib/credentials.js')
+const setup = require('../setup')
+
+describe.only('Snapshot controller', function () {
+    // Use standard test data.
+    let app
+    let projectInstanceCount = 0
+    /** @type {import('../../../../lib/TestModelFactory')} */
+    let factory
+    /** @type {import('../../../../../forge/db/controllers/Snapshot.js')} */
+    let snapshotController
+
+    async function createProject (application = null, team = null) {
+        const options = { name: 'project-' + (projectInstanceCount++), type: '', url: '' }
+        if (application) {
+            options.ApplicationId = application.id
+        }
+        if (team) {
+            options.TeamId = team.id
+        }
+        let project = await app.db.models.Project.create(options)
+        await project.updateSetting('credentialSecret', 'c13f09839cb9072bdc61a3c1530629dad3da26b131d9434c7322bc2f7921f1cd')
+        // Reload to ensure all models are attached
+        project = await app.db.models.Project.byId(project.id)
+        await app.db.models.StorageFlow.create({
+            // a flow JSON containing a HTTP Request node with basic auth
+            flow: JSON.stringify([{"id":"90f317c74dab03c1","type":"http request","z":"d55adbd49eb9c0a7","name":"","method":"GET","ret":"txt","paytoqs":"ignore","url":"http://localhost:1880/auth-test","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"basic","senderr":false,"headers":[],"x":460,"y":180,"wires":[["db4f0470eee740fb"]]}]), // eslint-disable-line
+            ProjectId: project.id
+        })
+        await app.db.models.StorageCredentials.create({
+            credentials: JSON.stringify({ $: '8f89788aada6a40fc7cc06f12de7ea53veCKFVBe7rpZpzwnLNH0iNXnf0oG0Ttclqq5g8gtBZX+pjnaD6eozWkV6Sps5d48ja2A+pK1' }),
+            ProjectId: project.id
+        })
+        await app.db.models.StorageSettings.create({
+            settings: JSON.stringify({}),
+            ProjectId: project.id
+        })
+        await app.db.models.StorageSession.create({
+            sessions: JSON.stringify({}),
+            ProjectId: project.id
+        })
+        await project.updateSetting('settings', { env: [{ name: 'env1', value: 'a' }, { name: 'env2', value: 'b' }] })
+        await project.reload()
+        return project
+    }
+
+    before(async function () {
+        app = await setup({
+            limits: {
+                instances: 50
+            }
+        })
+        factory = app.factory
+        app.TestObjects.application1 = await factory.createApplication({ name: 'application-1' }, app.TestObjects.team1)
+        snapshotController = app.db.controllers.Snapshot
+    })
+
+    after(async function () {
+        await app.close()
+    })
+
+    afterEach(async function () {
+        await app.db.models.ProjectSnapshot.destroy({ where: {} })
+    })
+
+    describe.skip('getSnapshot', function () {
+        // TODO: Implement test
+    })
+
+    describe.skip('updateSnapshot', function () {
+        // TODO: Implement test
+    })
+
+    describe('exportSnapshot', function () {
+        let instanceSnapshot
+        let instance
+        before(async function () {
+            instance = await createProject()
+            const user = await app.TestObjects.userAlice
+            const options = {
+                name: 'snapshot-with-options',
+                description: 'a full snapshot'
+            }
+            instanceSnapshot = await factory.createSnapshot(options, instance, user)
+        })
+
+        it('should export a full snapshot by default', async function () {
+            const reencryptSecret = 'abc'
+            const options = {
+                credentialSecret: reencryptSecret
+                // components: // excluded to use defaults
+            }
+
+            const snapshotExported = await snapshotController.exportSnapshot(instanceSnapshot, options)
+            should.exist(snapshotExported)
+            snapshotExported.should.be.an.Object()
+            snapshotExported.should.have.properties('id', 'name', 'description', 'settings', 'credentialSecret', 'flows', 'ownerType', 'ProjectId')
+            snapshotExported.id.should.equal(instanceSnapshot.id)
+            snapshotExported.name.should.equal(instanceSnapshot.name)
+            snapshotExported.description.should.equal(instanceSnapshot.description)
+            snapshotExported.settings.should.only.have.keys('settings', 'env', 'modules')
+            snapshotExported.settings.settings.should.deepEqual(instanceSnapshot.settings.settings)
+            snapshotExported.settings.modules.should.deepEqual(instanceSnapshot.settings.modules)
+
+            // ensure flows are exported
+            snapshotExported.flows.should.have.only.keys('flows', 'credentials')
+            snapshotExported.flows.flows.should.deepEqual(instanceSnapshot.flows.flows)
+
+            // ensure credentials are exported
+            snapshotExported.flows.credentials.should.be.an.Object()
+            snapshotExported.flows.credentials.should.have.only.keys('$')
+            const keyHash = crypto.createHash('sha256').update(reencryptSecret).digest()
+            const creds = decryptCreds(keyHash, snapshotExported.flows.credentials)
+            creds.should.only.have.keys('90f317c74dab03c1').and.be.an.Object()
+            creds['90f317c74dab03c1'].should.only.have.keys('user', 'password')
+            creds['90f317c74dab03c1'].user.should.equal('auth')
+            creds['90f317c74dab03c1'].password.should.equal('test')
+
+            // ensure exported env var are present and correct
+            snapshotExported.settings.should.have.properties('env')
+            snapshotExported.settings.env.should.deepEqual({ env1: 'a', env2: 'b' })
+        })
+
+        it('should export a snapshot without creds', async function () {
+            const options = {
+                components: {
+                    credentials: false
+                }
+            }
+
+            const snapshotExported = await snapshotController.exportSnapshot(instanceSnapshot, options)
+            should.exist(snapshotExported)
+            snapshotExported.should.be.an.Object()
+            snapshotExported.should.have.properties('id', 'name', 'description', 'settings', 'flows', 'ownerType', 'ProjectId')
+            snapshotExported.id.should.equal(instanceSnapshot.id)
+            snapshotExported.name.should.equal(instanceSnapshot.name)
+            snapshotExported.description.should.equal(instanceSnapshot.description)
+            snapshotExported.settings.should.only.have.keys('settings', 'env', 'modules')
+            snapshotExported.settings.settings.should.deepEqual(instanceSnapshot.settings.settings)
+            snapshotExported.settings.modules.should.deepEqual(instanceSnapshot.settings.modules)
+
+            // ensure flows are exported and credentials are excluded
+            snapshotExported.flows.should.have.only.keys('flows', 'credentials')
+            snapshotExported.flows.flows.should.deepEqual(instanceSnapshot.flows.flows)
+            snapshotExported.flows.credentials.should.deepEqual({})
+
+            // ensure exported env var are present and correct
+            snapshotExported.settings.should.have.properties('env')
+            snapshotExported.settings.env.should.deepEqual({ env1: 'a', env2: 'b' })
+        })
+
+        it('should export a snapshot without flows', async function () {
+            const options = {
+                components: {
+                    flows: false
+                }
+            }
+            // since credentials are for flows, they should be excluded as well
+            const snapshotExported = await snapshotController.exportSnapshot(instanceSnapshot, options)
+            should.exist(snapshotExported)
+            snapshotExported.should.be.an.Object()
+            snapshotExported.should.have.properties('id', 'name', 'description', 'settings', 'credentialSecret', 'flows', 'ownerType', 'ProjectId')
+            snapshotExported.id.should.equal(instanceSnapshot.id)
+            snapshotExported.name.should.equal(instanceSnapshot.name)
+            snapshotExported.description.should.equal(instanceSnapshot.description)
+            snapshotExported.settings.should.only.have.keys('settings', 'env', 'modules')
+            snapshotExported.settings.should.only.have.keys('settings', 'env', 'modules')
+            snapshotExported.settings.settings.should.deepEqual(instanceSnapshot.settings.settings)
+            snapshotExported.settings.modules.should.deepEqual(instanceSnapshot.settings.modules)
+
+            // ensure flows and credentials are excluded
+            snapshotExported.flows.should.have.only.keys('flows', 'credentials')
+            snapshotExported.flows.flows.should.deepEqual([])
+            snapshotExported.flows.credentials.should.deepEqual({})
+
+            // ensure exported env var are present and correct
+            snapshotExported.settings.should.have.properties('env')
+            snapshotExported.settings.env.should.deepEqual({ env1: 'a', env2: 'b' })
+        })
+
+        it('should export a snapshot without env (envVars: false)', async function () {
+            const options = {
+                credentialSecret: 'abc',
+                components: {
+                    envVars: false
+                }
+            }
+
+            const snapshotExported = await snapshotController.exportSnapshot(instanceSnapshot, options)
+            should.exist(snapshotExported)
+            snapshotExported.should.be.an.Object()
+            snapshotExported.should.have.properties('id', 'name', 'description', 'settings', 'credentialSecret', 'flows', 'ownerType', 'ProjectId')
+            snapshotExported.id.should.equal(instanceSnapshot.id)
+            snapshotExported.name.should.equal(instanceSnapshot.name)
+            snapshotExported.description.should.equal(instanceSnapshot.description)
+            snapshotExported.settings.should.only.have.keys('settings', 'env', 'modules')
+            // ensure flows are exported
+            snapshotExported.flows.should.have.only.keys('flows', 'credentials')
+            snapshotExported.flows.flows.should.deepEqual(instanceSnapshot.flows.flows)
+            // ensure credentials are exported
+            snapshotExported.flows.credentials.should.be.an.Object()
+            snapshotExported.flows.credentials.should.have.only.keys('$')
+            // ensure env are excluded
+            snapshotExported.settings.env.should.deepEqual({})
+        })
+
+        it('should export a snapshot without env values (envVars: "keys")', async function () {
+            const options = {
+                credentialSecret: 'abc',
+                components: {
+                    envVars: 'keys'
+                }
+            }
+
+            const snapshotExported = await snapshotController.exportSnapshot(instanceSnapshot, options)
+            should.exist(snapshotExported)
+            snapshotExported.should.be.an.Object()
+            snapshotExported.should.have.properties('id', 'name', 'description', 'settings', 'credentialSecret', 'flows', 'ownerType', 'ProjectId')
+            snapshotExported.id.should.equal(instanceSnapshot.id)
+            snapshotExported.name.should.equal(instanceSnapshot.name)
+            snapshotExported.description.should.equal(instanceSnapshot.description)
+            snapshotExported.settings.should.only.have.keys('settings', 'env', 'modules')
+            // ensure flows are exported
+            snapshotExported.flows.should.have.only.keys('flows', 'credentials')
+            snapshotExported.flows.flows.should.deepEqual(instanceSnapshot.flows.flows)
+            // ensure credentials are exported
+            snapshotExported.flows.credentials.should.be.an.Object()
+            snapshotExported.flows.credentials.should.have.only.keys('$')
+            // ensure env are exported with keys only
+            snapshotExported.settings.should.have.property('env')
+            snapshotExported.settings.env.should.deepEqual({ env1: '', env2: '' })
+        })
+    })
+
+    describe('uploadSnapshot', function () {
+        let alice
+        let instance
+        let counter = 0
+
+        function generateSnapshot (name, description, flows, creds, env, ownerType) {
+            counter++
+            const fullSnapshot = {
+                flows: {
+                    flows: flows || [
+                        {
+                            id: '90f317c74dab03c1',
+                            type: 'http request',
+                            z: 'd55adbd49eb9c0a7',
+                            name: '',
+                            method: 'GET',
+                            ret: 'txt',
+                            paytoqs: 'ignore',
+                            url: 'http://192.168.86.45:12095/auth-test',
+                            tls: '',
+                            persist: false,
+                            proxy: '',
+                            insecureHTTPParser: false,
+                            authType: 'basic',
+                            senderr: false,
+                            headers: [],
+                            x: 460,
+                            y: 180,
+                            wires: [['db4f0470eee740fb']]
+                        }
+                    ],
+                    credentials: creds || {
+                        $: '92c3a4152076d6d8489b3de60f97f551LnSwcIJl9Q+l6Xz6WFCPQLMVRiGbyjkwR2MOuvi8HOV41oBO6MiBepsZ1lbhDwLxv2uHWmVA'
+                    }
+                },
+                id: '6KbgK9BO4a',
+                name: name || 'full snapshot ' + counter,
+                description: description || 'full snapshot ' + counter,
+                createdAt: '2024-10-02T16:56:15.175Z',
+                updatedAt: '2024-10-02T16:56:15.175Z',
+                user: {
+                    id: 'EexY4j17B2',
+                    username: 'steve',
+                    name: 'steve-mcl',
+                    avatar: 'http://localhost:3000/avatar/c3RldmU',
+                    admin: true,
+                    createdAt: '2023-12-15T18:51:43.578Z',
+                    suspended: false
+                },
+                exportedBy: {
+                    id: 'EexY4j17B2',
+                    username: 'steve',
+                    name: 'steve-mcl',
+                    avatar: 'http://localhost:3000/avatar/c3RldmU',
+                    admin: true,
+                    createdAt: '2023-12-15T18:51:43.578Z',
+                    suspended: false
+                },
+                ownerType: ownerType || 'instance',
+                settings: {
+                    settings: {
+                        disableEditor: false,
+                        disableTours: false,
+                        codeEditor: 'monaco',
+                        theme: 'forge-light',
+                        page: {
+                            title: 'FlowFuse',
+                            favicon: ''
+                        },
+                        header: {
+                            title: 'snapshot-import-export-options',
+                            url: ''
+                        },
+                        timeZone: 'UTC',
+                        palette: {
+                            allowInstall: true,
+                            catalogue: [
+                                'https://catalogue.nodered.org/catalogue.json'
+                            ],
+                            npmrc: '',
+                            denyList: [],
+                            modules: {}
+                        },
+                        modules: {
+                            allowInstall: true,
+                            denyList: []
+                        },
+                        httpNodeAuth: {
+                            type: 'none',
+                            user: '',
+                            pass: ''
+                        },
+                        emailAlerts: {
+                            crash: false,
+                            safe: false,
+                            recipients: 'owners'
+                        },
+                        debugMaxLength: 1000,
+                        apiMaxLength: '5mb',
+                        httpAdminRoot: '',
+                        dashboardUI: '/ui'
+                    },
+                    env: env || {
+                        ev1: 'ev1',
+                        ev2: 'ev2',
+                        ev3: 'ev3',
+                        ev4: 'ev4'
+                    },
+                    modules: {
+                        'node-red': '4.0.3'
+                    }
+                }
+            }
+            return fullSnapshot
+        }
+
+        before(async function () {
+            alice = await app.TestObjects.userAlice
+            instance = await createProject()
+        })
+
+        it('should upload a snapshot', async function () {
+            const fullSnapshot = generateSnapshot()
+            const options = {
+                // components: {} // excluded to use defaults
+            }
+            const importedSnapshot = await snapshotController.uploadSnapshot(instance, fullSnapshot, 'the secret', alice, options)
+            should.exist(importedSnapshot)
+            importedSnapshot.should.be.an.Object()
+            // should be a squelize model
+            importedSnapshot.should.be.an.instanceOf(app.db.models.ProjectSnapshot)
+            importedSnapshot.should.have.properties('id', 'name', 'description', 'settings', 'flows', 'credentialSecret', 'ownerType', 'ProjectId')
+            importedSnapshot.id.should.not.equal(fullSnapshot.id)
+            importedSnapshot.name.should.equal(fullSnapshot.name)
+            importedSnapshot.description.should.equal(fullSnapshot.description)
+            importedSnapshot.settings.should.deepEqual(fullSnapshot.settings)
+
+            // ensure flows are imported correctly
+            importedSnapshot.flows.should.only.have.keys('flows', 'credentials')
+            importedSnapshot.flows.flows.should.deepEqual(fullSnapshot.flows.flows)
+
+            // ensure credentials are imported correctly
+            importedSnapshot.flows.credentials.should.be.an.Object()
+            const keyHash = crypto.createHash('sha256').update(importedSnapshot.credentialSecret).digest()
+            const creds = decryptCreds(keyHash, importedSnapshot.flows.credentials)
+            creds.should.only.have.keys('90f317c74dab03c1').and.be.an.Object()
+            creds['90f317c74dab03c1'].should.only.have.keys('user', 'password')
+            creds['90f317c74dab03c1'].user.should.equal('auth')
+            creds['90f317c74dab03c1'].password.should.equal('test')
+
+            // ensure env vars and values are imported correctly
+            importedSnapshot.settings.should.have.properties('env')
+            importedSnapshot.settings.env.should.deepEqual(fullSnapshot.settings.env)
+        })
+
+        it('should upload a snapshot without creds', async function () {
+            const fullSnapshot = generateSnapshot()
+            const options = {
+                components: {
+                    credentials: false
+                }
+            }
+            const importedSnapshot = await snapshotController.uploadSnapshot(instance, fullSnapshot, 'the secret', alice, options)
+            should.exist(importedSnapshot)
+            importedSnapshot.should.be.an.Object()
+            // should be a squelize model
+            importedSnapshot.should.be.an.instanceOf(app.db.models.ProjectSnapshot)
+            importedSnapshot.should.have.properties('id', 'name', 'description', 'settings', 'flows', 'credentialSecret', 'ownerType', 'ProjectId')
+            importedSnapshot.id.should.not.equal(fullSnapshot.id)
+            importedSnapshot.name.should.equal(fullSnapshot.name)
+            importedSnapshot.description.should.equal(fullSnapshot.description)
+            importedSnapshot.settings.should.deepEqual(fullSnapshot.settings)
+
+            // ensure flows are imported correctly
+            importedSnapshot.flows.should.only.have.keys('flows', 'credentials')
+            importedSnapshot.flows.flows.should.deepEqual(fullSnapshot.flows.flows)
+
+            // ensure credentials are excluded
+            importedSnapshot.flows.credentials.should.deepEqual({})
+
+            // ensure env vars and values are imported correctly
+            importedSnapshot.settings.should.have.properties('env')
+            importedSnapshot.settings.env.should.deepEqual(fullSnapshot.settings.env)
+        })
+
+        it('should upload a snapshot without flows', async function () {
+            const fullSnapshot = generateSnapshot()
+            const options = {
+                components: {
+                    flows: false
+                }
+            }
+            const importedSnapshot = await snapshotController.uploadSnapshot(instance, fullSnapshot, 'the secret', alice, options)
+            should.exist(importedSnapshot)
+            importedSnapshot.should.be.an.Object()
+            // should be a squelize model
+            importedSnapshot.should.be.an.instanceOf(app.db.models.ProjectSnapshot)
+            importedSnapshot.should.have.properties('id', 'name', 'description', 'settings', 'flows', 'credentialSecret', 'ownerType', 'ProjectId')
+            importedSnapshot.id.should.not.equal(fullSnapshot.id)
+            importedSnapshot.name.should.equal(fullSnapshot.name)
+            importedSnapshot.description.should.equal(fullSnapshot.description)
+            importedSnapshot.settings.should.deepEqual(fullSnapshot.settings)
+
+            // ensure flows are excluded
+            importedSnapshot.flows.should.only.have.keys('flows', 'credentials')
+            importedSnapshot.flows.flows.should.deepEqual([])
+            importedSnapshot.flows.credentials.should.deepEqual({}) // no flows, no creds!
+
+            // ensure env vars and values are imported correctly
+            importedSnapshot.settings.should.have.properties('env')
+            importedSnapshot.settings.env.should.deepEqual(fullSnapshot.settings.env)
+        })
+
+        it('should upload a snapshot without env (envVars: false)', async function () {
+            const fullSnapshot = generateSnapshot()
+            const options = {
+                components: {
+                    envVars: false
+                }
+            }
+            const importedSnapshot = await snapshotController.uploadSnapshot(instance, fullSnapshot, 'the secret', alice, options)
+            should.exist(importedSnapshot)
+            importedSnapshot.should.be.an.Object()
+            // should be a squelize model
+            importedSnapshot.should.be.an.instanceOf(app.db.models.ProjectSnapshot)
+            importedSnapshot.should.have.properties('id', 'name', 'description', 'settings', 'flows', 'credentialSecret', 'ownerType', 'ProjectId')
+            importedSnapshot.id.should.not.equal(fullSnapshot.id)
+            importedSnapshot.name.should.equal(fullSnapshot.name)
+            importedSnapshot.description.should.equal(fullSnapshot.description)
+
+            // ensure flows and creds are imported
+            importedSnapshot.flows.should.only.have.keys('flows', 'credentials')
+            importedSnapshot.flows.flows.should.deepEqual(fullSnapshot.flows.flows)
+
+            // ensure credentials are imported correctly
+            importedSnapshot.flows.credentials.should.be.an.Object()
+            importedSnapshot.flows.credentials.should.have.only.keys('$')
+
+            // ensure env vars are excluded
+            importedSnapshot.settings.should.have.properties('env')
+            importedSnapshot.settings.env.should.deepEqual({})
+        })
+
+        it('should upload a snapshot without env values (envVars: "keys")', async function () {
+            const fullSnapshot = generateSnapshot()
+            const options = {
+                components: {
+                    envVars: 'keys'
+                }
+            }
+            const importedSnapshot = await snapshotController.uploadSnapshot(instance, fullSnapshot, 'the secret', alice, options)
+            should.exist(importedSnapshot)
+            importedSnapshot.should.be.an.Object()
+            // should be a squelize model
+            importedSnapshot.should.be.an.instanceOf(app.db.models.ProjectSnapshot)
+            importedSnapshot.should.have.properties('id', 'name', 'description', 'settings', 'flows', 'credentialSecret', 'ownerType', 'ProjectId')
+            importedSnapshot.id.should.not.equal(fullSnapshot.id)
+            importedSnapshot.name.should.equal(fullSnapshot.name)
+            importedSnapshot.description.should.equal(fullSnapshot.description)
+
+            // ensure flows and creds are imported
+            importedSnapshot.flows.should.only.have.keys('flows', 'credentials')
+            importedSnapshot.flows.flows.should.deepEqual(fullSnapshot.flows.flows)
+
+            // ensure credentials are imported correctly
+            importedSnapshot.flows.credentials.should.be.an.Object()
+            importedSnapshot.flows.credentials.should.have.only.keys('$')
+
+            // ensure env vars are imported with keys only
+            importedSnapshot.settings.should.have.properties('env')
+            importedSnapshot.settings.env.should.deepEqual({ ev1: '', ev2: '', ev3: '', ev4: '' })
+        })
+    })
+
+    describe.skip('deleteSnapshot', function () {
+        // TODO: Implement test
+    })
+})

From 0eaa882ebbbaa23a8a738bb9178e21fbe7c073b6 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 3 Oct 2024 17:35:10 +0100
Subject: [PATCH 22/47] remove .only

---
 test/unit/forge/db/controllers/Snapshot_spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/unit/forge/db/controllers/Snapshot_spec.js b/test/unit/forge/db/controllers/Snapshot_spec.js
index 3e438ab43b..f54b66312e 100644
--- a/test/unit/forge/db/controllers/Snapshot_spec.js
+++ b/test/unit/forge/db/controllers/Snapshot_spec.js
@@ -4,7 +4,7 @@ const should = require('should') // eslint-disable-line
 const { decryptCreds } = require('../../../../lib/credentials.js')
 const setup = require('../setup')
 
-describe.only('Snapshot controller', function () {
+describe('Snapshot controller', function () {
     // Use standard test data.
     let app
     let projectInstanceCount = 0

From 23e96587dbe6d8b5c138a9e4ade2ec1646ac714c Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 4 Oct 2024 10:41:19 +0300
Subject: [PATCH 23/47] update api endpoint summary

---
 forge/routes/api/userNotifications.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/forge/routes/api/userNotifications.js b/forge/routes/api/userNotifications.js
index f2d633b0e7..05aee4d861 100644
--- a/forge/routes/api/userNotifications.js
+++ b/forge/routes/api/userNotifications.js
@@ -37,7 +37,7 @@ module.exports = async function (app) {
     // Bulk update
     app.put('/', {
         schema: {
-            summary: 'Mark notifications as read',
+            summary: 'Bulk update notifications',
             tags: ['User'],
             body: {
                 type: 'object',

From eb39e3acbbe06a2828b51537467152a5952dcddf Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 4 Oct 2024 12:09:08 +0300
Subject: [PATCH 24/47] Fixed unit tests, type check

---
 forge/db/models/Notification.js               |  6 +-
 .../routes/api/userNotifications_spec.js      | 69 ++++++++++++++++---
 2 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/forge/db/models/Notification.js b/forge/db/models/Notification.js
index 15f6111977..450810e6c5 100644
--- a/forge/db/models/Notification.js
+++ b/forge/db/models/Notification.js
@@ -95,13 +95,15 @@ module.exports = {
                         return
                     }
 
-                    ids = ids.map(id => Number.isNaN(id) ? M.Notification.decodeHashid(id) : id)
+                    ids = ids.map(id => typeof id === 'string'
+                        ? M.Notification.decodeHashid(id)?.[0]
+                        : id)
 
                     await M.Notification.update(
                         { read: read ? 1 : 0 },
                         {
                             where: {
-                                id: ids.map(M.Notification.decodeHashid),
+                                id: ids.filter(e => e),
                                 UserId: user.id
                             }
                         }
diff --git a/test/unit/forge/routes/api/userNotifications_spec.js b/test/unit/forge/routes/api/userNotifications_spec.js
index c384bfd0fb..26895705fa 100644
--- a/test/unit/forge/routes/api/userNotifications_spec.js
+++ b/test/unit/forge/routes/api/userNotifications_spec.js
@@ -1,6 +1,13 @@
 const should = require('should') // eslint-disable-line
 const setup = require('../setup')
 
+async function clearUserNotifications (app, user) {
+    const notifications = await app.db.models.Notification.forUser(user)
+    if (notifications) {
+        notifications.notifications.forEach(n => n.destroy())
+    }
+}
+
 describe('User Notifications API', async function () {
     let app
     const TestObjects = {}
@@ -184,33 +191,73 @@ describe('User Notifications API', async function () {
             await app.notifications.send(TestObjects.colin, notificationType, { user: 'colin', i: 1 }, notificationRef, { upsert: false })
             await app.notifications.send(TestObjects.colin, notificationType, { user: 'colin', i: 1 }, notificationRef, { upsert: false })
 
-            const aliceNotifications = await getNotifications(TestObjects.tokens.alice)
-            aliceNotifications.should.have.property('count', 2)
+            const colinNotifications = await getNotifications(TestObjects.tokens.colin)
+            colinNotifications.should.have.property('count', 2)
 
-            const ids = aliceNotifications.notifications.map(n => n.id)
+            const ids = colinNotifications.notifications.map(n => n.id)
             const response1 = await app.inject({
                 method: 'PUT',
                 url: '/api/v1/user/notifications/',
                 payload: { read: true, ids },
-                cookies: { sid: TestObjects.tokens.alice }
+                cookies: { sid: TestObjects.tokens.colin }
             })
             response1.statusCode.should.equal(200)
 
-            const aliceNotifications2 = await getNotifications(TestObjects.tokens.alice)
-            aliceNotifications2.notifications[0].should.have.property('read', true)
-            aliceNotifications2.notifications[1].should.have.property('read', true)
+            const colinNotifications2 = await getNotifications(TestObjects.tokens.colin)
+            colinNotifications2.notifications[0].should.have.property('read', true)
+            colinNotifications2.notifications[1].should.have.property('read', true)
 
             const response2 = await app.inject({
                 method: 'PUT',
                 url: '/api/v1/user/notifications/',
                 payload: { read: false, ids },
-                cookies: { sid: TestObjects.tokens.alice }
+                cookies: { sid: TestObjects.tokens.colin }
             })
             response2.statusCode.should.equal(200)
 
-            const aliceNotifications3 = await getNotifications(TestObjects.tokens.alice)
-            aliceNotifications3.notifications[0].should.have.property('read', false)
-            aliceNotifications3.notifications[1].should.have.property('read', false)
+            const colinNotifications3 = await getNotifications(TestObjects.tokens.colin)
+            colinNotifications3.notifications[0].should.have.property('read', false)
+            colinNotifications3.notifications[1].should.have.property('read', false)
+        })
+        it('will return a 400 response if receives an incorrect payload', async () => {
+            await clearUserNotifications(app, TestObjects.colin)
+
+            const notificationType = 'crashed'
+            const notificationRef = `${notificationType}:${TestObjects.Project1.id}`
+            await app.notifications.send(TestObjects.colin, notificationType, { user: 'colin', i: 1 }, notificationRef, { upsert: false })
+            await app.notifications.send(TestObjects.colin, notificationType, { user: 'colin', i: 1 }, notificationRef, { upsert: false })
+
+            const colinNotifications = await getNotifications(TestObjects.tokens.colin)
+            colinNotifications.should.have.property('count', 2)
+            const ids = [{}]
+
+            const response = await app.inject({
+                method: 'PUT',
+                url: '/api/v1/user/notifications/',
+                payload: { read: true, ids },
+                cookies: { sid: TestObjects.tokens.colin }
+            })
+            response.statusCode.should.equal(400)
+        })
+        it('can handle invalid notifications ids', async () => {
+            await clearUserNotifications(app, TestObjects.colin)
+
+            const notificationType = 'crashed'
+            const notificationRef = `${notificationType}:${TestObjects.Project1.id}`
+            await app.notifications.send(TestObjects.colin, notificationType, { user: 'colin', i: 1 }, notificationRef, { upsert: false })
+            await app.notifications.send(TestObjects.colin, notificationType, { user: 'colin', i: 1 }, notificationRef, { upsert: false })
+
+            const colinNotifications = await getNotifications(TestObjects.tokens.colin)
+            colinNotifications.should.have.property('count', 2)
+            const ids = ['non-existing', 92828292, null, undefined, false, true]
+
+            const response = await app.inject({
+                method: 'PUT',
+                url: '/api/v1/user/notifications/',
+                payload: { read: true, ids },
+                cookies: { sid: TestObjects.tokens.colin }
+            })
+            response.statusCode.should.equal(200)
         })
         it('user cannot modify another users notification', async function () {
             const aliceNotifications = await getNotifications(TestObjects.tokens.alice)

From 142a9c322f1825e5877c6c4f8d8bb14dcdf4bee2 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 4 Oct 2024 10:13:50 +0100
Subject: [PATCH 25/47] update docs for snapshot components options

---
 docs/user/snapshots.md | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/docs/user/snapshots.md b/docs/user/snapshots.md
index 550d992d40..4479206c19 100644
--- a/docs/user/snapshots.md
+++ b/docs/user/snapshots.md
@@ -44,9 +44,17 @@ A snapshot can be downloaded to your local machine for backup or sharing.
 
 To download a snapshot:
 
-1. Go to the instance's page and select the **Snapshots** tab.
+1. Go to the desired application, instance or device overview page and select the **Snapshots** tab.
 2. Open the dropdown menu to the right of the snapshot you want to download and
-   select the **Download Snapshot** option.
+   click the **Download Snapshot** option to open the download dialog.
+3. Select the required components to download.
+   - **Flows**: Include the snapshot flows
+   - **Credentials**: Include the snapshot flows credentials
+   - **Environment Variables**: Include environment variables in the snapshot
+      - **Keys and Values**: Include the keys and values of the environment variables
+      - **Keys Only**: Include only the keys of the environment variables
+4. Enter a secret to encrypt any credentials in the snapshot (optional, depends on components selected).
+5. Click **Download**
 
 ## Upload a snapshot
 
@@ -54,13 +62,19 @@ A snapshot can be uploaded to a Node-RED instance in FlowFuse.
 
 To upload a snapshot:
 
-1. Go to the instance's page and select the **Snapshots** tab.
+1.  Go to the desired instance or device overview page and select the **Snapshots** tab.
 2. Click the **Upload Snapshot** button.
 3. Select the snapshot file from your local machine.
-4. If the snapshot contains credentials, you will be asked to enter the credentials secret.
-   This is the secret that was used to encrypt the credentials in the snapshot.
-5. Update the name and description if required.
-6. Click **Upload**
+4. Update the name and description if required.
+5. Select the components to upload:
+   - **Flows**: Include the snapshots flows
+   - **Credentials**: Include the snapshots flows credentials (visible only if the snapshot contains credentials)
+   - **Environment Variables**: Include environment variables in the snapshot
+      - **Keys and Values**: Include the keys and values of the environment variables
+      - **Keys Only**: Include only the keys of the environment variables
+6. If the snapshot contains credentials and the `Credentials` component is checked,
+   you will be asked to enter a Secret. This will be used to later decrypt any credentials in the snapshots flows.
+7. Click **Upload**
 
 ## Delete a snapshot
 

From 88f8650b3bc805806f15ab54ed984e579e7c89b6 Mon Sep 17 00:00:00 2001
From: Costin Serban <cstn.serban@gmail.com>
Date: Fri, 4 Oct 2024 13:16:53 +0300
Subject: [PATCH 26/47] Update forge/db/models/Notification.js

Co-authored-by: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
---
 forge/db/models/Notification.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/forge/db/models/Notification.js b/forge/db/models/Notification.js
index 450810e6c5..beebed7616 100644
--- a/forge/db/models/Notification.js
+++ b/forge/db/models/Notification.js
@@ -90,7 +90,7 @@ module.exports = {
                         notifications: rows
                     }
                 },
-                markNotificationsAsRead: async ({ read = true, ids = [] }, user) => {
+                updateNotificationState: async ({ read = true, ids = [] }, user) => {
                     if (ids.length === 0) {
                         return
                     }

From fb3d2a04704226d58417af5fdc6971c54f049f48 Mon Sep 17 00:00:00 2001
From: Costin Serban <cstn.serban@gmail.com>
Date: Fri, 4 Oct 2024 13:17:00 +0300
Subject: [PATCH 27/47] Update forge/routes/api/userNotifications.js

Co-authored-by: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
---
 forge/routes/api/userNotifications.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/forge/routes/api/userNotifications.js b/forge/routes/api/userNotifications.js
index 05aee4d861..72cc379026 100644
--- a/forge/routes/api/userNotifications.js
+++ b/forge/routes/api/userNotifications.js
@@ -63,7 +63,7 @@ module.exports = async function (app) {
     }, async (request, reply) => {
         const payload = { read: request.body.read, ids: request.body.ids }
 
-        await app.db.models.Notification.markNotificationsAsRead(payload, request.session.User)
+        await app.db.models.Notification.updateNotificationsState(payload, request.session.User)
 
         const notifications = await getNotifications(app, request)
 

From 363ca722d43030de5a7d8812401a2e6f3d0298f5 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 4 Oct 2024 14:04:00 +0300
Subject: [PATCH 28/47] qf tests

---
 forge/db/models/Notification.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/forge/db/models/Notification.js b/forge/db/models/Notification.js
index beebed7616..0c3836f633 100644
--- a/forge/db/models/Notification.js
+++ b/forge/db/models/Notification.js
@@ -90,7 +90,7 @@ module.exports = {
                         notifications: rows
                     }
                 },
-                updateNotificationState: async ({ read = true, ids = [] }, user) => {
+                updateNotificationsState: async ({ read = true, ids = [] }, user) => {
                     if (ids.length === 0) {
                         return
                     }

From ec96133224f6543dcd88ac2f0b8648ad27b2e73c Mon Sep 17 00:00:00 2001
From: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
Date: Fri, 4 Oct 2024 14:40:22 +0100
Subject: [PATCH 29/47] Update
 frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue

Co-authored-by: Joe Pavitt <99246719+joepavitt@users.noreply.github.com>
---
 .../Snapshots/components/dialogs/SnapshotExportDialog.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue b/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue
index c88a268456..99c8d22640 100644
--- a/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue
+++ b/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue
@@ -7,7 +7,7 @@
                     <FormRow containerClass="w-auto mt-6" :error="errors.secret" data-form="snapshot-secret">
                         Secret
                         <template #description>
-                            <p class="text-sm">A key used to encrypt any credentials in the snapshot.</p>
+                            <p class="text-sm">A key used to encrypt any credentials in the snapshot's flow.</p>
                         </template>
                         <template #input>
                             <div class="flex items-center w-full">

From 37bad6d1e280d9c2613ef2757c6317dba9812af0 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 7 Oct 2024 12:00:42 +0100
Subject: [PATCH 30/47] fix reactivity of env radios

---
 .../components/ExportImportComponents.vue     | 40 +++++++++++++++----
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/instance/components/ExportImportComponents.vue b/frontend/src/pages/instance/components/ExportImportComponents.vue
index de81e8dee6..f34ac633db 100644
--- a/frontend/src/pages/instance/components/ExportImportComponents.vue
+++ b/frontend/src/pages/instance/components/ExportImportComponents.vue
@@ -105,6 +105,20 @@ export default {
             set (localValue) {
                 this.$emit('update:modelValue', localValue)
             }
+        },
+        envVarOptions: {
+            get () {
+                const opts = this.envVarKeyOptions.map(opt => {
+                    return {
+                        ...opt,
+                        disabled: this.parts.envVars === false
+                    }
+                })
+                return opts
+            },
+            set (localValue) {
+                this.envVarOpts = localValue
+            }
         }
     },
     watch: {
@@ -117,17 +131,27 @@ export default {
                     this.parts.envVars = value.envVarsKo
                 }
             }
+        },
+        'parts.envVars': {
+            handler: function (value) {
+                this.syncEnvVars()
+            }
         }
     },
     mounted () {
-        if (this.parts.envVars === false) {
-            this.envVarOpts.envVars = false
-        } else if (this.parts.envVars === true || this.parts.envVars === 'all') {
-            this.envVarOpts.envVars = true
-            this.envVarOpts.envVarsKo = 'all'
-        } else {
-            this.envVarOpts.envVars = true
-            this.envVarOpts.envVarsKo = 'keys'
+        this.syncEnvVars()
+    },
+    methods: {
+        syncEnvVars () {
+            if (this.parts.envVars === false) {
+                this.envVarOpts.envVars = false
+            } else if (this.parts.envVars === true || this.parts.envVars === 'all') {
+                this.envVarOpts.envVars = true
+                this.envVarOpts.envVarsKo = 'all'
+            } else {
+                this.envVarOpts.envVars = true
+                this.envVarOpts.envVarsKo = 'keys'
+            }
         }
     }
 }

From 7a53ac8a61d393f9e36bc64fb80e6155d6037c58 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 7 Oct 2024 12:01:36 +0100
Subject: [PATCH 31/47] fix picking same snapshot after clode/cancel

---
 .../dialogs/SnapshotImportDialog.vue          | 46 ++++++++++++++++---
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/dialogs/SnapshotImportDialog.vue b/frontend/src/components/dialogs/SnapshotImportDialog.vue
index 21005fd294..e0d155ea9a 100644
--- a/frontend/src/components/dialogs/SnapshotImportDialog.vue
+++ b/frontend/src/components/dialogs/SnapshotImportDialog.vue
@@ -22,8 +22,7 @@
                         <textarea v-model="input.description" rows="8" class="ff-input ff-text-input" style="height: auto" />
                     </template>
                 </FormRow>
-                <ImportInstanceComponents v-model="parts" header="Select the components to include in the upload" :error="validateField.parts ? errors.parts : ''" :showCredentials="snapshotNeedsSecret" />
-                <FormRow v-if="snapshotNeedsSecret && parts.credentials !== false" v-model="input.secret" :error="validateField.secret ? errors.secret : ''" data-form="import-snapshot-secret">Credentials Secret</FormRow>
+                <FormRow v-if="snapshotNeedsSecret && parts.flows !== false && parts.credentials !== false" v-model="input.secret" :error="validateField.secret ? errors.secret : ''" data-form="import-snapshot-secret">Credentials Secret</FormRow>
             </form>
         </template>
     </ff-dialog>
@@ -63,11 +62,10 @@ export default {
     setup () {
         return {
             show () {
-                this.setKeys(this.input, '')
-                this.setKeys(this.errors, '')
-                this.setKeys(this.validateField, false)
+                this.clear()
                 this.$refs.dialog.show()
                 setTimeout(() => {
+                    this.clear()
                     this.validate()
                     this.shown = true
                 }, 5)
@@ -145,6 +143,9 @@ export default {
     },
     mounted () {
         this.$refs.fileUpload.addEventListener('change', (e) => {
+            if (!e.target.files?.length) {
+                return
+            }
             const file = e.target.files[0]
             this.input.snapshot = null
             this.input.file = ''
@@ -185,7 +186,7 @@ export default {
             } else {
                 this.errors.secret = ''
             }
-            this.errors.parts = !this.parts.flows && this.parts.envVars === false ? 'At least one component must be selected' : ''
+            this.errors.parts = this.parts.flows === false && this.parts.envVars === false ? 'At least one component must be selected' : ''
             return this.formValid
         },
         confirm () {
@@ -210,6 +211,28 @@ export default {
                     credentials: this.parts.credentials,
                     envVars: this.parts.envVars
                 }
+                if (components.flows === false) {
+                    importSnapshot.flows = {
+                        flows: [],
+                        credentials: {}
+                    }
+                } else if (components.credentials === false) {
+                    importSnapshot.flows = {
+                        flows: importSnapshot.flows.flows,
+                        credentials: {}
+                    }
+                }
+
+                importSnapshot.settings = importSnapshot.settings || {}
+                if (components.envVars === false) {
+                    importSnapshot.settings.env = {}
+                } else if (components.envVars === 'keys') {
+                    importSnapshot.settings.env = Object.keys(importSnapshot.settings.env || {}).reduce((acc, key) => {
+                        acc[key] = ''
+                        return acc
+                    }, {})
+                }
+
                 snapshotsApi.importSnapshot(this.owner.id, this.ownerType, importSnapshot, secret, { components }).then((response) => {
                     this.$emit('snapshot-import-success', response)
                     this.$refs.dialog.close()
@@ -221,10 +244,21 @@ export default {
         },
         cancel () {
             this.shown = false
+            this.$refs.fileUpload.value = ''
             this.$refs.dialog.close()
             this.$emit('canceled')
         },
+        clear () {
+            this.$refs.fileUpload.value = ''
+            this.setKeys(this.input, '')
+            this.setKeys(this.errors, '')
+            this.setKeys(this.validateField, false)
+            this.parts.flows = true
+            this.parts.credentials = true
+            this.parts.envVars = 'all'
+        },
         selectSnapshot () {
+            this.$refs.fileUpload.value = ''
             const fileUpload = this.$refs.fileUpload
             fileUpload.click()
         },

From a688498cace3fb9937e21b4df7265462eade9e54 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 7 Oct 2024 12:02:24 +0100
Subject: [PATCH 32/47] add data-xxx for e2e testing

---
 .../src/components/dialogs/SnapshotImportDialog.vue  |  7 +++++++
 .../components/dialogs/SnapshotExportDialog.vue      |  6 +++++-
 .../instance/components/ExportImportComponents.vue   | 12 ++++++------
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/dialogs/SnapshotImportDialog.vue b/frontend/src/components/dialogs/SnapshotImportDialog.vue
index e0d155ea9a..3cbad24878 100644
--- a/frontend/src/components/dialogs/SnapshotImportDialog.vue
+++ b/frontend/src/components/dialogs/SnapshotImportDialog.vue
@@ -22,6 +22,13 @@
                         <textarea v-model="input.description" rows="8" class="ff-input ff-text-input" style="height: auto" />
                     </template>
                 </FormRow>
+                <ImportInstanceComponents
+                    v-model="parts"
+                    header="Select the components to include in the upload"
+                    :error="validateField.parts ? errors.parts : ''"
+                    :showCredentials="snapshotNeedsSecret"
+                    data-form="import-snapshot-components"
+                />
                 <FormRow v-if="snapshotNeedsSecret && parts.flows !== false && parts.credentials !== false" v-model="input.secret" :error="validateField.secret ? errors.secret : ''" data-form="import-snapshot-secret">Credentials Secret</FormRow>
             </form>
         </template>
diff --git a/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue b/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue
index 99c8d22640..038fc39047 100644
--- a/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue
+++ b/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue
@@ -2,7 +2,11 @@
     <ff-dialog ref="dialog" header="Download Snapshot" confirm-label="Download" :closeOnConfirm="false" :disable-primary="!formValid" data-el="snapshot-download-dialog" @confirm="confirm()">
         <template #default>
             <form data-form="snapshot-export" @submit.prevent>
-                <ExportInstanceComponents v-model="parts" :error="errors.parts" header="Select the components to include in the snapshot" />
+                <ExportInstanceComponents
+                    v-model="parts"
+                    :error="errors.parts" header="Select the components to include in the snapshot"
+                    data-form="export-snapshot-components"
+                />
                 <template v-if="needsSecret">
                     <FormRow containerClass="w-auto mt-6" :error="errors.secret" data-form="snapshot-secret">
                         Secret
diff --git a/frontend/src/pages/instance/components/ExportImportComponents.vue b/frontend/src/pages/instance/components/ExportImportComponents.vue
index f34ac633db..92eb53ba6b 100644
--- a/frontend/src/pages/instance/components/ExportImportComponents.vue
+++ b/frontend/src/pages/instance/components/ExportImportComponents.vue
@@ -3,11 +3,11 @@
         <p v-if="header" class="text-gray-800 block text-sm font-medium">
             {{ header }}
         </p>
-        <FormRow v-model="parts.flows" type="checkbox">
+        <FormRow v-model="parts.flows" type="checkbox" data-form="component-flows">
             Flows
         </FormRow>
         <div v-if="showCredentials" :class="parts.flows?'opacity-100':'opacity-30'">
-            <FormRow v-model="parts.credentials" type="checkbox" :disabled="!parts.flows">
+            <FormRow v-model="parts.credentials" type="checkbox" :disabled="!parts.flows" data-form="component-credentials">
                 Credentials
             </FormRow>
         </div>
@@ -21,13 +21,13 @@
         <FormRow v-if="showSettings" v-model="parts.settings" type="checkbox">
             Instance Settings
         </FormRow>
-        <FormRow v-model="envVarOpts.envVars" type="checkbox">
+        <FormRow v-model="envVarOpts.envVars" type="checkbox" data-form="component-environment-variables">
             Environment Variables
         </FormRow>
-        <div :class="['space-y-4', envVarOpts.envVars?'opacity-100':'opacity-30']">
-            <ff-radio-group v-model="envVarOpts.envVarsKo" class="ml-9" orientation="vertical" :options="envVarKeyOptions" />
+        <div :class="['space-y-4', envVarOpts.envVars?'opacity-100':'opacity-30']" data-form="component-environment-variables-options">
+            <ff-radio-group v-model="envVarOpts.envVarsKo" class="ml-9" orientation="vertical" :options="envVarOptions" />
         </div>
-        <div v-if="error" class="text-red-400 text-xs">{{ error }}</div>
+        <div v-if="error" data-el="form-row-error" class="text-red-400 inline text-xs">{{ error }}</div>
     </div>
 </template>
 

From bbd2793abe771efb48191a31ccebb6c02a6ebbdf Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 7 Oct 2024 12:02:48 +0100
Subject: [PATCH 33/47] explicit error props

---
 .../components/dialogs/SnapshotExportDialog.vue        | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue b/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue
index 038fc39047..b2aedb29f3 100644
--- a/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue
+++ b/frontend/src/pages/application/Snapshots/components/dialogs/SnapshotExportDialog.vue
@@ -61,9 +61,8 @@ export default {
                 this.input.secret = this.generateRandomKey()
                 this.snapshot = snapshot
                 this.submitted = false
-                this.errors = {
-                    secret: ''
-                }
+                this.errors.secret = ''
+                this.errors.parts = ''
                 this.$refs.secret.focus()
             }
         }
@@ -75,7 +74,10 @@ export default {
                 secret: ''
             },
             snapshot: null,
-            errors: {},
+            errors: {
+                secret: '',
+                parts: ''
+            },
             parts: {
                 flows: true,
                 credentials: true,

From d759bfeea8134a86cf28412a9df6407973e7086b Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 7 Oct 2024 12:19:07 +0100
Subject: [PATCH 34/47] snapshot upload/download component options e2e tests

---
 .../snapshots/instance-snapshots.json         |   2 +-
 .../snapshots/instance2-full-snapshot2.json   |   2 +-
 .../snapshots/instance2-snapshot2.json        |   2 +-
 .../snapshots/snapshot-with-credentials.json  |   5 +-
 .../snapshots/upload-for-download.json        |  26 ++
 .../cypress/fixtures/snapshots/upload1.json   |  26 ++
 .../cypress/fixtures/snapshots/upload2.json   |  26 ++
 .../cypress/fixtures/snapshots/upload3.json   |  26 ++
 .../cypress/fixtures/snapshots/upload4.json   |  26 ++
 .../cypress/fixtures/snapshots/upload5.json   |  26 ++
 .../cypress/fixtures/snapshots/upload6.json   |  23 ++
 .../cypress/tests/instances/snapshots.spec.js | 391 +++++++++++++++---
 12 files changed, 524 insertions(+), 57 deletions(-)
 create mode 100644 test/e2e/frontend/cypress/fixtures/snapshots/upload-for-download.json
 create mode 100644 test/e2e/frontend/cypress/fixtures/snapshots/upload1.json
 create mode 100644 test/e2e/frontend/cypress/fixtures/snapshots/upload2.json
 create mode 100644 test/e2e/frontend/cypress/fixtures/snapshots/upload3.json
 create mode 100644 test/e2e/frontend/cypress/fixtures/snapshots/upload4.json
 create mode 100644 test/e2e/frontend/cypress/fixtures/snapshots/upload5.json
 create mode 100644 test/e2e/frontend/cypress/fixtures/snapshots/upload6.json

diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/instance-snapshots.json b/test/e2e/frontend/cypress/fixtures/snapshots/instance-snapshots.json
index e4e9ccb4d1..5414c7795e 100644
--- a/test/e2e/frontend/cypress/fixtures/snapshots/instance-snapshots.json
+++ b/test/e2e/frontend/cypress/fixtures/snapshots/instance-snapshots.json
@@ -15,7 +15,7 @@
                 "mode": "autonomous",
                 "isDeploying": false
             },
-            "id": "2",
+            "id": "KR6Ov5pj5z",
             "name": "instance-2 snapshot-2",
             "description": "an instance snapshot"
         }
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/instance2-full-snapshot2.json b/test/e2e/frontend/cypress/fixtures/snapshots/instance2-full-snapshot2.json
index c9bcc9fc88..a190d4a613 100644
--- a/test/e2e/frontend/cypress/fixtures/snapshots/instance2-full-snapshot2.json
+++ b/test/e2e/frontend/cypress/fixtures/snapshots/instance2-full-snapshot2.json
@@ -2,7 +2,7 @@
   "flows": {
     "flows": [{"id":"8a47f02e3a227d35","type":"tab","label":"Device info flows","disabled":false,"info":"","env":[]},{"id":"36113d72fe3d5757","type":"inject","z":"8a47f02e3a227d35","name":"","props":[{"p":"payload"},{"p":"payload.FF_INSTANCE_NAME","v":"FF_INSTANCE_NAME","vt":"env"},{"p":"payload.FF_DEVICE_NAME","v":"FF_DEVICE_NAME","vt":"env"}],"repeat":"6","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{}","payloadType":"json","x":140,"y":140,"wires":[["5493f53d471a35ba"]]},{"id":"5493f53d471a35ba","type":"debug","z":"8a47f02e3a227d35","name":"debug 1","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":340,"y":140,"wires":[]},{"id":"970460dbdcb949f7","type":"comment","z":"8a47f02e3a227d35","name":"System info","info":"","x":150,"y":80,"wires":[]}]
   },
-  "id": "2",
+  "id": "KR6Ov5pj5z",
   "name": "instance-2 snapshot-2",
   "description": "an instance snapshot",
   "createdAt": "2024-01-01T11:22:33.444Z",
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/instance2-snapshot2.json b/test/e2e/frontend/cypress/fixtures/snapshots/instance2-snapshot2.json
index 54137468ad..6decc88da5 100644
--- a/test/e2e/frontend/cypress/fixtures/snapshots/instance2-snapshot2.json
+++ b/test/e2e/frontend/cypress/fixtures/snapshots/instance2-snapshot2.json
@@ -1,5 +1,5 @@
 {
-    "id": "2",
+    "id": "KR6Ov5pj5z",
     "name": "instance-2 snapshot-2",
     "description": "an instance snapshot",
     "createdAt": "2024-01-01T11:22:33.444Z",
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/snapshot-with-credentials.json b/test/e2e/frontend/cypress/fixtures/snapshots/snapshot-with-credentials.json
index 8ee9bc5a22..e1abe9a941 100644
--- a/test/e2e/frontend/cypress/fixtures/snapshots/snapshot-with-credentials.json
+++ b/test/e2e/frontend/cypress/fixtures/snapshots/snapshot-with-credentials.json
@@ -13,7 +13,10 @@
     "ownerType": "device",
     "settings": {
         "settings": {},
-        "env": {},
+        "env": {
+            "key1": "value1",
+            "key2": "value2"
+        },
         "modules": {
             "@flowfuse/nr-file-nodes": "0.0.5",
             "@flowfuse/nr-project-nodes": "file:../../../Users/Stephen/repos/github/flowfuse/dev-env/packages/nr-project-nodes",
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/upload-for-download.json b/test/e2e/frontend/cypress/fixtures/snapshots/upload-for-download.json
new file mode 100644
index 0000000000..ec2ef155cc
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/snapshots/upload-for-download.json
@@ -0,0 +1,26 @@
+{
+  "flows": {
+      "flows": [{"id":"8a47f02e3a227d35","type":"tab","label":"Device info flows","disabled":false,"info":"","env":[]},{"id":"36113d72fe3d5757","type":"inject","z":"8a47f02e3a227d35","name":"","props":[{"p":"payload"},{"p":"payload.FF_INSTANCE_NAME","v":"FF_INSTANCE_NAME","vt":"env"},{"p":"payload.FF_DEVICE_NAME","v":"FF_DEVICE_NAME","vt":"env"}],"repeat":"6","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{}","payloadType":"json","x":140,"y":140,"wires":[["5493f53d471a35ba"]]},{"id":"5493f53d471a35ba","type":"debug","z":"8a47f02e3a227d35","name":"debug 1","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":340,"y":140,"wires":[]},{"id":"970460dbdcb949f7","type":"comment","z":"8a47f02e3a227d35","name":"System info","info":"","x":150,"y":80,"wires":[]}],
+      "credentials": {
+          "$": "132e70164b076039152304df8407ad19IsI="
+      }
+  },
+  "id": "KR6Ov5pj5z",
+  "name": "upload-for-download.json",
+  "description": "a device snapshot",
+  "createdAt": "2024-01-01T11:22:33.444Z",
+  "updatedAt": "2024-01-01T11:22:33.444Z",
+  "ownerType": "device",
+  "settings": {
+      "settings": {},
+      "env": {
+          "key1": "value1",
+          "key2": "value2"
+      },
+      "modules": {
+          "@flowfuse/nr-file-nodes": "0.0.5",
+          "@flowfuse/nr-project-nodes": "file:../../../Users/Stephen/repos/github/flowfuse/dev-env/packages/nr-project-nodes",
+          "node-red": "3.1.9"
+      }
+  }
+}
\ No newline at end of file
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/upload1.json b/test/e2e/frontend/cypress/fixtures/snapshots/upload1.json
new file mode 100644
index 0000000000..e503d44dcd
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/snapshots/upload1.json
@@ -0,0 +1,26 @@
+{
+  "flows": {
+      "flows": [{"id":"8a47f02e3a227d35","type":"tab","label":"Device info flows","disabled":false,"info":"","env":[]},{"id":"36113d72fe3d5757","type":"inject","z":"8a47f02e3a227d35","name":"","props":[{"p":"payload"},{"p":"payload.FF_INSTANCE_NAME","v":"FF_INSTANCE_NAME","vt":"env"},{"p":"payload.FF_DEVICE_NAME","v":"FF_DEVICE_NAME","vt":"env"}],"repeat":"6","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{}","payloadType":"json","x":140,"y":140,"wires":[["5493f53d471a35ba"]]},{"id":"5493f53d471a35ba","type":"debug","z":"8a47f02e3a227d35","name":"debug 1","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":340,"y":140,"wires":[]},{"id":"970460dbdcb949f7","type":"comment","z":"8a47f02e3a227d35","name":"System info","info":"","x":150,"y":80,"wires":[]}],
+      "credentials": {
+          "$": "132e70164b076039152304df8407ad19IsI="
+      }
+  },
+  "id": "KR6Ov5pj5z",
+  "name": "upload1.json",
+  "description": "a device snapshot",
+  "createdAt": "2024-01-01T11:22:33.444Z",
+  "updatedAt": "2024-01-01T11:22:33.444Z",
+  "ownerType": "device",
+  "settings": {
+      "settings": {},
+      "env": {
+          "key1": "value1",
+          "key2": "value2"
+      },
+      "modules": {
+          "@flowfuse/nr-file-nodes": "0.0.5",
+          "@flowfuse/nr-project-nodes": "file:../../../Users/Stephen/repos/github/flowfuse/dev-env/packages/nr-project-nodes",
+          "node-red": "3.1.9"
+      }
+  }
+}
\ No newline at end of file
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/upload2.json b/test/e2e/frontend/cypress/fixtures/snapshots/upload2.json
new file mode 100644
index 0000000000..bcce75998a
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/snapshots/upload2.json
@@ -0,0 +1,26 @@
+{
+  "flows": {
+      "flows": [{"id":"8a47f02e3a227d35","type":"tab","label":"Device info flows","disabled":false,"info":"","env":[]},{"id":"36113d72fe3d5757","type":"inject","z":"8a47f02e3a227d35","name":"","props":[{"p":"payload"},{"p":"payload.FF_INSTANCE_NAME","v":"FF_INSTANCE_NAME","vt":"env"},{"p":"payload.FF_DEVICE_NAME","v":"FF_DEVICE_NAME","vt":"env"}],"repeat":"6","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{}","payloadType":"json","x":140,"y":140,"wires":[["5493f53d471a35ba"]]},{"id":"5493f53d471a35ba","type":"debug","z":"8a47f02e3a227d35","name":"debug 1","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":340,"y":140,"wires":[]},{"id":"970460dbdcb949f7","type":"comment","z":"8a47f02e3a227d35","name":"System info","info":"","x":150,"y":80,"wires":[]}],
+      "credentials": {
+          "$": "132e70164b076039152304df8407ad19IsI="
+      }
+  },
+  "id": "KR6Ov5pj5z",
+  "name": "upload2.json",
+  "description": "a device snapshot",
+  "createdAt": "2024-01-01T11:22:33.444Z",
+  "updatedAt": "2024-01-01T11:22:33.444Z",
+  "ownerType": "device",
+  "settings": {
+      "settings": {},
+      "env": {
+          "key1": "value1",
+          "key2": "value2"
+      },
+      "modules": {
+          "@flowfuse/nr-file-nodes": "0.0.5",
+          "@flowfuse/nr-project-nodes": "file:../../../Users/Stephen/repos/github/flowfuse/dev-env/packages/nr-project-nodes",
+          "node-red": "3.1.9"
+      }
+  }
+}
\ No newline at end of file
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/upload3.json b/test/e2e/frontend/cypress/fixtures/snapshots/upload3.json
new file mode 100644
index 0000000000..37b5aba231
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/snapshots/upload3.json
@@ -0,0 +1,26 @@
+{
+  "flows": {
+      "flows": [{"id":"8a47f02e3a227d35","type":"tab","label":"Device info flows","disabled":false,"info":"","env":[]},{"id":"36113d72fe3d5757","type":"inject","z":"8a47f02e3a227d35","name":"","props":[{"p":"payload"},{"p":"payload.FF_INSTANCE_NAME","v":"FF_INSTANCE_NAME","vt":"env"},{"p":"payload.FF_DEVICE_NAME","v":"FF_DEVICE_NAME","vt":"env"}],"repeat":"6","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{}","payloadType":"json","x":140,"y":140,"wires":[["5493f53d471a35ba"]]},{"id":"5493f53d471a35ba","type":"debug","z":"8a47f02e3a227d35","name":"debug 1","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":340,"y":140,"wires":[]},{"id":"970460dbdcb949f7","type":"comment","z":"8a47f02e3a227d35","name":"System info","info":"","x":150,"y":80,"wires":[]}],
+      "credentials": {
+          "$": "132e70164b076039152304df8407ad19IsI="
+      }
+  },
+  "id": "KR6Ov5pj5z",
+  "name": "upload3.json",
+  "description": "a device snapshot",
+  "createdAt": "2024-01-01T11:22:33.444Z",
+  "updatedAt": "2024-01-01T11:22:33.444Z",
+  "ownerType": "device",
+  "settings": {
+      "settings": {},
+      "env": {
+          "key1": "value1",
+          "key2": "value2"
+      },
+      "modules": {
+          "@flowfuse/nr-file-nodes": "0.0.5",
+          "@flowfuse/nr-project-nodes": "file:../../../Users/Stephen/repos/github/flowfuse/dev-env/packages/nr-project-nodes",
+          "node-red": "3.1.9"
+      }
+  }
+}
\ No newline at end of file
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/upload4.json b/test/e2e/frontend/cypress/fixtures/snapshots/upload4.json
new file mode 100644
index 0000000000..6071a076a7
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/snapshots/upload4.json
@@ -0,0 +1,26 @@
+{
+  "flows": {
+      "flows": [{"id":"8a47f02e3a227d35","type":"tab","label":"Device info flows","disabled":false,"info":"","env":[]},{"id":"36113d72fe3d5757","type":"inject","z":"8a47f02e3a227d35","name":"","props":[{"p":"payload"},{"p":"payload.FF_INSTANCE_NAME","v":"FF_INSTANCE_NAME","vt":"env"},{"p":"payload.FF_DEVICE_NAME","v":"FF_DEVICE_NAME","vt":"env"}],"repeat":"6","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{}","payloadType":"json","x":140,"y":140,"wires":[["5493f53d471a35ba"]]},{"id":"5493f53d471a35ba","type":"debug","z":"8a47f02e3a227d35","name":"debug 1","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":340,"y":140,"wires":[]},{"id":"970460dbdcb949f7","type":"comment","z":"8a47f02e3a227d35","name":"System info","info":"","x":150,"y":80,"wires":[]}],
+      "credentials": {
+          "$": "132e70164b076039152304df8407ad19IsI="
+      }
+  },
+  "id": "KR6Ov5pj5z",
+  "name": "upload4.json",
+  "description": "a device snapshot",
+  "createdAt": "2024-01-01T11:22:33.444Z",
+  "updatedAt": "2024-01-01T11:22:33.444Z",
+  "ownerType": "device",
+  "settings": {
+      "settings": {},
+      "env": {
+          "key1": "value1",
+          "key2": "value2"
+      },
+      "modules": {
+          "@flowfuse/nr-file-nodes": "0.0.5",
+          "@flowfuse/nr-project-nodes": "file:../../../Users/Stephen/repos/github/flowfuse/dev-env/packages/nr-project-nodes",
+          "node-red": "3.1.9"
+      }
+  }
+}
\ No newline at end of file
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/upload5.json b/test/e2e/frontend/cypress/fixtures/snapshots/upload5.json
new file mode 100644
index 0000000000..a787def8b5
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/snapshots/upload5.json
@@ -0,0 +1,26 @@
+{
+  "flows": {
+      "flows": [{"id":"8a47f02e3a227d35","type":"tab","label":"Device info flows","disabled":false,"info":"","env":[]},{"id":"36113d72fe3d5757","type":"inject","z":"8a47f02e3a227d35","name":"","props":[{"p":"payload"},{"p":"payload.FF_INSTANCE_NAME","v":"FF_INSTANCE_NAME","vt":"env"},{"p":"payload.FF_DEVICE_NAME","v":"FF_DEVICE_NAME","vt":"env"}],"repeat":"6","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{}","payloadType":"json","x":140,"y":140,"wires":[["5493f53d471a35ba"]]},{"id":"5493f53d471a35ba","type":"debug","z":"8a47f02e3a227d35","name":"debug 1","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":340,"y":140,"wires":[]},{"id":"970460dbdcb949f7","type":"comment","z":"8a47f02e3a227d35","name":"System info","info":"","x":150,"y":80,"wires":[]}],
+      "credentials": {
+          "$": "132e70164b076039152304df8407ad19IsI="
+      }
+  },
+  "id": "KR6Ov5pj5z",
+  "name": "upload5.json",
+  "description": "a device snapshot",
+  "createdAt": "2024-01-01T11:22:33.444Z",
+  "updatedAt": "2024-01-01T11:22:33.444Z",
+  "ownerType": "device",
+  "settings": {
+      "settings": {},
+      "env": {
+          "key1": "value1",
+          "key2": "value2"
+      },
+      "modules": {
+          "@flowfuse/nr-file-nodes": "0.0.5",
+          "@flowfuse/nr-project-nodes": "file:../../../Users/Stephen/repos/github/flowfuse/dev-env/packages/nr-project-nodes",
+          "node-red": "3.1.9"
+      }
+  }
+}
\ No newline at end of file
diff --git a/test/e2e/frontend/cypress/fixtures/snapshots/upload6.json b/test/e2e/frontend/cypress/fixtures/snapshots/upload6.json
new file mode 100644
index 0000000000..fd5729c60a
--- /dev/null
+++ b/test/e2e/frontend/cypress/fixtures/snapshots/upload6.json
@@ -0,0 +1,23 @@
+{
+  "flows": {
+      "flows": [{"id":"8a47f02e3a227d35","type":"tab","label":"Device info flows","disabled":false,"info":"","env":[]},{"id":"36113d72fe3d5757","type":"inject","z":"8a47f02e3a227d35","name":"","props":[{"p":"payload"},{"p":"payload.FF_INSTANCE_NAME","v":"FF_INSTANCE_NAME","vt":"env"},{"p":"payload.FF_DEVICE_NAME","v":"FF_DEVICE_NAME","vt":"env"}],"repeat":"6","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{}","payloadType":"json","x":140,"y":140,"wires":[["5493f53d471a35ba"]]},{"id":"5493f53d471a35ba","type":"debug","z":"8a47f02e3a227d35","name":"debug 1","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":340,"y":140,"wires":[]},{"id":"970460dbdcb949f7","type":"comment","z":"8a47f02e3a227d35","name":"System info","info":"","x":150,"y":80,"wires":[]}]
+  },
+  "id": "KR6Ov5pj5z",
+  "name": "upload6.json",
+  "description": "a device snapshot",
+  "createdAt": "2024-01-01T11:22:33.444Z",
+  "updatedAt": "2024-01-01T11:22:33.444Z",
+  "ownerType": "device",
+  "settings": {
+      "settings": {},
+      "env": {
+          "key1": "value1",
+          "key2": "value2"
+      },
+      "modules": {
+          "@flowfuse/nr-file-nodes": "0.0.5",
+          "@flowfuse/nr-project-nodes": "file:../../../Users/Stephen/repos/github/flowfuse/dev-env/packages/nr-project-nodes",
+          "node-red": "3.1.9"
+      }
+  }
+}
\ No newline at end of file
diff --git a/test/e2e/frontend/cypress/tests/instances/snapshots.spec.js b/test/e2e/frontend/cypress/tests/instances/snapshots.spec.js
index 694d642403..ab01f0ff3a 100644
--- a/test/e2e/frontend/cypress/tests/instances/snapshots.spec.js
+++ b/test/e2e/frontend/cypress/tests/instances/snapshots.spec.js
@@ -1,7 +1,10 @@
 /// <reference types="cypress" />
+import should from 'should'
+
 import instanceSnapshots from '../../fixtures/snapshots/instance-snapshots.json'
 import instanceFullSnapshot from '../../fixtures/snapshots/instance2-full-snapshot2.json'
 import instanceSnapshot from '../../fixtures/snapshots/instance2-snapshot2.json'
+// import instanceFullSnapshot from '../../fixtures/snapshots/snapshot-with-credentials.json'
 let idx = 0
 const IDX_DEPLOY_SNAPSHOT = idx++
 const IDX_EDIT_SNAPSHOT = idx++
@@ -168,19 +171,44 @@ describe('FlowForge - Instance Snapshots', () => {
         cy.get('[data-el="dialog-compare-snapshot"] .ff-dialog-content svg').should('exist')
     })
 
-    it('download snapshot', () => {
+    function prepareDownloadSnapshot (projectId, name) {
+        // if (!testSnapshotUploaded) {
+        // first upload a known snapshot so that download tests can be run against it
+        // directly POST to api/v1/snapshots/import the upload1.json snapshot
+        cy.fixture('snapshots/upload-for-download.json').then((snapshot) => {
+            snapshot.name = name
+            cy.request('POST', '/api/v1/snapshots/import', {
+                ownerId: projectId,
+                ownerType: 'instance',
+                snapshot,
+                credentialSecret: 'correct secret',
+                components: { flows: true, credentials: true, env: true }
+            })
+        })
         // ensure the downloads folder is empty before the test
         cy.task('clearDownloads')
-
-        cy.intercept('POST', '/api/*/snapshots/*/export').as('exportSnapshot')
-
+        cy.intercept('GET', '/api/*/projects/*/snapshots').as('snapshotData')
+        cy.visit(`/instance/${projectId}/snapshots`)
+        cy.wait('@snapshotData')
         // click kebab menu in row 1
         cy.get('[data-el="snapshots"] tbody').find('.ff-kebab-menu').eq(0).click()
         // click the Download Snapshot option
         cy.get('[data-el="snapshots"] tbody .ff-kebab-menu .ff-kebab-options').find('.ff-list-item').eq(IDX_DOWNLOAD_SNAPSHOT).click()
-
         // wait for SnapshotExportDialog dialog to appear
         cy.get('[data-el="dialog-export-snapshot"]').should('be.visible')
+    }
+
+    it('download snapshot options and validation work as expected', () => {
+        // Premise: the snapshot has components and these can be included or excluded from the download as per users choice
+        // Rules:
+        // - By default, all components are included
+        // - The download button is enabled, the secret field is visible and populated with a random string
+        // - Excluding flows and/or credentials should hide the secret field
+        // - Excluding flows component disables the credentials component
+        // - Excluding env should disable the radio buttons
+        // - Excluding all components should disable the download & a validation message should appear
+
+        prepareDownloadSnapshot(projectId, 'a-snapshot')
 
         // by default, the secret should be populated with a random string and the download button should be enabled
         cy.get('[data-el="dialog-export-snapshot"] [data-form="snapshot-secret"] input').invoke('val').should('not.be.empty')
@@ -214,27 +242,144 @@ describe('FlowForge - Instance Snapshots', () => {
         cy.get('[data-el="dialog-export-snapshot"] [data-form="snapshot-secret"] input').type('                   ')
         cy.get('[data-el="dialog-export-snapshot"] [data-el="form-row-error"]').contains('Secret cannot start or end with a space')
 
+        // download button should be enabled & secret field should be visible and populated
         cy.get('[data-el="dialog-export-snapshot"] [data-form="snapshot-secret"] input').clear()
         cy.get('[data-el="dialog-export-snapshot"] [data-form="snapshot-secret"] input').type('a valid secret')
+        cy.get('[data-el="dialog-export-snapshot"] button').contains('Download').should('not.be.disabled')
+        cy.get('[data-el="dialog-export-snapshot"] [data-form="snapshot-secret"]').should('exist')
+        cy.get('[data-el="dialog-export-snapshot"] [data-form="snapshot-secret"] input').invoke('val').should('not.be.empty')
+
+        // check the component options are present & default state
+        cy.get('[data-el="dialog-export-snapshot"] [data-form="export-snapshot-components"]').should('exist')
+        cy.get('[data-el="dialog-export-snapshot"] [data-form="export-snapshot-components"]').within(() => {
+            cy.get('[data-form="component-flows"]').contains('Flows')
+            cy.get('[data-form="component-flows"] input[type="checkbox"]').should('be.checked')
+
+            cy.get('[data-form="component-credentials"]').contains('Credentials')
+            cy.get('[data-form="component-credentials"] input[type="checkbox"]').should('be.checked')
+            cy.get('[data-form="component-credentials"] input[type="checkbox"]').should('not.be.disabled')
+
+            cy.get('[data-form="component-environment-variables"]').contains('Environment Variables')
+            cy.get('[data-form="component-environment-variables"] input[type="checkbox"]').should('be.checked')
+
+            cy.get('[data-form="component-environment-variables-options"]').should('exist')
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn').should('have.length', 2)
+
+            // by default, the first radio button should be checked
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn').eq(0).should('not.be.disabled')
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn').eq(0).contains('Keys and Values')
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn span.checkbox').eq(0).should('have.attr', 'checked', 'checked')
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn').eq(1).should('not.be.disabled')
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn').eq(1).contains('Keys Only')
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn').eq(1).contains('Keys Only').should('not.have.attr', 'checked')
+        })
+
+        // now, click the `flows` check which should disable the `credentials` field (no flows, no creds!). Also, the secret field should be hidden
+        cy.get('[data-el="dialog-export-snapshot"] [data-form="export-snapshot-components"]').within(() => {
+            cy.get('[data-form="component-flows"] .ff-checkbox').click()
+            cy.get('[data-form="component-credentials"] input[type="checkbox"]').should('be.disabled')
+            cy.get('[data-el="dialog-export-snapshot"] [data-form="snapshot-secret"]').should('not.exist')
+        })
+
+        // now, click the `environment variables`, the `key and values` & `keys only` radio buttons should be disabled
+        cy.get('[data-el="dialog-export-snapshot"] [data-form="export-snapshot-components"]').within(() => {
+            cy.get('[data-form="component-environment-variables"] .ff-checkbox').click()
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn').eq(0).should('have.attr', 'disabled')
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn').eq(1).should('have.attr', 'disabled')
+        })
+
+        // ensure the validation message appears when all components are excluded & the download button is disabled
+        cy.get('[data-el="dialog-export-snapshot"] [data-form="export-snapshot-components"] [data-el="form-row-error"]').contains('At least one component must be selected')
+        cy.get('[data-el="dialog-export-snapshot"] button').contains('Download').should('be.disabled')
+
+        // re-check the flows (the validation should clear), then uncheck credentials
+        cy.get('[data-el="dialog-export-snapshot"] [data-form="export-snapshot-components"]').within(() => {
+            cy.get('[data-form="component-flows"] .ff-checkbox').click()
+            cy.get('[data-form="component-credentials"] input[type="checkbox"]').should('not.be.disabled')
+            cy.get('[data-form="component-credentials"] .ff-checkbox').click() // exclude credentials
+        })
+        // validation message should be gone, secret field should be hidden and download button should be enabled
+        cy.get('[data-el="dialog-export-snapshot"] [data-form="export-snapshot-components"] [data-el="form-row-error"]').should('not.exist')
+        cy.get('[data-el="dialog-export-snapshot"] [data-form="snapshot-secret"]').should('not.exist')
+        cy.get('[data-el="dialog-export-snapshot"] button').contains('Download').should('not.be.disabled')
+    })
 
-        // operate the data-action="dialog-confirm" button
-        cy.get('[data-el="dialog-export-snapshot"] [data-action="dialog-confirm"]').click()
+    function downloadSnapshotWithComponentOptionsTest (excludeFlows, excludeCredentials, excludeEnv, envKeysOnly) {
+        const nameBuilder = ['for-download']
+        nameBuilder.push(excludeFlows ? 'exclude-flows' : 'include-flows')
+        nameBuilder.push(excludeCredentials ? 'exclude-creds' : 'include-creds')
+        nameBuilder.push(excludeEnv ? 'exclude-env' : 'include-env')
+        if (!excludeEnv) {
+            nameBuilder.push(envKeysOnly ? 'keys-only' : 'keys-and-values')
+        }
+        const name = nameBuilder.join(' ')
+
+        prepareDownloadSnapshot(projectId, name)
+        cy.intercept('POST', '/api/*/snapshots/*/export').as('exportSnapshot')
 
-        // wait for `api/v1/snapshots/*/export` to respond
+        if (excludeFlows) {
+            cy.get('[data-el="dialog-export-snapshot"] [data-form="export-snapshot-components"] [data-form="component-flows"] .ff-checkbox').click()
+        }
+        if (excludeCredentials) {
+            cy.get('[data-el="dialog-export-snapshot"] [data-form="export-snapshot-components"] [data-form="component-credentials"] .ff-checkbox').click()
+        }
+        if (excludeEnv) {
+            cy.get('[data-el="dialog-export-snapshot"] [data-form="export-snapshot-components"] [data-form="component-environment-variables"] .ff-checkbox').click()
+        } else if (envKeysOnly) {
+            cy.get('[data-el="dialog-export-snapshot"] [data-form="export-snapshot-components"] [data-form="component-environment-variables-options"] .ff-radio-btn').eq(1).click()
+        }
+        // click the `Download` button
+        cy.get('[data-el="dialog-export-snapshot"] button').contains('Download').click()
+        const downloadsFolder = Cypress.config('downloadsFolder')
         cy.wait('@exportSnapshot').then(interception => {
-            // At this point, the endpoint has returned but occasionally, the test fails as the file is not yet written to the filesystem.
-            // To counter this, there is a short 250ms wait to allow time for the file to be written to the filesystem.
-            // A better solution would be to use a cy.command (named waitForFileDownload) that polls the downloads folder
-            // and calls `cy.wait` with timeout and retry. This would allow the test to wait for the file in a more reliable way.
-            // For now, a small delay here gets the job done.
             cy.wait(250) // eslint-disable-line cypress/no-unnecessary-waiting
-
             const 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` })
+            return cy.task('fileExists', { dir: downloadsFolder, fileRE: `snapshot-${response.id}-\\d{8}-\\d{6}\\.json` })
+        }).then((filename) => {
+            return cy.readFile(`${downloadsFolder}/${filename}`)
+        }).then((packageObject) => {
+            expect(packageObject).to.have.property('name', name) // ensure we get the correct snapshot
+            expect(packageObject.flows).to.have.keys('flows', 'credentials')
+            if (excludeFlows) {
+                expect(packageObject.flows).to.have.property('flows').and.to.be.an('array').and.to.have.length(0)
+            } else {
+                expect(packageObject.flows).to.have.property('flows').and.to.be.an('array').and.to.have.length(4)
+            }
+            expect(packageObject.flows).to.have.property('credentials').and.to.be.an('object')
+            if (excludeFlows || excludeCredentials) {
+                expect(packageObject.flows.credentials).to.deep.equal({})
+            } else {
+                expect(packageObject.flows.credentials).to.have.property('$')
+            }
+            expect(packageObject.settings).to.have.property('env')
+            if (excludeEnv) {
+                expect(packageObject.settings.env || {}).to.deep.equal({})
+            } else if (envKeysOnly) {
+                expect(packageObject.settings.env).to.deep.equal({ key1: '', key2: '' })
+            } else {
+                expect(packageObject.settings.env).to.deep.equal({ key1: 'value1', key2: 'value2' })
+            }
         })
+    }
+
+    it('download full snapshot, include all', () => {
+        downloadSnapshotWithComponentOptionsTest(false, false, false, false)
+    })
+
+    it('download snapshot, exclude flows', () => {
+        downloadSnapshotWithComponentOptionsTest(true, false, false, false)
+    })
+
+    it('download snapshot, exclude credentials', () => {
+        downloadSnapshotWithComponentOptionsTest(false, true, false, false)
+    })
+
+    it('download snapshot, exclude env', () => {
+        downloadSnapshotWithComponentOptionsTest(false, false, true, false)
+    })
+
+    it('download snapshot, env keys only', () => {
+        downloadSnapshotWithComponentOptionsTest(false, false, false, true)
     })
 
     it('download snapshot package.json', () => {
@@ -293,7 +438,16 @@ describe('FlowForge - Instance Snapshots', () => {
         })
     })
 
-    it('upload snapshot with credentials', () => {
+    it('upload snapshot options and validation work as expected', () => {
+        // Premise: the snapshot has components and these can be included or excluded from the download as per users choice
+        // Rules:
+        // - By default, all components are included
+        // - The upload button is enabled, the secret field is visible
+        // - excluding flows and/or credentials should hide the secret field
+        // - excluding flows component disables the credentials component
+        // - Excluding all components should disable the upload & a validation message should appear
+        // - Excluding env should disable the radio buttons
+
         cy.fixture('snapshots/snapshot-with-credentials.json', null).as('snapshot')
         cy.intercept('POST', '/api/*/snapshots/import').as('importSnapshot')
 
@@ -327,21 +481,72 @@ describe('FlowForge - Instance Snapshots', () => {
         cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-secret"] input').type('correct secret')
         cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-secret"]').should('not.contain', '[data-el="form-row-error"]')
 
-        // set a description
-        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-description"] textarea').type('snapshot1 description')
-
-        // click import button
-        cy.get('[data-el="dialog-import-snapshot"] [data-action="dialog-confirm"]').click()
-
-        cy.wait('@importSnapshot')
+        // Upload button should be enabled & secret field should be visible and populated
+        cy.get('[data-el="dialog-import-snapshot"] button').contains('Upload').should('not.be.disabled')
+        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-secret"]').should('exist')
+        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-secret"] input').invoke('val').should('not.be.empty')
+
+        // check the component options are present & default state
+        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-components"]').should('exist')
+        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-components"]').within(() => {
+            cy.get('[data-form="component-flows"]').contains('Flows')
+            cy.get('[data-form="component-flows"] input[type="checkbox"]').should('be.checked')
+
+            cy.get('[data-form="component-credentials"]').contains('Credentials')
+            cy.get('[data-form="component-credentials"] input[type="checkbox"]').should('be.checked')
+            cy.get('[data-form="component-credentials"] input[type="checkbox"]').should('not.be.disabled')
+
+            cy.get('[data-form="component-environment-variables"]').contains('Environment Variables')
+            cy.get('[data-form="component-environment-variables"] input[type="checkbox"]').should('be.checked')
+
+            cy.get('[data-form="component-environment-variables-options"]').should('exist')
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn').should('have.length', 2)
+
+            // by default, the first radio button should be checked
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn').eq(0).should('not.be.disabled')
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn').eq(0).contains('Keys and Values')
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn span.checkbox').eq(0).should('have.attr', 'checked', 'checked')
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn').eq(1).should('not.be.disabled')
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn').eq(1).contains('Keys Only')
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn').eq(1).contains('Keys Only').should('not.have.attr', 'checked')
+        })
 
-        // check the snapshot is now in the table
-        cy.get('[data-el="snapshots"] tbody').find('tr').contains('uploaded snapshot1')
-        cy.get('[data-el="snapshots"] tbody').find('tr').contains('snapshot1 description')
+        // now, click the `flows` check which should disable the `credentials` field (no flows, no creds!). Also, the secret field should be hidden
+        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-components"]').within(() => {
+            cy.get('[data-form="component-flows"] .ff-checkbox').click()
+            cy.get('[data-form="component-credentials"] input[type="checkbox"]').should('be.disabled')
+        })
+        cy.get('[data-form="import-snapshot-secret"]').should('not.exist')
+
+        // now, click the `environment variables`, the `key and values` & `keys only` radio buttons should be disabled
+        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-components"]').within(() => {
+            cy.get('[data-form="component-environment-variables"] .ff-checkbox').click()
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn').eq(0).should('have.attr', 'disabled')
+            cy.get('[data-form="component-environment-variables-options"] .ff-radio-btn').eq(1).should('have.attr', 'disabled')
+            cy.get('[data-el="form-row-error"]').contains('At least one component must be selected')
+        })
+        cy.get('[data-el="dialog-import-snapshot"] button').contains('Upload').should('be.disabled')
+
+        // re-check the flows (the validation should clear), then disable credentials, the secret field should not be shown
+        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-components"]').within(() => {
+            cy.get('[data-form="component-flows"] .ff-checkbox').click()
+            cy.get('[data-form="component-credentials"] input[type="checkbox"]').should('not.be.disabled')
+            cy.get('[data-form="component-credentials"] .ff-checkbox').click() // exclude credentials
+            cy.get('[data-el="form-row-error"]').should('not.exist') // validation message should be gone
+            cy.get('[data-form="import-snapshot-secret"]').should('not.exist') // secret field should be hidden
+        })
+        cy.get('[data-el="dialog-import-snapshot"] button').contains('Upload').should('not.be.disabled') // Upload button should be re-enabled now
     })
 
-    it('upload snapshot without credentials', () => {
-        cy.fixture('snapshots/instance2-full-snapshot2.json', null).as('snapshot')
+    function uploadWithComponentOptionsTest (excludeFlows, excludeCredentials, excludeEnv, envKeysOnly, fixture) {
+        const summary = [excludeFlows, excludeCredentials, excludeEnv, envKeysOnly].map((v) => v ? 'exclude' : 'include').join('-')
+        const fixtureFilename = fixture.split('/').pop()
+        let fixtureHasCredentials = true
+        cy.fixture(fixture, 'utf8', { timeout: 5000 }).as('snapshot-' + summary).then((snapshot) => {
+            if (!snapshot.flows.credentials || Object.hasOwnProperty.call(snapshot.flows.credentials, '$') === false) {
+                fixtureHasCredentials = false
+            }
+        })
         cy.intercept('POST', '/api/*/snapshots/import').as('importSnapshot')
 
         // click data-action="import-snapshot" to open the dialog
@@ -352,34 +557,114 @@ describe('FlowForge - Instance Snapshots', () => {
         // check the dialog header
         cy.get('[data-el="dialog-import-snapshot"] .ff-dialog-header').contains('Upload Snapshot')
 
-        // upload the snapshot file that has credentials (the credentials secret field should become visible)
-        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-filename"] input[type="file"]').selectFile({ contents: '@snapshot' }, { force: true }) // force because the input is hidden
+        // upload the snapshot file that has credentials (the credentials secret field be visible since the snapshot has credentials)
+        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-filename"] input[type="file"]').selectFile(
+            { contents: '@snapshot-' + summary, filename: fixture },
+            { force: true } // force because the input is hidden
+        )
 
         // check file field input text is the filename
-        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-filename"] input[type="text"]').should('have.value', 'instance2-full-snapshot2.json')
+        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-filename"] input[type="text"]').should('have.value', fixtureFilename)
         // check name field is the name from within the snapshot file
-        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-name"] input').should('have.value', 'instance-2 snapshot-2')
-
-        // check credentials secret field is not visible
-        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-secret"]').should('not.exist')
+        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-name"] input').should('have.value', fixtureFilename)
 
-        // check validation of name field
+        // set a unique name and description
+        const time = new Date().toISOString()
+        const name = `name @ ${time}`
+        const desc = `description @ ${time}`
         cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-name"] input').clear()
-        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-name"] [data-el="form-row-error"]').should('contain.text', 'Name is required')
-        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-name"] input').type('uploaded snapshot2')
-        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-name"]').should('not.contain', '[data-el="form-row-error"]')
-
-        // set a description
-        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-description"] textarea').type('snapshot2 description')
+        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-name"] input').type(name)
+        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-description"] textarea').clear()
+        cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-description"] textarea').type(desc)
+
+        // if the fixture doesnt contain credentials, the secret field should not be visible
+        if (fixtureHasCredentials === false) {
+            cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-secret"]').should('not.exist')
+        }
+
+        // set the component options
+        if (excludeFlows) {
+            cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-components"] [data-form="component-flows"] .ff-checkbox').click()
+        }
+        if (fixtureHasCredentials && excludeCredentials === true) {
+            cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-components"] [data-form="component-credentials"] .ff-checkbox').click()
+        }
+        if (excludeEnv) {
+            cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-components"] [data-form="component-environment-variables"] .ff-checkbox').click()
+        } else if (envKeysOnly) {
+            cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-components"] [data-form="component-environment-variables-options"] .ff-radio-btn').eq(1).click()
+        }
+        if (fixtureHasCredentials && excludeFlows === false && excludeCredentials === false) {
+            cy.get('[data-el="dialog-import-snapshot"] [data-form="import-snapshot-secret"] input').type('correct secret')
+        }
 
         // click import button
         cy.get('[data-el="dialog-import-snapshot"] [data-action="dialog-confirm"]').click()
 
-        cy.wait('@importSnapshot')
+        cy.wait('@importSnapshot').then(interception => {
+            const body = interception.request.body
+            should(body.snapshot.name).equal(name)
+            should(body.snapshot.description).equal(desc)
+            if (fixtureHasCredentials && excludeFlows === false && excludeCredentials === false) {
+                should(body.credentialSecret).equal('correct secret')
+            }
+            should(body.components).have.property('credentials', !excludeCredentials)
+            should(body.components).have.property('flows', !excludeFlows)
+            should(body.components).have.property('envVars', excludeEnv ? false : (envKeysOnly ? 'keys' : 'all'))
+            should(body.snapshot.flows.flows).be.an.Array()
+            if (excludeFlows) {
+                should(body.snapshot.flows.flows).have.length(0)
+            } else {
+                should(body.snapshot.flows.flows).have.length(4)
+            }
+            if (fixtureHasCredentials) {
+                should(body.snapshot.flows.credentials).be.an.Object()
+                if (excludeFlows || excludeCredentials) {
+                    should(body.snapshot.flows.credentials).not.have.property('$')
+                } else {
+                    should(body.snapshot.flows.credentials).have.property('$')
+                }
+            }
+            should(body.snapshot.settings.env).be.an.Object()
+            if (excludeEnv) {
+                should(body.snapshot.settings.env).not.have.property('key1')
+                should(body.snapshot.settings.env).not.have.property('key2')
+            } else if (envKeysOnly) {
+                should(body.snapshot.settings.env).have.property('key1', '')
+                should(body.snapshot.settings.env).have.property('key2', '')
+            } else {
+                should(body.snapshot.settings.env).have.property('key1', 'value1')
+                should(body.snapshot.settings.env).have.property('key2', 'value2')
+            }
+        })
+
+        // check the topmost snapshot is the one just uploaded
+        cy.get('[data-el="snapshots"] tbody').find('tr').eq(0).contains(name)
+        cy.get('[data-el="snapshots"] tbody').find('tr').eq(0).contains(desc)
+    }
+
+    it('upload full snapshot, include all', () => {
+        uploadWithComponentOptionsTest(false, false, false, false, 'snapshots/upload1.json')
+    })
+
+    it('upload full snapshot, exclude flows', () => {
+        uploadWithComponentOptionsTest(true, false, false, false, 'snapshots/upload2.json')
+    })
+
+    it('upload full snapshot, exclude credentials', () => {
+        uploadWithComponentOptionsTest(false, true, false, false, 'snapshots/upload3.json')
+    })
+
+    it('upload full snapshot, exclude env', () => {
+        uploadWithComponentOptionsTest(false, false, true, false, 'snapshots/upload4.json')
+    })
+
+    it('upload full snapshot, env keys only', () => {
+        uploadWithComponentOptionsTest(false, false, false, true, 'snapshots/upload5.json')
+    })
 
-        // check the snapshot is now in the table
-        cy.get('[data-el="snapshots"] tbody').find('tr').contains('uploaded snapshot2')
-        cy.get('[data-el="snapshots"] tbody').find('tr').contains('snapshot2 description')
+    it('upload snapshot which has no credentials', () => {
+        uploadWithComponentOptionsTest(false, null, false, false, 'snapshots/upload6.json')
     })
 
     it('Can rollback a snapshot', () => {
@@ -431,15 +716,15 @@ describe('FlowForge shows audit logs', () => {
     })
 
     it('for when a snapshot is created', () => {
-        cy.get('.ff-audit-entry').contains('Instance Snapshot Created')
+        cy.get('.ff-audit-entry').contains('Instance Snapshot Created', { includeShadowDom: true, force: true }) // force check to inspect items off screen
     })
     it('for when a snapshot is deleted', () => {
-        cy.get('.ff-audit-entry').contains('Instance Snapshot Deleted')
+        cy.get('.ff-audit-entry').contains('Instance Snapshot Deleted', { includeShadowDom: true, force: true }) // force check to inspect items off screen
     })
     it('for when a snapshot is exported', () => {
-        cy.get('.ff-audit-entry').contains('Instance Snapshot Exported')
+        cy.get('.ff-audit-entry').contains('Instance Snapshot Exported', { includeShadowDom: true, force: true }) // force check to inspect items off screen
     })
     it('for when a snapshot is imported', () => {
-        cy.get('.ff-audit-entry').contains('Snapshot Imported')
+        cy.get('.ff-audit-entry').contains('Snapshot Imported', { includeShadowDom: true, force: true }) // force check to inspect items off screen
     })
 })

From 0cf8ba41f68752db261036886e64fca9b1b5c18c Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Mon, 7 Oct 2024 12:19:40 +0100
Subject: [PATCH 35/47] ability to grab filename from REGEX test

---
 config/cypress-shared.config.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/config/cypress-shared.config.js b/config/cypress-shared.config.js
index d7f8b56f8e..350360ffc7 100644
--- a/config/cypress-shared.config.js
+++ b/config/cypress-shared.config.js
@@ -28,14 +28,17 @@ module.exports = {
                             // fileName looks like a regex
                             debug = debug + JSON.stringify(files)
                             const filteredList = files.filter(file => !!file.match(re))
-                            return filteredList.length === 1
+                            if (filteredList.length === 1) {
+                                return filteredList[0]
+                            }
+                            return false
                         }
                         return false
                     }).then(result => {
                         if (!result) {
                             throw new Error(`${fileName} not found in ${baseDir} ${debug}`)
                         }
-                        return true
+                        return result
                     })
                 },
                 // Clear all files in the downloads folder

From 5dbcbba7b67ee4f2e81ded10b8d36015cde15438 Mon Sep 17 00:00:00 2001
From: ppawlowski <piotr@devopswizards.com>
Date: Wed, 9 Oct 2024 19:27:49 +0200
Subject: [PATCH 36/47] disable pre-staging deploy

---
 .github/workflows/branch-deploy.yaml | 346 +++++++++++++--------------
 1 file changed, 173 insertions(+), 173 deletions(-)

diff --git a/.github/workflows/branch-deploy.yaml b/.github/workflows/branch-deploy.yaml
index e1fd802df9..c178ca543a 100644
--- a/.github/workflows/branch-deploy.yaml
+++ b/.github/workflows/branch-deploy.yaml
@@ -148,190 +148,190 @@ jobs:
           docker tag ${{ env.tagged_image }} ${{ steps.aws-config.outputs.aws-account-id }}.dkr.ecr.eu-west-1.amazonaws.com/flowforge/${{ env.tagged_image }}-${{ env.timestamp }}
           docker push ${{ steps.aws-config.outputs.aws-account-id }}.dkr.ecr.eu-west-1.amazonaws.com/flowforge/${{ env.tagged_image }}-${{ env.timestamp }}
 
-      - name: Configure AWS credentials for EKS interaction
-        uses: aws-actions/configure-aws-credentials@v4
-        with:
-          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          aws-secret-access-key: ${{ secrets.AWS_ACCESS_KEY_SECRET }}
-          aws-region: eu-west-1
-          role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/K8sAdmin
-          role-duration-seconds: 1200
+  #     - name: Configure AWS credentials for EKS interaction
+  #       uses: aws-actions/configure-aws-credentials@v4
+  #       with:
+  #         aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+  #         aws-secret-access-key: ${{ secrets.AWS_ACCESS_KEY_SECRET }}
+  #         aws-region: eu-west-1
+  #         role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/K8sAdmin
+  #         role-duration-seconds: 1200
 
-      - name: Configure kubeconfig
-        run: |
-          aws eks update-kubeconfig --region eu-west-1 --name ${{ secrets.EKS_CLUSTER_NAME }}
+  #     - name: Configure kubeconfig
+  #       run: |
+  #         aws eks update-kubeconfig --region eu-west-1 --name ${{ secrets.EKS_CLUSTER_NAME }}
 
-      - name: Install 1Password CLI
-        uses: 1password/install-cli-action@v1
-        with:
-          version: 2.25.0
+  #     - name: Install 1Password CLI
+  #       uses: 1password/install-cli-action@v1
+  #       with:
+  #         version: 2.25.0
 
-      - name: Check out FlowFuse/helm repository (to access latest helm chart)
-        uses: actions/checkout@v4
-        with:
-          repository: 'FlowFuse/helm'
-          ref: 'main'
-          path: 'helm-repo'
-          token: ${{ secrets.GITHUB_TOKEN }}
+  #     - name: Check out FlowFuse/helm repository (to access latest helm chart)
+  #       uses: actions/checkout@v4
+  #       with:
+  #         repository: 'FlowFuse/helm'
+  #         ref: 'main'
+  #         path: 'helm-repo'
+  #         token: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Check if deployment exists
-        id: check-initial-setup
-        run: |
-          if helm status --namespace "pr-${{ env.PR_NUMBER }}" flowfuse-pr-${{ env.PR_NUMBER }} &> /dev/null; then
-            echo "initialSetup=false" >> $GITHUB_ENV
-          else
-            echo "initialSetup=true" >> $GITHUB_ENV
-          fi
+  #     - name: Check if deployment exists
+  #       id: check-initial-setup
+  #       run: |
+  #         if helm status --namespace "pr-${{ env.PR_NUMBER }}" flowfuse-pr-${{ env.PR_NUMBER }} &> /dev/null; then
+  #           echo "initialSetup=false" >> $GITHUB_ENV
+  #         else
+  #           echo "initialSetup=true" >> $GITHUB_ENV
+  #         fi
 
-      - name: Deploy
-        env:
-          OP_SERVICE_ACCOUNT_TOKEN: ${{ secrets.OP_SERVICE_ACCOUNT_TOKEN }}
-        run: |
-          helm upgrade --install \
-            --create-namespace \
-            --namespace "pr-${{ env.PR_NUMBER }}" \
-            --timeout 300s \
-            --wait \
-            --atomic \
-            --values ci/ci-values.yaml \
-            --set forge.image=${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.eu-west-1.amazonaws.com/flowforge/${{ env.tagged_image }}-${{ env.timestamp }} \
-            --set forge.entryPoint=${{ env.PR_NUMBER }}.flowfuse.dev \
-            --set forge.broker.hostname=${{ env.PR_NUMBER }}-mqtt.flowfuse.dev \
-            --set forge.projectNamespace=pr-${{ env.PR_NUMBER }}-projects \
-            --set forge.clusterRole.name=pr-${{ env.PR_NUMBER }}-clusterrole \
-            --set forge.license=${{ secrets.PRE_STAGING_LICENSE }} \
-            --set forge.aws.IAMRole=arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/flowforge_service_account_role \
-            --set forge.email.ses.sourceArn=arn:aws:ses:eu-west-1:${{ secrets.AWS_ACCOUNT_ID }}:identity/flowfuse.com \
-            --set forge.assistant.service.url=$(op read op://ci/staging_flowfuse/assistant_url) \
-            --set forge.assistant.service.token=$(op read op://ci/staging_flowfuse/assistant_token) \
-            flowfuse-pr-${{ env.PR_NUMBER }} ./helm-repo/helm/flowforge
+  #     - name: Deploy
+  #       env:
+  #         OP_SERVICE_ACCOUNT_TOKEN: ${{ secrets.OP_SERVICE_ACCOUNT_TOKEN }}
+  #       run: |
+  #         helm upgrade --install \
+  #           --create-namespace \
+  #           --namespace "pr-${{ env.PR_NUMBER }}" \
+  #           --timeout 300s \
+  #           --wait \
+  #           --atomic \
+  #           --values ci/ci-values.yaml \
+  #           --set forge.image=${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.eu-west-1.amazonaws.com/flowforge/${{ env.tagged_image }}-${{ env.timestamp }} \
+  #           --set forge.entryPoint=${{ env.PR_NUMBER }}.flowfuse.dev \
+  #           --set forge.broker.hostname=${{ env.PR_NUMBER }}-mqtt.flowfuse.dev \
+  #           --set forge.projectNamespace=pr-${{ env.PR_NUMBER }}-projects \
+  #           --set forge.clusterRole.name=pr-${{ env.PR_NUMBER }}-clusterrole \
+  #           --set forge.license=${{ secrets.PRE_STAGING_LICENSE }} \
+  #           --set forge.aws.IAMRole=arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/flowforge_service_account_role \
+  #           --set forge.email.ses.sourceArn=arn:aws:ses:eu-west-1:${{ secrets.AWS_ACCOUNT_ID }}:identity/flowfuse.com \
+  #           --set forge.assistant.service.url=$(op read op://ci/staging_flowfuse/assistant_url) \
+  #           --set forge.assistant.service.token=$(op read op://ci/staging_flowfuse/assistant_token) \
+  #           flowfuse-pr-${{ env.PR_NUMBER }} ./helm-repo/helm/flowforge
 
-      - name: Initial setup
-        if: ${{ env.initialSetup == 'true' }}
-        run: |
-          ./.github/scripts/initial-setup.sh ${{ env.PR_NUMBER }} ${{ secrets.INIT_CONFIG_PASSWORD_HASH }} ${{ secrets.INIT_CONFIG_ACCESS_TOKEN_HASH }} ${{ secrets.INIT_CONFIG_ACCESS_TOKEN }} ${{ secrets.INIT_CONFIG_PASSWORD }}
+  #     - name: Initial setup
+  #       if: ${{ env.initialSetup == 'true' }}
+  #       run: |
+  #         ./.github/scripts/initial-setup.sh ${{ env.PR_NUMBER }} ${{ secrets.INIT_CONFIG_PASSWORD_HASH }} ${{ secrets.INIT_CONFIG_ACCESS_TOKEN_HASH }} ${{ secrets.INIT_CONFIG_ACCESS_TOKEN }} ${{ secrets.INIT_CONFIG_PASSWORD }}
           
-      - name: Summary
-        run: |
-          echo "### :rocket: Deployment succeeded" >> $GITHUB_STEP_SUMMARY
-          echo "" >> $GITHUB_STEP_SUMMARY
-          echo "**Deployed commit SHA:** ${{ github.event.pull_request.head.sha }}" >> $GITHUB_STEP_SUMMARY
-          echo "**Deployed to:** [https://${{ env.PR_NUMBER }}.flowfuse.dev](https://${{ env.PR_NUMBER }}.flowfuse.dev)" >> $GITHUB_STEP_SUMMARY
+  #     - name: Summary
+  #       run: |
+  #         echo "### :rocket: Deployment succeeded" >> $GITHUB_STEP_SUMMARY
+  #         echo "" >> $GITHUB_STEP_SUMMARY
+  #         echo "**Deployed commit SHA:** ${{ github.event.pull_request.head.sha }}" >> $GITHUB_STEP_SUMMARY
+  #         echo "**Deployed to:** [https://${{ env.PR_NUMBER }}.flowfuse.dev](https://${{ env.PR_NUMBER }}.flowfuse.dev)" >> $GITHUB_STEP_SUMMARY
 
-  notify-slack:
-    name: Notify about pre-staging deployment
-    needs: [deploy]
-    if: |
-      ( success() || failure() ) &&
-      github.actor != 'dependabot[bot]'
-    runs-on: ubuntu-latest
-    env:
-      PR_NUMBER: ${{ github.event.number }}
+  # notify-slack:
+  #   name: Notify about pre-staging deployment
+  #   needs: [deploy]
+  #   if: |
+  #     ( success() || failure() ) &&
+  #     github.actor != 'dependabot[bot]'
+  #   runs-on: ubuntu-latest
+  #   env:
+  #     PR_NUMBER: ${{ github.event.number }}
 
-    steps:
-    - name: Map users  
-      id: map-actor-to-slack
-      uses: icalia-actions/map-github-actor@v0.0.2
-      with:
-        actor-map: ${{ vars.SLACK_GITHUB_USERS_MAP }}
-        default-mapping: C067BD0377F
+  #   steps:
+  #   - name: Map users  
+  #     id: map-actor-to-slack
+  #     uses: icalia-actions/map-github-actor@v0.0.2
+  #     with:
+  #       actor-map: ${{ vars.SLACK_GITHUB_USERS_MAP }}
+  #       default-mapping: C067BD0377F
 
-    - name: Post to a Slack channel
-      id: slack
-      uses: slackapi/slack-github-action@v1.27.0
-      with:
-        channel-id: 'C067BD0377F'
-        payload: |
-          {
-            "blocks": [
-              {
-                "type": "header",
-                "text": {
-                  "type": "plain_text",
-                  "text": "Pull Request ${{ env.PR_NUMBER }} pre-staging deployment",
-                  "emoji": true
-                }
-              },
-              {
-                "type": "section",
-                "fields": [
-                  {
-                    "type": "mrkdwn",
-                    "text": "*Status:*\n${{ needs.deploy.result == 'success' && ':white_check_mark: Success' || ':x: Failure '}}"
-                  },
-                  {
-                    "type": "mrkdwn",
-                    "text": ${{ toJson(env.PR_TEXT) }}
-                  },
-                  {
-                    "type": "mrkdwn",
-                    "text": "*Workflow run:*\n<${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}|View>"
-                  }
-                ]
-              },
-              {
-                "type": "section",
-                "fields": [
-                  {
-                    "type": "mrkdwn",
-                    "text": "*Author:*\n<@${{ steps.map-actor-to-slack.outputs.actor-mapping }}>"
-                  },
-                  {
-                    "type": "mrkdwn",
-                    "text": "*Commit SHA:*\n<${{ github.server_url }}/${{ github.repository }}/commit/${{ github.event.pull_request.head.sha }}|${{ github.event.pull_request.head.sha }}>"
-                  },
-                  {
-                    "type": "mrkdwn",
-                    "text": "*Deployed to:*\n<https://${{ env.PR_NUMBER }}.flowfuse.dev|https://${{ env.PR_NUMBER }}.flowfuse.dev>"
-                  },
-                  {
-                    "type": "mrkdwn",
-                    "text": "*Logs:*\n<https://${{ env.GRAFANA_URL }}/explore?orgId=1&left=%7B%22datasource%22:%22P8E80F9AEF21F6940%22,%22queries%22:%5B%7B%22refId%22:%22A%22,%22editorMode%22:%22code%22,%22expr%22:%22%7Bnamespace%3D%5C%22pr-${{ env.PR_NUMBER }}%5C%22%7D%20%7C%3D%20%60%60%20%7C%20json%22,%22queryType%22:%22range%22%7D%5D,%22range%22:%7B%22from%22:%22now-30m%22,%22to%22:%22now%22%7D%7D|View>"
-                  }
-                ]
-              }
-            ]
-          }
-      env:
-        PR_TEXT: |
-          *Pull Request:*
-          <https://github.com/FlowFuse/flowfuse/pull/${{ env.PR_NUMBER }}|${{ github.event.pull_request.title }}>
-        SLACK_BOT_TOKEN: ${{ secrets.SLACK_GHBOT_TOKEN }}
-        GRAFANA_URL: ${{ secrets.STAGING_GRAFANA_URL }}
+  #   - name: Post to a Slack channel
+  #     id: slack
+  #     uses: slackapi/slack-github-action@v1.27.0
+  #     with:
+  #       channel-id: 'C067BD0377F'
+  #       payload: |
+  #         {
+  #           "blocks": [
+  #             {
+  #               "type": "header",
+  #               "text": {
+  #                 "type": "plain_text",
+  #                 "text": "Pull Request ${{ env.PR_NUMBER }} pre-staging deployment",
+  #                 "emoji": true
+  #               }
+  #             },
+  #             {
+  #               "type": "section",
+  #               "fields": [
+  #                 {
+  #                   "type": "mrkdwn",
+  #                   "text": "*Status:*\n${{ needs.deploy.result == 'success' && ':white_check_mark: Success' || ':x: Failure '}}"
+  #                 },
+  #                 {
+  #                   "type": "mrkdwn",
+  #                   "text": ${{ toJson(env.PR_TEXT) }}
+  #                 },
+  #                 {
+  #                   "type": "mrkdwn",
+  #                   "text": "*Workflow run:*\n<${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}|View>"
+  #                 }
+  #               ]
+  #             },
+  #             {
+  #               "type": "section",
+  #               "fields": [
+  #                 {
+  #                   "type": "mrkdwn",
+  #                   "text": "*Author:*\n<@${{ steps.map-actor-to-slack.outputs.actor-mapping }}>"
+  #                 },
+  #                 {
+  #                   "type": "mrkdwn",
+  #                   "text": "*Commit SHA:*\n<${{ github.server_url }}/${{ github.repository }}/commit/${{ github.event.pull_request.head.sha }}|${{ github.event.pull_request.head.sha }}>"
+  #                 },
+  #                 {
+  #                   "type": "mrkdwn",
+  #                   "text": "*Deployed to:*\n<https://${{ env.PR_NUMBER }}.flowfuse.dev|https://${{ env.PR_NUMBER }}.flowfuse.dev>"
+  #                 },
+  #                 {
+  #                   "type": "mrkdwn",
+  #                   "text": "*Logs:*\n<https://${{ env.GRAFANA_URL }}/explore?orgId=1&left=%7B%22datasource%22:%22P8E80F9AEF21F6940%22,%22queries%22:%5B%7B%22refId%22:%22A%22,%22editorMode%22:%22code%22,%22expr%22:%22%7Bnamespace%3D%5C%22pr-${{ env.PR_NUMBER }}%5C%22%7D%20%7C%3D%20%60%60%20%7C%20json%22,%22queryType%22:%22range%22%7D%5D,%22range%22:%7B%22from%22:%22now-30m%22,%22to%22:%22now%22%7D%7D|View>"
+  #                 }
+  #               ]
+  #             }
+  #           ]
+  #         }
+  #     env:
+  #       PR_TEXT: |
+  #         *Pull Request:*
+  #         <https://github.com/FlowFuse/flowfuse/pull/${{ env.PR_NUMBER }}|${{ github.event.pull_request.title }}>
+  #       SLACK_BOT_TOKEN: ${{ secrets.SLACK_GHBOT_TOKEN }}
+  #       GRAFANA_URL: ${{ secrets.STAGING_GRAFANA_URL }}
 
 
-  destroy:
-    name: Remove application
-    needs: [ validate-user ]
-    runs-on: ubuntu-latest
-    if: |
-      needs.validate-user.outputs.is_org_member == 'true' &&
-      github.event_name == 'pull_request' && 
-      github.event.action == 'closed'
-    environment: staging
-    env:
-      IMAGE_NAME: 'forge-k8s'
-      PR_NUMBER: ${{ github.event.number }}
-    steps:
-      - name: Configure AWS credentials for EKS interaction
-        uses: aws-actions/configure-aws-credentials@v4
-        with:
-          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          aws-secret-access-key: ${{ secrets.AWS_ACCESS_KEY_SECRET }}
-          aws-region: eu-west-1
-          role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/K8sAdmin
-          role-duration-seconds: 1200
+  # destroy:
+  #   name: Remove application
+  #   needs: [ validate-user ]
+  #   runs-on: ubuntu-latest
+  #   if: |
+  #     needs.validate-user.outputs.is_org_member == 'true' &&
+  #     github.event_name == 'pull_request' && 
+  #     github.event.action == 'closed'
+  #   environment: staging
+  #   env:
+  #     IMAGE_NAME: 'forge-k8s'
+  #     PR_NUMBER: ${{ github.event.number }}
+  #   steps:
+  #     - name: Configure AWS credentials for EKS interaction
+  #       uses: aws-actions/configure-aws-credentials@v4
+  #       with:
+  #         aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+  #         aws-secret-access-key: ${{ secrets.AWS_ACCESS_KEY_SECRET }}
+  #         aws-region: eu-west-1
+  #         role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/K8sAdmin
+  #         role-duration-seconds: 1200
 
-      - name: Configure kubeconfig
-        run: |
-          aws eks update-kubeconfig --region eu-west-1 --name ${{ secrets.EKS_CLUSTER_NAME }}
+  #     - name: Configure kubeconfig
+  #       run: |
+  #         aws eks update-kubeconfig --region eu-west-1 --name ${{ secrets.EKS_CLUSTER_NAME }}
       
-      - name: Remove resources
-        run: |
-          if helm list -n "pr-${{ env.PR_NUMBER }}" --filter "^flowfuse-pr-${{ env.PR_NUMBER }}$" | grep "flowfuse-pr-${{ env.PR_NUMBER }}"; then
-            helm uninstall --namespace "pr-${{ env.PR_NUMBER }}" flowfuse-pr-${{ env.PR_NUMBER }}
-            sleep 15
-            kubectl delete namespace "pr-${{ env.PR_NUMBER }}"
-          else
-            echo "Release flowfuse-pr-${{ env.PR_NUMBER }} does not exist"
-          fi
+  #     - name: Remove resources
+  #       run: |
+  #         if helm list -n "pr-${{ env.PR_NUMBER }}" --filter "^flowfuse-pr-${{ env.PR_NUMBER }}$" | grep "flowfuse-pr-${{ env.PR_NUMBER }}"; then
+  #           helm uninstall --namespace "pr-${{ env.PR_NUMBER }}" flowfuse-pr-${{ env.PR_NUMBER }}
+  #           sleep 15
+  #           kubectl delete namespace "pr-${{ env.PR_NUMBER }}"
+  #         else
+  #           echo "Release flowfuse-pr-${{ env.PR_NUMBER }} does not exist"
+  #         fi

From fd3a97dad6f8fa20f01940c8d03a9f680727c8d5 Mon Sep 17 00:00:00 2001
From: ppawlowski <piotr@devopswizards.com>
Date: Wed, 9 Oct 2024 22:09:55 +0200
Subject: [PATCH 37/47] Revert "disable pre-staging deploy"

This reverts commit 5dbcbba7b67ee4f2e81ded10b8d36015cde15438.
---
 .github/workflows/branch-deploy.yaml | 346 +++++++++++++--------------
 1 file changed, 173 insertions(+), 173 deletions(-)

diff --git a/.github/workflows/branch-deploy.yaml b/.github/workflows/branch-deploy.yaml
index c178ca543a..e1fd802df9 100644
--- a/.github/workflows/branch-deploy.yaml
+++ b/.github/workflows/branch-deploy.yaml
@@ -148,190 +148,190 @@ jobs:
           docker tag ${{ env.tagged_image }} ${{ steps.aws-config.outputs.aws-account-id }}.dkr.ecr.eu-west-1.amazonaws.com/flowforge/${{ env.tagged_image }}-${{ env.timestamp }}
           docker push ${{ steps.aws-config.outputs.aws-account-id }}.dkr.ecr.eu-west-1.amazonaws.com/flowforge/${{ env.tagged_image }}-${{ env.timestamp }}
 
-  #     - name: Configure AWS credentials for EKS interaction
-  #       uses: aws-actions/configure-aws-credentials@v4
-  #       with:
-  #         aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-  #         aws-secret-access-key: ${{ secrets.AWS_ACCESS_KEY_SECRET }}
-  #         aws-region: eu-west-1
-  #         role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/K8sAdmin
-  #         role-duration-seconds: 1200
+      - name: Configure AWS credentials for EKS interaction
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_ACCESS_KEY_SECRET }}
+          aws-region: eu-west-1
+          role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/K8sAdmin
+          role-duration-seconds: 1200
 
-  #     - name: Configure kubeconfig
-  #       run: |
-  #         aws eks update-kubeconfig --region eu-west-1 --name ${{ secrets.EKS_CLUSTER_NAME }}
+      - name: Configure kubeconfig
+        run: |
+          aws eks update-kubeconfig --region eu-west-1 --name ${{ secrets.EKS_CLUSTER_NAME }}
 
-  #     - name: Install 1Password CLI
-  #       uses: 1password/install-cli-action@v1
-  #       with:
-  #         version: 2.25.0
+      - name: Install 1Password CLI
+        uses: 1password/install-cli-action@v1
+        with:
+          version: 2.25.0
 
-  #     - name: Check out FlowFuse/helm repository (to access latest helm chart)
-  #       uses: actions/checkout@v4
-  #       with:
-  #         repository: 'FlowFuse/helm'
-  #         ref: 'main'
-  #         path: 'helm-repo'
-  #         token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Check out FlowFuse/helm repository (to access latest helm chart)
+        uses: actions/checkout@v4
+        with:
+          repository: 'FlowFuse/helm'
+          ref: 'main'
+          path: 'helm-repo'
+          token: ${{ secrets.GITHUB_TOKEN }}
 
-  #     - name: Check if deployment exists
-  #       id: check-initial-setup
-  #       run: |
-  #         if helm status --namespace "pr-${{ env.PR_NUMBER }}" flowfuse-pr-${{ env.PR_NUMBER }} &> /dev/null; then
-  #           echo "initialSetup=false" >> $GITHUB_ENV
-  #         else
-  #           echo "initialSetup=true" >> $GITHUB_ENV
-  #         fi
+      - name: Check if deployment exists
+        id: check-initial-setup
+        run: |
+          if helm status --namespace "pr-${{ env.PR_NUMBER }}" flowfuse-pr-${{ env.PR_NUMBER }} &> /dev/null; then
+            echo "initialSetup=false" >> $GITHUB_ENV
+          else
+            echo "initialSetup=true" >> $GITHUB_ENV
+          fi
 
-  #     - name: Deploy
-  #       env:
-  #         OP_SERVICE_ACCOUNT_TOKEN: ${{ secrets.OP_SERVICE_ACCOUNT_TOKEN }}
-  #       run: |
-  #         helm upgrade --install \
-  #           --create-namespace \
-  #           --namespace "pr-${{ env.PR_NUMBER }}" \
-  #           --timeout 300s \
-  #           --wait \
-  #           --atomic \
-  #           --values ci/ci-values.yaml \
-  #           --set forge.image=${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.eu-west-1.amazonaws.com/flowforge/${{ env.tagged_image }}-${{ env.timestamp }} \
-  #           --set forge.entryPoint=${{ env.PR_NUMBER }}.flowfuse.dev \
-  #           --set forge.broker.hostname=${{ env.PR_NUMBER }}-mqtt.flowfuse.dev \
-  #           --set forge.projectNamespace=pr-${{ env.PR_NUMBER }}-projects \
-  #           --set forge.clusterRole.name=pr-${{ env.PR_NUMBER }}-clusterrole \
-  #           --set forge.license=${{ secrets.PRE_STAGING_LICENSE }} \
-  #           --set forge.aws.IAMRole=arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/flowforge_service_account_role \
-  #           --set forge.email.ses.sourceArn=arn:aws:ses:eu-west-1:${{ secrets.AWS_ACCOUNT_ID }}:identity/flowfuse.com \
-  #           --set forge.assistant.service.url=$(op read op://ci/staging_flowfuse/assistant_url) \
-  #           --set forge.assistant.service.token=$(op read op://ci/staging_flowfuse/assistant_token) \
-  #           flowfuse-pr-${{ env.PR_NUMBER }} ./helm-repo/helm/flowforge
+      - name: Deploy
+        env:
+          OP_SERVICE_ACCOUNT_TOKEN: ${{ secrets.OP_SERVICE_ACCOUNT_TOKEN }}
+        run: |
+          helm upgrade --install \
+            --create-namespace \
+            --namespace "pr-${{ env.PR_NUMBER }}" \
+            --timeout 300s \
+            --wait \
+            --atomic \
+            --values ci/ci-values.yaml \
+            --set forge.image=${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.eu-west-1.amazonaws.com/flowforge/${{ env.tagged_image }}-${{ env.timestamp }} \
+            --set forge.entryPoint=${{ env.PR_NUMBER }}.flowfuse.dev \
+            --set forge.broker.hostname=${{ env.PR_NUMBER }}-mqtt.flowfuse.dev \
+            --set forge.projectNamespace=pr-${{ env.PR_NUMBER }}-projects \
+            --set forge.clusterRole.name=pr-${{ env.PR_NUMBER }}-clusterrole \
+            --set forge.license=${{ secrets.PRE_STAGING_LICENSE }} \
+            --set forge.aws.IAMRole=arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/flowforge_service_account_role \
+            --set forge.email.ses.sourceArn=arn:aws:ses:eu-west-1:${{ secrets.AWS_ACCOUNT_ID }}:identity/flowfuse.com \
+            --set forge.assistant.service.url=$(op read op://ci/staging_flowfuse/assistant_url) \
+            --set forge.assistant.service.token=$(op read op://ci/staging_flowfuse/assistant_token) \
+            flowfuse-pr-${{ env.PR_NUMBER }} ./helm-repo/helm/flowforge
 
-  #     - name: Initial setup
-  #       if: ${{ env.initialSetup == 'true' }}
-  #       run: |
-  #         ./.github/scripts/initial-setup.sh ${{ env.PR_NUMBER }} ${{ secrets.INIT_CONFIG_PASSWORD_HASH }} ${{ secrets.INIT_CONFIG_ACCESS_TOKEN_HASH }} ${{ secrets.INIT_CONFIG_ACCESS_TOKEN }} ${{ secrets.INIT_CONFIG_PASSWORD }}
+      - name: Initial setup
+        if: ${{ env.initialSetup == 'true' }}
+        run: |
+          ./.github/scripts/initial-setup.sh ${{ env.PR_NUMBER }} ${{ secrets.INIT_CONFIG_PASSWORD_HASH }} ${{ secrets.INIT_CONFIG_ACCESS_TOKEN_HASH }} ${{ secrets.INIT_CONFIG_ACCESS_TOKEN }} ${{ secrets.INIT_CONFIG_PASSWORD }}
           
-  #     - name: Summary
-  #       run: |
-  #         echo "### :rocket: Deployment succeeded" >> $GITHUB_STEP_SUMMARY
-  #         echo "" >> $GITHUB_STEP_SUMMARY
-  #         echo "**Deployed commit SHA:** ${{ github.event.pull_request.head.sha }}" >> $GITHUB_STEP_SUMMARY
-  #         echo "**Deployed to:** [https://${{ env.PR_NUMBER }}.flowfuse.dev](https://${{ env.PR_NUMBER }}.flowfuse.dev)" >> $GITHUB_STEP_SUMMARY
+      - name: Summary
+        run: |
+          echo "### :rocket: Deployment succeeded" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "**Deployed commit SHA:** ${{ github.event.pull_request.head.sha }}" >> $GITHUB_STEP_SUMMARY
+          echo "**Deployed to:** [https://${{ env.PR_NUMBER }}.flowfuse.dev](https://${{ env.PR_NUMBER }}.flowfuse.dev)" >> $GITHUB_STEP_SUMMARY
 
-  # notify-slack:
-  #   name: Notify about pre-staging deployment
-  #   needs: [deploy]
-  #   if: |
-  #     ( success() || failure() ) &&
-  #     github.actor != 'dependabot[bot]'
-  #   runs-on: ubuntu-latest
-  #   env:
-  #     PR_NUMBER: ${{ github.event.number }}
+  notify-slack:
+    name: Notify about pre-staging deployment
+    needs: [deploy]
+    if: |
+      ( success() || failure() ) &&
+      github.actor != 'dependabot[bot]'
+    runs-on: ubuntu-latest
+    env:
+      PR_NUMBER: ${{ github.event.number }}
 
-  #   steps:
-  #   - name: Map users  
-  #     id: map-actor-to-slack
-  #     uses: icalia-actions/map-github-actor@v0.0.2
-  #     with:
-  #       actor-map: ${{ vars.SLACK_GITHUB_USERS_MAP }}
-  #       default-mapping: C067BD0377F
+    steps:
+    - name: Map users  
+      id: map-actor-to-slack
+      uses: icalia-actions/map-github-actor@v0.0.2
+      with:
+        actor-map: ${{ vars.SLACK_GITHUB_USERS_MAP }}
+        default-mapping: C067BD0377F
 
-  #   - name: Post to a Slack channel
-  #     id: slack
-  #     uses: slackapi/slack-github-action@v1.27.0
-  #     with:
-  #       channel-id: 'C067BD0377F'
-  #       payload: |
-  #         {
-  #           "blocks": [
-  #             {
-  #               "type": "header",
-  #               "text": {
-  #                 "type": "plain_text",
-  #                 "text": "Pull Request ${{ env.PR_NUMBER }} pre-staging deployment",
-  #                 "emoji": true
-  #               }
-  #             },
-  #             {
-  #               "type": "section",
-  #               "fields": [
-  #                 {
-  #                   "type": "mrkdwn",
-  #                   "text": "*Status:*\n${{ needs.deploy.result == 'success' && ':white_check_mark: Success' || ':x: Failure '}}"
-  #                 },
-  #                 {
-  #                   "type": "mrkdwn",
-  #                   "text": ${{ toJson(env.PR_TEXT) }}
-  #                 },
-  #                 {
-  #                   "type": "mrkdwn",
-  #                   "text": "*Workflow run:*\n<${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}|View>"
-  #                 }
-  #               ]
-  #             },
-  #             {
-  #               "type": "section",
-  #               "fields": [
-  #                 {
-  #                   "type": "mrkdwn",
-  #                   "text": "*Author:*\n<@${{ steps.map-actor-to-slack.outputs.actor-mapping }}>"
-  #                 },
-  #                 {
-  #                   "type": "mrkdwn",
-  #                   "text": "*Commit SHA:*\n<${{ github.server_url }}/${{ github.repository }}/commit/${{ github.event.pull_request.head.sha }}|${{ github.event.pull_request.head.sha }}>"
-  #                 },
-  #                 {
-  #                   "type": "mrkdwn",
-  #                   "text": "*Deployed to:*\n<https://${{ env.PR_NUMBER }}.flowfuse.dev|https://${{ env.PR_NUMBER }}.flowfuse.dev>"
-  #                 },
-  #                 {
-  #                   "type": "mrkdwn",
-  #                   "text": "*Logs:*\n<https://${{ env.GRAFANA_URL }}/explore?orgId=1&left=%7B%22datasource%22:%22P8E80F9AEF21F6940%22,%22queries%22:%5B%7B%22refId%22:%22A%22,%22editorMode%22:%22code%22,%22expr%22:%22%7Bnamespace%3D%5C%22pr-${{ env.PR_NUMBER }}%5C%22%7D%20%7C%3D%20%60%60%20%7C%20json%22,%22queryType%22:%22range%22%7D%5D,%22range%22:%7B%22from%22:%22now-30m%22,%22to%22:%22now%22%7D%7D|View>"
-  #                 }
-  #               ]
-  #             }
-  #           ]
-  #         }
-  #     env:
-  #       PR_TEXT: |
-  #         *Pull Request:*
-  #         <https://github.com/FlowFuse/flowfuse/pull/${{ env.PR_NUMBER }}|${{ github.event.pull_request.title }}>
-  #       SLACK_BOT_TOKEN: ${{ secrets.SLACK_GHBOT_TOKEN }}
-  #       GRAFANA_URL: ${{ secrets.STAGING_GRAFANA_URL }}
+    - name: Post to a Slack channel
+      id: slack
+      uses: slackapi/slack-github-action@v1.27.0
+      with:
+        channel-id: 'C067BD0377F'
+        payload: |
+          {
+            "blocks": [
+              {
+                "type": "header",
+                "text": {
+                  "type": "plain_text",
+                  "text": "Pull Request ${{ env.PR_NUMBER }} pre-staging deployment",
+                  "emoji": true
+                }
+              },
+              {
+                "type": "section",
+                "fields": [
+                  {
+                    "type": "mrkdwn",
+                    "text": "*Status:*\n${{ needs.deploy.result == 'success' && ':white_check_mark: Success' || ':x: Failure '}}"
+                  },
+                  {
+                    "type": "mrkdwn",
+                    "text": ${{ toJson(env.PR_TEXT) }}
+                  },
+                  {
+                    "type": "mrkdwn",
+                    "text": "*Workflow run:*\n<${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}|View>"
+                  }
+                ]
+              },
+              {
+                "type": "section",
+                "fields": [
+                  {
+                    "type": "mrkdwn",
+                    "text": "*Author:*\n<@${{ steps.map-actor-to-slack.outputs.actor-mapping }}>"
+                  },
+                  {
+                    "type": "mrkdwn",
+                    "text": "*Commit SHA:*\n<${{ github.server_url }}/${{ github.repository }}/commit/${{ github.event.pull_request.head.sha }}|${{ github.event.pull_request.head.sha }}>"
+                  },
+                  {
+                    "type": "mrkdwn",
+                    "text": "*Deployed to:*\n<https://${{ env.PR_NUMBER }}.flowfuse.dev|https://${{ env.PR_NUMBER }}.flowfuse.dev>"
+                  },
+                  {
+                    "type": "mrkdwn",
+                    "text": "*Logs:*\n<https://${{ env.GRAFANA_URL }}/explore?orgId=1&left=%7B%22datasource%22:%22P8E80F9AEF21F6940%22,%22queries%22:%5B%7B%22refId%22:%22A%22,%22editorMode%22:%22code%22,%22expr%22:%22%7Bnamespace%3D%5C%22pr-${{ env.PR_NUMBER }}%5C%22%7D%20%7C%3D%20%60%60%20%7C%20json%22,%22queryType%22:%22range%22%7D%5D,%22range%22:%7B%22from%22:%22now-30m%22,%22to%22:%22now%22%7D%7D|View>"
+                  }
+                ]
+              }
+            ]
+          }
+      env:
+        PR_TEXT: |
+          *Pull Request:*
+          <https://github.com/FlowFuse/flowfuse/pull/${{ env.PR_NUMBER }}|${{ github.event.pull_request.title }}>
+        SLACK_BOT_TOKEN: ${{ secrets.SLACK_GHBOT_TOKEN }}
+        GRAFANA_URL: ${{ secrets.STAGING_GRAFANA_URL }}
 
 
-  # destroy:
-  #   name: Remove application
-  #   needs: [ validate-user ]
-  #   runs-on: ubuntu-latest
-  #   if: |
-  #     needs.validate-user.outputs.is_org_member == 'true' &&
-  #     github.event_name == 'pull_request' && 
-  #     github.event.action == 'closed'
-  #   environment: staging
-  #   env:
-  #     IMAGE_NAME: 'forge-k8s'
-  #     PR_NUMBER: ${{ github.event.number }}
-  #   steps:
-  #     - name: Configure AWS credentials for EKS interaction
-  #       uses: aws-actions/configure-aws-credentials@v4
-  #       with:
-  #         aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-  #         aws-secret-access-key: ${{ secrets.AWS_ACCESS_KEY_SECRET }}
-  #         aws-region: eu-west-1
-  #         role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/K8sAdmin
-  #         role-duration-seconds: 1200
+  destroy:
+    name: Remove application
+    needs: [ validate-user ]
+    runs-on: ubuntu-latest
+    if: |
+      needs.validate-user.outputs.is_org_member == 'true' &&
+      github.event_name == 'pull_request' && 
+      github.event.action == 'closed'
+    environment: staging
+    env:
+      IMAGE_NAME: 'forge-k8s'
+      PR_NUMBER: ${{ github.event.number }}
+    steps:
+      - name: Configure AWS credentials for EKS interaction
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_ACCESS_KEY_SECRET }}
+          aws-region: eu-west-1
+          role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/K8sAdmin
+          role-duration-seconds: 1200
 
-  #     - name: Configure kubeconfig
-  #       run: |
-  #         aws eks update-kubeconfig --region eu-west-1 --name ${{ secrets.EKS_CLUSTER_NAME }}
+      - name: Configure kubeconfig
+        run: |
+          aws eks update-kubeconfig --region eu-west-1 --name ${{ secrets.EKS_CLUSTER_NAME }}
       
-  #     - name: Remove resources
-  #       run: |
-  #         if helm list -n "pr-${{ env.PR_NUMBER }}" --filter "^flowfuse-pr-${{ env.PR_NUMBER }}$" | grep "flowfuse-pr-${{ env.PR_NUMBER }}"; then
-  #           helm uninstall --namespace "pr-${{ env.PR_NUMBER }}" flowfuse-pr-${{ env.PR_NUMBER }}
-  #           sleep 15
-  #           kubectl delete namespace "pr-${{ env.PR_NUMBER }}"
-  #         else
-  #           echo "Release flowfuse-pr-${{ env.PR_NUMBER }} does not exist"
-  #         fi
+      - name: Remove resources
+        run: |
+          if helm list -n "pr-${{ env.PR_NUMBER }}" --filter "^flowfuse-pr-${{ env.PR_NUMBER }}$" | grep "flowfuse-pr-${{ env.PR_NUMBER }}"; then
+            helm uninstall --namespace "pr-${{ env.PR_NUMBER }}" flowfuse-pr-${{ env.PR_NUMBER }}
+            sleep 15
+            kubectl delete namespace "pr-${{ env.PR_NUMBER }}"
+          else
+            echo "Release flowfuse-pr-${{ env.PR_NUMBER }} does not exist"
+          fi

From 7bcd320a2b280011ebd2130af205a691cf4bbf59 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 10 Oct 2024 18:20:26 +0300
Subject: [PATCH 38/47] Fix admin action tab alignment by using same layout as
 the non-admin part of the application

---
 frontend/src/pages/admin/Settings/index.vue | 31 +++++++++++++--------
 frontend/src/pages/admin/Users/index.vue    | 27 +++++++++++-------
 2 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/frontend/src/pages/admin/Settings/index.vue b/frontend/src/pages/admin/Settings/index.vue
index fbb879beba..dd35ba9896 100644
--- a/frontend/src/pages/admin/Settings/index.vue
+++ b/frontend/src/pages/admin/Settings/index.vue
@@ -1,26 +1,27 @@
 <template>
-    <SectionTopMenu hero="Settings" :options="sideNavigation" />
-    <div class="flex-grow">
-        <router-view />
+    <div class="clear-page-gutters">
+        <div class="ff-instance-header">
+            <ff-page-header title="Settings" :tabs="sideNavigation" />
+        </div>
+        <div class="px-3 py-3 md:px-6 md:py-6">
+            <div class="flex-grow">
+                <router-view />
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 
-import SectionTopMenu from '../../../components/SectionTopMenu.vue'
-
 export default {
     name: 'AdminSettings',
-    components: {
-        SectionTopMenu
-    },
     data () {
         return {
             sideNavigation: [
-                { name: 'General', path: './general' },
-                { name: 'License', path: './license' },
-                { name: 'Email', path: './email' }
+                { label: 'General', to: './general', tag: 'general' },
+                { label: 'License', to: './license', tag: 'license' },
+                { label: 'Email', to: './email', tag: 'email' }
             ]
         }
     },
@@ -29,8 +30,14 @@ export default {
     },
     mounted () {
         if (this.features.sso) {
-            this.sideNavigation.push({ name: 'SSO', path: './sso' })
+            this.sideNavigation.push({ label: 'SSO', to: './sso' })
         }
     }
 }
 </script>
+
+<style lang="scss" scoped>
+.clear-page-gutters {
+    margin: -1.75rem
+}
+</style>
diff --git a/frontend/src/pages/admin/Users/index.vue b/frontend/src/pages/admin/Users/index.vue
index 0004df6a41..6761a62252 100644
--- a/frontend/src/pages/admin/Users/index.vue
+++ b/frontend/src/pages/admin/Users/index.vue
@@ -1,24 +1,25 @@
 <template>
-    <SectionTopMenu hero="Users" :options="sideNavigation" />
-    <div class="flex-grow">
-        <router-view />
+    <div class="clear-page-gutters">
+        <div class="ff-instance-header">
+            <ff-page-header title="Users" :tabs="sideNavigation" />
+        </div>
+        <div class="px-3 py-3 md:px-6 md:py-6">
+            <div class="flex-grow">
+                <router-view />
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
 
-import SectionTopMenu from '../../../components/SectionTopMenu.vue'
-
 const sideNavigation = [
-    { name: 'Users', path: './general' },
-    { name: 'Invitations', path: './invitations' }
+    { label: 'Users', to: './general' },
+    { label: 'Invitations', to: './invitations' }
 ]
 
 export default {
     name: 'AdminUsers',
-    components: {
-        SectionTopMenu
-    },
     setup () {
         return {
             sideNavigation
@@ -26,3 +27,9 @@ export default {
     }
 }
 </script>
+
+<style lang="scss" scoped>
+.clear-page-gutters {
+    margin: -1.75rem
+}
+</style>

From 22c53e5e03cc4bea2d01f467355c430e39a393f2 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Thu, 10 Oct 2024 18:44:19 +0300
Subject: [PATCH 39/47] fix failing e2e test

---
 test/e2e/frontend/cypress/tests/admin.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/frontend/cypress/tests/admin.spec.js b/test/e2e/frontend/cypress/tests/admin.spec.js
index 2c75a131a7..3bb11f9097 100644
--- a/test/e2e/frontend/cypress/tests/admin.spec.js
+++ b/test/e2e/frontend/cypress/tests/admin.spec.js
@@ -39,7 +39,7 @@ describe('FlowFuse platform admin users', () => {
 
         cy.get('#platform-sidenav [data-nav="admin-settings"]').click()
 
-        cy.get('[data-nav="section-license"]').click()
+        cy.get('[data-nav="license"]').click()
 
         cy.get('[data-form="update-licence"]').click()
 
@@ -52,7 +52,7 @@ describe('FlowFuse platform admin users', () => {
         cy.get('[data-form="submit"]').click()
 
         // Back to license screen
-        cy.get('[data-el="license-details"]').should('exist')
+        cy.get('[data-nav="license"]').should('exist')
     })
 
     it("can view applications and instances from teams they're not a member of", () => {

From cdbf145bbef322f8300ff51d564cff64ee537683 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Mon, 14 Oct 2024 15:59:51 +0300
Subject: [PATCH 40/47] fix overflow on actions section

---
 frontend/src/components/SectionTopMenu.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/SectionTopMenu.vue b/frontend/src/components/SectionTopMenu.vue
index 55075486a6..df5a9e3bdc 100644
--- a/frontend/src/components/SectionTopMenu.vue
+++ b/frontend/src/components/SectionTopMenu.vue
@@ -89,7 +89,6 @@ export default {
 .wrapper {
     flex: 1;
     align-items: baseline;
-    overflow: hidden;
 
     .info {
         text-overflow: ellipsis;

From 232eb7c08480471cc0892fd210858755d8f7b3a7 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 14 Oct 2024 17:58:04 +0200
Subject: [PATCH 41/47] Bump flowfuse/github-actions-workflows from 0.34.0 to
 0.36.0 (#4644)

Bumps [flowfuse/github-actions-workflows](https://github.com/flowfuse/github-actions-workflows) from 0.34.0 to 0.36.0.
- [Commits](https://github.com/flowfuse/github-actions-workflows/compare/v0.34.0...v0.36.0)

---
updated-dependencies:
- dependency-name: flowfuse/github-actions-workflows
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 .github/workflows/publish.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 1016001792..4356e31b08 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -26,7 +26,7 @@ jobs:
     if: |
       ( github.event.workflow_run.conclusion == 'success' && github.ref == 'refs/heads/main' ) ||
       ( github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/main' )
-    uses: 'flowfuse/github-actions-workflows/.github/workflows/publish_node_package.yml@v0.34.0'
+    uses: 'flowfuse/github-actions-workflows/.github/workflows/publish_node_package.yml@v0.36.0'
     with:
       package_name: flowfuse
       build_package: true

From 1faf0a01081eabfc8e4e095b5bc854fd50ae1f3a Mon Sep 17 00:00:00 2001
From: Zeger-Jan van de Weg <ZJvandeWeg@users.noreply.github.com>
Date: Tue, 15 Oct 2024 12:03:30 +0200
Subject: [PATCH 42/47] docs: Migrating static assets is manual but possible

---
 docs/migration/introduction.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/migration/introduction.md b/docs/migration/introduction.md
index 38b1211515..1c5817f9e3 100644
--- a/docs/migration/introduction.md
+++ b/docs/migration/introduction.md
@@ -45,5 +45,5 @@ will now be started with the modules installed.
 ### Static Files
 
 Check your `settings.js` file to see if `httpStatic` has been set, if so then
-check for any files in this path. FlowFuse does not currently support serving
-static files so you will need to find alternative hosting for these such as AWS S3.
+check for any files in this path. The files in this path need to be manually
+migrated to [FlowFuse's Static Assets](/docs/user/static-asset-service/) service.

From 6161d0d2abce8ba3bc49e558e194b32d3490d75a Mon Sep 17 00:00:00 2001
From: Joe Pavitt <joepavitt@flowforge.com>
Date: Tue, 15 Oct 2024 16:30:24 +0100
Subject: [PATCH 43/47] PostHog: Add "team-created" event when teams are
 automatically created server-side

---
 forge/db/controllers/Team.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/forge/db/controllers/Team.js b/forge/db/controllers/Team.js
index ca09e6324c..91a2559dd0 100644
--- a/forge/db/controllers/Team.js
+++ b/forge/db/controllers/Team.js
@@ -12,6 +12,14 @@ module.exports = {
         // Reinflate the object now the user has been added
         const team = await app.db.models.Team.bySlug(newTeam.slug)
 
+        // Record in our Product tracking
+        app.product.capture(user.username, '$ff-team-created', {
+            'team-name': team.name,
+            'created-at': team.createdAt
+        }, {
+            team: team.id
+        })
+
         return team
     },
 

From 2b4a06e94654b154e028cee572ddc1b63b815c62 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Wed, 16 Oct 2024 16:35:51 +0100
Subject: [PATCH 44/47] Fix enabling sso group allocation

---
 frontend/src/pages/admin/Settings/SSO/createEditProvider.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/admin/Settings/SSO/createEditProvider.vue b/frontend/src/pages/admin/Settings/SSO/createEditProvider.vue
index 4f0845ea7d..dea5696f08 100644
--- a/frontend/src/pages/admin/Settings/SSO/createEditProvider.vue
+++ b/frontend/src/pages/admin/Settings/SSO/createEditProvider.vue
@@ -191,7 +191,7 @@ export default {
         },
         isGroupOptionsValid () {
             return !this.input.options.groupMapping || (
-                (this.input.options.type === 'saml' ? this.isGroupAssertionNameValid : this.isGroupsDNValid) &&
+                (this.input.type === 'saml' ? this.isGroupAssertionNameValid : this.isGroupsDNValid) &&
                   this.isGroupAdminNameValid
             )
         },

From 1e53fd0b63ca6554a61efe3e76d820ecbe2cecc1 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 17 Oct 2024 17:43:45 +0100
Subject: [PATCH 45/47] Add links to stripe dashbaord in admin info for team

---
 .../src/pages/team/Settings/TeamAdminTools.vue   | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/team/Settings/TeamAdminTools.vue b/frontend/src/pages/team/Settings/TeamAdminTools.vue
index 6db17470aa..50be50b4d5 100644
--- a/frontend/src/pages/team/Settings/TeamAdminTools.vue
+++ b/frontend/src/pages/team/Settings/TeamAdminTools.vue
@@ -7,11 +7,11 @@
             </tr>
             <tr>
                 <td class="font-medium pr-4">Customer ID:</td>
-                <td><div class="py-2">{{ team.billing.customer || 'none' }}</div></td>
+                <td><div class="py-2"><a v-if="stripeCustomerUrl" :href="stripeCustomerUrl" class="underline" target="_blank">{{ team.billing.customer }}</a><span v-else>none</span></div></td>
             </tr>
             <tr>
                 <td class="font-medium pr-4">Subscription ID:</td>
-                <td><div class="py-2">{{ team.billing.subscription || 'none' }}</div></td>
+                <td><div class="py-2"><a v-if="stripeSubscriptionUrl" :href="stripeSubscriptionUrl" class="underline" target="_blank">{{ team.billing.subscription }}</a><span v-else>none</span></div></td>
             </tr>
         </table>
         <div v-if="!isUnmanaged && trialMode" class="flex flex-col space-y-4 max-w-2xl lg:flex-row lg:items-center lg:space-y-0">
@@ -119,6 +119,18 @@ export default {
         },
         trialEndDate () {
             return this.formatDateTime(this.team.billing?.trialEndsAt)
+        },
+        stripeCustomerUrl () {
+            if (this.team.billing?.customer) {
+                return `https://dashboard.stripe.com/customers/${this.team.billing.customer}`
+            }
+            return null
+        },
+        stripeSubscriptionUrl () {
+            if (this.team.billing?.subscription) {
+                return `https://dashboard.stripe.com/subscriptions/${this.team.billing.subscription}`
+            }
+            return null
         }
     },
     methods: {

From df2fc263877d91d66c1827cbbf0711f815f7d698 Mon Sep 17 00:00:00 2001
From: Ben Hardill <ben@flowforge.com>
Date: Mon, 21 Oct 2024 13:27:32 +0100
Subject: [PATCH 46/47] Fix review comments

---
 forge/comms/v2AuthRoutes.js                            |  2 +-
 ...ient.js => 20241021-01-EE-add-teambroker-client.js} |  0
 forge/ee/routes/teamBroker/index.js                    | 10 ++++++----
 forge/lib/permissions.js                               |  8 +++++++-
 test/unit/forge/ee/routes/teamBroker/index_spec.js     |  8 ++++----
 5 files changed, 18 insertions(+), 10 deletions(-)
 rename forge/db/migrations/{20241010-01-EE-add-teambroker-client.js => 20241021-01-EE-add-teambroker-client.js} (100%)

diff --git a/forge/comms/v2AuthRoutes.js b/forge/comms/v2AuthRoutes.js
index a7ee0d4e39..398d3d814c 100644
--- a/forge/comms/v2AuthRoutes.js
+++ b/forge/comms/v2AuthRoutes.js
@@ -42,7 +42,7 @@ module.exports = async function (app) {
                     result: 'allow',
                     is_superuser: false,
                     client_attrs: {
-                        team: 'ff/v1/internal/c/'
+                        team: ''
                     }
                 })
             } else {
diff --git a/forge/db/migrations/20241010-01-EE-add-teambroker-client.js b/forge/db/migrations/20241021-01-EE-add-teambroker-client.js
similarity index 100%
rename from forge/db/migrations/20241010-01-EE-add-teambroker-client.js
rename to forge/db/migrations/20241021-01-EE-add-teambroker-client.js
diff --git a/forge/ee/routes/teamBroker/index.js b/forge/ee/routes/teamBroker/index.js
index 8af8fb8bd5..24d396e884 100644
--- a/forge/ee/routes/teamBroker/index.js
+++ b/forge/ee/routes/teamBroker/index.js
@@ -39,6 +39,7 @@ module.exports = async function (app) {
      * @memberof forge.routes.api.team.broker
      */
     app.get('/clients', {
+        preHandler: app.needsPermission('broker:clients:list'),
         schema: {
             summary: 'List MQTT clients for the team',
             tags: ['MQTT Broker'],
@@ -80,7 +81,7 @@ module.exports = async function (app) {
      * @memberof forge.routes.api.team.broker
      */
     app.post('/client', {
-        preHandler: app.needsPermission('project:create'),
+        preHandler: app.needsPermission('broker:clients:create'),
         schema: {
             summary: 'Create new MQTT client for the team',
             tags: ['MQTT Broker'],
@@ -139,6 +140,7 @@ module.exports = async function (app) {
      * @memberof forge.routes.api.team.broker
      */
     app.get('/client/:username', {
+        preHandler: app.needsPermission('broker:clients:list'),
         schema: {
             summary: 'Get details about a specific MQTT client',
             tags: ['MQTT Broker'],
@@ -181,8 +183,8 @@ module.exports = async function (app) {
      * @static
      * @memberof forge.routes.api.team.broker
      */
-    app.patch('/client/:username', {
-        preHandler: app.needsPermission('project:create'),
+    app.put('/client/:username', {
+        preHandler: app.needsPermission('broker:clients:edit'),
         schema: {
             summary: 'Modify a MQTT Client',
             tags: ['MQTT Broker'],
@@ -264,7 +266,7 @@ module.exports = async function (app) {
      * @memberof forge.routes.api.team.broker
      */
     app.delete('/client/:username', {
-        preHandler: app.needsPermission('project:create'),
+        preHandler: app.needsPermission('broker:clients:delete'),
         schema: {
             summary: 'Delete a MQTT client',
             tags: ['MQTT Broker'],
diff --git a/forge/lib/permissions.js b/forge/lib/permissions.js
index 0c9d2fe559..f92582e0e8 100644
--- a/forge/lib/permissions.js
+++ b/forge/lib/permissions.js
@@ -172,7 +172,13 @@ const Permissions = {
     'project:files:list': { description: 'List files under a project', role: Roles.Member },
     'project:files:create': { description: 'Upload files to a project', role: Roles.Member },
     'project:files:edit': { description: 'Modify files in a project', role: Roles.Member },
-    'project:files:delete': { description: 'Delete files in a project', role: Roles.Member }
+    'project:files:delete': { description: 'Delete files in a project', role: Roles.Member },
+
+    // Team Broker
+    'broker:clients:list': { description: 'List Team Broker clients', role: Roles.Member },
+    'broker:clients:create': { description: 'Create Team Broker clients', role: Roles.Admin },
+    'broker:clients:edit': { description: 'Edit Team Broker clients', role: Roles.Admin },
+    'broker:clients:delete': { description: 'Delete Team Broker clients', role: Roles.Admin }
 }
 
 module.exports = {
diff --git a/test/unit/forge/ee/routes/teamBroker/index_spec.js b/test/unit/forge/ee/routes/teamBroker/index_spec.js
index e452be5a84..b22fe44dca 100644
--- a/test/unit/forge/ee/routes/teamBroker/index_spec.js
+++ b/test/unit/forge/ee/routes/teamBroker/index_spec.js
@@ -4,7 +4,7 @@ const setup = require('../../setup')
 
 const MAX_BROKER_USERS = 5
 
-describe('Team Broker API', function () {
+describe.only('Team Broker API', function () {
     let app
     const TestObjects = { tokens: {} }
 
@@ -101,7 +101,7 @@ describe('Team Broker API', function () {
 
         it('Modify an existing MQTT broker user for a team', async function () {
             const response = await app.inject({
-                method: 'PATCH',
+                method: 'PUT',
                 url: `/api/v1/teams/${app.team.hashid}/broker/client/alice`,
                 body: {
                     acls: [
@@ -264,7 +264,7 @@ describe('Team Broker API', function () {
         })
         it('Test Authentication pass after password change', async function () {
             let response = await app.inject({
-                method: 'PATCH',
+                method: 'PUT',
                 url: `/api/v1/teams/${app.team.hashid}/broker/client/alice`,
                 body: {
                     password: 'ccPassword'
@@ -399,7 +399,7 @@ describe('Team Broker API', function () {
             result.should.have.property('result', 'allow')
             result.should.have.property('is_superuser', false)
             result.should.have.property('client_attrs')
-            result.client_attrs.should.have.property('team', 'ff/v1/internal/c/')
+            result.client_attrs.should.have.property('team', '')
         })
         it('Test Authentication forge_platform fail', async function () {
             const response = await app.inject({

From cddf500ea3a29ab3968974d8dac1df601e174e61 Mon Sep 17 00:00:00 2001
From: Ben Hardill <ben@flowforge.com>
Date: Mon, 21 Oct 2024 13:34:18 +0100
Subject: [PATCH 47/47] remove `only`

---
 test/unit/forge/ee/routes/teamBroker/index_spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/unit/forge/ee/routes/teamBroker/index_spec.js b/test/unit/forge/ee/routes/teamBroker/index_spec.js
index b22fe44dca..be91c0bfa3 100644
--- a/test/unit/forge/ee/routes/teamBroker/index_spec.js
+++ b/test/unit/forge/ee/routes/teamBroker/index_spec.js
@@ -4,7 +4,7 @@ const setup = require('../../setup')
 
 const MAX_BROKER_USERS = 5
 
-describe.only('Team Broker API', function () {
+describe('Team Broker API', function () {
     let app
     const TestObjects = { tokens: {} }