From f39dea36fe7116361a7c37b97e4df34ac6490576 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Wed, 7 Apr 2021 13:19:52 -0500
Subject: [PATCH] Fix <p> element on notification action

55e724e8d84bc676987fa1f85effdf0194f84ef9 introduced <p> elements on
notifications. however this is undesirable on the notification action
text. This splits the Notification component into one that is pre change
and one that is post change.

Fixes #394
---
 src/notifications/NotificationAction.tsx      | 24 +++++++++++++++++++
 ...tification.tsx => NotificationMessage.tsx} |  2 +-
 src/notifications/sagas.ts                    | 12 ++++++----
 3 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 src/notifications/NotificationAction.tsx
 rename src/notifications/{Notification.tsx => NotificationMessage.tsx} (92%)

diff --git a/src/notifications/NotificationAction.tsx b/src/notifications/NotificationAction.tsx
new file mode 100644
index 00000000..e4b24f0e
--- /dev/null
+++ b/src/notifications/NotificationAction.tsx
@@ -0,0 +1,24 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2021 The Pybricks Authors
+
+// provides translation for notification text
+
+import { Replacements, useI18n } from '@shopify/react-i18n';
+import React from 'react';
+import { MessageId } from './i18n';
+import en from './i18n.en.json';
+
+type OwnProps = {
+    messageId: MessageId;
+    replacements?: Replacements;
+};
+
+export default function NotificationAction(props: OwnProps): JSX.Element {
+    const [i18n] = useI18n({
+        id: 'notification',
+        translations: { en },
+        fallback: en,
+    });
+    const { messageId, replacements } = props;
+    return <>{i18n.translate(messageId, replacements)}</>;
+}
diff --git a/src/notifications/Notification.tsx b/src/notifications/NotificationMessage.tsx
similarity index 92%
rename from src/notifications/Notification.tsx
rename to src/notifications/NotificationMessage.tsx
index fc49da35..d191526b 100644
--- a/src/notifications/Notification.tsx
+++ b/src/notifications/NotificationMessage.tsx
@@ -13,7 +13,7 @@ type OwnProps = {
     replacements?: Replacements;
 };
 
-export default function Notification(props: OwnProps): JSX.Element {
+export default function NotificationMessage(props: OwnProps): JSX.Element {
     const [i18n] = useI18n({
         id: 'notification',
         translations: { en },
diff --git a/src/notifications/sagas.ts b/src/notifications/sagas.ts
index 5ecb6b8d..75297607 100644
--- a/src/notifications/sagas.ts
+++ b/src/notifications/sagas.ts
@@ -37,7 +37,8 @@ import {
     ServiceWorkerAction,
     ServiceWorkerActionType,
 } from '../service-worker/actions';
-import Notification from './Notification';
+import NotificationAction from './NotificationAction';
+import NotificationMessage from './NotificationMessage';
 import UnexpectedErrorNotification from './UnexpectedErrorNotification';
 import { NotificationActionType, NotificationAddAction } from './actions';
 import { MessageId } from './i18n';
@@ -101,7 +102,7 @@ function dispatchAction(
 ): IActionProps {
     return {
         icon: icon,
-        text: React.createElement(Notification, { messageId }),
+        text: React.createElement(NotificationAction, { messageId }),
         onClick,
     };
 }
@@ -140,7 +141,10 @@ function* showSingleton(
         {
             intent: mapIntent(level),
             icon: mapIcon(level),
-            message: React.createElement(Notification, { messageId, replacements }),
+            message: React.createElement(NotificationMessage, {
+                messageId,
+                replacements,
+            }),
             timeout: 0,
             action,
             onDismiss,
@@ -371,7 +375,7 @@ function* showNoUpdateInfo(action: AppDidCheckForUpdateAction): Generator {
     toaster.show({
         intent: mapIntent(Level.Info),
         icon: mapIcon(Level.Info),
-        message: React.createElement(Notification, {
+        message: React.createElement(NotificationMessage, {
             messageId: MessageId.AppNoUpdateFound,
             replacements: { appName },
         }),