Merge pull request #5621 from backstage/cost-insights-custom-alert-titles

Cost insights custom alert titles

.changeset/cost-insights-fuzzy-boats-float.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cost-insights': minor
+---
+
+support jsx in alert titles

plugins/cost-insights/src/components/ActionItems/ActionItemCard.test.tsx

@@ -43,4 +43,22 @@ describe('<ActionItemCard/>', () => {
     expect(rendered.getByText(alert.title)).toBeInTheDocument();
     expect(rendered.getByText(alert.subtitle)).toBeInTheDocument();
   });
+
+  it('renders custom title elements', async () => {
+    const rendered = await renderInTestApp(
+      <MockScrollProvider>
+        <ActionItemCard
+          alert={{
+            ...alert,
+            title: <span>Foo</span>,
+            subtitle: <span>Bar</span>,
+          }}
+          avatar={<div>1</div>}
+        />
+      </MockScrollProvider>,
+    );
+
+    expect(rendered.getByText('Foo')).toBeInTheDocument();
+    expect(rendered.getByText('Bar')).toBeInTheDocument();
+  });
 });

plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.test.tsx

@@ -41,14 +41,33 @@ describe('<AlertInsightsSection/>', () => {
         onAccept={jest.fn()}
       />,
     );
-    expect(getByText(mockAlert.title)).toBeInTheDocument();
-    expect(getByText(mockAlert.subtitle)).toBeInTheDocument();
+    expect(getByText(mockAlert.title as string)).toBeInTheDocument();
+    expect(getByText(mockAlert.subtitle as string)).toBeInTheDocument();
     expect(getByText('View Instructions')).toBeInTheDocument();
     expect(queryByText('Snooze')).not.toBeInTheDocument();
     expect(queryByText('Accept')).not.toBeInTheDocument();
     expect(queryByText('Dismiss')).not.toBeInTheDocument();
   });
 
+  it('renders custom title elements', () => {
+    const { getByText } = renderInContext(
+      <AlertInsightsSection
+        alert={{
+          ...mockAlert,
+          title: <span>Foo</span>,
+          subtitle: <span>Bar</span>,
+        }}
+        number={1}
+        onSnooze={jest.fn()}
+        onDismiss={jest.fn()}
+        onAccept={jest.fn()}
+      />,
+    );
+
+    expect(getByText('Foo')).toBeInTheDocument();
+    expect(getByText('Bar')).toBeInTheDocument();
+  });
+
   it('Hides instructions button if url is not provided', () => {
     const alert: Alert = {
       ...mockAlert,

plugins/cost-insights/src/components/AlertInsights/AlertStatusSummary.test.tsx

@@ -50,8 +50,8 @@ describe('<AlertStatusSummary />', () => {
       </MockScrollProvider>,
     );
     [mockSnoozed, mockAccepted, mockDismissed].forEach(a => {
-      expect(getByText(a.title)).toBeInTheDocument();
-      expect(getByText(a.subtitle)).toBeInTheDocument();
+      expect(getByText(a.title as string)).toBeInTheDocument();
+      expect(getByText(a.subtitle as string)).toBeInTheDocument();
       expect(getByRole('img', { name: a.status })).toBeInTheDocument();
     });
   });

plugins/cost-insights/src/example/alerts/KubernetesMigrationAlert.tsx

@@ -17,6 +17,7 @@
 import React from 'react';
 import pluralize from 'pluralize';
 import { KubernetesMigrationAlertCard } from '../components';
+import { Lifecycle } from '@backstage/core';
 import { CostInsightsApi } from '../../api';
 import {
   Alert,
@@ -87,11 +88,13 @@ export class KubernetesMigrationAlert implements KubernetesMigrationApi {
   }
 
   get title() {
-    return `Consider migrating ${pluralize(
-      'service',
-      this.data.services.length,
-      true,
-    )} to Kubernetes.`;
+    return (
+      <span>
+        Consider migrating{' '}
+        {pluralize('service', this.data.services.length, true)} to Kubernetes{' '}
+        <Lifecycle shorthand />
+      </span>
+    );
   }
 
   get element() {

plugins/cost-insights/src/types/Alert.ts

@@ -34,8 +34,8 @@ import { Maybe } from './Maybe';
  */
 
 export type Alert = {
-  title: string;
-  subtitle: string;
+  title: string | JSX.Element;
+  subtitle: string | JSX.Element;
   element?: JSX.Element;
   status?: AlertStatus;
   url?: string;