remove AboutCard and rename IconLinkVertical and revert some changes

packages/core/src/components/AboutCard/AboutCard.tsx

@@ -1,72 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  Divider,
-  makeStyles,
-} from '@material-ui/core';
-import { SubHeader } from './SubHeader';
-import { SubHeaderLink } from './types';
-
-const useStyles = makeStyles({
-  gridItemCard: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: 'calc(100% - 10px)', // for pages without content header
-    marginBottom: '10px',
-  },
-  gridItemCardContent: {
-    flex: 1,
-  },
-});
-
-type Props = {
-  title: string;
-  headerClass?: string;
-  headerAction?: React.ReactNode;
-  links: SubHeaderLink[];
-  contentClass?: string;
-  content: React.ReactNode;
-  variant?: string;
-};
-
-export const AboutCard = ({
-  title,
-  headerAction,
-  links,
-  content,
-  variant,
-}: Props) => {
-  const classes = useStyles();
-  return (
-    <Card className={variant === 'gridItem' ? classes.gridItemCard : ''}>
-      <CardHeader
-        title={title}
-        action={headerAction}
-        subheader={<SubHeader links={links} />}
-      />
-      <Divider />
-      <CardContent
-        className={variant === 'gridItem' ? classes.gridItemCardContent : ''}
-      >
-        {content}
-      </CardContent>
-    </Card>
-  );
-};

packages/core/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { IconLinkVertical } from './IconLinkVertical';
-import { SubHeaderLink } from './types';
+import { HeaderIconLink } from './types';
 import { makeStyles } from '@material-ui/core';
 
 const useStyles = makeStyles(theme => ({
@@ -29,10 +29,10 @@ const useStyles = makeStyles(theme => ({
 }));
 
 type Props = {
-  links: SubHeaderLink[];
+  links: HeaderIconLink[];
 };
 
-export const SubHeader = ({ links }: Props) => {
+export const HeaderIconLinkRow = ({ links }: Props) => {
   const classes = useStyles();
   return (
     <nav className={classes.links}>

packages/core/src/components/HeaderIconLinkRow/index.ts

@@ -14,5 +14,4 @@
  * limitations under the License.
  */
 
-export { AboutCard } from './AboutCard';
-export { IconLinkVertical } from './IconLinkVertical';
+export { HeaderIconLinkRow } from './HeaderIconLinkRow';

packages/core/src/components/HeaderIconLinkRow/types.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export type SubHeaderLink = {
+export type HeaderIconLink = {
   icon?: React.ReactNode;
   href?: string;
   disabled?: boolean;

packages/core/src/components/index.ts

@@ -38,4 +38,4 @@ export * from './TrendLine';
 export * from './WarningPanel';
 export * from './EmptyState';
 export * from './MarkdownContent';
-export * from './AboutCard';
+export * from './HeaderIconLinkRow';

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>
   );
 };