feat(confluence): create search result list item extension for ConfluenceResultListItem (#220)

Signed-off-by: bejanssens <[email protected]>

Author: benjidotsh

workspaces/confluence/.changeset/thirty-feet-speak.md

@@ -0,0 +1,5 @@
+---
+'@philips-software/backstage-plugin-search-confluence-frontend': minor
+---
+
+Added search result list item extension for ConfluenceResultListItem

workspaces/confluence/plugins/search-confluence-frontend/README.md

@@ -39,23 +39,7 @@ import {
 />
 
 <SearchResult>
-  {({ results }) => (
-    <List>
-      {results.map(({ type, document, highlight, rank }) => {
-        switch (type) {
-         // Add the following case to the switch statement above the default case
-          case 'confluence':
-            return (
-              <ConfluenceResultListItem
-                key={document.location}
-                result={document}
-                highlight={highlight}
-              />
-            );
-         // ...
-        }
-      })}
-    </List>
-  )}
+  // ...
+  <ConfluenceResultListItem />
 </SearchResult>
 ```

workspaces/confluence/plugins/search-confluence-frontend/report.api.md

@@ -3,10 +3,13 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
+/// <reference types="react" />
+
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { IndexableDocument } from '@backstage/plugin-search-common';
 import { default as React_2 } from 'react';
 import { ResultHighlight } from '@backstage/plugin-search-common';
+import { SearchResultListItemExtensionProps } from '@backstage/plugin-search-react';
 
 // @public
 export interface ConfluenceResultItemProps {
@@ -15,10 +18,9 @@ export interface ConfluenceResultItemProps {
 }
 
 // @public
-export const ConfluenceResultListItem: ({
-  result,
-  highlight,
-}: ConfluenceResultItemProps) => React_2.JSX.Element | null;
+export const ConfluenceResultListItem: (
+  props: SearchResultListItemExtensionProps<ConfluenceResultItemProps>,
+) => JSX.Element | null;
 
 // @public
 export const ConfluenceSearchIcon: () => React_2.JSX.Element;

workspaces/confluence/plugins/search-confluence-frontend/src/index.ts

@@ -4,9 +4,9 @@
  * @packageDocumentation
  */
 
-export { searchConfluenceFrontendPlugin } from './plugin';
-export { ConfluenceSearchIcon } from './icons';
 export {
+  searchConfluenceFrontendPlugin,
   ConfluenceResultListItem,
-  type ConfluenceResultItemProps,
-} from './components/ConfluenceResultListItem';
+} from './plugin';
+export { ConfluenceSearchIcon } from './icons';
+export { type ConfluenceResultItemProps } from './components/ConfluenceResultListItem';

workspaces/confluence/plugins/search-confluence-frontend/src/plugin.ts

@@ -1,4 +1,9 @@
 import { createPlugin } from '@backstage/core-plugin-api';
+import {
+  createSearchResultListItemExtension,
+  SearchResultListItemExtensionProps,
+} from '@backstage/plugin-search-react';
+import { ConfluenceResultItemProps } from './components/ConfluenceResultListItem';
 
 /**
  * A plugin to display search results from Confluence.
@@ -8,3 +13,21 @@ import { createPlugin } from '@backstage/core-plugin-api';
 export const searchConfluenceFrontendPlugin = createPlugin({
   id: 'search-confluence-frontend',
 });
+
+/**
+ * A search result item extension for Confluence.
+ *
+ * @public
+ */
+export const ConfluenceResultListItem: (
+  props: SearchResultListItemExtensionProps<ConfluenceResultItemProps>,
+) => JSX.Element | null = searchConfluenceFrontendPlugin.provide(
+  createSearchResultListItemExtension({
+    name: 'ConfluenceResultListItem',
+    component: () =>
+      import('./components/ConfluenceResultListItem').then(
+        m => m.ConfluenceResultListItem,
+      ),
+    predicate: result => result.type === 'confluence',
+  }),
+);