From 353c0b7aae57f740d7f2566174ac5bdad039b066 Mon Sep 17 00:00:00 2001 From: Fanny Gaudin Date: Fri, 8 Oct 2021 15:41:58 +0200 Subject: [PATCH 1/4] Add actions props to the ApiExplorerPage Signed-off-by: Fanny Gaudin --- .changeset/new-steaks-taste.md | 5 + .../ApiExplorerPage/ApiExplorerPage.test.tsx | 92 ++++++++++++++++++- .../ApiExplorerPage/ApiExplorerPage.tsx | 8 +- 3 files changed, 103 insertions(+), 2 deletions(-) create mode 100644 .changeset/new-steaks-taste.md diff --git a/.changeset/new-steaks-taste.md b/.changeset/new-steaks-taste.md new file mode 100644 index 0000000000..fc719cc19d --- /dev/null +++ b/.changeset/new-steaks-taste.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-api-docs': minor +--- + +add actions prop to the ApiExplorerPage diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx index 518c3c7001..ac1c3d5361 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx @@ -15,7 +15,11 @@ */ import { Entity, RELATION_MEMBER_OF } from '@backstage/catalog-model'; -import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react'; +import { + CatalogApi, + catalogApiRef, + entityRouteRef, +} from '@backstage/plugin-catalog-react'; import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils'; import { render } from '@testing-library/react'; import React from 'react'; @@ -32,6 +36,9 @@ import { ConfigApi, configApiRef, } from '@backstage/core-plugin-api'; +import { TableColumn, TableProps } from '@backstage/core-components'; +import DashboardIcon from '@material-ui/icons/Dashboard'; +import { CatalogTableRow } from '@backstage/plugin-catalog'; describe('ApiCatalogPage', () => { const catalogApi: Partial = { @@ -96,6 +103,11 @@ describe('ApiCatalogPage', () => { > {children} , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, ), ); @@ -106,4 +118,82 @@ describe('ApiCatalogPage', () => { const { findByText } = renderWrapped(); expect(await findByText(/My Company API Explorer/)).toBeInTheDocument(); }); + + it('should render the default column of the grid', async () => { + const { getAllByRole } = await renderWrapped(); + + const columnHeader = getAllByRole('button').filter( + c => c.tagName === 'SPAN', + ); + const columnHeaderLabels = columnHeader.map(c => c.textContent); + + expect(columnHeaderLabels).toEqual([ + 'Name', + 'System', + 'Owner', + 'Type', + 'Lifecycle', + 'Description', + 'Tags', + 'Actions', + ]); + }); + + it('should render the custom column passed as prop', async () => { + const columns: TableColumn[] = [ + { title: 'Foo', field: 'entity.foo' }, + { title: 'Bar', field: 'entity.bar' }, + { title: 'Baz', field: 'entity.spec.lifecycle' }, + ]; + const { getAllByRole } = await renderWrapped( + , + ); + + const columnHeader = getAllByRole('button').filter( + c => c.tagName === 'SPAN', + ); + const columnHeaderLabels = columnHeader.map(c => c.textContent); + + expect(columnHeaderLabels).toEqual(['Foo', 'Bar', 'Baz', 'Actions']); + }); + + it('should render the default actions of an item in the grid', async () => { + const { findByTitle, findByText } = await renderWrapped( + , + ); + expect(await findByText(/Owned \(1\)/)).toBeInTheDocument(); + expect(await findByTitle(/View/)).toBeInTheDocument(); + expect(await findByTitle(/View/)).toBeInTheDocument(); + expect(await findByTitle(/Edit/)).toBeInTheDocument(); + expect(await findByTitle(/Add to favorites/)).toBeInTheDocument(); + }); + + it('should render the custom actions of an item passed as prop', async () => { + const actions: TableProps['actions'] = [ + () => { + return { + icon: () => , + tooltip: 'Foo Action', + disabled: false, + onClick: () => jest.fn(), + }; + }, + () => { + return { + icon: () => , + tooltip: 'Bar Action', + disabled: true, + onClick: () => jest.fn(), + }; + }, + ]; + + const { findByTitle, findByText } = await renderWrapped( + , + ); + expect(await findByText(/Owned \(1\)/)).toBeInTheDocument(); + expect(await findByTitle(/Foo Action/)).toBeInTheDocument(); + expect(await findByTitle(/Bar Action/)).toBeInTheDocument(); + expect((await findByTitle(/Bar Action/)).firstChild).toBeDisabled(); + }); }); diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx index 2f74aaa166..f28574145e 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx @@ -21,6 +21,7 @@ import { PageWithHeader, SupportButton, TableColumn, + TableProps, } from '@backstage/core-components'; import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api'; import { @@ -56,11 +57,13 @@ const defaultColumns: TableColumn[] = [ type ApiExplorerPageProps = { initiallySelectedFilter?: UserListFilterKind; columns?: TableColumn[]; + actions?: TableProps['actions']; }; export const ApiExplorerPage = ({ initiallySelectedFilter = 'all', columns, + actions, }: ApiExplorerPageProps) => { const configApi = useApi(configApiRef); const generatedSubtitle = `${ @@ -94,7 +97,10 @@ export const ApiExplorerPage = ({ - + From d9f3cbe0340b5abbab7d7cb3657ba94087fe50cc Mon Sep 17 00:00:00 2001 From: Fanny Gaudin Date: Mon, 11 Oct 2021 17:04:32 +0200 Subject: [PATCH 2/4] update api-report Signed-off-by: Fanny Gaudin --- plugins/api-docs/api-report.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/plugins/api-docs/api-report.md b/plugins/api-docs/api-report.md index 74a0dc07dd..de36857945 100644 --- a/plugins/api-docs/api-report.md +++ b/plugins/api-docs/api-report.md @@ -5,6 +5,7 @@ ```ts /// +import { Action } from '@material-table/core'; import { ApiEntity } from '@backstage/catalog-model'; import { ApiRef } from '@backstage/core-plugin-api'; import { BackstagePlugin } from '@backstage/core-plugin-api'; @@ -58,9 +59,20 @@ export { apiDocsPlugin as plugin }; export const ApiExplorerPage: ({ initiallySelectedFilter, columns, + actions, }: { initiallySelectedFilter?: UserListFilterKind | undefined; columns?: TableColumn[] | undefined; + actions?: + | ( + | Action + | { + action: (rowData: CatalogTableRow) => Action; + position: string; + } + | ((rowData: CatalogTableRow) => Action) + )[] + | undefined; }) => JSX.Element; // Warning: (ae-missing-release-tag) "ApiTypeTitle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) From b6ab93c4214100a29232af53f73aa8c83d3fa7ce Mon Sep 17 00:00:00 2001 From: Fanny Gaudin Date: Tue, 12 Oct 2021 09:28:13 +0200 Subject: [PATCH 3/4] change version from minor to patch Signed-off-by: Fanny Gaudin --- .changeset/new-steaks-taste.md | 5 ----- .changeset/old-fishes-drum.md | 5 +++++ 2 files changed, 5 insertions(+), 5 deletions(-) delete mode 100644 .changeset/new-steaks-taste.md create mode 100644 .changeset/old-fishes-drum.md diff --git a/.changeset/new-steaks-taste.md b/.changeset/new-steaks-taste.md deleted file mode 100644 index fc719cc19d..0000000000 --- a/.changeset/new-steaks-taste.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@backstage/plugin-api-docs': minor ---- - -add actions prop to the ApiExplorerPage diff --git a/.changeset/old-fishes-drum.md b/.changeset/old-fishes-drum.md new file mode 100644 index 0000000000..cb6bf6c05e --- /dev/null +++ b/.changeset/old-fishes-drum.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-api-docs': patch +--- + +Add actions props to the ApiExplorerPage From 7e4e97c23bd0aa71f663a4bc5b081cc894af572a Mon Sep 17 00:00:00 2001 From: Tim Hansen Date: Tue, 12 Oct 2021 10:47:46 -0600 Subject: [PATCH 4/4] Fix tests Signed-off-by: Tim Hansen --- .../ApiExplorerPage/ApiExplorerPage.test.tsx | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx index ac1c3d5361..d0b7523ead 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx @@ -53,14 +53,6 @@ describe('ApiCatalogPage', () => { }, spec: { type: 'openapi' }, }, - { - apiVersion: 'backstage.io/v1alpha1', - kind: 'API', - metadata: { - name: 'Entity2', - }, - spec: { type: 'openapi' }, - }, ] as Entity[], }), getLocationByEntity: () => @@ -120,7 +112,7 @@ describe('ApiCatalogPage', () => { }); it('should render the default column of the grid', async () => { - const { getAllByRole } = await renderWrapped(); + const { getAllByRole } = renderWrapped(); const columnHeader = getAllByRole('button').filter( c => c.tagName === 'SPAN', @@ -145,7 +137,7 @@ describe('ApiCatalogPage', () => { { title: 'Bar', field: 'entity.bar' }, { title: 'Baz', field: 'entity.spec.lifecycle' }, ]; - const { getAllByRole } = await renderWrapped( + const { getAllByRole } = renderWrapped( , ); @@ -161,7 +153,7 @@ describe('ApiCatalogPage', () => { const { findByTitle, findByText } = await renderWrapped( , ); - expect(await findByText(/Owned \(1\)/)).toBeInTheDocument(); + expect(await findByText(/All \(1\)/)).toBeInTheDocument(); expect(await findByTitle(/View/)).toBeInTheDocument(); expect(await findByTitle(/View/)).toBeInTheDocument(); expect(await findByTitle(/Edit/)).toBeInTheDocument(); @@ -191,7 +183,7 @@ describe('ApiCatalogPage', () => { const { findByTitle, findByText } = await renderWrapped( , ); - expect(await findByText(/Owned \(1\)/)).toBeInTheDocument(); + expect(await findByText(/All \(1\)/)).toBeInTheDocument(); expect(await findByTitle(/Foo Action/)).toBeInTheDocument(); expect(await findByTitle(/Bar Action/)).toBeInTheDocument(); expect((await findByTitle(/Bar Action/)).firstChild).toBeDisabled();