From deaf42301b1716ca73c3e480db64149dd6ab1c7f Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 27 Sep 2024 12:43:11 +0300
Subject: [PATCH 1/7] Replace the activity instance selector with the listbox
 component

---
 frontend/src/pages/application/Activity.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/application/Activity.vue b/frontend/src/pages/application/Activity.vue
index 012492e169..5a9add5512 100644
--- a/frontend/src/pages/application/Activity.vue
+++ b/frontend/src/pages/application/Activity.vue
@@ -6,12 +6,14 @@
         <template #extraFilters>
             <FormHeading class="mt-4">Event Scope:</FormHeading>
             <div data-el="filter-event-types">
-                <ff-dropdown v-model="auditFilters.selectedEventScope" class="w-full">
-                    <ff-dropdown-option
-                        v-for="instance in instanceList" :key="instance.id"
-                        :label="instance.name" :value="instance.id"
-                    />
-                </ff-dropdown>
+                <ff-listbox
+                    v-model="auditFilters.selectedEventScope"
+                    :options="instanceList"
+                    placeholder="This Application"
+                    label-key="name"
+                    value-key="id"
+                    class="w-full"
+                />
             </div>
         </template>
     </AuditLogBrowser>
@@ -26,10 +28,12 @@ import TeamAPI from '../../api/team.js'
 import FormHeading from '../../components/FormHeading.vue'
 import SectionTopMenu from '../../components/SectionTopMenu.vue'
 import AuditLogBrowser from '../../components/audit-log/AuditLogBrowser.vue'
+import FfListbox from '../../ui-components/components/form/ListBox.vue'
 
 export default {
     name: 'ApplicationAuditLog',
     components: {
+        FfListbox,
         SectionTopMenu,
         AuditLogBrowser,
         FormHeading

From 6f5e08f28b79c81e877339536b30988201d9c95e Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 17 Jan 2025 13:02:48 +0200
Subject: [PATCH 2/7] replace the form row wit hthe listbox component and
 updating ee e2e tests

---
 frontend/src/components/FormRow.vue           |  12 +-
 .../tests-ee/applications/pipelines.spec.js   | 216 +++++++++---------
 .../tests-ee/blueprints/blueprints.spec.js    |   4 +-
 .../tests-ee/landing/deploy-blueprint.js      |  24 +-
 .../frontend/cypress/tests-ee/trials.spec.js  |   2 +-
 5 files changed, 133 insertions(+), 125 deletions(-)

diff --git a/frontend/src/components/FormRow.vue b/frontend/src/components/FormRow.vue
index ea1b6514ae..9e844c030f 100644
--- a/frontend/src/components/FormRow.vue
+++ b/frontend/src/components/FormRow.vue
@@ -48,11 +48,13 @@
             <div :class="(wrapperClass ? wrapperClass : 'flex flex-col sm:flex-row relative items-center')">
                 <!-- Dropdown -->
                 <template v-if="options && type !== 'uneditable'">
-                    <ff-dropdown v-model="localModelValue" class="w-full" :disabled="disabled" :placeholder="placeholder" data-el="dropdown">
-                        <ff-dropdown-option v-for="option in options" :value="option.value" :label="option.label" :key="option.label" class="text-sm">
-                            {{ option.label }}
-                        </ff-dropdown-option>
-                    </ff-dropdown>
+                    <ff-listbox
+                        v-model="localModelValue"
+                        :options="options"
+                        :disabled="disabled"
+                        :placeholder="placeholder"
+                        data-el="dropdown"
+                    />
                 </template>
                 <!-- Custom Input -->
                 <template v-else-if="hasCustomInput">
diff --git a/test/e2e/frontend/cypress/tests-ee/applications/pipelines.spec.js b/test/e2e/frontend/cypress/tests-ee/applications/pipelines.spec.js
index 6c2a0442af..cab422f473 100644
--- a/test/e2e/frontend/cypress/tests-ee/applications/pipelines.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/applications/pipelines.spec.js
@@ -58,15 +58,15 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
         // First stage should not have 'do nothing' as an option
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Do nothing")').should('not.exist')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Create new instance snapshot")').click()
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Do nothing")').should('not.exist')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Create new instance snapshot")').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -77,15 +77,18 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 2')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options .ff-option').click()
+
         // Last stage should have 'do nothing' as an option
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Do nothing")').should('exist')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Do nothing")').should('exist')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:last').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:last').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -131,13 +134,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type(`Stage 1 for ${PIPELINE_NAME}`)
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:last').click() // prompt
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:last').click() // prompt
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -154,17 +157,20 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
             expect(stageName).to.equal(`Stage 1 for ${PIPELINE_NAME}`)
         })
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown-selected').should('contain', 'instance-2-1')
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-option-content.active').should('contain', 'instance-2-1')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:last').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:last').click()
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown-selected').should('contain', 'instance-2-with-devices')
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-option-content.active').should('contain', 'instance-2-with-devices')
 
         // First stage should not have 'do nothing' as an option
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Do nothing")').should('not.exist')
-        cy.get('[data-form="stage-action"] .ff-dropdown-selected').should('contain', 'Prompt to select instance snapshot')
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Do nothing")').should('not.exist')
+        cy.get('[data-form="stage-action"] .ff-option-content.active').should('contain', 'Prompt to select instance snapshot')
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -200,14 +206,14 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
         // Select Instance for Stage 1
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
         // Select "Create new Snapshot"
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Create new instance snapshot")').click() // prompt
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Create new instance snapshot")').click() // prompt
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -218,13 +224,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 2')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:first').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -288,13 +294,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Prompt")').click() // prompt
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Prompt")').click() // prompt
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -325,13 +331,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
             cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 2')
 
-            cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-            cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-            cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+            cy.get('[data-form="stage-instance"] .ff-listbox').click()
+            cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+            cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-            cy.get('[data-form="stage-action"] .ff-dropdown').click()
-            cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-            cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+            cy.get('[data-form="stage-action"] .ff-listbox').click()
+            cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+            cy.get('[data-form="stage-action"] .ff-options > .ff-option:first').click()
 
             cy.get('[data-action="add-stage"]').click()
 
@@ -399,13 +405,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
-        cy.get('[data-form="stage-device"] .ff-dropdown').click()
-        cy.get('[data-form="stage-device"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-device"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-device"] .ff-listbox').click()
+        cy.get('[data-form="stage-device"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-device"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("active")').click() // Use active snapshot
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("active")').click() // Use active snapshot
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -416,13 +422,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 2')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:first').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -504,13 +510,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Create new instance snapshot")').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Create new instance snapshot")').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -522,13 +528,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 2')
 
-        cy.get('[data-form="stage-device"] .ff-dropdown').click()
-        cy.get('[data-form="stage-device"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-device"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-device"] .ff-listbox').click()
+        cy.get('[data-form="stage-device"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-device"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("active")').click() // Use active snapshot
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("active")').click() // Use active snapshot
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -619,13 +625,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Create new instance snapshot")').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Create new instance snapshot")').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -641,9 +647,9 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
         cy.get('[data-form="stage-action"]').should('not.exist')
 
         // select 1st element for stage-device-group
