fix(printing): Fix print button on ContentPreview

src/elements/content-preview/ContentPreview.js

@@ -100,6 +100,7 @@ type Props = {
     WithLoggerProps;
 
 type State = {
+    canPrint?: boolean,
     currentFileId?: string,
     error?: ErrorType,
     file?: BoxItem,
@@ -177,6 +178,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
     updateVersionToCurrent: ?() => void;
 
     initialState: State = {
+        canPrint: false,
         error: undefined,
         isReloadNotificationVisible: false,
         isThumbnailSidebarOpen: false,
@@ -646,6 +648,8 @@ class ContentPreview extends React.PureComponent<Props, State> {
         if (this.preview && filesToPrefetch.length > 1) {
             this.prefetch(filesToPrefetch);
         }
+
+        this.handleCanPrint();
     };
 
     /**
@@ -686,6 +690,14 @@ class ContentPreview extends React.PureComponent<Props, State> {
         return !!showAnnotations && (this.canAnnotate() || hasViewAllPermissions || hasViewSelfPermissions);
     }
 
+    handleCanPrint() {
+        const preview = this.getPreview();
+
+        if (preview && typeof preview.canPrint === 'function') {
+            this.setState({ canPrint: preview.canPrint() });
+        }
+    }
+
     /**
      * Loads preview in the component using the preview library.
      *
@@ -1132,6 +1144,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
         }: Props = this.props;
 
         const {
+            canPrint,
             error,
             file,
             isReloadNotificationVisible,
@@ -1170,6 +1183,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
                             onClose={onHeaderClose}
                             onPrint={this.print}
                             canDownload={this.canDownload()}
+                            canPrint={canPrint}
                             onDownload={this.download}
                             contentOpenWithProps={contentOpenWithProps}
                             canAnnotate={this.canAnnotate()}

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

@@ -164,6 +164,36 @@ describe('elements/content-preview/ContentPreview', () => {
         });
     });
 
+    describe('handleCanPrint()', () => {
+        beforeEach(() => {
+            file = {
+                id: '123',
+                permissions: {
+                    can_download: true,
+                },
+                is_download_available: true,
+            };
+        });
+        test.each([
+            [true, true],
+            [false, false],
+        ])('should set canPrint to %s when ability to print is %s', (expected, value) => {
+            const wrapper = getWrapper();
+            const instance = wrapper.instance();
+            const canPrintMock = jest.fn().mockReturnValue(value);
+
+            wrapper.setState({ file });
+            instance.preview = {
+                canPrint: canPrintMock,
+            };
+
+            instance.handleCanPrint();
+
+            expect(canPrintMock).toBeCalled();
+            expect(wrapper.state('canPrint')).toEqual(expected);
+        });
+    });
+
     describe('loadPreview()', () => {
         beforeEach(() => {
             // Fresh global preview object

src/elements/content-preview/preview-header/PreviewHeader.js

@@ -27,6 +27,7 @@ import './PreviewHeader.scss';
 type Props = {
     canAnnotate: boolean,
     canDownload: boolean,
+    canPrint?: boolean,
     contentOpenWithProps?: ContentOpenWithProps,
     file?: BoxItem,
     logoUrl?: string,
@@ -44,6 +45,7 @@ const LoadableContentOpenWith = AsyncLoad({
 const PreviewHeader = ({
     canAnnotate,
     canDownload,
+    canPrint,
     contentOpenWithProps = {},
     file,
     intl,
@@ -113,7 +115,7 @@ const PreviewHeader = ({
                                     </PlainButton>
                                 </>
                             )}
-                            {canDownload && (
+                            {canPrint && (
                                 <PlainButton
                                     aria-label={printMsg}
                                     className="bcpr-PreviewHeader-button"

src/elements/content-preview/preview-header/__tests__/PreviewHeader.test.js

@@ -18,4 +18,12 @@ describe('elements/content-preview/preview-header/PreviewHeader', () => {
         expect(wrapper.exists('Logo')).toBe(false);
         expect(wrapper.exists('FileInfo')).toBe(true);
     });
+
+    test.each([
+        [true, true],
+        [false, false],
+    ])(`print button should be %s if canPrint is %s `, (expected, value) => {
+        const wrapper = getWrapper({ canPrint: value });
+        expect(wrapper.exists('[title="Print"]')).toBe(expected);
+    });
 });

src/elements/content-preview/stories/ContentPreview.notes.md

@@ -0,0 +1,28 @@
+`import ContentPreview from 'box-ui-elements/es/elements/content-preview';`
+
+### Screenshot
+
+## <img src="https://user-images.githubusercontent.com/1075325/27419184-596b485c-56d4-11e7-8d42-c65328089c95.png" style="border: 1px solid #e8e8e8;" width="600" />
+
+### Props
+
+| Prop                 | Type                | Default | Description                                                                                                                                                                         |
+| -------------------- | ------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| fileId\*             | string              |         | The id of the file to preview.                                                                                                                                                      |
+| token\*              | string              |         | _See the [developer docs](https://developer.box.com/docs/box-content-preview#section-options)._                                                                                     |
+| canDownload          | boolean             | `true`  | Visually hides the download and print buttons in the preview header if this is set to `false`. _This prop has no effect when the file permission `can_download` is set to `false`._ |
+| collection           | Array&lt;string&gt; | `[]`    | _See the [developer docs](https://developer.box.com/docs/box-content-preview#section-options)._                                                                                     |
+| contentOpenWithProps | Object              | `{}`    | Props that can be forwarded to the Content Open With UI Element. _See them in the props section of [Content Open With UI Element](#content-open-with-documentation)_                |
+| contentSidebarProps  | Object              | `{}`    | Props that can be forwarded to the Content Sidebar UI Element. _See them in the props section of [Content Sidebar UI Element](#content-sidebar-documentation)_                      |
+| hasHeader            | boolean             | `true`  | Visually hides the preview header if this is set to `false`.                                                                                                                        |
+| language             | string              | `en-US` | _See the [Internationalization](../README.md#internationalization) section_                                                                                                         |
+| messages             | Map<string, string> |         | _See the [Internationalization](../README.md#internationalization) section_                                                                                                         |
+| onClose              | function            |         | Callback function for when the file preview closes. If absent, the close button will not render in the header.                                                                      |
+| onLoad               | function            |         | Callback function for when a file preview loads.                                                                                                                                    |
+| requestInterceptor   | function            |         | _See the [developer docs](https://developer.box.com/docs/box-content-preview#section-options)._                                                                                     |
+| responseInterceptor  | function            |         | _See the [developer docs](https://developer.box.com/docs/box-content-preview#section-options)._                                                                                     |
+| sharedLink           | string              |         | _See the [developer docs](https://developer.box.com/docs/box-content-preview#section-options)._                                                                                     |
+| sharedLinkPassword   | string              |         | _See the [developer docs](https://developer.box.com/docs/box-content-preview#section-options)._                                                                                     |
+| showAnnotations      | boolean             | `true`  | _See the [developer docs](https://developer.box.com/docs/box-content-preview#section-options)._                                                                                     |
+
+**_Note_**: Any other option listed here https://github.com/box/box-content-preview#parameters--options, which is also not listed or overriden above as a prop, will be passed on as-is to the Preview Library.

src/elements/content-preview/stories/ContentPreview.stories.js

@@ -0,0 +1,46 @@
+// @flow
+import * as React from 'react';
+import { IntlProvider } from 'react-intl';
+
+import ContentPreview from '../ContentPreview';
+import notes from './ContentPreview.notes.md';
+
+export const Preview = () => (
+    <IntlProvider locale="en">
+        <ContentPreview hasHeader features={global.FEATURES} fileId={global.FILE_ID} token={global.TOKEN} />
+    </IntlProvider>
+);
+
+export const PreviewWithSidebar = () => (
+    <IntlProvider locale="en">
+        <ContentPreview
+            contentSidebarProps={{
+                detailsSidebarProps: {
+                    hasAccessStats: true,
+                    hasClassification: true,
+                    hasNotices: true,
+                    hasProperties: true,
+                    hasRetentionPolicy: true,
+                    hasVersions: true,
+                },
+                features: global.FEATURES,
+                hasActivityFeed: true,
+                hasMetadata: true,
+                hasSkills: true,
+                hasVersions: true,
+            }}
+            hasHeader
+            features={global.FEATURES}
+            fileId={global.FILE_ID}
+            token={global.TOKEN}
+        />
+    </IntlProvider>
+);
+
+export default {
+    title: 'Elements|ContentPreview',
+    component: ContentPreview,
+    parameters: {
+        notes,
+    },
+};