feat(search): Improve search dialog's & page's bar UI

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

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

@@ -13,39 +13,32 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import React, {
-  ChangeEvent,
-  KeyboardEvent,
-  useState,
-  useEffect,
-  useCallback,
-  forwardRef,
-  ComponentType,
-  ForwardRefExoticComponent,
-} from 'react';
-import useDebounce from 'react-use/lib/useDebounce';
-
-import {
-  InputBase,
-  InputBaseProps,
-  InputAdornment,
-  IconButton,
-} from '@material-ui/core';
-import SearchIcon from '@material-ui/icons/Search';
-import ClearButton from '@material-ui/icons/Clear';
-
 import {
   AnalyticsContext,
   configApiRef,
   useApi,
 } from '@backstage/core-plugin-api';
+import { IconButton, InputAdornment, TextField } from '@material-ui/core';
+import { TextFieldProps } from '@material-ui/core/TextField';
+import ClearButton from '@material-ui/icons/Clear';
+import SearchIcon from '@material-ui/icons/Search';
+import React, {
+  ChangeEvent,
+  ComponentType,
+  forwardRef,
+  ForwardRefExoticComponent,
+  KeyboardEvent,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import useDebounce from 'react-use/lib/useDebounce';
 
 import { SearchContextProvider, useSearch } from '../../context';
 import { TrackSearch } from '../SearchTracker';
 
 function withContext<T>(Component: ComponentType<T>) {
-  return forwardRef<unknown, T>((props, ref) => (
+  return forwardRef<HTMLDivElement, T>((props, ref) => (
     <SearchContextProvider inheritParentContextIfAvailable>
       <Component {...props} ref={ref} />
     </SearchContextProvider>
@@ -57,12 +50,13 @@ function withContext<T>(Component: ComponentType<T>) {
  *
  * @public
  */
-export type SearchBarBaseProps = Omit<InputBaseProps, 'onChange'> & {
+export type SearchBarBaseProps = Omit<TextFieldProps, 'onChange'> & {
   debounceTime?: number;
   clearButton?: boolean;
   onClear?: () => void;
   onSubmit?: () => void;
   onChange: (value: string) => void;
+  endAdornment?: React.ReactNode;
 };
 
 /**
@@ -109,7 +103,7 @@ export const SearchBarBase: ForwardRefExoticComponent<SearchBarBaseProps> =
       );
 
       const handleKeyDown = useCallback(
-        (e: KeyboardEvent<HTMLInputElement>) => {
+        (e: KeyboardEvent<HTMLDivElement>) => {
           if (onKeyDown) onKeyDown(e);
           if (onSubmit && e.key === 'Enter') {
             onSubmit();
@@ -147,14 +141,21 @@ export const SearchBarBase: ForwardRefExoticComponent<SearchBarBaseProps> =
 
       return (
         <TrackSearch>
-          <InputBase
+          <TextField
             data-testid="search-bar-next"
-            ref={ref}
+            variant="outlined"
+            margin="normal"
+            inputRef={ref}
             value={value}
-            placeholder={placeholder}
-            startAdornment={startAdornment}
-            endAdornment={clearButton ? endAdornment : defaultEndAdornment}
-            inputProps={{ 'aria-label': 'Search', ...defaultInputProps }}
+            label={placeholder}
+            InputProps={{
+              startAdornment,
+              endAdornment: clearButton ? endAdornment : defaultEndAdornment,
+            }}
+            inputProps={{
+              'aria-label': 'Search',
+              ...defaultInputProps,
+            }}
             fullWidth={fullWidth}
             onChange={handleChange}
             onKeyDown={handleKeyDown}