diff --git a/lib/public/components/Filters/common/filtersPanelPopover.js b/lib/public/components/Filters/common/filtersPanelPopover.js index bc9ca49850..ec32c3e2d0 100644 --- a/lib/public/components/Filters/common/filtersPanelPopover.js +++ b/lib/public/components/Filters/common/filtersPanelPopover.js @@ -32,20 +32,28 @@ const filtersToggleTrigger = () => h('button#openFilterToggle.btn.btn.btn-primar * * @return {Component} the filters panel */ -const filtersToggleContent = (filteringModel, columns) => h('.w-l.scroll-y', [ - h('.f4.ph3.pv2', 'Filters'), - Object.entries(columns) - .filter(([_, column]) => column.filter) - .map(([columnKey, column]) => [ - h(`.flex-row.items-baseline.ph3.pv1.${columnKey}-filter`, [ - h('.w-30.f5', column.name), - h('.w-70', typeof column.filter === 'function' ? column.filter(filteringModel) : column.filter), +const filtersToggleContent = (filteringModel, columns) => h('.w-l.scroll-y.flex-column.p3.g3', [ + h('.flex-row.justify-between', [ + h('.f4', 'Filters'), + h( + 'button#reset-filters.btn.btn-danger', + { + onclick: () => filteringModel.reset(), + disabled: !filteringModel.isAnyFilterActive(), + }, + 'Reset all filters', + ), + ]), + h('.flex-column.g2', [ + Object.entries(columns) + .filter(([_, column]) => column.filter) + .map(([columnKey, column]) => [ + h(`.flex-row.items-baseline.${columnKey}-filter`, [ + h('.w-30.f5', column.name), + h('.w-70', typeof column.filter === 'function' ? column.filter(filteringModel) : column.filter), + ]), ]), - ]), - h('.p2', h('button#reset-filters.btn.btn-danger.mt2', { - disabled: !filteringModel.isAnyFilterActive(), - onclick: () => filteringModel.reset(), - }, 'Reset all filters')), + ]), ]); /** @@ -55,15 +63,13 @@ const filtersToggleContent = (filteringModel, columns) => h('.w-l.scroll-y', [ * @param {object} activeColumns the list of active columns containing the filtering configuration * @return {Component} the filter component */ -export const filtersPanelPopover = (filterModel, activeColumns) => h('.flex-row.items-start', [ - popover( - filtersToggleTrigger(), - filtersToggleContent(filterModel, activeColumns), - { - ...PopoverTriggerPreConfiguration.click, - anchor: PopoverAnchors.RIGHT_START, - // Set children size to true because filter panel has an overflow scroll - setChildrenSize: true, - }, - ), -]); +export const filtersPanelPopover = (filterModel, activeColumns) => popover( + filtersToggleTrigger(), + filtersToggleContent(filterModel, activeColumns), + { + ...PopoverTriggerPreConfiguration.click, + anchor: PopoverAnchors.RIGHT_START, + // Set children size to true because filter panel has an overflow scroll + setChildrenSize: true, + }, +); diff --git a/test/public/dataPasses/overviewPerLhcPeriod.test.js b/test/public/dataPasses/overviewPerLhcPeriod.test.js index 99398bfee2..7ff2571c26 100644 --- a/test/public/dataPasses/overviewPerLhcPeriod.test.js +++ b/test/public/dataPasses/overviewPerLhcPeriod.test.js @@ -24,6 +24,7 @@ const { pressElement, getTableDataSlice, checkMismatchingUrlParam, + expectColumnValues, } = require('../defaults'); const { expect } = chai; @@ -208,24 +209,12 @@ module.exports = () => { it('should successfuly apply data pass name filter', async () => { await goToPage(page, 'data-passes-per-lhc-period-overview', { queryParameters: { lhcPeriodId: 2 } }); - await waitForTimeout(100); - const filterToggleButton = await page.$('#openFilterToggle'); - expect(filterToggleButton).to.not.be.null; - - await filterToggleButton.evaluate((button) => button.click()); - await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(2) input[type=text]', 'LHC22b_apass1'); - - await waitForTimeout(100); - - let allDataPassesNames = await getColumnCellsInnerTexts(page, 'name'); - expect(allDataPassesNames).to.has.all.deep.members(['LHC22b_apass1']); + await pressElement(page, '#openFilterToggle'); + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22b_apass1'); - const resetFiltersButton = await page.$('#reset-filters'); - expect(resetFiltersButton).to.not.be.null; - await resetFiltersButton.evaluate((button) => button.click()); - await waitForTimeout(100); + await expectColumnValues(page, 'name', ['LHC22b_apass1']); - allDataPassesNames = await getColumnCellsInnerTexts(page, 'name'); - expect(allDataPassesNames).to.has.all.deep.members(['LHC22b_apass1', 'LHC22b_apass2']); + await pressElement(page, '#reset-filters'); + await expectColumnValues(page, 'name', ['LHC22b_apass2', 'LHC22b_apass1']); }); }; diff --git a/test/public/dataPasses/overviewPerSimulationPass.test.js b/test/public/dataPasses/overviewPerSimulationPass.test.js index 080602fe45..0fb1c72f66 100644 --- a/test/public/dataPasses/overviewPerSimulationPass.test.js +++ b/test/public/dataPasses/overviewPerSimulationPass.test.js @@ -127,7 +127,7 @@ module.exports = () => { await goToPage(page, 'data-passes-per-simulation-pass-overview', { queryParameters: { simulationPassId: 1 } }); await pressElement(page, '#openFilterToggle'); - await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(2) input[type=text]', 'LHC22b_apass1'); + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22b_apass1'); await expectColumnValues(page, 'name', ['LHC22b_apass1']); await pressElement(page, '#reset-filters'); diff --git a/test/public/defaults.js b/test/public/defaults.js index 1610afa4a7..71aee27cbb 100644 --- a/test/public/defaults.js +++ b/test/public/defaults.js @@ -442,7 +442,7 @@ module.exports.checkEnvironmentStatusColor = async (page, rowIndex, columnIndex) * @return {Promise} resolves once the value has been typed */ module.exports.fillInput = async (page, inputSelector, value, events = ['input']) => { - await page.waitForSelector(inputSelector); + await page.waitForSelector(inputSelector, { timeout: 500 }); await page.evaluate((inputSelector, value, events) => { const element = document.querySelector(inputSelector); element.value = value; diff --git a/test/public/lhcPeriods/overview.test.js b/test/public/lhcPeriods/overview.test.js index 145b005485..98e97a527d 100644 --- a/test/public/lhcPeriods/overview.test.js +++ b/test/public/lhcPeriods/overview.test.js @@ -20,6 +20,7 @@ const { testTableSortingByColumn, pressElement, expectColumnValues, + validateElement, validateTableData, } = require('../defaults'); const { waitForTimeout } = require('../defaults.js'); @@ -132,23 +133,29 @@ module.exports = () => { it('should successfuly apply lhc period name filter', async () => { await goToPage(page, 'lhc-period-overview'); await pressElement(page, '#openFilterToggle'); - await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(2) input[type=text]', 'LHC22a'); + await validateElement(page, '#reset-filters:disabled'); + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22a'); await expectColumnValues(page, 'name', ['LHC22a']); await pressElement(page, '#reset-filters'); await expectColumnValues(page, 'name', ['LHC23f', 'LHC22b', 'LHC22a']); + await validateElement(page, '#reset-filters:disabled'); }); it('should successfuly apply lhc period year filter', async () => { await goToPage(page, 'lhc-period-overview'); await pressElement(page, '#openFilterToggle'); - await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(3) input[type=text]', '2022'); + await validateElement(page, '#reset-filters:disabled'); + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(2) input[type=text]', '2022'); + await page.waitForSelector('#reset-filters:disabled', { hidden: true, timeout: 250 }); await expectColumnValues(page, 'year', ['2022', '2022']); }); it('should successfuly apply lhc period beam type filter', async () => { await goToPage(page, 'lhc-period-overview'); await pressElement(page, '#openFilterToggle'); - await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(4) input[type=text]', 'XeXe'); + await validateElement(page, '#reset-filters:disabled'); + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(3) input[type=text]', 'XeXe'); + await page.waitForSelector('#reset-filters:disabled', { hidden: true, timeout: 250 }); await expectColumnValues(page, 'beamTypes', ['XeXe']); }); }; diff --git a/test/public/simulationPasses/overviewPerLhcPeriod.test.js b/test/public/simulationPasses/overviewPerLhcPeriod.test.js index b4918d749e..2c57729bc8 100644 --- a/test/public/simulationPasses/overviewPerLhcPeriod.test.js +++ b/test/public/simulationPasses/overviewPerLhcPeriod.test.js @@ -137,10 +137,10 @@ module.exports = () => { await goToPage(page, 'simulation-passes-per-lhc-period-overview', { queryParameters: { lhcPeriodId: 1 } }); await pressElement(page, '#openFilterToggle'); - await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(2) input[type=text]', 'LHC23k6a'); + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC23k6a'); await expectColumnValues(page, 'name', ['LHC23k6a']); - await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(2) input[type=text]', 'LHC23k6a, LHC23k6b'); + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC23k6a, LHC23k6b'); await expectColumnValues(page, 'name', ['LHC23k6b', 'LHC23k6a']); }); };