-        cy.get('[data-form="stage-device-group"] .ff-dropdown').click()
-        cy.get('[data-form="stage-device-group"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-device-group"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-device-group"] .ff-listbox').click()
+        cy.get('[data-form="stage-device-group"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-device-group"] .ff-options > .ff-option:first').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -680,13 +686,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Create new instance snapshot")').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Create new instance snapshot")').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -705,9 +711,9 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
         cy.get('[data-form="stage-type"]').find('.ff-tile-selection-option[data-form="tile-selection-option-device-group"]').click()
 
         // Select create new
-        cy.get('[data-form="stage-device-group"] .ff-dropdown').click()
-        cy.get('[data-form="stage-device-group"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-device-group"] .ff-dropdown-options > .ff-dropdown-option:contains("Create")').click()
+        cy.get('[data-form="stage-device-group"] .ff-listbox').click()
+        cy.get('[data-form="stage-device-group"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-device-group"] .ff-options > .ff-option:contains("Create")').click()
 
         // Device groups field hidden to start
         cy.get('[data-form="stage-device-group-name"]').type(GROUP_NAME)
@@ -767,13 +773,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 1')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:contains("Create new instance snapshot")').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:contains("Create new instance snapshot")').click()
 
         cy.get('[data-action="add-stage"]').click()
 
