Merge pull request #7518 from Madebymaurice/add-props-to-apiexplorerpage

Add actions props to the ApiExplorerPage

plugins/api-docs/api-report.md

@@ -5,6 +5,7 @@
 ```ts
 /// <reference types="react" />
 
+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<CatalogTableRow>[] | undefined;
+  actions?:
+    | (
+        | Action<CatalogTableRow>
+        | {
+            action: (rowData: CatalogTableRow) => Action<CatalogTableRow>;
+            position: string;
+          }
+        | ((rowData: CatalogTableRow) => Action<CatalogTableRow>)
+      )[]
+    | 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)

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<CatalogApi> = {
@@ -46,14 +53,6 @@ describe('ApiCatalogPage', () => {
             },
             spec: { type: 'openapi' },
           },
-          {
-            apiVersion: 'backstage.io/v1alpha1',
-            kind: 'API',
-            metadata: {
-              name: 'Entity2',
-            },
-            spec: { type: 'openapi' },
-          },
         ] as Entity[],
       }),
     getLocationByEntity: () =>
@@ -96,6 +95,11 @@ describe('ApiCatalogPage', () => {
         >
           {children}
         </ApiProvider>,
+        {
+          mountedRoutes: {
+            '/catalog/:namespace/:kind/:name': entityRouteRef,
+          },
+        },
       ),
     );
 
@@ -106,4 +110,82 @@ describe('ApiCatalogPage', () => {
     const { findByText } = renderWrapped(<ApiExplorerPage />);
     expect(await findByText(/My Company API Explorer/)).toBeInTheDocument();
   });
+
+  it('should render the default column of the grid', async () => {
+    const { getAllByRole } = renderWrapped(<ApiExplorerPage />);
+
+    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<CatalogTableRow>[] = [
+      { title: 'Foo', field: 'entity.foo' },
+      { title: 'Bar', field: 'entity.bar' },
+      { title: 'Baz', field: 'entity.spec.lifecycle' },
+    ];
+    const { getAllByRole } = renderWrapped(
+      <ApiExplorerPage columns={columns} />,
+    );
+
+    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(
+      <ApiExplorerPage />,
+    );
+    expect(await findByText(/All \(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<CatalogTableRow>['actions'] = [
+      () => {
+        return {
+          icon: () => <DashboardIcon fontSize="small" />,
+          tooltip: 'Foo Action',
+          disabled: false,
+          onClick: () => jest.fn(),
+        };
+      },
+      () => {
+        return {
+          icon: () => <DashboardIcon fontSize="small" />,
+          tooltip: 'Bar Action',
+          disabled: true,
+          onClick: () => jest.fn(),
+        };
+      },
+    ];
+
+    const { findByTitle, findByText } = await renderWrapped(
+      <ApiExplorerPage actions={actions} />,
+    );
+    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();
+  });
 });

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<CatalogTableRow>[] = [
 type ApiExplorerPageProps = {
   initiallySelectedFilter?: UserListFilterKind;
   columns?: TableColumn<CatalogTableRow>[];
+  actions?: TableProps<CatalogTableRow>['actions'];
 };
 
 export const ApiExplorerPage = ({
   initiallySelectedFilter = 'all',
   columns,
+  actions,
 }: ApiExplorerPageProps) => {
   const configApi = useApi(configApiRef);
   const generatedSubtitle = `${
@@ -94,7 +97,10 @@ export const ApiExplorerPage = ({
               <EntityTagPicker />
             </FilterContainer>
             <EntityListContainer>
-              <CatalogTable columns={columns || defaultColumns} />
+              <CatalogTable
+                columns={columns || defaultColumns}
+                actions={actions}
+              />
             </EntityListContainer>
           </FilteredEntityLayout>
         </EntityListProvider>