convert ble service to saga

src/components/BluetoothButton.tsx

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { Action, Dispatch } from '../actions';
 import { toggleBluetooth } from '../actions/ble';
 import { RootState } from '../reducers';
-import { BLEConnectionState } from '../reducers/ble';
+import { BleConnectionState } from '../reducers/ble';
 import { BootloaderConnectionState } from '../reducers/bootloader';
 import ActionButton, { ActionButtonProps } from './ActionButton';
 import { TooltipId } from './button';
@@ -17,7 +17,7 @@ type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
 
 const mapStateToProps = (state: RootState): StateProps => {
     if (
-        state.ble.connection === BLEConnectionState.Disconnected &&
+        state.ble.connection === BleConnectionState.Disconnected &&
         state.bootloader.connection === BootloaderConnectionState.Disconnected
     ) {
         return {
@@ -29,7 +29,7 @@ const mapStateToProps = (state: RootState): StateProps => {
         return {
             tooltip: TooltipId.BluetoothDisconnect,
             icon: btConnectedIcon,
-            enabled: state.ble.connection === BLEConnectionState.Connected,
+            enabled: state.ble.connection === BleConnectionState.Connected,
         };
     }
 };

src/components/Notification.tsx

@@ -3,6 +3,7 @@
 
 import { IconName, Intent, Toast } from '@blueprintjs/core';
 import { WithI18nProps, withI18n } from '@shopify/react-i18n';
+import { PrimitiveReplacementDictionary } from '@shopify/react-i18n/dist/src/types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { Action, Dispatch } from '../actions';
@@ -20,6 +21,7 @@ interface OwnProps {
     level: NotificationLevel;
     message?: string;
     messageId?: string;
+    replacements?: PrimitiveReplacementDictionary;
     helpUrl?: string;
     action?: MessageAction;
 }
@@ -63,6 +65,7 @@ class Notification extends React.Component<NotificationProps> {
             messageId,
             onAction,
             onClose,
+            replacements,
         } = this.props;
         return (
             <Toast
@@ -74,7 +77,7 @@ class Notification extends React.Component<NotificationProps> {
                     <div>
                         <p>
                             {messageId
-                                ? i18n.translate(messageId)
+                                ? i18n.translate(messageId, replacements)
                                 : message || 'missing message!'}
                         </p>
                         {helpUrl && (

src/components/NotificationStack.tsx

@@ -25,6 +25,7 @@ class NotificationStack extends React.Component<NotificationStackProps> {
                         level={n.level}
                         message={n.message}
                         messageId={n.messageId}
+                        replacements={n.replacements}
                         helpUrl={n.helpUrl}
                         action={n.action}
                     />

src/components/notification.en.json

@@ -1,7 +1,8 @@
 {
     "ble": {
         "cannotWriteWithoutResponse": "This web browser does not support Web Bluetooth Write Characteristic Without Response. Flashing firmware will take a long time.",
-        "gattServiceNotFound": "Connected to hub but failed to get LEGO bootloader service. Try removing the \"LEGO Bootloader\" device in your OS Bluetooth settings, then try again.",
+        "gattPermission": "The web browser did not give permission to use Bluetooth Low Energy",
+        "gattServiceNotFound": "Connected to hub but failed to get {serviceName} service. Try removing the \"{hubName}\" device in your OS Bluetooth settings, then try again.",
         "noWebBluetooth": "This web browser does not support Web Bluetooth or it is not enabled.",
         "connectFailed": "Unexpected error while trying to connect. Check console log and report the error."
     },