refactor: apply review suggestions

Signed-off-by: Camila Belo <camilaibs@gmail.com>

plugins/techdocs/src/search/components/TechDocsSearch.tsx

@@ -15,29 +15,25 @@
  */
 
 import { CompoundEntityRef } from '@backstage/catalog-model';
+import { ResultHighlight } from '@backstage/plugin-search-common';
 import {
+  SearchAutocomplete,
   SearchContextProvider,
   useSearch,
 } from '@backstage/plugin-search-react';
-import {
-  makeStyles,
-  CircularProgress,
-  IconButton,
-  InputAdornment,
-  TextField,
-} from '@material-ui/core';
-import SearchIcon from '@material-ui/icons/Search';
-import Autocomplete from '@material-ui/lab/Autocomplete';
-import React, { ChangeEvent, useEffect, useState } from 'react';
+import { makeStyles, Paper } from '@material-ui/core';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
-import useDebounce from 'react-use/lib/useDebounce';
 import { TechDocsSearchResultListItem } from './TechDocsSearchResultListItem';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   root: {
     width: '100%',
   },
-});
+  bar: {
+    padding: theme.spacing(1),
+  },
+}));
 
 /**
  * Props for {@link TechDocsSearch}
@@ -62,6 +58,13 @@ type TechDocsDoc = {
 type TechDocsSearchResult = {
   type: string;
   document: TechDocsDoc;
+  highlight?: ResultHighlight;
+};
+
+const isTechDocsSearchResult = (
+  option: any,
+): option is TechDocsSearchResult => {
+  return option?.document;
 };
 
 const TechDocsSearchBar = (props: TechDocsSearchProps) => {
@@ -69,8 +72,6 @@ const TechDocsSearchBar = (props: TechDocsSearchProps) => {
   const [open, setOpen] = useState(false);
   const navigate = useNavigate();
   const {
-    term,
-    setTerm,
     setFilters,
     result: { loading, value: searchVal },
   } = useSearch();
@@ -91,10 +92,6 @@ const TechDocsSearchBar = (props: TechDocsSearchProps) => {
     };
   }, [loading, searchVal]);
 
-  const [value, setValue] = useState<string>(term);
-
-  useDebounce(() => setTerm(value), debounceTime, [value]);
-
   // Update the filter context when the entityId changes, e.g. when the search
   // bar continues to be rendered, navigating between different TechDocs sites.
   const { kind, name, namespace } = entityId;
@@ -109,82 +106,54 @@ const TechDocsSearchBar = (props: TechDocsSearchProps) => {
     });
   }, [kind, namespace, name, setFilters]);
 
-  const handleQuery = (e: ChangeEvent<HTMLInputElement>) => {
-    if (!open) {
-      setOpen(true);
-    }
-    setValue(e.target.value);
-  };
-
-  const handleSelection = (_: any, selection: TechDocsSearchResult | null) => {
-    if (selection?.document) {
+  const handleSelection = (
+    _: any,
+    selection: TechDocsSearchResult | string | null,
+  ) => {
+    if (isTechDocsSearchResult(selection)) {
       const { location } = selection.document;
       navigate(location);
     }
   };
 
   return (
-    <Autocomplete
-      classes={{ root: classes.root }}
-      data-testid="techdocs-search-bar"
-      size="small"
-      open={open}
-      getOptionLabel={() => ''}
-      filterOptions={x => {
-        return x; // This is needed to get renderOption to be called after options change. Bug in material-ui?
-      }}
-      onClose={() => {
-        setOpen(false);
-      }}
-      onFocus={() => {
-        setOpen(true);
-      }}
-      onChange={handleSelection}
-      blurOnSelect
-      noOptionsText="No results found"
-      value={null}
-      options={options}
-      renderOption={({ document, highlight }) => (
-        <TechDocsSearchResultListItem
-          result={document}
-          lineClamp={3}
-          asListItem={false}
-          asLink={false}
-          title={document.title}
-          highlight={highlight}
-        />
-      )}
-      loading={loading}
-      renderInput={params => (
-        <TextField
-          {...params}
-          data-testid="techdocs-search-bar-input"
-          variant="outlined"
-          fullWidth
-          placeholder={`Search ${entityTitle || entityId.name} docs`}
-          value={value}
-          onChange={handleQuery}
-          InputProps={{
-            ...params.InputProps,
-            startAdornment: (
-              <InputAdornment position="start">
-                <IconButton aria-label="Query" disabled>
-                  <SearchIcon />
-                </IconButton>
-              </InputAdornment>
-            ),
-            endAdornment: (
-              <React.Fragment>
-                {loading ? (
-                  <CircularProgress color="inherit" size={20} />
-                ) : null}
-                {params.InputProps.endAdornment}
-              </React.Fragment>
-            ),
-          }}
-        />
-      )}
-    />
+    <Paper className={classes.bar} variant="outlined">
+      <SearchAutocomplete
+        classes={{ root: classes.root }}
+        data-testid="techdocs-search-bar"
+        size="small"
+        open={open}
+        getOptionLabel={() => ''}
+        filterOptions={x => {
+          return x; // This is needed to get renderOption to be called after options change. Bug in material-ui?
+        }}
+        onClose={() => {
+          setOpen(false);
+        }}
+        onFocus={() => {
+          setOpen(true);
+        }}
+        onChange={handleSelection}
+        blurOnSelect
+        noOptionsText="No results found"
+        value={null}
+        options={options}
+        renderOption={({ document, highlight }) => (
+          <TechDocsSearchResultListItem
+            result={document}
+            lineClamp={3}
+            asListItem={false}
+            asLink={false}
+            title={document.title}
+            highlight={highlight}
+          />
+        )}
+        loading={loading}
+        inputDebounceTime={debounceTime}
+        inputPlaceholder={`Search ${entityTitle || entityId.name} docs`}
+        freeSolo={false}
+      />
+    </Paper>
   );
 };