@backstage/plugin-search 0.5.6 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @backstage/plugin-search
 
+## 0.6.0
+
+### Minor Changes
+
+- 2f0d3d3278: Forwarding classes to HomePageSearchBar instead of using className prop. For custom styles of the HomePageSearchBar, use classes prop instead:
+
+  ```diff
+  <HomePageSearchBar
+  -  className={searchBar}
+  +  classes={{ root: classes.searchBar }}
+    placeholder="Search"
+  />
+  ```
+
+- 1dbe63ec39: The way labels are controlled on both the `<SearchFilter.Checkbox />` and
+  `<SearchFilter.Select />` components has changed. Previously, the string passed
+  on the `name` prop (which controls the field being filtered on) was also
+  rendered as the field label. Now, if you want a label rendered, it must be
+  passed on the new `label` prop. If no `label` is provided, no label will be
+  rendered.
+
+### Patch Changes
+
+- 4aca2a5307: Introduces a `<SearchFilter.Autocomplete />` variant, which can be used as either a single- or multi-select autocomplete filter.
+
+  This variant, as well as `<SearchFilter.Select />`, now also supports loading allowed values asynchronously by passing a function that resolves the list of values to the `values` prop. (An optional `valuesDebounceMs` prop may also be provided to control the debounce time).
+
+  Check the [search plugin storybook](https://backstage.io/storybook/?path=/story/plugins-search-searchfilter) to see how to leverage these new additions.
+
+- Updated dependencies
+  - @backstage/core-components@0.8.6
+  - @backstage/search-common@0.2.2
+
 ## 0.5.6
 
 ### Patch Changes

package/dist/esm/{index-4d972deb.esm.js → index-0cc5ccb8.esm.js}

@@ -1,4 +1,4 @@
-export { c as SearchResult } from './index-1333c262.esm.js';
+export { S as SearchPage } from './index-19c51c5a.esm.js';
 import '@backstage/core-plugin-api';
 import '@backstage/errors';
 import 'qs';
@@ -10,6 +10,8 @@ import '@material-ui/icons/Search';
 import '@material-ui/icons/Clear';
 import 'react-use/lib/useAsync';
 import 'react-use/lib/usePrevious';
+import '@material-ui/lab';
+import 'react-use/lib/useAsyncFn';
 import '@material-ui/icons/Launch';
 import '@material-ui/core/styles';
 import '@backstage/core-components';
@@ -18,11 +20,10 @@ import '@material-ui/icons/ArrowForwardIos';
 import 'react-router';
 import '@material-ui/core/InputBase';
 import '@material-ui/core/IconButton';
-import '@material-ui/lab';
 import '@backstage/plugin-catalog-react';
 import '@backstage/catalog-model';
 import 'react-use/lib/useEffectOnce';
 import '@material-ui/icons/ExpandMore';
 import '@material-ui/icons/FontDownload';
 import 'react-router-dom';
-//# sourceMappingURL=index-4d972deb.esm.js.map
+//# sourceMappingURL=index-0cc5ccb8.esm.js.map

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

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

package/dist/esm/{index-1333c262.esm.js → index-19c51c5a.esm.js}

@@ -1,14 +1,16 @@
 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 React, { createContext, useState, useCallback, useEffect, useContext, Fragment, cloneElement } from 'react';
+import React, { createContext, useState, useCallback, useEffect, useContext, useRef, Fragment, cloneElement } from 'react';
 import FilterListIcon from '@material-ui/icons/FilterList';
-import { makeStyles, IconButton, Typography, Card, CardHeader, Button, Divider, CardContent, Select, MenuItem, List, ListItem, Checkbox, ListItemText, InputBase, InputAdornment, FormControl, FormLabel, FormControlLabel, InputLabel, ListItemIcon, Box, useTheme, Dialog, DialogTitle, Paper, DialogContent, Grid, DialogActions, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab, Chip } from '@material-ui/core';
+import { makeStyles, IconButton, Typography, Card, CardHeader, Button, Divider, CardContent, Select, MenuItem, List, ListItem, Checkbox, ListItemText, InputBase, InputAdornment, TextField, Chip, FormControl, FormLabel, FormControlLabel, InputLabel, ListItemIcon, Box, useTheme, Dialog, DialogTitle, Paper, DialogContent, Grid, DialogActions, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab } 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 { Autocomplete, Alert } from '@material-ui/lab';
+import useAsyncFn from 'react-use/lib/useAsyncFn';
 import LaunchIcon from '@material-ui/icons/Launch';
 import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
 import { Link, Progress, ResponseErrorPanel, EmptyState, useContent, Table, useQueryParamState, Page, Header, Content, SidebarSearchField } from '@backstage/core-components';
@@ -17,7 +19,6 @@ import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 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 useEffectOnce from 'react-use/lib/useEffectOnce';
@@ -305,27 +306,123 @@ const SearchBar$1 = ({ onChange, ...props }) => {
   });
 };
 
