From 188a70f4140ae53298cd9a51b7484fa66a93b56d Mon Sep 17 00:00:00 2001
From: shadowusr <nikhakerlab@gmail.com>
Date: Fri, 23 Aug 2024 09:46:57 +0300
Subject: [PATCH] fix: fix review issues

---
 .../BrowsersSelect/index.module.css           | 14 ++++----
 .../components/BrowsersSelect/index.tsx       | 32 +++++++++----------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/lib/static/new-ui/features/suites/components/BrowsersSelect/index.module.css b/lib/static/new-ui/features/suites/components/BrowsersSelect/index.module.css
index 1249bcfab..a26b1766e 100644
--- a/lib/static/new-ui/features/suites/components/BrowsersSelect/index.module.css
+++ b/lib/static/new-ui/features/suites/components/BrowsersSelect/index.module.css
@@ -2,9 +2,9 @@
     z-index: 9999;
 }
 
-    .browserlist__filter {
-        padding: 4px;
-    }
+.browserlist__filter {
+    padding: 4px;
+}
 
 .action-button {
     width: 60px;
@@ -15,7 +15,7 @@
     --g-color-text-info: var(--g-color-private-color-500-solid);
 }
 
-    .browserlist__popup :global(.g-select-list__option) {
-        gap: 8px;
-        flex-direction: row-reverse;
-    }
+.browserlist__popup :global(.g-select-list__option) {
+    gap: 8px;
+    flex-direction: row-reverse;
+}
diff --git a/lib/static/new-ui/features/suites/components/BrowsersSelect/index.tsx b/lib/static/new-ui/features/suites/components/BrowsersSelect/index.tsx
index ac070eeef..31037b105 100644
--- a/lib/static/new-ui/features/suites/components/BrowsersSelect/index.tsx
+++ b/lib/static/new-ui/features/suites/components/BrowsersSelect/index.tsx
@@ -69,16 +69,18 @@ function BrowsersSelectInternal({browsers, filteredBrowsers, actions}: BrowsersS
         const browsersWithMultipleVersions = browsers.filter(browser => browser.versions.length > 1);
         const browsersWithSingleVersion = browsers.filter(browser => browser.versions.length === 1);
 
+        const getOptionProps = (browser: BrowserItem, version: string): {value: string; content: string; data: Record<string, unknown>} => ({
+            value: serializeBrowserData(browser.id, version),
+            content: browser.id,
+            data: {id: browser.id, version}
+        });
+
         if (browsersWithMultipleVersions.length === 0) {
             // If there are no browsers with multiple versions, we want to render a simple plain list
-            return browsers.map(browser => (
-                <Select.Option
-                    key={serializeBrowserData(browser.id, browser.versions[0])}
-                    value={serializeBrowserData(browser.id, browser.versions[0])}
-                    content={browser.id}
-                    data={{id: browser.id, version: browser.versions[0]}}
-                />
-            ));
+            return browsers.map(browser => <Select.Option
+                key={browser.id}
+                {...getOptionProps(browser, browser.versions[0])}
+            />);
         } else {
             // Otherwise render browser version groups and place all browsers with single version into "Other" group
             return (
@@ -87,10 +89,8 @@ function BrowsersSelectInternal({browsers, filteredBrowsers, actions}: BrowsersS
                         <Select.OptionGroup key={browser.id} label={browser.id}>
                             {browser.versions.map(version => (
                                 <Select.Option
-                                    key={serializeBrowserData(browser.id, version)}
-                                    value={serializeBrowserData(browser.id, version)}
-                                    content={`${browser.id} ${version}`}
-                                    data={{id: browser.id, version}}
+                                    key={version}
+                                    {...getOptionProps(browser, version)}
                                 />
                             ))}
                         </Select.OptionGroup>
@@ -98,10 +98,8 @@ function BrowsersSelectInternal({browsers, filteredBrowsers, actions}: BrowsersS
                     <Select.OptionGroup label="Other">
                         {browsersWithSingleVersion.map(browser => (
                             <Select.Option
-                                key={serializeBrowserData(browser.id, browser.versions[0])}
-                                value={serializeBrowserData(browser.id, browser.versions[0])}
-                                content={browser.id}
-                                data={{id: browser.id, version: browser.versions[0]}}
+                                key={browser.id}
+                                {...getOptionProps(browser, browser.versions[0])}
                             />
                         ))}
                     </Select.OptionGroup>
@@ -119,7 +117,7 @@ function BrowsersSelectInternal({browsers, filteredBrowsers, actions}: BrowsersS
     const selected = selectedBrowsers.flatMap(browser => browser.versions.map(version => serializeBrowserData(browser.id, version)));
 
     const onClose = (): void => {
-        actions.selectBrowsers(selectedBrowsers);
+        actions.selectBrowsers(selectedBrowsers.filter(browser => browser.versions.length > 0));
     };
 
     const onFocus = (): void => {