1 files changed, 98 insertions, 0 deletions

diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js
new file mode 100644
index 000000000..20d8581d0
--- /dev/null
+++ b/src/components/settings/services/ServiceItem.js
@@ -0,0 +1,98 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+import ReactTooltip from 'react-tooltip';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+
+import ServiceModel from '../../../models/Service';
+
+const messages = defineMessages({
+  tooltipIsDisabled: {
+    id: 'settings.services.tooltip.isDisabled',
+    defaultMessage: '!!!Service is disabled',
+  },
+  tooltipNotificationsDisabled: {
+    id: 'settings.services.tooltip.notificationsDisabled',
+    defaultMessage: '!!!Notifications are disabled',
+  },
+});
+
+@observer
+export default class ServiceItem extends Component {
+  static propTypes = {
+    service: PropTypes.instanceOf(ServiceModel).isRequired,
+    goToServiceForm: PropTypes.func.isRequired,
+  };
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      service,
+      // toggleAction,
+      goToServiceForm,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <tr
+        className={classnames({
+          'service-table__row': true,
+          'service-table__row--disabled': !service.isEnabled,
+        })}
+      >
+        <td
+          className="service-table__column-icon"
+          onClick={goToServiceForm}
+        >
+          <img
+            src={service.icon}
+            className={classnames({
+              'service-table__icon': true,
+              'has-custom-icon': service.hasCustomIcon,
+            })}
+            alt=""
+          />
+        </td>
+        <td
+          className="service-table__column-name"
+          onClick={goToServiceForm}
+        >
+          {service.name !== '' ? service.name : service.recipe.name}
+        </td>
+        <td
+          className="service-table__column-info"
+          onClick={goToServiceForm}
+        >
+          {!service.isEnabled && (
+            <span
+              className="mdi mdi-power"
+              data-tip={intl.formatMessage(messages.tooltipIsDisabled)}
+            />
+          )}
+        </td>
+        <td
+          className="service-table__column-info"
+          onClick={goToServiceForm}
+        >
+          {!service.isNotificationEnabled && (
+            <span
+              className="mdi mdi-message-bulleted-off"
+              data-tip={intl.formatMessage(messages.tooltipNotificationsDisabled)}
+            />
+          )}
+          <ReactTooltip place="top" type="dark" effect="solid" />
+        </td>
+        {/* <td className="service-table__column-action">
+          <input
+            type="checkbox"
+            onChange={toggleAction}
+            checked={service.isEnabled}
+          />
+        </td> */}
+      </tr>
+    );
+  }
+}