UI: Add SearchBar component

Issue #3418 PR #3625
guardicore · Aug 28, 2023 · 42bbee1 · 42bbee1
1 parent 406d907
commit 42bbee1
Showing 1 changed file with 9 additions and 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
@@ -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>
   )