Merge branch 'release/1.11'

.travis.yml

@@ -1,18 +1,19 @@
-language: generic
+language: bash
 
 sudo: required
 services:
 - docker
 cache:
   directories:
-    - $HOME/.m2
+    - "$HOME/.m2"
+    - "$HOME/.npm"
+    - "$HOME/.cache"
 
 script:
-  - docker build -t akvo/flow-builder .
   - "./ci/bootstrap-build.sh /app/src/ci/build.sh && ./ci/deploy.sh"
 
 before_cache:
- - find $HOME/.m2 -name resolver-status.properties -exec rm {} \;
- 
+ - find $HOME/.m2 \( -name resolver-status.properties -o -name maven-metadata-clojars.xml.sha1 \) -exec rm {} \;
+
 notifications:
-  slack: akvo:ZLetmotGiT22QryK6pR5bnFS
+  slack: akvo:ZLetmotGiT22QryK6pR5bnFS

Dashboard/app/js/lib/components/devices/AssignmentsEditView/MainBody.jsx

@@ -1,9 +1,13 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
 import { groupBy as _groupBy } from 'lodash';
+
 import FormSection from './screens/FormSection';
 import AddDevices from './screens/AddDevices';
 import EditDevices from './screens/EditDevices';
+import AssignDatapoints from './screens/AssignDatapoints';
+import EditDatapoints from './screens/EditDatapoints';
+
 import DevicesSection from './DevicesSection';
 import SidebarDropdown from './__partials/SidebarDropdown';
 
