Allow newlines between multiple email addresses in new enroll dialog

Users want to be able to paste lists. We also want to let them type
spaces, which the previous impl. prevented.

fixes: CNVS-34878

test plan
  - go to a course's people page (/courses/#/users)
  - click on +People
  - try entering text that includes spacee
  > expected result, you can

  - copy and paste
    auser@example.com
    buser@example.com
    cuser@example
    duser@example.com
  > expected result:
    - you are told that "duser@example,com" looks like an invalid
      address
    - you can click "Next" and all 4 adddresses are in the list of users
      canvas did not find

Change-Id: Ia4eb40b1b1171f7734286c7e84b01ccb47a9e745
Reviewed-on: https://gerrit.instructure.com/102073
Tested-by: Jenkins
Reviewed-by: Felix Milea-Ciobanu <fmileaciobanu@instructure.com>
QA-Review: Deepeeca Soundarrajan <dsoundarrajan@instructure.com>
Product-Review: McCall Smith <mcsmith@instructure.com>

Author: eschiebel

app/jsx/add_people/actions.jsx

@@ -39,7 +39,8 @@ define([
     dispatch(actions.validateUsersStart());
     const state = getState();
     const courseId = state.courseParams.courseId;
-    const users = state.inputParams.nameList;
+    // split on a newline or comma, stripping surrounding whitespace in the process
+    const users = state.inputParams.nameList.trim().split(/\s*[\n,]\s*/);
     const searchType = state.inputParams.searchType;
     api.validateUsers({ courseId, users, searchType })
       .then((res) => {

app/jsx/add_people/components/people_search.jsx

@@ -11,23 +11,24 @@ define([
 
     static defaultProps = {
       searchType: 'cc_path',
-      nameList: []
+      nameList: ''
     };
 
     constructor (props) {
       super(props);
 
       this.namelistta = null;
+      this.emailValidator = /.+@.+\..+/;
     }
-    shouldComponentUpdate (nextProps /* , nextState */) {
+
+    shouldComponentUpdate (nextProps, /* nextState */) {
       return nextProps.searchType !== this.props.searchType
-          || nextProps.nameList.join(',') !== this.props.nameList.join(',')
+          || nextProps.nameList !== this.props.nameList
           || nextProps.role !== this.props.role
           || nextProps.section !== this.props.section
           || nextProps.limitPrivilege !== this.props.limitPrivilege;
     }
 
-
     // event handlers ------------------------------------
     // inst-ui form elements are currently inconsistent in what args they send
     // to their onChange handler. Some send the event, others just the new value.
@@ -37,12 +38,9 @@ define([
       this.props.onChange({searchType: newValue});
     }
     onChangeNameList = (newValue) => {
-      let nameList = newValue.trim();
-      // split the user enteredd name list on commas,
-      // then trim each result
-      nameList = nameList.length ? nameList.split(/\s*,\s*/).map(n => n.trim()) : [];
-      this.props.onChange({nameList});
+      this.props.onChange({nameList: newValue});
     }
+
     onChangeSection = (event) => {
       this.props.onChange({section: event.target.value});
     }
@@ -53,10 +51,26 @@ define([
       this.props.onChange({limitPrivilege: event.target.checked});
     }
 
+    // validate the user's input of names in the textbox
+    // @returns: a message for <TextArea> or null
+    getHint () {
+      let message = ' '; // that's a copy/pasted en-space to trick TextArea into
+                         // reserving space for the message so the UI doesn't jump
+      if (this.props.nameList.length > 0 && this.props.searchType === 'cc_path') {   // search by email
+        const badEmail = this.props.nameList.split(/[\n,]/).find(n => !this.emailValidator.test(n))
+        if (badEmail) {
+          message = I18n.t('It looks like you have an invalid email address: "%{addr}"', {addr: badEmail});
+        }
+      }
+      return [{text: message, type: 'hint'}];
+    }
+
     // rendering ------------------------------------
     render () {
       let exampleText = '';
       let labelText = '';
+      const message = this.getHint()
+
       switch (this.props.searchType) {
         case 'sis_user_id':
           exampleText = 'student_2708, student_3693';
@@ -109,7 +123,8 @@ define([
             <TextArea
               label={<ScreenReaderContent>{labelText}</ScreenReaderContent>}
               autoGrow={false} resize="vertical" height="9em"
-              value={this.props.nameList.join(',')} textareaRef={(ta) => { this.namelistta = ta; }}
+              value={this.props.nameList} textareaRef={(ta) => { this.namelistta = ta; }}
+              messages={message}
               onChange={this.onChangeNameList}
             />
           </fieldset>
@@ -156,7 +171,7 @@ define([
             <i className="icon-user" />
             <Typography size="medium">
               {I18n.t('Add user by Email Address, Login ID, or SIS ID.')}<br />
-              {I18n.t('Use "," between for adding multiple users.')}
+              {I18n.t('Use a "," or new line between for adding multiple users.')}
             </Typography>
           </div>
         </div>

app/jsx/add_people/components/shapes.jsx

@@ -15,7 +15,7 @@ define([
 
   const inputParamsShape = {
     searchType: PropTypes.oneOf(['cc_path', 'unique_id', 'sis_user_id']),
-    nameList: PropTypes.arrayOf(PropTypes.string),
+    nameList: PropTypes.string,
     role: PropTypes.string,
     section: PropTypes.string
   };

app/jsx/add_people/store.jsx

@@ -16,7 +16,7 @@ define([
     },
     inputParams: {
       searchType: 'cc_path',    // cc_path=email, unique_id=login_id, sis_user_id=sis_user_id
-      nameList: [],             // user entered list of names to add to this course
+      nameList: '',             // user entered list of names to add to this course
       role: '',                 // the role to assign each of the added users
       section: '',              // the section to assign each of the added users
       limitPrivilege: false,    // user can interact with users in their section only

app/stylesheets/bundles/roster.scss

@@ -62,6 +62,7 @@
     fieldset.peoplesearch__selections {
       margin-right: auto;
       margin-left: auto;
+      margin-top: .5rem;
       text-align: center;
       .peoplesearch__selection {
         text-align: left;

spec/javascripts/jsx/add_people/components/peopleSearchSpec.jsx

@@ -13,7 +13,7 @@ define([
     role: '2',
     limitPrivilege: true,
     searchType: 'unique_id',
-    nameList: ['foo', 'bar', 'baz'],
+    nameList: 'foo, bar, baz',
     canReadSIS: true
   };
 
@@ -28,7 +28,7 @@ define([
     const loginRadio = peopleSearch.querySelector('input[type="radio"][value="unique_id"]');
     equal(loginRadio.checked, true, 'login id radio button is checked');
     const nameInput = peopleSearch.querySelector('textarea');
-    equal(nameInput.value, 'foo,bar,baz', 'names are in the textarea');
+    equal(nameInput.value, searchProps.nameList, 'names are in the textarea');
     const selects = peopleSearch.querySelectorAll('.peoplesearch__selections select');
     equal(selects[0].value, '2', 'role 2 is selected');
     equal(selects[1].value, '1', 'section 1 is selected');
@@ -38,11 +38,19 @@ define([
     equal(limitPrivilegeCheckbox.checked, true, 'limit privileges checkbox is checked');
   });
   test('removes search by SIS ID', () => {
-    const newProps = Object.assign({}, searchProps);
-    newProps.canReadSIS = false;
+    const newProps = Object.assign({}, searchProps, {canReadSIS: false});
     const component = TestUtils.renderIntoDocument(<PeopleSearch {...newProps} />);
     const peopleSearch = TestUtils.findRenderedDOMComponentWithClass(component, 'addpeople__peoplesearch');
     const sisRadio = peopleSearch.querySelector('input[type="radio"][value="sis_user_id"]');
     equal(sisRadio, null, 'sis id radio button is not displayed');
   });
+  test('shows hint with bad email address', () => {
+    const badEmail = 'foobar@';
+    const newProps = Object.assign({}, searchProps, {searchType: 'cc_path', nameList: badEmail});
+    const component = TestUtils.renderIntoDocument(<PeopleSearch {...newProps} />);
+    const peopleSearch = TestUtils.findRenderedDOMComponentWithClass(component, 'addpeople__peoplesearch');
+    const nameInput = peopleSearch.querySelector('textarea');
+    equal(nameInput.value, badEmail, 'email is in the textarea');
+    ok(peopleSearch.innerHTML.includes('It looks like you have an invalid email address: "foobar@"'));
+  });
 });

spec/javascripts/jsx/add_people/initialState.jsx

@@ -8,7 +8,7 @@ define([], () => {
     },
     inputParams: {
       searchType: 'unique_id',
-      nameList: ['foo', 'bar', 'baz'],
+      nameList: 'foo, bar, baz',
       role: '1',
       section: '1',
       limitPrivilege: false,

spec/javascripts/jsx/add_people/reducerSpec.jsx

@@ -178,7 +178,7 @@ define([
     },
     inputParams: {
       searchType: 'cc_path',
-      nameList: [],
+      nameList: '',
       role: '',
       section: '',
       limitPrivilege: false,
@@ -231,7 +231,7 @@ define([
   test('set input paramaters', () => {
     const newSearchParams = {
       fieldType: 'unique_id',
-      nameList: ['foo', 'bar', 'baz'],
+      nameList: 'foo, bar, baz',
       role: '2',
       secion: '2',
       limitPrivilege: true