From 53b69236ddedc1225c7e779176630887f67a7c17 Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Thu, 11 Feb 2021 14:02:45 +0100
Subject: [PATCH] Port AboutCard

---
 .changeset/six-elephants-poke.md                      |  5 +++++
 packages/app/src/components/catalog/EntityPage.tsx    |  6 +++---
 .../catalog/src/components/AboutCard/AboutCard.tsx    | 11 +++++++----
 plugins/catalog/src/index.ts                          |  1 +
 plugins/catalog/src/plugin.ts                         |  8 ++++++++
 5 files changed, 24 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/six-elephants-poke.md

diff --git a/.changeset/six-elephants-poke.md b/.changeset/six-elephants-poke.md
new file mode 100644
index 0000000000..23e575b67c
--- /dev/null
+++ b/.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`.
diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx
index e849667c19..5c9ff1c448 100644
--- a/packages/app/src/components/catalog/EntityPage.tsx
+++ b/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}>
diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.tsx
index 1549d87b8a..04c2a78869 100644
--- a/plugins/catalog/src/components/AboutCard/AboutCard.tsx
+++ b/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);
diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts
index 1bc11f6880..ce8518eb55 100644
--- a/plugins/catalog/src/index.ts
+++ b/plugins/catalog/src/index.ts
@@ -24,5 +24,6 @@ export {
   catalogPlugin as plugin,
   CatalogIndexPage,
   CatalogEntityPage,
+  EntityAboutCard,
   EntityLinksCard,
 } from './plugin';
diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts
index c6944a318a..c2b910ce68 100644
--- a/plugins/catalog/src/plugin.ts
+++ b/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: {