@backstage/plugin-search-react 1.1.0-next.2 → 1.1.0

package/dist/index.esm.js

@@ -1,17 +1,20 @@
 import { createApiRef, AnalyticsContext, useApi, useAnalytics, configApiRef } from '@backstage/core-plugin-api';
 import React, { useMemo, useContext, useState, useCallback, useEffect, forwardRef, useRef } from 'react';
-import { makeStyles, InputBase, InputAdornment, IconButton, CircularProgress, ListItemIcon, ListItemText, TextField, Chip, FormControl, FormLabel, FormControlLabel, Checkbox, InputLabel, Select, MenuItem, Button, ListItem, Box, Divider } from '@material-ui/core';
+import { makeStyles, InputBase, InputAdornment, IconButton, CircularProgress, ListItemIcon, ListItemText, TextField, Chip, FormControl, FormLabel, FormControlLabel, Checkbox, InputLabel, Select, MenuItem, Button, ListItem, Box, Divider, List, Typography, ListSubheader, Menu } 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 { createVersionedContext, createVersionedValueMap } from '@backstage/version-bridge';
+import { isEqual } from 'lodash';
 import useAsync from 'react-use/lib/useAsync';
 import usePrevious from 'react-use/lib/usePrevious';
+import { createVersionedContext, createVersionedValueMap } from '@backstage/version-bridge';
 import { Autocomplete } from '@material-ui/lab';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 import { Progress, ResponseErrorPanel, EmptyState, Link } from '@backstage/core-components';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
