[O2B-1490] Add filtering by env ids to the environment filtering panel (#2028)

* Add filtering panel to environment overview
* Integrated the filtersPanelPopover component into the environment overview UI.
* Added a test to verify that the filtering panel can be successfully opened.
* This is because test inputs following each other that result in the same number of rows in the table will cause incorrect functioning of the waitForTableLength whose job it is is to wait for the filter to be applied.

Author: isaachilly

lib/public/views/Environments/ActiveColumns/environmentsActiveColumns.js

@@ -24,6 +24,7 @@ import { environmentStatusHistoryLegendComponent } from '../../../components/env
 import { infoTooltip } from '../../../components/common/popover/infoTooltip.js';
 import { aliEcsEnvironmentLinkComponent } from '../../../components/common/externalLinks/aliEcsEnvironmentLinkComponent.js';
 import { StatusAcronym } from '../../../domain/enums/statusAcronym.mjs';
+import { rawTextFilter } from '../../../components/Filters/common/filters/rawTextFilter.js';
 
 /**
  * List of active columns for a generic Environments component
@@ -53,6 +54,17 @@ export const environmentsActiveColumns = {
             ],
             '125px',
         ),
+
+        /**
+         * Environment IDs filter component
+         *
+         * @param {EnvironmentOverviewModel} environmentOverviewModel the environment overview model
+         * @return {Component} the filter component
+         */
+        filter: (environmentOverviewModel) => rawTextFilter(
+            environmentOverviewModel.filteringModel.get('ids'),
+            { classes: ['w-100'], placeholder: 'e.g. CmCvjNbg, TDI59So3d...' },
+        ),
     },
     runs: {
         name: 'Runs',

lib/public/views/Environments/Overview/EnvironmentOverviewModel.js

@@ -14,6 +14,7 @@
 import { buildUrl } from '/js/src/index.js';
 import { FilteringModel } from '../../../components/Filters/common/FilteringModel.js';
 import { OverviewPageModel } from '../../../models/OverviewModel.js';
+import { RawTextFilterModel } from '../../../components/Filters/common/filters/RawTextFilterModel.js';
 import { debounce } from '../../../utilities/debounce.js';
 
 /**
@@ -28,6 +29,7 @@ export class EnvironmentOverviewModel extends OverviewPageModel {
         super();
 
         this._filteringModel = new FilteringModel({
+            ids: new RawTextFilterModel(),
         });
 
         this._filteringModel.observe(() => this._applyFilters(true));

test/public/envs/overview.test.js

@@ -26,6 +26,9 @@ const {
     getPopoverSelector,
     goToPage,
     openFilteringPanel,
+    fillInput,
+    expectAttributeValue,
+    resetFilters,
 } = require('../defaults.js');
 const dateAndTime = require('date-and-time');
 const { resetDatabaseContent } = require('../../utilities/resetDatabaseContent.js');
@@ -290,4 +293,31 @@ module.exports = () => {
         await openFilteringPanel(page);
         await page.waitForSelector(filterPanelSelector, { visible: true });
     });
+
+    it('should successfully filter environments by their IDs', async () => {
+        /**
+         * This is the sequence to test filtering the environments on IDs.
+         *
+         * @param {string} selector the filter input selector
+         * @param {string} inputValue the value to type in the filter input
+         * @param {string[]} expectedIds the list of expected environment IDs after filtering
+         * @return {void}
+         */
+        const filterOnID = async (selector, inputValue, expectedIds) => {
+            await fillInput(page, selector, inputValue, ['change']);
+            await waitForTableLength(page, expectedIds.length);
+            expect(await page.$$eval('tbody tr', (rows) => rows.map((row) => row.id))).to.eql(expectedIds.map(id => `row${id}`));
+        };
+
+        await expectAttributeValue(page, '.id-filter input', 'placeholder', 'e.g. CmCvjNbg, TDI59So3d...');
+
+        await filterOnID('.id-filter input', 'CmCvjNbg', ['CmCvjNbg']);
+        await resetFilters(page);
+
+        await filterOnID('.id-filter input', 'CmCvjNbg, TDI59So3d', ['CmCvjNbg', 'TDI59So3d']);
+        await resetFilters(page);
+
+        await filterOnID('.id-filter input', 'j', ['CmCvjNbg', 'GIDO1jdkD', '8E4aZTjY', 'Dxi029djX']);
+        await resetFilters(page);
+    });
 };