Fix <p> element on notification action

55e724e8d8 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

@@ -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)}</>;
+}

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 },

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 },
         }),