remove AboutCard and rename IconLinkVertical and revert some changes

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

@@ -19,7 +19,14 @@ import {
   ENTITY_DEFAULT_NAMESPACE,
   RELATION_PROVIDES_API,
 } from '@backstage/catalog-model';
-import { IconButton } from '@material-ui/core';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Divider,
+  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';
@@ -27,9 +34,21 @@ import GitHubIcon from '@material-ui/icons/GitHub';
 import React from 'react';
 import { findLocationForEntityMeta } from '../../data/utils';
 import { createEditLink, determineUrlType } from '../createEditLink';
-import { AboutCard as CoreAboutCard } from '@backstage/core';
+import { HeaderIconLinkRow } from '@backstage/core';
 import { AboutContent } from './AboutContent';
 
+const useStyles = makeStyles({
+  gridItemCard: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: 'calc(100% - 10px)', // for pages without content header
+    marginBottom: '10px',
+  },
+  gridItemCardContent: {
+    flex: 1,
+  },
+});
+
 const iconMap: Record<string, React.ReactNode> = {
   github: <GitHubIcon />,
 };
@@ -62,6 +81,7 @@ 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);
@@ -86,22 +106,31 @@ export function AboutCard({ entity, variant }: AboutCardProps) {
   };
 
   return (
-    <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} />}
-    />
+    <Card className={variant === 'gridItem' ? classes.gridItemCard : ''}>
+      <CardHeader
+        title="About"
+        variant={variant}
+        action={
+          <IconButton
+            aria-label="Edit"
+            title="Edit Metadata"
+            onClick={() => {
+              window.open(codeLink.edithref || '#', '_blank');
+            }}
+          >
+            <EditIcon />
+          </IconButton>
+        }
+        subheader={
+          <HeaderIconLinkRow links={[viewInSource, viewInTechDocs, viewApi]} />
+        }
+      />
+      <Divider />
+      <CardContent
+        className={variant === 'gridItem' ? classes.gridItemCardContent : ''}
+      >
+        <AboutContent entity={entity} />
+      </CardContent>
+    </Card>
   );
 }

plugins/pagerduty/src/components/PagerDutyCard.tsx

@@ -14,9 +14,16 @@
  * limitations under the License.
  */
 import React, { useState, useCallback } from 'react';
-import { useApi, Progress, AboutCard } from '@backstage/core';
+import { useApi, Progress, HeaderIconLinkRow } from '@backstage/core';
 import { Entity } from '@backstage/catalog-model';
-import { Button, makeStyles } from '@material-ui/core';
+import {
+  Button,
+  makeStyles,
+  Card,
+  CardHeader,
+  Divider,
+  CardContent,
+} from '@material-ui/core';
 import { Incidents } from './Incident';
 import { EscalationPolicy } from './Escalation';
 import { useAsync } from 'react-use';
@@ -118,25 +125,26 @@ export const PagerDutyCard = ({ entity }: Props) => {
   };
 
   return (
-    <AboutCard
-      title="PagerDuty"
-      links={[serviceLink, triggerLink]}
-      content={
-        <>
-          <Incidents
-            serviceId={service!.id}
-            refreshIncidents={refreshIncidents}
-          />
-          <EscalationPolicy policyId={service!.policyId} />
-          <TriggerDialog
-            showDialog={showDialog}
-            handleDialog={handleDialog}
-            name={entity.metadata.name}
-            integrationKey={integrationKey}
-            onIncidentCreated={handleRefresh}
-          />
-        </>
-      }
-    />
+    <Card>
+      <CardHeader
+        title="PagerDuty"
+        subheader={<HeaderIconLinkRow links={[serviceLink, triggerLink]} />}
+      />
+      <Divider />
+      <CardContent>
+        <Incidents
+          serviceId={service!.id}
+          refreshIncidents={refreshIncidents}
+        />
+        <EscalationPolicy policyId={service!.policyId} />
+        <TriggerDialog
+          showDialog={showDialog}
+          handleDialog={handleDialog}
+          name={entity.metadata.name}
+          integrationKey={integrationKey}
+          onIncidentCreated={handleRefresh}
+        />
+      </CardContent>
+    </Card>
   );
 };