From 54ce0ebdd67a59ff53080f96c3ae06dfdc8b8012 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Thu, 17 Dec 2020 16:26:13 +0100
Subject: [PATCH] remove AboutCard and rename IconLinkVertical and revert some
 changes

---
 .../src/components/AboutCard/AboutCard.tsx    | 72 -------------------
 .../HeaderIconLinkRow.tsx}                    |  6 +-
 .../IconLinkVertical.tsx                      |  0
 .../{AboutCard => HeaderIconLinkRow}/index.ts |  3 +-
 .../{AboutCard => HeaderIconLinkRow}/types.ts |  2 +-
 packages/core/src/components/index.ts         |  2 +-
 .../src/components/AboutCard/AboutCard.tsx    | 67 ++++++++++++-----
 .../src/components/PagerDutyCard.tsx          | 52 ++++++++------
 8 files changed, 84 insertions(+), 120 deletions(-)
 delete mode 100644 packages/core/src/components/AboutCard/AboutCard.tsx
 rename packages/core/src/components/{AboutCard/SubHeader.tsx => HeaderIconLinkRow/HeaderIconLinkRow.tsx} (90%)
 rename packages/core/src/components/{AboutCard => HeaderIconLinkRow}/IconLinkVertical.tsx (100%)
 rename packages/core/src/components/{AboutCard => HeaderIconLinkRow}/index.ts (86%)
 rename packages/core/src/components/{AboutCard => HeaderIconLinkRow}/types.ts (96%)

diff --git a/packages/core/src/components/AboutCard/AboutCard.tsx b/packages/core/src/components/AboutCard/AboutCard.tsx
deleted file mode 100644
index e18894f3fb..0000000000
--- a/packages/core/src/components/AboutCard/AboutCard.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/packages/core/src/components/AboutCard/SubHeader.tsx b/packages/core/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx
similarity index 90%
rename from packages/core/src/components/AboutCard/SubHeader.tsx
rename to packages/core/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx
index 861821f89b..4de3f2b174 100644
--- a/packages/core/src/components/AboutCard/SubHeader.tsx
+++ b/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}>
diff --git a/packages/core/src/components/AboutCard/IconLinkVertical.tsx b/packages/core/src/components/HeaderIconLinkRow/IconLinkVertical.tsx
similarity index 100%
rename from packages/core/src/components/AboutCard/IconLinkVertical.tsx
rename to packages/core/src/components/HeaderIconLinkRow/IconLinkVertical.tsx
diff --git a/packages/core/src/components/AboutCard/index.ts b/packages/core/src/components/HeaderIconLinkRow/index.ts
similarity index 86%
rename from packages/core/src/components/AboutCard/index.ts
rename to packages/core/src/components/HeaderIconLinkRow/index.ts
index 0491d467f8..82fb27cfad 100644
--- a/packages/core/src/components/AboutCard/index.ts
+++ b/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';
diff --git a/packages/core/src/components/AboutCard/types.ts b/packages/core/src/components/HeaderIconLinkRow/types.ts
similarity index 96%
rename from packages/core/src/components/AboutCard/types.ts
rename to packages/core/src/components/HeaderIconLinkRow/types.ts
index e1c3948797..b67ad1810a 100644
--- a/packages/core/src/components/AboutCard/types.ts
+++ b/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;
diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
index db9745044a..85ebba7a58 100644
--- a/packages/core/src/components/index.ts
+++ b/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';
diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.tsx
index cf85cee66a..ad06a84089 100644
--- a/plugins/catalog/src/components/AboutCard/AboutCard.tsx
+++ b/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>
   );
 }
diff --git a/plugins/pagerduty/src/components/PagerDutyCard.tsx b/plugins/pagerduty/src/components/PagerDutyCard.tsx
index 10081f8939..5fb2cd7f4a 100644
--- a/plugins/pagerduty/src/components/PagerDutyCard.tsx
+++ b/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>
   );
 };