From 598b7a2ec63cba496a86bd9330db6c4f27e417c0 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Tue, 24 Sep 2024 17:24:35 +0300
Subject: [PATCH 1/7] replace instance logs haId selector with new ff-listbox

---
 frontend/src/pages/instance/Logs.vue | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/instance/Logs.vue b/frontend/src/pages/instance/Logs.vue
index 3c3862f46a..80254b2055 100644
--- a/frontend/src/pages/instance/Logs.vue
+++ b/frontend/src/pages/instance/Logs.vue
@@ -4,13 +4,13 @@
             <template v-if="instance.ha?.replicas != undefined" #tools>
                 <div style="display: flex;align-items: center;">
                     <div class="mr-2"><strong>Replica:</strong></div>
-                    <ff-dropdown ref="dropdown" v-model="selectedHAId" data-el="select-ha-replica">
-                        <ff-dropdown-option label="All" value="all" />
-                        <ff-dropdown-option
-                            v-for="id in haIds" :key="id"
-                            :label="id" :value="id"
-                        />
-                    </ff-dropdown>
+                    <ff-listbox
+                        ref="dropdown"
+                        v-model="selectedHAId"
+                        data-el="select-ha-replica"
+                        :options="haIdOptions"
+                        :return-model-value="true"
+                    />
                 </div>
             </template>
         </SectionTopMenu>
@@ -20,12 +20,14 @@
 
 <script>
 import SectionTopMenu from '../../components/SectionTopMenu.vue'
+import FfListbox from '../../ui-components/components/form/ListBox.vue'
 
 import LogsShared from './components/InstanceLogs.vue'
 
 export default {
     name: 'InstanceLogs',
     components: {
+        FfListbox,
         LogsShared,
         SectionTopMenu
     },
@@ -42,6 +44,11 @@ export default {
             selectedHAId: 'all'
         }
     },
