box-ui-elements 25.1.0-beta.2 → 25.1.0-beta.4

package/src/elements/content-sidebar/activity-feed/annotations/__tests__/AnnotationActivity.test.js

@@ -367,4 +367,153 @@ describe('elements/content-sidebar/ActivityFeed/annotations/AnnotationActivity',
             expect(event.stopPropagation).not.toHaveBeenCalled();
         });
     });
+
+    describe('video annotations', () => {
+        const mockVideoAnnotation = {
+            ...mockAnnotation,
+            target: {
+                location: {
+                    type: 'frame',
+                    value: 60000, // 1 minute in milliseconds
+                },
+            },
+        };
+
+        test('should detect video annotation when target location type is frame', () => {
+            const wrapper = getWrapper({ item: mockVideoAnnotation });
+            const activityMessage = wrapper.find('ForwardRef(withFeatureConsumer(ActivityMessage))');
+
+            expect(activityMessage.prop('annotationsMillisecondTimestamp')).toBe('0:01:00');
+        });
+
+        test('should not show version link for video annotations even when hasVersions is true', () => {
+            const wrapper = getWrapper({
+                item: mockVideoAnnotation,
+                hasVersions: true,
+                isCurrentVersion: true,
+            });
+
+            expect(wrapper.exists('AnnotationActivityLink')).toBe(false);
+        });
+
+        test('should pass correct timestamp format to ActivityMessage for video annotations', () => {
+            const videoAnnotationWithTimestamp = {
+                ...mockVideoAnnotation,
+                target: {
+                    location: {
+                        type: 'frame',
+                        value: 3661000, // 1 hour, 1 minute, 1 second
+                    },
+                },
+            };
+
+            const wrapper = getWrapper({ item: videoAnnotationWithTimestamp });
+            const activityMessage = wrapper.find('ForwardRef(withFeatureConsumer(ActivityMessage))');
+
+            expect(activityMessage.prop('annotationsMillisecondTimestamp')).toBe('1:01:01');
+        });
+
+        test('should handle zero timestamp for video annotations', () => {
+            const videoAnnotationWithZeroTimestamp = {
+                ...mockVideoAnnotation,
+                target: {
+                    location: {
+                        type: 'frame',
+                        value: 0,
+                    },
+                },
+            };
+
+            const wrapper = getWrapper({ item: videoAnnotationWithZeroTimestamp });
+            const activityMessage = wrapper.find('ForwardRef(withFeatureConsumer(ActivityMessage))');
+
+            expect(activityMessage.prop('annotationsMillisecondTimestamp')).toBe('0:00:00');
+        });
+
+        test('should handle undefined timestamp for video annotations', () => {
+            const videoAnnotationWithUndefinedTimestamp = {
+                ...mockVideoAnnotation,
+                target: {
+                    location: {
+                        type: 'frame',
+                        value: undefined,
+                    },
+                },
+            };
+
+            const wrapper = getWrapper({ item: videoAnnotationWithUndefinedTimestamp });
+            const activityMessage = wrapper.find('ForwardRef(withFeatureConsumer(ActivityMessage))');
+
+            expect(activityMessage.prop('annotationsMillisecondTimestamp')).toBe('0:00:00');
+        });
+
+        test('should not pass timestamp to ActivityMessage for non-video annotations', () => {
+            const regularAnnotation = {
+                ...mockAnnotation,
+                target: {
+                    location: {
+                        type: 'page',
+                        value: 1,
+                    },
+                },
+            };
+
+            const wrapper = getWrapper({ item: regularAnnotation });
+            const activityMessage = wrapper.find('ForwardRef(withFeatureConsumer(ActivityMessage))');
+
+            expect(activityMessage.prop('annotationsMillisecondTimestamp')).toBeFalsy();
+        });
+
+        test('should not pass timestamp to ActivityMessage when target location type is missing', () => {
+            const annotationWithoutType = {
+                ...mockAnnotation,
+                target: {
+                    location: {
+                        value: 60000,
+                    },
+                },
+            };
+
+            const wrapper = getWrapper({ item: annotationWithoutType });
+            const activityMessage = wrapper.find('ForwardRef(withFeatureConsumer(ActivityMessage))');
+
+            expect(activityMessage.prop('annotationsMillisecondTimestamp')).toBeFalsy();
+        });
+
+        test('should not pass timestamp to ActivityMessage when target is missing', () => {
+            const annotationWithoutTarget = {
+                ...mockAnnotation,
+                target: {
+                    location: {
+                        value: 1,
+                    },
+                },
+            };
+
+            const wrapper = getWrapper({ item: annotationWithoutTarget });
+            const activityMessage = wrapper.find('ForwardRef(withFeatureConsumer(ActivityMessage))');
+
+            expect(activityMessage.prop('annotationsMillisecondTimestamp')).toBeFalsy();
+        });
+
+        test('should show version link for non-video annotations when hasVersions is true', () => {
+            const regularAnnotation = {
+                ...mockAnnotation,
+                target: {
+                    location: {
+                        type: 'page',
+                        value: 1,
+                    },
+                },
+            };
+
+            const wrapper = getWrapper({
+                item: regularAnnotation,
+                hasVersions: true,
+                isCurrentVersion: true,
+            });
+
+            expect(wrapper.exists('AnnotationActivityLink')).toBe(true);
+        });
+    });
 });

