[O2B-1099] Move reset filter button on top of filter panel

lib/public/components/Filters/common/filtersPanelPopover.js

@@ -32,20 +32,28 @@
  *
  * @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.items-center.g3.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 @@
  * @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,
+    },
+);

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']);
     });
 };

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');

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;

test/public/lhcPeriods/overview.test.js

@@ -20,6 +20,7 @@ const {
     testTableSortingByColumn,
     pressElement,
     expectColumnValues,
+    validateElement,
 } = require('../defaults');
 const { waitForTimeout } = require('../defaults.js');
 
@@ -151,23 +152,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']);
     });
 };

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']);
     });
 };