box-ui-elements 19.0.0-beta.9 → 19.0.0

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

@@ -3,24 +3,24 @@
 exports[`elements/content-preview/PreviewNavigation render() should render correctly with a filled collection 1`] = `
 <Router
   history={
-    Object {
-      "entries": Array [
-        Object {},
+    {
+      "entries": [
+        {},
       ],
       "listen": [MockFunction] {
-        "calls": Array [
-          Array [
+        "calls": [
+          [
             [Function],
           ],
         ],
-        "results": Array [
-          Object {
+        "results": [
+          {
             "type": "return",
             "value": undefined,
           },
         ],
       },
-      "location": Object {
+      "location": {
         "hash": "",
         "pathname": "/activity/tasks/1234",
       },
@@ -30,7 +30,7 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
 >
   <PreviewNavigation
     collection={
-      Array [
+      [
         "a",
         "b",
         "c",
@@ -45,24 +45,24 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
     }
     currentIndex={0}
     history={
-      Object {
-        "entries": Array [
-          Object {},
+      {
+        "entries": [
+          {},
         ],
         "listen": [MockFunction] {
-          "calls": Array [
-            Array [
+          "calls": [
+            [
               [Function],
             ],
           ],
-          "results": Array [
-            Object {
+          "results": [
+            {
               "type": "return",
               "value": undefined,
             },
           ],
         },
-        "location": Object {
+        "location": {
           "hash": "",
           "pathname": "/activity/tasks/1234",
         },
@@ -70,18 +70,18 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
       }
     }
     intl={
-      Object {
+      {
         "formatMessage": [MockFunction] {
-          "calls": Array [
-            Array [
-              Object {
+          "calls": [
+            [
+              {
                 "defaultMessage": "Next File",
                 "id": "be.nextFile",
               },
             ],
           ],
-          "results": Array [
-            Object {
+          "results": [
+            {
               "type": "return",
               "value": undefined,
             },
@@ -94,7 +94,7 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
   >
     <Route
       path={
-        Array [
+        [
           "/:activeTab/:deeplink",
           "/",
         ]
@@ -151,24 +151,24 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
 exports[`elements/content-preview/PreviewNavigation render() should render correctly with a filled collection 2`] = `
 <Router
   history={
-    Object {
-      "entries": Array [
-        Object {},
+    {
+      "entries": [
+        {},
       ],
       "listen": [MockFunction] {
-        "calls": Array [
-          Array [
+        "calls": [
+          [
             [Function],
           ],
         ],
-        "results": Array [
-          Object {
+        "results": [
+          {
             "type": "return",
             "value": undefined,
           },
         ],
       },
-      "location": Object {
+      "location": {
         "hash": "",
         "pathname": "/activity/tasks/1234",
       },
@@ -178,7 +178,7 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
 >
   <PreviewNavigation
     collection={
-      Array [
+      [
         "a",
         "b",
         "c",
@@ -193,24 +193,24 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
     }
     currentIndex={1}
     history={
-      Object {
-        "entries": Array [
-          Object {},
+      {
+        "entries": [
+          {},
         ],
         "listen": [MockFunction] {
-          "calls": Array [
-            Array [
+          "calls": [
+            [
               [Function],
             ],
           ],
-          "results": Array [
-            Object {
+          "results": [
+            {
               "type": "return",
               "value": undefined,
             },
           ],
         },
-        "location": Object {
+        "location": {
           "hash": "",
           "pathname": "/activity/tasks/1234",
         },
@@ -218,28 +218,28 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
       }
     }
     intl={
-      Object {
+      {
         "formatMessage": [MockFunction] {
-          "calls": Array [
-            Array [
-              Object {
+          "calls": [
+            [
+              {
                 "defaultMessage": "Previous File",
                 "id": "be.previousFile",
               },
             ],
-            Array [
-              Object {
+            [
+              {
                 "defaultMessage": "Next File",
                 "id": "be.nextFile",
               },
             ],
           ],
-          "results": Array [
-            Object {
+          "results": [
+            {
               "type": "return",
               "value": undefined,
             },
-            Object {
+            {
               "type": "return",
               "value": undefined,
             },
@@ -252,7 +252,7 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
   >
     <Route
       path={
-        Array [
+        [
           "/:activeTab/:deeplink",
           "/",
         ]
@@ -352,24 +352,24 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
 exports[`elements/content-preview/PreviewNavigation render() should render correctly with a filled collection 3`] = `
 <Router
   history={
-    Object {
-      "entries": Array [
-        Object {},
+    {
+      "entries": [
+        {},
       ],
       "listen": [MockFunction] {
-        "calls": Array [
-          Array [
+        "calls": [
+          [
             [Function],
           ],
         ],
-        "results": Array [
-          Object {
+        "results": [
+          {
             "type": "return",
             "value": undefined,
           },
         ],
       },
-      "location": Object {
+      "location": {
         "hash": "",
         "pathname": "/activity/tasks/1234",
       },
@@ -379,7 +379,7 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
 >
   <PreviewNavigation
     collection={
-      Array [
+      [
         "a",
         "b",
         "c",
@@ -394,24 +394,24 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
     }
     currentIndex={9}
     history={
-      Object {
-        "entries": Array [
-          Object {},
+      {
+        "entries": [
+          {},
         ],
         "listen": [MockFunction] {
-          "calls": Array [
-            Array [
+          "calls": [
+            [
               [Function],
             ],
           ],
-          "results": Array [
-            Object {
+          "results": [
+            {
               "type": "return",
               "value": undefined,
             },
           ],
         },
-        "location": Object {
+        "location": {
           "hash": "",
           "pathname": "/activity/tasks/1234",
         },
@@ -419,18 +419,18 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
       }
     }
     intl={
-      Object {
+      {
         "formatMessage": [MockFunction] {
-          "calls": Array [
-            Array [
-              Object {
+          "calls": [
+            [
+              {
                 "defaultMessage": "Previous File",
                 "id": "be.previousFile",
               },
             ],
           ],
-          "results": Array [
-            Object {
+          "results": [
+            {
               "type": "return",
               "value": undefined,
             },
@@ -443,7 +443,7 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
   >
     <Route
       path={
-        Array [
+        [
           "/:activeTab/:deeplink",
           "/",
         ]
@@ -500,24 +500,24 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
 exports[`elements/content-preview/PreviewNavigation render() should render correctly with an empty collection 1`] = `
 <Router
   history={
-    Object {
-      "entries": Array [
-        Object {},
+    {
+      "entries": [
+        {},
       ],
       "listen": [MockFunction] {
-        "calls": Array [
-          Array [
+        "calls": [
+          [
             [Function],
           ],
         ],
-        "results": Array [
-          Object {
+        "results": [
+          {
             "type": "return",
             "value": undefined,
           },
         ],
       },
-      "location": Object {
+      "location": {
         "hash": "",
         "pathname": "/activity/tasks/1234",
       },
@@ -526,27 +526,27 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
   }
 >
   <PreviewNavigation
-    collection={Array []}
+    collection={[]}
     currentIndex={0}
     history={
-      Object {
-        "entries": Array [
-          Object {},
+      {
+        "entries": [
+          {},
         ],
         "listen": [MockFunction] {
-          "calls": Array [
-            Array [
+          "calls": [
+            [
               [Function],
             ],
           ],
-          "results": Array [
-            Object {
+          "results": [
+            {
               "type": "return",
               "value": undefined,
             },
           ],
         },
-        "location": Object {
+        "location": {
           "hash": "",
           "pathname": "/activity/tasks/1234",
         },
@@ -554,7 +554,7 @@ exports[`elements/content-preview/PreviewNavigation render() should render corre
       }
     }
     intl={
-      Object {
+      {
         "formatMessage": [MockFunction],
       }
     }

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

@@ -10,6 +10,8 @@ import type { InjectIntlProvidedProps } from 'react-intl';
 import classNames from 'classnames';
 import getProp from 'lodash/get';
 import AsyncLoad from '../../common/async-load';
+// $FlowFixMe typescript component
+import ContentAnswers from '../../../features/content-answers';
 import FileInfo from './FileInfo';
 import IconClose from '../../../icons/general/IconClose';
 import IconDownload from '../../../icons/general/IconDownloadSolid';
@@ -28,6 +30,7 @@ type Props = {
     canAnnotate: boolean,
     canDownload: boolean,
     canPrint?: boolean,
+    contentAnswersProps?: ContentAnswersProps,
     contentOpenWithProps?: ContentOpenWithProps,
     file?: BoxItem,
     logoUrl?: string,
@@ -46,6 +49,7 @@ const PreviewHeader = ({
     canAnnotate,
     canDownload,
     canPrint,
+    contentAnswersProps = {},
     contentOpenWithProps = {},
     file,
     intl,
@@ -57,6 +61,7 @@ const PreviewHeader = ({
     token,
 }: Props) => {
     const fileId = file && file.id;
+    const shouldRenderAnswers = fileId && contentAnswersProps.show;
     const shouldRenderOpenWith = fileId && contentOpenWithProps.show;
     const currentVersionId = getProp(file, 'file_version.id');
     const selectedVersionId = getProp(selectedVersion, 'id', currentVersionId);
@@ -95,6 +100,7 @@ const PreviewHeader = ({
                                     {...contentOpenWithProps}
                                 />
                             )}
+                            {shouldRenderAnswers && <ContentAnswers file={file} />}
                             {canAnnotate && (
                                 <>
                                     <PlainButton

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+
+import ContentAnswers from '../../../../features/content-answers';
 import PreviewHeader from '..';
 
 describe('elements/content-preview/preview-header/PreviewHeader', () => {
@@ -19,6 +21,29 @@ describe('elements/content-preview/preview-header/PreviewHeader', () => {
         expect(wrapper.exists('FileInfo')).toBe(true);
     });
 
+    test.each`
+        file             | show     | expected
+        ${{ id: '123' }} | ${true}  | ${true}
+        ${{ id: '123' }} | ${false} | ${false}
+        ${{}}            | ${true}  | ${false}
+        ${{}}            | ${false} | ${false}
+    `('should render ContentAnswers correctly with given file and show prop', ({ file, show, expected }) => {
+        const contentAnswersProps = { show };
+        const wrapper = getWrapper({ contentAnswersProps, file });
+
+        expect(wrapper.exists(ContentAnswers)).toBe(expected);
+    });
+
+    it('should render ContentAnswers correctly and provided the correct props', () => {
+        const file = { extension: 'doc', file_version: { id: '1' }, id: '123' };
+        const contentAnswersProps = { show: true };
+        const wrapper = getWrapper({
+            contentAnswersProps,
+            file,
+        });
+        expect(wrapper.find(ContentAnswers).prop('file')).toBe(file);
+    });
+
     test.each([
         [true, true],
         [false, false],

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

@@ -1,96 +1,66 @@
 // @flow
 import * as React from 'react';
-import { text } from '@storybook/addon-knobs';
-import { IntlProvider } from 'react-intl';
 import ContentPreview from '../ContentPreview';
-import notes from './ContentPreview.notes.md';
 
-export const Preview = () => {
-    const fileId = text('File ID', global.FILE_ID);
-    const token = text('Access Token', global.TOKEN);
+export const basic = {};
 
-    return (
-        <IntlProvider locale="en">
-            <ContentPreview
-                features={global.FEATURES}
-                fileId={fileId}
-                hasHeader
-                key={`${fileId}-${token}`}
-                token={token}
-            />
-        </IntlProvider>
-    );
+export const withAnnotations = {
+    args: {
+        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,
+        },
+        showAnnotations: true,
+    },
 };
 
-export const PreviewWithAnnotations = () => {
-    const fileId = text('File ID', global.FILE_ID);
-    const token = text('Access Token', global.TOKEN);
-
-    return (
-        <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,
-                }}
-                features={global.FEATURES}
-                fileId={fileId}
-                hasHeader
-                key={`${fileId}-${token}`}
-                showAnnotations
-                token={token}
-            />
-        </IntlProvider>
-    );
+export const withSidebar = {
+    args: {
+        contentSidebarProps: {
+            detailsSidebarProps: {
+                hasAccessStats: true,
+                hasClassification: true,
+                hasNotices: true,
+                hasProperties: true,
+                hasRetentionPolicy: true,
+                hasVersions: true,
+            },
+            features: global.FEATURE_FLAGS,
+            hasActivityFeed: true,
+            hasMetadata: true,
+            hasSkills: true,
+            hasVersions: true,
+        },
+    },
 };
 
-export const PreviewWithSidebar = () => {
-    const fileId = text('File ID', global.FILE_ID);
-    const token = text('Access Token', global.TOKEN);
-
-    return (
-        <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,
-                }}
-                features={global.FEATURES}
-                fileId={fileId}
-                hasHeader
-                key={`${fileId}-${token}`}
-                token={token}
-            />
-        </IntlProvider>
-    );
+export const withBoxAI = {
+    args: {
+        contentAnswersProps: {
+            show: true,
+        },
+    },
 };
 
 export default {
-    title: 'Elements|ContentPreview',
+    title: 'Elements/ContentPreview',
     component: ContentPreview,
-    parameters: {
-        notes,
+    render: ({ ...args }: any) => <ContentPreview key={`${args.fileId}-${args.token}`} {...args} />,
+    args: {
+        features: global.FEATURE_FLAGS,
+        fileId: global.FILE_ID,
+        hasHeader: true,
+        token: global.TOKEN,
     },
 };