remove AboutCard and rename IconLinkVertical and revert some changes

verbatino · Dec 17, 2020 · 54ce0eb · 54ce0eb
1 parent 9a74e9a
commit 54ce0eb
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 120 deletions.
diff --git a/packages/core/src/components/AboutCard/AboutCard.tsx b/packages/core/src/components/AboutCard/AboutCard.tsx
diff --git a/...re/src/components/AboutCard/SubHeader.tsx → ...s/HeaderIconLinkRow/HeaderIconLinkRow.tsx b/...re/src/components/AboutCard/SubHeader.tsx → ...s/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/...components/AboutCard/IconLinkVertical.tsx → ...ts/HeaderIconLinkRow/IconLinkVertical.tsx b/...components/AboutCard/IconLinkVertical.tsx → ...ts/HeaderIconLinkRow/IconLinkVertical.tsx
diff --git a/...es/core/src/components/AboutCard/index.ts → ...src/components/HeaderIconLinkRow/index.ts b/...es/core/src/components/AboutCard/index.ts → ...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/...es/core/src/components/AboutCard/types.ts → ...src/components/HeaderIconLinkRow/types.ts b/...es/core/src/components/AboutCard/types.ts → ...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
@@ -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
@@ -19,17 +19,36 @@ 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';
 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
@@ -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>
   );
 };