Show consumers and providers for APIs

.changeset/seven-tips-begin.md

@@ -0,0 +1,6 @@
+---
+'@backstage/create-app': patch
+'@backstage/plugin-api-docs': patch
+---
+
+Add tables with consumes and provides relationships to the API and component entity pages.

packages/app/src/components/catalog/EntityPage.tsx

@@ -17,7 +17,10 @@ import { ApiEntity, Entity } from '@backstage/catalog-model';
 import { EmptyState } from '@backstage/core';
 import {
   ApiDefinitionCard,
-  Router as ApiDocsRouter,
+  ConsumedApisCard,
+  ConsumingComponentsCard,
+  ProvidedApisCard,
+  ProvidingComponentsCard,
 } from '@backstage/plugin-api-docs';
 import {
   AboutCard,
@@ -167,6 +170,17 @@ const ComponentOverviewContent = ({ entity }: { entity: Entity }) => (
   </Grid>
 );
 
+const ComponentApisContent = ({ entity }: { entity: Entity }) => (
+  <Grid container spacing={3} alignItems="stretch">
+    <Grid item md={6}>
+      <ProvidedApisCard entity={entity} />
+    </Grid>
+    <Grid item md={6}>
+      <ConsumedApisCard entity={entity} />
+    </Grid>
+  </Grid>
+);
+
 const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
   <EntityPageLayout>
     <EntityPageLayout.Content
@@ -187,7 +201,7 @@ const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
     <EntityPageLayout.Content
       path="/api/*"
       title="API"
-      element={<ApiDocsRouter entity={entity} />}
+      element={<ComponentApisContent entity={entity} />}
     />
     <EntityPageLayout.Content
       path="/docs/*"
@@ -288,6 +302,14 @@ const ApiOverviewContent = ({ entity }: { entity: Entity }) => (
     <Grid item md={6}>
       <AboutCard entity={entity} />
     </Grid>
+    <Grid container item md={12}>
+      <Grid item md={6}>
+        <ProvidingComponentsCard entity={entity} />
+      </Grid>
+      <Grid item md={6}>
+        <ConsumingComponentsCard entity={entity} />
+      </Grid>
+    </Grid>
   </Grid>
 );
 

packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx

@@ -13,26 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { Entity } from '@backstage/catalog-model';
+import { WarningPanel } from '@backstage/core';
+import { ConsumedApisCard, ProvidedApisCard } from '@backstage/plugin-api-docs';
 import {
-  Router as GitHubActionsRouter,
-  isPluginApplicableToEntity as isGitHubActionsAvailable,
-} from '@backstage/plugin-github-actions';
+  AboutCard, EntityPageLayout,
+  useEntity
+} from '@backstage/plugin-catalog';
 import {
-  Router as CircleCIRouter,
-  isPluginApplicableToEntity as isCircleCIAvailable,
+  isPluginApplicableToEntity as isCircleCIAvailable, Router as CircleCIRouter
 } from '@backstage/plugin-circleci';
-import { Router as ApiDocsRouter } from '@backstage/plugin-api-docs';
-import { EmbeddedDocsRouter as DocsRouter } from '@backstage/plugin-techdocs';
-
-import React from 'react';
 import {
-  EntityPageLayout,
-  useEntity,
-  AboutCard,
-} from '@backstage/plugin-catalog';
-import { Entity } from '@backstage/catalog-model';
+  isPluginApplicableToEntity as isGitHubActionsAvailable, Router as GitHubActionsRouter
+} from '@backstage/plugin-github-actions';
+import { EmbeddedDocsRouter as DocsRouter } from '@backstage/plugin-techdocs';
 import { Grid } from '@material-ui/core';
-import { WarningPanel } from '@backstage/core';
+import React from 'react';
+
 
 const CICDSwitcher = ({ entity }: { entity: Entity }) => {
   // This component is just an example of how you can implement your company's logic in entity page.
@@ -60,6 +57,17 @@ const OverviewContent = ({ entity }: { entity: Entity }) => (
   </Grid>
 );
 
+const ComponentApisContent = ({ entity }: { entity: Entity }) => (
+  <Grid container spacing={3} alignItems="stretch">
+    <Grid item md={6}>
+      <ProvidedApisCard entity={entity} />
+    </Grid>
+    <Grid item md={6}>
+      <ConsumedApisCard entity={entity} />
+    </Grid>
+  </Grid>
+);
+
 const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
   <EntityPageLayout>
     <EntityPageLayout.Content
@@ -75,7 +83,7 @@ const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
     <EntityPageLayout.Content
       path="/api/*"
       title="API"
-      element={<ApiDocsRouter entity={entity} />}
+      element={<ComponentApisContent entity={entity} />}
     />
     <EntityPageLayout.Content
       path="/docs/*"

plugins/api-docs/src/components/ApisCards/ApisTable.tsx

@@ -0,0 +1,84 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ApiEntity } from '@backstage/catalog-model';
+import { Table, TableColumn } from '@backstage/core';
+import React from 'react';
+import { ApiTypeTitle } from '../ApiDefinitionCard';
+import { EntityLink } from '../EntityLink';
+
+const columns: TableColumn<ApiEntity>[] = [
+  {
+    title: 'Name',
+    field: 'metadata.name',
+    highlight: true,
+    render: (entity: any) => (
+      <EntityLink entity={entity}>{entity.metadata.name}</EntityLink>
+    ),
+  },
+  {
+    title: 'Owner',
+    field: 'spec.owner',
+  },
+  {
+    title: 'Lifecycle',
+    field: 'spec.lifecycle',
+  },
+  {
+    title: 'Type',
+    field: 'spec.type',
+    render: (entity: ApiEntity) => <ApiTypeTitle apiEntity={entity} />,
+  },
+  {
+    title: 'Description',
+    field: 'metadata.description',
+    width: 'auto',
+  },
+];
+
+type Props = {
+  title: string;
+  variant?: string;
+  entities: (ApiEntity | undefined)[];
+};
+
+export const ApisTable = ({ entities, title, variant = 'gridItem' }: Props) => {
+  const tableStyle: React.CSSProperties = {
+    minWidth: '0',
+    width: '100%',
+  };
+
+  if (variant === 'gridItem') {
+    tableStyle.height = 'calc(100% - 10px)';
+  }
+
+  return (
+    <Table<ApiEntity>
+      columns={columns}
+      title={title}
+      style={tableStyle}
+      options={{
+        // TODO: Toolbar padding if off compared to other cards, should be: padding: 16px 24px;
+        search: false,
+        paging: false,
+        actionsColumnIndex: -1,
+        padding: 'dense',
+      }}
+      // TODO: For now we skip all APIs that we can't find without a warning!
+      data={entities.filter(e => e !== undefined) as ApiEntity[]}
+    />
+  );
+};