Port AboutCard

.changeset/six-elephants-poke.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Migrate about card to new composability API, exporting the entity cards as `EntityAboutCard`.

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

@@ -29,7 +29,7 @@ import {
   ProvidingComponentsCard,
 } from '@backstage/plugin-api-docs';
 import {
-  AboutCard,
+  EntityAboutCard,
   EntityLinksCard,
   EntityPageLayout,
 } from '@backstage/plugin-catalog';
@@ -174,7 +174,7 @@ export const ErrorsSwitcher = ({ entity }: { entity: Entity }) => {
 const ComponentOverviewContent = ({ entity }: { entity: Entity }) => (
   <Grid container spacing={3} alignItems="stretch">
     <Grid item md={6}>
-      <AboutCard entity={entity} variant="gridItem" />
+      <EntityAboutCard entity={entity} variant="gridItem" />
     </Grid>
     {isPagerDutyAvailable(entity) && (
       <Grid item md={6}>
@@ -344,7 +344,7 @@ export const ComponentEntityPage = ({ entity }: { entity: Entity }) => {
 const ApiOverviewContent = ({ entity }: { entity: Entity }) => (
   <Grid container spacing={3}>
     <Grid item md={6}>
-      <AboutCard entity={entity} />
+      <EntityAboutCard entity={entity} />
     </Grid>
     <Grid container item md={12}>
       <Grid item md={6}>

plugins/catalog/src/components/AboutCard/AboutCard.tsx

@@ -19,6 +19,8 @@ import {
   ENTITY_DEFAULT_NAMESPACE,
   RELATION_PROVIDES_API,
 } from '@backstage/catalog-model';
+import { HeaderIconLinkRow } from '@backstage/core';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import {
   Card,
   CardContent,
@@ -27,14 +29,13 @@ import {
   IconButton,
   makeStyles,
 } from '@material-ui/core';
-import ExtensionIcon from '@material-ui/icons/Extension';
 import DocsIcon from '@material-ui/icons/Description';
 import EditIcon from '@material-ui/icons/Edit';
+import ExtensionIcon from '@material-ui/icons/Extension';
 import GitHubIcon from '@material-ui/icons/GitHub';
 import React from 'react';
 import { findLocationForEntityMeta } from '../../data/utils';
 import { createEditLink, determineUrlType } from '../createEditLink';
-import { HeaderIconLinkRow } from '@backstage/core';
 import { AboutContent } from './AboutContent';
 
 const useStyles = makeStyles({
@@ -76,12 +77,14 @@ function getCodeLinkInfo(entity: Entity): CodeLinkInfo {
 }
 
 type AboutCardProps = {
-  entity: Entity;
+  /** @deprecated The entity is now grabbed from context instead */
+  entity?: Entity;
   variant?: string;
 };
 
-export function AboutCard({ entity, variant }: AboutCardProps) {
+export function AboutCard({ variant }: AboutCardProps) {
   const classes = useStyles();
+  const { entity } = useEntity();
   const codeLink = getCodeLinkInfo(entity);
   // TODO: Also support RELATION_CONSUMES_API here
   const hasApis = entity.relations?.some(r => r.type === RELATION_PROVIDES_API);

plugins/catalog/src/index.ts

@@ -24,5 +24,6 @@ export {
   catalogPlugin as plugin,
   CatalogIndexPage,
   CatalogEntityPage,
+  EntityAboutCard,
   EntityLinksCard,
 } from './plugin';

plugins/catalog/src/plugin.ts

@@ -67,6 +67,14 @@ export const CatalogEntityPage = catalogPlugin.provide(
   }),
 );
 
+export const EntityAboutCard = catalogPlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () => import('./components/AboutCard').then(m => m.AboutCard),
+    },
+  }),
+);
+
 export const EntityLinksCard = catalogPlugin.provide(
   createComponentExtension({
     component: {