Use group names in CostInsightsHeader

Signed-off-by: kielosz <kielosz@gmail.com>

.changeset/hot-suits-glow.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cost-insights': patch
+---
+
+The `CostInsightsHeader`component now uses group names if available

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

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>
     </>

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}