export component as extensions

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

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

@@ -171,7 +171,7 @@ const SelectFilter = ({ fieldName, values }: ValuedFilterProps) => {
   );
 };
 
-export const FiltersNext = ({ definitions }: FiltersProps) => {
+export const SearchFiltersNext = ({ definitions }: FiltersProps) => {
   const classes = useFilterStyles();
 
   return (

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

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

plugins/search/src/components/SearchPageNext/SearchPageNext.tsx

@@ -20,7 +20,7 @@ import { Grid } from '@material-ui/core';
 import { SearchBarNext } from '../SearchBarNext';
 import { SearchResultNext } from '../SearchResultNext';
 import { SearchContextProvider } from '../SearchContext';
-import { FiltersNext, FilterType } from '../FiltersNext';
+import { SearchFiltersNext, FilterType } from '../SearchFiltersNext';
 
 const defaultFilterDefinitions = [
   {
@@ -46,7 +46,7 @@ export const SearchPageNext = () => {
               <SearchBarNext />
             </Grid>
             <Grid item xs={3}>
-              <FiltersNext definitions={defaultFilterDefinitions} />
+              <SearchFiltersNext definitions={defaultFilterDefinitions} />
             </Grid>
             <Grid item xs={9}>
               <SearchResultNext />

plugins/search/src/components/index.tsx

@@ -15,7 +15,7 @@
  */
 
 export * from './Filters';
-export * from './FiltersNext';
+export * from './SearchFiltersNext';
 export * from './SearchBar';
 export * from './SearchBarNext';
 export * from './SearchPage';

plugins/search/src/index.ts

@@ -20,6 +20,9 @@ export {
   searchPlugin as plugin,
   SearchPage,
   SearchPageNext,
+  SearchBarNext,
+  SearchResultNext,
+  SearchFiltersNext,
 } from './plugin';
 export {
   Filters,

plugins/search/src/plugin.ts

@@ -19,6 +19,7 @@ import {
   createRouteRef,
   createRoutableExtension,
   discoveryApiRef,
+  createComponentExtension,
 } from '@backstage/core';
 import { SearchClient, searchApiRef } from './apis';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
@@ -70,3 +71,30 @@ export const SearchPageNext = searchPlugin.provide(
     mountPoint: rootNextRouteRef,
   }),
 );
+
+export const SearchBarNext = searchPlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () =>
+        import('./components/SearchBarNext').then(m => m.SearchBarNext),
+    },
+  }),
+);
+
+export const SearchResultNext = searchPlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () =>
+        import('./components/SearchResultNext').then(m => m.SearchResultNext),
+    },
+  }),
+);
+
+export const SearchFiltersNext = searchPlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () =>
+        import('./components/SearchFiltersNext').then(m => m.SearchFiltersNext),
+    },
+  }),
+);