@backstage/plugin-search 0.5.1 → 0.5.2

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @backstage/plugin-search
 
+## 0.5.2
+
+### Patch Changes
+
+- 3d98955c8a: Add Optional Props to Override Icon for SidebarSearch and SidebarSearchModal Component
+- 49a696d720: Standardizes the component used as a search box in the search modal and in the composable home page.
+
+  After these changes, all search boxes exported by the search plugin are based on the `<SearchBarBase />` component, and this one is based on the `<InputBase />` component of the Material UI. This means that when you use SearchBarBase or one of its derived components (like `SearchBar` and `HomePageSearchBar`) you can pass all properties accepted by InputBase that have not been replaced by the props type of those components.
+
+  For example:
+
+  ```jsx
+  <SearchInputBase color="secondary" debouceTime={500} />
+  ```
+
+  The `color` property is inherited from `InputBaseProps` type and `debouceTime` defined by `SearchBarBaseProps`.
+
+- 7a4bd2ceac: Prefer using `Link` from `@backstage/core-components` rather than material-UI.
+- Updated dependencies
+  - @backstage/core-plugin-api@0.4.0
+  - @backstage/plugin-catalog-react@0.6.8
+  - @backstage/core-components@0.8.2
+
 ## 0.5.1
 
 ### Patch Changes

package/dist/esm/{index-04d32ed0.esm.js → index-0a2fab21.esm.js}

@@ -1,4 +1,4 @@
-export { S as SearchPage } from './index-893ec2f5.esm.js';
+export { S as SearchPage } from './index-655809db.esm.js';
 import '@backstage/core-plugin-api';
 import '@backstage/errors';
 import 'qs';
@@ -20,4 +20,4 @@ import '@material-ui/lab';
 import '@backstage/plugin-catalog-react';
 import '@backstage/catalog-model';
 import 'react-router-dom';
-//# sourceMappingURL=index-04d32ed0.esm.js.map
+//# sourceMappingURL=index-0a2fab21.esm.js.map

package/dist/esm/index-0a2fab21.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-0a2fab21.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/{index-e9bf7392.esm.js → index-18219c65.esm.js}

@@ -1,4 +1,4 @@
-export { D as DefaultResultListItem } from './index-893ec2f5.esm.js';
+export { D as DefaultResultListItem } from './index-655809db.esm.js';
 import '@backstage/core-plugin-api';
 import '@backstage/errors';
 import 'qs';
@@ -20,4 +20,4 @@ import '@material-ui/lab';
 import '@backstage/plugin-catalog-react';
 import '@backstage/catalog-model';
 import 'react-router-dom';
-//# sourceMappingURL=index-e9bf7392.esm.js.map
+//# sourceMappingURL=index-18219c65.esm.js.map

package/dist/esm/index-18219c65.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-18219c65.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/{index-3cbe4558.esm.js → index-2a318193.esm.js}

@@ -1,4 +1,4 @@
-export { c as SearchResult } from './index-893ec2f5.esm.js';
+export { c as SearchResult } from './index-655809db.esm.js';
 import '@backstage/core-plugin-api';
 import '@backstage/errors';
 import 'qs';
@@ -20,4 +20,4 @@ import '@material-ui/lab';
 import '@backstage/plugin-catalog-react';
 import '@backstage/catalog-model';
 import 'react-router-dom';
-//# sourceMappingURL=index-3cbe4558.esm.js.map
+//# sourceMappingURL=index-2a318193.esm.js.map

package/dist/esm/index-2a318193.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-2a318193.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/{index-893ec2f5.esm.js → index-655809db.esm.js}

@@ -22,8 +22,7 @@ import { ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
 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) {
@@ -62,7 +61,7 @@ const DefaultResultListItem$1 = ({
   }, secondaryAction)), /* @__PURE__ */ React__default.createElement(Divider, null));
 };
 
