@backstage/plugin-search 0.4.14 → 0.4.18

package/dist/esm/{index-848f077f.esm.js → index-cdccd881.esm.js}

@@ -1,22 +1,24 @@
 import { createApiRef, useApi, configApiRef, createRouteRef, createPlugin, createApiFactory, discoveryApiRef, identityApiRef, createRoutableExtension, createComponentExtension, useRouteRef } from '@backstage/core-plugin-api';
 import { ResponseError } from '@backstage/errors';
 import qs from 'qs';
-import React, { createContext, useState, useCallback, useEffect, useContext } from 'react';
-import { makeStyles, IconButton, Typography, Card, CardHeader, Button, Divider, CardContent, Select, MenuItem, List, ListItem, Checkbox, ListItemText, InputBase, InputAdornment, FormControl, FormLabel, FormControlLabel, InputLabel, Paper, Grid, Chip } from '@material-ui/core';
-import { Progress, EmptyState, Table, Link, useQueryParamState, Page, Header, Content, SidebarSearchField } from '@backstage/core-components';
+import * as React from 'react';
+import React__default, { createContext, useState, useCallback, useEffect, useContext } from 'react';
+import { ListItem, ListItemText, 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 FilterListIcon from '@material-ui/icons/FilterList';
 import { usePrevious, useAsync, useDebounce, useEffectOnce } from 'react-use';
 import SearchIcon from '@material-ui/icons/Search';
 import ClearButton from '@material-ui/icons/Clear';
-import { useOutlet, useLocation } from 'react-router';
 import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
+import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
+import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
+import { createSvgIcon } from '@material-ui/core/utils';
+import { useOutlet, useLocation } from 'react-router';
 import InputBase$1 from '@material-ui/core/InputBase';
 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 ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
-import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 import { useNavigate } from 'react-router-dom';
 
 const searchApiRef = createApiRef({
@@ -42,7 +44,19 @@ class SearchClient {
   }
 }
 
-const useStyles$8 = makeStyles((theme) => ({
+const DefaultResultListItem$1 = ({result}) => {
+  return /* @__PURE__ */ React__default.createElement(Link, {
+    to: result.location
+  }, /* @__PURE__ */ React__default.createElement(ListItem, {
+    alignItems: "flex-start"
+  }, /* @__PURE__ */ React__default.createElement(ListItemText, {
+    primaryTypographyProps: {variant: "h6"},
+    primary: result.title,
+    secondary: result.text
+  })), /* @__PURE__ */ React__default.createElement(Divider, null));
+};
+
+const useStyles$9 = makeStyles((theme) => ({
   filters: {
     width: "250px",
     display: "flex"
@@ -55,19 +69,19 @@ const FiltersButton$1 = ({
   numberOfSelectedFilters,
   handleToggleFilters
 }) => {
-  const classes = useStyles$8();
-  return /* @__PURE__ */ React.createElement("div", {
+  const classes = useStyles$9();
+  return /* @__PURE__ */ React__default.createElement("div", {
     className: classes.filters
-  }, /* @__PURE__ */ React.createElement(IconButton, {
+  }, /* @__PURE__ */ React__default.createElement(IconButton, {
     className: classes.icon,
     "aria-label": "settings",
     onClick: handleToggleFilters
-  }, /* @__PURE__ */ React.createElement(FilterListIcon, null)), /* @__PURE__ */ React.createElement(Typography, {
+  }, /* @__PURE__ */ React__default.createElement(FilterListIcon, null)), /* @__PURE__ */ React__default.createElement(Typography, {
     variant: "h6"
   }, "Filters (", numberOfSelectedFilters ? numberOfSelectedFilters : 0, ")"));
 };
 
-const useStyles$7 = makeStyles((theme) => ({
+const useStyles$8 = makeStyles((theme) => ({
   filters: {
     background: "transparent",
     boxShadow: "0px 0px 0px 0px"
@@ -86,22 +100,22 @@ const Filters$1 = ({
   updateSelected,
   updateChecked
 }) => {
-  const classes = useStyles$7();
-  return /* @__PURE__ */ React.createElement(Card, {
+  const classes = useStyles$8();
+  return /* @__PURE__ */ React__default.createElement(Card, {
     className: classes.filters
-  }, /* @__PURE__ */ React.createElement(CardHeader, {
-    title: /* @__PURE__ */ React.createElement(Typography, {
+  }, /* @__PURE__ */ React__default.createElement(CardHeader, {
+    title: /* @__PURE__ */ React__default.createElement(Typography, {
       variant: "h6"
     }, "Filters"),
-    action: /* @__PURE__ */ React.createElement(Button, {
+    action: /* @__PURE__ */ React__default.createElement(Button, {
       color: "primary",
       onClick: () => resetFilters()
     }, "CLEAR ALL")
-  }), /* @__PURE__ */ React.createElement(Divider, null), filterOptions.kind.length === 0 && filterOptions.lifecycle.length === 0 && /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, {
+  }), /* @__PURE__ */ React__default.createElement(Divider, null), filterOptions.kind.length === 0 && filterOptions.lifecycle.length === 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
     variant: "subtitle2"
-  }, "Filters cannot be applied to available results")), filterOptions.kind.length > 0 && /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, {
+  }, "Filters cannot be applied to available results")), filterOptions.kind.length > 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
     variant: "subtitle2"
-  }, "Kind"), /* @__PURE__ */ React.createElement(Select, {
+  }, "Kind"), /* @__PURE__ */ React__default.createElement(Select, {
     id: "outlined-select",
     onChange: (e) => {
       var _a;
@@ -110,22 +124,22 @@ const Filters$1 = ({
     variant: "outlined",
     className: classes.dropdown,
     value: filters.selected
-  }, filterOptions.kind.map((filter) => /* @__PURE__ */ React.createElement(MenuItem, {
+  }, filterOptions.kind.map((filter) => /* @__PURE__ */ React__default.createElement(MenuItem, {
     selected: filter === "",
     dense: true,
     key: filter,
     value: filter
-  }, filter)))), filterOptions.lifecycle.length > 0 && /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, {
+  }, filter)))), filterOptions.lifecycle.length > 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
     variant: "subtitle2"
-  }, "Lifecycle"), /* @__PURE__ */ React.createElement(List, {
+  }, "Lifecycle"), /* @__PURE__ */ React__default.createElement(List, {
     disablePadding: true,
     dense: true
-  }, filterOptions.lifecycle.map((filter) => /* @__PURE__ */ React.createElement(ListItem, {
+  }, filterOptions.lifecycle.map((filter) => /* @__PURE__ */ React__default.createElement(ListItem, {
     key: filter,
     dense: true,
     button: true,
     onClick: () => updateChecked(filter)
-  }, /* @__PURE__ */ React.createElement(Checkbox, {
+  }, /* @__PURE__ */ React__default.createElement(Checkbox, {
     edge: "start",
     disableRipple: true,
     className: classes.checkbox,
@@ -134,7 +148,7 @@ const Filters$1 = ({
     tabIndex: -1,
     value: filter,
     name: filter
-  }), /* @__PURE__ */ React.createElement(ListItemText, {
+  }), /* @__PURE__ */ React__default.createElement(ListItemText, {
     id: filter,
     primary: filter
   }))))));
@@ -191,7 +205,7 @@ const SearchContextProvider = ({
     fetchNextPage: hasNextPage ? fetchNextPage : void 0,
     fetchPreviousPage: hasPreviousPage ? fetchPreviousPage : void 0
   };
-  return /* @__PURE__ */ React.createElement(SearchContext.Provider, {
+  return /* @__PURE__ */ React__default.createElement(SearchContext.Provider, {
     value,
     children
   });
@@ -205,6 +219,7 @@ const useSearch = () => {
 };
 
 const SearchBarBase = ({
+  autoFocus,
   value,
   onChange,
   onSubmit,
@@ -212,39 +227,45 @@ const SearchBarBase = ({
   placeholder: overridePlaceholder
 }) => {
   const configApi = useApi(configApiRef);
-  const onKeyDown = React.useCallback((e) => {
+  const onKeyDown = React__default.useCallback((e) => {
     if (onSubmit && e.key === "Enter") {
       onSubmit();
     }
   }, [onSubmit]);
-  const handleClear = React.useCallback(() => {
+  const handleClear = React__default.useCallback(() => {
     onChange("");
   }, [onChange]);
   const placeholder = overridePlaceholder != null ? overridePlaceholder : `Search in ${configApi.getOptionalString("app.title") || "Backstage"}`;
-  return /* @__PURE__ */ React.createElement(InputBase, {
+  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.createElement(InputAdornment, {
+    startAdornment: /* @__PURE__ */ React__default.createElement(InputAdornment, {
       position: "start"
-    }, /* @__PURE__ */ React.createElement(IconButton, {
+    }, /* @__PURE__ */ React__default.createElement(IconButton, {
       "aria-label": "Query",
       disabled: true
-    }, /* @__PURE__ */ React.createElement(SearchIcon, null))),
-    endAdornment: /* @__PURE__ */ React.createElement(InputAdornment, {
+    }, /* @__PURE__ */ React__default.createElement(SearchIcon, null))),
+    endAdornment: /* @__PURE__ */ React__default.createElement(InputAdornment, {
       position: "end"
-    }, /* @__PURE__ */ React.createElement(IconButton, {
+    }, /* @__PURE__ */ React__default.createElement(IconButton, {
       "aria-label": "Clear",
       onClick: handleClear
-    }, /* @__PURE__ */ React.createElement(ClearButton, null))),
+    }, /* @__PURE__ */ React__default.createElement(ClearButton, null))),
     ...className && {className},
     ...onSubmit && {onKeyDown}
   });
 };
-const SearchBar$1 = ({className, debounceTime = 0}) => {
+const SearchBar$1 = ({
+  autoFocus,
+  className,
+  debounceTime = 0,
+  placeholder
+}) => {
   const {term, setTerm} = useSearch();
   const [value, setValue] = useState(term);
   useEffect(() => {
@@ -255,15 +276,17 @@ const SearchBar$1 = ({className, debounceTime = 0}) => {
     setValue(newValue);
   };
   const handleClear = () => setValue("");
-  return /* @__PURE__ */ React.createElement(SearchBarBase, {
+  return /* @__PURE__ */ React__default.createElement(SearchBarBase, {
+    autoFocus,
     className,
     value,
     onChange: handleQuery,
-    onClear: handleClear
+    onClear: handleClear,
+    placeholder
   });
 };
 
-const useStyles$6 = makeStyles({
+const useStyles$7 = makeStyles({
   label: {
     textTransform: "capitalize"
   }
@@ -274,7 +297,7 @@ const CheckboxFilter = ({
   defaultValue,
   values = []
 }) => {
-  const classes = useStyles$6();
+  const classes = useStyles$7();
   const {filters, setFilters} = useSearch();
   useEffect(() => {
     if (Array.isArray(defaultValue)) {
@@ -295,17 +318,17 @@ const CheckboxFilter = ({
       return items.length ? {...others, [name]: items} : others;
     });
   };
-  return /* @__PURE__ */ React.createElement(FormControl, {
+  return /* @__PURE__ */ React__default.createElement(FormControl, {
     className,
     fullWidth: true,
     "data-testid": "search-checkboxfilter-next"
-  }, /* @__PURE__ */ React.createElement(FormLabel, {
+  }, /* @__PURE__ */ React__default.createElement(FormLabel, {
     className: classes.label
   }, name), values.map((value) => {
     var _a;
-    return /* @__PURE__ */ React.createElement(FormControlLabel, {
+    return /* @__PURE__ */ React__default.createElement(FormControlLabel, {
       key: value,
-      control: /* @__PURE__ */ React.createElement(Checkbox, {
+      control: /* @__PURE__ */ React__default.createElement(Checkbox, {
         color: "primary",
         tabIndex: -1,
         inputProps: {"aria-labelledby": value},
@@ -324,7 +347,7 @@ const SelectFilter = ({
   defaultValue,
   values = []
 }) => {
-  const classes = useStyles$6();
+  const classes = useStyles$7();
   const {filters, setFilters} = useSearch();
   useEffect(() => {
     if (typeof defaultValue === "string") {
@@ -343,39 +366,259 @@ const SelectFilter = ({
       return value ? {...others, [name]: value} : others;
     });
   };
-  return /* @__PURE__ */ React.createElement(FormControl, {
+  return /* @__PURE__ */ React__default.createElement(FormControl, {
     className,
     variant: "filled",
     fullWidth: true,
     "data-testid": "search-selectfilter-next"
-  }, /* @__PURE__ */ React.createElement(InputLabel, {
+  }, /* @__PURE__ */ React__default.createElement(InputLabel, {
     className: classes.label,
     margin: "dense"
-  }, name), /* @__PURE__ */ React.createElement(Select, {
+  }, name), /* @__PURE__ */ React__default.createElement(Select, {
     variant: "outlined",
     value: filters[name] || "",
     onChange: handleChange
-  }, /* @__PURE__ */ React.createElement(MenuItem, {
+  }, /* @__PURE__ */ React__default.createElement(MenuItem, {
     value: ""
-  }, /* @__PURE__ */ React.createElement("em", null, "All")), values.map((value) => /* @__PURE__ */ React.createElement(MenuItem, {
+  }, /* @__PURE__ */ React__default.createElement("em", null, "All")), values.map((value) => /* @__PURE__ */ React__default.createElement(MenuItem, {
     key: value,
     value
   }, value))));
 };
-const SearchFilter = ({component: Element, ...props}) => /* @__PURE__ */ React.createElement(Element, {
+const SearchFilter = ({component: Element, ...props}) => /* @__PURE__ */ React__default.createElement(Element, {
   ...props
 });
-SearchFilter.Checkbox = (props) => /* @__PURE__ */ React.createElement(SearchFilter, {
+SearchFilter.Checkbox = (props) => /* @__PURE__ */ React__default.createElement(SearchFilter, {
   ...props,
   component: CheckboxFilter
 });
-SearchFilter.Select = (props) => /* @__PURE__ */ React.createElement(SearchFilter, {
+SearchFilter.Select = (props) => /* @__PURE__ */ React__default.createElement(SearchFilter, {
   ...props,
   component: SelectFilter
 });
 const SearchFilterNext = SearchFilter;
 
-const useStyles$5 = makeStyles$1(() => ({
+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 {
+    result: {loading, error, value}
+  } = useSearch();
+  if (loading) {
+    return /* @__PURE__ */ React__default.createElement(Progress, null);
+  }
+  if (error) {
+    return /* @__PURE__ */ React__default.createElement(ResponseErrorPanel, {
+      title: "Error encountered while fetching search results",
+      error
+    });
+  }
+  if (!(value == null ? void 0 : value.results.length)) {
+    return /* @__PURE__ */ React__default.createElement(EmptyState, {
+      missing: "data",
+      title: "Sorry, no results were found"
+    });
+  }
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children({results: value.results}));
+};
+
+const useStyles$6 = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: theme.spacing(2),
+    margin: theme.spacing(2, 0)
+  }
+}));
+const SearchResultPager = () => {
+  const {fetchNextPage, fetchPreviousPage} = useSearch();
+  const classes = useStyles$6();
+  if (!fetchNextPage && !fetchPreviousPage) {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+  }
+  return /* @__PURE__ */ React__default.createElement("nav", {
+    "arial-label": "pagination navigation",
+    className: classes.root
+  }, /* @__PURE__ */ React__default.createElement(Button, {
+    "aria-label": "previous page",
+    disabled: !fetchPreviousPage,
+    onClick: fetchPreviousPage,
+    startIcon: /* @__PURE__ */ React__default.createElement(ArrowBackIosIcon, null)
+  }, "Previous"), /* @__PURE__ */ React__default.createElement(Button, {
+    "aria-label": "next page",
+    disabled: !fetchNextPage,
+    onClick: fetchNextPage,
+    endIcon: /* @__PURE__ */ React__default.createElement(ArrowForwardIosIcon, null)
+  }, "Next"));
+};
+
+const rootRouteRef = createRouteRef({
+  id: "search"
+});
+const rootNextRouteRef = createRouteRef({
+  id: "search:next"
+});
+const searchPlugin = createPlugin({
+  id: "search",
+  apis: [
+    createApiFactory({
+      api: searchApiRef,
+      deps: {discoveryApi: discoveryApiRef, identityApi: identityApiRef},
+      factory: ({discoveryApi, identityApi}) => {
+        return new SearchClient({discoveryApi, identityApi});
+      }
+    })
+  ],
+  routes: {
+    root: rootRouteRef,
+    nextRoot: rootNextRouteRef
+  }
+});
+const SearchPage$1 = searchPlugin.provide(createRoutableExtension({
+  name: "SearchPage",
+  component: () => import('./index-77205085.esm.js').then((m) => m.SearchPage),
+  mountPoint: rootRouteRef
+}));
+const SearchPageNext = searchPlugin.provide(createRoutableExtension({
+  name: "SearchPageNext",
+  component: () => import('./index-77205085.esm.js').then((m) => m.SearchPage),
+  mountPoint: rootNextRouteRef
+}));
+searchPlugin.provide(createComponentExtension({
+  name: "SearchBar",
+  component: {
+    lazy: () => import('./index-b929d40d.esm.js').then((m) => m.SearchBar)
+  }
+}));
+const SearchBarNext = searchPlugin.provide(createComponentExtension({
+  name: "SearchBarNext",
+  component: {
+    lazy: () => import('./index-b929d40d.esm.js').then((m) => m.SearchBar)
+  }
+}));
+const SearchResult$1 = searchPlugin.provide(createComponentExtension({
+  name: "SearchResult",
+  component: {
+    lazy: () => import('./index-766e727c.esm.js').then((m) => m.SearchResult)
+  }
+}));
+searchPlugin.provide(createComponentExtension({
+  name: "SearchResultNext",
+  component: {
+    lazy: () => import('./index-766e727c.esm.js').then((m) => m.SearchResult)
+  }
+}));
+const SidebarSearchModal = searchPlugin.provide(createComponentExtension({
+  name: "SidebarSearchModal",
+  component: {
+    lazy: () => import('./index-01b40466.esm.js').then((m) => m.SidebarSearchModal)
+  }
+}));
+const DefaultResultListItem = searchPlugin.provide(createComponentExtension({
+  name: "DefaultResultListItem",
+  component: {
+    lazy: () => import('./index-207637ef.esm.js').then((m) => m.DefaultResultListItem)
+  }
+}));
+const HomePageSearchBar = searchPlugin.provide(createComponentExtension({
+  name: "HomePageSearchBar",
+  component: {
+    lazy: () => import('./index-b9474e70.esm.js').then((m) => m.HomePageSearchBar)
+  }
+}));
+
+const useStyles$5 = makeStyles$1((theme) => ({
+  container: {
+    borderRadius: 30,
+    display: "flex",
+    height: "2.4em"
+  },
+  input: {
+    flex: 1
+  },
+  paperFullWidth: {height: "calc(100% - 128px)"},
+  dialogActionsContainer: {padding: theme.spacing(1, 3)},
+  viewResultsLink: {verticalAlign: "0.5em"}
+}));
+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 handleResultClick = () => {
+    toggleModal();
+    handleClear();
+  };
+  const handleKeyPress = () => {
+    handleResultClick();
+  };
+  return /* @__PURE__ */ React__default.createElement(Dialog, {
+    classes: {
+      paperFullWidth: classes.paperFullWidth
+    },
+    onClose: toggleModal,
+    "aria-labelledby": "search-modal-title",
+    open,
+    fullWidth: true,
+    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(DialogContent, null, /* @__PURE__ */ React__default.createElement(Grid, {
+    container: true,
+    direction: "row-reverse",
+    justifyContent: "flex-start",
+    alignItems: "center"
+  }, /* @__PURE__ */ React__default.createElement(Grid, {
+    item: true
+  }, /* @__PURE__ */ React__default.createElement(Link, {
+    onClick: toggleModal,
+    to: `${getSearchLink()}?query=${value}`
+  }, /* @__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", {
+    role: "button",
+    tabIndex: 0,
+    key: `${document.location}-btn`,
+    onClick: handleResultClick,
+    onKeyPress: handleKeyPress
+  }, /* @__PURE__ */ React__default.createElement(DefaultResultListItem$1, {
+    key: document.location,
+    result: document
+  })))))), /* @__PURE__ */ React__default.createElement(DialogActions, {
+    className: classes.dialogActionsContainer
+  }, /* @__PURE__ */ React__default.createElement(Grid, {
+    container: true,
+    direction: "row"
+  }, /* @__PURE__ */ React__default.createElement(Grid, {
+    item: true,
+    xs: 12
+  }, /* @__PURE__ */ React__default.createElement(SearchResultPager, null)))));
+};
+const SearchModal = ({open = true, toggleModal}) => {
+  return /* @__PURE__ */ React__default.createElement(SearchContextProvider, null, /* @__PURE__ */ React__default.createElement(Modal, {
+    open,
+    toggleModal
+  }));
+};
+
+const useStyles$4 = makeStyles$1(() => ({
   root: {
     display: "flex",
     alignItems: "center"
@@ -389,28 +632,28 @@ const SearchBar = ({
   handleSearch,
   handleClearSearchBar
 }) => {
-  const classes = useStyles$5();
-  return /* @__PURE__ */ React.createElement(Paper, {
+  const classes = useStyles$4();
+  return /* @__PURE__ */ React__default.createElement(Paper, {
     component: "form",
     onSubmit: (e) => handleSearch(e),
     className: classes.root
-  }, /* @__PURE__ */ React.createElement(IconButton$1, {
+  }, /* @__PURE__ */ React__default.createElement(IconButton$1, {
     disabled: true,
     type: "submit",
     "aria-label": "search"
-  }, /* @__PURE__ */ React.createElement(SearchIcon, null)), /* @__PURE__ */ React.createElement(InputBase$1, {
+  }, /* @__PURE__ */ React__default.createElement(SearchIcon, null)), /* @__PURE__ */ React__default.createElement(InputBase$1, {
     className: classes.input,
     placeholder: "Search in Backstage",
     value: searchQuery,
     onChange: (e) => handleSearch(e),
     inputProps: {"aria-label": "search backstage"}
-  }), /* @__PURE__ */ React.createElement(IconButton$1, {
+  }), /* @__PURE__ */ React__default.createElement(IconButton$1, {
     "aria-label": "search",
     onClick: () => handleClearSearchBar()
-  }, /* @__PURE__ */ React.createElement(ClearButton, null)));
+  }, /* @__PURE__ */ React__default.createElement(ClearButton, null)));
 };
 
-const useStyles$4 = makeStyles((theme) => ({
+const useStyles$3 = makeStyles((theme) => ({
   filters: {
     width: "250px",
     display: "flex"
@@ -423,19 +666,19 @@ const FiltersButton = ({
   numberOfSelectedFilters,
   handleToggleFilters
 }) => {
-  const classes = useStyles$4();
-  return /* @__PURE__ */ React.createElement("div", {
+  const classes = useStyles$3();
+  return /* @__PURE__ */ React__default.createElement("div", {
     className: classes.filters
-  }, /* @__PURE__ */ React.createElement(IconButton, {
+  }, /* @__PURE__ */ React__default.createElement(IconButton, {
     className: classes.icon,
     "aria-label": "settings",
     onClick: handleToggleFilters
-  }, /* @__PURE__ */ React.createElement(FilterListIcon, null)), /* @__PURE__ */ React.createElement(Typography, {
+  }, /* @__PURE__ */ React__default.createElement(FilterListIcon, null)), /* @__PURE__ */ React__default.createElement(Typography, {
     variant: "h6"
   }, "Filters (", numberOfSelectedFilters ? numberOfSelectedFilters : 0, ")"));
 };
 
-const useStyles$3 = makeStyles((theme) => ({
+const useStyles$2 = makeStyles((theme) => ({
   filters: {
     background: "transparent",
     boxShadow: "0px 0px 0px 0px"
@@ -454,22 +697,22 @@ const Filters = ({
   updateSelected,
   updateChecked
 }) => {
-  const classes = useStyles$3();
-  return /* @__PURE__ */ React.createElement(Card, {
+  const classes = useStyles$2();
+  return /* @__PURE__ */ React__default.createElement(Card, {
     className: classes.filters
-  }, /* @__PURE__ */ React.createElement(CardHeader, {
-    title: /* @__PURE__ */ React.createElement(Typography, {
+  }, /* @__PURE__ */ React__default.createElement(CardHeader, {
+    title: /* @__PURE__ */ React__default.createElement(Typography, {
       variant: "h6"
     }, "Filters"),
-    action: /* @__PURE__ */ React.createElement(Button, {
+    action: /* @__PURE__ */ React__default.createElement(Button, {
       color: "primary",
       onClick: () => resetFilters()
     }, "CLEAR ALL")
-  }), /* @__PURE__ */ React.createElement(Divider, null), filterOptions.kind.length === 0 && filterOptions.lifecycle.length === 0 && /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, {
+  }), /* @__PURE__ */ React__default.createElement(Divider, null), filterOptions.kind.length === 0 && filterOptions.lifecycle.length === 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
     variant: "subtitle2"
-  }, "Filters cannot be applied to available results")), filterOptions.kind.length > 0 && /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, {
+  }, "Filters cannot be applied to available results")), filterOptions.kind.length > 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
     variant: "subtitle2"
-  }, "Kind"), /* @__PURE__ */ React.createElement(Select, {
+  }, "Kind"), /* @__PURE__ */ React__default.createElement(Select, {
     id: "outlined-select",
     onChange: (e) => {
       var _a;
@@ -478,22 +721,22 @@ const Filters = ({
     variant: "outlined",
     className: classes.dropdown,
     value: filters.selected
-  }, filterOptions.kind.map((filter) => /* @__PURE__ */ React.createElement(MenuItem, {
+  }, filterOptions.kind.map((filter) => /* @__PURE__ */ React__default.createElement(MenuItem, {
     selected: filter === "",
     dense: true,
     key: filter,
     value: filter
-  }, filter)))), filterOptions.lifecycle.length > 0 && /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, {
+  }, filter)))), filterOptions.lifecycle.length > 0 && /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Typography, {
     variant: "subtitle2"
-  }, "Lifecycle"), /* @__PURE__ */ React.createElement(List, {
+  }, "Lifecycle"), /* @__PURE__ */ React__default.createElement(List, {
     disablePadding: true,
     dense: true
-  }, filterOptions.lifecycle.map((filter) => /* @__PURE__ */ React.createElement(ListItem, {
+  }, filterOptions.lifecycle.map((filter) => /* @__PURE__ */ React__default.createElement(ListItem, {
     key: filter,
     dense: true,
     button: true,
     onClick: () => updateChecked(filter)
-  }, /* @__PURE__ */ React.createElement(Checkbox, {
+  }, /* @__PURE__ */ React__default.createElement(Checkbox, {
     edge: "start",
     disableRipple: true,
     className: classes.checkbox,
@@ -502,13 +745,13 @@ const Filters = ({
     tabIndex: -1,
     value: filter,
     name: filter
-  }), /* @__PURE__ */ React.createElement(ListItemText, {
+  }), /* @__PURE__ */ React__default.createElement(ListItemText, {
     id: filter,
     primary: filter
   }))))));
 };
 
-const useStyles$2 = makeStyles((theme) => ({
+const useStyles$1 = makeStyles((theme) => ({
   searchQuery: {
     color: theme.palette.text.primary,
     background: theme.palette.background.default,
@@ -529,7 +772,7 @@ const columns = [
     title: "Name",
     field: "name",
     highlight: true,
-    render: (result) => /* @__PURE__ */ React.createElement(Link, {
+    render: (result) => /* @__PURE__ */ React__default.createElement(Link, {
       to: result.url || ""
     }, result.name)
   },
@@ -556,27 +799,27 @@ const TableHeader = ({
   numberOfResults,
   handleToggleFilters
 }) => {
-  const classes = useStyles$2();
-  return /* @__PURE__ */ React.createElement("div", {
+  const classes = useStyles$1();
+  return /* @__PURE__ */ React__default.createElement("div", {
     className: classes.tableHeader
-  }, /* @__PURE__ */ React.createElement(FiltersButton, {
+  }, /* @__PURE__ */ React__default.createElement(FiltersButton, {
     numberOfSelectedFilters,
     handleToggleFilters
-  }), /* @__PURE__ */ React.createElement(Divider, {
+  }), /* @__PURE__ */ React__default.createElement(Divider, {
     className: classes.divider,
     orientation: "vertical"
-  }), /* @__PURE__ */ React.createElement(Grid, {
+  }), /* @__PURE__ */ React__default.createElement(Grid, {
     item: true,
     xs: 12
-  }, searchQuery ? /* @__PURE__ */ React.createElement(Typography, {
+  }, searchQuery ? /* @__PURE__ */ React__default.createElement(Typography, {
     variant: "h6"
-  }, `${numberOfResults} `, numberOfResults > 1 ? `results for ` : `result for `, /* @__PURE__ */ React.createElement("span", {
+  }, `${numberOfResults} `, numberOfResults > 1 ? `results for ` : `result for `, /* @__PURE__ */ React__default.createElement("span", {
     className: classes.searchQuery
-  }, '"', searchQuery, '"'), " ") : /* @__PURE__ */ React.createElement(Typography, {
+  }, '"', searchQuery, '"'), " ") : /* @__PURE__ */ React__default.createElement(Typography, {
     variant: "h6"
   }, `${numberOfResults} results`)));
 };
-const SearchResult$1 = ({searchQuery}) => {
+const SearchResult = ({searchQuery}) => {
   const catalogApi = useApi(catalogApiRef);
   const [showFilters, toggleFilters] = useState(false);
   const [selectedFilters, setSelectedFilters] = useState({
@@ -621,15 +864,15 @@ const SearchResult$1 = ({searchQuery}) => {
     }
   }, [selectedFilters, searchQuery, results]);
   if (loading) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
+    return /* @__PURE__ */ React__default.createElement(Progress, null);
   }
   if (error) {
-    return /* @__PURE__ */ React.createElement(Alert, {
+    return /* @__PURE__ */ React__default.createElement(Alert, {
       severity: "error"
     }, "Error encountered while fetching search results. ", error.toString());
   }
   if (!results || results.length === 0) {
-    return /* @__PURE__ */ React.createElement(EmptyState, {
+    return /* @__PURE__ */ React__default.createElement(EmptyState, {
       missing: "data",
       title: "Sorry, no results were found"
     });
@@ -671,25 +914,25 @@ const SearchResult$1 = ({searchQuery}) => {
     kind: [],
     lifecycle: []
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Grid, {
     container: true
-  }, showFilters && /* @__PURE__ */ React.createElement(Grid, {
+  }, showFilters && /* @__PURE__ */ React__default.createElement(Grid, {
     item: true,
     xs: 3
-  }, /* @__PURE__ */ React.createElement(Filters, {
+  }, /* @__PURE__ */ React__default.createElement(Filters, {
     filters: selectedFilters,
     filterOptions,
     resetFilters,
     updateSelected,
     updateChecked
-  })), /* @__PURE__ */ React.createElement(Grid, {
+  })), /* @__PURE__ */ React__default.createElement(Grid, {
     item: true,
     xs: showFilters ? 9 : 12
-  }, /* @__PURE__ */ React.createElement(Table, {
+  }, /* @__PURE__ */ React__default.createElement(Table, {
     options: {paging: true, pageSize: 20, search: false},
     data: filteredResults,
     columns,
-    title: /* @__PURE__ */ React.createElement(TableHeader, {
+    title: /* @__PURE__ */ React__default.createElement(TableHeader, {
       searchQuery,
       numberOfResults: filteredResults.length,
       numberOfSelectedFilters: (selectedFilters.selected !== "" ? 1 : 0) + selectedFilters.checked.length,
@@ -712,24 +955,24 @@ const LegacySearchPage = () => {
   const handleClearSearchBar = () => {
     setSearchQuery("");
   };
-  return /* @__PURE__ */ React.createElement(Page, {
+  return /* @__PURE__ */ React__default.createElement(Page, {
     themeId: "home"
-  }, /* @__PURE__ */ React.createElement(Header, {
+  }, /* @__PURE__ */ React__default.createElement(Header, {
     title: "Search"
-  }), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, {
+  }), /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(Grid, {
     container: true,
     direction: "row"
-  }, /* @__PURE__ */ React.createElement(Grid, {
+  }, /* @__PURE__ */ React__default.createElement(Grid, {
     item: true,
     xs: 12
-  }, /* @__PURE__ */ React.createElement(SearchBar, {
+  }, /* @__PURE__ */ React__default.createElement(SearchBar, {
     handleSearch,
     handleClearSearchBar,
     searchQuery
-  })), /* @__PURE__ */ React.createElement(Grid, {
+  })), /* @__PURE__ */ React__default.createElement(Grid, {
     item: true,
     xs: 12
-  }, /* @__PURE__ */ React.createElement(SearchResult$1, {
+  }, /* @__PURE__ */ React__default.createElement(SearchResult, {
     searchQuery: (queryString != null ? queryString : "").toLocaleLowerCase("en-US")
   })))));
 };
@@ -777,41 +1020,9 @@ const UrlUpdater = () => {
   }, [term, types, pageCursor, filters]);
   return null;
 };
-const SearchPage$1 = () => {
+const SearchPage = () => {
   const outlet = useOutlet();
-  return /* @__PURE__ */ React.createElement(SearchContextProvider, null, /* @__PURE__ */ React.createElement(UrlUpdater, null), outlet || /* @__PURE__ */ React.createElement(LegacySearchPage, null));
-};
-
-const useStyles$1 = makeStyles((theme) => ({
-  root: {
-    display: "flex",
-    justifyContent: "space-between",
-    gap: theme.spacing(2),
-    margin: theme.spacing(4)
-  }
-}));
-const SearchResultPager = () => {
-  const {fetchNextPage, fetchPreviousPage} = useSearch();
-  const classes = useStyles$1();
-  if (!fetchNextPage && !fetchPreviousPage) {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null);
-  }
-  return /* @__PURE__ */ React.createElement("nav", {
-    "arial-label": "pagination navigation",
-    className: classes.root
-  }, /* @__PURE__ */ React.createElement(Button, {
-    "aria-label": "previous page",
-    disabled: !fetchPreviousPage,
-    onClick: fetchPreviousPage,
-    startIcon: /* @__PURE__ */ React.createElement(ArrowBackIosIcon, null),
-    size: "small"
-  }, "Back"), /* @__PURE__ */ React.createElement(Button, {
-    "aria-label": "next page",
-    disabled: !fetchNextPage,
-    onClick: fetchNextPage,
-    endIcon: /* @__PURE__ */ React.createElement(ArrowForwardIosIcon, null),
-    size: "small"
-  }, "Next"));
+  return /* @__PURE__ */ React__default.createElement(SearchContextProvider, null, /* @__PURE__ */ React__default.createElement(UrlUpdater, null), outlet || /* @__PURE__ */ React__default.createElement(LegacySearchPage, null));
 };
 
 const useStyles = makeStyles((theme) => ({
@@ -848,109 +1059,38 @@ const SearchType = ({
     const value = e.target.value;
     setTypes(value);
   };
-  return /* @__PURE__ */ React.createElement(FormControl, {
+  return /* @__PURE__ */ React__default.createElement(FormControl, {
     className,
     variant: "filled",
     fullWidth: true,
     "data-testid": "search-typefilter-next"
-  }, /* @__PURE__ */ React.createElement(InputLabel, {
+  }, /* @__PURE__ */ React__default.createElement(InputLabel, {
     className: classes.label,
     margin: "dense"
-  }, name), /* @__PURE__ */ React.createElement(Select, {
+  }, name), /* @__PURE__ */ React__default.createElement(Select, {
     multiple: true,
     variant: "outlined",
     value: types,
     onChange: handleChange,
     placeholder: "All Results",
-    renderValue: (selected) => /* @__PURE__ */ React.createElement("div", {
+    renderValue: (selected) => /* @__PURE__ */ React__default.createElement("div", {
       className: classes.chips
-    }, selected.map((value) => /* @__PURE__ */ React.createElement(Chip, {
+    }, selected.map((value) => /* @__PURE__ */ React__default.createElement(Chip, {
       key: value,
       label: value,
       className: classes.chip,
       size: "small"
     })))
-  }, values.map((value) => /* @__PURE__ */ React.createElement(MenuItem, {
+  }, values.map((value) => /* @__PURE__ */ React__default.createElement(MenuItem, {
     key: value,
     value
-  }, /* @__PURE__ */ React.createElement(Checkbox, {
+  }, /* @__PURE__ */ React__default.createElement(Checkbox, {
     checked: types.indexOf(value) > -1
-  }), /* @__PURE__ */ React.createElement(ListItemText, {
+  }), /* @__PURE__ */ React__default.createElement(ListItemText, {
     primary: value
   })))));
 };
 
-const rootRouteRef = createRouteRef({
-  path: "/search",
-  title: "search"
-});
-const rootNextRouteRef = createRouteRef({
-  path: "/search-next",
-  title: "search"
-});
-const searchPlugin = createPlugin({
-  id: "search",
-  apis: [
-    createApiFactory({
-      api: searchApiRef,
-      deps: {discoveryApi: discoveryApiRef, identityApi: identityApiRef},
-      factory: ({discoveryApi, identityApi}) => {
-        return new SearchClient({discoveryApi, identityApi});
-      }
-    })
-  ],
-  routes: {
-    root: rootRouteRef,
-    nextRoot: rootNextRouteRef
-  }
-});
-const SearchPage = searchPlugin.provide(createRoutableExtension({
-  name: "SearchPage",
-  component: () => import('./index-9891a3b0.esm.js').then((m) => m.SearchPage),
-  mountPoint: rootRouteRef
-}));
-const SearchPageNext = searchPlugin.provide(createRoutableExtension({
-  name: "SearchPageNext",
-  component: () => import('./index-9891a3b0.esm.js').then((m) => m.SearchPage),
-  mountPoint: rootNextRouteRef
-}));
-searchPlugin.provide(createComponentExtension({
-  name: "SearchBar",
-  component: {
-    lazy: () => import('./index-f3589f7b.esm.js').then((m) => m.SearchBar)
-  }
-}));
-const SearchBarNext = searchPlugin.provide(createComponentExtension({
-  name: "SearchBarNext",
-  component: {
-    lazy: () => import('./index-f3589f7b.esm.js').then((m) => m.SearchBar)
-  }
-}));
-const SearchResult = searchPlugin.provide(createComponentExtension({
-  name: "SearchResult",
-  component: {
-    lazy: () => import('./index-4afbd577.esm.js').then((m) => m.SearchResult)
-  }
-}));
-searchPlugin.provide(createComponentExtension({
-  name: "SearchResultNext",
-  component: {
-    lazy: () => import('./index-4afbd577.esm.js').then((m) => m.SearchResult)
-  }
-}));
-const DefaultResultListItem = searchPlugin.provide(createComponentExtension({
-  name: "DefaultResultListItem",
-  component: {
-    lazy: () => import('./index-92a9e2ec.esm.js').then((m) => m.DefaultResultListItem)
-  }
-}));
-const HomePageSearchBar = searchPlugin.provide(createComponentExtension({
-  name: "HomePageSearchBar",
-  component: {
-    lazy: () => import('./index-9b6a3ac1.esm.js').then((m) => m.HomePageSearchBar)
-  }
-}));
-
 const SidebarSearch = () => {
   const searchRoute = useRouteRef(rootRouteRef);
   const navigate = useNavigate();
@@ -958,11 +1098,11 @@ const SidebarSearch = () => {
     const queryString = qs.stringify({query}, {addQueryPrefix: true});
     navigate(`${searchRoute()}${queryString}`);
   }, [navigate, searchRoute]);
-  return /* @__PURE__ */ React.createElement(SidebarSearchField, {
+  return /* @__PURE__ */ React__default.createElement(SidebarSearchField, {
     onSearch: handleSearch,
     to: "/search"
   });
 };
 
-export { DefaultResultListItem as D, Filters$1 as F, HomePageSearchBar as H, SearchPage$1 as S, SearchBar$1 as a, SearchBarBase as b, FiltersButton$1 as c, SearchContextProvider as d, SearchFilter as e, SearchFilterNext as f, SearchResultPager as g, SearchType as h, SidebarSearch as i, SearchBarNext as j, SearchPage as k, SearchPageNext as l, searchPlugin as m, SearchResult as n, rootRouteRef as r, searchApiRef as s, useSearch as u };
-//# sourceMappingURL=index-848f077f.esm.js.map
+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-cdccd881.esm.js.map