From 86164e96ceb39a7bb268f6a3c3143a0a3b1feb18 Mon Sep 17 00:00:00 2001
From: Eric Peterson <ericpeterson@spotify.com>
Date: Thu, 30 Dec 2021 15:05:26 +0100
Subject: [PATCH] Add an entity filter just for TechDocs search.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
---
 .../app/src/components/search/SearchPage.tsx  | 29 +++++++++++++++++++
 .../app/src/components/search/SearchPage.tsx  | 29 +++++++++++++++++++
 2 files changed, 58 insertions(+)

diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx
index 9a8c208103..555a8932ea 100644
--- a/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/app/src/components/search/SearchPage.tsx
@@ -23,7 +23,12 @@ import {
   Page,
   SidebarPinStateContext,
 } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
 import { CatalogResultListItem } from '@backstage/plugin-catalog';
+import {
+  catalogApiRef,
+  CATALOG_FILTER_EXISTS,
+} from '@backstage/plugin-catalog-react';
 import {
   DefaultResultListItem,
   SearchBar,
@@ -31,6 +36,7 @@ import {
   SearchResult,
   SearchResultPager,
   SearchType,
+  useSearch,
 } from '@backstage/plugin-search';
 import { DocsResultListItem } from '@backstage/plugin-techdocs';
 import { Grid, List, makeStyles, Paper, Theme } from '@material-ui/core';
@@ -54,6 +60,8 @@ const useStyles = makeStyles((theme: Theme) => ({
 const SearchPage = () => {
   const classes = useStyles();
   const { isMobile } = useContext(SidebarPinStateContext);
+  const { types } = useSearch();
+  const catalogApi = useApi(catalogApiRef);
 
   return (
     <Page themeId="home">
@@ -84,6 +92,27 @@ const SearchPage = () => {
                 ]}
               />
               <Paper className={classes.filters}>
+                {types.includes('techdocs') && (
+                  <SearchFilter.Autocomplete
+                    className={classes.filter}
+                    label="Entity"
+                    name="name"
+                    asyncValues={async partial => {
+                      // Return a list of entitis which are documented.
+                      const { items } = await catalogApi.getEntities({
+                        fields: ['metadata.name'],
+                        filter: {
+                          'metadata.annotations.backstage.io/techdocs-ref':
+                            CATALOG_FILTER_EXISTS,
+                        },
+                      });
+
+                      return items
+                        .map(entity => entity.metadata.name)
+                        .filter(name => name.includes(partial));
+                    }}
+                  />
+                )}
                 <SearchFilter.Select
                   className={classes.filter}
                   name="kind"
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 cf380b6f5c..411f902933 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
@@ -2,6 +2,10 @@ import React from 'react';
 import { makeStyles, Theme, Grid, List, Paper } from '@material-ui/core';
 
 import { CatalogResultListItem } from '@backstage/plugin-catalog';
+import {
+  catalogApiRef,
+  CATALOG_FILTER_EXISTS,
+} from '@backstage/plugin-catalog-react';
 import { DocsResultListItem } from '@backstage/plugin-techdocs';
 
 import {
@@ -10,6 +14,7 @@ import {
   SearchResult,
   SearchType,
   DefaultResultListItem,
+  useSearch,
 } from '@backstage/plugin-search';
 import {
   CatalogIcon,
@@ -18,6 +23,7 @@ import {
   Header,
   Page,
 } from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
 
 const useStyles = makeStyles((theme: Theme) => ({
   bar: {
@@ -36,6 +42,8 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const SearchPage = () => {
   const classes = useStyles();
+  const { types } = useSearch();
+  const catalogApi = useApi(catalogApiRef);
 
   return (
     <Page themeId="home">
@@ -65,6 +73,27 @@ const SearchPage = () => {
               ]}
             />
             <Paper className={classes.filters}>
+              {types.includes('techdocs') && (
+                <SearchFilter.Autocomplete
+                  className={classes.filter}
+                  label="Entity"
+                  name="name"
+                  asyncValues={async partial => {
+                    // Return a list of entitis which are documented.
+                    const { items } = await catalogApi.getEntities({
+                      fields: ['metadata.name'],
+                      filter: {
+                        'metadata.annotations.backstage.io/techdocs-ref':
+                          CATALOG_FILTER_EXISTS,
+                      },
+                    });
+
+                    return items
+                      .map(entity => entity.metadata.name)
+                      .filter(name => name.includes(partial));
+                  }}
+                />
+              )}
               <SearchFilter.Select
                 className={classes.filter}
                 name="kind"