From 607d218c4da081f6a02b6cb7826161b5207e882c Mon Sep 17 00:00:00 2001
From: EMaksy <emaksymenko@suse.com>
Date: Fri, 17 Jan 2025 17:14:39 +0100
Subject: [PATCH 1/2] Use by for custom deep compare

---
 assets/js/common/Select/Select.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/assets/js/common/Select/Select.jsx b/assets/js/common/Select/Select.jsx
index da2610bd83..fe1c06ea1e 100644
--- a/assets/js/common/Select/Select.jsx
+++ b/assets/js/common/Select/Select.jsx
@@ -4,13 +4,15 @@ import { Listbox, Transition } from '@headlessui/react';
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
 
 import classNames from 'classnames';
-import { find, get } from 'lodash';
+import { find, get, isEqual } from 'lodash';
 
 export const OPTION_ALL = 'all';
 
 const defaultOnChange = () => {};
 const defaultRenderOption = (item) => item.value;
 
+const deepCompareSelection=(optionValue, value) => isEqual(optionValue, value);
+
 function Select({
   optionsName,
   options,
@@ -42,6 +44,7 @@ function Select({
       disabled={disabled}
       value={value}
       onChange={onChange}
+      by={deepCompareSelection}
     >
       <div className="relative">
         <Listbox.Button

From d79e746549979892240372b6e32a5056523a0ca9 Mon Sep 17 00:00:00 2001
From: EMaksy <emaksymenko@suse.com>
Date: Tue, 21 Jan 2025 14:48:05 +0100
Subject: [PATCH 2/2] Enrich existing e2e test for the svg icon

---
 assets/js/common/Select/Select.jsx        |  3 ++-
 test/e2e/cypress/e2e/checks_catalog.cy.js | 15 ++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/assets/js/common/Select/Select.jsx b/assets/js/common/Select/Select.jsx
index fe1c06ea1e..eb509899ae 100644
--- a/assets/js/common/Select/Select.jsx
+++ b/assets/js/common/Select/Select.jsx
@@ -11,7 +11,8 @@ export const OPTION_ALL = 'all';
 const defaultOnChange = () => {};
 const defaultRenderOption = (item) => item.value;
 
-const deepCompareSelection=(optionValue, value) => isEqual(optionValue, value);
+const deepCompareSelection = (optionValue, value) =>
+  isEqual(optionValue, value);
 
 function Select({
   optionsName,
diff --git a/test/e2e/cypress/e2e/checks_catalog.cy.js b/test/e2e/cypress/e2e/checks_catalog.cy.js
index 187bee4051..20bf8a05cf 100644
--- a/test/e2e/cypress/e2e/checks_catalog.cy.js
+++ b/test/e2e/cypress/e2e/checks_catalog.cy.js
@@ -93,12 +93,15 @@ context('Checks catalog', () => {
   });
 
   describe('Filtering', () => {
+    const selectedIconSelector =
+      '.absolute.inset-y-0.right-2.end-1.flex.items-center.pl-3.text-green-600';
     const filteringScenarios = [
       {
         selectedFilters: [
           {
             dropdown: 'providers-selection-dropdown',
             option: 'AWS',
+            selectedIcon: selectedIconSelector,
           },
         ],
         expectedRequest: `${checksCatalogURL}?provider=aws`,
@@ -108,10 +111,12 @@ context('Checks catalog', () => {
           {
             dropdown: 'providers-selection-dropdown',
             option: 'AWS',
+            selectedIcon: selectedIconSelector,
           },
           {
             dropdown: 'targets-selection-dropdown',
             option: 'Clusters',
+            selectedIcon: selectedIconSelector,
           },
         ],
         expectedRequest: `${checksCatalogURL}?provider=aws&target_type=cluster`,
@@ -121,14 +126,17 @@ context('Checks catalog', () => {
           {
             dropdown: 'providers-selection-dropdown',
             option: 'AWS',
+            selectedIcon: selectedIconSelector,
           },
           {
             dropdown: 'targets-selection-dropdown',
             option: 'Clusters',
+            selectedIcon: selectedIconSelector,
           },
           {
             dropdown: 'cluster-types-selection-dropdown',
             option: 'HANA Scale Up Perf. Opt.',
+            selectedIcon: selectedIconSelector,
           },
         ],
         expectedRequest: `${checksCatalogURL}?provider=aws&target_type=cluster&cluster_type=hana_scale_up&hana_scenario=performance_optimized`,
@@ -138,14 +146,17 @@ context('Checks catalog', () => {
           {
             dropdown: 'providers-selection-dropdown',
             option: 'AWS',
+            selectedIcon: selectedIconSelector,
           },
           {
             dropdown: 'targets-selection-dropdown',
             option: 'Clusters',
+            selectedIcon: selectedIconSelector,
           },
           {
             dropdown: 'cluster-types-selection-dropdown',
             option: 'HANA Scale Up Cost Opt.',
+            selectedIcon: selectedIconSelector,
           },
         ],
         expectedRequest: `${checksCatalogURL}?provider=aws&target_type=cluster&cluster_type=hana_scale_up&hana_scenario=cost_optimized`,
@@ -157,8 +168,10 @@ context('Checks catalog', () => {
         cy.intercept(expectedRequest, {
           body: { items: catalog },
         }).as('request');
-        selectedFilters.forEach(({ dropdown, option }) => {
+        selectedFilters.forEach(({ dropdown, option, selectedIcon }) => {
           cy.get(`.${dropdown}`).click();
+          // test if the selected item has the green SVG icon rendered which shows the current selection
+          cy.get(selectedIcon).should('be.visible');
           cy.get(`.${dropdown}`).get('span').contains(option).click();
         });
         cy.wait('@request');