feat(insights): Added support for Advanced Content Insights (#3116)

* feat(insights): Added support for Advanced Content Insights

* feat(insights): Added feedback from comments

* feat(insights): Changed class and var names

* feat(insights): Added feedback from comments

* feat(insights): Updated tests and Bar components

* feat(insights): Removed wrapper component around toggle

* feat(insights): Refactor component props

* feat(insights): Added feedback from comments

- Change ContentPreview test to make it more simple
- Removed the flowTypes from advanced content insights
- Fix an issue with reference object comparison instead of deep comparison

* feat(insights): refactor options

* feat(insights): change property name

* refactor(insights): Refactor conditional options on USM and ModalDialog

* refactor(insights): Address feddback from comments

- Change Variable name from isMainUSMSectionShown to hasExpandedSections and inverted boolean logic
- Modify onRequestClose on ModalDialog to follow the same approach we are using onRequestBack

Author: marcoartaviaq

i18n/en-US.properties

@@ -804,6 +804,12 @@ boxui.accessStats.accessStatsPreviews = Previews
 boxui.accessStats.accessStatsViewDetails = View Details
 # The label for the view category of access stats for box notes
 boxui.accessStats.accessStatsViews = Views
+# Description text about advanced content insights.
+boxui.advancedContentInsights.advancedContentInsightsDescription = Get actionable insights into how viewers are engaging with this content. Measure average time spent, page-by-page engagement, per person and per visit details. {helpLink}
+# Advanced Content Insights toggle title
+boxui.advancedContentInsights.advancedContentInsightsTitle = Advanced Insights
+# Text for a link that goes to an external page with more information about Advanced Content Insights
+boxui.advancedContentInsights.learnMore = Learn more.
 # Text for the beta badge
 boxui.badges.beta = BETA
 # Text for the trial badge
@@ -1134,6 +1140,8 @@ boxui.metadataInstanceFields.fieldSetDate = Set Date
 boxui.metadataInstanceFields.fieldSetValue = Set Value
 # Error message displayed if the template has an field type we don't recognize
 boxui.metadataInstanceFields.invalidMetadataFieldType = Invalid metadata field type!
+# Button to get back inside modal
+boxui.modalDialog.backModalText = Back
 # Button to close modal
 boxui.modalDialog.closeModalText = Close Modal
 # Text shown on button to close the modal used to create a new folder

src/components/modal/Modal.scss

@@ -82,6 +82,21 @@
     margin-top: 20px;
 }
 
