Stage-main Release candidate 10.1

src/components/CampaignTextingHoursForm.jsx

@@ -10,8 +10,9 @@ import * as yup from "yup";
 import cloneDeep from "lodash/cloneDeep";
 import isEqual from "lodash/isEqual";
 import moment from "moment";
-import Autocomplete from "material-ui/AutoComplete";
-import { dataSourceItem } from "./utils";
+import momentTz from "moment-timezone";
+import SelectField from "material-ui/SelectField";
+import MenuItem from "material-ui/MenuItem";
 
 export default class CampaignTextingHoursForm extends React.Component {
   state = {
@@ -51,7 +52,7 @@ export default class CampaignTextingHoursForm extends React.Component {
     );
   }
 
-  addAutocompleteFormField(
+  addFormField(
     name,
     stateName,
     initialValue,
@@ -61,44 +62,15 @@ export default class CampaignTextingHoursForm extends React.Component {
   ) {
     return (
       <Form.Field
-        as={GSTextField}
+        as={SelectField}
         name={name}
-        type={Autocomplete}
-        fullWidth
-        dataSource={choices}
-        filter={Autocomplete.caseInsensitiveFilter}
-        maxSearchResults={4}
-        searchText={
-          this.state[stateName] !== undefined
-            ? this.state[stateName]
-            : initialValue
-        }
-        hintText={hint}
         floatingLabelText={label}
-        onUpdateInput={text => {
-          const state = {};
-          state[stateName] = text;
-          this.setState(state);
+        onChange={(_, i, val) => {
+          this.props.onChange({ [name]: val });
         }}
-        onNewRequest={(selection, index) => {
-          let selectedChoice = undefined;
-          if (index === -1) {
-            selectedChoice = choices.find(item => item.text === selection);
-          } else {
-            selectedChoice = selection;
-          }
-          if (!selectedChoice) {
-            return;
-          }
-          const state = {};
-          state[stateName] = selectedChoice.text;
-          this.setState(state);
-          this.fireOnChangeIfTheFormValuesChanged(
-            name,
-            selectedChoice.rawValue
-          );
-        }}
-      />
+      >
+        {choices}
+      </Form.Field>
     );
   }
 
@@ -132,10 +104,10 @@ export default class CampaignTextingHoursForm extends React.Component {
     ];
     const hourChoices = hours.map(hour => {
       const formattedHour = formatTextingHours(hour);
-      return dataSourceItem(formattedHour, hour);
+      return <MenuItem key={hour} value={hour} primaryText={formattedHour} />;
     });
 
-    const timezones = [
+    let timezones = [
       "US/Alaska",
       "US/Aleutian",
       "US/Arizona",
@@ -151,15 +123,20 @@ export default class CampaignTextingHoursForm extends React.Component {
       "America/Puerto_Rico",
       "America/Virgin"
     ];
-    const timezoneChoices = timezones.map(timezone =>
-      dataSourceItem(timezone, timezone)
-    );
-
+    if (window.TZ && timezones.indexOf(window.TZ) === -1) {
+      const allTZs = momentTz.tz.names();
+      const tzIndex = allTZs.indexOf(window.TZ);
+      if (tzIndex !== -1) {
+        timezones = allTZs.slice(Math.max(0, tzIndex - 5), tzIndex + 5);
+      }
+    }
+    const timezoneChoices = timezones.map(timezone => (
+      <MenuItem key={timezone} value={timezone} primaryText={timezone} />
+    ));
     return (
       <GSForm
         schema={this.formSchema}
         value={this.props.formValues}
-        onChange={this.props.onChange}
         onSubmit={this.props.onSubmit}
       >
         <CampaignFormSectionHeading
@@ -180,40 +157,40 @@ export default class CampaignTextingHoursForm extends React.Component {
           <div>
             {this.props.formValues.textingHoursEnforced ? (
               <div>
-                {this.addAutocompleteFormField(
+                {this.addFormField(
                   "textingHoursStart",
                   "textingHoursStartSearchText",
                   formatTextingHours(this.props.formValues.textingHoursStart),
                   "Start time",
-                  "Start typing a start time",
-                  hourChoices,
-                  hours
+                  "",
+                  hourChoices
                 )}
 
-                {this.addAutocompleteFormField(
+                {this.addFormField(
                   "textingHoursEnd",
                   "textingHoursEndSearchText",
                   formatTextingHours(this.props.formValues.textingHoursEnd),
                   "End time",
-                  "Start typing an end time",
-                  hourChoices,
-                  hours
+                  "",
+                  hourChoices
                 )}
               </div>
             ) : (
               ""
             )}
           </div>
         ) : null}
-
-        {this.addAutocompleteFormField(
+        <div>
+          Timezone to use for contacts without ZIP code and to determine
+          daylight savings
+        </div>
+        {this.addFormField(
           "timezone",
           "timezoneSearchText",
           this.props.formValues.timezone,
-          "Timezone to use for contacts without ZIP code and to determine daylight savings",
-          "Start typing a timezone",
-          timezoneChoices,
-          timezones
+          "Default Contact Timezone",
+          "",
+          timezoneChoices
         )}
 
         <Form.Submit

src/components/PeopleList/UserEditDialog.jsx

@@ -26,7 +26,7 @@ const UserEditDialog = props => (
 UserEditDialog.propTypes = {
   open: PropTypes.bool,
   organizationId: PropTypes.string,
-  userId: PropTypes.number,
+  userId: PropTypes.string,
   updateUser: PropTypes.func,
   requestClose: PropTypes.func
 };

src/components/utils.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { MenuItem } from "material-ui/Menu";
+import MenuItem from "material-ui/MenuItem";
 import pick from "lodash/pick";
 
 export function dataSourceItem(name, key) {

src/containers/PeopleList.jsx

@@ -34,7 +34,7 @@ export class PeopleList extends Component {
 
     this.state = {
       open: false,
-      userEdit: undefined,
+      userEdit: null,
       pageSize: INITIAL_PAGE_SIZE,
       cursor: {
         offset: 0,
@@ -122,7 +122,7 @@ export class PeopleList extends Component {
 
   updateUser = () => {
     this.setState({
-      userEdit: false
+      userEdit: null
     });
     this.props.users.refetch({
       cursor: this.state.cursor
@@ -195,7 +195,7 @@ export class PeopleList extends Component {
   };
 
   requestUserEditClose = () => {
-    this.setState({ userEdit: false });
+    this.setState({ userEdit: null });
   };
 
   handlePasswordResetClose = () => {

src/containers/Settings.jsx

@@ -94,17 +94,21 @@ class Settings extends React.Component {
           onSubmit={this.handleSubmitTextingHoursForm}
           defaultValue={{ textingHoursStart, textingHoursEnd }}
         >
+          <div>
+            Enter the hour in 24-hour time, so e.g. 9am-9pm would be Start Time:
+            9 and End Time: 21.
+          </div>
           <Form.Field
             as={GSTextField}
-            label="Start time"
+            label="Start time (24h)"
             name="textingHoursStart"
             type="select"
             fullWidth
             choices={hourChoices}
           />
           <Form.Field
             as={GSTextField}
-            label="End time"
+            label="End time (24h)"
             name="textingHoursEnd"
             type="select"
             fullWidth
@@ -323,7 +327,7 @@ class Settings extends React.Component {
                   {formatTextingHours(organization.textingHoursEnd)}
                 </span>
                 {window.TZ
-                  ? ` in your organisations local time. Timezone ${window.TZ}`
+                  ? ` in your organisation's local time. Timezone ${window.TZ}`
                   : " in contacts local time (or 12pm-6pm EST if timezone is unknown)"}
               </div>
             ) : (

src/containers/hoc/load-data.jsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { graphql, compose, withApollo } from "react-apollo";
+import { graphql, compose } from "react-apollo";
 import { withProps, branch, renderComponent } from "recompose";
-
+import ApolloClientSingleton from "../../network/apollo-client-singleton";
 import { Card, CardHeader, CardText } from "material-ui/Card";
 
 // https://www.apollographql.com/docs/react/v2.5/recipes/recompose/
@@ -41,7 +41,9 @@ export const withQueries = (queries = {}) => {
 
 const withMutations = (mutations = {}) =>
   compose(
-    withApollo,
+    withProps(parentProps => {
+      return { client: ApolloClientSingleton };
+    }),
     withProps(parentProps => {
       const reducer = (propsAcc, [name, constructor]) => {
         propsAcc[name] = async (...args) => {