add messages for device status

src/components/DeviceHeader/index.js

@@ -1,9 +1,9 @@
-// TODO: l10n for device status
 import React from 'react';
 import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import { getStatusColor, getStatusName, getStatus } from 'utils/device';
 import { TrezorImage, colors } from 'trezor-ui-components';
+import { injectIntl } from 'react-intl';
 
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 
@@ -102,6 +102,7 @@ const DeviceHeader = ({
     isSelected = false,
     className,
     testId,
+    intl,
 }) => {
     const status = getStatus(device);
     return (
@@ -123,7 +124,7 @@ const DeviceHeader = ({
             </ImageWrapper>
             <LabelWrapper>
                 <Name>{device.instanceLabel}</Name>
-                <Status title={getStatusName(status)}>{getStatusName(status)}</Status>
+                <Status title={getStatusName(status, intl)}>{getStatusName(status, intl)}</Status>
             </LabelWrapper>
             <IconWrapper>{icon && !disabled && isAccessible && icon}</IconWrapper>
         </Wrapper>
@@ -141,6 +142,7 @@ DeviceHeader.propTypes = {
     onClickWrapper: PropTypes.func.isRequired,
     className: PropTypes.string,
     testId: PropTypes.string,
+    intl: PropTypes.any,
 };
 
-export default DeviceHeader;
+export default injectIntl(DeviceHeader);

src/components/DeviceHeader/index.messages.js

@@ -0,0 +1,63 @@
+/* @flow */
+import { defineMessages } from 'react-intl';
+import type { Messages } from 'flowtype/npm/react-intl';
+
+const definedMessages: Messages = defineMessages({
+    TR_CONNECTED: {
+        id: 'TR_CONNECTED',
+        defaultMessage: 'Connected',
+        description: 'Device status',
+    },
+    TR_CONNECTED_BOOTLOADER: {
+        id: 'TR_CONNECTED_BOOTLOADER',
+        defaultMessage: 'Connected (bootloader mode)',
+        description: 'Device status',
+    },
+    TR_CONNECTED_NOT_INITIALIZED: {
+        id: 'TR_CONNECTED',
+        defaultMessage: 'Connected (not initialized)',
+        description: 'Device status',
+    },
+    TR_CONNECTED_SEEDLESS: {
+        id: 'TR_CONNECTED_SEEDLESS',
+        defaultMessage: 'Connected (seedless mode)',
+        description: 'Device status',
+    },
+    TR_CONNECTED_UPDATE_REQUIRED: {
+        id: 'TR_CONNECTED_UPDATE_REQUIRED',
+        defaultMessage: 'Connected (update required)',
+        description: 'Device status',
+    },
+    TR_CONNECTED_UPDATE_RECOMMENDED: {
+        id: 'TR_CONNECTED_UPDATE_RECOMMENDED',
+        defaultMessage: 'Connected (update recommended)',
+        description: 'Device status',
+    },
+    TR_USED_IN_ANOTHER_WINDOW: {
+        id: 'TR_USED_IN_ANOTHER_WINDOW',
+        defaultMessage: 'Used in other window',
+        description: 'Device status',
+    },
+    TR_UNAVAILABLE: {
+        id: 'TR_UNAVAILABLE',
+        defaultMessage: 'Unavailable',
+        description: 'Device status',
+    },
+    TR_UNREADABLE: {
+        id: 'TR_UNREADABLE',
+        defaultMessage: 'Unreadable',
+        description: 'Device status',
+    },
+    TR_DISCONNECTED: {
+        id: 'TR_DISCONNECTED',
+        defaultMessage: 'Disconnected',
+        description: 'Device status',
+    },
+    TR_STATUS_UNKNOWN: {
+        id: 'TR_STATUS_UNKNOWN',
+        defaultMessage: 'Status unknown',
+        description: 'Device status',
+    },
+});
+
+export default definedMessages;

src/utils/__tests__/device.test.js

@@ -76,15 +76,4 @@ describe('device utils', () => {
         expect(utils.getStatusColor('disconnected')).toBe(colors.ERROR_PRIMARY);
         expect(utils.getStatusColor('unavailable')).toBe(colors.ERROR_PRIMARY);
     });
-
-    it('get status name', () => {
-        expect(utils.getStatusName(0)).toBe('Status unknown');
-        expect(utils.getStatusName(null)).toBe('Status unknown');
-        expect(utils.getStatusName('sdsdsdsd')).toBe('Status unknown');
-        expect(utils.getStatusName('used-in-other-window')).toBe('Used in other window');
-        expect(utils.getStatusName('connected')).toBe('Connected');
-        expect(utils.getStatusName('unacquired')).toBe('Used in other window');
-        expect(utils.getStatusName('disconnected')).toBe('Disconnected');
-        expect(utils.getStatusName('unavailable')).toBe('Unavailable');
-    });
 });

src/utils/device.js

@@ -1,10 +1,12 @@
 /* @flow */
 
 import { colors } from 'trezor-ui-components';
-
+import type { IntlShape } from 'react-intl';
 import type { Device } from 'trezor-connect';
 import type { TrezorDevice, State } from 'flowtype';
 
+import l10nMessages from 'components/DeviceHeader/index.messages';
+
 type Transport = $ElementType<$ElementType<State, 'connect'>, 'transport'>;
 
 export const getStatus = (device: TrezorDevice): string => {
@@ -48,32 +50,44 @@ export const getStatus = (device: TrezorDevice): string => {
     return 'unknown';
 };
 
-export const getStatusName = (deviceStatus: string): string => {
+export const getStatusName = (deviceStatus: string, intl: IntlShape): string => {
     switch (deviceStatus) {
         case 'connected':
-            return 'Connected';
+            // return 'Connected';
+            return intl.formatMessage(l10nMessages.TR_CONNECTED);
         case 'disconnected':
-            return 'Disconnected';
+            // return 'Disconnected';
+            return intl.formatMessage(l10nMessages.TR_DISCONNECTED);
         case 'bootloader':
-            return 'Connected (bootloader mode)';
+            // return 'Connected (bootloader mode)';
+            return intl.formatMessage(l10nMessages.TR_CONNECTED_BOOTLOADER);
         case 'initialize':
-            return 'Connected (not initialized)';
+            // return 'Connected (not initialized)';
+            return intl.formatMessage(l10nMessages.TR_CONNECTED_NOT_INITIALIZED);
         case 'seedless':
-            return 'Connected (seedless mode)';
+            // return 'Connected (seedless mode)';
+            return intl.formatMessage(l10nMessages.TR_CONNECTED_SEEDLESS);
         case 'firmware-required':
-            return 'Connected (update required)';
+            // return 'Connected (update required)';
+            return intl.formatMessage(l10nMessages.TR_CONNECTED_UPDATE_REQUIRED);
         case 'firmware-recommended':
-            return 'Connected (update recommended)';
+            // return 'Connected (update recommended)';
+            return intl.formatMessage(l10nMessages.TR_CONNECTED_UPDATE_RECOMMENDED);
         case 'used-in-other-window':
-            return 'Used in other window';
+            // return 'Used in other window';
+            return intl.formatMessage(l10nMessages.TR_USED_IN_ANOTHER_WINDOW);
         case 'unacquired':
-            return 'Used in other window';
+            // return 'Used in other window';
+            return intl.formatMessage(l10nMessages.TR_USED_IN_ANOTHER_WINDOW);
         case 'unavailable':
-            return 'Unavailable';
+            // return 'Unavailable';
+            return intl.formatMessage(l10nMessages.TR_UNAVAILABLE);
         case 'unreadable':
-            return 'Unreadable';
+            // return 'Unreadable';
+            return intl.formatMessage(l10nMessages.TR_UNREADABLE);
         default:
-            return 'Status unknown';
+            // return 'Status unknown';
+            return intl.formatMessage(l10nMessages.TR_STATUS_UNKNOWN);
     }
 };