Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace the application activity instance selector, and FormRow dropdown with the listbox component #4591

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open

Replace the application activity instance selector, and FormRow dropdown with the listbox component #4591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
deaf423
Replace the activity instance selector with the listbox component
cstns Sep 27, 2024
f3ddd38
Merge branch '4562_replace-assetCompare-visibility-selector-and-logs-…
cstns Sep 30, 2024
8f34a39
Merge branch 'main' into 4561_replace-the-applicationActivity-formRow…
ppawlowski Oct 9, 2024
f9d907a
Merge branch 'main' into 4561_replace-the-applicationActivity-formRow…
ppawlowski Oct 9, 2024
2b531cc
Merge branch 'main' into 4561_replace-the-applicationActivity-formRow…
hardillb Nov 1, 2024
3c03fc8
Merge remote-tracking branch 'origin/main' into 4561_replace-the-appl…
cstns Dec 19, 2024
2b87952
Merge remote-tracking branch 'origin/main' into 4561_replace-the-appl…
cstns Jan 16, 2025
6f5e08f
replace the form row wit hthe listbox component and updating ee e2e t…
cstns Jan 17, 2025
d9b91e9
update os e2e tests
cstns Jan 17, 2025
1b6ca90
remove lefrover only
cstns Jan 17, 2025
9c13571
Fix hidden mainNav due to missing team during app setup
cstns Jan 17, 2025
b6fd90e
Revert "Fix hidden mainNav due to missing team during app setup"
cstns Jan 17, 2025
bac2c80
fix fe unit test
cstns Jan 17, 2025
7d668c9
Merge branch 'main' into 4561_replace-the-applicationActivity-formRow…
cstns Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions frontend/src/components/FormRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
1 change: 0 additions & 1 deletion frontend/src/pages/team/Devices/dialogs/DeviceAssignApplicationDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
216 changes: 111 additions & 105 deletions test/e2e/frontend/cypress/tests-ee/applications/pipelines.spec.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions test/e2e/frontend/cypress/tests-ee/blueprints/blueprints.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
24 changes: 12 additions & 12 deletions test/e2e/frontend/cypress/tests-ee/landing/deploy-blueprint.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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()
Expand Down
31 changes: 21 additions & 10 deletions test/e2e/frontend/cypress/tests/devices.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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()
})
Expand Down Expand Up @@ -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()
Expand All @@ -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()
})
Expand Down
17 changes: 9 additions & 8 deletions test/e2e/frontend/cypress/tests/devices/assignment.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,12 @@

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

Check warning on line 98 in test/e2e/frontend/cypress/tests/devices/assignment.spec.js

View workflow job for this annotation

GitHub Actions / Postgres tests (18.x) 

use data-* attribute selectors instead of classes or tag names

// 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
Expand Down Expand Up @@ -210,11 +211,11 @@
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()

Expand Down Expand Up @@ -260,8 +261,8 @@
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()

Expand Down
14 changes: 8 additions & 6 deletions test/e2e/frontend/cypress/tests/devices/bulk.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
}
}
Expand Down
6 changes: 3 additions & 3 deletions test/e2e/frontend/cypress/tests/instances.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
3 changes: 1 addition & 2 deletions test/unit/frontend/components/form-row.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})
Expand Down
Loading