-const useStyles$9 = makeStyles({
-  label: {
-    textTransform: "capitalize"
+const useAsyncFilterValues = (fn, inputValue, defaultValues = [], debounce = 250) => {
+  const valuesMemo = useRef({});
+  const definiteFn = fn || (() => Promise.resolve([]));
+  const [state, callback] = useAsyncFn(definiteFn, [inputValue], {
+    loading: true
+  });
+  useDebounce(() => {
+    if (valuesMemo.current[inputValue] === void 0) {
+      valuesMemo.current[inputValue] = callback(inputValue).then((values) => {
+        valuesMemo.current[inputValue] = values;
+        return values;
+      });
+    }
+  }, debounce, [callback, inputValue]);
+  if (defaultValues.length) {
+    return {
+      loading: false,
+      value: defaultValues
+    };
   }
-});
-const CheckboxFilter = ({
-  className,
-  name,
-  defaultValue,
-  values = []
-}) => {
-  const classes = useStyles$9();
-  const { filters, setFilters } = useSearch();
+  const possibleValue = valuesMemo.current[inputValue];
+  if (Array.isArray(possibleValue)) {
+    return {
+      loading: false,
+      value: possibleValue
+    };
+  }
+  return state;
+};
+const useDefaultFilterValue = (name, defaultValue) => {
+  const { setFilters } = useSearch();
   useEffect(() => {
-    if (Array.isArray(defaultValue)) {
+    if (defaultValue && [defaultValue].flat().length > 0) {
       setFilters((prevFilters) => ({
         ...prevFilters,
         [name]: defaultValue
       }));
     }
   }, []);
+};
+
+const AutocompleteFilter = (props) => {
+  const {
+    className,
+    defaultValue,
+    name,
+    values: givenValues,
+    valuesDebounceMs,
+    label,
+    filterSelectedOptions,
+    limitTags,
+    multiple
+  } = props;
+  const [inputValue, setInputValue] = useState("");
+  useDefaultFilterValue(name, defaultValue);
+  const asyncValues = typeof givenValues === "function" ? givenValues : void 0;
+  const defaultValues = typeof givenValues === "function" ? void 0 : givenValues;
+  const { value: values, loading } = useAsyncFilterValues(asyncValues, inputValue, defaultValues, valuesDebounceMs);
+  const { filters, setFilters } = useSearch();
+  const filterValue = filters[name] || (multiple ? [] : null);
+  const handleChange = (_, newValue) => {
+    setFilters((prevState) => {
+      const { [name]: filter, ...others } = prevState;
+      if (newValue) {
+        return { ...others, [name]: newValue };
+      }
+      return { ...others };
+    });
+  };
+  const renderInput = (params) => /* @__PURE__ */ React.createElement(TextField, {
+    ...params,
+    name: "search",
+    variant: "outlined",
+    label,
+    fullWidth: true
+  });
+  const renderTags = (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ React.createElement(Chip, {
+    label: option,
+    color: "primary",
+    ...getTagProps({ index })
+  }));
+  return /* @__PURE__ */ React.createElement(Autocomplete, {
+    filterSelectedOptions,
+    limitTags,
+    multiple,
+    className,
+    id: `${multiple ? "multi-" : ""}select-filter-${name}--select`,
+    options: values || [],
+    loading,
+    value: filterValue,
+    onChange: handleChange,
+    onInputChange: (_, newValue) => setInputValue(newValue),
+    renderInput,
+    renderTags
+  });
+};
+
+const useStyles$9 = makeStyles({
+  label: {
+    textTransform: "capitalize"
+  }
+});
+const CheckboxFilter = (props) => {
+  const {
+    className,
+    defaultValue,
+    label,
+    name,
+    values: givenValues = [],
+    valuesDebounceMs
+  } = props;
+  const classes = useStyles$9();
+  const { filters, setFilters } = useSearch();
+  useDefaultFilterValue(name, defaultValue);
+  const asyncValues = typeof givenValues === "function" ? givenValues : void 0;
+  const defaultValues = typeof givenValues === "function" ? void 0 : givenValues;
+  const { value: values = [], loading } = useAsyncFilterValues(asyncValues, "", defaultValues, valuesDebounceMs);
   const handleChange = (e) => {
     const {
       target: { value, checked }
@@ -339,11 +436,12 @@ const CheckboxFilter = ({
   };
   return /* @__PURE__ */ React.createElement(FormControl, {
     className,
+    disabled: loading,
     fullWidth: true,
     "data-testid": "search-checkboxfilter-next"
-  }, /* @__PURE__ */ React.createElement(FormLabel, {
+  }, label ? /* @__PURE__ */ React.createElement(FormLabel, {
     className: classes.label
-  }, name), values.map((value) => {
+  }, label) : null, values.map((value) => {
     var _a;
     return /* @__PURE__ */ React.createElement(FormControlLabel, {
       key: value,
@@ -360,22 +458,21 @@ const CheckboxFilter = ({
     });
   }));
 };
-const SelectFilter = ({
-  className,
-  name,
-  defaultValue,
-  values = []
-}) => {
+const SelectFilter = (props) => {
+  const {
+    className,
+    defaultValue,
+    label,
+    name,
+    values: givenValues,
+    valuesDebounceMs
+  } = props;
   const classes = useStyles$9();
+  useDefaultFilterValue(name, defaultValue);
+  const asyncValues = typeof givenValues === "function" ? givenValues : void 0;
+  const defaultValues = typeof givenValues === "function" ? void 0 : givenValues;
+  const { value: values = [], loading } = useAsyncFilterValues(asyncValues, "", defaultValues, valuesDebounceMs);
   const { filters, setFilters } = useSearch();
-  useEffect(() => {
-    if (typeof defaultValue === "string") {
-      setFilters((prevFilters) => ({
-        ...prevFilters,
-        [name]: defaultValue
-      }));
-    }
-  }, []);
   const handleChange = (e) => {
     const {
       target: { value }
@@ -386,14 +483,15 @@ const SelectFilter = ({
     });
   };
   return /* @__PURE__ */ React.createElement(FormControl, {
+    disabled: loading,
     className,
     variant: "filled",
     fullWidth: true,
     "data-testid": "search-selectfilter-next"
-  }, /* @__PURE__ */ React.createElement(InputLabel, {
+  }, label ? /* @__PURE__ */ React.createElement(InputLabel, {
     className: classes.label,
     margin: "dense"
-  }, name), /* @__PURE__ */ React.createElement(Select, {
+  }, label) : null, /* @__PURE__ */ React.createElement(Select, {
     variant: "outlined",
     value: filters[name] || "",
     onChange: handleChange
@@ -404,7 +502,10 @@ const SelectFilter = ({
     value
   }, value))));
 };
-const SearchFilter = ({ component: Element, ...props }) => /* @__PURE__ */ React.createElement(Element, {
+const SearchFilter = ({
+  component: Element,
+  ...props
+}) => /* @__PURE__ */ React.createElement(Element, {
   ...props
 });
 SearchFilter.Checkbox = (props) => /* @__PURE__ */ React.createElement(SearchFilter, {
@@ -415,6 +516,10 @@ SearchFilter.Select = (props) => /* @__PURE__ */ React.createElement(SearchFilte
   ...props,
   component: SelectFilter
 });
+SearchFilter.Autocomplete = (props) => /* @__PURE__ */ React.createElement(SearchFilter, {
+  ...props,
+  component: AutocompleteFilter
+});
 const SearchFilterNext = SearchFilter;
 
 const DefaultResultListItem$1 = ({
@@ -511,54 +616,54 @@ const searchPlugin = createPlugin({
 });
 const SearchPage$1 = searchPlugin.provide(createRoutableExtension({
   name: "SearchPage",
-  component: () => import('./index-cdb6d423.esm.js').then((m) => m.SearchPage),
+  component: () => import('./index-0cc5ccb8.esm.js').then((m) => m.SearchPage),
   mountPoint: rootRouteRef
 }));
 const SearchPageNext = searchPlugin.provide(createRoutableExtension({
   name: "SearchPageNext",
-  component: () => import('./index-cdb6d423.esm.js').then((m) => m.SearchPage),
+  component: () => import('./index-0cc5ccb8.esm.js').then((m) => m.SearchPage),
   mountPoint: rootNextRouteRef
 }));
 searchPlugin.provide(createComponentExtension({
   name: "SearchBar",
   component: {
-    lazy: () => import('./index-573ac81a.esm.js').then((m) => m.SearchBar)
+    lazy: () => import('./index-1d0bef15.esm.js').then((m) => m.SearchBar)
   }
 }));
 const SearchBarNext = searchPlugin.provide(createComponentExtension({
   name: "SearchBarNext",
   component: {
-    lazy: () => import('./index-573ac81a.esm.js').then((m) => m.SearchBar)
+    lazy: () => import('./index-1d0bef15.esm.js').then((m) => m.SearchBar)
   }
 }));
 const SearchResult$1 = searchPlugin.provide(createComponentExtension({
   name: "SearchResult",
   component: {
-    lazy: () => import('./index-4d972deb.esm.js').then((m) => m.SearchResult)
+    lazy: () => import('./index-eaf72cdc.esm.js').then((m) => m.SearchResult)
   }
 }));
 searchPlugin.provide(createComponentExtension({
   name: "SearchResultNext",
   component: {
-    lazy: () => import('./index-4d972deb.esm.js').then((m) => m.SearchResult)
+    lazy: () => import('./index-eaf72cdc.esm.js').then((m) => m.SearchResult)
   }
 }));
 const SidebarSearchModal = searchPlugin.provide(createComponentExtension({
   name: "SidebarSearchModal",
   component: {
-    lazy: () => import('./index-b4c3fd6c.esm.js').then((m) => m.SidebarSearchModal)
+    lazy: () => import('./index-968bef26.esm.js').then((m) => m.SidebarSearchModal)
   }
 }));
 const DefaultResultListItem = searchPlugin.provide(createComponentExtension({
   name: "DefaultResultListItem",
   component: {
-    lazy: () => import('./index-a64e73f4.esm.js').then((m) => m.DefaultResultListItem)
+    lazy: () => import('./index-b4cc532f.esm.js').then((m) => m.DefaultResultListItem)
   }
 }));
 const HomePageSearchBar = searchPlugin.provide(createComponentExtension({
   name: "HomePageSearchBar",
   component: {
-    lazy: () => import('./index-207ebc98.esm.js').then((m) => m.HomePageSearchBar)
+    lazy: () => import('./index-792f3072.esm.js').then((m) => m.HomePageSearchBar)
   }
 }));
 
@@ -1290,4 +1395,4 @@ const SidebarSearch = (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, 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-1333c262.esm.js.map
+//# sourceMappingURL=index-19c51c5a.esm.js.map