Merge pull request #28395 from marknotfound/search-extensions

Search: Add result type and filter extension points to the search plugin

plugins/search/report-alpha.api.md

@@ -12,6 +12,7 @@ import { FrontendPlugin } from '@backstage/frontend-plugin-api';
 import { IconComponent } from '@backstage/core-plugin-api';
 import { default as React_2 } from 'react';
 import { RouteRef } from '@backstage/frontend-plugin-api';
+import { SearchFilterExtensionComponent } from '@backstage/plugin-search-react/alpha';
 import { SearchResultItemExtensionComponent } from '@backstage/plugin-search-react/alpha';
 import { SearchResultItemExtensionPredicate } from '@backstage/plugin-search-react/alpha';
 
@@ -98,6 +99,34 @@ const _default: FrontendPlugin<
             optional: false;
           }
         >;
+        resultTypes: ExtensionInput<
+          ConfigurableExtensionDataRef<
+            {
+              value: string;
+              name: string;
+              icon: JSX.Element;
+            },
+            'search.filters.result-types.type',
+            {}
+          >,
+          {
+            singleton: false;
+            optional: false;
+          }
+        >;
+        searchFilters: ExtensionInput<
+          ConfigurableExtensionDataRef<
+            {
+              component: SearchFilterExtensionComponent;
+            },
+            'search.filters.filter',
+            {}
+          >,
+          {
+            singleton: false;
+            optional: false;
+          }
+        >;
       };
       kind: 'page';
       name: undefined;
@@ -184,6 +213,34 @@ export const searchPage: ExtensionDefinition<{
         optional: false;
       }
     >;
+    resultTypes: ExtensionInput<
+      ConfigurableExtensionDataRef<
+        {
+          value: string;
+          name: string;
+          icon: JSX.Element;
+        },
+        'search.filters.result-types.type',
+        {}
+      >,
+      {
+        singleton: false;
+        optional: false;
+      }
+    >;
+    searchFilters: ExtensionInput<
+      ConfigurableExtensionDataRef<
+        {
+          component: SearchFilterExtensionComponent;
+        },
+        'search.filters.filter',
+        {}
+      >,
+      {
+        singleton: false;
+        optional: false;
+      }
+    >;
   };
   kind: 'page';
   name: undefined;

plugins/search/src/alpha.tsx

@@ -61,7 +61,11 @@ import {
 } from '@backstage/plugin-search-react';
 import { SearchResult } from '@backstage/plugin-search-common';
 import { searchApiRef } from '@backstage/plugin-search-react';
-import { SearchResultListItemBlueprint } from '@backstage/plugin-search-react/alpha';
+import {
+  SearchResultListItemBlueprint,
+  SearchFilterResultTypeBlueprint,
+  SearchFilterBlueprint,
+} from '@backstage/plugin-search-react/alpha';
 
 import { rootRouteRef } from './plugin';
 import { SearchClient } from './apis';
@@ -106,6 +110,12 @@ export const searchPage = PageBlueprint.makeWithOverrides({
   },
   inputs: {
     items: createExtensionInput([SearchResultListItemBlueprint.dataRefs.item]),
+    resultTypes: createExtensionInput([
+      SearchFilterResultTypeBlueprint.dataRefs.resultType,
+    ]),
+    searchFilters: createExtensionInput([
+      SearchFilterBlueprint.dataRefs.searchFilters,
+    ]),
   },
   factory(originalFactory, { config, inputs }) {
     return originalFactory({
@@ -124,6 +134,15 @@ export const searchPage = PageBlueprint.makeWithOverrides({
           );
         };
 
+        const resultTypes = inputs.resultTypes.map(item =>
+          item.get(SearchFilterResultTypeBlueprint.dataRefs.resultType),
+        );
+
+        const additionalSearchFilters = inputs.searchFilters.map(
+          item =>
+            item.get(SearchFilterBlueprint.dataRefs.searchFilters).component,
+        );
+
         const Component = () => {
           const classes = useSearchPageStyles();
           const { isMobile } = useSidebarPinState();
@@ -155,7 +174,7 @@ export const searchPage = PageBlueprint.makeWithOverrides({
                             name: 'Documentation',
                             icon: <DocsIcon />,
                           },
-                        ]}
+                        ].concat(resultTypes)}
                       />
                       <Paper className={classes.filters}>
                         {types.includes('techdocs') && (
@@ -193,6 +212,9 @@ export const searchPage = PageBlueprint.makeWithOverrides({
                           name="lifecycle"
                           values={['experimental', 'production']}
                         />
+                        {additionalSearchFilters.map(SearchFilterComponent => (
+                          <SearchFilterComponent className={classes.filter} />
+                        ))}
                       </Paper>
                     </Grid>
                   )}