refactor(plugins/search): make components more stylable

Signed-off-by: Camila Belo <camilaibs@gmail.com>
Signed-off-by: Eric Peterson <ericpeterson@spotify.com>

plugins/search/src/components/SearchBarNext/SearchBarNext.tsx

@@ -16,64 +16,52 @@
 
 import React, { ChangeEvent, useState } from 'react';
 import { useDebounce } from 'react-use';
-import {
-  Theme,
-  Paper,
-  InputBase,
-  InputAdornment,
-  IconButton,
-  makeStyles,
-} from '@material-ui/core';
+import { InputBase, InputAdornment, IconButton } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 import ClearButton from '@material-ui/icons/Clear';
 
 import { useSearch } from '../SearchContext';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: theme.spacing(0, 0, 0, 1.5),
-  },
-  input: {
-    flex: 1,
-  },
-}));
-
 type Props = {
+  className?: string;
   debounceTime?: number;
 };
 
-export const SearchBarNext = ({ debounceTime = 0 }: Props) => {
-  const classes = useStyles();
+export const SearchBarNext = ({ className, debounceTime = 0 }: Props) => {
   const { term, setTerm } = useSearch();
   const [value, setValue] = useState<string>(term);
 
   useDebounce(() => setTerm(value), debounceTime, [value]);
 
-  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleQuery = (e: ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value);
   };
 
   const handleClear = () => setValue('');
 
   return (
-    <Paper component="form" className={classes.root}>
-      <InputBase
-        className={classes.input}
-        placeholder="Search in Backstage"
-        value={value}
-        onChange={handleSearch}
-        inputProps={{ 'aria-label': 'Search term' }}
-        startAdornment={
-          <InputAdornment position="start">
+    <InputBase
+      className={className}
+      data-testid="search-bar-next"
+      fullWidth
+      placeholder="Search in Backstage"
+      value={value}
+      onChange={handleQuery}
+      inputProps={{ 'aria-label': 'Search term' }}
+      startAdornment={
+        <InputAdornment position="start">
+          <IconButton aria-label="Query term" disabled>
             <SearchIcon />
-          </InputAdornment>
-        }
-      />
-      <IconButton aria-label="Clear term" onClick={handleClear}>
-        <ClearButton />
-      </IconButton>
-    </Paper>
+          </IconButton>
+        </InputAdornment>
+      }
+      endAdornment={
+        <InputAdornment position="end">
+          <IconButton aria-label="Clear term" onClick={handleClear}>
+            <ClearButton />
+          </IconButton>
+        </InputAdornment>
+      }
+    />
   );
 };

plugins/search/src/components/SearchFilterNext/SearchFilterNext.tsx

@@ -35,6 +35,7 @@ const useStyles = makeStyles({
 });
 
 export type Component = {
+  className?: string;
   name: string;
   values?: string[];
   defaultValue?: string[] | string | null;
@@ -45,7 +46,12 @@ export type Props = Component & {
   debug?: boolean;
 };
 
-const CheckboxFilter = ({ name, defaultValue, values = [] }: Component) => {
+const CheckboxFilter = ({
+  className,
+  name,
+  defaultValue,
+  values = [],
+}: Component) => {
   const classes = useStyles();
   const { filters, setFilters } = useSearch();
 
@@ -72,7 +78,11 @@ const CheckboxFilter = ({ name, defaultValue, values = [] }: Component) => {
   };
 
   return (
-    <FormControl>
+    <FormControl
+      className={className}
+      fullWidth
+      data-testid="search-checkboxfilter-next"
+    >
       <FormLabel className={classes.label}>{name}</FormLabel>
       {values.map((value: string) => (
         <FormControlLabel
@@ -95,7 +105,12 @@ const CheckboxFilter = ({ name, defaultValue, values = [] }: Component) => {
   );
 };
 
-const SelectFilter = ({ name, defaultValue, values = [] }: Component) => {
+const SelectFilter = ({
+  className,
+  name,
+  defaultValue,
+  values = [],
+}: Component) => {
   const classes = useStyles();
   const { filters, setFilters } = useSearch();
 
@@ -120,7 +135,12 @@ const SelectFilter = ({ name, defaultValue, values = [] }: Component) => {
   };
 
   return (
-    <FormControl variant="filled" fullWidth>
+    <FormControl
+      className={className}
+      variant="filled"
+      fullWidth
+      data-testid="search-selectfilter-next"
+    >
       <InputLabel className={classes.label} margin="dense">
         {name}
       </InputLabel>