@@ -784,13 +790,13 @@ describe('FlowForge - Application - DevOps Pipelines', () => {
 
         cy.get('[data-form="stage-name"] input[type="text"]').type('Stage 2')
 
-        cy.get('[data-form="stage-instance"] .ff-dropdown').click()
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-instance"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="stage-instance"] .ff-listbox').click()
+        cy.get('[data-form="stage-instance"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-instance"] .ff-options > .ff-option:first').click()
 
-        cy.get('[data-form="stage-action"] .ff-dropdown').click()
-        cy.get('[data-form="stage-action"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="stage-action"] .ff-dropdown-options > .ff-dropdown-option:last').click()
+        cy.get('[data-form="stage-action"] .ff-listbox').click()
+        cy.get('[data-form="stage-action"] .ff-options').should('be.visible')
+        cy.get('[data-form="stage-action"] .ff-options > .ff-option:last').click()
 
         cy.get('[data-action="add-stage"]').click()
 
diff --git a/test/e2e/frontend/cypress/tests-ee/blueprints/blueprints.spec.js b/test/e2e/frontend/cypress/tests-ee/blueprints/blueprints.spec.js
index 6193857d60..8366efe95c 100644
--- a/test/e2e/frontend/cypress/tests-ee/blueprints/blueprints.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/blueprints/blueprints.spec.js
@@ -169,8 +169,8 @@ describe('FlowForge - Blueprints', () => {
 
                 // select application
                 cy.get('[data-form="application-id"]').click()
-                cy.get('[data-form="application-id"] .ff-dropdown-options').should('be.visible')
-                cy.get('[data-form="application-id"] .ff-dropdown-options > .ff-dropdown-option').first().click()
+                cy.get('[data-form="application-id"] .ff-options').should('be.visible')
+                cy.get('[data-form="application-id"] .ff-options > .ff-option').first().click()
 
                 // give instance a name
                 cy.get('[data-form="project-name"] input').clear()
diff --git a/test/e2e/frontend/cypress/tests-ee/landing/deploy-blueprint.js b/test/e2e/frontend/cypress/tests-ee/landing/deploy-blueprint.js
index ef2a7ceb1e..c0588590e1 100644
--- a/test/e2e/frontend/cypress/tests-ee/landing/deploy-blueprint.js
+++ b/test/e2e/frontend/cypress/tests-ee/landing/deploy-blueprint.js
@@ -72,8 +72,8 @@ describe('FlowFuse - Deploy Blueprint', () => {
                 cy.get('[data-el="page-name"]').contains('Deploy Blueprint 1')
 
                 cy.get('[data-form="application-id"]').click()
-                cy.get('[data-form="application-id"] .ff-dropdown-options').should('be.visible')
-                cy.get('[data-form="application-id"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+                cy.get('[data-form="application-id"] .ff-options').should('be.visible')
+                cy.get('[data-form="application-id"] .ff-options > .ff-option:first').click()
 
                 cy.get('[data-action="click-small-blueprint-tile"]').contains('Blueprint 1')
                 cy.get('[data-form="project-type"]').children().first().click()
@@ -103,8 +103,8 @@ describe('FlowFuse - Deploy Blueprint', () => {
                 cy.get('[data-el="page-name"]').contains('Deploy Blueprint 1')
 
                 cy.get('[data-form="application-id"]').click()
-                cy.get('[data-form="application-id"] .ff-dropdown-options').should('be.visible')
-                cy.get('[data-form="application-id"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+                cy.get('[data-form="application-id"] .ff-options').should('be.visible')
+                cy.get('[data-form="application-id"] .ff-options > .ff-option:first').click()
 
                 cy.get('[data-action="click-small-blueprint-tile"]').contains('Blueprint 1')
                 cy.get('[data-form="project-type"]').children().first().click()
@@ -135,8 +135,8 @@ describe('FlowFuse - Deploy Blueprint', () => {
                         cy.get('[data-el="page-name"]').contains(`Deploy ${predefinedBlueprint.name}`)
 
                         cy.get('[data-form="application-id"]').click()
-                        cy.get('[data-form="application-id"] .ff-dropdown-options').should('be.visible')
-                        cy.get('[data-form="application-id"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+                        cy.get('[data-form="application-id"] .ff-options').should('be.visible')
+                        cy.get('[data-form="application-id"] .ff-options > .ff-option:first').click()
 
                         cy.get('[data-action="click-small-blueprint-tile"]').contains(predefinedBlueprint.name)
                         cy.get('[data-form="project-type"]').children().first().click()
@@ -170,8 +170,8 @@ describe('FlowFuse - Deploy Blueprint', () => {
                 cy.get('[data-el="page-name"]').contains('Deploy Blueprint 1')
 
                 cy.get('[data-form="application-id"]').click()
-                cy.get('[data-form="application-id"] .ff-dropdown-options').should('be.visible')
-                cy.get('[data-form="application-id"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+                cy.get('[data-form="application-id"] .ff-options').should('be.visible')
+                cy.get('[data-form="application-id"] .ff-options > .ff-option:first').click()
 
                 cy.get('[data-action="click-small-blueprint-tile"]').contains('Blueprint 1')
                 cy.get('[data-form="project-type"]').children().first().click()
@@ -205,8 +205,8 @@ describe('FlowFuse - Deploy Blueprint', () => {
                 cy.get('[data-el="page-name"]').contains('Deploy Blueprint 1')
 
                 cy.get('[data-form="application-id"]').click()
-                cy.get('[data-form="application-id"] .ff-dropdown-options').should('be.visible')
-                cy.get('[data-form="application-id"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+                cy.get('[data-form="application-id"] .ff-options').should('be.visible')
+                cy.get('[data-form="application-id"] .ff-options > .ff-option:first').click()
 
                 cy.get('[data-action="click-small-blueprint-tile"]').contains('Blueprint 1')
                 cy.get('[data-form="project-type"]').children().first().click()
@@ -240,8 +240,8 @@ describe('FlowFuse - Deploy Blueprint', () => {
                         cy.get('[data-el="page-name"]').contains(`Deploy ${predefinedBlueprint.name}`)
 
                         cy.get('[data-form="application-id"]').click()
-                        cy.get('[data-form="application-id"] .ff-dropdown-options').should('be.visible')
-                        cy.get('[data-form="application-id"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+                        cy.get('[data-form="application-id"] .ff-options').should('be.visible')
+                        cy.get('[data-form="application-id"] .ff-options > .ff-option:first').click()
 
                         cy.get('[data-action="click-small-blueprint-tile"]').contains(predefinedBlueprint.name)
                         cy.get('[data-form="project-type"]').children().first().click()
diff --git a/test/e2e/frontend/cypress/tests-ee/trials.spec.js b/test/e2e/frontend/cypress/tests-ee/trials.spec.js
index b456a2bea8..224d893dca 100644
--- a/test/e2e/frontend/cypress/tests-ee/trials.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/trials.spec.js
@@ -12,7 +12,7 @@ describe('FlowForge - Trial Users', () => {
         cy.get('[data-el="empty-state"] [data-action="create-application"]').click()
     })
 
-    it('are redirected to their (first) newly created instance', () => {
+    it.only('are redirected to their (first) newly created instance', () => {
         const APPLICATION_NAME = `new-application-${Math.random().toString(36).substring(2, 7)}`
         const INSTANCE_NAME = `new-instance-${Math.random().toString(36).substring(2, 7)}`
 

From d9b91e9418e75977061f5a1e6a43240d5aef0a81 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 17 Jan 2025 15:22:26 +0200
Subject: [PATCH 3/7] update os e2e tests

---
 .../dialogs/DeviceAssignApplicationDialog.vue |  1 -
 .../frontend/cypress/tests/devices.spec.js    | 31 +++++++++++++------
 .../cypress/tests/devices/assignment.spec.js  | 17 +++++-----
 .../cypress/tests/devices/bulk.spec.js        | 14 +++++----
 .../frontend/cypress/tests/instances.spec.js  |  6 ++--
 5 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/frontend/src/pages/team/Devices/dialogs/DeviceAssignApplicationDialog.vue b/frontend/src/pages/team/Devices/dialogs/DeviceAssignApplicationDialog.vue
index 9034dd55e9..9768c32187 100644
--- a/frontend/src/pages/team/Devices/dialogs/DeviceAssignApplicationDialog.vue
+++ b/frontend/src/pages/team/Devices/dialogs/DeviceAssignApplicationDialog.vue
@@ -19,7 +19,6 @@
                 </div>
                 <hr>
                 <p>Select the Node-RED application you want to {{ bulkOp ? 'move' : 'add' }} the device{{ selection.length > 1 ? 's' : '' }} to.</p>
-
                 <FormRow
                     v-model="input.application"
                     :options="options.applications"
diff --git a/test/e2e/frontend/cypress/tests/devices.spec.js b/test/e2e/frontend/cypress/tests/devices.spec.js
index ea5acd2a60..15a3c5452b 100644
--- a/test/e2e/frontend/cypress/tests/devices.spec.js
+++ b/test/e2e/frontend/cypress/tests/devices.spec.js
@@ -298,27 +298,31 @@ describe('FlowForge - Team Devices', () => {
             // Dialog
             cy.get('[data-el="assign-device-to-instance-dialog"]')
                 .should('be.visible')
+
+            cy.get('[data-el="assign-device-to-instance-dialog"]')
                 .within(() => {
                     // Application dropdown
                     cy.get('[data-form="application"]').within(() => {
-                        cy.get('.ff-dropdown[disabled=false]').click()
+                        cy.get('[data-el="dropdown"]').should('not.be.disabled')
+                        cy.get('.ff-listbox').click()
 
                         // Click first Application
-                        cy.get('.ff-dropdown-options > .ff-dropdown-option:first').click()
+                        cy.get('.ff-options > .ff-option:first').click()
                     })
 
                     // Instance dropdown
                     cy.get('[data-form="instance"]').within(() => {
-                        cy.get('.ff-dropdown[disabled=false]').click()
+                        cy.get('.ff-listbox').should('not.be.disabled')
+                        cy.get('.ff-listbox').click()
 
                         // Grab name of first instance
-                        cy.get('.ff-dropdown-options').should('be.visible')
-                        cy.get('.ff-dropdown-options > .ff-dropdown-option:first').invoke('text').then((text) => {
+                        cy.get('.ff-options').should('be.visible')
+                        cy.get('.ff-options > .ff-option:first').invoke('text').then((text) => {
                             selectedInstance = text
                         })
 
                         // Click first instance
-                        cy.get('.ff-dropdown-options > .ff-dropdown-option:first').click()
+                        cy.get('.ff-options > .ff-option:first').click()
                     })
 
                     cy.get('.ff-btn--primary').click()
@@ -340,6 +344,8 @@ describe('FlowForge - Team Devices', () => {
             // Remove dialog
             cy.get('[data-el="platform-dialog"]')
                 .should('be.visible')
+
+            cy.get('[data-el="platform-dialog"]')
                 .within(() => {
                     cy.get('.ff-btn--danger').click()
                 })
@@ -379,17 +385,20 @@ describe('FlowForge - Team Devices', () => {
             // Dialog
             cy.get('[data-el="assign-device-to-application-dialog"]')
                 .should('be.visible')
+
+            cy.get('[data-el="assign-device-to-application-dialog"]')
                 .within(() => {
                     // Instance dropdown
                     cy.get('[data-form="application"]').within(() => {
-                        cy.get('.ff-dropdown[disabled=false]').click()
+                        cy.get('.ff-listbox').should('not.be.disabled')
+                        cy.get('.ff-listbox').click()
 
                         // Grab name of first application
-                        cy.get('.ff-dropdown-options').should('be.visible')
-                        cy.get('.ff-dropdown-options > .ff-dropdown-option:first').invoke('text').then((text) => {
+                        cy.get('.ff-options').should('be.visible')
+                        cy.get('.ff-options > .ff-option:first').invoke('text').then((text) => {
                             selectedApplication = text
                         })
-                        cy.get('.ff-dropdown-options > .ff-dropdown-option:first').click()
+                        cy.get('.ff-options > .ff-option:first').click()
                     })
                     // chose the first application by clicking the primary button within the dialog
                     cy.get('.ff-btn--primary').click()
@@ -411,6 +420,8 @@ describe('FlowForge - Team Devices', () => {
             // Remove dialog
             cy.get('[data-el="platform-dialog"]')
                 .should('be.visible')
+
+            cy.get('[data-el="platform-dialog"]')
                 .within(() => {
                     cy.get('.ff-btn--danger').click()
                 })
diff --git a/test/e2e/frontend/cypress/tests/devices/assignment.spec.js b/test/e2e/frontend/cypress/tests/devices/assignment.spec.js
index 0db18c2788..765e6a5bd1 100644
--- a/test/e2e/frontend/cypress/tests/devices/assignment.spec.js
+++ b/test/e2e/frontend/cypress/tests/devices/assignment.spec.js
@@ -94,11 +94,12 @@ describe('FlowForge - Team - Devices - Create', () => {
 
             cy.get('[data-form="application"]').within(() => {
                 // eslint-disable-next-line cypress/require-data-selectors
-                cy.get('.ff-dropdown[disabled=false]').click()
+                cy.get('.ff-listbox').should('not.be.disabled')
+                cy.get('.ff-listbox').click()
 
                 // Click item with label 'application-2'
                 // eslint-disable-next-line cypress/require-data-selectors
-                cy.get('.ff-dropdown-options > .ff-dropdown-option').contains('application-2').click()
+                cy.get('.ff-options > .ff-option').contains('application-2').click()
             })
 
             // click the "Add" button
@@ -210,11 +211,11 @@ describe('FlowForge - Devices - Assign', () => {
         cy.get('[data-el="assignment-dialog"]').should('not.be.visible')
         cy.get('[data-el="assignment-dialog-instance"]').should('be.visible')
 
-        cy.get('[data-el="assignment-dialog-instance"] [data-form="application"] .ff-dropdown').click()
-        cy.get('[data-el="assignment-dialog-instance"] [data-form="application"] .ff-dropdown-options > .ff-dropdown-option').eq(0).click()
+        cy.get('[data-el="assignment-dialog-instance"] [data-form="application"] .ff-listbox').click()
+        cy.get('[data-el="assignment-dialog-instance"] [data-form="application"] .ff-options > .ff-option').eq(0).click()
 
-        cy.get('[data-el="assignment-dialog-instance"] [data-form="instance"] .ff-dropdown').click()
-        cy.get('[data-el="assignment-dialog-instance"] [data-form="instance"] .ff-dropdown-options > .ff-dropdown-option').eq(0).click()
+        cy.get('[data-el="assignment-dialog-instance"] [data-form="instance"] .ff-listbox').click()
+        cy.get('[data-el="assignment-dialog-instance"] [data-form="instance"] .ff-options > .ff-option').eq(0).click()
 
         cy.get('[data-el="assignment-dialog-instance"] [data-action="dialog-confirm"]').click()
 
@@ -260,8 +261,8 @@ describe('FlowForge - Devices - Assign', () => {
         cy.get('[data-el="assignment-dialog"]').should('not.be.visible')
         cy.get('[data-el="assignment-dialog-application"]').should('be.visible')
 
-        cy.get('[data-el="assignment-dialog-application"] [data-form="application"] .ff-dropdown').click()
-        cy.get('[data-el="assignment-dialog-application"] [data-form="application"] .ff-dropdown-options > .ff-dropdown-option').eq(0).click()
+        cy.get('[data-el="assignment-dialog-application"] [data-form="application"] .ff-listbox').click()
+        cy.get('[data-el="assignment-dialog-application"] [data-form="application"] .ff-options > .ff-option').eq(0).click()
 
         cy.get('[data-el="assignment-dialog-application"] [data-action="dialog-confirm"]').click()
 
diff --git a/test/e2e/frontend/cypress/tests/devices/bulk.spec.js b/test/e2e/frontend/cypress/tests/devices/bulk.spec.js
index 424d67bea9..15dfdd5cf1 100644
--- a/test/e2e/frontend/cypress/tests/devices/bulk.spec.js
+++ b/test/e2e/frontend/cypress/tests/devices/bulk.spec.js
@@ -114,20 +114,22 @@ describe('FlowForge - Devices', () => {
 
                         if (kind === 'application' || kind === 'instance') {
                             // select 'application-2'
-                            cy.get('[data-form="application"] .ff-dropdown').should('be.visible')
+                            cy.get('[data-form="application"] .ff-listbox').should('be.visible')
                             cy.get('[data-form="application"]').within(() => {
                                 // eslint-disable-next-line cypress/require-data-selectors
-                                cy.get('.ff-dropdown[disabled=false]').click()
+                                cy.get('.ff-listbox').should('not.be.disabled')
+                                cy.get('.ff-listbox').click()
                                 // eslint-disable-next-line cypress/require-data-selectors
-                                cy.get('.ff-dropdown-options > .ff-dropdown-option').contains('application-2').click()
+                                cy.get('.ff-options > .ff-option').contains('application-2').click()
                             })
                             if (kind === 'instance') {
                                 // Select 'instance-2-1'
-                                cy.get('[data-form="instance"] .ff-dropdown').should('be.visible')
+                                cy.get('[data-form="instance"] .ff-listbox').should('be.visible')
                                 cy.get('[data-form="instance"]').within(() => {
-                                    cy.get('.ff-dropdown[disabled=false]').click()
+                                    cy.get('.ff-listbox').should('not.be.disabled')
+                                    cy.get('.ff-listbox').click()
                                     // eslint-disable-next-line cypress/require-data-selectors
-                                    cy.get('.ff-dropdown-options > .ff-dropdown-option').contains('instance-2-1').click()
+                                    cy.get('.ff-options > .ff-option').contains('instance-2-1').click()
                                 })
                             }
                         }
diff --git a/test/e2e/frontend/cypress/tests/instances.spec.js b/test/e2e/frontend/cypress/tests/instances.spec.js
index e49655c867..8786ef1b35 100644
--- a/test/e2e/frontend/cypress/tests/instances.spec.js
+++ b/test/e2e/frontend/cypress/tests/instances.spec.js
@@ -259,9 +259,9 @@ describe('FlowForge - Instances', () => {
         cy.get('[data-action="create-project"]').should('be.disabled')
 
         // select application
-        cy.get('[data-form="application-id"]').click()
-        cy.get('[data-form="application-id"] .ff-dropdown-options').should('be.visible')
-        cy.get('[data-form="application-id"] .ff-dropdown-options > .ff-dropdown-option:first').click()
+        cy.get('[data-form="application-id"] [data-el="dropdown"]').click()
+        cy.get('[data-form="application-id"] [data-el="dropdown"] .ff-options').should('be.visible')
+        cy.get('[data-form="application-id"] [data-el="dropdown"] .ff-options > .ff-option:first').click()
 
         // give instance a name
         cy.get('[data-form="project-name"] input').clear()

From 1b6ca90a99de5fc204fd60da4a1e74a4aa2e4762 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 17 Jan 2025 15:41:42 +0200
Subject: [PATCH 4/7] remove lefrover only

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

diff --git a/test/e2e/frontend/cypress/tests-ee/trials.spec.js b/test/e2e/frontend/cypress/tests-ee/trials.spec.js
index 224d893dca..b456a2bea8 100644
--- a/test/e2e/frontend/cypress/tests-ee/trials.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/trials.spec.js
@@ -12,7 +12,7 @@ describe('FlowForge - Trial Users', () => {
         cy.get('[data-el="empty-state"] [data-action="create-application"]').click()
     })
 
-    it.only('are redirected to their (first) newly created instance', () => {
+    it('are redirected to their (first) newly created instance', () => {
         const APPLICATION_NAME = `new-application-${Math.random().toString(36).substring(2, 7)}`
         const INSTANCE_NAME = `new-instance-${Math.random().toString(36).substring(2, 7)}`
 

From 9c1357190fc64ea7dce4a4bcd5b782974b37755c Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 17 Jan 2025 16:05:21 +0200
Subject: [PATCH 5/7] Fix hidden mainNav due to missing team during app setup

---
 frontend/src/store/ux.js | 278 +++++++++++++++++++++++----------------
 1 file changed, 166 insertions(+), 112 deletions(-)

diff --git a/frontend/src/store/ux.js b/frontend/src/store/ux.js
index 4956340fbd..47d3e3c2b9 100644
--- a/frontend/src/store/ux.js
+++ b/frontend/src/store/ux.js
@@ -1,5 +1,5 @@
 import {
-    BookOpenIcon, ChatIcon, ChipIcon, CogIcon, CollectionIcon,
+    BookOpenIcon, ChatIcon, ChevronLeftIcon, ChipIcon, CogIcon, CollectionIcon,
     ColorSwatchIcon, CurrencyDollarIcon, DatabaseIcon,
     DesktopComputerIcon, LockClosedIcon, RssIcon,
     TableIcon, TemplateIcon, UserGroupIcon, UsersIcon
@@ -44,15 +44,114 @@ const getters = {
         const accountFeatures = rootState.account.features
         const noBilling = rootGetters['account/noBilling']
         const features = rootGetters['account/featuresCheck']
-        return {
-            team: [
+
+        const adminContext = [
+            {
+                entries: [
+                    {
+                        label: 'Back to Dashboard',
+                        to: { name: 'Home' },
+                        tag: 'back',
+                        icon: ChevronLeftIcon
+                    }
+                ]
+            },
+            {
+                title: 'Admin',
+                entries: [
+                    {
+                        label: 'Overview',
+                        to: { name: 'admin-overview' },
+                        tag: 'admin-overview',
+                        icon: CollectionIcon
+                    },
+                    {
+                        label: 'Users',
+                        to: { name: 'admin-users' },
+                        tag: 'admin-users',
+                        icon: UsersIcon
+                    },
+                    {
+                        label: 'Teams',
+                        to: { name: 'admin-teams' },
+                        tag: 'admin-teams',
+                        icon: UserGroupIcon
+                    },
+                    {
+                        label: 'Audit Log',
+                        to: { name: 'admin-audit-logs' },
+                        tag: 'admin-auditlog',
+                        icon: DatabaseIcon
+                    },
+                    {
+                        label: 'Notifications Hub',
+                        to: { name: 'admin-notifications-hub' },
+                        tag: 'notifications-hub',
+                        icon: ChatIcon
+                    }
+                ]
+            },
+            {
+                title: 'Setup',
+                entries: [
+                    {
+                        label: 'Team Types',
+                        to: { name: 'admin-team-types' },
+                        tag: 'admin-teamtypes',
+                        icon: ColorSwatchIcon
+                    },
+                    {
+                        label: 'Instance Types',
+                        to: { name: 'admin-instance-types' },
+                        tag: 'admin-instancetypes',
+                        icon: ColorSwatchIcon
+                    },
+                    {
+                        label: 'Stacks',
+                        to: { name: 'admin-stacks' },
+                        tag: 'admin-stacks',
+                        icon: DesktopComputerIcon
+                    },
+                    {
+                        label: 'Templates',
+                        to: { name: 'admin-templates' },
+                        tag: 'admin-templates',
+                        icon: TemplateIcon
+                    },
+                    {
+                        label: 'Blueprints',
+                        to: { name: 'admin-flow-blueprints' },
+                        tag: 'admin-flow-blueprints',
+                        icon: TemplateIcon,
+                        featureUnavailable: !features.isBlueprintsFeatureEnabledForPlatform
+                    }
+                ]
+            },
+            {
+                title: 'General',
+                entries: [
+                    {
+                        label: 'Settings',
+                        to: { name: 'admin-settings' },
+                        tag: 'admin-settings',
+                        icon: CogIcon
+                    }
+                ]
+            }
+        ]
+
+        const teamContext = team
+            ? [
                 {
                     title: '',
                     hidden: !hasAMinimumTeamRoleOf(Roles.Viewer),
                     entries: [
                         {
                             label: 'Applications',
-                            to: { name: 'Applications', params: { team_slug: team.slug } },
+                            to: {
+                                name: 'Applications',
+                                params: { team_slug: team.slug }
+                            },
                             tag: 'team-applications',
                             icon: TemplateIcon,
                             disabled: noBilling
@@ -65,7 +164,10 @@ const getters = {
                     entries: [
                         {
                             label: 'Hosted Instances',
-                            to: { name: 'Instances', params: { team_slug: team.slug } },
+                            to: {
+                                name: 'Instances',
+                                params: { team_slug: team.slug }
+                            },
                             tag: 'team-instances',
                             icon: ProjectsIcon,
                             featureUnavailable: !features.isHostedInstancesEnabledForTeam,
@@ -73,7 +175,10 @@ const getters = {
                         },
                         {
                             label: 'Remote Instances',
-                            to: { name: 'TeamDevices', params: { team_slug: team.slug } },
+                            to: {
+                                name: 'TeamDevices',
+                                params: { team_slug: team.slug }
+                            },
                             tag: 'team-devices',
                             icon: ChipIcon,
                             disabled: noBilling
@@ -86,7 +191,10 @@ const getters = {
                     entries: [
                         {
                             label: 'Groups',
-                            to: { name: 'device-groups', params: { team_slug: team.slug } },
+                            to: {
+                                name: 'device-groups',
+                                params: { team_slug: team.slug }
+                            },
                             tag: 'device-groups',
                             icon: DeviceGroupOutlineIcon,
                             disabled: noBilling,
@@ -95,7 +203,10 @@ const getters = {
                         },
                         {
                             label: 'Pipelines',
-                            to: { name: 'team-pipelines', params: { team_slug: team.slug } },
+                            to: {
+                                name: 'team-pipelines',
+                                params: { team_slug: team.slug }
+                            },
                             tag: 'team-pipelines',
                             icon: PipelinesIcon,
                             disabled: noBilling,
@@ -104,7 +215,10 @@ const getters = {
                         },
                         {
                             label: 'Bill Of Materials',
-                            to: { name: 'team-bom', params: { team_slug: team.slug } },
+                            to: {
+                                name: 'team-bom',
+                                params: { team_slug: team.slug }
+                            },
                             tag: 'team-bom',
                             icon: TableIcon,
                             disabled: noBilling,
@@ -113,7 +227,10 @@ const getters = {
                         },
                         {
                             label: 'Broker',
-                            to: { name: 'team-unified-namespace', params: { team_slug: team.slug } },
+                            to: {
+                                name: 'team-unified-namespace',
+                                params: { team_slug: team.slug }
+                            },
                             tag: 'team-unified-namespace',
                             icon: RssIcon,
                             disabled: noBilling,
@@ -128,7 +245,10 @@ const getters = {
                     entries: [
                         {
                             label: 'Library',
-                            to: { name: 'TeamLibrary', params: { team_slug: team.slug } },
+                            to: {
+                                name: 'TeamLibrary',
+                                params: { team_slug: team.slug }
+                            },
                             tag: 'shared-library',
                             icon: BookOpenIcon,
                             disabled: noBilling,
@@ -136,7 +256,10 @@ const getters = {
                         },
                         {
                             label: 'Members',
-                            to: { name: 'team-members', params: { team_slug: team.slug } },
+                            to: {
+                                name: 'team-members',
+                                params: { team_slug: team.slug }
+                            },
                             tag: 'team-members',
                             icon: UsersIcon,
                             disabled: noBilling
@@ -150,7 +273,10 @@ const getters = {
                     entries: [
                         {
                             label: 'Audit Log',
-                            to: { name: 'AuditLog', params: { team_slug: team.slug } },
+                            to: {
+                                name: 'AuditLog',
+                                params: { team_slug: team.slug }
+                            },
                             tag: 'team-audit',
                             icon: DatabaseIcon,
                             disabled: noBilling,
@@ -158,11 +284,14 @@ const getters = {
                         },
                         {
                             label: 'Billing',
-                            to: { name: 'Billing', params: { team_slug: team.slug } },
+                            to: {
+                                name: 'Billing',
+                                params: { team_slug: team.slug }
+                            },
                             tag: 'team-billing',
                             icon: CurrencyDollarIcon,
                             hidden: (() => {
-                                // hide menu entry for non-billing setups
+                            // hide menu entry for non-billing setups
                                 if (noBilling) {
                                     return true
                                 }
@@ -174,104 +303,20 @@ const getters = {
                         },
                         {
                             label: 'Team Settings',
-                            to: { name: 'TeamSettings', params: { team_slug: team.slug } },
+                            to: {
+                                name: 'TeamSettings',
+                                params: { team_slug: team.slug }
+                            },
                             tag: 'team-settings',
                             icon: CogIcon,
                             permission: 'team:edit'
                         }
                     ]
                 }
-            ],
-            admin: [
-                {
-                    entries: [
-                        state.mainNav.backToButton
-                    ]
-                },
-                {
-                    title: 'Admin',
-                    entries: [
-                        {
-                            label: 'Overview',
-                            to: { name: 'admin-overview' },
-                            tag: 'admin-overview',
-                            icon: CollectionIcon
-                        },
-                        {
-                            label: 'Users',
-                            to: { name: 'admin-users' },
-                            tag: 'admin-users',
-                            icon: UsersIcon
-                        },
-                        {
-                            label: 'Teams',
-                            to: { name: 'admin-teams' },
-                            tag: 'admin-teams',
-                            icon: UserGroupIcon
-                        },
-                        {
-                            label: 'Audit Log',
-                            to: { name: 'admin-audit-logs' },
-                            tag: 'admin-auditlog',
-                            icon: DatabaseIcon
-                        },
-                        {
-                            label: 'Notifications Hub',
-                            to: { name: 'admin-notifications-hub' },
-                            tag: 'notifications-hub',
-                            icon: ChatIcon
-                        }
-                    ]
-                },
-                {
-                    title: 'Setup',
-                    entries: [
-                        {
-                            label: 'Team Types',
-                            to: { name: 'admin-team-types' },
-                            tag: 'admin-teamtypes',
-                            icon: ColorSwatchIcon
-                        },
-                        {
-                            label: 'Instance Types',
-                            to: { name: 'admin-instance-types' },
-                            tag: 'admin-instancetypes',
-                            icon: ColorSwatchIcon
-                        },
-                        {
-                            label: 'Stacks',
-                            to: { name: 'admin-stacks' },
-                            tag: 'admin-stacks',
-                            icon: DesktopComputerIcon
-                        },
-                        {
-                            label: 'Templates',
-                            to: { name: 'admin-templates' },
-                            tag: 'admin-templates',
-                            icon: TemplateIcon
-                        },
-                        {
-                            label: 'Blueprints',
-                            to: { name: 'admin-flow-blueprints' },
-                            tag: 'admin-flow-blueprints',
-                            icon: TemplateIcon,
-                            featureUnavailable: !features.isBlueprintsFeatureEnabledForPlatform
-                        }
-                    ]
-                },
-                {
-                    title: 'General',
-                    entries: [
-                        {
-                            label: 'Settings',
-                            to: { name: 'admin-settings' },
-                            tag: 'admin-settings',
-                            icon: CogIcon
-                        }
-                    ]
-                }
-            ],
-            user: [
+            ]
+            : []
+        const userContext = team
+            ? [
                 {
                     entries: [
                         state.mainNav.backToButton
@@ -300,21 +345,30 @@ const getters = {
                         }
                     ]
                 }
-            ],
-            back: [
+            ]
+            : []
+        const backContext = team
+            ? [
                 {
                     entries: [
                         state.mainNav.backToButton
                     ]
                 }
-            ],
+            ]
+            : []
+
+        return {
+            team: teamContext,
+            admin: adminContext,
+            user: userContext,
+            back: backContext,
             none: []
         }
     },
     mainNavContext: (state, getters, rootState) => {
         const team = rootState.account.team
 
-        if (!team) {
+        if (!team && state.mainNav.context !== 'admin') {
             // todo this compensates for a brief moment after logging in where we don't have a team loaded and can't properly
             //  generate menu links. This should be addressed by implementing an application service that bootstrap's the
             //  app and hydrates vuex stores before attempting to render any data
@@ -326,7 +380,7 @@ const getters = {
         return getters.mainNavContexts[state.mainNav.context]
             .map(category => {
                 // filter hidden entries
-                category.entries = category.entries.filter(entry => entry.hidden ?? true)
+                category.entries = category.entries.filter(entry => (!!entry && entry?.hidden) ?? true)
 
                 // filter entries without permission
                 category.entries = category.entries.filter(entry => {

From b6fd90e7b1fe4dd613fb833341920ee6021f30c5 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 17 Jan 2025 16:06:29 +0200
Subject: [PATCH 6/7] Revert "Fix hidden mainNav due to missing team during app
 setup"

This reverts commit 9c1357190fc64ea7dce4a4bcd5b782974b37755c.
---
 frontend/src/store/ux.js | 278 ++++++++++++++++-----------------------
 1 file changed, 112 insertions(+), 166 deletions(-)

diff --git a/frontend/src/store/ux.js b/frontend/src/store/ux.js
index 47d3e3c2b9..4956340fbd 100644
--- a/frontend/src/store/ux.js
+++ b/frontend/src/store/ux.js
@@ -1,5 +1,5 @@
 import {
-    BookOpenIcon, ChatIcon, ChevronLeftIcon, ChipIcon, CogIcon, CollectionIcon,
+    BookOpenIcon, ChatIcon, ChipIcon, CogIcon, CollectionIcon,
     ColorSwatchIcon, CurrencyDollarIcon, DatabaseIcon,
     DesktopComputerIcon, LockClosedIcon, RssIcon,
     TableIcon, TemplateIcon, UserGroupIcon, UsersIcon
@@ -44,114 +44,15 @@ const getters = {
         const accountFeatures = rootState.account.features
         const noBilling = rootGetters['account/noBilling']
         const features = rootGetters['account/featuresCheck']
-
-        const adminContext = [
-            {
-                entries: [
-                    {
-                        label: 'Back to Dashboard',
-                        to: { name: 'Home' },
-                        tag: 'back',
-                        icon: ChevronLeftIcon
-                    }
-                ]
-            },
-            {
-                title: 'Admin',
-                entries: [
-                    {
-                        label: 'Overview',
-                        to: { name: 'admin-overview' },
-                        tag: 'admin-overview',
-                        icon: CollectionIcon
-                    },
-                    {
-                        label: 'Users',
-                        to: { name: 'admin-users' },
-                        tag: 'admin-users',
-                        icon: UsersIcon
-                    },
-                    {
-                        label: 'Teams',
-                        to: { name: 'admin-teams' },
-                        tag: 'admin-teams',
-                        icon: UserGroupIcon
-                    },
-                    {
-                        label: 'Audit Log',
-                        to: { name: 'admin-audit-logs' },
-                        tag: 'admin-auditlog',
-                        icon: DatabaseIcon
-                    },
-                    {
-                        label: 'Notifications Hub',
-                        to: { name: 'admin-notifications-hub' },
-                        tag: 'notifications-hub',
-                        icon: ChatIcon
-                    }
-                ]
-            },
-            {
-                title: 'Setup',
-                entries: [
-                    {
-                        label: 'Team Types',
-                        to: { name: 'admin-team-types' },
-                        tag: 'admin-teamtypes',
-                        icon: ColorSwatchIcon
-                    },
-                    {
-                        label: 'Instance Types',
-                        to: { name: 'admin-instance-types' },
-                        tag: 'admin-instancetypes',
-                        icon: ColorSwatchIcon
-                    },
-                    {
-                        label: 'Stacks',
-                        to: { name: 'admin-stacks' },
-                        tag: 'admin-stacks',
-                        icon: DesktopComputerIcon
-                    },
-                    {
-                        label: 'Templates',
-                        to: { name: 'admin-templates' },
-                        tag: 'admin-templates',
-                        icon: TemplateIcon
-                    },
-                    {
-                        label: 'Blueprints',
-                        to: { name: 'admin-flow-blueprints' },
-                        tag: 'admin-flow-blueprints',
-                        icon: TemplateIcon,
-                        featureUnavailable: !features.isBlueprintsFeatureEnabledForPlatform
-                    }
-                ]
-            },
-            {
-                title: 'General',
-                entries: [
-                    {
-                        label: 'Settings',
-                        to: { name: 'admin-settings' },
-                        tag: 'admin-settings',
-                        icon: CogIcon
-                    }
-                ]
-            }
-        ]
-
-        const teamContext = team
-            ? [
+        return {
+            team: [
                 {
                     title: '',
                     hidden: !hasAMinimumTeamRoleOf(Roles.Viewer),
                     entries: [
                         {
                             label: 'Applications',
-                            to: {
-                                name: 'Applications',
-                                params: { team_slug: team.slug }
-                            },
+                            to: { name: 'Applications', params: { team_slug: team.slug } },
                             tag: 'team-applications',
                             icon: TemplateIcon,
                             disabled: noBilling
@@ -164,10 +65,7 @@ const getters = {
                     entries: [
                         {
                             label: 'Hosted Instances',
-                            to: {
-                                name: 'Instances',
-                                params: { team_slug: team.slug }
-                            },
+                            to: { name: 'Instances', params: { team_slug: team.slug } },
                             tag: 'team-instances',
                             icon: ProjectsIcon,
                             featureUnavailable: !features.isHostedInstancesEnabledForTeam,
@@ -175,10 +73,7 @@ const getters = {
                         },
                         {
                             label: 'Remote Instances',
-                            to: {
-                                name: 'TeamDevices',
-                                params: { team_slug: team.slug }
-                            },
+                            to: { name: 'TeamDevices', params: { team_slug: team.slug } },
                             tag: 'team-devices',
                             icon: ChipIcon,
                             disabled: noBilling
@@ -191,10 +86,7 @@ const getters = {
                     entries: [
                         {
                             label: 'Groups',
-                            to: {
-                                name: 'device-groups',
-                                params: { team_slug: team.slug }
-                            },
+                            to: { name: 'device-groups', params: { team_slug: team.slug } },
                             tag: 'device-groups',
                             icon: DeviceGroupOutlineIcon,
                             disabled: noBilling,
@@ -203,10 +95,7 @@ const getters = {
                         },
                         {
                             label: 'Pipelines',
-                            to: {
-                                name: 'team-pipelines',
-                                params: { team_slug: team.slug }
-                            },
+                            to: { name: 'team-pipelines', params: { team_slug: team.slug } },
                             tag: 'team-pipelines',
                             icon: PipelinesIcon,
                             disabled: noBilling,
@@ -215,10 +104,7 @@ const getters = {
                         },
                         {
                             label: 'Bill Of Materials',
-                            to: {
-                                name: 'team-bom',
-                                params: { team_slug: team.slug }
-                            },
+                            to: { name: 'team-bom', params: { team_slug: team.slug } },
                             tag: 'team-bom',
                             icon: TableIcon,
                             disabled: noBilling,
@@ -227,10 +113,7 @@ const getters = {
                         },
                         {
                             label: 'Broker',
-                            to: {
-                                name: 'team-unified-namespace',
-                                params: { team_slug: team.slug }
-                            },
+                            to: { name: 'team-unified-namespace', params: { team_slug: team.slug } },
                             tag: 'team-unified-namespace',
                             icon: RssIcon,
                             disabled: noBilling,
@@ -245,10 +128,7 @@ const getters = {
                     entries: [
                         {
                             label: 'Library',
-                            to: {
-                                name: 'TeamLibrary',
-                                params: { team_slug: team.slug }
-                            },
+                            to: { name: 'TeamLibrary', params: { team_slug: team.slug } },
                             tag: 'shared-library',
                             icon: BookOpenIcon,
                             disabled: noBilling,
@@ -256,10 +136,7 @@ const getters = {
                         },
                         {
                             label: 'Members',
-                            to: {
-                                name: 'team-members',
-                                params: { team_slug: team.slug }
-                            },
+                            to: { name: 'team-members', params: { team_slug: team.slug } },
                             tag: 'team-members',
                             icon: UsersIcon,
                             disabled: noBilling
@@ -273,10 +150,7 @@ const getters = {
                     entries: [
                         {
                             label: 'Audit Log',
-                            to: {
-                                name: 'AuditLog',
-                                params: { team_slug: team.slug }
-                            },
+                            to: { name: 'AuditLog', params: { team_slug: team.slug } },
                             tag: 'team-audit',
                             icon: DatabaseIcon,
                             disabled: noBilling,
@@ -284,14 +158,11 @@ const getters = {
                         },
                         {
                             label: 'Billing',
-                            to: {
-                                name: 'Billing',
-                                params: { team_slug: team.slug }
-                            },
+                            to: { name: 'Billing', params: { team_slug: team.slug } },
                             tag: 'team-billing',
                             icon: CurrencyDollarIcon,
                             hidden: (() => {
-                            // hide menu entry for non-billing setups
+                                // hide menu entry for non-billing setups
                                 if (noBilling) {
                                     return true
                                 }
@@ -303,20 +174,104 @@ const getters = {
                         },
                         {
                             label: 'Team Settings',
-                            to: {
-                                name: 'TeamSettings',
-                                params: { team_slug: team.slug }
-                            },
+                            to: { name: 'TeamSettings', params: { team_slug: team.slug } },
                             tag: 'team-settings',
                             icon: CogIcon,
                             permission: 'team:edit'
                         }
                     ]
                 }
-            ]
-            : []
-        const userContext = team
-            ? [
+            ],
+            admin: [
+                {
+                    entries: [
+                        state.mainNav.backToButton
+                    ]
+                },
+                {
+                    title: 'Admin',
+                    entries: [
+                        {
+                            label: 'Overview',
+                            to: { name: 'admin-overview' },
+                            tag: 'admin-overview',
+                            icon: CollectionIcon
+                        },
+                        {
+                            label: 'Users',
+                            to: { name: 'admin-users' },
+                            tag: 'admin-users',
+                            icon: UsersIcon
+                        },
+                        {
+                            label: 'Teams',
+                            to: { name: 'admin-teams' },
+                            tag: 'admin-teams',
+                            icon: UserGroupIcon
+                        },
+                        {
+                            label: 'Audit Log',
+                            to: { name: 'admin-audit-logs' },
+                            tag: 'admin-auditlog',
+                            icon: DatabaseIcon
+                        },
+                        {
+                            label: 'Notifications Hub',
+                            to: { name: 'admin-notifications-hub' },
+                            tag: 'notifications-hub',
+                            icon: ChatIcon
+                        }
+                    ]
+                },
+                {
+                    title: 'Setup',
+                    entries: [
+                        {
+                            label: 'Team Types',
+                            to: { name: 'admin-team-types' },
+                            tag: 'admin-teamtypes',
+                            icon: ColorSwatchIcon
+                        },
+                        {
+                            label: 'Instance Types',
+                            to: { name: 'admin-instance-types' },
+                            tag: 'admin-instancetypes',
+                            icon: ColorSwatchIcon
+                        },
+                        {
+                            label: 'Stacks',
+                            to: { name: 'admin-stacks' },
+                            tag: 'admin-stacks',
+                            icon: DesktopComputerIcon
+                        },
+                        {
+                            label: 'Templates',
+                            to: { name: 'admin-templates' },
+                            tag: 'admin-templates',
+                            icon: TemplateIcon
+                        },
+                        {
+                            label: 'Blueprints',
+                            to: { name: 'admin-flow-blueprints' },
+                            tag: 'admin-flow-blueprints',
+                            icon: TemplateIcon,
+                            featureUnavailable: !features.isBlueprintsFeatureEnabledForPlatform
+                        }
+                    ]
+                },
+                {
+                    title: 'General',
+                    entries: [
+                        {
+                            label: 'Settings',
+                            to: { name: 'admin-settings' },
+                            tag: 'admin-settings',
+                            icon: CogIcon
+                        }
+                    ]
+                }
+            ],
+            user: [
                 {
                     entries: [
                         state.mainNav.backToButton
@@ -345,30 +300,21 @@ const getters = {
                         }
                     ]
                 }
-            ]
-            : []
-        const backContext = team
-            ? [
+            ],
+            back: [
                 {
                     entries: [
                         state.mainNav.backToButton
                     ]
                 }
-            ]
-            : []
-
-        return {
-            team: teamContext,
-            admin: adminContext,
-            user: userContext,
-            back: backContext,
+            ],
             none: []
         }
     },
     mainNavContext: (state, getters, rootState) => {
         const team = rootState.account.team
 
-        if (!team && state.mainNav.context !== 'admin') {
+        if (!team) {
             // todo this compensates for a brief moment after logging in where we don't have a team loaded and can't properly
             //  generate menu links. This should be addressed by implementing an application service that bootstrap's the
             //  app and hydrates vuex stores before attempting to render any data
@@ -380,7 +326,7 @@ const getters = {
         return getters.mainNavContexts[state.mainNav.context]
             .map(category => {
                 // filter hidden entries
-                category.entries = category.entries.filter(entry => (!!entry && entry?.hidden) ?? true)
+                category.entries = category.entries.filter(entry => entry.hidden ?? true)
 
                 // filter entries without permission
                 category.entries = category.entries.filter(entry => {

From bac2c80c4ee3dfc144538169176dab476c8bd8f8 Mon Sep 17 00:00:00 2001
From: cstns <cstn.serban@gmail.com>
Date: Fri, 17 Jan 2025 17:53:05 +0200
Subject: [PATCH 7/7] fix fe unit test

---
 test/unit/frontend/components/form-row.spec.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/test/unit/frontend/components/form-row.spec.js b/test/unit/frontend/components/form-row.spec.js
index d0a4d9c00a..b67c80f059 100644
--- a/test/unit/frontend/components/form-row.spec.js
+++ b/test/unit/frontend/components/form-row.spec.js
@@ -50,8 +50,7 @@ describe('FormRow', () => {
 
         expect(wrapper.find('ff-checkbox').exists()).toBe(false)
         expect(wrapper.find('input[type="file"]').exists()).toBe(false)
-        expect(wrapper.find('ff-dropdown').exists()).toBe(true)
-        expect(wrapper.findAll('ff-dropdown-option').length).toBe(2)
+        expect(wrapper.find('ff-listbox').exists()).toBe(true)
         expect(wrapper.find('ff-text-input').exists()).toBe(false)
         expect(wrapper.find('[data-el="form-row-uneditable"]').exists()).toBe(false)
     })