@backstage/plugin-search 0.5.0 → 0.5.4

package/dist/esm/{index-8e7d7ce9.esm.js → index-9ed6d72a.esm.js}

@@ -1,15 +1,17 @@
-import { createApiRef, useApi, configApiRef, createRouteRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, createRoutableExtension, createComponentExtension, useRouteRef } from '@backstage/core-plugin-api';
+import { createApiRef, useApi, AnalyticsContext, useAnalytics, configApiRef, createRouteRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, createRoutableExtension, createComponentExtension, useRouteRef } from '@backstage/core-plugin-api';
 import { ResponseError } from '@backstage/errors';
 import qs from 'qs';
 import * as React from 'react';
-import React__default, { createContext, useState, useCallback, useEffect, useContext } from 'react';
-import { ListItem, ListItemIcon, ListItemText, Box, Divider, makeStyles, IconButton, Typography, Card, CardHeader, Button, CardContent, Select, MenuItem, List, Checkbox, InputBase, InputAdornment, FormControl, FormLabel, FormControlLabel, InputLabel, Dialog, DialogTitle, Paper, DialogContent, Grid, DialogActions, Chip } from '@material-ui/core';
-import { Link, Progress, ResponseErrorPanel, EmptyState, Table, useQueryParamState, Page, Header, Content, SidebarSearchField } from '@backstage/core-components';
+import React__default, { createContext, useState, useCallback, useEffect, useContext, Fragment, cloneElement } from 'react';
 import FilterListIcon from '@material-ui/icons/FilterList';
-import { usePrevious, useAsync, useDebounce, useEffectOnce } from 'react-use';
+import { makeStyles, IconButton, Typography, Card, CardHeader, Button, Divider, CardContent, Select, MenuItem, List, ListItem, Checkbox, ListItemText, InputBase, InputAdornment, FormControl, FormLabel, FormControlLabel, InputLabel, ListItemIcon, Box, Dialog, DialogTitle, Paper, DialogContent, Grid, DialogActions, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab, Chip } from '@material-ui/core';
+import useDebounce from 'react-use/lib/useDebounce';
 import SearchIcon from '@material-ui/icons/Search';
 import ClearButton from '@material-ui/icons/Clear';
+import useAsync from 'react-use/lib/useAsync';
+import usePrevious from 'react-use/lib/usePrevious';
 import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
+import { Link, Progress, ResponseErrorPanel, EmptyState, Table, useQueryParamState, Page, Header, Content, SidebarSearchField } from '@backstage/core-components';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 import { createSvgIcon } from '@material-ui/core/utils';
@@ -19,11 +21,13 @@ import IconButton$1 from '@material-ui/core/IconButton';
 import { Alert } from '@material-ui/lab';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
