feat(content-answers): Avatar (#3418)

* feat(content-answers): Avatar

* feat(content-answers): feedback

---------

Co-authored-by: TaoJiang98 <[email protected]>

Author: greg-in-a-box

src/elements/content-preview/ContentPreview.js

@@ -35,6 +35,7 @@ import { withFeatureProvider } from '../common/feature-checking';
 import { EVENT_JS_READY } from '../common/logger/constants';
 import ReloadNotification from './ReloadNotification';
 import API from '../../api';
+import APIContext from '../common/api-context';
 import PreviewHeader from './preview-header';
 import PreviewMask from './PreviewMask';
 import PreviewNavigation from './PreviewNavigation';
@@ -1312,64 +1313,77 @@ class ContentPreview extends React.PureComponent<Props, State> {
         /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
         return (
             <Internationalize language={language} messages={messages}>
-                <div id={this.id} className={styleClassName} ref={measureRef} onKeyDown={this.onKeyDown} tabIndex={0}>
-                    {hasHeader && (
-                        <PreviewHeader
-                            file={file}
-                            logoUrl={logoUrl}
-                            token={token}
-                            onClose={onHeaderClose}
-                            onPrint={this.print}
-                            canDownload={this.canDownload()}
-                            canPrint={canPrint}
-                            onDownload={this.download}
-                            contentAnswersProps={contentAnswersProps}
-                            contentOpenWithProps={contentOpenWithProps}
-                            canAnnotate={this.canAnnotate()}
-                            selectedVersion={selectedVersion}
-                        />
-                    )}
-                    <div className="bcpr-body">
-                        <div className="bcpr-container" onMouseMove={this.onMouseMove} ref={this.containerRef}>
+                <APIContext.Provider value={(this.api: API)}>
+                    <div
+                        id={this.id}
+                        className={styleClassName}
+                        ref={measureRef}
+                        onKeyDown={this.onKeyDown}
+                        tabIndex={0}
+                    >
+                        {hasHeader && (
+                            <PreviewHeader
+                                file={file}
+                                logoUrl={logoUrl}
+                                token={token}
+                                onClose={onHeaderClose}
+                                onPrint={this.print}
+                                canDownload={this.canDownload()}
+                                canPrint={canPrint}
+                                onDownload={this.download}
+                                contentAnswersProps={contentAnswersProps}
+                                contentOpenWithProps={contentOpenWithProps}
+                                canAnnotate={this.canAnnotate()}
+                                selectedVersion={selectedVersion}
+                            />
+                        )}
+                        <div className="bcpr-body">
+                            <div className="bcpr-container" onMouseMove={this.onMouseMove} ref={this.containerRef}>
+                                {file && (
+                                    <Measure bounds onResize={this.onResize}>
+                                        {({ measureRef: previewRef }) => (
+                                            <div ref={previewRef} className="bcpr-content" />
+                                        )}
+                                    </Measure>
+                                )}
+                                <PreviewMask errorCode={errorCode} extension={currentExtension} isLoading={isLoading} />
+                                <PreviewNavigation
+                                    collection={collection}
+                                    currentIndex={this.getFileIndex()}
+                                    onNavigateLeft={this.navigateLeft}
+                                    onNavigateRight={this.navigateRight}
+                                />
+                            </div>
                             {file && (
-                                <Measure bounds onResize={this.onResize}>
-                                    {({ measureRef: previewRef }) => <div ref={previewRef} className="bcpr-content" />}
-                                </Measure>
+                                <LoadableSidebar
+                                    {...contentSidebarProps}
+                                    apiHost={apiHost}
+                                    token={token}
+                                    cache={this.api.getCache()}
+                                    fileId={currentFileId}
+                                    getPreview={this.getPreview}
+                                    getViewer={this.getViewer}
+                                    history={history}
+                                    isDefaultOpen={isLarge || isVeryLarge}
+                                    language={language}
+                                    ref={this.contentSidebar}
+                                    sharedLink={sharedLink}
+                                    sharedLinkPassword={sharedLinkPassword}
+                                    requestInterceptor={requestInterceptor}
+                                    responseInterceptor={responseInterceptor}
+                                    onAnnotationSelect={this.handleAnnotationSelect}
+                                    onVersionChange={this.onVersionChange}
+                                />
                             )}
-                            <PreviewMask errorCode={errorCode} extension={currentExtension} isLoading={isLoading} />
-                            <PreviewNavigation
-                                collection={collection}
-                                currentIndex={this.getFileIndex()}
-                                onNavigateLeft={this.navigateLeft}
-                                onNavigateRight={this.navigateRight}
-                            />
                         </div>
-                        {file && (
-                            <LoadableSidebar
-                                {...contentSidebarProps}
-                                apiHost={apiHost}
-                                token={token}
-                                cache={this.api.getCache()}
-                                fileId={currentFileId}
-                                getPreview={this.getPreview}
-                                getViewer={this.getViewer}
-                                history={history}
-                                isDefaultOpen={isLarge || isVeryLarge}
-                                language={language}
-                                ref={this.contentSidebar}
-                                sharedLink={sharedLink}
-                                sharedLinkPassword={sharedLinkPassword}
-                                requestInterceptor={requestInterceptor}
-                                responseInterceptor={responseInterceptor}
-                                onAnnotationSelect={this.handleAnnotationSelect}
-                                onVersionChange={this.onVersionChange}
+                        {isReloadNotificationVisible && (
+                            <ReloadNotification
+                                onClose={this.closeReloadNotification}
+                                onClick={this.loadFileFromStage}
                             />
                         )}
                     </div>
-                    {isReloadNotificationVisible && (
-                        <ReloadNotification onClose={this.closeReloadNotification} onClick={this.loadFileFromStage} />
-                    )}
-                </div>
+                </APIContext.Provider>
             </Internationalize>
         );
         /* eslint-enable jsx-a11y/no-static-element-interactions */

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

@@ -63,7 +63,6 @@ const PreviewHeader = ({
     const fileId = file && file.id;
     const shouldRenderAnswers = fileId && contentAnswersProps.show;
     const shouldRenderOpenWith = fileId && contentOpenWithProps.show;
-    const currentExtension = getProp(file, 'extension');
     const currentVersionId = getProp(file, 'file_version.id');
     const selectedVersionId = getProp(selectedVersion, 'id', currentVersionId);
     const isPreviewingCurrentVersion = currentVersionId === selectedVersionId;
@@ -101,13 +100,7 @@ const PreviewHeader = ({
                                     {...contentOpenWithProps}
                                 />
                             )}
-                            {shouldRenderAnswers && (
-                                <ContentAnswers
-                                    fileExtension={currentExtension}
-                                    fileId={fileId}
-                                    versionId={selectedVersionId}
-                                />
-                            )}
+                            {shouldRenderAnswers && <ContentAnswers file={file} />}
                             {canAnnotate && (
                                 <>
                                     <PlainButton

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

@@ -35,14 +35,13 @@ describe('elements/content-preview/preview-header/PreviewHeader', () => {
     });
 
     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: { extension: 'doc', file_version: { id: '1' }, id: '123' },
+            file,
         });
-        expect(wrapper.find(ContentAnswers).prop('fileExtension')).toBe('doc');
-        expect(wrapper.find(ContentAnswers).prop('fileId')).toBe('123');
-        expect(wrapper.find(ContentAnswers).prop('versionId')).toBe('1');
+        expect(wrapper.find(ContentAnswers).prop('file')).toBe(file);
     });
 
     test.each([

src/features/content-answers/ContentAnswers.tsx

@@ -1,19 +1,21 @@
 import React, { useState } from 'react';
 
+import getProp from 'lodash/get';
 import ContentAnswersModal from './ContentAnswersModal';
 import ContentAnswersOpenButton from './ContentAnswersOpenButton';
+// @ts-ignore: no ts definition
+// eslint-disable-next-line import/named
+import { BoxItem } from '../../common/types/core';
 
 type ExternalProps = {
     show?: boolean;
 };
 
 type Props = {
-    fileExtension: string;
-    fileId: string;
-    versionId: string;
+    file: BoxItem;
 };
 
-const ContentAnswers = ({ fileExtension }: Props) => {
+const ContentAnswers = ({ file }: Props) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
 
     const handleClick = () => {
@@ -24,10 +26,20 @@ const ContentAnswers = ({ fileExtension }: Props) => {
         setIsModalOpen(false);
     };
 
+    const currentExtension = getProp(file, 'extension');
     return (
         <div className="bdl-ContentAnswers">
-            <ContentAnswersOpenButton fileExtension={fileExtension} onClick={handleClick} />
-            <ContentAnswersModal isOpen={isModalOpen} onRequestClose={handleClose} />
+            <ContentAnswersOpenButton
+                data-testid="content-answers-open-button"
+                fileExtension={currentExtension}
+                onClick={handleClick}
+            />
+            <ContentAnswersModal
+                data-testid="content-answers-modal"
+                file={file}
+                isOpen={isModalOpen}
+                onRequestClose={handleClose}
+            />
         </div>
     );
 };

src/features/content-answers/ContentAnswersModal.tsx

@@ -6,17 +6,21 @@ import ContentAnswersModalContent from './ContentAnswersModalContent';
 import ContentAnswersModalFooter from './ContentAnswersModalFooter';
 // @ts-ignore flow import
 import Modal from '../../components/modal/Modal';
+// @ts-ignore: no ts definition
+// eslint-disable-next-line import/named
+import { BoxItem } from '../../common/types/core';
 
 import messages from './messages';
 
 import './ContentAnswersModal.scss';
 
 type Props = {
+    file: BoxItem;
     isOpen: boolean;
     onRequestClose: () => void;
 };
 
-const ContentAnswersModal = ({ isOpen, onRequestClose }: Props) => {
+const ContentAnswersModal = ({ file, isOpen, onRequestClose }: Props) => {
     return (
         <Modal
             className="bdl-ContentAnswersModal"
@@ -36,7 +40,7 @@ const ContentAnswersModal = ({ isOpen, onRequestClose }: Props) => {
             }
         >
             <ContentAnswersModalContent />
-            <ContentAnswersModalFooter />
+            <ContentAnswersModalFooter data-testid="content-answers-modal-footer" file={file} />
         </Modal>
     );
 };

src/features/content-answers/ContentAnswersModalFooter.tsx

@@ -6,17 +6,25 @@ import PrimaryButton from '../../components/primary-button';
 // @ts-ignore flow import
 import TextArea from '../../components/text-area';
 import { TEXT_AREA } from './constants';
+import withCurrentUser from '../../elements/common/current-user';
+
+// @ts-ignore: no ts definition
+// eslint-disable-next-line import/named
+import { BoxItem, User } from '../../../common/types/core';
 
 import './ContentAnswersModalFooter.scss';
 
 import messages from './messages';
 
 type Props = {
+    file: BoxItem;
+    currentUser?: User;
     intl: IntlShape;
 };
 
-const ContentAnswersModalFooter = ({ intl }: Props) => {
+const ContentAnswersModalFooter = ({ currentUser, intl }: Props) => {
     const { formatMessage } = intl;
+    const { id, name } = currentUser || {};
     const [inputMessage, setInputMessage] = useState('');
     const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);
     const [hasMaxCharacterError, setHasMaxCharacterError] = useState(false);
@@ -34,7 +42,7 @@ const ContentAnswersModalFooter = ({ intl }: Props) => {
     return (
         <div className="bdl-ContentAnswersModalFooter">
             <div className="bdl-ContentAnswersModalFooter-avatar">
-                <Avatar />
+                <Avatar id={id} name={name} />
             </div>
             <TextArea
                 data-testid="content-answers-question-input"
@@ -62,4 +70,4 @@ const ContentAnswersModalFooter = ({ intl }: Props) => {
     );
 };
 
-export default injectIntl(ContentAnswersModalFooter);
+export default withCurrentUser(injectIntl(ContentAnswersModalFooter));

src/features/content-answers/__tests__/ContentAnswers.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import ContentAnswers from '../ContentAnswers';
+
+jest.mock('../ContentAnswersModalFooter', () => () => <div />);
+
+describe('features/content-answers', () => {
+    const file = { extension: 'doc' };
+    const renderComponent = (props?: {}) => render(<ContentAnswers file={file} {...props} />);
+
+    test('should render the content answers', () => {
+        renderComponent();
+
+        const button = screen.getByTestId('content-answers-open-button');
+        expect(button).toBeInTheDocument();
+        fireEvent.click(button);
+        const modal = screen.getByTestId('content-answers-modal');
+        expect(modal).toBeInTheDocument();
+    });
+});

src/features/content-answers/__tests__/ContentAnswersModal.test.tsx

@@ -3,9 +3,12 @@ import { render, screen } from '@testing-library/react';
 
 import ContentAnswersModal from '../ContentAnswersModal';
 
+jest.mock('../ContentAnswersModalFooter', () => () => <div />);
+
 describe('features/content-answers/ContentAnswersModal', () => {
+    const file = { extension: 'doc' };
     const renderComponent = (props?: {}) =>
-        render(<ContentAnswersModal isOpen onRequestClose={jest.fn()} {...props} />);
+        render(<ContentAnswersModal file={file} isOpen onRequestClose={jest.fn()} {...props} />);
 
     test('should render the header icon', () => {
         renderComponent();

src/features/content-answers/__tests__/ContentAnswersModalFooter.test.tsx

@@ -5,11 +5,28 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import localize from '../../../../test/support/i18n';
 import ContentAnswersModalFooter from '../ContentAnswersModalFooter';
 import { MOCK_LONG_PROMPT, TEXT_AREA } from '../constants';
+// @ts-ignore: no ts definition
+// eslint-disable-next-line import/named
+import APIContext from '../../../elements/common/api-context';
 
 import messages from '../messages';
 
 describe('features/content-answers/ContentAnswersModalFooter', () => {
-    const renderComponent = (props?: {}) => render(<ContentAnswersModalFooter {...props} />);
+    const usersAPI = {
+        getUser: (id: string, success: Function) => {
+            success({ id: '123', name: 'Greg Wong' });
+        },
+    };
+    const api = {
+        getUsersAPI: () => usersAPI,
+    };
+    const file = { id: '123' };
+    const renderComponent = (props?: {}) =>
+        render(
+            <APIContext.Provider value={api}>
+                <ContentAnswersModalFooter file={file} {...props} />
+            </APIContext.Provider>,
+        );
 
     test('should disable submit button if input is empty', () => {
         renderComponent();
@@ -37,4 +54,10 @@ describe('features/content-answers/ContentAnswersModalFooter', () => {
         );
         expect(error.length).not.toBe(0);
     });
+
+    test('should render avatar', () => {
+        renderComponent();
+        const initials = screen.getByText('GW');
+        expect(initials).toBeInTheDocument();
+    });
 });