use AboutCard in pagerduty and catalog

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

@@ -17,66 +17,18 @@
 import {
   Entity,
   ENTITY_DEFAULT_NAMESPACE,
-  RELATION_OWNED_BY,
   RELATION_PROVIDES_API,
-  serializeEntityRef,
 } from '@backstage/catalog-model';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  Chip,
-  Divider,
-  Grid,
-  IconButton,
-  makeStyles,
-  Typography,
-} from '@material-ui/core';
+import { IconButton } 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 GitHubIcon from '@material-ui/icons/GitHub';
 import React from 'react';
-import { IconLinkVertical } from './IconLinkVertical';
 import { findLocationForEntityMeta } from '../../data/utils';
 import { createEditLink, determineUrlType } from '../createEditLink';
-
-const useStyles = makeStyles(theme => ({
-  links: {
-    margin: theme.spacing(2, 0),
-    display: 'grid',
-    gridAutoFlow: 'column',
-    gridAutoColumns: 'min-content',
-    gridGap: theme.spacing(3),
-  },
-  label: {
-    color: theme.palette.text.secondary,
-    textTransform: 'uppercase',
-    fontSize: '10px',
-    fontWeight: 'bold',
-    letterSpacing: 0.5,
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-  },
-  value: {
-    fontWeight: 'bold',
-    overflow: 'hidden',
-    lineHeight: '24px',
-    wordBreak: 'break-word',
-  },
-  description: {
-    wordBreak: 'break-word',
-  },
-  gridItemCard: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: 'calc(100% - 10px)', // for pages without content header
-    marginBottom: '10px',
-  },
-  gridItemCardContent: {
-    flex: 1,
-  },
-}));
+import { AboutCard as CoreAboutCard } from '@backstage/core';
+import { AboutContent } from './AboutContent';
 
 const iconMap: Record<string, React.ReactNode> = {
   github: <GitHubIcon />,
@@ -110,138 +62,46 @@ type AboutCardProps = {
 };
 
 export function AboutCard({ entity, variant }: AboutCardProps) {
-  const classes = useStyles();
   const codeLink = getCodeLinkInfo(entity);
   // TODO: Also support RELATION_CONSUMES_API here
   const hasApis = entity.relations?.some(r => r.type === RELATION_PROVIDES_API);
+  const viewInSource = {
+    label: 'View Source',
+    ...codeLink,
+  };
+  const viewInTechDocs = {
+    label: 'View TechDocs',
+    disabled: !entity.metadata.annotations?.['backstage.io/techdocs-ref'],
+    icon: <DocsIcon />,
+    href: `/docs/${entity.metadata.namespace || ENTITY_DEFAULT_NAMESPACE}/${
+      entity.kind
+    }/${entity.metadata.name}`,
+  };
+  const viewApi = {
+    title: hasApis ? '' : 'No APIs available',
+    label: 'View API',
+    disabled: !hasApis,
+    icon: <ExtensionIcon />,
+    href: 'api',
+  };
 
   return (
-    <Card className={variant === 'gridItem' ? classes.gridItemCard : ''}>
-      <CardHeader
-        title="About"
-        action={
-          <IconButton
-            aria-label="Edit"
-            title="Edit Metadata"
-            onClick={() => {
-              window.open(codeLink.edithref || '#', '_blank');
-            }}
-          >
-            <EditIcon />
-          </IconButton>
-        }
-        subheader={
-          <nav className={classes.links}>
-            <IconLinkVertical label="View Source" {...codeLink} />
-            <IconLinkVertical
-              disabled={
-                !entity.metadata.annotations?.['backstage.io/techdocs-ref']
-              }
-              label="View TechDocs"
-              title={
-                !entity.metadata.annotations?.['backstage.io/techdocs-ref']
-                  ? 'No TechDocs available'
-                  : ''
-              }
-              icon={<DocsIcon />}
-              href={`/docs/${
-                entity.metadata.namespace || ENTITY_DEFAULT_NAMESPACE
-              }/${entity.kind}/${entity.metadata.name}`}
-            />
-            <IconLinkVertical
-              disabled={!hasApis}
-              label="View API"
-              title={hasApis ? '' : 'No APIs available'}
-              icon={<ExtensionIcon />}
-              href="api"
-            />
-          </nav>
-        }
-      />
-      <Divider />
-      <CardContent
-        className={variant === 'gridItem' ? classes.gridItemCardContent : ''}
-      >
-        <Grid container>
-          <AboutField label="Description" gridSizes={{ xs: 12 }}>
-            <Typography
-              variant="body2"
-              paragraph
-              className={classes.description}
-            >
-              {entity?.metadata?.description || 'No description'}
-            </Typography>
-          </AboutField>
-          <AboutField
-            label="Owner"
-            value={entity?.relations
-              ?.filter(r => r.type === RELATION_OWNED_BY)
-              .map(({ target: { kind, name, namespace } }) =>
-                // TODO(Rugvip): we want to provide some utils for this
-                serializeEntityRef({
-                  kind,
-                  name,
-                  namespace:
-                    namespace === ENTITY_DEFAULT_NAMESPACE
-                      ? undefined
-                      : namespace,
-                }),
-              )
-              .join(', ')}
-            gridSizes={{ xs: 12, sm: 6, lg: 4 }}
-          />
-          <AboutField
-            label="Type"
-            value={entity?.spec?.type as string}
-            gridSizes={{ xs: 12, sm: 6, lg: 4 }}
-          />
-          <AboutField
-            label="Lifecycle"
-            value={entity?.spec?.lifecycle as string}
-            gridSizes={{ xs: 12, sm: 6, lg: 4 }}
-          />
-          <AboutField
-            label="Tags"
-            value="No Tags"
-            gridSizes={{ xs: 12, sm: 6, lg: 4 }}
-          >
-            {(entity?.metadata?.tags || []).map(t => (
-              <Chip key={t} size="small" label={t} />
-            ))}
-          </AboutField>
-        </Grid>
-      </CardContent>
-    </Card>
-  );
-}
-
-function AboutField({
-  label,
-  value,
-  gridSizes,
-  children,
-}: {
-  label: string;
-  value?: string;
-  gridSizes?: Record<string, number>;
-  children?: React.ReactNode;
-}) {
-  const classes = useStyles();
-
-  // Content is either children or a string prop `value`
-  const content = React.Children.count(children) ? (
-    children
-  ) : (
-    <Typography variant="body2" className={classes.value}>
-      {value || `unknown`}
-    </Typography>
-  );
-  return (
-    <Grid item {...gridSizes}>
-      <Typography variant="subtitle2" className={classes.label}>
-        {label}
-      </Typography>
-      {content}
-    </Grid>
+    <CoreAboutCard
+      variant={variant}
+      title="About"
+      headerAction={
+        <IconButton
+          aria-label="Edit"
+          title="Edit Metadata"
+          onClick={() => {
+            window.open(codeLink.edithref || '#', '_blank');
+          }}
+        >
+          <EditIcon />
+        </IconButton>
+      }
+      links={[viewInSource, viewInTechDocs, viewApi]}
+      content={<AboutContent entity={entity} />}
+    />
   );
 }

plugins/pagerduty/src/components/PagerDutyCard.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React, { useState, useCallback } from 'react';
-import { useApi, Progress } from '@backstage/core';
+import { useApi, Progress, AboutCard } from '@backstage/core';
 import { Entity } from '@backstage/catalog-model';
 import { Button, makeStyles } from '@material-ui/core';
 import { Incidents } from './Incident';
@@ -26,7 +26,6 @@ import AlarmAddIcon from '@material-ui/icons/AlarmAdd';
 import { TriggerDialog } from './TriggerDialog';
 import { MissingTokenError } from './Errors/MissingTokenError';
 import WebIcon from '@material-ui/icons/Web';
-import { AboutCard } from './About/AboutCard';
 
 const useStyles = makeStyles({
   triggerAlarm: {
@@ -98,13 +97,13 @@ export const PagerDutyCard = ({ entity }: Props) => {
   }
 
   const serviceLink = {
-    title: 'Service Directory',
+    label: 'Service Directory',
     href: service!.url,
     icon: <WebIcon />,
   };
 
   const triggerLink = {
-    title: 'Create Incident',
+    label: 'Create Incident',
     action: (
       <Button
         data-testid="trigger-button"