Apply generic table page to ApiExplorer

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

packages/core-components/src/layout/TablePage/TablePage.tsx

@@ -21,22 +21,27 @@ import { Content, ContentHeader, SupportButton, Button } from '../..';
 import { Layout, IProps as LayoutProps } from './Layout';
 import { Link as RouterLink } from 'react-router-dom';
 
-interface IProps extends LayoutProps {
-  supportMessage: string;
-  filter: React.ReactNode;
-  header: string;
-  headerLink?: string;
+interface ILinkProps {
+  contentLink?: string;
+  contentLinkText?: string;
 }
 
-const TablePageLink = ({ link }: { link?: string }) => {
-  return link ? (
+type IProps = LayoutProps &
+  ILinkProps & {
+    contentTitle: string;
+    supportMessage: string;
+    filter: React.ReactNode;
+  };
+
+const TablePageLink = ({ contentLink, contentLinkText }: ILinkProps) => {
+  return contentLink && contentLinkText ? (
     <Button
       component={RouterLink}
       variant="contained"
       color="primary"
-      to={link}
+      to={contentLink}
     >
-      Create Component
+      {contentLinkText}
     </Button>
   ) : null;
 };
@@ -45,14 +50,18 @@ export const TablePage = ({
   supportMessage,
   filter,
   children,
-  header,
-  headerLink,
+  contentTitle,
+  contentLink,
+  contentLinkText,
   ...props
 }: React.PropsWithChildren<IProps>) => (
   <Layout {...props}>
     <Content>
-      <ContentHeader title={header}>
-        <TablePageLink link={headerLink} />
+      <ContentHeader title={contentTitle}>
+        <TablePageLink
+          contentLink={contentLink}
+          contentLinkText={contentLinkText}
+        />
         <SupportButton>{supportMessage}</SupportButton>
       </ContentHeader>
       <Grid container spacing={2}>

plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx

@@ -1,40 +0,0 @@
-/*
- * Copyright 2020 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-
-import { Header, Page } from '@backstage/core-components';
-import { useApi, configApiRef } from '@backstage/core-plugin-api';
-
-type Props = {
-  children?: React.ReactNode;
-};
-export const ApiExplorerLayout = ({ children }: Props) => {
-  const configApi = useApi(configApiRef);
-  const generatedSubtitle = `${
-    configApi.getOptionalString('organization.name') ?? 'Backstage'
-  } API Explorer`;
-  return (
-    <Page themeId="apis">
-      <Header
-        title="APIs"
-        subtitle={generatedSubtitle}
-        pageTitleOverride="APIs"
-      />
-      {children}
-    </Page>
-  );
-};

plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx

@@ -14,39 +14,19 @@
  * limitations under the License.
  */
 
+import { TableColumn, TablePage } from '@backstage/core-components';
+import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
+import {
+  CatalogFilter,
+  CatalogTable,
+  CatalogTableRow,
+} from '@backstage/plugin-catalog';
 import {
-  EntityKindPicker,
-  EntityLifecyclePicker,
   EntityListProvider,
-  EntityOwnerPicker,
-  EntityTagPicker,
-  EntityTypePicker,
   UserListFilterKind,
-  UserListPicker,
 } from '@backstage/plugin-catalog-react';
-import { CatalogTable, CatalogTableRow } from '@backstage/plugin-catalog';
-import { Button, makeStyles } from '@material-ui/core';
 import React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
 import { createComponentRouteRef } from '../../routes';
-import { ApiExplorerLayout } from './ApiExplorerLayout';
-
-import {
-  Content,
-  ContentHeader,
-  SupportButton,
-  TableColumn,
-} from '@backstage/core-components';
-import { useRouteRef } from '@backstage/core-plugin-api';
-
-const useStyles = makeStyles(theme => ({
-  contentWrapper: {
-    display: 'grid',
-    gridTemplateAreas: "'filters' 'table'",
-    gridTemplateColumns: '250px 1fr',
-    gridColumnGap: theme.spacing(2),
-  },
-}));
 
 const defaultColumns: TableColumn<CatalogTableRow>[] = [
   CatalogTable.columns.createNameColumn({ defaultKind: 'API' }),
@@ -58,8 +38,11 @@ const defaultColumns: TableColumn<CatalogTableRow>[] = [
   CatalogTable.columns.createTagsColumn(),
 ];
 
-export type ApiExplorerPageProps = {
+interface IApiExplorerePageFilterProps {
   initiallySelectedFilter?: UserListFilterKind;
+}
+
+export type ApiExplorerPageProps = IApiExplorerePageFilterProps & {
   columns?: TableColumn<CatalogTableRow>[];
 };
 
@@ -67,39 +50,32 @@ export const ApiExplorerPage = ({
   initiallySelectedFilter = 'all',
   columns,
 }: ApiExplorerPageProps) => {
-  const styles = useStyles();
   const createComponentLink = useRouteRef(createComponentRouteRef);
+  const configApi = useApi(configApiRef);
+  const generatedSubtitle = `${
+    configApi.getOptionalString('organization.name') ?? 'Backstage'
+  } API Explorer`;
 
   return (
-    <ApiExplorerLayout>
-      <Content>
-        <ContentHeader title="">
-          {createComponentLink && (
-            <Button
-              variant="contained"
-              color="primary"
-              component={RouterLink}
-              to={createComponentLink()}
-            >
-              Register Existing API
-            </Button>
-          )}
-          <SupportButton>All your APIs</SupportButton>
-        </ContentHeader>
-        <div className={styles.contentWrapper}>
-          <EntityListProvider>
-            <div>
-              <EntityKindPicker initialFilter="api" hidden />
-              <EntityTypePicker />
-              <UserListPicker initialFilter={initiallySelectedFilter} />
-              <EntityOwnerPicker />
-              <EntityLifecyclePicker />
-              <EntityTagPicker />
-            </div>
-            <CatalogTable columns={columns || defaultColumns} />
-          </EntityListProvider>
-        </div>
-      </Content>
-    </ApiExplorerLayout>
+    <EntityListProvider>
+      <TablePage
+        title="APIs"
+        subtitle={generatedSubtitle}
+        pageTitleOverride="APIs"
+        themeId="apis"
+        contentTitle=""
+        contentLink={createComponentLink ? createComponentLink() : ''}
+        contentLinkText="Register Existing API"
+        supportMessage="All your APIs"
+        filter={
+          <CatalogFilter
+            initialFilter="api"
+            initiallySelectedFilter={initiallySelectedFilter}
+          />
+        }
+      >
+        <CatalogTable columns={columns || defaultColumns} />
+      </TablePage>
+    </EntityListProvider>
   );
 };

plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx

@@ -38,6 +38,7 @@ import React, { PropsWithChildren } from 'react';
 
 interface IProps {
   initiallySelectedFilter?: UserListFilterKind;
+  initialFilter?: 'component' | 'api';
 }
 
 const CatalogFilterWrapper = withWidth()(
@@ -56,11 +57,12 @@ const CatalogFilterWrapper = withWidth()(
 
 export const CatalogFilter = ({
   initiallySelectedFilter = 'owned',
+  initialFilter = 'component',
 }: IProps) => (
   <CatalogFilterWrapper>
     <Grid container alignContent="flex-start">
       <Grid item xs={12} sm={4} lg={12}>
-        <EntityKindPicker initialFilter="component" hidden />
+        <EntityKindPicker initialFilter={initialFilter} hidden />
         <EntityTypePicker />
       </Grid>
       <Grid item xs={12} sm={4} lg={12}>

plugins/catalog/src/components/CatalogPage/CatalogPage.tsx

@@ -45,16 +45,17 @@ export const CatalogPage = ({
   return (
     <EntityListProvider>
       <TablePage
-        header="Components"
+        title={`${orgName} Catalog`}
+        subtitle={`Catalog of software components at ${orgName}`}
+        pageTitleOverride="Home"
+        themeId="home"
+        contentTitle="Components"
+        contentLink={createComponentLink ? createComponentLink() : ''}
+        contentLinkText="Create Component"
         supportMessage="All your software catalog entities"
         filter={
           <CatalogFilter initiallySelectedFilter={initiallySelectedFilter} />
         }
-        title={`${orgName} Catalog`}
-        subtitle={`Catalog of software components at ${orgName}`}
-        themeId="home"
-        pageTitleOverride="Home"
-        headerLink={createComponentLink ? createComponentLink() : ''}
       >
         <CatalogTable columns={columns} actions={actions} />
       </TablePage>

plugins/catalog/src/index.ts

@@ -15,11 +15,9 @@
  */
 
 export * from './components/AboutCard';
-export { CatalogLayout } from './components/CatalogPage';
 export { CatalogResultListItem } from './components/CatalogResultListItem';
 export { CatalogTable } from './components/CatalogTable';
 export type { EntityRow as CatalogTableRow } from './components/CatalogTable';
-export { CreateComponentButton } from './components/CreateComponentButton';
 export { EntityLayout } from './components/EntityLayout';
 export * from './components/EntityOrphanWarning';
 export { EntityPageLayout } from './components/EntityPageLayout';
@@ -42,3 +40,4 @@ export {
   EntitySystemDiagramCard,
 } from './plugin';
 export * from './components/CatalogTable/columns';
+export * from './components/CatalogFilter';