feat(versions): Add client-side error messages for version actions (#1404)

Author: jstoffan

i18n/en-US.properties

@@ -424,22 +424,34 @@ be.sidebarSkillsTitle = Skills
 be.sidebarVersions.current = Current Version
 # Label for the version delete action.
 be.sidebarVersions.delete = Delete
+# Error message for the version delete action.
+be.sidebarVersions.deleteError = File version could not be deleted.
 # Message displayed for a deleted version. {name} is the user who performed the action.
 be.sidebarVersions.deletedBy = Deleted by {name}
 # Label for the version download action.
 be.sidebarVersions.download = Download
+# Error message for the version download action.
+be.sidebarVersions.downloadError = File version could not be downloaded.
 # Message to display when no versions are available
 be.sidebarVersions.empty = No prior versions are available for this file.
+# Error message for the versions fetch call.
+be.sidebarVersions.fetchError = File versions could not be retrieved.
 # Label for the version preview action.
 be.sidebarVersions.preview = Preview
 # Header to display for group of versions created in the prior week
 be.sidebarVersions.priorWeek = Last Week
 # Label for the version promote action.
 be.sidebarVersions.promote = Make Current
+# Error message for the version promote action.
+be.sidebarVersions.promoteError = File version could not be made current.
 # Label for the version restore action.
 be.sidebarVersions.restore = Restore
+# Error message for the version restored action.
+be.sidebarVersions.restoreError = File version could not be restored.
 # Message displayed for a restored version. {name} is the user who performed the action.
 be.sidebarVersions.restoredBy = Restored by {name}
+# Heading for inline error messages displayed due to a remote server issue.
+be.sidebarVersions.serverError = Server Error
 # Header to display for group of versions created in the current month
 be.sidebarVersions.thisMonth = This Month
 # Title for the preview versions sidebar

src/elements/content-sidebar/versions/VersionsSidebar.js

@@ -4,19 +4,18 @@
  * @author Box
  */
 
-import React from 'react';
+import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import InlineError from '../../../components/inline-error';
 import messages from './messages';
-import messagesCommon from '../../common/messages';
 import SidebarContent from '../SidebarContent';
 import VersionsMenu from './VersionsMenu';
 import { BackButton } from '../../common/nav-button';
 import { LoadingIndicatorWrapper } from '../../../components/loading-indicator';
 import './VersionsSidebar.scss';
 
 type Props = {
-    error?: string,
+    error?: MessageDescriptor,
     fileId: string,
     isLoading: boolean,
     parentName: string,
@@ -28,6 +27,7 @@ type Props = {
 const VersionsSidebar = ({ error, isLoading, parentName, versions, ...rest }: Props) => {
     const showVersions = !!versions.length;
     const showEmpty = !isLoading && !showVersions;
+    const showError = !!error;
 
     return (
         <SidebarContent
@@ -42,7 +42,11 @@ const VersionsSidebar = ({ error, isLoading, parentName, versions, ...rest }: Pr
             }
         >
             <LoadingIndicatorWrapper className="bcs-Versions-content" crawlerPosition="top" isLoading={isLoading}>
-                {error && <InlineError title={<FormattedMessage {...messagesCommon.error} />}>{error}</InlineError>}
+                {showError && (
+                    <InlineError title={<FormattedMessage {...messages.versionServerError} />}>
+                        <FormattedMessage {...error} />
+                    </InlineError>
+                )}
 
                 {showEmpty && (
                     <div className="bcs-Versions-empty">

src/elements/content-sidebar/versions/VersionsSidebarContainer.js

@@ -10,7 +10,9 @@ import getProp from 'lodash/get';
 import noop from 'lodash/noop';
 import { generatePath, withRouter } from 'react-router-dom';
 import type { Match, RouterHistory } from 'react-router-dom';
+import type { MessageDescriptor } from 'react-intl';
 import API from '../../../api';
+import messages from './messages';
 import openUrlInsideIframe from '../../../utils/iframe';
 import VersionsSidebar from './VersionsSidebar';
 import { FILE_VERSION_FIELDS_TO_FETCH } from '../../../utils/fields';
@@ -27,7 +29,7 @@ type Props = {
 };
 
 type State = {
-    error?: string,
+    error?: MessageDescriptor,
     isLoading: boolean,
     isWatermarked: boolean,
     versionCount: number,
@@ -54,7 +56,7 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
     window: any = window;
 
     componentDidMount() {
-        this.fetchData();
+        this.fetchData().catch(this.handleFetchError);
     }
 
     componentDidUpdate({ versionId: prevVersionId }: Props) {
@@ -75,17 +77,17 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
             this.deleteVersion(versionId)
                 .then(this.fetchData)
                 .then(() => this.handleDeleteSuccess(versionId))
-                .catch(this.handleActionError);
+                .catch(() => this.handleActionError(messages.versionActionDeleteError));
         });
     };
 
     handleActionDownload = (versionId: string): void => {
         this.fetchDownloadUrl(versionId)
             .then(openUrlInsideIframe)
-            .catch(this.handleActionError);
+            .catch(() => this.handleActionError(messages.versionActionDownloadError));
     };
 
-    handleActionError = ({ message }: ElementsXhrError): void => {
+    handleActionError = (message: MessageDescriptor): void => {
         this.setState({
             error: message,
             isLoading: false,
@@ -101,15 +103,15 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
             this.promoteVersion(versionId)
                 .then(this.fetchData)
                 .then(this.handlePromoteSuccess)
-                .catch(this.handleActionError);
+                .catch(() => this.handleActionError(messages.versionActionPromoteError));
         });
     };
 
     handleActionRestore = (versionId: string): void => {
         this.setState({ isLoading: true }, () => {
             this.restoreVersion(versionId)
                 .then(this.fetchData)
-                .catch(this.handleActionError);
+                .catch(() => this.handleActionError(messages.versionActionRestoreError));
         });
     };
 
@@ -122,9 +124,9 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
         }
     };
 
-    handleFetchError = ({ message }: ElementsXhrError): void => {
+    handleFetchError = (): void => {
         this.setState({
-            error: message,
+            error: messages.versionFetchError,
             isLoading: false,
             isWatermarked: false,
             versionCount: 0,
@@ -172,8 +174,7 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
     fetchData = (): Promise<any> => {
         return Promise.all([this.fetchFile(), this.fetchVersions()])
             .then(this.fetchVersionCurrent)
-            .then(this.handleFetchSuccess)
-            .catch(this.handleFetchError);
+            .then(this.handleFetchSuccess);
     };
 
     fetchDownloadUrl = (versionId: string): Promise<string> => {

src/elements/content-sidebar/versions/__tests__/VersionsSidebar-test.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { shallow } from 'enzyme/build';
 import InlineError from '../../../../components/inline-error';
+import messages from '../messages';
 import VersionsMenu from '../VersionsMenu';
 import VersionsSidebar from '../VersionsSidebar';
 
@@ -15,15 +16,15 @@ describe('elements/content-sidebar/versions/VersionsSidebar', () => {
         test('should show the versions list if no error prop is provided', () => {
             const wrapper = getWrapper({ versions: [{ id: '12345' }] });
 
-            expect(wrapper.find(InlineError).length).toEqual(0);
-            expect(wrapper.find(VersionsMenu).length).toEqual(1);
+            expect(wrapper.exists(InlineError)).toBe(false);
+            expect(wrapper.exists(VersionsMenu)).toBe(true);
             expect(wrapper).toMatchSnapshot();
         });
 
         test('should show an inline error if the prop is provided', () => {
-            const wrapper = getWrapper({ error: 'This is an error', versions: [] });
+            const wrapper = getWrapper({ error: messages.versionFetchError, versions: [] });
 
-            expect(wrapper.find(InlineError).length).toEqual(1);
+            expect(wrapper.exists(InlineError)).toBe(true);
             expect(wrapper).toMatchSnapshot();
         });
     });

src/elements/content-sidebar/versions/__tests__/VersionsSidebarContainer-test.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { shallow } from 'enzyme/build';
+import messages from '../messages';
 import openUrlInsideIframe from '../../../../utils/iframe';
 import VersionsSidebar from '../VersionsSidebarContainer';
 import { FILE_VERSION_FIELDS_TO_FETCH } from '../../../../utils/fields';
@@ -151,12 +152,11 @@ describe('elements/content-sidebar/versions/VersionsSidebarContainer', () => {
     describe('handleFetchError', () => {
         test('should set state to default values with error message', () => {
             const wrapper = getWrapper();
-            const message = 'This is an error!';
 
-            wrapper.instance().handleFetchError({ message });
+            wrapper.instance().handleFetchError();
 
             expect(wrapper.state()).toEqual({
-                error: message,
+                error: messages.versionFetchError,
                 isLoading: false,
                 isWatermarked: false,
                 versionCount: 0,

src/elements/content-sidebar/versions/__tests__/__snapshots__/VersionsSidebar-test.js.snap

@@ -25,12 +25,15 @@ exports[`elements/content-sidebar/versions/VersionsSidebar render should show an
     <InlineError
       title={
         <FormattedMessage
-          defaultMessage="Error"
-          id="be.error"
+          defaultMessage="Server Error"
+          id="be.sidebarVersions.serverError"
         />
       }
     >
-      This is an error
+      <FormattedMessage
+        defaultMessage="File versions could not be retrieved."
+        id="be.sidebarVersions.fetchError"
+      />
     </InlineError>
     <div
       className="bcs-Versions-empty"

src/elements/content-sidebar/versions/messages.js

@@ -41,11 +41,21 @@ const messages = defineMessages({
         defaultMessage: 'Delete',
         description: 'Label for the version delete action.',
     },
+    versionActionDeleteError: {
+        id: 'be.sidebarVersions.deleteError',
+        defaultMessage: 'File version could not be deleted.',
+        description: 'Error message for the version delete action.',
+    },
     versionActionDownload: {
         id: 'be.sidebarVersions.download',
         defaultMessage: 'Download',
         description: 'Label for the version download action.',
     },
+    versionActionDownloadError: {
+        id: 'be.sidebarVersions.downloadError',
+        defaultMessage: 'File version could not be downloaded.',
+        description: 'Error message for the version download action.',
+    },
     versionActionPreview: {
         id: 'be.sidebarVersions.preview',
         defaultMessage: 'Preview',
@@ -56,11 +66,21 @@ const messages = defineMessages({
         defaultMessage: 'Make Current',
         description: 'Label for the version promote action.',
     },
+    versionActionPromoteError: {
+        id: 'be.sidebarVersions.promoteError',
+        defaultMessage: 'File version could not be made current.',
+        description: 'Error message for the version promote action.',
+    },
     versionActionRestore: {
         id: 'be.sidebarVersions.restore',
         defaultMessage: 'Restore',
         description: 'Label for the version restore action.',
     },
+    versionActionRestoreError: {
+        id: 'be.sidebarVersions.restoreError',
+        defaultMessage: 'File version could not be restored.',
+        description: 'Error message for the version restored action.',
+    },
     versionActionToggle: {
         id: 'be.sidebarVersions.toggle',
         defaultMessage: 'Toggle Actions Menu',
@@ -71,6 +91,11 @@ const messages = defineMessages({
         defaultMessage: 'Deleted by { name }',
         description: 'Message displayed for a deleted version. {name} is the user who performed the action.',
     },
+    versionFetchError: {
+        id: 'be.sidebarVersions.fetchError',
+        defaultMessage: 'File versions could not be retrieved.',
+        description: 'Error message for the versions fetch call.',
+    },
     versionLimitExceeded: {
         id: 'be.sidebarVersions.versionLimitExceeded',
         defaultMessage:
@@ -92,6 +117,11 @@ const messages = defineMessages({
         defaultMessage: 'Restored by { name }',
         description: 'Message displayed for a restored version. {name} is the user who performed the action.',
     },
+    versionServerError: {
+        id: 'be.sidebarVersions.serverError',
+        defaultMessage: 'Server Error',
+        description: 'Heading for inline error messages displayed due to a remote server issue.',
+    },
     versionUploadedBy: {
         id: 'be.sidebarVersions.uploadedBy',
         defaultMessage: 'Uploaded by { name }',