+import qs from 'qs';
+import AddIcon from '@material-ui/icons/Add';
 
 const searchApiRef = createApiRef({
   id: "plugin.search.queryservice"
@@ -25,7 +28,7 @@ class MockSearchApi {
   }
 }
 
-const useStyles$2 = makeStyles(
+const useStyles$3 = makeStyles(
   () => ({
     highlight: {}
   }),
@@ -36,7 +39,7 @@ const HighlightedSearchResultText = ({
   preTag,
   postTag
 }) => {
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   const terms = useMemo(
     () => text.split(new RegExp(`(${preTag}.+?${postTag})`)),
     [postTag, preTag, text]
@@ -74,13 +77,14 @@ const searchInitialState = {
 const useSearchContextValue = (initialValue = searchInitialState) => {
   var _a, _b, _c, _d;
   const searchApi = useApi(searchApiRef);
+  const [term, setTerm] = useState(initialValue.term);
+  const [types, setTypes] = useState(initialValue.types);
+  const [filters, setFilters] = useState(initialValue.filters);
   const [pageCursor, setPageCursor] = useState(
     initialValue.pageCursor
   );
-  const [filters, setFilters] = useState(initialValue.filters);
-  const [term, setTerm] = useState(initialValue.term);
-  const [types, setTypes] = useState(initialValue.types);
   const prevTerm = usePrevious(term);
+  const prevFilters = usePrevious(filters);
   const result = useAsync(
     () => searchApi.query({
       term,
@@ -88,7 +92,7 @@ const useSearchContextValue = (initialValue = searchInitialState) => {
       pageCursor,
       types
     }),
-    [term, filters, types, pageCursor]
+    [term, types, filters, pageCursor]
   );
   const hasNextPage = !result.loading && !result.error && ((_a = result.value) == null ? void 0 : _a.nextPageCursor);
   const hasPreviousPage = !result.loading && !result.error && ((_b = result.value) == null ? void 0 : _b.previousPageCursor);
@@ -105,6 +109,11 @@ const useSearchContextValue = (initialValue = searchInitialState) => {
       setPageCursor(void 0);
     }
   }, [term, prevTerm, setPageCursor]);
+  useEffect(() => {
+    if (prevFilters !== void 0 && !isEqual(filters, prevFilters)) {
+      setPageCursor(void 0);
+    }
+  }, [filters, prevFilters, setPageCursor]);
   const value = {
     result,
     filters,
@@ -467,7 +476,7 @@ const AutocompleteFilter = (props) => {
   });
 };
 
-const useStyles$1 = makeStyles({
+const useStyles$2 = makeStyles({
   label: {
     textTransform: "capitalize"
   }
@@ -481,7 +490,7 @@ const CheckboxFilter = (props) => {
     values: givenValues = [],
     valuesDebounceMs
   } = props;
-  const classes = useStyles$1();
+  const classes = useStyles$2();
   const { filters, setFilters } = useSearch();
   useDefaultFilterValue(name, defaultValue);
   const asyncValues = typeof givenValues === "function" ? givenValues : void 0;
@@ -536,7 +545,7 @@ const SelectFilter = (props) => {
     values: givenValues,
     valuesDebounceMs
   } = props;
-  const classes = useStyles$1();
+  const classes = useStyles$2();
   useDefaultFilterValue(name, defaultValue);
   const asyncValues = typeof givenValues === "function" ? givenValues : void 0;
   const defaultValues = typeof givenValues === "function" ? void 0 : givenValues;
@@ -595,39 +604,68 @@ SearchFilter.Autocomplete = (props) => /* @__PURE__ */ React.createElement(Searc
   component: AutocompleteFilter
 });
 
-const SearchResultComponent = ({ children }) => {
-  const {
-    result: { loading, error, value }
-  } = useSearch();
-  if (loading) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
-  }
-  if (error) {
-    return /* @__PURE__ */ React.createElement(ResponseErrorPanel, {
-      title: "Error encountered while fetching search results",
-      error
-    });
-  }
-  if (!(value == null ? void 0 : value.results.length)) {
-    return /* @__PURE__ */ React.createElement(EmptyState, {
-      missing: "data",
-      title: "Sorry, no results were found"
-    });
-  }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children({ results: value.results }));
+const SearchResultContext = (props) => {
+  const { children } = props;
+  const context = useSearch();
+  const state = context.result;
+  return children(state);
 };
-const HigherOrderSearchResult = (props) => {
-  return /* @__PURE__ */ React.createElement(AnalyticsContext, {
-    attributes: {
-      pluginId: "search",
-      extension: "SearchResult"
+const SearchResultApi = (props) => {
+  const { query, children } = props;
+  const searchApi = useApi(searchApiRef);
+  const state = useAsync(
+    () => {
+      var _a, _b, _c;
+      return searchApi.query({
+        term: (_a = query.term) != null ? _a : "",
+        types: (_b = query.types) != null ? _b : [],
+        filters: (_c = query.filters) != null ? _c : {},
+        pageCursor: query.pageCursor
+      });
+    },
+    [query]
+  );
+  return children(state);
+};
+const SearchResultState = (props) => {
+  const { query, children } = props;
+  return query ? /* @__PURE__ */ React.createElement(SearchResultApi, {
+    query
+  }, children) : /* @__PURE__ */ React.createElement(SearchResultContext, null, children);
+};
+const SearchResultComponent = (props) => {
+  const { query, children } = props;
+  return /* @__PURE__ */ React.createElement(SearchResultState, {
+    query
+  }, ({ loading, error, value }) => {
+    if (loading) {
+      return /* @__PURE__ */ React.createElement(Progress, null);
     }
-  }, /* @__PURE__ */ React.createElement(SearchResultComponent, {
-    ...props
-  }));
+    if (error) {
+      return /* @__PURE__ */ React.createElement(ResponseErrorPanel, {
+        title: "Error encountered while fetching search results",
+        error
+      });
+    }
+    if (!(value == null ? void 0 : value.results.length)) {
+      return /* @__PURE__ */ React.createElement(EmptyState, {
+        missing: "data",
+        title: "Sorry, no results were found"
+      });
+    }
+    return children(value);
+  });
 };
+const SearchResult = (props) => /* @__PURE__ */ React.createElement(AnalyticsContext, {
+  attributes: {
+    pluginId: "search",
+    extension: "SearchResult"
+  }
+}, /* @__PURE__ */ React.createElement(SearchResultComponent, {
+  ...props
+}));
 
-const useStyles = makeStyles((theme) => ({
+const useStyles$1 = makeStyles((theme) => ({
   root: {
     display: "flex",
     justifyContent: "space-between",
@@ -637,12 +675,12 @@ const useStyles = makeStyles((theme) => ({
 }));
 const SearchResultPager = () => {
   const { fetchNextPage, fetchPreviousPage } = useSearch();
-  const classes = useStyles();
+  const classes = useStyles$1();
   if (!fetchNextPage && !fetchPreviousPage) {
     return /* @__PURE__ */ React.createElement(React.Fragment, null);
   }
   return /* @__PURE__ */ React.createElement("nav", {
-    "arial-label": "pagination navigation",
+    "aria-label": "pagination navigation",
     className: classes.root
   }, /* @__PURE__ */ React.createElement(Button, {
     "aria-label": "previous page",
@@ -712,5 +750,277 @@ const HigherOrderDefaultResultListItem = (props) => {
   }));
 };
 
-export { AutocompleteFilter, CheckboxFilter, HigherOrderDefaultResultListItem as DefaultResultListItem, HighlightedSearchResultText, MockSearchApi, SearchAutocomplete, SearchAutocompleteDefaultOption, SearchBar, SearchBarBase, SearchContextProvider, SearchFilter, HigherOrderSearchResult as SearchResult, SearchResultComponent, SearchResultPager, SelectFilter, searchApiRef, useSearch, useSearchContextCheck };
+const SearchResultListLayout = (props) => {
+  const { loading, error, resultItems, renderResultItem, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(List, {
+    ...rest
+  }, loading ? /* @__PURE__ */ React.createElement(Progress, null) : null, !loading && error ? /* @__PURE__ */ React.createElement(ResponseErrorPanel, {
+    title: "Error encountered while fetching search results",
+    error
+  }) : null, !loading && !error && (resultItems == null ? void 0 : resultItems.length) ? resultItems.map((resultItem) => {
+    var _a;
+    return (_a = renderResultItem == null ? void 0 : renderResultItem(resultItem)) != null ? _a : null;
+  }) : null, !loading && !error && !(resultItems == null ? void 0 : resultItems.length) ? /* @__PURE__ */ React.createElement(EmptyState, {
+    missing: "data",
+    title: "Sorry, no results were found"
+  }) : null);
+};
+const SearchResultList = (props) => {
+  const {
+    query,
+    renderResultItem = ({ document }) => /* @__PURE__ */ React.createElement(HigherOrderDefaultResultListItem, {
+      key: document.location,
+      result: document
+    }),
+    ...rest
+  } = props;
+  return /* @__PURE__ */ React.createElement(AnalyticsContext, {
+    attributes: {
+      pluginId: "search",
+      extension: "SearchResultList"
+    }
+  }, /* @__PURE__ */ React.createElement(SearchResultState, {
+    query
+  }, ({ loading, error, value }) => /* @__PURE__ */ React.createElement(SearchResultListLayout, {
+    ...rest,
+    loading,
+    error,
+    resultItems: value == null ? void 0 : value.results,
+    renderResultItem
+  })));
+};
+
+const useStyles = makeStyles((theme) => ({
+  listSubheader: {
+    display: "flex",
+    alignItems: "center"
+  },
+  listSubheaderName: {
+    marginLeft: theme.spacing(1),
+    textTransform: "uppercase"
+  },
+  listSubheaderChip: {
+    color: theme.palette.text.secondary,
+    margin: theme.spacing(0, 0, 0, 1.5)
+  },
+  listSubheaderFilter: {
+    display: "flex",
+    color: theme.palette.text.secondary,
+    margin: theme.spacing(0, 0, 0, 1.5)
+  },
+  listSubheaderLink: {
+    marginLeft: "auto",
+    display: "flex",
+    alignItems: "center"
+  },
+  listSubheaderLinkIcon: {
+    fontSize: "inherit",
+    marginLeft: theme.spacing(0.5)
+  }
+}));
+const SearchResultGroupFilterFieldLayout = (props) => {
+  const classes = useStyles();
+  const { label, children, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(Chip, {
+    ...rest,
+    className: classes.listSubheaderFilter,
+    variant: "outlined",
+    label: /* @__PURE__ */ React.createElement(React.Fragment, null, label, ": ", children)
+  });
+};
+const NullIcon = () => null;
+const useSearchResultGroupTextFilterStyles = makeStyles((theme) => ({
+  root: {
+    fontSize: "inherit",
+    "&:focus": {
+      outline: "none",
+      background: theme.palette.common.white
+    },
+    "&:not(:focus)": {
+      cursor: "pointer",
+      color: theme.palette.primary.main,
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    }
+  }
+}));
+const SearchResultGroupTextFilterField = (props) => {
+  const classes = useSearchResultGroupTextFilterStyles();
+  const { label, value = "None", onChange, onDelete } = props;
+  const handleChange = useCallback(
+    (e) => {
+      onChange(e.target.value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ React.createElement(SearchResultGroupFilterFieldLayout, {
+    label,
+    onDelete
+  }, /* @__PURE__ */ React.createElement(Typography, {
+    role: "textbox",
+    component: "span",
+    className: classes.root,
+    onChange: handleChange,
+    contentEditable: true,
+    suppressContentEditableWarning: true
+  }, value));
+};
+const useSearchResultGroupSelectFilterStyles = makeStyles((theme) => ({
+  root: {
+    fontSize: "inherit",
+    "&:not(:focus)": {
+      cursor: "pointer",
+      color: theme.palette.primary.main,
+      "&:hover": {
+        textDecoration: "underline"
+      }
+    },
+    "&:focus": {
+      outline: "none"
+    },
+    "&>div:first-child": {
+      padding: 0
+    }
+  }
+}));
+const SearchResultGroupSelectFilterField = (props) => {
+  const classes = useSearchResultGroupSelectFilterStyles();
+  const { label, value = "none", onChange, onDelete, children } = props;
+  const handleChange = useCallback(
+    (e) => {
+      onChange(e.target.value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ React.createElement(SearchResultGroupFilterFieldLayout, {
+    label,
+    onDelete
+  }, /* @__PURE__ */ React.createElement(Select, {
+    className: classes.root,
+    value,
+    onChange: handleChange,
+    input: /* @__PURE__ */ React.createElement(InputBase, null),
+    IconComponent: NullIcon
+  }, /* @__PURE__ */ React.createElement(MenuItem, {
+    value: "none"
+  }, "None"), children));
+};
+function SearchResultGroupLayout(props) {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const {
+    loading,
+    error,
+    icon,
+    title,
+    titleProps = {},
+    link,
+    linkProps = {},
+    filterOptions,
+    renderFilterOption,
+    filterFields,
+    renderFilterField,
+    resultItems,
+    renderResultItem,
+    ...rest
+  } = props;
+  const handleClick = useCallback((e) => {
+    setAnchorEl(e.currentTarget);
+  }, []);
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+  return /* @__PURE__ */ React.createElement(List, {
+    ...rest
+  }, /* @__PURE__ */ React.createElement(ListSubheader, {
+    className: classes.listSubheader
+  }, icon, /* @__PURE__ */ React.createElement(Typography, {
+    className: classes.listSubheaderName,
+    component: "strong",
+    ...titleProps
+  }, title), filterOptions ? /* @__PURE__ */ React.createElement(Chip, {
+    className: classes.listSubheaderChip,
+    component: "button",
+    icon: /* @__PURE__ */ React.createElement(AddIcon, null),
+    variant: "outlined",
+    label: "Add filter",
+    "aria-controls": "filters-menu",
+    "aria-haspopup": "true",
+    onClick: handleClick
+  }) : null, filterOptions ? /* @__PURE__ */ React.createElement(Menu, {
+    id: "filters-menu",
+    anchorEl,
+    open: Boolean(anchorEl),
+    onClose: handleClose,
+    onClick: handleClose,
+    keepMounted: true
+  }, filterOptions.map(
+    (filterOption) => renderFilterOption ? renderFilterOption(filterOption) : /* @__PURE__ */ React.createElement(MenuItem, {
+      key: String(filterOption),
+      value: String(filterOption)
+    }, filterOption)
+  )) : null, filterFields == null ? void 0 : filterFields.map(
+    (filterField) => {
+      var _a;
+      return (_a = renderFilterField == null ? void 0 : renderFilterField(filterField)) != null ? _a : null;
+    }
+  ), /* @__PURE__ */ React.createElement(Link, {
+    className: classes.listSubheaderLink,
+    to: "/search",
+    ...linkProps
+  }, link != null ? link : /* @__PURE__ */ React.createElement(React.Fragment, null, "See all", /* @__PURE__ */ React.createElement(ArrowForwardIosIcon, {
+    className: classes.listSubheaderLinkIcon
+  })))), loading ? /* @__PURE__ */ React.createElement(Progress, null) : null, !loading && error ? /* @__PURE__ */ React.createElement(ResponseErrorPanel, {
+    title: "Error encountered while fetching search results",
+    error
+  }) : null, !loading && !error && (resultItems == null ? void 0 : resultItems.length) ? resultItems.map((resultItem) => {
+    var _a;
+    return (_a = renderResultItem == null ? void 0 : renderResultItem(resultItem)) != null ? _a : null;
+  }) : null, !loading && !error && !(resultItems == null ? void 0 : resultItems.length) ? /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(EmptyState, {
+    missing: "data",
+    title: "Sorry, no results were found"
+  })) : null);
+}
+function SearchResultGroup(props) {
+  const {
+    query,
+    linkProps = {},
+    renderResultItem = ({ document }) => /* @__PURE__ */ React.createElement(HigherOrderDefaultResultListItem, {
+      key: document.location,
+      result: document
+    }),
+    ...rest
+  } = props;
+  const to = `/search?${qs.stringify(
+    {
+      query: query.term,
+      types: query.types,
+      filters: query.filters,
+      pageCursor: query.pageCursor
+    },
+    { arrayFormat: "brackets" }
+  )}`;
+  return /* @__PURE__ */ React.createElement(AnalyticsContext, {
+    attributes: {
+      pluginId: "search",
+      extension: "SearchResultGroup"
+    }
+  }, /* @__PURE__ */ React.createElement(SearchResultState, {
+    query
+  }, ({ loading, error, value }) => {
+    var _a;
+    return /* @__PURE__ */ React.createElement(SearchResultGroupLayout, {
+      ...rest,
+      loading,
+      error,
+      linkProps: { to, ...linkProps },
+      resultItems: value == null ? void 0 : value.results,
+      renderResultItem,
+      filterFields: Object.keys((_a = query.filters) != null ? _a : {})
+    });
+  }));
+}
+
+export { AutocompleteFilter, CheckboxFilter, HigherOrderDefaultResultListItem as DefaultResultListItem, HighlightedSearchResultText, MockSearchApi, SearchAutocomplete, SearchAutocompleteDefaultOption, SearchBar, SearchBarBase, SearchContextProvider, SearchFilter, SearchResult, SearchResultApi, SearchResultComponent, SearchResultContext, SearchResultGroup, SearchResultGroupFilterFieldLayout, SearchResultGroupLayout, SearchResultGroupSelectFilterField, SearchResultGroupTextFilterField, SearchResultList, SearchResultListLayout, SearchResultPager, SearchResultState, SelectFilter, searchApiRef, useSearch, useSearchContextCheck };
 //# sourceMappingURL=index.esm.js.map