Merge pull request #4490 from SDA-SE/feat/about-card-port

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`.

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

@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { render } from '@testing-library/react';
+import React from 'react';
 import { AboutCard } from './AboutCard';
 
 describe('<AboutCard /> GitHub', () => {
@@ -36,7 +37,11 @@ describe('<AboutCard /> GitHub', () => {
         lifecycle: 'production',
       },
     };
-    const { getByText } = render(<AboutCard entity={entity} />);
+    const { getByText } = render(
+      <EntityProvider entity={entity}>
+        <AboutCard />
+      </EntityProvider>,
+    );
     expect(getByText('service')).toBeInTheDocument();
     expect(getByText('View Source').closest('a')).toHaveAttribute(
       'href',
@@ -67,7 +72,11 @@ describe('<AboutCard /> GitLab', () => {
         lifecycle: 'production',
       },
     };
-    const { getByText } = render(<AboutCard entity={entity} />);
+    const { getByText } = render(
+      <EntityProvider entity={entity}>
+        <AboutCard />
+      </EntityProvider>,
+    );
     expect(getByText('service')).toBeInTheDocument();
     expect(getByText('View Source').closest('a')).toHaveAttribute(
       'href',
@@ -98,7 +107,11 @@ describe('<AboutCard /> BitBucket', () => {
         lifecycle: 'production',
       },
     };
-    const { getByText } = render(<AboutCard entity={entity} />);
+    const { getByText } = render(
+      <EntityProvider entity={entity}>
+        <AboutCard />
+      </EntityProvider>,
+    );
     expect(getByText('service')).toBeInTheDocument();
     expect(getByText('View Source').closest('a')).toHaveAttribute(
       'href',

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: {