+.modal-back-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: none;
+    border: 0;
+    transform: rotate(180deg);
+    cursor: pointer;
+}
+
+.modal-back-button + .modal-title {
+    margin-left: 12px;
+}
+
 .modal-close-button {
     position: absolute;
     top: 20px;

src/components/modal/ModalDialog.js

@@ -5,12 +5,18 @@ import omit from 'lodash/omit';
 import uniqueId from 'lodash/uniqueId';
 import { defineMessages, injectIntl } from 'react-intl';
 
+import IconBack from '../../icon/fill/Arrow16';
 import IconClose from '../../icon/fill/X16';
 
 const ALERT_TYPE = 'alert';
 const DIALOG_TYPE = 'dialog';
 
 const messages = defineMessages({
+    backModalText: {
+        defaultMessage: 'Back',
+        description: 'Button to get back inside modal',
+        id: 'boxui.modalDialog.backModalText',
+    },
     closeModalText: {
         defaultMessage: 'Close Modal',
         description: 'Button to close modal',
@@ -24,6 +30,7 @@ type Props = {
     closeButtonProps: Object,
     intl: Object,
     modalRef?: Function,
+    onRequestBack?: Function,
     onRequestClose?: Function,
     title?: React.Node,
     type?: 'alert' | 'dialog',
@@ -35,6 +42,18 @@ class ModalDialog extends React.Component<Props> {
         closeButtonProps: {},
     };
 
+    /**
+     * Handles clicking on the back button
+     * @param {SyntheticMouseEvent} event
+     * @return {void}
+     */
+    onBackButtonClick = (event: SyntheticMouseEvent<HTMLButtonElement>) => {
+        const { onRequestBack } = this.props;
+        if (onRequestBack) {
+            onRequestBack(event);
+        }
+    };
+
     /**
      * Handles clicking on the close button
      * @param {SyntheticMouseEvent} event
@@ -49,16 +68,33 @@ class ModalDialog extends React.Component<Props> {
 
     modalID: string = uniqueId('modal');
 
+    /**
+     * Renders a button if onRequestBack is passed in
+     * @return {ReactElement|null} - Returns the button, or null if the button shouldn't be rendered
+     */
+    renderBackButton() {
+        const { intl } = this.props;
+        const { formatMessage } = intl;
+        return (
+            <button
+                aria-label={formatMessage(messages.backModalText)}
+                className="modal-back-button"
+                data-testid="modal-back-button"
+                onClick={this.onBackButtonClick}
+                type="button"
+            >
+                <IconBack height={18} width={18} />
+            </button>
+        );
+    }
+
     /**
      * Renders a button if onRequestClose is passed in
      * @return {ReactElement|null} - Returns the button, or null if the button shouldn't be rendered
      */
     renderCloseButton() {
-        const { closeButtonProps, onRequestClose, intl } = this.props;
+        const { closeButtonProps, intl } = this.props;
         const { formatMessage } = intl;
-        if (!onRequestClose) {
-            return null;
-        }
 
         return (
             // eslint-disable-next-line react/button-has-type
@@ -97,6 +133,8 @@ class ModalDialog extends React.Component<Props> {
         const {
             className,
             modalRef,
+            onRequestBack,
+            onRequestClose,
             title,
             type,
             ...rest // Useful for resin tagging, and other misc tags such as a11y
@@ -114,11 +152,12 @@ class ModalDialog extends React.Component<Props> {
             <div ref={modalRef} className={classNames('modal-dialog', className)} {...divProps}>
                 <div className="modal-header-container">
                     <div className="modal-header">
+                        {onRequestBack && this.renderBackButton()}
                         <h2 className="modal-title" id={`${this.modalID}-label`}>
                             {title}
                         </h2>
                     </div>
-                    {this.renderCloseButton()}
+                    {onRequestClose && this.renderCloseButton()}
                 </div>
                 {this.renderContent()}
             </div>

src/components/modal/__tests__/ModalDialog.test.js

@@ -6,6 +6,7 @@ import { ModalDialogBase } from '../ModalDialog';
 const sandbox = sinon.sandbox.create();
 
 describe('components/modal/ModalDialog', () => {
+    let onRequestBack;
     let onRequestClose;
     let wrapper;
     let instance;
@@ -16,8 +17,14 @@ describe('components/modal/ModalDialog', () => {
             formatMessage: message => message.id,
         };
         onRequestClose = sinon.spy();
+        onRequestBack = sinon.spy();
         wrapper = shallow(
-            <ModalDialogBase intl={intlShape} onRequestClose={onRequestClose} title={title}>
+            <ModalDialogBase
+                intl={intlShape}
+                onRequestBack={onRequestBack}
+                onRequestClose={onRequestClose}
+                title={title}
+            >
                 children
             </ModalDialogBase>,
         );
@@ -68,4 +75,18 @@ describe('components/modal/ModalDialog', () => {
         wrapper.setProps({ onRequestClose: undefined });
         expect(wrapper.find('.modal-close-button').length).toBeFalsy();
     });
+
+    test('render back button when onRequestBack is defined', () => {
+        expect(wrapper.find('.modal-back-button').length).toBeTruthy();
+    });
+
+    test('should not render back button if onRequestBack is null', () => {
+        wrapper.setProps({ onRequestBack: null });
+        expect(wrapper.find('.modal-back-button').length).toBeFalsy();
+    });
+
+    test('should call onRequestBack when back button is clicked on', () => {
+        wrapper.find('.modal-back-button').simulate('click');
+        sinon.assert.calledOnce(onRequestBack);
+    });
 });

src/elements/content-preview/ContentPreview.js

@@ -7,14 +7,15 @@
 import 'regenerator-runtime/runtime';
 import * as React from 'react';
 import classNames from 'classnames';
-import uniqueid from 'lodash/uniqueId';
-import throttle from 'lodash/throttle';
 import cloneDeep from 'lodash/cloneDeep';
-import omit from 'lodash/omit';
-import getProp from 'lodash/get';
 import flow from 'lodash/flow';
+import getProp from 'lodash/get';
+import isEqual from 'lodash/isEqual';
 import noop from 'lodash/noop';
+import omit from 'lodash/omit';
 import setProp from 'lodash/set';
+import throttle from 'lodash/throttle';
+import uniqueid from 'lodash/uniqueId';
 import Measure from 'react-measure';
 import { withRouter } from 'react-router-dom';
 import type { ContextRouter } from 'react-router-dom';
@@ -75,6 +76,11 @@ type StartAt = {
 };
 
 type Props = {
+    advancedContentInsights: {
+        isActive: boolean,
+        ownerEId: number,
+        userId: number,
+    },
     apiHost: string,
     appHost: string,
     autoFocus: boolean,
@@ -100,6 +106,7 @@ type Props = {
     onAnnotator: Function,
     onAnnotatorEvent: Function,
     onClose?: Function,
+    onContentInsightsEventReport: Function,
     onDownload: Function,
     onLoad: Function,
     onNavigate: Function,
@@ -229,6 +236,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
         language: DEFAULT_LOCALE,
         onAnnotator: noop,
         onAnnotatorEvent: noop,
+        onContentInsightsEventReport: noop,
         onDownload: noop,
         onError: noop,
         onLoad: noop,
@@ -362,11 +370,16 @@ class ContentPreview extends React.PureComponent<Props, State> {
      * @return {void}
      */
     componentDidUpdate(prevProps: Props, prevState: State): void {
-        const { previewExperiences, token } = this.props;
-        const { previewExperiences: prevPreviewExperiences, token: prevToken } = prevProps;
+        const { advancedContentInsights, previewExperiences, token } = this.props;
+        const {
+            advancedContentInsights: prevContentInsightsOptions,
+            previewExperiences: prevPreviewExperiences,
+            token: prevToken,
+        } = prevProps;
         const { currentFileId } = this.state;
         const hasFileIdChanged = prevState.currentFileId !== currentFileId;
         const hasTokenChanged = prevToken !== token;
+        const haveContentInsightsChanged = !isEqual(prevContentInsightsOptions, advancedContentInsights);
         const haveExperiencesChanged = prevPreviewExperiences !== previewExperiences;
 
         if (hasFileIdChanged) {
@@ -384,6 +397,10 @@ class ContentPreview extends React.PureComponent<Props, State> {
         if (haveExperiencesChanged && this.preview && this.preview.updateExperiences) {
             this.preview.updateExperiences(previewExperiences);
         }
+
+        if (advancedContentInsights && haveContentInsightsChanged && this.preview?.updateContentInsightsOptions) {
+            this.preview.updateContentInsightsOptions(advancedContentInsights);
+        }
     }
 
     /**
@@ -750,11 +767,13 @@ class ContentPreview extends React.PureComponent<Props, State> {
      */
     loadPreview = async (): Promise<void> => {
         const {
+            advancedContentInsights,
             annotatorState: { activeAnnotationId } = {},
             enableThumbnailsSidebar,
             fileOptions,
             onAnnotatorEvent,
             onAnnotator,
+            onContentInsightsEventReport,
             previewExperiences,
             showAnnotationsControls,
             token: tokenOrTokenFunction,
@@ -789,6 +808,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
         }
 
         const previewOptions = {
+            advancedContentInsights,
             container: `#${this.id} .bcpr-content`,
             enableThumbnailsSidebar,
             fileOptions: fileOpts,
@@ -820,6 +840,9 @@ class ContentPreview extends React.PureComponent<Props, State> {
             ...previewOptions,
             ...omit(rest, Object.keys(previewOptions)),
         });
+        if (advancedContentInsights) {
+            this.preview.addListener('advanced_insights_report', onContentInsightsEventReport);
+        }
     };
 
     /**
@@ -1210,6 +1233,20 @@ class ContentPreview extends React.PureComponent<Props, State> {
         }
     }
 
+    /**
+     * Fetches a thumbnail for the page given
+     *
+     * @return {Promise|null} - promise resolves with the image HTMLElement or null if generation is in progress
+     */
+    getThumbnail = (pageNumber: ?number): Promise<HTMLElement> | null => {
+        const preview = this.getPreview();
+        if (preview && preview.viewer) {
+            return preview.viewer.getThumbnail(pageNumber);
+        }
+
+        return null;
+    };
+
     /**
      * Renders the file preview
      *