consistent composability between result list items and filters

Signed-off-by: Emma Indal <emma.indahl@gmail.com>
Signed-off-by: Eric Peterson <ericpeterson@spotify.com>

packages/app/src/components/search/SearchPage.tsx

@@ -17,9 +17,15 @@
 import React from 'react';
 import { Content, Header, Lifecycle, Page } from '@backstage/core';
 import { Grid, List } from '@material-ui/core';
-import { SearchBarNext } from '@backstage/plugin-search';
-import { SearchResultNext, DefaultResultListItem } from '@backstage/plugin-search';
-import { SearchFiltersNext, FilterType } from '@backstage/plugin-search';
+import {
+  SearchBarNext,
+  SearchResultNext,
+  DefaultResultListItem,
+  SearchFiltersNext,
+  FilterType,
+  CheckBoxFilter,
+  SelectFilter,
+} from '@backstage/plugin-search';
 import { CatalogResultListItem } from '@backstage/plugin-catalog';
 
 const filterDefinitions = [
@@ -44,11 +50,36 @@ export const searchPage = (
           <SearchBarNext />
         </Grid>
         <Grid item xs={3}>
-          <SearchFiltersNext definitions={filterDefinitions} />
+          <SearchFiltersNext>
+            <>
+              {filterDefinitions.map(definition => {
+                switch (definition.type) {
+                  case 'checkbox':
+                    return (
+                      <CheckBoxFilter
+                        key={definition.field}
+                        fieldName={definition.field}
+                        values={definition.values}
+                      />
+                    );
+                  case 'select':
+                    return (
+                      <SelectFilter
+                        key={definition.field}
+                        fieldName={definition.field}
+                        values={definition.values}
+                      />
+                    );
+                  default:
+                    return null;
+                }
+              })}
+            </>
+          </SearchFiltersNext>
         </Grid>
         <Grid item xs={9}>
           <SearchResultNext>
-            {({results}) => (
+            {({ results }) => (
               <List>
                 {results.map(result => {
                   switch (result.type) {

plugins/search/src/components/SearchFiltersNext/SearchFiltersNext.tsx

@@ -55,7 +55,7 @@ export type FilterOptions = {
 };
 
 type FiltersProps = {
-  definitions: FilterDefinition[];
+  children: React.ReactChild;
 };
 
 type ValuedFilterProps = {
@@ -79,7 +79,7 @@ export type FilterDefinition = {
   values: string[];
 };
 
-const CheckBoxFilter = ({ fieldName, values }: ValuedFilterProps) => {
+export const CheckBoxFilter = ({ fieldName, values }: ValuedFilterProps) => {
   const { filters, setFilters } = useSearch();
   const classes = useCheckBoxStyles();
 
@@ -134,7 +134,7 @@ const CheckBoxFilter = ({ fieldName, values }: ValuedFilterProps) => {
   );
 };
 
-const SelectFilter = ({ fieldName, values }: ValuedFilterProps) => {
+export const SelectFilter = ({ fieldName, values }: ValuedFilterProps) => {
   const { filters, setFilters } = useSearch();
   const classes = useSelectStyles();
 
@@ -171,33 +171,8 @@ const SelectFilter = ({ fieldName, values }: ValuedFilterProps) => {
   );
 };
 
-export const SearchFiltersNext = ({ definitions }: FiltersProps) => {
+export const SearchFiltersNext = ({ children }: FiltersProps) => {
   const classes = useFilterStyles();
 
-  return (
-    <Card className={classes.filters}>
-      {definitions.map(definition => {
-        switch (definition.type) {
-          case 'checkbox':
-            return (
-              <CheckBoxFilter
-                key={definition.field}
-                fieldName={definition.field}
-                values={definition.values}
-              />
-            );
-          case 'select':
-            return (
-              <SelectFilter
-                key={definition.field}
-                fieldName={definition.field}
-                values={definition.values}
-              />
-            );
-          default:
-            return null;
-        }
-      })}
-    </Card>
-  );
+  return <Card className={classes.filters}>{children}</Card>;
 };

plugins/search/src/components/SearchFiltersNext/index.tsx

@@ -15,4 +15,9 @@
  */
 
 export { FiltersButtonNext } from './FiltersButtonNext';
-export { SearchFiltersNext, FilterType } from './SearchFiltersNext';
+export {
+  SearchFiltersNext,
+  CheckBoxFilter,
+  SelectFilter,
+  FilterType,
+} from './SearchFiltersNext';

plugins/search/src/index.ts

@@ -29,6 +29,8 @@ export {
   Filters,
   FiltersButton,
   FilterType,
+  CheckBoxFilter,
+  SelectFilter,
   SearchBar,
   SearchContextProvider,
   useSearch,