Adds intl support for addNewService (sans translations)

2 files changed, 75 insertions, 38 deletions

diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index c0a68d1a5..e5ae36419 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -1,44 +1,78 @@
-import React from 'react';
-import { observer } from 'mobx-react';
+import React, { Component } from 'react';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import PropTypes from 'prop-types';
 import { SortableContainer } from 'react-sortable-hoc';
+import { defineMessages, intlShape } from 'react-intl';
 
 import TabItem from './TabItem';
 import { ctrlKey } from '../../../environment';
 
-export default SortableContainer(observer(({
-  services,
-  setActive,
-  reload,
-  toggleNotifications,
-  deleteService,
-  disableService,
-  openSettings,
-}) => (
-  <ul
-    className="tabs"
-  >
-    {services.map((service, index) => (
-      <TabItem
-        key={service.id}
-        clickHandler={() => setActive({ serviceId: service.id })}
-        service={service}
-        index={index}
-        shortcutIndex={index + 1}
-        reload={() => reload({ serviceId: service.id })}
-        toggleNotifications={() => toggleNotifications({ serviceId: service.id })}
-        deleteService={() => deleteService({ serviceId: service.id })}
-        disableService={() => disableService({ serviceId: service.id })}
-        openSettings={openSettings}
-      />
-    ))}
-    <li>
-      <button
-        className="sidebar__add-service"
-        onClick={() => openSettings({ path: 'recipes' })}
-        data-tip={`Add new service (${ctrlKey}+N)`}
+const messages = defineMessages({
+  addNewService: {
+    id: 'sidebar.addNewService',
+    defaultMessage: '!!!Add new service',
+  },
+});
+
+@observer
+class TabBarSortableList extends Component {
+  static propTypes = {
+    services: MobxPropTypes.arrayOrObservableArray.isRequired,
+    setActive: PropTypes.func.isRequired,
+    openSettings: PropTypes.func.isRequired,
+    reload: PropTypes.func.isRequired,
+    toggleNotifications: PropTypes.func.isRequired,
+    deleteService: PropTypes.func.isRequired,
+    disableService: PropTypes.func.isRequired,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      services,
+      setActive,
+      reload,
+      toggleNotifications,
+      deleteService,
+      disableService,
+      openSettings,
+    } = this.props;
+
+    const { intl } = this.context;
+
+    return (
+      <ul
+        className="tabs"
       >
-        <span className="mdi mdi-plus" />
-      </button>
-    </li>
-  </ul>
-)));
+        {services.map((service, index) => (
+          <TabItem
+            key={service.id}
+            clickHandler={() => setActive({ serviceId: service.id })}
+            service={service}
+            index={index}
+            shortcutIndex={index + 1}
+            reload={() => reload({ serviceId: service.id })}
+            toggleNotifications={() => toggleNotifications({ serviceId: service.id })}
+            deleteService={() => deleteService({ serviceId: service.id })}
+            disableService={() => disableService({ serviceId: service.id })}
+            openSettings={openSettings}
+          />
+        ))}
+        <li>
+          <button
+            className="sidebar__add-service"
+            onClick={() => openSettings({ path: 'recipes' })}
+            data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
+          >
+            <span className="mdi mdi-plus" />
+          </button>
+        </li>
+      </ul>
+    );
+  }
+}
+
+export default SortableContainer(TabBarSortableList);
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index fdb2c0a59..c1ee924da 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -54,6 +54,8 @@ export default class TabBar extends Component {
       deleteService,
     } = this.props;
 
+    const { intl } = this.context;
+
     return (
       <div>
         <TabBarSortableList
@@ -70,6 +72,7 @@ export default class TabBar extends Component {
           axis="y"
           lockAxis="y"
           helperClass="is-reordering"
+          intl={intl}
         />
       </div>
     );