4563 replace instance and audit logs dropdowns

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,13 +33,15 @@
 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'
 
 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)

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: {

frontend/src/pages/instance/Logs.vue

@@ -4,13 +4,12 @@
             <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"
+                    />
                 </div>
             </template>
         </SectionTopMenu>
@@ -20,12 +19,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 +43,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)) {

test/e2e/frontend/cypress/tests-ee/instances/logs.spec.js

@@ -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)

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)