New: error messages for failed upload items in ContentUploader (#148)

i18n/en-US.properties

@@ -168,13 +168,21 @@ be.uploadSuccess = Success! Your files have been uploaded
 be.uploadSuccessInput = Upload additional files
 # Cancel upload button tooltip
 be.uploadsCancelButtonTooltip = Cancel this upload
+# Default error message shown when upload fails
+be.uploadsDefaultErrorMessage = Something went wrong with the upload. Please try again.
+# Error message shown when file size exceeds the limit
+be.uploadsFileSizeLimitExceededErrorMessage = File size exceeds the folder owner's file size limit
 # Text shown when uploads are completed
 be.uploadsManagerUploadComplete = Completed
 # Text shown when uploads failed
 be.uploadsManagerUploadFailed = Some Uploads Failed
 # Text shown when uploads are in progress
 be.uploadsManagerUploadInProgress = Uploading
+# Error message shown when pending app folder size exceeds the limit
+be.uploadsPendingFolderSizeLimitErrorMessage = Pending app folder size limit exceeded
 # Retry upload button tooltip
 be.uploadsRetryButtonTooltip = Retry upload
+# Error message shown when account storage limit has been reached
+be.uploadsStorageLimitErrorMessage = Account storage limit reached
 # Shown instead of yesterdays date.
 be.yesterday = yesterday

package.json

@@ -122,7 +122,7 @@
     "babel-preset-react": "^6.24.1",
     "babel-template": "^6.25.0",
     "babel-types": "^6.25.0",
-    "box-react-ui": "^21.2.2",
+    "box-react-ui": "^21.2.3",
     "circular-dependency-plugin": "^4.3.0",
     "classnames": "^2.2.5",
     "color": "^2.0.1",
@@ -185,7 +185,7 @@
     "webpack-dev-server": "^2.9.7"
   },
   "peerDependencies": {
-    "box-react-ui": "^21.2.2",
+    "box-react-ui": "^21.2.3",
     "classnames": "^2.2.5",
     "jsuri": "^1.3.1",
     "lodash": "^4.17.4",

src/components/ContentUploader/ContentUploader.js

@@ -556,6 +556,7 @@ class ContentUploader extends Component<Props, State> {
         const { file } = item;
 
         item.status = STATUS_ERROR;
+        item.error = error;
         this.numItemsUploading -= 1;
 
         const { items } = this.state;

src/components/ContentUploader/ItemList.js

@@ -39,7 +39,14 @@ const ItemList = ({ items, onClick, rootElement }: Props) => (
                     width={width}
                 >
                     <Column cellRenderer={nameCell} dataKey='name' flexGrow={1} flexShrink={1} width={300} />
-                    <Column cellRenderer={progressCell} dataKey='progress' flexGrow={1} flexShrink={1} width={300} />
+                    <Column
+                        cellRenderer={progressCell}
+                        dataKey='progress'
+                        flexGrow={1}
+                        flexShrink={1}
+                        width={300}
+                        style={{ textAlign: 'right' }}
+                    />
                     <Column
                         cellRenderer={actionCell}
                         dataKey='status'

src/components/ContentUploader/progressCellRenderer.js

@@ -4,12 +4,46 @@
  */
 
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import ItemProgress from './ItemProgress';
-import { STATUS_PENDING } from '../../constants';
+import { STATUS_PENDING, STATUS_ERROR, STATUS_IN_PROGRESS } from '../../constants';
 import type { UploadItem } from '../../flowTypes';
+import messages from '../messages';
 
 type Props = {
     rowData: UploadItem
 };
 
-export default () => ({ rowData }: Props) => (rowData.status !== STATUS_PENDING ? <ItemProgress {...rowData} /> : null);
+/**
+ * Get error message for a specific error code
+ *
+ * @param {string} [errorCode]
+ * @returns {FormattedMessage}
+ */
+const getErrorMessage = (errorCode: ?string) => {
+    switch (errorCode) {
+        case 'file_size_limit_exceeded':
+            return <FormattedMessage {...messages.uploadsFileSizeLimitExceededErrorMessage} />;
+        case 'storage_limit_exceeded':
+            return <FormattedMessage {...messages.uploadsStorageLimitErrorMessage} />;
+        case 'pending_app_folder_size_limit':
+            return <FormattedMessage {...messages.uploadsPendingFolderSizeLimitErrorMessage} />;
+        default:
+            return <FormattedMessage {...messages.uploadsDefaultErrorMessage} />;
+    }
+};
+
+export default () => ({ rowData }: Props) => {
+    const { status, error = {} } = rowData;
+    const { code } = error;
+
+    switch (status) {
+        case STATUS_IN_PROGRESS:
+        case STATUS_PENDING:
+            return <ItemProgress {...rowData} />;
+        case STATUS_ERROR:
+            return getErrorMessage(code);
+        default:
+            return null;
+    }
+};

src/components/messages.js

@@ -462,6 +462,26 @@ const messages: { [string]: IntlDESCriptor } = defineMessages({
         id: 'be.uploadsRetryButtonTooltip',
         description: 'Retry upload button tooltip',
         defaultMessage: 'Retry upload'
+    },
+    uploadsFileSizeLimitExceededErrorMessage: {
+        id: 'be.uploadsFileSizeLimitExceededErrorMessage',
+        description: 'Error message shown when file size exceeds the limit',
+        defaultMessage: 'File size exceeds the folder owner\'s file size limit'
+    },
+    uploadsStorageLimitErrorMessage: {
+        id: 'be.uploadsStorageLimitErrorMessage',
+        description: 'Error message shown when account storage limit has been reached',
+        defaultMessage: 'Account storage limit reached'
+    },
+    uploadsPendingFolderSizeLimitErrorMessage: {
+        id: 'be.uploadsPendingFolderSizeLimitErrorMessage',
+        description: 'Error message shown when pending app folder size exceeds the limit',
+        defaultMessage: 'Pending app folder size limit exceeded'
+    },
+    uploadsDefaultErrorMessage: {
+        id: 'be.uploadsDefaultErrorMessage',
+        description: 'Default error message shown when upload fails',
+        defaultMessage: 'Something went wrong with the upload. Please try again.'
     }
 });
 

src/flowTypes.js

@@ -205,6 +205,7 @@ export type Collection = {
 export type UploadItem = {
     api: PlainUploadAPI | MultiputUploadAPI,
     boxFile?: BoxItem,
+    error?: Object,
     extension: string,
     file: File,
     name: string,

yarn.lock

@@ -1343,9 +1343,9 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
-box-react-ui@^21.2.2:
-  version "21.2.2"
-  resolved "https://registry.yarnpkg.com/box-react-ui/-/box-react-ui-21.2.2.tgz#e113a7326165aa2d3880d6528ae9605fcf4af05e"
+box-react-ui@^21.2.3:
+  version "21.2.3"
+  resolved "https://registry.yarnpkg.com/box-react-ui/-/box-react-ui-21.2.3.tgz#4e2346ad3245bd449f1df099e9ffdde45541dd64"
   dependencies:
     yui "^3.18.1"