From 42bbee121ac93b135876c084915ccff310338709 Mon Sep 17 00:00:00 2001
From: ordabach <odabach@akamai.com>
Date: Mon, 28 Aug 2023 21:51:13 +0000
Subject: [PATCH] UI: Add SearchBar component

Issue #3418
PR #3625
---
 .../src/components/ui-components/SearchBar.js | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/SearchBar.js b/monkey/monkey_island/cc/ui/src/components/ui-components/SearchBar.js
index 0bcbde27150..3258c88d582 100644
--- a/monkey/monkey_island/cc/ui/src/components/ui-components/SearchBar.js
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/SearchBar.js
@@ -5,8 +5,11 @@ import ClearIcon from '@mui/icons-material/Clear';
 import {nanoid} from 'nanoid';
 
 const EMPTY_STRING = '';
+const DEFAULT_VARIANT = 'standard';
+const DEFAULT_PLACEHOLDER = 'Search';
+const DEFAULT_LABEL = 'Search';
 const SearchBar = (props) => {
-  const {variant = 'standard', label, placeholder = 'Search', setQuery} = {...props};
+  const {variant = DEFAULT_VARIANT, label = DEFAULT_LABEL, placeholder = DEFAULT_PLACEHOLDER, setQuery} = {...props};
   const [currentValue, setCurrentValue] = useState(EMPTY_STRING);
 
   useEffect(() => {
@@ -23,28 +26,22 @@ const SearchBar = (props) => {
   }
 
   return (
-    <Box>
+    <Box className="search-bar-wrapper">
       <TextField id={`search-bar-${nanoid()}`}
+                 fullWidth
                  variant={variant}
                  label={label}
                  value={currentValue}
                  placeholder={placeholder}
                  onChange={handleValueChange}
                  InputProps={{
-                   startAdornment: (
-                     <InputAdornment position="start">
+                   startAdornment: (<InputAdornment position="start">
                        <SearchIcon/>
-                     </InputAdornment>
-                   ),
-                   endAdornment: (
-                     currentValue !== '' && (
-                       <InputAdornment position="end">
+                     </InputAdornment>), endAdornment: (currentValue !== '' && (<InputAdornment position="end">
                          <IconButton onClick={clearValue}>
                            <ClearIcon/>
                          </IconButton>
-                       </InputAdornment>
-                     )
-                   )
+                       </InputAdornment>))
                  }}/>
     </Box>
   )