feat: use title for API type in table

Now that the API definition types are available via an API, we can resolve the remaining TODO comment here.

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

@@ -20,6 +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 { apiDocsConfigRef } from '../../config';
 import { ApiExplorerPage } from './ApiExplorerPage';
 
 describe('ApiCatalogPage', () => {
@@ -32,6 +33,7 @@ describe('ApiCatalogPage', () => {
           metadata: {
             name: 'Entity1',
           },
+          spec: { type: 'openapi' },
         },
         {
           apiVersion: 'backstage.io/v1alpha1',
@@ -39,12 +41,17 @@ describe('ApiCatalogPage', () => {
           metadata: {
             name: 'Entity2',
           },
+          spec: { type: 'openapi' },
         },
       ] as Entity[]),
     getLocationByEntity: () =>
       Promise.resolve({ id: 'id', type: 'github', target: 'url' }),
   };
 
+  const apiDocsConfig = {
+    getApiDefinitionWidget: () => undefined,
+  };
+
   const renderWrapped = (children: React.ReactNode) =>
     render(
       wrapInTestApp(
@@ -52,6 +59,7 @@ describe('ApiCatalogPage', () => {
           apis={ApiRegistry.from([
             [catalogApiRef, catalogApi],
             [storageApiRef, MockStorageApi.create()],
+            [apiDocsConfigRef, apiDocsConfig],
           ])}
         >
           {children}

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

@@ -15,9 +15,11 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
+import { ApiProvider, ApiRegistry } from '@backstage/core';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
 import * as React from 'react';
+import { apiDocsConfigRef } from '../../config';
 import { ApiExplorerTable } from './ApiExplorerTable';
 
 const entites: Entity[] = [
@@ -25,29 +27,38 @@ const entites: Entity[] = [
     apiVersion: 'backstage.io/v1alpha1',
     kind: 'API',
     metadata: { name: 'api1' },
+    spec: { type: 'openapi' },
   },
   {
     apiVersion: 'backstage.io/v1alpha1',
     kind: 'API',
     metadata: { name: 'api2' },
+    spec: { type: 'openapi' },
   },
   {
     apiVersion: 'backstage.io/v1alpha1',
     kind: 'API',
     metadata: { name: 'api3' },
+    spec: { type: 'grpc' },
   },
 ];
 
+const apiRegistry = ApiRegistry.with(apiDocsConfigRef, {
+  getApiDefinitionWidget: () => undefined,
+});
+
 describe('ApiCatalogTable component', () => {
   it('should render error message when error is passed in props', async () => {
     const rendered = render(
       wrapInTestApp(
-        <ApiExplorerTable
-          titlePreamble="APIs"
-          entities={[]}
-          loading={false}
-          error={{ code: 'error' }}
-        />,
+        <ApiProvider apis={apiRegistry}>
+          <ApiExplorerTable
+            titlePreamble="APIs"
+            entities={[]}
+            loading={false}
+            error={{ code: 'error' }}
+          />
+        </ApiProvider>,
       ),
     );
     const errorMessage = await rendered.findByText(
@@ -59,11 +70,13 @@ describe('ApiCatalogTable component', () => {
   it('should display entity names when loading has finished and no error occurred', async () => {
     const rendered = render(
       wrapInTestApp(
-        <ApiExplorerTable
-          titlePreamble="APIs"
-          entities={entites}
-          loading={false}
-        />,
+        <ApiProvider apis={apiRegistry}>
+          <ApiExplorerTable
+            titlePreamble="APIs"
+            entities={entites}
+            loading={false}
+          />
+        </ApiProvider>,
       ),
     );
     expect(rendered.getByText(/APIs \(3\)/)).toBeInTheDocument();

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

@@ -14,14 +14,23 @@
  * limitations under the License.
  */
 
-import { Entity } from '@backstage/catalog-model';
-import { Table, TableColumn } from '@backstage/core';
-import { Link, Chip } from '@material-ui/core';
+import { ApiEntityV1alpha1, Entity } from '@backstage/catalog-model';
+import { Table, TableColumn, useApi } from '@backstage/core';
+import { Chip, Link } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React from 'react';
 import { generatePath, Link as RouterLink } from 'react-router-dom';
+import { apiDocsConfigRef } from '../../config';
 import { entityRoute } from '../../routes';
 
+const ApiTypeTitle = ({ apiEntity }: { apiEntity: ApiEntityV1alpha1 }) => {
+  const config = useApi(apiDocsConfigRef);
+  const definition = config.getApiDefinitionWidget(apiEntity);
+  const type = definition ? definition.title : apiEntity.spec.type;
+
+  return <span>{type}</span>;
+};
+
 const columns: TableColumn<Entity>[] = [
   {
     title: 'Name',
@@ -54,8 +63,11 @@ const columns: TableColumn<Entity>[] = [
     field: 'spec.lifecycle',
   },
   {
-    title: 'Type', // TODO: Resolve the type display name using the API from https://github.com/spotify/backstage/pull/2451
+    title: 'Type',
     field: 'spec.type',
+    render: (entity: Entity) => (
+      <ApiTypeTitle apiEntity={entity as ApiEntityV1alpha1} />
+    ),
   },
   {
     title: 'Description',