Merge remote-tracking branch 'upstream/master' into feat/relative-ref-tmp

packages/app/package.json

@@ -39,9 +39,11 @@
     "@backstage/plugin-techdocs": "^0.10.0",
     "@backstage/plugin-todo": "^0.1.5",
     "@backstage/plugin-user-settings": "^0.3.0",
+    "@backstage/search-common": "^0.1.2",
     "@backstage/theme": "^0.2.8",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.45",
     "@octokit/rest": "^18.5.3",
     "@roadiehq/backstage-plugin-buildkite": "^1.0.6",
     "@roadiehq/backstage-plugin-github-insights": "^1.1.20",

packages/app/src/components/search/SearchPage.tsx

@@ -14,17 +14,20 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { makeStyles, Theme, Grid, List, Paper } from '@material-ui/core';
-
+import Pagination from '@material-ui/lab/Pagination';
 import { CatalogResultListItem } from '@backstage/plugin-catalog';
 import {
   SearchBar,
   SearchFilter,
   SearchResult,
+  SearchType,
   DefaultResultListItem,
 } from '@backstage/plugin-search';
 import { Content, Header, Lifecycle, Page } from '@backstage/core-components';
+import { DocsResultListItem } from '@backstage/plugin-techdocs';
+import { SearchResultSet } from '@backstage/search-common';
 
 const useStyles = makeStyles((theme: Theme) => ({
   bar: {
@@ -34,15 +37,63 @@ const useStyles = makeStyles((theme: Theme) => ({
     padding: theme.spacing(2),
   },
   filter: {
-    '& + &': {
-      marginTop: theme.spacing(2.5),
-    },
+    marginTop: theme.spacing(2.5),
   },
 }));
 
+// TODO: Move this into the search plugin once pagination is natively supported.
+// See: https://github.com/backstage/backstage/issues/6062
+const SearchResultList = ({ results }: SearchResultSet) => {
+  const pageSize = 10;
+  const [page, setPage] = useState(1);
+  const changePage = (_: any, pageIndex: number) => {
+    setPage(pageIndex);
+  };
+  const pageAmount = Math.ceil((results.length || 0) / pageSize);
+  return (
+    <>
+      <List>
+        {results
+          .slice(pageSize * (page - 1), pageSize * page)
+          .map(({ type, document }) => {
+            switch (type) {
+              case 'software-catalog':
+                return (
+                  <CatalogResultListItem
+                    key={document.location}
+                    result={document}
+                  />
+                );
+              case 'techdocs':
+                return (
+                  <DocsResultListItem
+                    key={document.location}
+                    result={document}
+                  />
+                );
+              default:
+                return (
+                  <DefaultResultListItem
+                    key={document.location}
+                    result={document}
+                  />
+                );
+            }
+          })}
+      </List>
+      <Pagination
+        count={pageAmount}
+        page={page}
+        onChange={changePage}
+        showFirstButton
+        showLastButton
+      />
+    </>
+  );
+};
+
 const SearchPage = () => {
   const classes = useStyles();
-
   return (
     <Page themeId="home">
       <Header title="Search" subtitle={<Lifecycle alpha />} />
@@ -55,6 +106,11 @@ const SearchPage = () => {
           </Grid>
           <Grid item xs={3}>
             <Paper className={classes.filters}>
+              <SearchType
+                values={['techdocs', 'software-catalog']}
+                name="type"
+                defaultValue="software-catalog"
+              />
               <SearchFilter.Select
                 className={classes.filter}
                 name="kind"
@@ -69,28 +125,7 @@ const SearchPage = () => {
           </Grid>
           <Grid item xs={9}>
             <SearchResult>
-              {({ results }) => (
-                <List>
-                  {results.map(({ type, document }) => {
-                    switch (type) {
-                      case 'software-catalog':
-                        return (
-                          <CatalogResultListItem
-                            key={document.location}
-                            result={document}
-                          />
-                        );
-                      default:
-                        return (
-                          <DefaultResultListItem
-                            key={document.location}
-                            result={document}
-                          />
-                        );
-                    }
-                  })}
-                </List>
-              )}
+              {({ results }) => <SearchResultList results={results} />}
             </SearchResult>
           </Grid>
         </Grid>

packages/backend/src/plugins/search.ts

@@ -21,6 +21,7 @@ import {
 } from '@backstage/plugin-search-backend-node';
 import { PluginEnvironment } from '../types';
 import { DefaultCatalogCollator } from '@backstage/plugin-catalog-backend';
+import { DefaultTechDocsCollator } from '@backstage/plugin-techdocs-backend';
 
 export default async function createPlugin({
   logger,
@@ -37,6 +38,11 @@ export default async function createPlugin({
     collator: new DefaultCatalogCollator({ discovery }),
   });
 
+  indexBuilder.addCollator({
+    defaultRefreshIntervalSeconds: 600,
+    collator: new DefaultTechDocsCollator({ discovery, logger }),
+  });
+
   // The scheduler controls when documents are gathered from collators and sent
   // to the search engine for indexing.
   const { scheduler } = await indexBuilder.build();