Add filters to API Explorer (#2830)

* fix: support nested fields in table filter

Add support for nested fields like metadata.name to the table filters. Previously only top-level fields were allowed. In addition, support for filtering on fields that are arrays is introduced (like tags). Filters are now distinct.

* feat: introduce table filters to the api explorer

* fix: allow to close select in multiple mode

* fix: export TableFilter

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

@@ -72,6 +72,6 @@ describe('ApiCatalogPage', () => {
   // https://github.com/mbrn/material-table/issues/1293
   it('should render', async () => {
     const { findByText } = renderWrapped(<ApiExplorerPage />);
-    expect(await findByText(/APIs \(2\)/)).toBeInTheDocument();
+    expect(await findByText(/Backstage API Explorer/)).toBeInTheDocument();
   });
 });

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

@@ -44,7 +44,6 @@ export const ApiExplorerPage = () => {
           <SupportButton>All your APIs</SupportButton>
         </ContentHeader>
         <ApiExplorerTable
-          titlePreamble="APIs"
           entities={matchingEntities!}
           loading={loading}
           error={error}

plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.test.tsx

@@ -53,7 +53,6 @@ describe('ApiCatalogTable component', () => {
       wrapInTestApp(
         <ApiProvider apis={apiRegistry}>
           <ApiExplorerTable
-            titlePreamble="APIs"
             entities={[]}
             loading={false}
             error={{ code: 'error' }}
@@ -71,15 +70,10 @@ describe('ApiCatalogTable component', () => {
     const rendered = render(
       wrapInTestApp(
         <ApiProvider apis={apiRegistry}>
-          <ApiExplorerTable
-            titlePreamble="APIs"
-            entities={entites}
-            loading={false}
-          />
+          <ApiExplorerTable entities={entites} loading={false} />
         </ApiProvider>,
       ),
     );
-    expect(rendered.getByText(/APIs \(3\)/)).toBeInTheDocument();
     expect(rendered.getByText(/api1/)).toBeInTheDocument();
     expect(rendered.getByText(/api2/)).toBeInTheDocument();
     expect(rendered.getByText(/api3/)).toBeInTheDocument();

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

@@ -15,7 +15,7 @@
  */
 
 import { ApiEntityV1alpha1, Entity } from '@backstage/catalog-model';
-import { Table, TableColumn, useApi } from '@backstage/core';
+import { Table, TableFilter, TableColumn, useApi } from '@backstage/core';
 import { Chip, Link } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React from 'react';
@@ -90,9 +90,27 @@ const columns: TableColumn<Entity>[] = [
   },
 ];
 
+const filters: TableFilter[] = [
+  {
+    column: 'Owner',
+    type: 'select',
+  },
+  {
+    column: 'Type',
+    type: 'multiple-select',
+  },
+  {
+    column: 'Lifecycle',
+    type: 'multiple-select',
+  },
+  {
+    column: 'Tags',
+    type: 'checkbox-tree',
+  },
+];
+
 type ExplorerTableProps = {
   entities: Entity[];
-  titlePreamble: string;
   loading: boolean;
   error?: any;
 };
@@ -101,7 +119,6 @@ export const ApiExplorerTable = ({
   entities,
   loading,
   error,
-  titlePreamble,
 }: ExplorerTableProps) => {
   if (error) {
     return (
@@ -114,7 +131,7 @@ export const ApiExplorerTable = ({
   }
 
   return (
-    <Table<Entity>
+    <Table
       isLoading={loading}
       columns={columns}
       options={{
@@ -123,8 +140,8 @@ export const ApiExplorerTable = ({
         loadingType: 'linear',
         showEmptyDataSourceMessage: !loading,
       }}
-      title={`${titlePreamble} (${(entities && entities.length) || 0})`}
       data={entities}
+      filters={filters}
     />
   );
 };