-const useStyles$9 = makeStyles((theme) => ({
+const useStyles$a = makeStyles((theme) => ({
   filters: {
     width: "250px",
     display: "flex"
@@ -75,7 +74,7 @@ const FiltersButton$1 = ({
   numberOfSelectedFilters,
   handleToggleFilters
 }) => {
-  const classes = useStyles$9();
+  const classes = useStyles$a();
   return /* @__PURE__ */ React__default.createElement("div", {
     className: classes.filters
   }, /* @__PURE__ */ React__default.createElement(IconButton, {
@@ -87,7 +86,7 @@ const FiltersButton$1 = ({
   }, "Filters (", numberOfSelectedFilters ? numberOfSelectedFilters : 0, ")"));
 };
 
-const useStyles$8 = makeStyles((theme) => ({
+const useStyles$9 = makeStyles((theme) => ({
   filters: {
     background: "transparent",
     boxShadow: "0px 0px 0px 0px"
@@ -106,7 +105,7 @@ const Filters$1 = ({
   updateSelected,
   updateChecked
 }) => {
-  const classes = useStyles$8();
+  const classes = useStyles$9();
   return /* @__PURE__ */ React__default.createElement(Card, {
     className: classes.filters
   }, /* @__PURE__ */ React__default.createElement(CardHeader, {
@@ -229,77 +228,77 @@ const useSearch = () => {
 };
 
 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);
+  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"}`;
+  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)));
   return /* @__PURE__ */ React__default.createElement(InputBase, {
-    autoFocus,
     "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
   });
 };
-const SearchBar$1 = ({
-  autoFocus,
-  className,
-  debounceTime = 0,
-  placeholder,
-  clearButton = true
-}) => {
+const SearchBar$1 = ({ onChange, ...props }) => {
   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 handleChange = (newValue) => {
+    setTerm(newValue);
+    if (onChange)
+      onChange(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$8 = makeStyles({
   label: {
     textTransform: "capitalize"
   }
@@ -310,7 +309,7 @@ const CheckboxFilter = ({
   defaultValue,
   values = []
 }) => {
-  const classes = useStyles$7();
+  const classes = useStyles$8();
   const { filters, setFilters } = useSearch();
   useEffect(() => {
     if (Array.isArray(defaultValue)) {
@@ -360,7 +359,7 @@ const SelectFilter = ({
   defaultValue,
   values = []
 }) => {
-  const classes = useStyles$7();
+  const classes = useStyles$8();
   const { filters, setFilters } = useSearch();
   useEffect(() => {
     if (typeof defaultValue === "string") {
@@ -437,7 +436,7 @@ const SearchResultComponent = ({ children }) => {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children({ results: value.results }));
 };
 
-const useStyles$6 = makeStyles((theme) => ({
+const useStyles$7 = makeStyles((theme) => ({
   root: {
     display: "flex",
     justifyContent: "space-between",
@@ -447,7 +446,7 @@ const useStyles$6 = makeStyles((theme) => ({
 }));
 const SearchResultPager = () => {
   const { fetchNextPage, fetchPreviousPage } = useSearch();
-  const classes = useStyles$6();
+  const classes = useStyles$7();
   if (!fetchNextPage && !fetchPreviousPage) {
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
   }
@@ -491,58 +490,58 @@ const searchPlugin = createPlugin({
 });
 const SearchPage$1 = searchPlugin.provide(createRoutableExtension({
   name: "SearchPage",
-  component: () => import('./index-04d32ed0.esm.js').then((m) => m.SearchPage),
+  component: () => import('./index-0a2fab21.esm.js').then((m) => m.SearchPage),
   mountPoint: rootRouteRef
 }));
 const SearchPageNext = searchPlugin.provide(createRoutableExtension({
   name: "SearchPageNext",
-  component: () => import('./index-04d32ed0.esm.js').then((m) => m.SearchPage),
+  component: () => import('./index-0a2fab21.esm.js').then((m) => m.SearchPage),
   mountPoint: rootNextRouteRef
 }));
 searchPlugin.provide(createComponentExtension({
   name: "SearchBar",
   component: {
-    lazy: () => import('./index-bfe6f2c6.esm.js').then((m) => m.SearchBar)
+    lazy: () => import('./index-d5ddea91.esm.js').then((m) => m.SearchBar)
   }
 }));
 const SearchBarNext = searchPlugin.provide(createComponentExtension({
   name: "SearchBarNext",
   component: {
-    lazy: () => import('./index-bfe6f2c6.esm.js').then((m) => m.SearchBar)
+    lazy: () => import('./index-d5ddea91.esm.js').then((m) => m.SearchBar)
   }
 }));
 const SearchResult$1 = searchPlugin.provide(createComponentExtension({
   name: "SearchResult",
   component: {
-    lazy: () => import('./index-3cbe4558.esm.js').then((m) => m.SearchResult)
+    lazy: () => import('./index-2a318193.esm.js').then((m) => m.SearchResult)
   }
 }));
 searchPlugin.provide(createComponentExtension({
   name: "SearchResultNext",
   component: {
-    lazy: () => import('./index-3cbe4558.esm.js').then((m) => m.SearchResult)
+    lazy: () => import('./index-2a318193.esm.js').then((m) => m.SearchResult)
   }
 }));
 const SidebarSearchModal = searchPlugin.provide(createComponentExtension({
   name: "SidebarSearchModal",
   component: {
-    lazy: () => import('./index-ca07a7cd.esm.js').then((m) => m.SidebarSearchModal)
+    lazy: () => import('./index-af05ea86.esm.js').then((m) => m.SidebarSearchModal)
   }
 }));
 const DefaultResultListItem = searchPlugin.provide(createComponentExtension({
   name: "DefaultResultListItem",
   component: {
-    lazy: () => import('./index-e9bf7392.esm.js').then((m) => m.DefaultResultListItem)
+    lazy: () => import('./index-18219c65.esm.js').then((m) => m.DefaultResultListItem)
   }
 }));
-const HomePageSearchBar = searchPlugin.provide(createComponentExtension({
+const HomePageSearchBar$1 = searchPlugin.provide(createComponentExtension({
   name: "HomePageSearchBar",
   component: {
-    lazy: () => import('./index-bc274d46.esm.js').then((m) => m.HomePageSearchBar)
+    lazy: () => import('./index-a71e930d.esm.js').then((m) => m.HomePageSearchBar)
   }
 }));
 
-const useStyles$5 = makeStyles$1((theme) => ({
+const useStyles$6 = makeStyles$1((theme) => ({
   container: {
     borderRadius: 30,
     display: "flex",
@@ -557,20 +556,10 @@ const useStyles$5 = makeStyles$1((theme) => ({
 }));
 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$6();
+  const { term } = useSearch();
   const handleResultClick = () => {
     toggleModal();
-    handleClear();
   };
   const handleKeyPress = () => {
     handleResultClick();
@@ -586,11 +575,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,7 +586,7 @@ 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, {
@@ -631,7 +617,7 @@ const SearchModal = ({ open = true, toggleModal }) => {
   }));
 };
 
-const useStyles$4 = makeStyles$1(() => ({
+const useStyles$5 = makeStyles$1(() => ({
   root: {
     display: "flex",
     alignItems: "center"
@@ -645,7 +631,7 @@ const SearchBar = ({
   handleSearch,
   handleClearSearchBar
 }) => {
-  const classes = useStyles$4();
+  const classes = useStyles$5();
   return /* @__PURE__ */ React__default.createElement(Paper, {
     component: "form",
     onSubmit: (e) => handleSearch(e),
@@ -666,7 +652,7 @@ const SearchBar = ({
   }, /* @__PURE__ */ React__default.createElement(ClearButton, null)));
 };
 
-const useStyles$3 = makeStyles((theme) => ({
+const useStyles$4 = makeStyles((theme) => ({
   filters: {
     width: "250px",
     display: "flex"
@@ -679,7 +665,7 @@ const FiltersButton = ({
   numberOfSelectedFilters,
   handleToggleFilters
 }) => {
-  const classes = useStyles$3();
+  const classes = useStyles$4();
   return /* @__PURE__ */ React__default.createElement("div", {
     className: classes.filters
   }, /* @__PURE__ */ React__default.createElement(IconButton, {
@@ -691,7 +677,7 @@ const FiltersButton = ({
   }, "Filters (", numberOfSelectedFilters ? numberOfSelectedFilters : 0, ")"));
 };
 
-const useStyles$2 = makeStyles((theme) => ({
+const useStyles$3 = makeStyles((theme) => ({
   filters: {
     background: "transparent",
     boxShadow: "0px 0px 0px 0px"
@@ -710,7 +696,7 @@ const Filters = ({
   updateSelected,
   updateChecked
 }) => {
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   return /* @__PURE__ */ React__default.createElement(Card, {
     className: classes.filters
   }, /* @__PURE__ */ React__default.createElement(CardHeader, {
@@ -764,7 +750,7 @@ const Filters = ({
   }))))));
 };
 
-const useStyles$1 = makeStyles((theme) => ({
+const useStyles$2 = makeStyles((theme) => ({
   searchQuery: {
     color: theme.palette.text.primary,
     background: theme.palette.background.default,
@@ -812,7 +798,7 @@ const TableHeader = ({
   numberOfResults,
   handleToggleFilters
 }) => {
-  const classes = useStyles$1();
+  const classes = useStyles$2();
   return /* @__PURE__ */ React__default.createElement("div", {
     className: classes.tableHeader
   }, /* @__PURE__ */ React__default.createElement(FiltersButton, {
@@ -1038,7 +1024,7 @@ const SearchPage = () => {
   return /* @__PURE__ */ React__default.createElement(SearchContextProvider, null, /* @__PURE__ */ React__default.createElement(UrlUpdater, null), outlet || /* @__PURE__ */ React__default.createElement(LegacySearchPage, null));
 };
 
-const useStyles = makeStyles((theme) => ({
+const useStyles$1 = makeStyles((theme) => ({
   label: {
     textTransform: "capitalize"
   },
@@ -1057,7 +1043,7 @@ const SearchType = ({
   name,
   defaultValue
 }) => {
-  const classes = useStyles();
+  const classes = useStyles$1();
   const { types, setTypes } = useSearch();
   useEffectOnce(() => {
     if (!types.length) {
@@ -1104,7 +1090,7 @@ const SearchType = ({
   })))));
 };
 
-const SidebarSearch = () => {
+const SidebarSearch = (props) => {
   const searchRoute = useRouteRef(rootRouteRef);
   const navigate = useNavigate();
   const handleSearch = useCallback((query) => {
@@ -1112,10 +1098,50 @@ const SidebarSearch = () => {
     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-893ec2f5.esm.js.map
+const useNavigateToQuery = () => {
+  const searchRoute = useRouteRef(rootRouteRef);
+  const navigate = useNavigate();
+  return useCallback(({ query }) => {
+    const queryString = qs.stringify({ query }, { addQueryPrefix: true });
+    navigate(`${searchRoute()}${queryString}`);
+  }, [navigate, searchRoute]);
+};
+
+const useStyles = makeStyles$1({
+  searchBar: {
+    border: "1px solid #555",
+    borderRadius: "6px",
+    fontSize: "1.5em"
+  }
+});
+const HomePageSearchBar = ({
+  className: defaultClassName,
+  ...props
+}) => {
+  const classes = useStyles();
+  const [query, setQuery] = useState("");
+  const handleSearch = useNavigateToQuery();
+  const className = defaultClassName ? `${classes.searchBar} ${defaultClassName}` : classes.searchBar;
+  const handleSubmit = () => {
+    handleSearch({ query });
+  };
+  const handleChange = useCallback((value) => {
+    setQuery(value);
+  }, [setQuery]);
+  return /* @__PURE__ */ React__default.createElement(SearchBarBase, {
+    className,
+    value: query,
+    onSubmit: handleSubmit,
+    onChange: handleChange,
+    ...props
+  });
+};
+
+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, HomePageSearchBar$1 as m, SearchBarNext as n, SearchPage$1 as o, SearchPageNext as p, searchPlugin as q, SearchResult$1 as r, searchApiRef as s, SidebarSearchModal as t, useSearch as u };
+//# sourceMappingURL=index-655809db.esm.js.map