From bb4fb80dac1d4c29728a2cc52112181c7f414495 Mon Sep 17 00:00:00 2001
From: Alec Jacobs <cajacobs5401@gmail.com>
Date: Fri, 27 May 2022 10:39:06 -0700
Subject: [PATCH] feat(plugins/pagerduty): add wrapper BasicCard component

* ensures errors and progress bar have consistent styling with the rest
  of the Overview Page components

Signed-off-by: Alec Jacobs <cajacobs5401@gmail.com>
---
 .../src/components/PagerDutyCard/index.tsx          | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/plugins/pagerduty/src/components/PagerDutyCard/index.tsx b/plugins/pagerduty/src/components/PagerDutyCard/index.tsx
index 0938f7288b..e5c7eab071 100644
--- a/plugins/pagerduty/src/components/PagerDutyCard/index.tsx
+++ b/plugins/pagerduty/src/components/PagerDutyCard/index.tsx
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState, useCallback } from 'react';
+import React, { ReactNode, useState, useCallback } from 'react';
 import { Entity } from '@backstage/catalog-model';
 import { Card, CardHeader, Divider, CardContent } from '@material-ui/core';
 import { Incidents } from '../Incident';
@@ -37,8 +37,13 @@ import {
   IconLinkVerticalProps,
   TabbedCard,
   CardTab,
+  InfoCard,
 } from '@backstage/core-components';
 
+const BasicCard = ({ children }: { children: ReactNode }) => (
+  <InfoCard title="PagerDuty">{children}</InfoCard>
+);
+
 export const isPluginApplicableToEntity = (entity: Entity) =>
   Boolean(
     entity.metadata.annotations?.[PAGERDUTY_INTEGRATION_KEY] ||
@@ -96,7 +101,11 @@ export const PagerDutyCard = () => {
   }
 
   if (loading) {
-    return <Progress />;
+    return (
+      <BasicCard>
+        <Progress />
+      </BasicCard>
+    );
   }
 
   const serviceLink: IconLinkVerticalProps = {