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('', () => {
const rendered = await renderInTestApp(
', () => {
const rendered = await renderInTestApp(
', () => {
const rendered = await renderInTestApp(
', () => {
const rendered = await renderInTestApp(
', () => {
);
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(
+
+
+ ,
+ );
+ expect(
+ rendered.queryByText(/Test group display name/),
+ ).toBeInTheDocument();
+ });
+
+ it('Fallbacks to group id when display name not available', async () => {
+ const rendered = await renderInTestApp(
+
+
+ ,
+ );
+ 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
- Hey, {displayName}! {owner} doesn't seem to have any cloud
- costs.
+ Hey, {displayName}! {ownerName} doesn't seem to have any
+ cloud costs.
{hasMultipleGroups && (
@@ -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 = ({
Hey, {displayName}! We've identified{' '}
{alerts > 1 ? 'a few things ' : 'one thing '}
- {owner} should look into next.
+ {ownerName} should look into next.
>
);
};
-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
- Hey, {displayName}! {owner} is doing well. No major
+ Hey, {displayName}! {ownerName} is doing well. No major
changes this month.
>
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 = () => {