From 98c8ee0e1f2686b4f72ab203a8eeba7040b75457 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Wed, 13 Sep 2023 07:33:14 -0500
Subject: [PATCH] Merge pull request #14793 from
 overleaf/jel-new-alert-content-string

[web] Option to pass content as string to notification component

GitOrigin-RevId: 05196a44d25dab5ba85b58965c3bb5ac071a3897
---
 .../web/frontend/js/shared/components/notification.tsx |  2 +-
 services/web/frontend/stories/notification.stories.tsx |  4 ++++
 .../frontend/shared/components/notification.test.tsx   | 10 +++++++++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/js/shared/components/notification.tsx b/services/web/frontend/js/shared/components/notification.tsx
index aa36ff8940..25a28a2f29 100644
--- a/services/web/frontend/js/shared/components/notification.tsx
+++ b/services/web/frontend/js/shared/components/notification.tsx
@@ -8,7 +8,7 @@ type NotificationType = 'info' | 'success' | 'warning' | 'error'
 type NotificationProps = {
   action?: React.ReactElement
   ariaLive?: 'polite' | 'off' | 'assertive'
-  content: React.ReactElement
+  content: React.ReactElement | string
   customIcon?: React.ReactElement
   isDismissible?: boolean
   isActionBelowContent?: boolean
diff --git a/services/web/frontend/stories/notification.stories.tsx b/services/web/frontend/stories/notification.stories.tsx
index e761da39c5..cf486fcfaa 100644
--- a/services/web/frontend/stories/notification.stories.tsx
+++ b/services/web/frontend/stories/notification.stories.tsx
@@ -300,6 +300,10 @@ export const SuccessFlow = (args: Args) => {
   return startNotification
 }
 
+export const ContentAsAString = (args: Args) => {
+  return <Notification {...args} content="An alert" />
+}
+
 export default {
   title: 'Shared / Components / Notification',
   component: Notification,
diff --git a/services/web/test/frontend/shared/components/notification.test.tsx b/services/web/test/frontend/shared/components/notification.test.tsx
index d7f8077271..a4b421efc6 100644
--- a/services/web/test/frontend/shared/components/notification.test.tsx
+++ b/services/web/test/frontend/shared/components/notification.test.tsx
@@ -41,7 +41,7 @@ describe('<Notification />', function () {
     screen.getByRole('button', { name: 'Close' })
   })
 
-  it('renders with title', function () {
+  it('renders with title and content passed as HTML', function () {
     render(
       <Notification
         type="info"
@@ -50,5 +50,13 @@ describe('<Notification />', function () {
       />
     )
     screen.getByText('A title')
+    screen.getByText('A notification')
+  })
+
+  it('renders with content when passed as a string', function () {
+    render(
+      <Notification type="info" content="A notification" title="A title" />
+    )
+    screen.getByText('A notification')
   })
 })