feature(plugin-search-react): Extend InputProps on <SearchBar/>

In the current implementation of <SearchBar/> it is possible to
overwrite the default <TextField/> InputProps by passing a prop of the
same name. But sometimes is necessary to extend only, for example when
one is interested on changing the clear button only.
The clear button is supplied in the endAdornment, part of the
InputProps, but at the same time the startAdornment is also on it.
To be able to replace the clear button implementation without affecting
the rest, this patch proposes a change where `InputProps` is exposed in
the same manner as `inputProps` (notice the change from capital I to i).
Where the received object may overwrite keys using the spread operator.

Signed-off-by: Renan Mendes Carvalho <aitherios@gmail.com>

.changeset/ninety-mugs-sin.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-search-react': minor
+---
+
+<SearchBar/> accepts InputProp property that can override keys from default

plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx

@@ -92,13 +92,18 @@ const useStyles = makeStyles({
     borderRadius: '50px',
     margin: 'auto',
   },
+  notchedOutline: {
+    borderStyle: 'none',
+  },
 });
 
 export const CustomStyles = () => {
   const classes = useStyles();
   return (
     <Paper className={classes.search}>
-      <SearchBar />
+      <SearchBar
+        InputProps={{ classes: { notchedOutline: classes.notchedOutline } }}
+      />
     </Paper>
   );
 };

plugins/search-react/src/components/SearchBar/SearchBar.tsx

@@ -80,7 +80,8 @@ export const SearchBarBase: ForwardRefExoticComponent<SearchBarBaseProps> =
         value: defaultValue,
         label,
         placeholder,
-        inputProps: defaultInputProps = {},
+        inputProps = {},
+        InputProps = {},
         endAdornment,
         ...rest
       } = props;
@@ -168,10 +169,11 @@ export const SearchBarBase: ForwardRefExoticComponent<SearchBarBaseProps> =
               endAdornment: clearButton
                 ? clearButtonEndAdornment
                 : endAdornment,
+              ...InputProps,
             }}
             inputProps={{
               'aria-label': ariaLabel,
-              ...defaultInputProps,
+              ...inputProps,
             }}
             fullWidth={fullWidth}
             onChange={handleChange}