Merge pull request #4621 from withspectrum/import-user-emails

Import emails to invite to community

Author: brianlovin

cypress/integration/community/settings/private_invite_link_spec.js

@@ -43,6 +43,7 @@ describe('private community invite link settings', () => {
         // grab the input again and compare its previous value
         // to the current value
         cy.get('[data-cy="join-link-input"]')
+          .scrollIntoView()
           .invoke('val')
           .should(val2 => {
             expect(val1).not.to.eq(val2);
@@ -51,6 +52,7 @@ describe('private community invite link settings', () => {
 
     // disable
     cy.get('[data-cy="toggle-token-link-invites-checked"]')
+      .scrollIntoView()
       .should('be.visible')
       .click();
 

package.json

@@ -77,7 +77,7 @@
     "cors": "^2.8.3",
     "cryptr": "^3.0.0",
     "css.escape": "^1.5.1",
-    "cypress": "^3.1.3",
+    "cypress": "3.1.5",
     "datadog-metrics": "^0.8.1",
     "dataloader": "^1.4.0",
     "debounce": "^1.2.0",

src/components/emailInvitationForm/index.js

@@ -11,13 +11,17 @@ import { Button } from '../buttons';
 import { Error } from '../formElements';
 import { SectionCardFooter } from 'src/components/settingsViews/style';
 import { withCurrentUser } from 'src/components/withCurrentUser';
+import MediaInput from 'src/components/mediaInput';
 import {
   EmailInviteForm,
   EmailInviteInput,
-  AddRow,
+  Action,
+  ActionAsLabel,
+  ActionHelpText,
   RemoveRow,
   CustomMessageToggle,
   CustomMessageTextAreaStyles,
+  HiddenInput,
 } from './style';
 
 type Props = {
@@ -37,16 +41,20 @@ type ContactProps = {
 type State = {
   isLoading: boolean,
   contacts: Array<ContactProps>,
+  importError: string,
   hasCustomMessage: boolean,
   customMessageString: string,
   customMessageError: boolean,
+  inputValue: ?string,
 };
 
 class EmailInvitationForm extends React.Component<Props, State> {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
+
     this.state = {
       isLoading: false,
+      importError: '',
       contacts: [
         {
           email: '',
@@ -70,6 +78,7 @@ class EmailInvitationForm extends React.Component<Props, State> {
       hasCustomMessage: false,
       customMessageString: '',
       customMessageError: false,
+      inputValue: '',
     };
   }
 
@@ -87,7 +96,7 @@ class EmailInvitationForm extends React.Component<Props, State> {
     this.setState({ isLoading: true });
 
     let validContacts = contacts
-      .filter(contact => contact.error === false)
+      .filter(contact => !contact.error)
       .filter(contact => contact.email !== currentUser.email)
       .filter(contact => contact.email.length > 0)
       .filter(contact => isEmail(contact.email))
@@ -234,17 +243,102 @@ class EmailInvitationForm extends React.Component<Props, State> {
     });
   };
 
+  handleFile = evt => {
+    this.setState({
+      importError: '',
+    });
+
+    // Only show loading indicator for large files
+    // where it takes > 200ms to load
+    const timeout = setTimeout(() => {
+      this.setState({
+        isLoading: true,
+      });
+    }, 200);
+
+    const reader = new FileReader();
+    reader.onload = file => {
+      clearTimeout(timeout);
+      this.setState({
+        isLoading: false,
+      });
+
+      let parsed;
+      try {
+        if (typeof reader.result !== 'string') return;
+        parsed = JSON.parse(reader.result);
+      } catch (err) {
+        this.setState({
+          importError: 'Only .json files are supported for import.',
+        });
+        return;
+      }
+
+      if (!Array.isArray(parsed)) {
+        this.setState({
+          importError:
+            'Your JSON data is in the wrong format. Please provide either an array of emails ["[email protected]"] or an array of objects with an "email" property and (optionally) a "name" property [{ "email": "[email protected]", "name": "Me" }].',
+        });
+        return;
+      }
+
+      const formatted = parsed.map(value => {
+        if (typeof value === 'string')
+          return {
+            email: value,
+          };
+
+        return {
+          email: value.email,
+          firstName: value.firstName || value.name,
+          lastName: value.lastName,
+        };
+      });
+
+      const validated = formatted
+        .map(value => {
+          if (!isEmail(value.email)) return { ...value, error: true };
+          return value;
+        })
+        .filter(Boolean);
+
+      const consolidated = [
+        ...this.state.contacts.filter(
+          contact =>
+            contact.email.length > 0 ||
+            contact.firstName.length > 0 ||
+            contact.lastName.length > 0
+        ),
+        ...validated,
+      ];
+
+      const unique = consolidated.filter(
+        (obj, i) =>
+          consolidated.findIndex(a => a['email'] === obj['email']) === i
+      );
+
+      this.setState({
+        contacts: unique,
+        inputValue: '',
+      });
+    };
+
+    reader.readAsText(evt.target.files[0]);
+  };
+
   render() {
     const {
       contacts,
       isLoading,
       hasCustomMessage,
       customMessageString,
       customMessageError,
+      importError,
     } = this.state;
 
     return (
       <div>
+        {importError && <Error>{importError}</Error>}
         {contacts.map((contact, i) => {
           return (
             <EmailInviteForm key={i}>
@@ -270,14 +364,28 @@ class EmailInvitationForm extends React.Component<Props, State> {
           );
         })}
 
-        <AddRow onClick={this.addRow}>+ Add another</AddRow>
+        <Action onClick={this.addRow}>
+          <Icon glyph="plus" size={20} /> Add row
+        </Action>
+        <ActionAsLabel mb="8px">
+          <HiddenInput
+            value={this.state.inputValue}
+            type="file"
+            accept=".json"
+            onChange={this.handleFile}
+          />
+          <Icon size={20} glyph="upload" /> Import emails
+        </ActionAsLabel>
+        <ActionHelpText>
+          Upload a .json file with an array of email addresses.
+        </ActionHelpText>
 
-        <CustomMessageToggle onClick={this.toggleCustomMessage}>
+        <Action onClick={this.toggleCustomMessage}>
           <Icon glyph={hasCustomMessage ? 'view-close' : 'post'} size={20} />
           {hasCustomMessage
             ? 'Remove custom message'
             : 'Optional: Add a custom message to your invitation'}
-        </CustomMessageToggle>
+        </Action>
 
         {hasCustomMessage && (
           <Textarea
@@ -294,12 +402,11 @@ class EmailInvitationForm extends React.Component<Props, State> {
           />
         )}
 
-        {hasCustomMessage &&
-          customMessageError && (
-            <Error>
-              Your custom invitation message can be up to 500 characters.
-            </Error>
-          )}
+        {hasCustomMessage && customMessageError && (
+          <Error>
+            Your custom invitation message can be up to 500 characters.
+          </Error>
+        )}
 
         <SectionCardFooter>
           <Button

src/components/emailInvitationForm/style.js

@@ -40,25 +40,43 @@ export const EmailInviteInput = styled.input`
   }
 `;
 
-export const AddRow = styled.div`
+export const HiddenInput = styled.input`
+  display: none;
+`;
+
+export const Action = styled.button`
   display: flex;
   width: 100%;
   justify-content: center;
   padding: 8px;
   background: ${theme.bg.wash};
   margin-top: 8px;
-  margin-bottom: 16px;
+  margin-bottom: ${props => props.mb || '16px'};
   font-size: 14px;
   color: ${theme.text.alt};
   font-weight: 500;
   border-radius: 4px;
 
+  .icon {
+    margin-right: 4px;
+  }
+
   &:hover {
-    color: ${theme.text.default};
+    color: ${theme.text.secondary};
     cursor: pointer;
   }
 `;
 
+export const ActionAsLabel = Action.withComponent('label');
+
+export const ActionHelpText = styled.div`
+  color: ${theme.text.alt};
+  font-size: 14px;
+  text-align: center;
+  margin-top: 8px;
+  margin-bottom: 24px;
+`;
+
 export const RemoveRow = styled.div`
   margin-left: 4px;
   color: ${theme.text.alt};
@@ -86,6 +104,10 @@ export const CustomMessageToggle = styled.h4`
   }
 `;
 
+export const FileUploadWrapper = styled.div`
+  margin-right: 16px;
+`;
+
 export const CustomMessageTextAreaStyles = {
   width: '100%',
   borderRadius: '8px',

src/components/icons/index.js

@@ -6,7 +6,9 @@ export default ({
   onChange,
   accept = '.png, .jpg, .jpeg, .gif, .mp4',
   multiple = false,
-  tipLocation,
+  tipLocation = 'top-right',
+  tipText = 'Upload photo',
+  glyph = 'photo',
 }) => (
   <MediaLabel>
     <MediaInput
@@ -15,10 +17,6 @@ export default ({
       multiple={multiple}
       onChange={onChange}
     />
-    <Icon
-      glyph="photo"
-      tipLocation={tipLocation ? tipLocation : 'top-right'}
-      tipText="Upload photo"
-    />
+    <Icon glyph={glyph} tipLocation={tipLocation} tipText={tipText} />
   </MediaLabel>
 );