From 9318bf15d48391389b465afddc29200b292f8ce6 Mon Sep 17 00:00:00 2001
From: kielosz <kielosz@gmail.com>
Date: Mon, 22 Aug 2022 13:01:32 +0200
Subject: [PATCH] Use group names in CostInsightsHeader

Signed-off-by: kielosz <kielosz@gmail.com>
---
 .changeset/hot-suits-glow.md                  |  5 ++
 .../CostInsightsHeader.test.tsx               | 47 +++++++++++++++++--
 .../CostInsightsHeader/CostInsightsHeader.tsx | 23 +++++----
 .../CostInsightsPage/CostInsightsPage.tsx     |  2 +-
 4 files changed, 64 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/hot-suits-glow.md

diff --git a/.changeset/hot-suits-glow.md b/.changeset/hot-suits-glow.md
new file mode 100644
index 0000000000..e394d3b8c0
--- /dev/null
+++ b/.changeset/hot-suits-glow.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cost-insights': patch
+---
+
+The `CostInsightsHeader`component now uses group names if available
diff --git a/plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.test.tsx b/plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.test.tsx
index cccf8b60cd..015a6279da 100644
--- a/plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.test.tsx
+++ b/plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.test.tsx
@@ -35,7 +35,7 @@ describe('<CostInsightsHeader/>', () => {
     const rendered = await renderInTestApp(
       <ApiProvider apis={apis}>
         <CostInsightsHeader
-          owner="test-owner"
+          groupId="test-user-group-1"
           groups={[{ id: 'test-user-group-1' }]}
           hasCostData
           alerts={0}
@@ -50,7 +50,7 @@ describe('<CostInsightsHeader/>', () => {
     const rendered = await renderInTestApp(
       <ApiProvider apis={apis}>
         <CostInsightsHeader
-          owner="test-owner"
+          groupId="test-user-group-1"
           groups={[{ id: 'test-user-group-1' }]}
           hasCostData
           alerts={4}
@@ -64,7 +64,7 @@ describe('<CostInsightsHeader/>', () => {
     const rendered = await renderInTestApp(
       <ApiProvider apis={apis}>
         <CostInsightsHeader
-          owner="test-owner"
+          groupId="test-user-group-1"
           groups={[{ id: 'test-user-group-1' }]}
           hasCostData
           alerts={1}
@@ -80,7 +80,7 @@ describe('<CostInsightsHeader/>', () => {
     const rendered = await renderInTestApp(
       <ApiProvider apis={apis}>
         <CostInsightsHeader
-          owner="test-owner"
+          groupId="test-user-group-1"
           groups={[{ id: 'test-user-group-1' }]}
           hasCostData={false}
           alerts={1}
@@ -89,4 +89,43 @@ describe('<CostInsightsHeader/>', () => {
     );
     expect(rendered.queryByText(/this is awkward/)).toBeInTheDocument();
   });
+
+  describe.each`
+    hasCostData | alerts
+    ${true}     | ${0}
+    ${true}     | ${1}
+    ${false}    | ${0}
+  `('Shows proper group name', ({ hasCostData, alerts }) => {
+    it('Shows group display name when available', async () => {
+      const rendered = await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <CostInsightsHeader
+            groupId="test-user-group-1"
+            groups={[
+              { id: 'test-user-group-1', name: 'Test group display name' },
+            ]}
+            hasCostData={hasCostData}
+            alerts={alerts}
+          />
+        </ApiProvider>,
+      );
+      expect(
+        rendered.queryByText(/Test group display name/),
+      ).toBeInTheDocument();
+    });
+
+    it('Fallbacks to group id when display name not available', async () => {
+      const rendered = await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <CostInsightsHeader
+            groupId="test-user-group-1"
+            groups={[{ id: 'test-user-group-1' }]}
+            hasCostData={hasCostData}
+            alerts={alerts}
+          />
+        </ApiProvider>,
+      );
+      expect(rendered.queryByText(/test-user-group-1/)).toBeInTheDocument();
+    });
+  });
 });
diff --git a/plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.tsx b/plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.tsx
index cc68f79db1..540165d1d9 100644
--- a/plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.tsx
+++ b/plugins/cost-insights/src/components/CostInsightsHeader/CostInsightsHeader.tsx
@@ -28,19 +28,20 @@ function useDisplayName(): string {
 }
 
 type CostInsightsHeaderProps = {
-  owner: string;
+  groupId: string;
   groups: Group[];
   hasCostData: boolean;
   alerts: number;
 };
 
 const CostInsightsHeaderNoData = ({
-  owner,
+  groupId,
   groups,
 }: CostInsightsHeaderProps) => {
   const displayName = useDisplayName();
   const classes = useCostInsightsStyles();
   const hasMultipleGroups = groups.length > 1;
+  const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;
 
   return (
     <>
@@ -51,8 +52,8 @@ const CostInsightsHeaderNoData = ({
         Well this is awkward
       </Typography>
       <Typography className={classes.h6Subtle} align="center" gutterBottom>
-        <b>Hey, {displayName}!</b> <b>{owner}</b> doesn't seem to have any cloud
-        costs.
+        <b>Hey, {displayName}!</b> <b>{ownerName}</b> doesn't seem to have any
+        cloud costs.
       </Typography>
       {hasMultipleGroups && (
         <Typography align="center" gutterBottom>
@@ -64,11 +65,13 @@ const CostInsightsHeaderNoData = ({
 };
 
 const CostInsightsHeaderAlerts = ({
-  owner,
+  groupId,
+  groups,
   alerts,
 }: CostInsightsHeaderProps) => {
   const displayName = useDisplayName();
   const classes = useCostInsightsStyles();
+  const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;
 
   return (
     <>
@@ -81,15 +84,19 @@ const CostInsightsHeaderAlerts = ({
       <Typography className={classes.h6Subtle} align="center" gutterBottom>
         <b>Hey, {displayName}!</b> We've identified{' '}
         {alerts > 1 ? 'a few things ' : 'one thing '}
-        <b>{owner}</b> should look into next.
+        <b>{ownerName}</b> should look into next.
       </Typography>
     </>
   );
 };
 
-const CostInsightsHeaderNoAlerts = ({ owner }: CostInsightsHeaderProps) => {
+const CostInsightsHeaderNoAlerts = ({
+  groupId,
+  groups,
+}: CostInsightsHeaderProps) => {
   const displayName = useDisplayName();
   const classes = useCostInsightsStyles();
+  const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId;
 
   return (
     <>
@@ -100,7 +107,7 @@ const CostInsightsHeaderNoAlerts = ({ owner }: CostInsightsHeaderProps) => {
         Your team is doing great
       </Typography>
       <Typography className={classes.h6Subtle} align="center" gutterBottom>
-        <b>Hey, {displayName}!</b> <b>{owner}</b> is doing well. No major
+        <b>Hey, {displayName}!</b> <b>{ownerName}</b> is doing well. No major
         changes this month.
       </Typography>
     </>
diff --git a/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx b/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx
index 8fdfda936e..00d92f945d 100644
--- a/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx
+++ b/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx
@@ -272,7 +272,7 @@ export const CostInsightsPage = () => {
             <Grid container direction="column">
               <Grid item xs>
                 <CostInsightsHeader
-                  owner={pageFilters.group}
+                  groupId={pageFilters.group}
                   groups={groups}
                   hasCostData={!!dailyCost.aggregation.length}
                   alerts={active.length}