Merge remote-tracking branch 'upstream/master' into feature/show-catalog-errors

Signed-off-by: Nicolas Torres <nicolast@backbase.com>

packages/app/src/components/catalog/EntityPage.tsx

@@ -137,6 +137,13 @@ const EntityLayoutWrapper = (props: { children?: ReactNode }) => {
   );
 };
 
+/**
+ * NOTE: This page is designed to work on small screens such as mobile devices.
+ * This is based on Material UI Grid. If breakpoints are used, each grid item must set the `xs` prop to a column size or to `true`,
+ * since this does not default. If no breakpoints are used, the items will equitably share the asvailable space.
+ * https://material-ui.com/components/grid/#basic-grid.
+ */
+
 export const cicdContent = (
   <EntitySwitch>
     <EntitySwitch.Case if={isJenkinsAvailable}>
@@ -301,10 +308,10 @@ const serviceEntityPage = (
 
     <EntityLayout.Route path="/api" title="API">
       <Grid container spacing={3} alignItems="stretch">
-        <Grid item md={6}>
+        <Grid item xs={12} md={6}>
           <EntityProvidedApisCard />
         </Grid>
-        <Grid item md={6}>
+        <Grid item xs={12} md={6}>
           <EntityConsumedApisCard />
         </Grid>
       </Grid>
@@ -312,10 +319,10 @@ const serviceEntityPage = (
 
     <EntityLayout.Route path="/dependencies" title="Dependencies">
       <Grid container spacing={3} alignItems="stretch">
-        <Grid item md={6}>
+        <Grid item xs={12} md={6}>
           <EntityDependsOnComponentsCard variant="gridItem" />
         </Grid>
-        <Grid item md={6}>
+        <Grid item xs={12} md={6}>
           <EntityDependsOnResourcesCard variant="gridItem" />
         </Grid>
       </Grid>
@@ -440,15 +447,17 @@ const apiPage = (
   <EntityLayoutWrapper>
     <EntityLayout.Route path="/" title="Overview">
       <Grid container spacing={3}>
-        <Grid item md={6}>
+        <Grid item xs={12}>
           <EntityAboutCard />
         </Grid>
-        <Grid container item md={12}>
-          <Grid item md={6}>
-            <EntityProvidingComponentsCard />
-          </Grid>
-          <Grid item md={6}>
-            <EntityConsumingComponentsCard />
+        <Grid item xs={12}>
+          <Grid container>
+            <Grid item xs={12} md={6}>
+              <EntityProvidingComponentsCard />
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <EntityConsumingComponentsCard />
+            </Grid>
           </Grid>
         </Grid>
       </Grid>

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>