From da80fd96673bf4902294e255f8e5bbf53b6f9044 Mon Sep 17 00:00:00 2001 From: Ryan Vazquez Date: Fri, 7 May 2021 14:39:20 -0400 Subject: [PATCH 1/4] alert titles can render jsx Signed-off-by: Ryan Vazquez --- .../components/AlertInsights/AlertInsightsSection.test.tsx | 4 ++-- .../src/components/AlertInsights/AlertStatusSummary.test.tsx | 4 ++-- plugins/cost-insights/src/types/Alert.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.test.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.test.tsx index 093ca1ff0c..a651556303 100644 --- a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.test.tsx +++ b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.test.tsx @@ -41,8 +41,8 @@ describe('', () => { 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(); diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummary.test.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummary.test.tsx index ab39e0364e..754bc6db5c 100644 --- a/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummary.test.tsx +++ b/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummary.test.tsx @@ -50,8 +50,8 @@ describe('', () => { , ); [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(); }); }); diff --git a/plugins/cost-insights/src/types/Alert.ts b/plugins/cost-insights/src/types/Alert.ts index 84c37a7c15..a8b041a67e 100644 --- a/plugins/cost-insights/src/types/Alert.ts +++ b/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; From 5cd05d92ca64dbeea06b5ff6d7adc35e0a7da431 Mon Sep 17 00:00:00 2001 From: Ryan Vazquez Date: Fri, 7 May 2021 14:52:55 -0400 Subject: [PATCH 2/4] update tests Signed-off-by: Ryan Vazquez --- .../ActionItems/ActionItemCard.test.tsx | 18 ++++++++++++++++++ .../AlertInsightsSection.test.tsx | 19 +++++++++++++++++++ 2 files changed, 37 insertions(+) diff --git a/plugins/cost-insights/src/components/ActionItems/ActionItemCard.test.tsx b/plugins/cost-insights/src/components/ActionItems/ActionItemCard.test.tsx index 70ae44bcdc..b686076e17 100644 --- a/plugins/cost-insights/src/components/ActionItems/ActionItemCard.test.tsx +++ b/plugins/cost-insights/src/components/ActionItems/ActionItemCard.test.tsx @@ -43,4 +43,22 @@ describe('', () => { expect(rendered.getByText(alert.title)).toBeInTheDocument(); expect(rendered.getByText(alert.subtitle)).toBeInTheDocument(); }); + + it('renders custom title elements', async () => { + const rendered = await renderInTestApp( + + Foo, + subtitle: Bar, + }} + avatar={
1
} + /> + , + ); + + expect(rendered.getByText('Foo')).toBeInTheDocument(); + expect(rendered.getByText('Bar')).toBeInTheDocument(); + }); }); diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.test.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.test.tsx index a651556303..f9fe985e43 100644 --- a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.test.tsx +++ b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.test.tsx @@ -49,6 +49,25 @@ describe('', () => { expect(queryByText('Dismiss')).not.toBeInTheDocument(); }); + it('renders custom title elements', () => { + const { getByText } = renderInContext( + Foo, + subtitle: Bar, + }} + 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, From e39c18f7d5d0244622d2404eab16b68202c5d9d8 Mon Sep 17 00:00:00 2001 From: Ryan Vazquez Date: Fri, 7 May 2021 15:01:14 -0400 Subject: [PATCH 3/4] add custom title element to example alert Signed-off-by: Ryan Vazquez --- .../src/example/alerts/KubernetesMigrationAlert.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/plugins/cost-insights/src/example/alerts/KubernetesMigrationAlert.tsx b/plugins/cost-insights/src/example/alerts/KubernetesMigrationAlert.tsx index 4878462f62..8b386f338c 100644 --- a/plugins/cost-insights/src/example/alerts/KubernetesMigrationAlert.tsx +++ b/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 ( + + Consider migrating{' '} + {pluralize('service', this.data.services.length, true)} to Kubernetes{' '} + + + ); } get element() { From 7cbfcae48641be5265bafe2575127aac93ff3dc8 Mon Sep 17 00:00:00 2001 From: Ryan Vazquez Date: Fri, 7 May 2021 15:13:47 -0400 Subject: [PATCH 4/4] changeset Signed-off-by: Ryan Vazquez --- .changeset/cost-insights-fuzzy-boats-float.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cost-insights-fuzzy-boats-float.md diff --git a/.changeset/cost-insights-fuzzy-boats-float.md b/.changeset/cost-insights-fuzzy-boats-float.md new file mode 100644 index 0000000000..c987363480 --- /dev/null +++ b/.changeset/cost-insights-fuzzy-boats-float.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-cost-insights': minor +--- + +support jsx in alert titles