feat(content-answers): add prop to control displaying contentAnswers (#…

…3399)

* feat(content-answers): add prop to control displaying contentAnswers

* feat(content-answers): resolve lint issue

* feat(content-answers): modified the tests

---------

Co-authored-by: Jerry Jiang <tjiang@box.com>
Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

flow-typed/box-ui-elements.js

@@ -12,6 +12,7 @@ import type FileAPI from '../src/api/File';
 import type WebLinkAPI from '../src/api/WebLink';
 import type MultiputUploadAPI from '../src/api/uploads/MultiputUpload';
 import type PlainUploadAPI from '../src/api/uploads/PlainUpload';
+import type { ContentAnswersProps } from '../src/features/content-answers';
 import type { ContentSidebarProps } from '../src/elements/content-sidebar';
 import type { ContentOpenWithProps } from '../src/elements/content-open-with';
 import type { ContentPreviewProps } from '../src/elements/content-preview';

src/elements/content-preview/ContentPreview.js

@@ -89,6 +89,7 @@ type Props = {
     canDownload?: boolean,
     className: string,
     collection: Array<string | BoxItem>,
+    contentAnswersProps: ContentAnswersProps,
     contentOpenWithProps: ContentOpenWithProps,
     contentSidebarProps: ContentSidebarProps,
     enableThumbnailsSidebar: boolean,
@@ -229,6 +230,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
         canDownload: true,
         className: '',
         collection: [],
+        contentAnswersProps: {},
         contentOpenWithProps: {},
         contentSidebarProps: {},
         enableThumbnailsSidebar: false,
@@ -1261,8 +1263,9 @@ class ContentPreview extends React.PureComponent<Props, State> {
             language,
             messages,
             className,
-            contentSidebarProps,
+            contentAnswersProps,
             contentOpenWithProps,
+            contentSidebarProps,
             hasHeader,
             history,
             isLarge,
@@ -1320,6 +1323,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
                             canDownload={this.canDownload()}
                             canPrint={canPrint}
                             onDownload={this.download}
+                            contentAnswersProps={contentAnswersProps}
                             contentOpenWithProps={contentOpenWithProps}
                             canAnnotate={this.canAnnotate()}
                             selectedVersion={selectedVersion}

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 />}
                             {canAnnotate && (
                                 <>
                                     <PlainButton

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,19 @@ 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 correctly with given file and show prop', ({ file, show, expected }) => {
+        const contentAnswersProps = { show };
+        const wrapper = getWrapper({ contentAnswersProps, file });
+
+        expect(wrapper.exists(ContentAnswers)).toBe(expected);
+    });
+
     test.each([
         [true, true],
         [false, false],

src/features/content-answers/ContentAnswers.tsx

@@ -2,6 +2,10 @@ import React, { useState } from 'react';
 
 import ContentAnswersOpenButton from './ContentAnswersOpenButton';
 
+type ExternalProps = {
+    show?: boolean;
+};
+
 const ContentAnswers = () => {
     const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -16,4 +20,5 @@ const ContentAnswers = () => {
     );
 };
 
+export type ContentAnswersProps = ExternalProps;
 export default ContentAnswers;

src/features/content-answers/index.ts

@@ -0,0 +1 @@
+export { default } from './ContentAnswers';