From 5f16dddc96493e460a4b58685087ef672f076959 Mon Sep 17 00:00:00 2001
From: Camila Belo <camilaibs@gmail.com>
Date: Sun, 22 Jan 2023 19:42:58 +0100
Subject: [PATCH] feat(search): use extensions on search pages and modals

Signed-off-by: Camila Belo <camilaibs@gmail.com>
---
 .../app/src/components/search/SearchModal.tsx | 82 +++----------------
 .../app/src/components/search/SearchPage.tsx  | 55 ++-----------
 .../app/src/components/search/SearchPage.tsx  | 40 +--------
 .../components/SearchModal/SearchModal.tsx    | 27 +-----
 4 files changed, 24 insertions(+), 180 deletions(-)

diff --git a/packages/app/src/components/search/SearchModal.tsx b/packages/app/src/components/search/SearchModal.tsx
index 527351a857..4694d56390 100644
--- a/packages/app/src/components/search/SearchModal.tsx
+++ b/packages/app/src/components/search/SearchModal.tsx
@@ -21,7 +21,6 @@ import {
   DialogContent,
   DialogTitle,
   Grid,
-  List,
   makeStyles,
   Paper,
   useTheme,
@@ -44,9 +43,8 @@ import {
 import { ToolSearchResultListItem } from '@backstage/plugin-explore';
 import { searchPlugin, SearchType } from '@backstage/plugin-search';
 import {
-  DefaultResultListItem,
-  SearchFilter,
   SearchBar,
+  SearchFilter,
   SearchResult,
   SearchResultPager,
   useSearch,
@@ -93,7 +91,7 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
     searchBarRef?.current?.focus();
   });
 
-  const handleSearchResulClick = useCallback(() => {
+  const handleSearchResultClick = useCallback(() => {
     toggleModal();
     setTimeout(focusContent, transitions.duration.leavingScreen);
   }, [toggleModal, focusContent, transitions]);
@@ -101,11 +99,11 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
   const handleSearchBarKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
       if (e.key === 'Enter') {
+        handleSearchResultClick();
         navigate(searchPagePath);
-        toggleModal();
       }
     },
-    [navigate, toggleModal, searchPagePath],
+    [navigate, searchPagePath, handleSearchResultClick],
   );
 
   return (
@@ -189,7 +187,7 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
               alignItems="center"
             >
               <Grid item>
-                <Link to={searchPagePath} onClick={handleSearchResulClick}>
+                <Link to={searchPagePath} onClick={handleSearchResultClick}>
                   <Typography
                     component="span"
                     className={classes.viewResultsLink}
@@ -202,69 +200,13 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
             </Grid>
           </Grid>
           <Grid item xs>
-            <SearchResult>
-              {({ results }) => (
-                <List>
-                  {results.map(({ type, document, highlight, rank }) => {
-                    let resultItem;
-                    switch (type) {
-                      case 'software-catalog':
-                        resultItem = (
-                          <CatalogSearchResultListItem
-                            icon={<CatalogIcon />}
-                            key={document.location}
-                            result={document}
-                            highlight={highlight}
-                            rank={rank}
-                          />
-                        );
-                        break;
-                      case 'techdocs':
-                        resultItem = (
-                          <TechDocsSearchResultListItem
-                            icon={<DocsIcon />}
-                            key={document.location}
-                            result={document}
-                            highlight={highlight}
-                            rank={rank}
-                          />
-                        );
-                        break;
-                      case 'tools':
-                        resultItem = (
-                          <ToolSearchResultListItem
-                            icon={<BuildIcon />}
-                            key={document.location}
-                            result={document}
-                            highlight={highlight}
-                            rank={rank}
-                          />
-                        );
-                        break;
-                      default:
-                        resultItem = (
-                          <DefaultResultListItem
-                            key={document.location}
-                            result={document}
-                            highlight={highlight}
-                            rank={rank}
-                          />
-                        );
-                    }
-                    return (
-                      <div
-                        role="button"
-                        tabIndex={0}
-                        key={`${document.location}-btn`}
-                        onClick={handleSearchResulClick}
-                        onKeyDown={handleSearchResulClick}
-                      >
-                        {resultItem}
-                      </div>
-                    );
-                  })}
-                </List>
-              )}
+            <SearchResult
+              onClick={handleSearchResultClick}
+              onKeyDown={handleSearchResultClick}
+            >
+              <CatalogSearchResultListItem icon={<CatalogIcon />} />
+              <TechDocsSearchResultListItem icon={<DocsIcon />} />
+              <ToolSearchResultListItem icon={<BuildIcon />} />
             </SearchResult>
           </Grid>
         </Grid>
diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx
index b79c6a7248..8167889b02 100644
--- a/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/app/src/components/search/SearchPage.tsx
@@ -30,16 +30,15 @@ import {
 } from '@backstage/plugin-catalog-react';
 import { SearchType } from '@backstage/plugin-search';
 import {
-  DefaultResultListItem,
   SearchBar,
   SearchFilter,
-  SearchResult,
   SearchPagination,
+  SearchResult,
   SearchResultPager,
   useSearch,
 } from '@backstage/plugin-search-react';
 import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs';
-import { Grid, List, makeStyles, Paper, Theme } from '@material-ui/core';
+import { Grid, makeStyles, Paper, Theme } from '@material-ui/core';
 import React from 'react';
 import { ToolSearchResultListItem } from '@backstage/plugin-explore';
 import BuildIcon from '@material-ui/icons/Build';
@@ -133,53 +132,9 @@ const SearchPage = () => {
           <Grid item xs>
             <SearchPagination />
             <SearchResult>
-              {({ results }) => (
-                <List>
-                  {results.map(({ type, document, highlight, rank }) => {
-                    switch (type) {
-                      case 'software-catalog':
-                        return (
-                          <CatalogSearchResultListItem
-                            icon={<CatalogIcon />}
-                            key={document.location}
-                            result={document}
-                            highlight={highlight}
-                            rank={rank}
-                          />
-                        );
-                      case 'techdocs':
-                        return (
-                          <TechDocsSearchResultListItem
-                            icon={<DocsIcon />}
-                            key={document.location}
-                            result={document}
-                            highlight={highlight}
-                            rank={rank}
-                          />
-                        );
-                      case 'tools':
-                        return (
-                          <ToolSearchResultListItem
-                            icon={<BuildIcon />}
-                            key={document.location}
-                            result={document}
-                            highlight={highlight}
-                            rank={rank}
-                          />
-                        );
-                      default:
-                        return (
-                          <DefaultResultListItem
-                            key={document.location}
-                            result={document}
-                            highlight={highlight}
-                            rank={rank}
-                          />
-                        );
-                    }
-                  })}
-                </List>
-              )}
+              <CatalogSearchResultListItem icon={<CatalogIcon />} />
+              <TechDocsSearchResultListItem icon={<DocsIcon />} />
+              <ToolSearchResultListItem icon={<BuildIcon />} />
             </SearchResult>
             <SearchResultPager />
           </Grid>
diff --git a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
index 9f11d0c80c..1788dde1bd 100644
--- a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles, Theme, Grid, List, Paper } from '@material-ui/core';
+import { makeStyles, Theme, Grid, Paper } from '@material-ui/core';
 
 import { CatalogSearchResultListItem } from '@backstage/plugin-catalog';
 import {
@@ -10,7 +10,6 @@ import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs';
 
 import { SearchType } from '@backstage/plugin-search';
 import {
-  DefaultResultListItem,
   SearchBar,
   SearchFilter,
   SearchResult,
@@ -112,41 +111,8 @@ const SearchPage = () => {
           <Grid item xs={9}>
             <SearchPagination />
             <SearchResult>
-              {({ results }) => (
-                <List>
-                  {results.map(({ type, document, highlight, rank }) => {
-                    switch (type) {
-                      case 'software-catalog':
-                        return (
-                          <CatalogSearchResultListItem
-                            key={document.location}
-                            result={document}
-                            highlight={highlight}
-                            rank={rank}
-                          />
-                        );
-                      case 'techdocs':
-                        return (
-                          <TechDocsSearchResultListItem
-                            key={document.location}
-                            result={document}
-                            highlight={highlight}
-                            rank={rank}
-                          />
-                        );
-                      default:
-                        return (
-                          <DefaultResultListItem
-                            key={document.location}
-                            result={document}
-                            highlight={highlight}
-                            rank={rank}
-                          />
-                        );
-                    }
-                  })}
-                </List>
-              )}
+              <CatalogSearchResultListItem icon={<CatalogIcon />} />
+              <TechDocsSearchResultListItem icon={<DocsIcon />} />
             </SearchResult>
           </Grid>
         </Grid>
diff --git a/plugins/search/src/components/SearchModal/SearchModal.tsx b/plugins/search/src/components/SearchModal/SearchModal.tsx
index b1a0b2cd45..d17cf0f6ba 100644
--- a/plugins/search/src/components/SearchModal/SearchModal.tsx
+++ b/plugins/search/src/components/SearchModal/SearchModal.tsx
@@ -23,7 +23,6 @@ import {
   DialogTitle,
   Divider,
   Grid,
-  List,
   Paper,
   useTheme,
 } from '@material-ui/core';
@@ -31,7 +30,6 @@ import Typography from '@material-ui/core/Typography';
 import LaunchIcon from '@material-ui/icons/Launch';
 import { makeStyles } from '@material-ui/core/styles';
 import {
-  DefaultResultListItem,
   SearchContextProvider,
   SearchBar,
   SearchResult,
@@ -151,27 +149,10 @@ export const Modal = ({ toggleModal }: SearchModalProps) => {
           </Grid>
         </Grid>
         <Divider />
-        <SearchResult>
-          {({ results }) => (
-            <List>
-              {results.map(({ document, highlight }) => (
-                <div
-                  role="button"
-                  tabIndex={0}
-                  key={`${document.location}-btn`}
-                  onClick={handleSearchResultClick}
-                  onKeyDown={handleSearchResultClick}
-                >
-                  <DefaultResultListItem
-                    key={document.location}
-                    result={document}
-                    highlight={highlight}
-                  />
-                </div>
-              ))}
-            </List>
-          )}
-        </SearchResult>
+        <SearchResult
+          onClick={handleSearchResultClick}
+          onKeyDown={handleSearchResultClick}
+        />
       </DialogContent>
       <DialogActions className={classes.dialogActionsContainer}>
         <Grid container direction="row">