feat(annotations): update mode if necessary for experiences (#1375)

* feat(annotations): update mode if necessary for experiences * feat(annotations): update mode if necessary for experiences * feat(annotations): update mode if necessary for experiences * feat(annotations): update mode if necessary for experiences * feat(annotations): update mode if necessary for experiences * feat(annotations): update mode if necessary for experiences * feat(annotations): update mode if necessary for experiences Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
box · May 13, 2021 · a3eb40c · a3eb40c
1 parent 8b2044d
commit a3eb40c
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 6 deletions.
diff --git a/src/lib/Preview.js b/src/lib/Preview.js
@@ -980,6 +980,9 @@ class Preview extends EventEmitter {
         // have preview permissions (any collaboration role except for `Uploader`).
         this.options.downloadWM = !!options.downloadWM;
 
+        // Object with ftux experience data that can determine whether specific experiences can show
+        this.options.experiences = options.experiences || {};
+
         // Options that are applicable to certain file ids
         this.options.fileOptions = options.fileOptions || {};
 

diff --git a/src/lib/viewers/controls/annotations/AnnotationsTargetedTooltip.tsx b/src/lib/viewers/controls/annotations/AnnotationsTargetedTooltip.tsx
@@ -12,6 +12,7 @@ export type Props = React.PropsWithChildren<{
 function AnnotationsTargetedTooltip({ children, isEnabled = false }: Props): JSX.Element | null {
     const { experiences } = React.useContext(ExperiencesContext);
     const { setIsForced } = React.useContext(ControlsLayerContext);
+    const [shouldTargetAnnotationsTooltip, setShouldTargetAnnotationsTooltip] = React.useState(true);
     const [wasClosedByUser, setWasClosedByUser] = React.useState(false);
 
     const shouldTarget = !!(
@@ -28,7 +29,7 @@ function AnnotationsTargetedTooltip({ children, isEnabled = false }: Props): JSX
     return (
         <TargetedClickThroughTooltip
             className="bp-AnnotationsTooltip"
-            shouldTarget
+            shouldTarget={shouldTargetAnnotationsTooltip}
             showCloseButton
             text={
                 <div>
@@ -44,6 +45,10 @@ function AnnotationsTargetedTooltip({ children, isEnabled = false }: Props): JSX
                         experiences.tooltipFlowAnnotationsExperience.onClose();
                         setIsForced(false);
                     },
+                    onComplete: (): void => {
+                        experiences.tooltipFlowAnnotationsExperience.onComplete();
+                        setShouldTargetAnnotationsTooltip(false);
+                    },
                     onShow: (): void => {
                         experiences.tooltipFlowAnnotationsExperience.onShow();
 

diff --git a/src/lib/viewers/image/ImageBaseViewer.js b/src/lib/viewers/image/ImageBaseViewer.js
@@ -29,6 +29,7 @@ class ImageBaseViewer extends BaseViewer {
         this.handleMouseUp = this.handleMouseUp.bind(this);
         this.cancelDragEvent = this.cancelDragEvent.bind(this);
         this.finishLoading = this.finishLoading.bind(this);
+        this.isDiscoverabilityEnabled = this.isDiscoverabilityEnabled.bind(this);
 
         if (this.isMobile) {
             if (Browser.isIOS()) {
@@ -137,6 +138,19 @@ class ImageBaseViewer extends BaseViewer {
         this.emit('panstart');
     }
 
+    /**
+     * Determines whether discoverability is enabled
+     *
+     * @private
+     * @return {boolean} value of whether discoverability is enabled for given type
+     */
+    isDiscoverabilityEnabled() {
+        const { enableAnnotationsImageDiscoverability, experiences = {} } = this.options;
+        const canShow = Object.values(experiences).some(experience => experience.canShow);
+
+        return !canShow && !!enableAnnotationsImageDiscoverability;
+    }
+
     /**
      * Pan the image to the given x/y position
      *

diff --git a/src/lib/viewers/image/ImageViewer.js b/src/lib/viewers/image/ImageViewer.js
@@ -37,7 +37,7 @@ class ImageViewer extends ImageBaseViewer {
         this.updatePannability = this.updatePannability.bind(this);
 
         this.annotationControlsFSM = new AnnotationControlsFSM(
-            this.options.enableAnnotationsImageDiscoverability ? AnnotationState.REGION_TEMP : AnnotationState.NONE,
+            this.isDiscoverabilityEnabled() ? AnnotationState.REGION_TEMP : AnnotationState.NONE,
         );
 
         this.annotationControlsFSM.subscribe(this.applyCursorFtux);
@@ -54,7 +54,7 @@ class ImageViewer extends ImageBaseViewer {
      * @return {void}
      */
     destroy() {
-        if (this.options.enableAnnotationsImageDiscoverability) {
+        if (this.isDiscoverabilityEnabled()) {
             this.removeListener('zoom', this.handleZoomEvent);
         }
 
@@ -86,7 +86,7 @@ class ImageViewer extends ImageBaseViewer {
         const fileName = getProp(this.options, 'file.name');
         this.imageEl.setAttribute('alt', fileName);
 
-        if (this.options.enableAnnotationsImageDiscoverability) {
+        if (this.isDiscoverabilityEnabled()) {
             this.addListener('zoom', this.handleZoomEvent);
         }
 
@@ -189,7 +189,7 @@ class ImageViewer extends ImageBaseViewer {
 
     // Annotation overrides
     getInitialAnnotationMode() {
-        return this.options.enableAnnotationsImageDiscoverability ? AnnotationMode.REGION : AnnotationMode.NONE;
+        return this.isDiscoverabilityEnabled() ? AnnotationMode.REGION : AnnotationMode.NONE;
     }
 
     /**
@@ -576,7 +576,7 @@ class ImageViewer extends ImageBaseViewer {
         }
 
         const isDiscoverable = this.annotationControlsFSM.getState() === AnnotationState.REGION_TEMP;
-        const isUsingDiscoverability = this.options.enableAnnotationsImageDiscoverability && isDiscoverable;
+        const isUsingDiscoverability = this.isDiscoverabilityEnabled() && isDiscoverable;
 
         // For tracking purposes, set property to true when the annotation controls are in a state
         // in which the default discoverability experience is enabled

diff --git a/src/lib/viewers/image/__tests__/ImageViewer-test.js b/src/lib/viewers/image/__tests__/ImageViewer-test.js
@@ -895,4 +895,26 @@ describe('lib/viewers/image/ImageViewer', () => {
             expect(image.cache.set).toBeCalledWith(IMAGE_FTUX_CURSOR_SEEN_KEY, true, true);
         });
     });
+
+    describe('isDiscoverabilityEnabled()', () => {
+        test.each`
+            canShow  | enableAnnotationsImageDiscoverability | result
+            ${true}  | ${true}                               | ${false}
+            ${true}  | ${false}                              | ${false}
+            ${false} | ${true}                               | ${true}
+            ${false} | ${false}                              | ${false}
+        `(
+            'should return correct value for isDiscoverabilityEnabled',
+            ({ canShow, enableAnnotationsImageDiscoverability, result }) => {
+                image.options.experiences = {
+                    tooltipFlowAnnotationsExperience: {
+                        canShow,
+                    },
+                };
+                image.options.enableAnnotationsImageDiscoverability = enableAnnotationsImageDiscoverability;
+
+                expect(image.isDiscoverabilityEnabled()).toBe(result);
+            },
+        );
+    });
 });