Apply generic table page to ApiExplorer

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

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>
   );
 };