Merge pull request #35 from glific/feature/attachments

Added upload attachment functionality

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@glific/flow-editor",
   "license": "AGPL-3.0",
-  "repository": "git://github.com/nyaruka/floweditor.git",
-  "version": "1.13.9-1",
+  "repository": "git://github.com/glific/floweditor.git",
+  "version": "1.13.9-2",
   "description": "'Standalone flow editing tool designed for use within the RapidPro suite of messaging tools but can be adopted for use outside of that ecosystem.'",
   "browser": "umd/flow-editor.min.js",
   "unpkg": "umd/flow-editor.min.js",

public/index.html

@@ -165,8 +165,9 @@
       flow: uuid,
       flowType: 'messaging',
       localStorage: true,
+      attachmentsEnabled:true,
       mutable: true,
-      filters: ['whatsapp'],
+      filters: ['whatsapp', 'classifier'],
 
       excludeTypes: [
         'add_contact_urn',
@@ -176,7 +177,6 @@
         'start_session',
         'open_ticket',
         'transfer_airtime',
-        'split_by_intent',
         'split_by_contact_field',
         'split_by_random',
         'split_by_groups',
@@ -235,7 +235,7 @@
         recipients: base + 'recipients',
         functions: base + 'functions',
         completion: base + 'completion',
-        attachments: base + 'attachments',
+        attachments: base + 'flow-attachment',
         activity: base + 'activity',
         validateMedia: base + 'validate-media',
 

src/components/flow/actions/localization/MsgLocalizationForm.tsx

@@ -16,7 +16,7 @@ import { initializeLocalizedForm } from './helpers';
 import i18n from 'config/i18n';
 import { range } from 'utils';
 import { renderIssues } from '../helpers';
-import { Attachment, renderAttachments } from '../sendmsg/attachments';
+import { Attachment, renderAttachments, validateURL } from '../sendmsg/attachments';
 import { AxiosResponse } from 'axios';
 
 export interface MsgLocalizationFormState extends FormState {
@@ -32,6 +32,7 @@ export default class MsgLocalizationForm extends React.Component<
   LocalizationFormProps,
   MsgLocalizationFormState
 > {
+  private timeout: any;
   constructor(props: LocalizationFormProps) {
     super(props);
     this.state = initializeLocalizedForm(this.props.nodeSettings);
@@ -165,21 +166,37 @@ export default class MsgLocalizationForm extends React.Component<
 
   private handleAttachmentUploaded(response: AxiosResponse) {
     const attachments: any = mutate(this.state.attachments, {
-      $push: [{ type: response.data.type, url: response.data.url, uploaded: true }]
+      $push: [{ type: 'document', url: response.data.url, uploaded: true }]
+    });
+    this.setState({ attachments });
+  }
+
+  private attachmentValidate(body: any, valid: boolean, validationFailures: any) {
+    const attachments: any = mutate(this.state.attachments, {
+      [0]: {
+        $set: { type: body.type, url: body.url, valid, validationFailures }
+      }
     });
     this.setState({ attachments });
   }
 
   private handleAttachmentChanged(index: number, type: string, url: string) {
     let attachments: any = this.state.attachments;
+
+    if (type && url) {
+      window.clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        validateURL(this.props.assetStore.validateMedia.endpoint, attachments[0], this);
+      }, 1000);
+    }
     if (index === -1) {
       attachments = mutate(attachments, {
         $push: [{ type, url }]
       });
     } else {
       attachments = mutate(attachments, {
         [index]: {
-          $set: { type, url }
+          $set: { type, url, valid: true }
         }
       });
     }
@@ -250,12 +267,14 @@ export default class MsgLocalizationForm extends React.Component<
         name: i18n.t('forms.attachments', 'Attachments'),
         body: renderAttachments(
           this.context.config.endpoints.attachments,
+          this.context.config.attachmentsEnabled,
           this.state.attachments,
           this.handleAttachmentUploaded,
           this.handleAttachmentChanged,
           this.handleAttachmentRemoved
         ),
-        checked: this.state.attachments.length > 0
+        checked: this.state.attachments.length > 0,
+        hasErrors: this.state.attachments.length > 0 && this.state.attachments[0].valid
       });
     }
 

src/components/flow/actions/sendmsg/SendMsgForm.tsx

@@ -292,7 +292,7 @@ export default class SendMsgForm extends React.Component<ActionFormProps, SendMs
 
   private handleAttachmentUploaded(response: AxiosResponse) {
     const attachments: any = mutate(this.state.attachments, {
-      $push: [{ type: response.data.type, url: response.data.url, uploaded: true }]
+      $push: [{ type: 'document', url: response.data.url, uploaded: true }]
     });
     this.setState({ attachments });
   }
