Apply changes to ApiExplorerPage

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

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

@@ -14,10 +14,45 @@
  * limitations under the License.
  */
 
-import { TableColumn } from '@backstage/core-components';
-import { CatalogTableRow } from '@backstage/plugin-catalog';
-import { UserListFilterKind } from '@backstage/plugin-catalog-react';
+import {
+  Content,
+  ContentHeader,
+  PageWithHeader,
+  SupportButton,
+  TableColumn,
+} from '@backstage/core-components';
+import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
+import {
+  CatalogTable,
+  CatalogTableRow,
+  FilteredTableLayout,
+  TableContainer,
+  FilterContainer,
+} from '@backstage/plugin-catalog';
+import {
+  EntityKindPicker,
+  EntityLifecyclePicker,
+  EntityListProvider,
+  EntityOwnerPicker,
+  EntityTagPicker,
+  EntityTypePicker,
+  UserListFilterKind,
+  UserListPicker,
+} from '@backstage/plugin-catalog-react';
+import { Button } from '@material-ui/core';
 import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { createComponentRouteRef } from '../../routes';
+
+const defaultColumns: TableColumn<CatalogTableRow>[] = [
+  CatalogTable.columns.createNameColumn({ defaultKind: 'API' }),
+  CatalogTable.columns.createSystemColumn(),
+  CatalogTable.columns.createOwnerColumn(),
+  CatalogTable.columns.createSpecTypeColumn(),
+  CatalogTable.columns.createSpecLifecycleColumn(),
+  CatalogTable.columns.createMetadataDescriptionColumn(),
+  CatalogTable.columns.createTagsColumn(),
+];
 
 interface IApiExplorerePageFilterProps {
   initiallySelectedFilter?: UserListFilterKind;
@@ -27,6 +62,53 @@ export type ApiExplorerPageProps = IApiExplorerePageFilterProps & {
   columns?: TableColumn<CatalogTableRow>[];
 };
 
-export const ApiExplorerPage = ({}: ApiExplorerPageProps) => (
-  <div>Please revert me...</div>
-);
+export const ApiExplorerPage = ({
+  initiallySelectedFilter = 'all',
+  columns,
+}: ApiExplorerPageProps) => {
+  const createComponentLink = useRouteRef(createComponentRouteRef);
+  const configApi = useApi(configApiRef);
+  const generatedSubtitle = `${
+    configApi.getOptionalString('organization.name') ?? 'Backstage'
+  } API Explorer`;
+
+  return (
+    <PageWithHeader
+      themeId="apis"
+      title="APIs"
+      subtitle={generatedSubtitle}
+      pageTitleOverride="APIs"
+    >
+      <Content>
+        <ContentHeader title="">
+          {createComponentLink && (
+            <Button
+              variant="contained"
+              color="primary"
+              component={RouterLink}
+              to={createComponentLink()}
+            >
+              Register Existing API
+            </Button>
+          )}
+          <SupportButton>All your APIs</SupportButton>
+        </ContentHeader>
+        <EntityListProvider>
+          <FilteredTableLayout>
+            <FilterContainer>
+              <EntityKindPicker initialFilter="api" hidden />
+              <EntityTypePicker />
+              <UserListPicker initialFilter={initiallySelectedFilter} />
+              <EntityOwnerPicker />
+              <EntityLifecyclePicker />
+              <EntityTagPicker />
+            </FilterContainer>
+            <TableContainer>
+              <CatalogTable columns={columns || defaultColumns} />
+            </TableContainer>
+          </FilteredTableLayout>
+        </EntityListProvider>
+      </Content>
+    </PageWithHeader>
+  );
+};

plugins/catalog/src/index.ts

@@ -41,3 +41,4 @@ export {
 } from './plugin';
 export * from './components/CatalogTable/columns';
 export * from './components/CatalogFilter';
+export * from './components/FilteredTableLayout';