+    computed: {
+        haIdOptions () {
+            return [{ label: 'All', value: 'all' }, ...this.haIds.map(id => ({ label: id, value: id }))]
+        }
+    },
     methods: {
         newHAId (id) {
             if (!this.haIds.includes(id)) {

From 348abbeeb29dd275b1742ef6828ea57141d7bf7f Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 25 Sep 2024 12:26:00 +0300
Subject: [PATCH 2/7] fix team members not being populated on page load

---
 frontend/src/pages/instance/AuditLog.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/instance/AuditLog.vue b/frontend/src/pages/instance/AuditLog.vue
index c4c57f65ee..70a16cd718 100644
--- a/frontend/src/pages/instance/AuditLog.vue
+++ b/frontend/src/pages/instance/AuditLog.vue
@@ -39,8 +39,9 @@ export default {
         instance () {
             this.$refs.AuditLog?.loadEntries()
         },
-        'team.id' () {
-            this.loadUsers()
+        'team.id': {
+            handler: function (teamId) { if (teamId) this.loadUsers() },
+            immediate: true
         }
     },
     methods: {

From 6b26ce34737cea6256dc38239c0d9959f29265c5 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 25 Sep 2024 12:42:39 +0300
Subject: [PATCH 3/7] replace Audit Log Browser dropdowns with ff-listbox

---
 .../components/audit-log/AuditLogBrowser.vue  | 50 ++++++++++++-------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/audit-log/AuditLogBrowser.vue b/frontend/src/components/audit-log/AuditLogBrowser.vue
index 0d8a73cbed..cb2745b282 100644
--- a/frontend/src/components/audit-log/AuditLogBrowser.vue
+++ b/frontend/src/components/audit-log/AuditLogBrowser.vue
@@ -9,23 +9,21 @@
             <slot name="extraFilters" />
             <FormHeading class="mt-4">Event Type:</FormHeading>
             <div data-el="filter-event-types">
-                <ff-dropdown v-model="auditFilters.type" class="w-full">
-                    <ff-dropdown-option label="Show All" :value="undefined" />
-                    <ff-dropdown-option
-                        v-for="eType in auditFilters.types" :key="eType[1]"
-                        :label="`${eType[0]}`" :value="eType[1]"
-                    />
-                </ff-dropdown>
+                <ff-listbox
+                    v-model="auditFilters.type"
+                    :options="typeOptions"
+                    placeholder="Show All"
+                    class="w-full"
+                />
             </div>
             <FormHeading class="mt-4">User:</FormHeading>
             <div data-el="filter-users">
-                <ff-dropdown v-model="auditFilters.user" class="w-full">
-                    <ff-dropdown-option label="Show All" :value="undefined" />
-                    <ff-dropdown-option
-                        v-for="user in auditFilters.users" :key="user.username"
-                        :label="`${user.name} (${user.username})`" :value="user.username"
-                    />
-                </ff-dropdown>
+                <ff-listbox
+                    v-model="auditFilters.user"
+                    :options="userOptions"
+                    placeholder="Show All"
+                    class="w-full"
+                />
             </div>
         </div>
     </div>
@@ -35,6 +33,7 @@
 import SectionTopMenu from '../../components/SectionTopMenu.vue'
 
 import AuditEventsService from '../../services/audit-events.js'
+import FfListbox from '../../ui-components/components/form/ListBox.vue'
 import FormHeading from '../FormHeading.vue'
 
 import AuditLog from './AuditLog.vue'
@@ -42,6 +41,7 @@ import AuditLog from './AuditLog.vue'
 export default {
     name: 'AuditLogPage',
     components: {
+        FfListbox,
         AuditLog,
         SectionTopMenu,
         FormHeading
@@ -75,6 +75,24 @@ export default {
             }
         }
     },
+    computed: {
+        typeOptions () {
+            return [
+                { label: 'Show All', value: undefined },
+                ...this.auditFilters.types.map(type => ({ label: type[0], value: type[1][0] }))
+            ]
+        },
+        userOptions () {
+            return [
+                { label: 'Show All', value: undefined },
+                ...this.auditFilters.users.map(user => ({
+                    label: `${user.name} (${user.username})`,
+                    value: user.username
+                }
+                ))
+            ]
+        }
+    },
     watch: {
         'auditFilters.user': function () {
             if (this.loading || this.gettingEntries) {
@@ -120,9 +138,7 @@ export default {
                 params.append('username', this.auditFilters.user)
             }
             if (this.auditFilters.type) {
-                this.auditFilters.type.forEach((evt) => {
-                    params.append('event', evt)
-                })
+                params.append('event', this.auditFilters.type)
             }
 
             this.$emit('load-entries', params)

From d9340de60b6d77e3cd423fb9e5b9e666a4dd3e18 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 25 Sep 2024 12:43:59 +0300
Subject: [PATCH 4/7] sync with ff-listbox changes

---
 frontend/src/pages/instance/Logs.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/pages/instance/Logs.vue b/frontend/src/pages/instance/Logs.vue
index 80254b2055..1fd5d43dae 100644
--- a/frontend/src/pages/instance/Logs.vue
+++ b/frontend/src/pages/instance/Logs.vue
@@ -9,7 +9,6 @@
                         v-model="selectedHAId"
                         data-el="select-ha-replica"
                         :options="haIdOptions"
-                        :return-model-value="true"
                     />
                 </div>
             </template>

From c9f71a869030cfeac29ed69d86eee6b4105c4bb2 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 25 Sep 2024 13:06:12 +0300
Subject: [PATCH 5/7] qf failing e2e test

---
 test/e2e/frontend/cypress/tests-ee/instances/logs.spec.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/e2e/frontend/cypress/tests-ee/instances/logs.spec.js b/test/e2e/frontend/cypress/tests-ee/instances/logs.spec.js
index 7e48357e5f..39423a7cb4 100644
--- a/test/e2e/frontend/cypress/tests-ee/instances/logs.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/instances/logs.spec.js
@@ -49,7 +49,7 @@ describe('FlowForge - Instance - Logs', () => {
         cy.get('[data-el="select-ha-replica"]').should('not.exist')
     })
 
-    it('display a marker to indicuate with HA replica the logs are from, if present', () => {
+    it.only('display a marker to indicuate with HA replica the logs are from, if present', () => {
         // Modify our Instance so that HA is enabled
         cy.intercept('GET', '/api/*/projects/*', (req) => {
             req.continue((res) => {
@@ -82,16 +82,16 @@ describe('FlowForge - Instance - Logs', () => {
         // open dropdown
         cy.get('[data-el="select-ha-replica"]').click()
         // check we have 3 options
-        cy.get('[data-el="select-ha-replica"] .ff-dropdown-option').should('have.length', 3)
+        cy.get('[data-el="select-ha-replica"] .option').should('have.length', 3)
         // select the first HA Replica
-        cy.get('[data-el="select-ha-replica"] .ff-dropdown-option').eq(1).click()
+        cy.get('[data-el="select-ha-replica"] .option').eq(1).click()
 
         // logs should now be filtered to the 3 we've defined for first replica
         cy.get('[data-el="instance-log-row"]').should('have.length', 2)
 
         // open dropdown and select "All"
         cy.get('[data-el="select-ha-replica"]').click()
-        cy.get('[data-el="select-ha-replica"] .ff-dropdown-option').eq(0).click()
+        cy.get('[data-el="select-ha-replica"] .option').eq(0).click()
 
         // logs should be restored
         cy.get('[data-el="instance-log-row"]').should('have.length', 3)

From 938e8f246ff4292a6941f6a2b9552b007b4b5382 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 25 Sep 2024 13:12:58 +0300
Subject: [PATCH 6/7] qf

---
 test/e2e/frontend/cypress/tests-ee/instances/logs.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/frontend/cypress/tests-ee/instances/logs.spec.js b/test/e2e/frontend/cypress/tests-ee/instances/logs.spec.js
index 39423a7cb4..44c111280b 100644
--- a/test/e2e/frontend/cypress/tests-ee/instances/logs.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/instances/logs.spec.js
@@ -49,7 +49,7 @@ describe('FlowForge - Instance - Logs', () => {
         cy.get('[data-el="select-ha-replica"]').should('not.exist')
     })
 
-    it.only('display a marker to indicuate with HA replica the logs are from, if present', () => {
+    it('display a marker to indicuate with HA replica the logs are from, if present', () => {
         // Modify our Instance so that HA is enabled
         cy.intercept('GET', '/api/*/projects/*', (req) => {
             req.continue((res) => {

From 5d7a2764e7748dbf0db3b55f73cc1e78c83e097f Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Wed, 25 Sep 2024 13:21:34 +0300
Subject: [PATCH 7/7] fix failing e2e test

---
 .../cypress/tests/team/audit-log.spec.js      | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/test/e2e/frontend/cypress/tests/team/audit-log.spec.js b/test/e2e/frontend/cypress/tests/team/audit-log.spec.js
index 7b86d2cc89..64f43947fb 100644
--- a/test/e2e/frontend/cypress/tests/team/audit-log.spec.js
+++ b/test/e2e/frontend/cypress/tests/team/audit-log.spec.js
@@ -26,29 +26,30 @@ describe('FlowForge - Team Audit Log', () => {
         })
 
         it('provides a list of users to filter by', () => {
-            cy.get('[data-el="filter-users"]').find('.ff-dropdown-option').should('have.length', 3)
+            cy.get('[data-el="filter-users"]').click()
+            cy.get('[data-el="filter-users"] .option').should('have.length', 3)
         })
 
         it('enables filtering by a user', () => {
-            cy.get('[data-cy="filter-users"] .ff-dropdown-options').should('not.exist')
+            cy.get('[data-cy="filter-users"] .options').should('not.exist')
 
             // Check Alice Skywalker Events - should be 4
-            cy.get('[data-el="filter-users"] .ff-dropdown').click()
-            cy.get('[data-el="filter-users"] .ff-dropdown-options').should('be.visible')
+            cy.get('[data-el="filter-users"]').click()
+            cy.get('[data-el="filter-users"] .options').should('be.visible')
 
-            cy.get('[data-el="filter-users"] .ff-dropdown-options > .ff-dropdown-option').eq(1).contains('Alice Skywalker').should('be.visible')
-            cy.get('[data-el="filter-users"] .ff-dropdown-options > .ff-dropdown-option').eq(1).click()
+            cy.get('[data-el="filter-users"] .options > .option').eq(1).contains('Alice Skywalker').should('be.visible')
+            cy.get('[data-el="filter-users"] .options > .option').eq(1).click()
             cy.wait('@getAuditLog')
 
-            // length when running in isolation is 4, in tandem with the rest of the E2E tests - it's 6.
+            // // length when running in isolation is 4, in tandem with the rest of the E2E tests - it's 6.
             cy.get('[data-el="audit-log"]').find('.ff-audit-entry').should('have.length.least', 4)
 
             // Check Bob Solo Events - should be 0
-            cy.get('[data-el="filter-users"] .ff-dropdown').click()
-            cy.get('[data-el="filter-users"] .ff-dropdown-options').should('be.visible')
+            cy.get('[data-el="filter-users"]').click()
+            cy.get('[data-el="filter-users"] .options').should('be.visible')
 
-            cy.get('[data-el="filter-users"] .ff-dropdown-options > .ff-dropdown-option').eq(2).contains('Bob Solo').should('be.visible')
-            cy.get('[data-el="filter-users"] .ff-dropdown-options > .ff-dropdown-option').eq(2).click()
+            cy.get('[data-el="filter-users"] .options > .option').eq(2).contains('Bob Solo').should('be.visible')
+            cy.get('[data-el="filter-users"] .options > .option').eq(2).click()
             cy.wait('@getAuditLog')
 
             cy.get('[data-el="audit-log"]').find('.ff-audit-entry').should('have.length', 0)