* Rename AddButton to ActionButton

* Allow icon and color props for ActionButton
* Add ChannelPause button
* Add actions to pause a channel

assets/js/actions/channel.js

@@ -129,3 +129,15 @@ export const changeOutputPattern =
 export const deletePattern = (index: number) => (dispatch: Function, getState: () => Store) => {
   dispatch(removePattern(index))
 }
+
+export const pause = (channel: Channel) => (dispatch) => {
+  return api
+    .pauseChannel(channel)
+    .then((response) => dispatch(fetchChannel(channel.id)))
+}
+
+export const unpause = (channel: Channel) => (dispatch) => {
+  return api
+    .unpauseChannel(channel)
+    .then((response) => dispatch(fetchChannel(channel.id)))
+}

assets/js/api.js

@@ -368,6 +368,14 @@ export const createChannel = (provider, baseUrl, channel) => {
   return apiPostJSON(`channels`, channelSchema, { provider, baseUrl, channel })
 }
 
+export const pauseChannel = (channel) => {
+  return apiPostJSON(`channels/${channel.id}/pause`, channelSchema)
+}
+
+export const unpauseChannel = (channel) => {
+  return apiPostJSON(`channels/${channel.id}/unpause`, channelSchema)
+}
+
 export const updateQuestionnaire = (projectId, questionnaire) => {
   return apiPutJSON(
     `projects/${projectId}/questionnaires/${questionnaire.id}`,

assets/js/components/channels/ChannelCapacity.jsx

@@ -6,6 +6,7 @@ import * as actions from "../../actions/channel"
 import * as routes from "../../routes"
 import { translate } from "react-i18next"
 import { config } from "../../config"
+import ChannelPause from "./ChannelPause"
 
 class ChannelCapacityForm extends Component {
   static propTypes = {
@@ -109,12 +110,15 @@ class ChannelCapacity extends Component {
     }
 
     return (
-      <ChannelCapacityForm
-        initialValue={channel.settings.capacity || parseInt(config.default_channel_capacity)}
-        onConfirm={(capacity) => this.onConfirmClick(capacity)}
-        onCancel={() => this.onCancelClick()}
-        t={t}
-      />
+      <div className="white">
+        <ChannelPause />
+        <ChannelCapacityForm
+          initialValue={channel.settings.capacity || parseInt(config.default_channel_capacity)}
+          onConfirm={(capacity) => this.onConfirmClick(capacity)}
+          onCancel={() => this.onCancelClick()}
+          t={t}
+        />
+      </div>
     )
   }
 }

assets/js/components/channels/ChannelIndex.jsx

@@ -9,7 +9,7 @@ import * as actions from "../../actions/channels"
 import range from "lodash/range"
 import * as authActions from "../../actions/authorizations"
 import {
-  AddButton,
+  ActionButton,
   EmptyPage,
   CardTable,
   UntitledIfEmpty,
@@ -18,6 +18,7 @@ import {
   ConfirmationModal,
   PagingFooter,
   channelFriendlyName,
+  Tooltip,
 } from "../ui"
 import { Preloader } from "react-materialize"
 import { config } from "../../config"
@@ -230,6 +231,21 @@ class ChannelIndex extends Component<any> {
       )
     }
 
+    const pauseIconForChannel = (channel) => {
+      const { statusInfo } = channel
+      console.log({statusInfo, label: "1--------"})
+      const { t } = this.props
+      return (
+        <td className="action">
+          <Tooltip text={t("Pause channel")}>
+            <a onClick={(e) => this.pause(e, channel)}>
+              <i className="material-icons">pause</i>
+            </a>
+          </Tooltip>
+        </td>
+      )
+    }
+
     let providerUIs = []
     config.verboice.forEach((_, index) => {
       providerUIs.push(verboiceProviderUI(index, multipleVerboice))
@@ -240,7 +256,7 @@ class ChannelIndex extends Component<any> {
 
     return (
       <div>
-        <AddButton text={t("Add channel")} onClick={(e) => this.addChannel(e)} />
+        <ActionButton text={t("Add channel")} onClick={(e) => this.addChannel(e)} icon="add" color="green" />
         {providerModals}
 
         <Modal card id="add-channel">
@@ -297,7 +313,7 @@ class ChannelIndex extends Component<any> {
                 if (!channel)
                   return (
                     <tr key={-index} className="empty-row">
-                      <td colSpan="3" />
+                      <td colSpan="4" />
                     </tr>
                   )
 
@@ -311,7 +327,7 @@ class ChannelIndex extends Component<any> {
                     </td>
                     <td>{`${channel.provider}${channelFriendlyName(channel)}`}</td>
                     <td className="tdError">
-                      {status == "down" || status == "error" ? (
+                      {status == "down" || status == "error" || status == "paused" ? (
                         <span className="questionnaire-error" />
                       ) : null}
                     </td>

assets/js/components/channels/ChannelPatterns.jsx

@@ -4,6 +4,7 @@ import { translate } from "react-i18next"
 import { bindActionCreators } from "redux"
 import * as routes from "../../routes"
 import * as actions from "../../actions/channel"
+import ChannelPause from "./ChannelPause"
 
 class Pattern extends Component {
   static propTypes = {
@@ -212,6 +213,7 @@ class ChannelPatterns extends Component {
 
     return (
       <div className="white">
+        <ChannelPause />
         <div className="row">
           <div className="col s12 m8 push-m2">
             <h4>{t("Apply patterns for numbers cleanup")}</h4>

assets/js/components/channels/ChannelPause.jsx

@@ -0,0 +1,42 @@
+import React, { PropTypes } from "react"
+import { bindActionCreators } from "redux"
+import { connect } from "react-redux"
+import { translate } from "react-i18next"
+import { ActionButton } from "../ui"
+import * as actions from "../../actions/channel"
+
+const ChannelPause = ({ channel, t, actions }) => {
+  if (!channel) return null
+  const { statusInfo } = channel
+  const paused = statusInfo != null && statusInfo.status == "paused"
+  const text = paused ? t("Unpause channel") : t("Pause channel")
+  const icon = paused ? "play_arrow" : "pause"
+  const color = paused ? "green" : "red"
+
+  const pauseChannel = (channel, pause) => {
+    console.log(`About to ${pause ? "pause" : "unpause"} channel ${channel.id}`)
+    if (pause) {
+      actions.pause(channel)
+    } else {
+      actions.unpause(channel)
+    }
+  }
+
+  return ActionButton({ text, onClick: (e) => pauseChannel(channel, !paused), icon, color })
+}
+
+ChannelPause.propTypes = {
+  t: PropTypes.func,
+  channel: PropTypes.object,
+  actions: PropTypes.object.isRequired,
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  channel: state.channel.data,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(actions, dispatch),
+})
+
+export default translate()(connect(mapStateToProps, mapDispatchToProps)(ChannelPause))

assets/js/components/channels/ChannelShare.jsx

@@ -6,6 +6,7 @@ import * as actions from "../../actions/channel"
 import * as projectsActions from "../../actions/projects"
 import * as routes from "../../routes"
 import { translate } from "react-i18next"
+import ChannelPause from "./ChannelPause"
 
 class ChannelShare extends Component {
   static propTypes = {
@@ -55,6 +56,7 @@ class ChannelShare extends Component {
 
     return (
       <div className="white">
+        <ChannelPause />
         <div className="row">
           <div className="col s12 m6 push-m3">
             <h4>{t("Share this channel on different projects")}</h4>

assets/js/components/collaborators/CollaboratorIndex.jsx

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from "react"
 import { bindActionCreators } from "redux"
 import { connect } from "react-redux"
-import { CardTable, AddButton, Tooltip, roleDisplayName } from "../ui"
+import { CardTable, ActionButton, Tooltip, roleDisplayName } from "../ui"
 import { Input } from "react-materialize"
 import InviteModal from "../collaborators/InviteModal"
 import * as actions from "../../actions/collaborators"
@@ -106,7 +106,7 @@ class CollaboratorIndex extends Component {
     let addButton = null
     if (!readOnly) {
       addButton = (
-        <AddButton text={t("Invite collaborators")} onClick={(e) => this.inviteCollaborator(e)} />
+        <ActionButton text={t("Invite collaborators")} onClick={(e) => this.inviteCollaborator(e)} icon="add" color="green" />
       )
     }
 

assets/js/components/integrations/IntegrationIndex.jsx

@@ -6,7 +6,7 @@ import * as actions from "../../actions/integrations"
 import * as surveyActions from "../../actions/survey"
 import * as projectActions from "../../actions/project"
 import values from "lodash/values"
-import { AddButton, CardTable, InputWithLabel, Modal } from "../ui"
+import { ActionButton, CardTable, InputWithLabel, Modal } from "../ui"
 import IntegrationRow from "./IntegrationRow"
 
 type Props = {
@@ -168,12 +168,14 @@ class IntegrationIndex extends Component<Props, State> {
 
     return (
       <div className="white">
-        <AddButton
+        <ActionButton
           text="Add integration"
           onClick={(e) => {
             e.preventDefault()
             $("#newIntegration").modal("open")
           }}
+          icon="add"
+          color="green"
         />
         {this.modalNewIntegration()}
         <CardTable title="Integrations" tableScroll>

assets/js/components/projects/ProjectIndex.jsx

@@ -6,7 +6,7 @@ import { createProject } from "../../api"
 import * as actions from "../../actions/projects"
 import * as projectActions from "../../actions/project"
 import {
-  AddButton,
+  ActionButton,
   EmptyPage,
   CardTable,
   SortableHeader,
@@ -110,7 +110,7 @@ class ProjectIndex extends Component {
     const { archived, t } = this.props
     return (
       <div>
-        <AddButton text={t("Add project")} onClick={(e) => this.newProject(e)} />
+        <ActionButton text={t("Add project")} onClick={(e) => this.newProject(e)} icon="add" color="green" />
         <div className="row">
           <ArchiveFilter
             archived={archived}

assets/js/components/questionnaires/QuestionnaireIndex.jsx

@@ -11,7 +11,7 @@ import * as questionnaireActions from "../../actions/questionnaire"
 import * as userSettingsActions from "../../actions/userSettings"
 import * as projectActions from "../../actions/project"
 import {
-  AddButton,
+  ActionButton,
   EmptyPage,
   SortableHeader,
   CardTable,
@@ -280,7 +280,7 @@ class QuestionnaireIndex extends Component<any> {
     const { archived, t, readOnly } = this.props
 
     const addButton = (
-      <AddButton text={t("Add questionnaire")} onClick={(e) => this.newQuestionnaire(e)} />
+      <ActionButton text={t("Add questionnaire")} onClick={(e) => this.newQuestionnaire(e)} icon="add" color="green" />
     )
 
     return (

assets/js/components/ui/AddButton.jsx → assets/js/components/ui/ActionButton.jsx

@@ -2,27 +2,27 @@ import React, { PropTypes } from "react"
 import { Link } from "react-router"
 import { Tooltip } from "."
 
-export const AddButton = ({ text, linkPath, onClick, children }) => {
-  const icon = <i className="material-icons">add</i>
+export const ActionButton = ({ text, linkPath, onClick, children, icon = "add", color = "green" }) => {
+  const materialIcon = <i className="material-icons">{icon}</i>
 
   let link
   if (linkPath) {
     link = (
       <Link
-        className="btn-floating btn-large waves-effect waves-light green right mbottom"
+        className={`btn-floating btn-large waves-effect waves-light ${color} right mbottom`}
         to={linkPath}
       >
-        {icon}
+        {materialIcon}
       </Link>
     )
   } else if (onClick) {
     link = (
       <a
-        className="btn-floating btn-large waves-effect waves-light green right mtop"
+        className={`btn-floating btn-large waves-effect waves-light ${color} right mtop`}
         href="#"
         onClick={onClick}
       >
-        {icon}
+        {materialIcon}
       </a>
     )
   } else {
@@ -32,9 +32,11 @@ export const AddButton = ({ text, linkPath, onClick, children }) => {
   return <Tooltip text={text}>{link}</Tooltip>
 }
 
-AddButton.propTypes = {
+ActionButton.propTypes = {
   text: PropTypes.string.isRequired,
   linkPath: PropTypes.string,
   onClick: PropTypes.func,
   children: PropTypes.node,
+  icon: PropTypes.string,
+  color: PropTypes.string,
 }

assets/js/components/ui/index.js

@@ -1,4 +1,4 @@
-export * from "./AddButton"
+export * from "./ActionButton"
 export * from "./Archive"
 export * from "./AudioDropzone"
 export * from "./Autocomplete"

locales/template/translation.json

@@ -319,6 +319,7 @@
   "Partials": "",
   "Pattern must not be blank": "",
   "Patterns": "",
+  "Pause channel": "",
   "Percent": "",
   "Percent of completes": "",
   "Phone call": "",
@@ -502,6 +503,7 @@
   "Unknown role: {{role}}": "",
   "Unknown_survey": "",
   "Unlocked <i>{{surveyName}}</i> survey": "",
+  "Unpause channel": "",
   "Unresponsive": "",
   "Untitled Panel Survey": "",
   "Untitled Survey": "",