package/src/elements/content-sidebar/activity-feed/common/activity-message/ActivityMessage.tsx

@@ -7,7 +7,7 @@ import LoadingIndicator, { LoadingIndicatorSize } from '../../../../../component
 import ShowOriginalButton from './ShowOriginalButton';
 import TranslateButton from './TranslateButton';
 
-import formatTaggedMessage from '../../utils/formatTaggedMessage';
+import formatTaggedMessage, { renderTimestampWithText } from '../../utils/formatTaggedMessage';
 import { withFeatureConsumer, isFeatureEnabled } from '../../../../common/feature-checking';
 
 import messages from './messages';
@@ -22,11 +22,13 @@ export interface ActivityMessageProps extends WrappedComponentProps {
     getUserProfileUrl?: GetProfileUrlCallback;
     id: string;
     isEdited?: boolean;
+    onClick?: () => void;
     onTranslate?: ({ id, tagged_message }: { id: string; tagged_message: string }) => void;
     tagged_message: string;
     translatedTaggedMessage?: string;
     translationEnabled?: boolean;
     translationFailed?: boolean | null;
+    annotationsMillisecondTimestamp?: string | null;
 }
 
 type State = {
@@ -92,6 +94,8 @@ class ActivityMessage extends React.Component<ActivityMessageProps, State> {
             id,
             intl,
             isEdited,
+            onClick = noop,
+            annotationsMillisecondTimestamp,
             tagged_message,
             translatedTaggedMessage,
             translationEnabled,
@@ -110,7 +114,14 @@ class ActivityMessage extends React.Component<ActivityMessageProps, State> {
         ) : (
             <div className="bcs-ActivityMessage">
                 <MessageWrapper>
-                    {formatTaggedMessage(commentToDisplay, id, false, getUserProfileUrl, intl)}
+                    {annotationsMillisecondTimestamp
+                        ? renderTimestampWithText(
+                              annotationsMillisecondTimestamp,
+                              onClick,
+                              intl,
+                              ` ${commentToDisplay}`,
+                          )
+                        : formatTaggedMessage(commentToDisplay, id, false, getUserProfileUrl, intl)}
                     {isEdited && (
                         <span className="bcs-ActivityMessage-edited">
                             <FormattedMessage {...messages.activityMessageEdited} />

package/src/elements/content-sidebar/activity-feed/common/activity-message/__tests__/ActivityMessage.test.js

@@ -1,5 +1,6 @@
 import React, { act } from 'react';
 import { mount, shallow } from 'enzyme';
+import { createIntl } from 'react-intl';
 
 import { ActivityMessage } from '../ActivityMessage';
 
@@ -184,4 +185,33 @@ describe('elements/content-sidebar/ActivityFeed/common/activity-message', () =>
 
         expect(wrapper.exists({ id: 'be.contentSidebar.activityFeed.common.editedMessage' })).toBe(expected);
     });
+
+    describe('video annotation', () => {
+        test('should render timestamp with text when annotationsMillisecondTimestamp is provided', () => {
+            const onClick = jest.fn();
+            const videoAnnotation = {
+                annotationsMillisecondTimestamp: '0:01:00',
+                tagged_message: 'test',
+                onClick,
+            };
+
+            const intl = createIntl({ locale: 'en' });
+            const wrapper = mount(<ActivityMessage id="123" {...videoAnnotation} intl={intl} />);
+            expect(wrapper.find('button[aria-label="Seek to video timestamp"]').length).toBe(1);
+            expect(wrapper.find('button[aria-label="Seek to video timestamp"]').text()).toBe('0:01:00');
+            wrapper.find('button[aria-label="Seek to video timestamp"]').simulate('click');
+            expect(onClick).toHaveBeenCalled();
+        });
+
+        test('should render original message when annotationsMillisecondTimestamp is not provided', () => {
+            const comment = {
+                annotationsMillisecondTimestamp: undefined,
+                tagged_message: 'test',
+            };
+            const intl = createIntl({ locale: 'en' });
+            const wrapper = mount(<ActivityMessage id="123" {...comment} intl={intl} />);
+            expect(wrapper.find('button[aria-label="Seek to video timestamp"]').length).toBe(0);
+            expect(wrapper.find('.bcs-ActivityMessage').text()).toBe('test');
+        });
+    });
 });

package/src/elements/content-sidebar/activity-feed/utils/formatTaggedMessage.js

@@ -11,6 +11,34 @@ import UserLink from '../common/user-link';
 import messages from '../common/activity-message/messages';
 import { convertTimestampToSeconds, convertMillisecondsToHMMSS } from '../../../../utils/timestamp';
 
+/**
+ * Renders the timestamp button and remaining text
+ * @param timestampInHHMMSS The formatted timestamp string (HH:MM:SS)
+ * @param timestampLabel The aria label for the timestamp button
+ * @param handleClick The click handler for the timestamp button
+ * @param textAfterTimestamp The text that comes after the timestamp
+ * @returns A React Fragment with timestamp button and text
+ */
+export const renderTimestampWithText = (
+    timestampInHHMMSS: string,
+    handleClick: (e: SyntheticMouseEvent<HTMLButtonElement>) => void,
+    intl: IntlShape,
+    textAfterTimestamp: string,
+): React$Element<any> => (
+    <>
+        <div className="bcs-ActivityMessage-timestamp">
+            <button
+                aria-label={intl.formatMessage(messages.activityMessageTimestampLabel)}
+                type="button"
+                onClick={handleClick}
+            >
+                {timestampInHHMMSS}
+            </button>
+        </div>
+        {textAfterTimestamp}
+    </>
+);
+
 /**
  * Formats text containing a timestamp by wrapping the timestamp in a Link component
  * @param text The text containing the timestamp
@@ -51,17 +79,7 @@ const formatTimestamp = (text: string, timestamp: string, intl: IntlShape): Reac
         }
     };
 
-    const timestampLabel = intl.formatMessage(messages.activityMessageTimestampLabel);
-    return (
-        <>
-            <div className="bcs-ActivityMessage-timestamp">
-                <button aria-label={timestampLabel} type="button" onClick={handleClick}>
-                    {timestampInHHMMSS}
-                </button>
-            </div>
-            {textAfterTimestamp}
-        </>
-    );
+    return renderTimestampWithText(timestampInHHMMSS, handleClick, intl, textAfterTimestamp);
 };
 
 // this regex matches one of the following regular expressions:

package/src/features/security-cloud-game/DragCloud.js

@@ -33,6 +33,7 @@ const DragCloud = ({
     updateLiveText,
     updatePosition,
 }) => {
+    const nodeRef = React.useRef({});
     const [isMoving, setIsMoving] = useState(false);
 
     const dragCloudClasses = classNames('bdl-DragCloud', {
@@ -137,8 +138,22 @@ const DragCloud = ({
     const onDrag = throttle((e, { x, y }) => updatePosition({ x, y }), 100, { leading: true, trailing: true });
 
     return (
-        <Draggable bounds="parent" disabled={disabled} onDrag={onDrag} onStop={onDrop} position={position}>
-            <div className={dragCloudClasses} onBlur={onBlur} onKeyDown={onKeyDown} role="button" tabIndex={0}>
+        <Draggable
+            nodeRef={nodeRef}
+            bounds="parent"
+            disabled={disabled}
+            onDrag={onDrag}
+            onStop={onDrop}
+            position={position}
+        >
+            <div
+                ref={nodeRef}
+                className={dragCloudClasses}
+                onBlur={onBlur}
+                onKeyDown={onKeyDown}
+                role="button"
+                tabIndex={0}
+            >
                 <IconCloud
                     filter={{ id: 'drop-shadow', definition: <DropShadowFilter /> }}
                     height={cloudSize}