@@ -12,21 +16,25 @@ import AssignmentsContext from './assignment-context';
 export default class AssignmentMain extends React.Component {
   state = {
     currentTab: 'FORMS',
+    selectedDeviceId: null,
   };
 
-  changeTab = tab => {
-    this.setState({ currentTab: tab });
+  changeTab = (tab, selectedDeviceId = null) => {
+    this.setState({ currentTab: tab, selectedDeviceId }, () => {
+      if (tab === 'ASSIGN_DATAPOINTS') {
+        // load full details for each datapoint when viewing device datapoints
+        this.context.actions.getDeviceDatapoints(selectedDeviceId);
+      }
+    });
   };
 
   getDeviceGroups = () => {
     // filter out selected devices
     const { devices, selectedDeviceIds } = this.context.data;
 
-    const filteredDevices = devices.filter(device =>
-      selectedDeviceIds.includes(device.id)
-    );
+    const selectedDevices = devices.filter(device => selectedDeviceIds.includes(device.id));
 
-    return _groupBy(filteredDevices, device => device.deviceGroup.id);
+    return _groupBy(selectedDevices, device => device.deviceGroup.id);
   };
 
   renderSidebar = () => {
@@ -47,28 +55,18 @@ export default class AssignmentMain extends React.Component {
             <a
               className={deviceIsSelected ? 'disabled' : undefined}
               href="#"
-              onClick={
-                deviceIsSelected ? undefined : () => this.changeTab('DEVICES')
-              }
+              onClick={deviceIsSelected ? undefined : () => this.changeTab('DEVICES')}
             >
               {strings.devices}
             </a>
 
             {deviceIsSelected && (
-              <a
-                href="#"
-                className="sub-action"
-                onClick={() => this.changeTab('EDIT_DEVICE')}
-              >
+              <a href="#" className="sub-action" onClick={() => this.changeTab('EDIT_DEVICE')}>
                 {strings.edit}
               </a>
             )}
 
-            <a
-              href="#"
-              className="sub-action"
-              onClick={() => this.changeTab('ADD_DEVICE')}
-            >
+            <a href="#" className="sub-action" onClick={() => this.changeTab('ADD_DEVICE')}>
               {strings.add}
             </a>
           </li>
@@ -79,7 +77,7 @@ export default class AssignmentMain extends React.Component {
             }`}
           >
             {Object.keys(deviceGroups).map(dgId => (
-              <SidebarDropdown key={dgId} devices={deviceGroups[dgId]} />
+              <SidebarDropdown key={dgId} devices={deviceGroups[dgId]} changeTab={this.changeTab} />
             ))}
           </li>
         </ul>
@@ -88,22 +86,22 @@ export default class AssignmentMain extends React.Component {
   };
 
   render() {
+    const { currentTab, selectedDeviceId } = this.state;
+
     return (
       <div className="assignment-body">
         {this.renderSidebar()}
 
         <div className="assignment-main">
-          {this.state.currentTab === 'FORMS' && (
-            <FormSection changeTab={this.changeTab} />
-          )}
-          {this.state.currentTab === 'ADD_DEVICE' && (
-            <AddDevices changeTab={this.changeTab} />
-          )}
-          {this.state.currentTab === 'EDIT_DEVICE' && (
-            <EditDevices changeTab={this.changeTab} />
+          {currentTab === 'FORMS' && <FormSection changeTab={this.changeTab} />}
+          {currentTab === 'ADD_DEVICE' && <AddDevices changeTab={this.changeTab} />}
+          {currentTab === 'EDIT_DEVICE' && <EditDevices changeTab={this.changeTab} />}
+          {currentTab === 'DEVICES' && <DevicesSection changeTab={this.changeTab} />}
+          {currentTab === 'ASSIGN_DATAPOINTS' && (
+            <AssignDatapoints changeTab={this.changeTab} selectedDeviceId={selectedDeviceId} />
           )}
-          {this.state.currentTab === 'DEVICES' && (
-            <DevicesSection changeTab={this.changeTab} />
+          {currentTab === 'EDIT_DATAPOINTS' && (
+            <EditDatapoints changeTab={this.changeTab} selectedDeviceId={selectedDeviceId} />
           )}
         </div>
       </div>

Dashboard/app/js/lib/components/devices/AssignmentsEditView/__partials/SidebarDropdown.jsx

@@ -1,5 +1,7 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
 import PropTypes from 'prop-types';
+import AssignmentsContext from '../assignment-context';
 
 export default class SidebarDropdown extends React.Component {
   state = {
@@ -24,23 +26,27 @@ export default class SidebarDropdown extends React.Component {
   };
 
   render() {
+    const { data } = this.context;
     const { fontClass, panelStyle } = this.getStyleProps();
-    const { devices } = this.props;
+    const { devices, changeTab } = this.props;
 
     return (
       <div className="sidebar-dropdown">
-        <div
-          onKeyDown={this.toggleDropdown}
-          onClick={this.toggleDropdown}
-          className="dd-header"
-        >
+        <div onKeyDown={this.toggleDropdown} onClick={this.toggleDropdown} className="dd-header">
           <span>{devices[0].deviceGroup.name}</span>
           <i className={fontClass} />
         </div>
 
         <div style={panelStyle} className="sidebar-panel">
           {devices.map(device => (
-            <a key={device.id} href="#">
+            <a
+              key={device.id}
+              href="#"
+              onClick={
+                data.datapointsEnabled ? () => changeTab('ASSIGN_DATAPOINTS', device.id) : undefined
+              }
+              className={data.datapointsEnabled ? undefined : 'disabled'}
+            >
               {device.name}
             </a>
           ))}
@@ -50,6 +56,8 @@ export default class SidebarDropdown extends React.Component {
   }
 }
 
+SidebarDropdown.contextType = AssignmentsContext;
 SidebarDropdown.propTypes = {
   devices: PropTypes.array.isRequired,
+  changeTab: PropTypes.func.isRequired,
 };

Dashboard/app/js/lib/components/devices/AssignmentsEditView/index.jsx

@@ -39,11 +39,7 @@ export default class AssignmentsEdit extends React.Component {
     return (
       <div className="assignment-topbar">
         <div className="assignment-name">
-          <button
-            type="button"
-            className="go-back"
-            onClick={actions.cancelEditSurveyAssignment}
-          >
+          <button type="button" className="go-back" onClick={actions.cancelEditSurveyAssignment}>
             <i className="fa fa-arrow-left" />
           </button>
 
@@ -55,7 +51,6 @@ export default class AssignmentsEdit extends React.Component {
               value={this.state.data.assignmentName}
               onChange={this.onChangeState}
             />
-            {/* <span className="infoText">0 datapoints / 20k assigned</span> */}
           </h3>
         </div>
 

Dashboard/app/js/lib/components/devices/AssignmentsEditView/screens/AddDevices.jsx

@@ -9,69 +9,65 @@ import DeviceEmpty from '../__partials/DeviceEmpty';
 
 export default class AddDevice extends React.Component {
   state = {
-    selectedDevices: [],
+    selectedDevicesIds: [],
   };
 
   getDeviceGroups() {
     // filter out selected devices
     const { devices, selectedDeviceIds } = this.context.data;
 
-    const filteredDevices = devices.filter(
-      device => !selectedDeviceIds.includes(device.id)
-    );
+    const unSelectedDevices = devices.filter(device => !selectedDeviceIds.includes(device.id));
 
-    return _groupBy(filteredDevices, device => device.deviceGroup.id);
+    return _groupBy(unSelectedDevices, device => device.deviceGroup.id);
   }
 
   onSelectDevice = (id, checked) => {
-    const { selectedDevices } = this.state;
-    let newSelectedDevices = [];
+    const { selectedDevicesIds } = this.state;
+    let newSelectedDevicesIds = [];
 
     if (checked) {
-      newSelectedDevices = selectedDevices.concat(id);
+      newSelectedDevicesIds = selectedDevicesIds.concat(id);
     } else {
-      newSelectedDevices = selectedDevices.filter(device => device !== id);
+      newSelectedDevicesIds = selectedDevicesIds.filter(device => device !== id);
     }
 
-    this.setState({ selectedDevices: newSelectedDevices });
+    this.setState({ selectedDevicesIds: newSelectedDevicesIds });
   };
 
   onSelectMultipleDevices = (ids, checked) => {
-    const { selectedDevices } = this.state;
-    let newSelectedDevices = [...selectedDevices];
+    const { selectedDevicesIds } = this.state;
+    let newSelectedDevicesIds = [...selectedDevicesIds];
 
     if (checked) {
-      newSelectedDevices = selectedDevices.concat(ids);
+      newSelectedDevicesIds = selectedDevicesIds.concat(ids);
     } else {
-      newSelectedDevices = selectedDevices.filter(
-        device => !ids.includes(device)
-      );
+      newSelectedDevicesIds = selectedDevicesIds.filter(device => !ids.includes(device));
     }
 
-    this.setState({ selectedDevices: [...new Set(newSelectedDevices)] });
+    this.setState({ selectedDevicesIds: [...new Set(newSelectedDevicesIds)] });
   };
 
   addToAssignment = () => {
-    const { selectedDevices } = this.state;
+    const { selectedDevicesIds } = this.state;
     const { addDevicesToAssignment } = this.context.actions;
 
-    addDevicesToAssignment(selectedDevices);
+    addDevicesToAssignment(selectedDevicesIds);
 
     // empty selected devices
-    this.setState({ selectedDevices: [] });
+    this.setState({ selectedDevicesIds: [] });
   };
 
   render() {
     const { strings } = this.context;
     const deviceGroups = this.getDeviceGroups();
-    const { selectedDevices } = this.state;
+    const { selectedDevicesIds } = this.state;
 
     return (
       <div className="devices-action-page">
         <div className="header">
           <p>{strings.addDevicesToAssignment}</p>
           <i
-            className="fa fa-times"
+            className="fa fa-times icon"
             onClick={() => this.props.changeTab('DEVICES')}
             onKeyDown={() => this.props.changeTab('DEVICES')}
           />
@@ -87,7 +83,7 @@ export default class AddDevice extends React.Component {
               deviceGroups={deviceGroups}
               handleSelectDevice={this.onSelectDevice}
               handleSelectAllDevices={this.onSelectMultipleDevices}
-              selectedDevices={selectedDevices}
+              selectedDevices={selectedDevicesIds}
             />
           </div>
         </div>
@@ -96,16 +92,14 @@ export default class AddDevice extends React.Component {
           <div className="footer-inner">
             <div>
               <p>
-                {selectedDevices.length} {strings.selected}
+                {selectedDevicesIds.length} {strings.selected}
               </p>
             </div>
 
             <button
               type="button"
               onClick={this.addToAssignment}
-              className={`btnOutline ${
-                selectedDevices.length === 0 ? 'disabled' : ''
-              }`}
+              className={`btnOutline ${selectedDevicesIds.length === 0 ? 'disabled' : ''}`}
             >
               {strings.addToAssignment}
             </button>