+import useEffectOnce from 'react-use/lib/useEffectOnce';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import AllIcon from '@material-ui/icons/FontDownload';
 import { useNavigate } from 'react-router-dom';
 
 const searchApiRef = createApiRef({
-  id: "plugin.search.queryservice",
-  description: "Used to make requests against the search API"
+  id: "plugin.search.queryservice"
 });
 class SearchClient {
   constructor(options) {
@@ -35,7 +39,7 @@ class SearchClient {
     const queryString = qs.stringify(query);
     const url = `${await this.discoveryApi.getBaseUrl("search/query")}?${queryString}`;
     const response = await fetch(url, {
-      headers: token ? {Authorization: `Bearer ${token}`} : {}
+      headers: token ? { Authorization: `Bearer ${token}` } : {}
     });
     if (!response.ok) {
       throw await ResponseError.fromResponse(response);
@@ -44,25 +48,7 @@ class SearchClient {
   }
 }
 
-const DefaultResultListItem$1 = ({
-  result,
-  icon,
-  secondaryAction
-}) => {
-  return /* @__PURE__ */ React__default.createElement(Link, {
-    to: result.location
-  }, /* @__PURE__ */ React__default.createElement(ListItem, {
-    alignItems: "center"
-  }, icon && /* @__PURE__ */ React__default.createElement(ListItemIcon, null, icon), /* @__PURE__ */ React__default.createElement(ListItemText, {
-    primaryTypographyProps: {variant: "h6"},
-    primary: result.title,
-    secondary: result.text
-  }), secondaryAction && /* @__PURE__ */ React__default.createElement(Box, {
-    alignItems: "flex-end"
-  }, secondaryAction)), /* @__PURE__ */ React__default.createElement(Divider, null));
-};
-
-const useStyles$9 = makeStyles((theme) => ({
+const useStyles$b = makeStyles((theme) => ({
   filters: {
     width: "250px",
     display: "flex"
@@ -75,7 +61,7 @@ const FiltersButton$1 = ({
   numberOfSelectedFilters,
   handleToggleFilters
 }) => {
-  const classes = useStyles$9();
+  const classes = useStyles$b();
   return /* @__PURE__ */ React__default.createElement("div", {
     className: classes.filters
   }, /* @__PURE__ */ React__default.createElement(IconButton, {
@@ -87,7 +73,7 @@ const FiltersButton$1 = ({
   }, "Filters (", numberOfSelectedFilters ? numberOfSelectedFilters : 0, ")"));
 };
 
-const useStyles$8 = makeStyles((theme) => ({
+const useStyles$a = makeStyles((theme) => ({
   filters: {
     background: "transparent",
     boxShadow: "0px 0px 0px 0px"
@@ -106,7 +92,7 @@ const Filters$1 = ({
   updateSelected,
   updateChecked
 }) => {
-  const classes = useStyles$8();
+  const classes = useStyles$a();
   return /* @__PURE__ */ React__default.createElement(Card, {
     className: classes.filters
   }, /* @__PURE__ */ React__default.createElement(CardHeader, {
@@ -215,10 +201,12 @@ const SearchContextProvider = ({
     fetchNextPage: hasNextPage ? fetchNextPage : void 0,
     fetchPreviousPage: hasPreviousPage ? fetchPreviousPage : void 0
   };
-  return /* @__PURE__ */ React__default.createElement(SearchContext.Provider, {
+  return /* @__PURE__ */ React__default.createElement(AnalyticsContext, {
+    attributes: { searchTypes: types.sort().join(",") }
+  }, /* @__PURE__ */ React__default.createElement(SearchContext.Provider, {
     value,
     children
-  });
+  }));
 };
 const useSearch = () => {
   const context = useContext(SearchContext);
@@ -228,78 +216,97 @@ const useSearch = () => {
   return context;
 };
 
+const TrackSearch = ({ children }) => {
+  const analytics = useAnalytics();
+  const { term } = useSearch();
+  useEffect(() => {
+    if (term) {
+      analytics.captureEvent("search", term);
+    }
+  }, [analytics, term]);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
+};
+
+const useSearchContextCheck = () => {
+  const context = useContext(SearchContext);
+  return context !== void 0;
+};
 const SearchBarBase = ({
-  autoFocus,
-  value,
   onChange,
+  onKeyDown,
   onSubmit,
-  className,
-  placeholder: overridePlaceholder,
-  clearButton = true
+  debounceTime = 200,
+  clearButton = true,
+  fullWidth = true,
+  value: defaultValue,
+  inputProps: defaultInputProps = {},
+  endAdornment: defaultEndAdornment,
+  ...props
 }) => {
   const configApi = useApi(configApiRef);
-  const onKeyDown = React__default.useCallback((e) => {
+  const [value, setValue] = useState(defaultValue);
+  const hasSearchContext = useSearchContextCheck();
+  useEffect(() => {
+    setValue((prevValue) => prevValue !== defaultValue ? defaultValue : prevValue);
+  }, [defaultValue]);
+  useDebounce(() => onChange(value), debounceTime, [value]);
+  const handleChange = useCallback((e) => {
+    setValue(e.target.value);
+  }, [setValue]);
+  const handleKeyDown = useCallback((e) => {
+    if (onKeyDown)
+      onKeyDown(e);
     if (onSubmit && e.key === "Enter") {
       onSubmit();
     }
-  }, [onSubmit]);
-  const handleClear = React__default.useCallback(() => {
+  }, [onKeyDown, onSubmit]);
+  const handleClear = useCallback(() => {
     onChange("");
   }, [onChange]);
-  const placeholder = overridePlaceholder != null ? overridePlaceholder : `Search in ${configApi.getOptionalString("app.title") || "Backstage"}`;
-  return /* @__PURE__ */ React__default.createElement(InputBase, {
-    autoFocus,
+  const placeholder = `Search in ${configApi.getOptionalString("app.title") || "Backstage"}`;
+  const startAdornment = /* @__PURE__ */ React__default.createElement(InputAdornment, {
+    position: "start"
+  }, /* @__PURE__ */ React__default.createElement(IconButton, {
+    "aria-label": "Query",
+    disabled: true
+  }, /* @__PURE__ */ React__default.createElement(SearchIcon, null)));
+  const endAdornment = /* @__PURE__ */ React__default.createElement(InputAdornment, {
+    position: "end"
+  }, /* @__PURE__ */ React__default.createElement(IconButton, {
+    "aria-label": "Clear",
+    onClick: handleClear
+  }, /* @__PURE__ */ React__default.createElement(ClearButton, null)));
+  const searchBar = /* @__PURE__ */ React__default.createElement(TrackSearch, null, /* @__PURE__ */ React__default.createElement(InputBase, {
     "data-testid": "search-bar-next",
-    fullWidth: true,
-    placeholder,
     value,
-    onChange: (e) => onChange(e.target.value),
-    inputProps: {"aria-label": "Search"},
-    startAdornment: /* @__PURE__ */ React__default.createElement(InputAdornment, {
-      position: "start"
-    }, /* @__PURE__ */ React__default.createElement(IconButton, {
-      "aria-label": "Query",
-      disabled: true
-    }, /* @__PURE__ */ React__default.createElement(SearchIcon, null))),
-    endAdornment: clearButton && /* @__PURE__ */ React__default.createElement(InputAdornment, {
-      position: "end"
-    }, /* @__PURE__ */ React__default.createElement(IconButton, {
-      "aria-label": "Clear",
-      onClick: handleClear
-    }, /* @__PURE__ */ React__default.createElement(ClearButton, null))),
-    ...className && {className},
-    ...onSubmit && {onKeyDown}
-  });
+    placeholder,
+    startAdornment,
+    endAdornment: clearButton ? endAdornment : defaultEndAdornment,
+    inputProps: { "aria-label": "Search", ...defaultInputProps },
+    fullWidth,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    ...props
+  }));
+  return hasSearchContext ? searchBar : /* @__PURE__ */ React__default.createElement(SearchContextProvider, null, searchBar);
 };
-const SearchBar$1 = ({
-  autoFocus,
-  className,
-  debounceTime = 0,
-  placeholder,
-  clearButton = true
-}) => {
-  const {term, setTerm} = useSearch();
-  const [value, setValue] = useState(term);
-  useEffect(() => {
-    setValue((prevValue) => prevValue !== term ? term : prevValue);
-  }, [term]);
-  useDebounce(() => setTerm(value), debounceTime, [value]);
-  const handleQuery = (newValue) => {
-    setValue(newValue);
+const SearchBar$1 = ({ onChange, ...props }) => {
+  const { term, setTerm } = useSearch();
+  const handleChange = (newValue) => {
+    if (onChange) {
+      onChange(newValue);
+    } else {
+      setTerm(newValue);
+    }
   };
-  const handleClear = () => setValue("");
   return /* @__PURE__ */ React__default.createElement(SearchBarBase, {
-    autoFocus,
-    className,
-    value,
-    onChange: handleQuery,
-    onClear: handleClear,
-    placeholder,
-    clearButton
+    value: term,
+    onChange: handleChange,
+    ...props
   });
 };
 
-const useStyles$7 = makeStyles({
+const useStyles$9 = makeStyles({
   label: {
     textTransform: "capitalize"
   }
@@ -310,8 +317,8 @@ const CheckboxFilter = ({
   defaultValue,
   values = []
 }) => {
-  const classes = useStyles$7();
-  const {filters, setFilters} = useSearch();
+  const classes = useStyles$9();
+  const { filters, setFilters } = useSearch();
   useEffect(() => {
     if (Array.isArray(defaultValue)) {
       setFilters((prevFilters) => ({
@@ -322,13 +329,13 @@ const CheckboxFilter = ({
   }, []);
   const handleChange = (e) => {
     const {
-      target: {value, checked}
+      target: { value, checked }
     } = e;
     setFilters((prevFilters) => {
-      const {[name]: filter, ...others} = prevFilters;
+      const { [name]: filter, ...others } = prevFilters;
       const rest = (filter || []).filter((i) => i !== value);
       const items = checked ? [...rest, value] : rest;
-      return items.length ? {...others, [name]: items} : others;
+      return items.length ? { ...others, [name]: items } : others;
     });
   };
   return /* @__PURE__ */ React__default.createElement(FormControl, {
@@ -344,7 +351,7 @@ const CheckboxFilter = ({
       control: /* @__PURE__ */ React__default.createElement(Checkbox, {
         color: "primary",
         tabIndex: -1,
-        inputProps: {"aria-labelledby": value},
+        inputProps: { "aria-labelledby": value },
         value,
         name: value,
         onChange: handleChange,
@@ -360,8 +367,8 @@ const SelectFilter = ({
   defaultValue,
   values = []
 }) => {
-  const classes = useStyles$7();
-  const {filters, setFilters} = useSearch();
+  const classes = useStyles$9();
+  const { filters, setFilters } = useSearch();
   useEffect(() => {
     if (typeof defaultValue === "string") {
       setFilters((prevFilters) => ({
@@ -372,11 +379,11 @@ const SelectFilter = ({
   }, []);
   const handleChange = (e) => {
     const {
-      target: {value}
+      target: { value }
     } = e;
     setFilters((prevFilters) => {
-      const {[name]: filter, ...others} = prevFilters;
-      return value ? {...others, [name]: value} : others;
+      const { [name]: filter, ...others } = prevFilters;
+      return value ? { ...others, [name]: value } : others;
     });
   };
   return /* @__PURE__ */ React__default.createElement(FormControl, {
@@ -398,7 +405,7 @@ const SelectFilter = ({
     value
   }, value))));
 };
-const SearchFilter = ({component: Element, ...props}) => /* @__PURE__ */ React__default.createElement(Element, {
+const SearchFilter = ({ component: Element, ...props }) => /* @__PURE__ */ React__default.createElement(Element, {
   ...props
 });
 SearchFilter.Checkbox = (props) => /* @__PURE__ */ React__default.createElement(SearchFilter, {
@@ -415,9 +422,27 @@ var Launch = createSvgIcon( /*#__PURE__*/React.createElement("path", {
   d: "M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
 }), 'Launch');
 
-const SearchResultComponent = ({children}) => {
+const DefaultResultListItem$1 = ({
+  result,
+  icon,
+  secondaryAction
+}) => {
+  return /* @__PURE__ */ React__default.createElement(Link, {
+    to: result.location
+  }, /* @__PURE__ */ React__default.createElement(ListItem, {
+    alignItems: "center"
+  }, icon && /* @__PURE__ */ React__default.createElement(ListItemIcon, null, icon), /* @__PURE__ */ React__default.createElement(ListItemText, {
+    primaryTypographyProps: { variant: "h6" },
+    primary: result.title,
+    secondary: result.text
+  }), secondaryAction && /* @__PURE__ */ React__default.createElement(Box, {
+    alignItems: "flex-end"
+  }, secondaryAction)), /* @__PURE__ */ React__default.createElement(Divider, null));
+};
+
+const SearchResultComponent = ({ children }) => {
   const {
-    result: {loading, error, value}
+    result: { loading, error, value }
   } = useSearch();
   if (loading) {
     return /* @__PURE__ */ React__default.createElement(Progress, null);
@@ -434,10 +459,10 @@ const SearchResultComponent = ({children}) => {
       title: "Sorry, no results were found"
     });
   }
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children({results: value.results}));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children({ results: value.results }));
 };
 
-const useStyles$6 = makeStyles((theme) => ({
+const useStyles$8 = makeStyles((theme) => ({
   root: {
     display: "flex",
     justifyContent: "space-between",
@@ -446,8 +471,8 @@ const useStyles$6 = makeStyles((theme) => ({
   }
 }));
 const SearchResultPager = () => {
-  const {fetchNextPage, fetchPreviousPage} = useSearch();
-  const classes = useStyles$6();
+  const { fetchNextPage, fetchPreviousPage } = useSearch();
+  const classes = useStyles$8();
   if (!fetchNextPage && !fetchPreviousPage) {
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
   }
@@ -478,9 +503,9 @@ const searchPlugin = createPlugin({
   apis: [
     createApiFactory({
       api: searchApiRef,
-      deps: {discoveryApi: discoveryApiRef, identityApi: identityApiRef},
-      factory: ({discoveryApi, identityApi}) => {
-        return new SearchClient({discoveryApi, identityApi});
+      deps: { discoveryApi: discoveryApiRef, identityApi: identityApiRef },
+      factory: ({ discoveryApi, identityApi }) => {
+        return new SearchClient({ discoveryApi, identityApi });
       }
     })
   ],
@@ -491,58 +516,58 @@ const searchPlugin = createPlugin({
 });
 const SearchPage$1 = searchPlugin.provide(createRoutableExtension({
   name: "SearchPage",
-  component: () => import('./index-09bfa46d.esm.js').then((m) => m.SearchPage),
+  component: () => import('./index-5842ad6f.esm.js').then((m) => m.SearchPage),
   mountPoint: rootRouteRef
 }));
 const SearchPageNext = searchPlugin.provide(createRoutableExtension({
   name: "SearchPageNext",
-  component: () => import('./index-09bfa46d.esm.js').then((m) => m.SearchPage),
+  component: () => import('./index-5842ad6f.esm.js').then((m) => m.SearchPage),
   mountPoint: rootNextRouteRef
 }));
 searchPlugin.provide(createComponentExtension({
   name: "SearchBar",
   component: {
-    lazy: () => import('./index-1f69649c.esm.js').then((m) => m.SearchBar)
+    lazy: () => import('./index-05b04684.esm.js').then((m) => m.SearchBar)
   }
 }));
 const SearchBarNext = searchPlugin.provide(createComponentExtension({
   name: "SearchBarNext",
   component: {
-    lazy: () => import('./index-1f69649c.esm.js').then((m) => m.SearchBar)
+    lazy: () => import('./index-05b04684.esm.js').then((m) => m.SearchBar)
   }
 }));
 const SearchResult$1 = searchPlugin.provide(createComponentExtension({
   name: "SearchResult",
   component: {
-    lazy: () => import('./index-49a2f5d1.esm.js').then((m) => m.SearchResult)
+    lazy: () => import('./index-53fbff6a.esm.js').then((m) => m.SearchResult)
   }
 }));
 searchPlugin.provide(createComponentExtension({
   name: "SearchResultNext",
   component: {
-    lazy: () => import('./index-49a2f5d1.esm.js').then((m) => m.SearchResult)
+    lazy: () => import('./index-53fbff6a.esm.js').then((m) => m.SearchResult)
   }
 }));
 const SidebarSearchModal = searchPlugin.provide(createComponentExtension({
   name: "SidebarSearchModal",
   component: {
-    lazy: () => import('./index-859ff534.esm.js').then((m) => m.SidebarSearchModal)
+    lazy: () => import('./index-82c9eaed.esm.js').then((m) => m.SidebarSearchModal)
   }
 }));
 const DefaultResultListItem = searchPlugin.provide(createComponentExtension({
   name: "DefaultResultListItem",
   component: {
-    lazy: () => import('./index-b647c19e.esm.js').then((m) => m.DefaultResultListItem)
+    lazy: () => import('./index-da49c2d7.esm.js').then((m) => m.DefaultResultListItem)
   }
 }));
 const HomePageSearchBar = searchPlugin.provide(createComponentExtension({
   name: "HomePageSearchBar",
   component: {
-    lazy: () => import('./index-58cc0fcf.esm.js').then((m) => m.HomePageSearchBar)
+    lazy: () => import('./index-b090f4cf.esm.js').then((m) => m.HomePageSearchBar)
   }
 }));
 
-const useStyles$5 = makeStyles$1((theme) => ({
+const useStyles$7 = makeStyles$1((theme) => ({
   container: {
     borderRadius: 30,
     display: "flex",
@@ -551,26 +576,16 @@ const useStyles$5 = makeStyles$1((theme) => ({
   input: {
     flex: 1
   },
-  paperFullWidth: {height: "calc(100% - 128px)"},
-  dialogActionsContainer: {padding: theme.spacing(1, 3)},
-  viewResultsLink: {verticalAlign: "0.5em"}
+  paperFullWidth: { height: "calc(100% - 128px)" },
+  dialogActionsContainer: { padding: theme.spacing(1, 3) },
+  viewResultsLink: { verticalAlign: "0.5em" }
 }));
-const Modal = ({open = true, toggleModal}) => {
+const Modal = ({ open = true, toggleModal }) => {
   const getSearchLink = useRouteRef(rootRouteRef);
-  const classes = useStyles$5();
-  const {term, setTerm} = useSearch();
-  const [value, setValue] = useState(term);
-  useEffect(() => {
-    setValue((prevValue) => prevValue !== term ? term : prevValue);
-  }, [term]);
-  useDebounce(() => setTerm(value), 500, [value]);
-  const handleQuery = (newValue) => {
-    setValue(newValue);
-  };
-  const handleClear = () => setValue("");
+  const classes = useStyles$7();
+  const { term } = useSearch();
   const handleResultClick = () => {
     toggleModal();
-    handleClear();
   };
   const handleKeyPress = () => {
     handleResultClick();
@@ -586,11 +601,8 @@ const Modal = ({open = true, toggleModal}) => {
     maxWidth: "lg"
   }, /* @__PURE__ */ React__default.createElement(DialogTitle, null, /* @__PURE__ */ React__default.createElement(Paper, {
     className: classes.container
-  }, /* @__PURE__ */ React__default.createElement(SearchBarBase, {
-    className: classes.input,
-    value,
-    onChange: handleQuery,
-    onClear: handleClear
+  }, /* @__PURE__ */ React__default.createElement(SearchBar$1, {
+    className: classes.input
   }))), /* @__PURE__ */ React__default.createElement(DialogContent, null, /* @__PURE__ */ React__default.createElement(Grid, {
     container: true,
     direction: "row-reverse",
@@ -600,12 +612,12 @@ const Modal = ({open = true, toggleModal}) => {
     item: true
   }, /* @__PURE__ */ React__default.createElement(Link, {
     onClick: toggleModal,
-    to: `${getSearchLink()}?query=${value}`
+    to: `${getSearchLink()}?query=${term}`
   }, /* @__PURE__ */ React__default.createElement("span", {
     className: classes.viewResultsLink
   }, "View Full Results"), /* @__PURE__ */ React__default.createElement(Launch, {
     color: "primary"
-  })))), /* @__PURE__ */ React__default.createElement(Divider, null), /* @__PURE__ */ React__default.createElement(SearchResultComponent, null, ({results}) => /* @__PURE__ */ React__default.createElement(List, null, results.map(({document}) => /* @__PURE__ */ React__default.createElement("div", {
+  })))), /* @__PURE__ */ React__default.createElement(Divider, null), /* @__PURE__ */ React__default.createElement(SearchResultComponent, null, ({ results }) => /* @__PURE__ */ React__default.createElement(List, null, results.map(({ document }) => /* @__PURE__ */ React__default.createElement("div", {
     role: "button",
     tabIndex: 0,
     key: `${document.location}-btn`,
@@ -624,14 +636,14 @@ const Modal = ({open = true, toggleModal}) => {
     xs: 12
   }, /* @__PURE__ */ React__default.createElement(SearchResultPager, null)))));
 };
-const SearchModal = ({open = true, toggleModal}) => {
+const SearchModal = ({ open = true, toggleModal }) => {
   return /* @__PURE__ */ React__default.createElement(SearchContextProvider, null, /* @__PURE__ */ React__default.createElement(Modal, {
     open,
     toggleModal
   }));
 };
 
-const useStyles$4 = makeStyles$1(() => ({
+const useStyles$6 = makeStyles$1(() => ({
   root: {
     display: "flex",
     alignItems: "center"
@@ -645,7 +657,7 @@ const SearchBar = ({
   handleSearch,
   handleClearSearchBar
 }) => {
-  const classes = useStyles$4();
+  const classes = useStyles$6();
   return /* @__PURE__ */ React__default.createElement(Paper, {
     component: "form",
     onSubmit: (e) => handleSearch(e),
@@ -659,14 +671,14 @@ const SearchBar = ({
     placeholder: "Search in Backstage",
     value: searchQuery,
     onChange: (e) => handleSearch(e),
-    inputProps: {"aria-label": "search backstage"}
+    inputProps: { "aria-label": "search backstage" }
   }), /* @__PURE__ */ React__default.createElement(IconButton$1, {
     "aria-label": "search",
     onClick: () => handleClearSearchBar()
   }, /* @__PURE__ */ React__default.createElement(ClearButton, null)));
 };
 
-const useStyles$3 = makeStyles((theme) => ({
+const useStyles$5 = makeStyles((theme) => ({
   filters: {
     width: "250px",
     display: "flex"
@@ -679,7 +691,7 @@ const FiltersButton = ({
   numberOfSelectedFilters,
   handleToggleFilters
 }) => {
-  const classes = useStyles$3();
+  const classes = useStyles$5();
   return /* @__PURE__ */ React__default.createElement("div", {
     className: classes.filters
   }, /* @__PURE__ */ React__default.createElement(IconButton, {
@@ -691,7 +703,7 @@ const FiltersButton = ({
   }, "Filters (", numberOfSelectedFilters ? numberOfSelectedFilters : 0, ")"));
 };
 
-const useStyles$2 = makeStyles((theme) => ({
+const useStyles$4 = makeStyles((theme) => ({
   filters: {
     background: "transparent",
     boxShadow: "0px 0px 0px 0px"
@@ -710,7 +722,7 @@ const Filters = ({
   updateSelected,
   updateChecked
 }) => {
-  const classes = useStyles$2();
+  const classes = useStyles$4();
   return /* @__PURE__ */ React__default.createElement(Card, {
     className: classes.filters
   }, /* @__PURE__ */ React__default.createElement(CardHeader, {
@@ -764,7 +776,7 @@ const Filters = ({
   }))))));
 };
 
-const useStyles$1 = makeStyles((theme) => ({
+const useStyles$3 = makeStyles((theme) => ({
   searchQuery: {
     color: theme.palette.text.primary,
     background: theme.palette.background.default,
@@ -812,7 +824,7 @@ const TableHeader = ({
   numberOfResults,
   handleToggleFilters
 }) => {
-  const classes = useStyles$1();
+  const classes = useStyles$3();
   return /* @__PURE__ */ React__default.createElement("div", {
     className: classes.tableHeader
   }, /* @__PURE__ */ React__default.createElement(FiltersButton, {
@@ -832,7 +844,7 @@ const TableHeader = ({
     variant: "h6"
   }, `${numberOfResults} results`)));
 };
-const SearchResult = ({searchQuery}) => {
+const SearchResult = ({ searchQuery }) => {
   const catalogApi = useApi(catalogApiRef);
   const [showFilters, toggleFilters] = useState(false);
   const [selectedFilters, setSelectedFilters] = useState({
@@ -942,7 +954,7 @@ const SearchResult = ({searchQuery}) => {
     item: true,
     xs: showFilters ? 9 : 12
   }, /* @__PURE__ */ React__default.createElement(Table, {
-    options: {paging: true, pageSize: 20, search: false},
+    options: { paging: true, pageSize: 20, search: false },
     data: filteredResults,
     columns,
     title: /* @__PURE__ */ React__default.createElement(TableHeader, {
@@ -1007,7 +1019,7 @@ const UrlUpdater = () => {
     if (location.search === prevQueryParams) {
       return;
     }
-    const query = qs.parse(location.search.substring(1), {arrayLimit: 0}) || {};
+    const query = qs.parse(location.search.substring(1), { arrayLimit: 0 }) || {};
     if (query.filters) {
       setFilters(query.filters);
     }
@@ -1027,7 +1039,7 @@ const UrlUpdater = () => {
       types,
       pageCursor,
       filters
-    }, {arrayFormat: "brackets"});
+    }, { arrayFormat: "brackets" });
     const newUrl = `${window.location.pathname}?${newParams}`;
     window.history.replaceState(null, document.title, newUrl);
   }, [term, types, pageCursor, filters]);
@@ -1038,6 +1050,156 @@ const SearchPage = () => {
   return /* @__PURE__ */ React__default.createElement(SearchContextProvider, null, /* @__PURE__ */ React__default.createElement(UrlUpdater, null), outlet || /* @__PURE__ */ React__default.createElement(LegacySearchPage, null));
 };
 
+const useStyles$2 = makeStyles((theme) => ({
+  card: {
+    backgroundColor: "rgba(0, 0, 0, .11)"
+  },
+  cardContent: {
+    paddingTop: theme.spacing(1)
+  },
+  icon: {
+    color: theme.palette.common.black
+  },
+  list: {
+    width: "100%"
+  },
+  listItemIcon: {
+    width: "24px",
+    height: "24px"
+  },
+  accordion: {
+    backgroundColor: theme.palette.background.paper
+  },
+  accordionSummary: {
+    minHeight: "auto",
+    "&.Mui-expanded": {
+      minHeight: "auto"
+    }
+  },
+  accordionSummaryContent: {
+    margin: theme.spacing(2, 0),
+    "&.Mui-expanded": {
+      margin: theme.spacing(2, 0)
+    }
+  },
+  accordionDetails: {
+    padding: theme.spacing(0, 0, 1)
+  }
+}));
+const SearchTypeAccordion = (props) => {
+  const classes = useStyles$2();
+  const { setPageCursor, setTypes, types } = useSearch();
+  const [expanded, setExpanded] = useState(true);
+  const { defaultValue, name, types: givenTypes } = props;
+  const toggleExpanded = () => setExpanded((prevState) => !prevState);
+  const handleClick = (type) => {
+    return () => {
+      setTypes(type !== "" ? [type] : []);
+      setPageCursor(void 0);
+      setExpanded(false);
+    };
+  };
+  useEffect(() => {
+    if (defaultValue) {
+      setTypes([defaultValue]);
+    }
+  }, []);
+  const definedTypes = [
+    {
+      value: "",
+      name: "All",
+      icon: /* @__PURE__ */ React__default.createElement(AllIcon, null)
+    },
+    ...givenTypes
+  ];
+  const selected = types[0] || "";
+  return /* @__PURE__ */ React__default.createElement(Card, {
+    className: classes.card
+  }, /* @__PURE__ */ React__default.createElement(CardHeader, {
+    title: name,
+    titleTypographyProps: { variant: "overline" }
+  }), /* @__PURE__ */ React__default.createElement(CardContent, {
+    className: classes.cardContent
+  }, /* @__PURE__ */ React__default.createElement(Accordion, {
+    className: classes.accordion,
+    expanded,
+    onChange: toggleExpanded
+  }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
+    classes: {
+      root: classes.accordionSummary,
+      content: classes.accordionSummaryContent
+    },
+    expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, {
+      className: classes.icon
+    }),
+    IconButtonProps: { size: "small" }
+  }, expanded ? "Collapse" : definedTypes.filter((t) => t.value === selected)[0].name), /* @__PURE__ */ React__default.createElement(AccordionDetails, {
+    classes: { root: classes.accordionDetails }
+  }, /* @__PURE__ */ React__default.createElement(List, {
+    className: classes.list,
+    component: "nav",
+    "aria-label": "filter by type",
+    disablePadding: true,
+    dense: true
+  }, definedTypes.map((type) => /* @__PURE__ */ React__default.createElement(Fragment, {
+    key: type.value
+  }, /* @__PURE__ */ React__default.createElement(Divider, null), /* @__PURE__ */ React__default.createElement(ListItem, {
+    selected: types[0] === type.value || types.length === 0 && type.value === "",
+    onClick: handleClick(type.value),
+    button: true
+  }, /* @__PURE__ */ React__default.createElement(ListItemIcon, null, cloneElement(type.icon, {
+    className: classes.listItemIcon
+  })), /* @__PURE__ */ React__default.createElement(ListItemText, {
+    primary: type.name
+  })))))))));
+};
+
+const useStyles$1 = makeStyles((theme) => ({
+  tabs: {
+    borderBottom: `1px solid ${theme.palette.textVerySubtle}`,
+    padding: theme.spacing(0, 4)
+  },
+  tab: {
+    height: "50px",
+    fontWeight: theme.typography.fontWeightBold,
+    fontSize: theme.typography.pxToRem(13),
+    color: theme.palette.textSubtle,
+    minWidth: "130px"
+  }
+}));
+const SearchTypeTabs = (props) => {
+  const classes = useStyles$1();
+  const { setPageCursor, setTypes, types } = useSearch();
+  const { defaultValue, types: givenTypes } = props;
+  const changeTab = (_, newType) => {
+    setTypes(newType !== "" ? [newType] : []);
+    setPageCursor(void 0);
+  };
+  useEffect(() => {
+    if (defaultValue) {
+      setTypes([defaultValue]);
+    }
+  }, []);
+  const definedTypes = [
+    {
+      value: "",
+      name: "All"
+    },
+    ...givenTypes
+  ];
+  return /* @__PURE__ */ React__default.createElement(Tabs, {
+    className: classes.tabs,
+    indicatorColor: "primary",
+    value: types.length === 0 ? "" : types[0],
+    onChange: changeTab
+  }, definedTypes.map((type) => /* @__PURE__ */ React__default.createElement(Tab, {
+    className: classes.tab,
+    disableRipple: true,
+    label: type.name,
+    value: type.value
+  })));
+};
+
 const useStyles = makeStyles((theme) => ({
   label: {
     textTransform: "capitalize"
@@ -1051,14 +1213,10 @@ const useStyles = makeStyles((theme) => ({
     margin: 2
   }
 }));
-const SearchType = ({
-  values = [],
-  className,
-  name,
-  defaultValue
-}) => {
+const SearchType = (props) => {
+  const { className, defaultValue, name, values = [] } = props;
   const classes = useStyles();
-  const {types, setTypes} = useSearch();
+  const { types, setTypes } = useSearch();
   useEffectOnce(() => {
     if (!types.length) {
       if (defaultValue && Array.isArray(defaultValue)) {
@@ -1103,19 +1261,30 @@ const SearchType = ({
     primary: value
   })))));
 };
+SearchType.Accordion = (props) => {
+  return /* @__PURE__ */ React__default.createElement(SearchTypeAccordion, {
+    ...props
+  });
+};
+SearchType.Tabs = (props) => {
+  return /* @__PURE__ */ React__default.createElement(SearchTypeTabs, {
+    ...props
+  });
+};
 
-const SidebarSearch = () => {
+const SidebarSearch = (props) => {
   const searchRoute = useRouteRef(rootRouteRef);
   const navigate = useNavigate();
   const handleSearch = useCallback((query) => {
-    const queryString = qs.stringify({query}, {addQueryPrefix: true});
+    const queryString = qs.stringify({ query }, { addQueryPrefix: true });
     navigate(`${searchRoute()}${queryString}`);
   }, [navigate, searchRoute]);
   return /* @__PURE__ */ React__default.createElement(SidebarSearchField, {
+    icon: props.icon,
     onSearch: handleSearch,
     to: "/search"
   });
 };
 
 export { DefaultResultListItem$1 as D, Filters$1 as F, HomePageSearchBar as H, SearchPage as S, SearchBar$1 as a, SearchBarBase as b, SearchResultComponent as c, SearchModal as d, FiltersButton$1 as e, SearchContextProvider as f, SearchFilter as g, SearchFilterNext as h, SearchResultPager as i, SearchType as j, SidebarSearch as k, DefaultResultListItem as l, SearchBarNext as m, SearchPage$1 as n, SearchPageNext as o, searchPlugin as p, SearchResult$1 as q, rootRouteRef as r, searchApiRef as s, SidebarSearchModal as t, useSearch as u };
-//# sourceMappingURL=index-8e7d7ce9.esm.js.map
+//# sourceMappingURL=index-9ed6d72a.esm.js.map