fix(video-annotations): sidebar button fix to not propagate mousedown event

src/components/sidebar-toggle-button/SidebarToggleButton.js

@@ -48,14 +48,28 @@ const SidebarToggleButton = ({
         return isOpen ? <IconHide height={16} width={16} /> : <IconShow height={16} width={16} />;
     };
 
+    // Adding this to stop the mousedown event from being propagated up to box-annotations as
+    // that will cause the active annotation to no longer be active which means that it will not be displayed.
+    // This  causes video annotations not to work properly.
+    const mouseDownHandler = (event: SyntheticMouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+    };
+
     if (isPreviewModernizationEnabled) {
         const tooltipPositionModernized = direction === DIRECTION_LEFT ? DIRECTION_RIGHT : DIRECTION_LEFT;
 
         return (
             <BPTooltip content={intlText} side={tooltipPositionModernized}>
                 {/* Workaround to attach BP tooltip to legacy button, remove span when buttons are migrated to BP */}
-                <span>
-                    <PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}>
+                <span onMouseDown={mouseDownHandler} role="presentation">
+                    <PlainButton
+                        aria-label={intlText}
+                        className={classes}
+                        onClick={onClick}
+                        onMouseDown={mouseDownHandler}
+                        type="button"
+                        {...rest}
+                    >
                         {renderButton()}
                     </PlainButton>
                 </span>
@@ -64,7 +78,14 @@ const SidebarToggleButton = ({
     }
     return (
         <Tooltip position={tooltipPosition} text={intlText}>
-            <PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}>
+            <PlainButton
+                aria-label={intlText}
+                className={classes}
+                onClick={onClick}
+                onMouseDown={mouseDownHandler}
+                type="button"
+                {...rest}
+            >
                 {renderButton()}
             </PlainButton>
         </Tooltip>

src/components/sidebar-toggle-button/__tests__/SidebarToggleButton.test.js

@@ -1,35 +1,75 @@
 import * as React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
 
+import { render } from '../../../test-utils/testing-library';
 import SidebarToggleButton from '..';
 
 describe('components/sidebar-toggle-button/SidebarToggleButton', () => {
-    test('should render correctly as open', () => {
-        const wrapper = mount(<SidebarToggleButton isOpen />);
+    test.each`
+        isOpen   | direction
+        ${true}  | ${'left'}
+        ${false} | ${'left'}
+        ${true}  | ${'right'}
+        ${false} | ${'right'}
+    `(
+        'should render correct button correctly when open is $isOpen and direction is $direction and isPreviewModernizationEnabled is false',
+        ({ isOpen, direction }) => {
+            render(<SidebarToggleButton isOpen={isOpen} direction={direction} />, {
+                wrapperProps: { features: { previewModernization: { enabled: false } } },
+            });
 
-        expect(wrapper).toMatchSnapshot();
-    });
+            const button = screen.getByRole('button');
+            let iconClassName = '';
+            let iconNotDisplayedClassName = '';
+            if (direction === 'left') {
+                iconClassName = isOpen ? 'icon-show' : 'icon-hide';
+                iconNotDisplayedClassName = isOpen ? 'icon-hide' : 'icon-show';
+            } else {
+                iconClassName = isOpen ? 'icon-hide' : 'icon-show';
+                iconNotDisplayedClassName = isOpen ? 'icon-show' : 'icon-hide';
+            }
+            const icon = button.querySelector(`.${iconClassName}`);
+            const iconNotDisplayed = button.querySelector(`.${iconNotDisplayedClassName}`);
+            expect(icon).toBeInTheDocument();
+            expect(iconNotDisplayed).not.toBeInTheDocument();
+            const isCollapsed = button.classList.contains('bdl-is-collapsed');
+            expect(isCollapsed).toBe(!isOpen);
+        },
+    );
 
-    test('should render correctly as closed', () => {
-        const wrapper = mount(<SidebarToggleButton isOpen={false} />);
+    test.each([true, false])(
+        'should stop the mousedown event from being propagated up to box-annotations if isPreviewModernizationEnabled is %s',
+        isPreviewModernizationEnabled => {
+            const onMouseDown = jest.fn();
+            const onClick = jest.fn();
+            render(
+                // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                <div onMouseDown={onMouseDown}>
+                    <SidebarToggleButton isOpen onClick={onClick} />
+                </div>,
+                {
+                    wrapperProps: { features: { previewModernization: { enabled: isPreviewModernizationEnabled } } },
+                },
+            );
+            const button = screen.getByRole('button');
+            fireEvent.mouseDown(button);
+            expect(onMouseDown).not.toHaveBeenCalled();
+        },
+    );
 
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should have the proper class when it is collapsed', () => {
-        const wrapper = mount(<SidebarToggleButton isOpen={false} />);
-
-        expect(wrapper.find('PlainButton').hasClass('bdl-is-collapsed')).toBeTruthy();
-    });
-
-    test('should render correctly as left oriented toggle when open', () => {
-        const wrapper = mount(<SidebarToggleButton direction="left" isOpen />);
-
-        expect(wrapper).toMatchSnapshot();
-    });
-
-    test('should render correctly as left oriented toggle when closed', () => {
-        const wrapper = mount(<SidebarToggleButton direction="left" isOpen={false} />);
-
-        expect(wrapper).toMatchSnapshot();
-    });
+    test.each([true, false])(
+        'should show proper button isPreviewModernizationEnabled is %s and click handler should work',
+        isPreviewModernizationEnabled => {
+            const onClick = jest.fn();
+            render(<SidebarToggleButton isOpen onClick={onClick} />, {
+                wrapperProps: { features: { previewModernization: { enabled: isPreviewModernizationEnabled } } },
+            });
+            const button = screen.getByRole('button');
+            expect(button).toHaveClass('bdl-SidebarToggleButton');
+            const isModernized = button.classList.contains('bdl-SidebarToggleButton--modernized');
+            expect(isModernized).toBe(isPreviewModernizationEnabled);
+            fireEvent.click(button);
+            expect(onClick).toHaveBeenCalled();
+        },
+    );
 });