feat(preview): better message when blocked by a policy (#1346)

* feat(preview): better message when blocked by a policy

* fix: PR feedback

Author: priyajeet

i18n/en-US.properties

@@ -320,6 +320,8 @@ be.pointAnnotation = Point annotation mode
 be.preview = Preview
 # Error message when Preview fails due to the files call.
 be.previewError = We’re sorry, the preview didn’t load. Please refresh the page.
+# Error message when Preview fails due to the files call which is blocked by an access policy.
+be.previewErrorBlockedByPolicy = Your access is restricted due to the classification applied to this content.
 # Message when new preview is available.
 be.previewUpdate = A new version of this file is available.
 # Previous file button title

src/constants.js

@@ -200,6 +200,7 @@ export const ERROR_CODE_UPLOAD_STORAGE_LIMIT_EXCEEDED = 'storage_limit_exceeded'
 export const ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED = 'file_size_limit_exceeded';
 export const ERROR_CODE_UPLOAD_PENDING_APP_FOLDER_SIZE_LIMIT = 'pending_app_folder_size_limit';
 export const ERROR_CODE_FETCH_FILE = 'fetch_file_error';
+export const ERROR_CODE_FETCH_FILE_DUE_TO_POLICY = 'forbidden_by_policy';
 export const ERROR_CODE_FETCH_FOLDER = 'fetch_folder_error';
 export const ERROR_CODE_FETCH_CLASSIFICATION = 'fetch_classification_error';
 export const ERROR_CODE_FETCH_COMMENTS = 'fetch_comments_error';

src/elements/common/flowTypes.js

@@ -0,0 +1,11 @@
+// @flow
+
+type ErrorType = {
+    code: string,
+    details?: Object,
+    displayMessage?: string,
+    message?: string,
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export type { ErrorType };

src/elements/common/messages.js

@@ -37,6 +37,11 @@ const messages = defineMessages({
         description: 'Error message when Preview fails due to the files call.',
         defaultMessage: 'We’re sorry, the preview didn’t load. Please refresh the page.',
     },
+    previewErrorBlockedByPolicy: {
+        id: 'be.previewErrorBlockedByPolicy',
+        description: 'Error message when Preview fails due to the files call which is blocked by an access policy.',
+        defaultMessage: 'Your access is restricted due to the classification applied to this content.',
+    },
     previewUpdate: {
         id: 'be.previewUpdate',
         description: 'Message when new preview is available.',

src/elements/content-preview/ContentPreview.js

@@ -46,6 +46,7 @@ import {
     ORIGIN_CONTENT_PREVIEW,
     ERROR_CODE_UNKNOWN,
 } from '../../constants';
+import type { ErrorType } from '../common/flowTypes';
 import '../common/fonts.scss';
 import '../common/base.scss';
 import './ContentPreview.scss';
@@ -92,8 +93,8 @@ type Props = {
 
 type State = {
     currentFileId?: string,
+    error?: ErrorType,
     file?: BoxItem,
-    isFileError: boolean,
     isReloadNotificationVisible: boolean,
     isThumbnailSidebarOpen: boolean,
     prevFileIdProp?: string, // the previous value of the "fileId" prop. Needed to implement getDerivedStateFromProps
@@ -129,13 +130,8 @@ type PreviewMetrics = {
     value: number,
 };
 
-type PreviewError = {
-    error: {
-        code: string,
-        details: Object,
-        displayMessage: string,
-        message: string,
-    },
+type PreviewLibraryError = {
+    error: ErrorType,
 };
 
 const InvalidIdError = new Error('Invalid id for Preview!');
@@ -170,7 +166,7 @@ class ContentPreview extends PureComponent<Props, State> {
     updateVersionToCurrent: ?() => void;
 
     initialState: State = {
-        isFileError: false,
+        error: undefined,
         isReloadNotificationVisible: false,
         isThumbnailSidebarOpen: false,
     };
@@ -517,16 +513,17 @@ class ContentPreview extends PureComponent<Props, State> {
     /**
      * Handler for 'preview_error' preview event
      *
-     * @param {PreviewError} previewError - the error data emitted from preview
+     * @param {PreviewLibraryError} previewError - the error data emitted from preview
      * @return {void}
      */
-    onPreviewError = ({ error, ...rest }: PreviewError): void => {
+    onPreviewError = ({ error, ...rest }: PreviewLibraryError): void => {
         const { code = ERROR_CODE_UNKNOWN } = error;
+        const { onError } = this.props;
 
         // In case of error, there should be no thumbnail sidebar to account for
         this.setState({ isThumbnailSidebarOpen: false });
 
-        this.props.onError(
+        onError(
             error,
             code,
             {
@@ -797,8 +794,14 @@ class ContentPreview extends PureComponent<Props, State> {
      * @return {void}
      */
     fetchFileErrorCallback = (fileError: ElementsXhrError, code: string): void => {
-        this.setState({ isFileError: true });
-        this.props.onError(fileError, code, {
+        const { onError } = this.props;
+        const errorCode = fileError.code || code;
+        const error = {
+            code: errorCode,
+            message: fileError.message,
+        };
+        this.setState({ error, file: undefined });
+        onError(fileError, errorCode, {
             error: fileError,
         });
     };
@@ -1102,8 +1105,8 @@ class ContentPreview extends PureComponent<Props, State> {
         }: Props = this.props;
 
         const {
+            error,
             file,
-            isFileError,
             isReloadNotificationVisible,
             currentFileId,
             isThumbnailSidebarOpen,
@@ -1122,6 +1125,7 @@ class ContentPreview extends PureComponent<Props, State> {
             return null;
         }
 
+        const errorCode = getProp(error, 'code');
         const currentVersionId = getProp(file, 'file_version.id');
         const selectedVersionId = getProp(selectedVersion, 'id', currentVersionId);
         const onHeaderClose = currentVersionId === selectedVersionId ? onClose : this.updateVersionToCurrent;
@@ -1153,7 +1157,8 @@ class ContentPreview extends PureComponent<Props, State> {
                             ) : (
                                 <div className="bcpr-loading-wrapper">
                                     <PreviewLoading
-                                        isLoading={!isFileError}
+                                        errorCode={errorCode}
+                                        isLoading={!errorCode}
                                         loadingIndicatorProps={{
                                             size: 'large',
                                         }}

src/elements/content-preview/PreviewLoading.js

@@ -9,16 +9,25 @@ import { FormattedMessage } from 'react-intl';
 import IconFileDefault from '../../icons/file/IconFileDefault';
 import makeLoadable from '../../components/loading-indicator/makeLoadable';
 import messages from '../common/messages';
+import { ERROR_CODE_FETCH_FILE_DUE_TO_POLICY } from '../../constants';
 import './PreviewLoading.scss';
 
-const PreviewLoading = () => (
-    <div className="bcpr-loading">
-        <IconFileDefault height={160} width={160} />
-        <div className="bcpr-loading-text">
-            <FormattedMessage {...messages.previewError} />
+type Props = {
+    errorCode?: string,
+};
+
+const PreviewLoading = ({ errorCode }: Props) => {
+    const isBlockedByPolicy = errorCode === ERROR_CODE_FETCH_FILE_DUE_TO_POLICY;
+    const message = isBlockedByPolicy ? messages.previewErrorBlockedByPolicy : messages.previewError;
+    return (
+        <div className="bcpr-PreviewLoading">
+            <IconFileDefault height={160} width={160} />
+            <div className="bcpr-PreviewLoading-message">
+                <FormattedMessage {...message} />
+            </div>
         </div>
-    </div>
-);
+    );
+};
 
 export { PreviewLoading as PreviewLoadingComponent };
 export default makeLoadable(PreviewLoading);

src/elements/content-preview/PreviewLoading.scss

@@ -1,14 +1,15 @@
 @import '../common/variables';
 
-.bcpr {
-    .bcpr-loading {
-        color: $twos;
-        position: relative;
-        text-align: center;
-        z-index: 1;
+.bcpr-PreviewLoading {
+    align-items: center;
+    color: $bdl-gray;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+}
 
-        .bcpr-loading-text {
-            font-size: 14px;
-        }
-    }
+.bcpr-PreviewLoading-message {
+    font-size: 14px;
+    margin-top: 20px;
+    max-width: 400px;
 }

src/elements/content-preview/__tests__/ContentPreview-test.js

@@ -379,7 +379,7 @@ describe('elements/content-preview/ContentPreview', () => {
         test('should set state to the new file', () => {
             instance.fetchFileSuccessCallback(file);
             expect(instance.state.file).toEqual(file);
-            expect(instance.state.isFileError).toEqual(false);
+            expect(instance.state.error).toBeUndefined();
             expect(instance.state.isReloadNotificationVisible).toEqual(false);
         });
 
@@ -390,7 +390,7 @@ describe('elements/content-preview/ContentPreview', () => {
             instance.fetchFileSuccessCallback(newFile);
 
             expect(instance.state.file).toEqual(newFile);
-            expect(instance.state.isFileError).toEqual(false);
+            expect(instance.state.error).toBeUndefined();
             expect(instance.state.isReloadNotificationVisible).toEqual(false);
         });
 
@@ -419,7 +419,7 @@ describe('elements/content-preview/ContentPreview', () => {
 
             expect(instance.stagedFile).toEqual(newFile);
             expect(instance.state.file).toEqual(file);
-            expect(instance.state.isFileError).toBeFalsy();
+            expect(instance.state.error).toBeUndefined();
             expect(instance.state.isReloadNotificationVisible).toBeTruthy();
         });
     });
@@ -440,10 +440,19 @@ describe('elements/content-preview/ContentPreview', () => {
             error = new Error('foo');
         });
 
-        test('should set the file error state', () => {
-            instance.fetchFileErrorCallback(error);
-            expect(instance.state.isFileError).toEqual(true);
+        test('should set the error state from the error object', () => {
+            instance.fetchFileErrorCallback(error, 'code');
+            expect(instance.state.error).toEqual({ code: 'code', message: 'foo' });
             expect(instance.fetchFile).not.toBeCalled();
+            expect(instance.file).toBeUndefined();
+            expect(onError).toHaveBeenCalled();
+        });
+
+        test('should use the code from response if it exists', () => {
+            instance.fetchFileErrorCallback({ code: 'specialCode', message: 'specialMessage' }, 'code');
+            expect(instance.state.error).toEqual({ code: 'specialCode', message: 'specialMessage' });
+            expect(instance.fetchFile).not.toBeCalled();
+            expect(instance.file).toBeUndefined();
             expect(onError).toHaveBeenCalled();
         });
     });
@@ -669,7 +678,7 @@ describe('elements/content-preview/ContentPreview', () => {
             expect(instance.state.file).toEqual(file);
             expect(instance.stagedFile).toBeUndefined();
             expect(instance.state.isReloadNotificationVisible).toBeFalsy();
-            expect(instance.state.isFileError).toBeFalsy();
+            expect(instance.state.error).toBeUndefined();
         });
     });
 

src/elements/content-preview/__tests__/PreviewLoading-test.js

@@ -1,14 +1,20 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { PreviewLoadingComponent as PreviewLoading } from '../PreviewLoading';
+import { ERROR_CODE_FETCH_FILE_DUE_TO_POLICY } from '../../../constants';
 
-const getWrapper = () => shallow(<PreviewLoading />);
+const getWrapper = props => shallow(<PreviewLoading {...props} />);
 
 describe('elements/content-preview/PreviewLoading', () => {
     describe('render()', () => {
         test('should render correctly', () => {
             const wrapper = getWrapper();
             expect(wrapper).toMatchSnapshot();
         });
+
+        test('should render correctly when blocked by access policy', () => {
+            const wrapper = getWrapper({ errorCode: ERROR_CODE_FETCH_FILE_DUE_TO_POLICY });
+            expect(wrapper).toMatchSnapshot();
+        });
     });
 });

src/elements/content-preview/__tests__/__snapshots__/PreviewLoading-test.js.snap

@@ -2,14 +2,14 @@
 
 exports[`elements/content-preview/PreviewLoading render() should render correctly 1`] = `
 <div
-  className="bcpr-loading"
+  className="bcpr-PreviewLoading"
 >
   <IconFileDefault
     height={160}
     width={160}
   />
   <div
-    className="bcpr-loading-text"
+    className="bcpr-PreviewLoading-message"
   >
     <FormattedMessage
       defaultMessage="We’re sorry, the preview didn’t load. Please refresh the page."
@@ -18,3 +18,22 @@ exports[`elements/content-preview/PreviewLoading render() should render correctl
   </div>
 </div>
 `;
+
+exports[`elements/content-preview/PreviewLoading render() should render correctly when blocked by access policy 1`] = `
+<div
+  className="bcpr-PreviewLoading"
+>
+  <IconFileDefault
+    height={160}
+    width={160}
+  />
+  <div
+    className="bcpr-PreviewLoading-message"
+  >
+    <FormattedMessage
+      defaultMessage="Your access is restricted due to the classification applied to this content."
+      id="be.previewErrorBlockedByPolicy"
+    />
+  </div>
+</div>
+`;