diff --git a/plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogLayout.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx similarity index 84% rename from plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogLayout.tsx rename to plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx index d846e2b0e2..a111007278 100644 --- a/plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogLayout.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx @@ -21,17 +21,15 @@ type Props = { children?: React.ReactNode; }; -const ApiCatalogLayout = ({ children }: Props) => { +export const ApiExplorerLayout = ({ children }: Props) => { return (
{children} ); }; - -export default ApiCatalogLayout; diff --git a/plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogPage.test.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx similarity index 94% rename from plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogPage.test.tsx rename to plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx index 78afa51937..639f1e3d9c 100644 --- a/plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogPage.test.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx @@ -20,7 +20,7 @@ import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog'; import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils'; import { render } from '@testing-library/react'; import React from 'react'; -import { ApiCatalogPage } from './ApiCatalogPage'; +import { ApiExplorerPage } from './ApiExplorerPage'; describe('ApiCatalogPage', () => { const catalogApi: Partial = { @@ -63,7 +63,7 @@ describe('ApiCatalogPage', () => { // related to some theme issues in mui-table // https://github.com/mbrn/material-table/issues/1293 it('should render', async () => { - const { findByText } = renderWrapped(); + const { findByText } = renderWrapped(); expect(await findByText(/APIs \(2\)/)).toBeInTheDocument(); }); }); diff --git a/plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogPage.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx similarity index 59% rename from plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogPage.tsx rename to plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx index cfeb71f7b7..b6440edc3a 100644 --- a/plugins/api-docs/src/components/ApiCatalogPage/ApiCatalogPage.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx @@ -14,31 +14,42 @@ * limitations under the License. */ -import { Content, useApi } from '@backstage/core'; +import { Content, ContentHeader, SupportButton, useApi } from '@backstage/core'; import { catalogApiRef } from '@backstage/plugin-catalog'; +import { Button } from '@material-ui/core'; import React from 'react'; +import { Link as RouterLink } from 'react-router-dom'; import { useAsync } from 'react-use'; -import { ApiCatalogTable } from '../ApiCatalogTable'; -import ApiCatalogLayout from './ApiCatalogLayout'; +import { ApiExplorerTable } from '../ApiExplorerTable'; +import { ApiExplorerLayout } from './ApiExplorerLayout'; -const CatalogPageContents = () => { +export const ApiExplorerPage = () => { const catalogApi = useApi(catalogApiRef); const { loading, error, value: matchingEntities } = useAsync(() => { return catalogApi.getEntities({ kind: 'API' }); }, [catalogApi]); return ( - + - + + All your APIs + + - + ); }; - -export const ApiCatalogPage = () => ; diff --git a/plugins/api-docs/src/components/ApiCatalogTable/index.ts b/plugins/api-docs/src/components/ApiExplorerPage/index.ts similarity index 91% rename from plugins/api-docs/src/components/ApiCatalogTable/index.ts rename to plugins/api-docs/src/components/ApiExplorerPage/index.ts index 14129b2258..67f672f9a9 100644 --- a/plugins/api-docs/src/components/ApiCatalogTable/index.ts +++ b/plugins/api-docs/src/components/ApiExplorerPage/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -export { ApiCatalogTable } from './ApiCatalogTable'; +export { ApiExplorerPage } from './ApiExplorerPage'; diff --git a/plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.test.tsx b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.test.tsx similarity index 95% rename from plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.test.tsx rename to plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.test.tsx index 67f6562a56..9cd7b01945 100644 --- a/plugins/api-docs/src/components/ApiCatalogTable/ApiCatalogTable.test.tsx +++ b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.test.tsx @@ -18,7 +18,7 @@ import { Entity } from '@backstage/catalog-model'; import { wrapInTestApp } from '@backstage/test-utils'; import { render } from '@testing-library/react'; import * as React from 'react'; -import { ApiCatalogTable } from './ApiCatalogTable'; +import { ApiExplorerTable } from './ApiExplorerTable'; const entites: Entity[] = [ { @@ -42,7 +42,7 @@ describe('ApiCatalogTable component', () => { it('should render error message when error is passed in props', async () => { const rendered = render( wrapInTestApp( - { it('should display entity names when loading has finished and no error occurred', async () => { const rendered = render( wrapInTestApp( - [] = [ ), }, + { + title: 'Owner', + field: 'spec.owner', + }, + { + title: 'Lifecycle', + field: 'spec.lifecycle', + }, + { + title: 'Type', // TODO: Resolve the type display name using the API from https://github.com/spotify/backstage/pull/2451 + field: 'spec.type', + }, { title: 'Description', field: 'metadata.description', }, + { + title: 'Tags', + field: 'metadata.tags', + cellStyle: { + padding: '0px 16px 0px 20px', + }, + render: (entity: Entity) => ( + <> + {entity.metadata.tags && + entity.metadata.tags.map(t => ( + + ))} + + ), + }, ]; -type CatalogTableProps = { +type ExplorerTableProps = { entities: Entity[]; titlePreamble: string; loading: boolean; error?: any; }; -export const ApiCatalogTable = ({ +export const ApiExplorerTable = ({ entities, loading, error, titlePreamble, -}: CatalogTableProps) => { +}: ExplorerTableProps) => { if (error) { return (
diff --git a/plugins/api-docs/src/components/ApiCatalogPage/index.ts b/plugins/api-docs/src/components/ApiExplorerTable/index.ts similarity index 91% rename from plugins/api-docs/src/components/ApiCatalogPage/index.ts rename to plugins/api-docs/src/components/ApiExplorerTable/index.ts index bec9de705a..a9c79861e8 100644 --- a/plugins/api-docs/src/components/ApiCatalogPage/index.ts +++ b/plugins/api-docs/src/components/ApiExplorerTable/index.ts @@ -14,4 +14,4 @@ * limitations under the License. */ -export { ApiCatalogPage } from './ApiCatalogPage'; +export { ApiExplorerTable } from './ApiExplorerTable'; diff --git a/plugins/api-docs/src/plugin.ts b/plugins/api-docs/src/plugin.ts index db58538b67..bd9c968d5b 100644 --- a/plugins/api-docs/src/plugin.ts +++ b/plugins/api-docs/src/plugin.ts @@ -15,14 +15,14 @@ */ import { createPlugin } from '@backstage/core'; -import { ApiCatalogPage } from './components/ApiCatalogPage/ApiCatalogPage'; +import { ApiExplorerPage } from './components/ApiExplorerPage/ApiExplorerPage'; import { ApiEntityPage } from './components/ApiEntityPage/ApiEntityPage'; import { entityRoute, rootRoute } from './routes'; export const plugin = createPlugin({ id: 'api-docs', register({ router }) { - router.addRoute(rootRoute, ApiCatalogPage); + router.addRoute(rootRoute, ApiExplorerPage); router.addRoute(entityRoute, ApiEntityPage); }, });