Review feedback.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
This commit is contained in:
Eric Peterson
2022-01-22 18:05:21 +01:00
parent 1dbe63ec39
commit 8f370b038d
11 changed files with 115 additions and 89 deletions
+7 -7
View File
@@ -2,7 +2,7 @@
'@backstage/create-app': patch
---
An example instance of the new `<SearchFilter.Autocomplete />` was added to the composed `SearchPage.tsx`, allowing searches bound to the `techdocs` type to be filtered by entity name.
An example instance of a `<SearchFilter.Select />` with asynchronously loaded values was added to the composed `SearchPage.tsx`, allowing searches bound to the `techdocs` type to be filtered by entity name.
This is an entirely optional change; if you wish to adopt it, you can make the following (or similar) changes to your search page layout:
@@ -50,12 +50,12 @@ This is an entirely optional change; if you wish to adopt it, you can make the f
/>
<Paper className={classes.filters}>
+ {types.includes('techdocs') && (
+ <SearchFilter.Autocomplete
+ <SearchFilter.Select
+ className={classes.filter}
+ label="Entity"
+ name="name"
+ asyncValues={async partial => {
+ // Return a list of entitis which are documented.
+ values={async () => {
+ // Return a list of entities which are documented.
+ const { items } = await catalogApi.getEntities({
+ fields: ['metadata.name'],
+ filter: {
@@ -64,9 +64,9 @@ This is an entirely optional change; if you wish to adopt it, you can make the f
+ },
+ });
+
+ return items
+ .map(entity => entity.metadata.name)
+ .filter(name => name.includes(partial));
+ const names = items.map(entity => entity.metadata.name);
+ names.sort();
+ return names;
+ }}
+ />
+ )}
+1 -1
View File
@@ -4,6 +4,6 @@
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 with a new `asyncValues` prop, which takes an asynchronous function that resolves to the list of values (an optional `asyncDebounce` prop may also be provided).
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.