@@ -345,6 +345,7 @@ export default class SendMsgForm extends React.Component<ActionFormProps, SendMs
       name: i18n.t('forms.attachments', 'Attachments'),
       body: renderAttachments(
         this.context.config.endpoints.attachments,
+        this.context.config.attachmentsEnabled,
         this.state.attachments,
         this.handleAttachmentUploaded,
         this.handleAttachmentChanged,

src/components/flow/actions/sendmsg/attachments.tsx

@@ -29,11 +29,9 @@ const TYPE_OPTIONS: SelectOption[] = [
   { value: 'document', name: i18n.t('forms.pdf_url', 'PDF Document URL') }
 ];
 
-// const NEW_TYPE_OPTIONS = TYPE_OPTIONS.concat([
-//   { value: 'upload', name: i18n.t('forms.upload_attachment', 'Upload Attachment') }
-// ]);
-
-const NEW_TYPE_OPTIONS = TYPE_OPTIONS;
+const NEW_TYPE_OPTIONS = TYPE_OPTIONS.concat([
+  { value: 'upload', name: i18n.t('forms.upload_attachment', 'Upload Attachment') }
+]);
 
 export const validateURL = (endpoint: any, body: any, msgForm: any) => {
   axios
@@ -74,7 +72,10 @@ export const handleUploadFile = (
   headers['X-Requested-With'] = 'XMLHttpRequest';
 
   const data = new FormData();
-  data.append('file', files[0]);
+  data.append('media', files[0]);
+  const mediaName = files[0].name;
+  const extension = mediaName.slice((Math.max(0, mediaName.lastIndexOf('.')) || Infinity) + 1);
+  data.append('extension', extension);
   axios
     .post(endpoint, data, { headers })
     .then(onSuccess)
@@ -85,6 +86,7 @@ export const handleUploadFile = (
 
 export const renderAttachments = (
   endpoint: string,
+  attachmentsEnabled: boolean,
   attachments: Attachment[],
   onUploaded: (response: AxiosResponse) => void,
   onAttachmentChanged: (index: number, value: string, url: string) => void,
@@ -93,12 +95,19 @@ export const renderAttachments = (
   const renderedAttachments = attachments.map((attachment, index: number) =>
     attachment.uploaded
       ? renderUpload(index, attachment, onAttachmentRemoved)
-      : renderAttachment(index, attachment, onAttachmentChanged, onAttachmentRemoved)
+      : renderAttachment(
+          attachmentsEnabled,
+          index,
+          attachment,
+          onAttachmentChanged,
+          onAttachmentRemoved
+        )
   );
 
   const emptyOption =
     attachments.length < MAX_ATTACHMENTS
       ? renderAttachment(
+          attachmentsEnabled,
           -1,
           { url: '', type: '' },
 
@@ -147,7 +156,10 @@ export const renderUpload = (
           name={i18n.t('forms.type', 'Type')}
           style={TembaSelectStyle.small}
           entry={{
-            value: { name: attachment.type }
+            value: {
+              name:
+                attachment.url.length > 20 ? `${attachment.url.slice(0, 20)}...` : attachment.url
+            }
           }}
           options={TYPE_OPTIONS}
           disabled={true}
@@ -180,6 +192,7 @@ export const renderUpload = (
 };
 
 export const renderAttachment = (
+  attachmentsEnabled: boolean,
   index: number,
   attachment: Attachment,
   onAttachmentChanged: (index: number, type: string, url: string) => void,
@@ -209,7 +222,7 @@ export const renderAttachment = (
                 onAttachmentChanged(index, option.value, index === -1 ? '' : attachment.url);
               }
             }}
-            options={index > -1 ? TYPE_OPTIONS : NEW_TYPE_OPTIONS}
+            options={attachmentsEnabled ? NEW_TYPE_OPTIONS : TYPE_OPTIONS}
           />
         </div>
         {index > -1 ? (

src/components/flow/props.ts

@@ -48,6 +48,7 @@ export interface RouterFormProps extends IssueProps {
 export interface LocalizationFormProps extends IssueProps {
   language: Asset;
   nodeSettings: NodeEditorSettings;
+  assetStore?: AssetStore;
   updateLocalizations(languageCode: string, localizations: any[]): void;
   onClose(canceled: boolean): void;
   helpArticles: { [key: string]: string };

src/components/nodeeditor/NodeEditor.tsx

@@ -154,6 +154,7 @@ export class NodeEditor extends React.Component<NodeEditorProps> {
             onClose: this.close,
             language: this.props.language,
             helpArticles: this.props.helpArticles,
+            assetStore: this.props.assetStore,
             issues: this.props.issues.filter(
               (issue: FlowIssue) => issue.language === this.props.language.id
             )

src/flowTypes.ts

@@ -47,6 +47,7 @@ export interface Endpoints {
 }
 
 export interface FlowEditorConfig {
+  attachmentsEnabled: boolean;
   localStorage: boolean;
   endpoints: Endpoints;
   flow: string;

src/test/config.ts

@@ -5,6 +5,7 @@ export const config: FlowEditorConfig = {
   flow: 'a4f64f1b-85bc-477e-b706-de313a022979',
   localStorage: true,
   showDownload: true,
+  attachmentsEnabled: false,
   flowType: FlowTypes.MESSAGING,
   mutable: true,
   filters: ['whatsapp', 'airtime', 'resthook', 'classifier', 'ticketer'],