box-annotations 5.2.1-beta.2 → 5.2.1-beta.21

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightRect.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import BoundingBoxHighlightNav from './BoundingBoxHighlightNav';
+import { BoundingBox } from '../../store/boundingBoxHighlights/types';
+import './BoundingBoxHighlightRect.scss';
+
+type Props = {
+    boundingBox: BoundingBox;
+    currentIndex: number;
+    isSelected?: boolean;
+    onNavigate?: (id: string) => void;
+    onSelect?: (id: string) => void;
+    total: number;
+    prevId?: string;
+    nextId?: string;
+};
+
+const BoundingBoxHighlightRect = ({
+    boundingBox,
+    currentIndex,
+    isSelected,
+    onNavigate,
+    onSelect,
+    total,
+    prevId,
+    nextId,
+}: Props): JSX.Element => {
+    const { id, x, y, width, height } = boundingBox;
+
+    const style: React.CSSProperties = {
+        display: 'block',
+        left: `${x}%`,
+        top: `${y}%`,
+        width: `${width}%`,
+        height: `${height}%`,
+    };
+
+    const handleClick = (event: React.MouseEvent): void => {
+        event.stopPropagation();
+        onSelect?.(id);
+    };
+
+    const handlePrev = (event: React.MouseEvent | KeyboardEvent): void => {
+        event.stopPropagation();
+        if (prevId) {
+            onNavigate?.(prevId);
+        }
+    };
+
+    const handleNext = (event: React.MouseEvent | KeyboardEvent): void => {
+        event.stopPropagation();
+        if (nextId) {
+            onNavigate?.(nextId);
+        }
+    };
+
+    return (
+        <div
+            className={classNames('ba-BoundingBoxHighlightRect', { 'is-selected': isSelected })}
+            data-testid={`ba-BoundingBoxHighlightRect-${id}`}
+            onClick={handleClick}
+            role="presentation"
+            style={style}
+        >
+            {isSelected && total > 1 && (
+                <BoundingBoxHighlightNav
+                    currentIndex={currentIndex}
+                    onNext={handleNext}
+                    onPrev={handlePrev}
+                    total={total}
+                />
+            )}
+        </div>
+    );
+};
+
+export default BoundingBoxHighlightRect;

package/src/components/BoundingBoxHighlight/index.ts

@@ -0,0 +1,4 @@
+export { default as BoundingBoxHighlightList } from './BoundingBoxHighlightList';
+export { default as BoundingBoxHighlightNav } from './BoundingBoxHighlightNav';
+export { default as BoundingBoxHighlightRect } from './BoundingBoxHighlightRect';
+export type { BoundingBox } from '../../store/boundingBoxHighlights/types';

package/src/components/BoundingBoxHighlight/messages.ts

@@ -0,0 +1,14 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+    ariaLabelViewNextReference: {
+        id: 'ba.boundingBoxHighlight.viewNextReference',
+        description: 'Aria label for the button to view the next reference',
+        defaultMessage: 'View next reference',
+    },
+    ariaLabelViewPrevReference: {
+        id: 'ba.boundingBoxHighlight.viewPrevReference',
+        description: 'Aria label for the button to view the previous reference',
+        defaultMessage: 'View previous reference',
+    },
+});

package/src/components/Popups/PopupDrawingToolbar.tsx

@@ -33,12 +33,6 @@ export type Props = {
 
 const options: Partial<Options> = {
     modifiers: [
-        {
-            name: 'eventListeners',
-            options: {
-                scroll: false,
-            },
-        },
         {
             name: 'offset',
             options: {
@@ -48,7 +42,6 @@ const options: Partial<Options> = {
         {
             name: 'preventOverflow',
             options: {
-                altAxis: true,
                 padding: 50,
             },
         },

package/src/components/Popups/PopupReply.tsx

@@ -3,21 +3,19 @@ import Popper from '@popperjs/core';
 import { useSelector } from 'react-redux';
 import { useIntl } from 'react-intl';
 import FocusTrap from 'box-ui-elements/es/components/focus-trap/FocusTrap';
+
+import ReplyForm from '../ReplyForm';
+
+import { getRotation, getScale } from '../../store/options';
+
 import messages from './messages';
 import PopupBase from './PopupBase';
-import PopupReplyV2 from './PopupReplyV2';
-import ReplyForm from '../ReplyForm';
-import { getScale, getRotation } from '../../store/options';
 import { PopupReference } from './Popper';
 import './PopupReply.scss';
 
-type BaseProps = {
+export type Props = {
     className?: string;
-};
-
-type LegacyProps = BaseProps & {
     isPending: boolean;
-    isThreadedAnnotation?: false;
     onCancel: (text?: string) => void;
     onChange: (text?: string) => void;
     onSubmit: (text: string) => void;
@@ -25,18 +23,6 @@ type LegacyProps = BaseProps & {
     value?: string;
 };
 
-type ThreadedProps = BaseProps & {
-    isThreadedAnnotation: true;
-    isPending?: boolean;
-    onCancel?: (text?: string) => void;
-    onChange?: (text?: string) => void;
-    onSubmit?: (text: string) => void;
-    reference?: PopupReference;
-    value?: string;
-};
-
-export type Props = LegacyProps | ThreadedProps;
-
 const isIE = (): boolean => {
     const { userAgent } = navigator;
     return userAgent.indexOf('Trident/') > 0;
@@ -97,7 +83,7 @@ const getOptions = (): Partial<Popper.Options> => {
 export default function PopupReply(props: Props): JSX.Element {
     const intl = useIntl();
     const popupRef = React.useRef<PopupBase>(null);
-    const popupOptions = React.useRef<Partial<Popper.Options>>(getOptions()); // Keep the options reference the same between renders
+    const popupOptions = React.useRef<Partial<Popper.Options>>(getOptions());
     const rotation = useSelector(getRotation);
     const scale = useSelector(getScale);
 
@@ -109,13 +95,7 @@ export default function PopupReply(props: Props): JSX.Element {
         }
     }, [popupRef, rotation, scale]);
 
-    // TODO: PopupReplyV2 is a placeholder stub. Props (isPending, onCancel, etc.)
-    // are not yet forwarded and will need to be wired up when V2 is implemented.
-    if (props.isThreadedAnnotation) {
-        return <PopupReplyV2 />;
-    }
-
-    const { isPending, onCancel, onChange, onSubmit, value = '', isThreadedAnnotation: _, ...rest } = props as LegacyProps;
+    const { isPending, onCancel, onChange, onSubmit, value = '', ...rest } = props;
 
     return (
         <FocusTrap>

package/src/components/Popups/PopupV2.scss

@@ -0,0 +1,28 @@
+.ba-PopupV2 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 150;
+    width: 348px;
+}
+
+// Specificity must beat .ba selectors from box-ui-elements globals
+// (forms, buttons, links) that cascade into threaded-annotations components.
+.ba .ba-PopupV2 {
+    div[contenteditable='true'],
+    div[contenteditable='true']:hover,
+    div[contenteditable='true']:focus {
+        width: auto;
+        padding: 0;
+        color: inherit;
+        border: none;
+        border-radius: 0;
+        outline: none;
+        box-shadow: none;
+        transition: none;
+    }
+
+    button svg {
+        pointer-events: auto;
+    }
+}

package/src/components/Popups/PopupV2.tsx

@@ -0,0 +1,382 @@
+import noop from 'lodash/noop';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { BlueprintModernizationProvider, TooltipProvider } from '@box/blueprint-web';
+import {
+    MentionContextProvider,
+    MessageEditorV2,
+    ThreadedAnnotationsV2,
+    serializeMentionMarkup,
+} from '@box/threaded-annotations';
+import type { DocumentNodeV2, TextMessageTypeV2 } from '@box/threaded-annotations';
+import type { FetchedAvatarUrls, UserContactType } from '@box/user-selector';
+import type { JSONContent } from '@tiptap/core';
+import FocusTrap from 'box-ui-elements/es/components/focus-trap/FocusTrap';
+
+import { annotationToMessages, collaboratorToUserContact } from '../../adapters/threadedAnnotationsAdapters';
+import AnnotationCallbacksContext from '../../common/AnnotationCallbacksContext';
+import {
+    createReplyAction,
+    deleteAnnotationAction,
+    deleteReplyAction,
+    setActiveAnnotationIdAction,
+    updateAnnotationAction,
+    updateReplyAction,
+} from '../../store/annotations/actions';
+import { getAnnotation } from '../../store/annotations/selectors';
+import { getApiHost, getFileId, getFileVersionId, getToken } from '../../store/options';
+import { fetchCollaboratorsAction } from '../../store/users/actions';
+
+import type { Token, TokenLiteral, TokenMap } from '../../@types';
+import type { AppState, AppThunkDispatch } from '../../store/types';
+
+import createPopper, { PopupReference } from './Popper';
+import type { Instance, Options } from './Popper';
+import messages from './messages';
+import './PopupV2.scss';
+
+export type Props = {
+    annotationId?: string;
+    onSubmit: (text: string) => void;
+    popupPortalEl?: HTMLElement | null;
+    reference: PopupReference;
+};
+
+const getPopupOptions = (): Partial<Options> => ({
+    modifiers: [
+        { name: 'flip', options: { altAxis: false, fallbackPlacements: ['top', 'left', 'right'] } },
+        { name: 'offset', options: { offset: [0, 15] } },
+        { name: 'preventOverflow', options: { padding: 5 } },
+    ],
+    placement: 'bottom',
+});
+
+const createDocumentNode = (content: JSONContent | null): DocumentNodeV2 => {
+    if (!content) {
+        return { type: 'doc', content: [] };
+    }
+
+    if (content.type === 'doc' && content.content) {
+        return content as DocumentNodeV2;
+    }
+
+    return { type: 'doc', content: [content] } as DocumentNodeV2;
+};
+
+const literalToString = (literal: TokenLiteral): string | null => {
+    if (!literal) return null;
+    if (typeof literal === 'string') return literal;
+    return literal.read ?? literal.write ?? null;
+};
+
+const resolveStringToken = async (token: Token, typedFileId: string): Promise<string | null> => {
+    const resolved = typeof token === 'function' ? await token(typedFileId) : token;
+    if (!resolved) return null;
+    if (typeof resolved === 'string') return resolved;
+    if (typedFileId in resolved) return literalToString((resolved as TokenMap)[typedFileId]);
+    return literalToString(resolved as TokenLiteral);
+};
+
+const fetchAvatarBlob = async (
+    apiHost: string,
+    token: Token,
+    fileId: string | null,
+    userId: string,
+): Promise<string | null> => {
+    try {
+        if (!fileId) return null;
+        const stringToken = await resolveStringToken(token, `file_${fileId}`);
+        if (!stringToken) return null;
+        const response = await fetch(`${apiHost}/2.0/users/${userId}/avatar?pic_type=large`, {
+            headers: { Authorization: `Bearer ${stringToken}` },
+        });
+        if (!response.ok) return null;
+        const blob = await response.blob();
+        return URL.createObjectURL(blob);
+    } catch {
+        return null;
+    }
+};
+
+const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): JSX.Element | null => {
+    const intl = useIntl();
+    const dispatch = useDispatch<AppThunkDispatch>();
+    const { onCopyLink: consumerOnCopyLink } = React.useContext(AnnotationCallbacksContext);
+    const popupRef = React.useRef<HTMLDivElement>(null);
+    const popperRef = React.useRef<Instance>();
+    const optionsRef = React.useRef<Partial<Options>>(getPopupOptions());
+
+    const apiHost = useSelector(getApiHost);
+    const fileId = useSelector(getFileId);
+    const fileVersionId = useSelector(getFileVersionId);
+    const token = useSelector(getToken);
+    const onCopyLink = React.useMemo(
+        () =>
+            consumerOnCopyLink && annotationId && fileVersionId
+                ? () => consumerOnCopyLink({ annotationId, fileVersionId })
+                : undefined,
+        [consumerOnCopyLink, annotationId, fileVersionId],
+    );
+    const annotation = useSelector((state: AppState) =>
+        annotationId ? getAnnotation(state, annotationId) : undefined,
+    );
+
+    const [avatarBlobs, setAvatarBlobs] = React.useState<Record<string, string>>({});
+    const avatarCacheRef = React.useRef<Map<string, string>>(new Map());
+    const credentialsRef = React.useRef({ apiHost, token });
+    credentialsRef.current = { apiHost, token };
+
+    const getOrFetchAvatarBlob = React.useCallback(
+        async (userId: string): Promise<string | null> => {
+            const cached = avatarCacheRef.current.get(userId);
+            if (cached) return cached;
+            const capturedApiHost = apiHost;
+            const capturedToken = token;
+            const url = await fetchAvatarBlob(capturedApiHost, capturedToken, fileId, userId);
+            if (!url) return null;
+            if (
+                credentialsRef.current.apiHost !== capturedApiHost ||
+                credentialsRef.current.token !== capturedToken
+            ) {
+                URL.revokeObjectURL(url);
+                return null;
+            }
+            const existing = avatarCacheRef.current.get(userId);
+            if (existing) {
+                URL.revokeObjectURL(url);
+                return existing;
+            }
+            avatarCacheRef.current.set(userId, url);
+            return url;
+        },
+        [apiHost, fileId, token],
+    );
+
+    React.useEffect(() => {
+        if (popupRef.current) {
+            popperRef.current = createPopper(reference, popupRef.current, optionsRef.current);
+        }
+
+        return () => {
+            popperRef.current?.destroy();
+        };
+    }, [reference]);
+
+    React.useEffect(() => {
+        const cache = avatarCacheRef.current;
+        return () => {
+            cache.forEach(url => URL.revokeObjectURL(url));
+            cache.clear();
+        };
+    }, []);
+
+    React.useEffect(() => {
+        avatarCacheRef.current.forEach(url => URL.revokeObjectURL(url));
+        avatarCacheRef.current.clear();
+        setAvatarBlobs({});
+    }, [apiHost, token]);
+
+    const handleEvent = React.useCallback((event: React.SyntheticEvent) => {
+        event.stopPropagation();
+    }, []);
+
+    React.useEffect(() => {
+        if (!annotation) return undefined;
+
+        const userIds = Array.from(
+            new Set(annotationToMessages(annotation).map(msg => String(msg.author.id))),
+        );
+        let cancelled = false;
+
+        Promise.all(userIds.map(async id => [id, await getOrFetchAvatarBlob(id)] as const)).then(entries => {
+            if (cancelled) return;
+            setAvatarBlobs(prev => {
+                const next = { ...prev };
+                entries.forEach(([id, url]) => {
+                    if (url) next[id] = url;
+                });
+                return next;
+            });
+        });
+
+        return () => {
+            cancelled = true;
+        };
+    }, [annotation, getOrFetchAvatarBlob]);
+
+    const threadMessages: TextMessageTypeV2[] = React.useMemo(() => {
+        if (!annotation) return [];
+        return annotationToMessages(annotation).map(msg => ({
+            ...msg,
+            author: {
+                ...msg.author,
+                avatarUrl: avatarBlobs[String(msg.author.id)],
+            },
+        }));
+    }, [annotation, avatarBlobs]);
+
+    const isResolved = annotation?.status === 'resolved';
+    const resolvedBy = isResolved
+        ? annotation?.resolution?.resolved_by?.name ?? annotation?.modified_by?.name
+        : undefined;
+    const resolvedAtSource = isResolved
+        ? annotation?.resolution?.resolved_at ?? annotation?.modified_at
+        : undefined;
+    const resolvedAt = resolvedAtSource ? new Date(resolvedAtSource).getTime() : undefined;
+
+    const userSelectorProps = React.useMemo(
+        () => ({
+            allowEmptyQuery: true,
+            ariaRoleDescription: intl.formatMessage(messages.ariaLabelMentionSelector),
+            fetchAvatarUrls: async (userContacts: UserContactType[]): Promise<FetchedAvatarUrls> => {
+                const urls: FetchedAvatarUrls = {};
+                await Promise.all(
+                    userContacts.map(async ({ id }) => {
+                        const key = String(id);
+                        const blobUrl = await getOrFetchAvatarBlob(key);
+                        if (blobUrl) {
+                            urls[key] = blobUrl;
+                        }
+                    }),
+                );
+                return urls;
+            },
+            fetchUsers: async (query: string) => {
+                const action = await dispatch(fetchCollaboratorsAction(query));
+                if (fetchCollaboratorsAction.fulfilled.match(action)) {
+                    return action.payload.entries.map(collaboratorToUserContact);
+                }
+                return [];
+            },
+            loadingAriaLabel: intl.formatMessage(messages.ariaLabelMentionLoading),
+        }),
+        [dispatch, getOrFetchAvatarBlob, intl],
+    );
+
+    const handlePost = React.useCallback(
+        async (content: JSONContent | null): Promise<void> => {
+            const doc = createDocumentNode(content);
+            const { text } = serializeMentionMarkup(doc);
+            if (annotationId) {
+                await dispatch(createReplyAction({ annotationId, message: text }));
+            } else {
+                onSubmit(text);
+            }
+        },
+        [annotationId, dispatch, onSubmit],
+    );
+
+    const handleEdit = React.useCallback(
+        async (id: string, content: JSONContent | null): Promise<void> => {
+            if (!annotationId) return;
+            const doc = createDocumentNode(content);
+            const { text } = serializeMentionMarkup(doc);
+            if (id === annotationId) {
+                await dispatch(updateAnnotationAction({ annotationId, payload: { message: text } }));
+                return;
+            }
+            await dispatch(updateReplyAction({ annotationId, replyId: id, payload: { message: text } }));
+        },
+        [annotationId, dispatch],
+    );
+
+    const handleThreadDelete = React.useCallback(
+        async (): Promise<void> => {
+            if (annotationId) {
+                await dispatch(deleteAnnotationAction(annotationId));
+            }
+        },
+        [annotationId, dispatch],
+    );
+
+    const handleDelete = React.useCallback(
+        async (id: string): Promise<void> => {
+            if (!annotationId || id === annotationId) return;
+            await dispatch(deleteReplyAction({ annotationId, replyId: id }));
+        },
+        [annotationId, dispatch],
+    );
+
+    const handleResolve = React.useCallback(
+        async (): Promise<void> => {
+            if (!annotationId) return;
+            const result = await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'resolved' } }));
+            if (updateAnnotationAction.fulfilled.match(result)) {
+                dispatch(setActiveAnnotationIdAction(null));
+            }
+        },
+        [annotationId, dispatch],
+    );
+
+    const handleUnresolve = React.useCallback(
+        async (): Promise<void> => {
+            if (!annotationId) return;
+            await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'open' } }));
+        },
+        [annotationId, dispatch],
+    );
+
+    if (!popupPortalEl) return null;
+
+    return ReactDOM.createPortal(
+        <FocusTrap>
+            <div
+                ref={popupRef}
+                aria-label={intl.formatMessage(messages.ariaLabelComment)}
+                className="ba-PopupV2"
+                data-resin-component={annotationId ? 'popupThreadV2' : 'popupReplyV2'}
+                onClick={handleEvent}
+                onMouseDown={handleEvent}
+                onMouseMove={handleEvent}
+                onMouseUp={handleEvent}
+                onTouchMove={handleEvent}
+                onTouchStart={handleEvent}
+                role="presentation"
+            >
+                <BlueprintModernizationProvider enableModernizedComponents>
+                    <TooltipProvider>
+                        <MentionContextProvider value={{
+                            collaborationPopoverProps: {
+                                onSubmit: () => Promise.resolve(),
+                            },
+                            // Mentions are restricted to file collaborators; the invite popover is intentionally never shown.
+                            fetchCollaboratorState: async () => true,
+                        }}>
+                            {annotationId ? (
+                                <ThreadedAnnotationsV2
+                                    isAnnotations
+                                    isResolved={isResolved}
+                                    messages={threadMessages}
+                                    onAvatarClick={noop}
+                                    onCopyLink={onCopyLink}
+                                    onDelete={handleDelete}
+                                    onEdit={handleEdit}
+                                    onPost={handlePost}
+                                    onResolve={handleResolve}
+                                    onThreadDelete={handleThreadDelete}
+                                    onUnresolve={handleUnresolve}
+                                    resolvedAt={resolvedAt}
+                                    resolvedBy={resolvedBy}
+                                    userSelectorProps={userSelectorProps}
+                                />
+                            ) : (
+                                <MessageEditorV2
+                                    isFirstAnnotation
+                                    onPost={handlePost}
+                                    userSelectorProps={userSelectorProps}
+                                />
+                            )}
+                        </MentionContextProvider>
+                    </TooltipProvider>
+                </BlueprintModernizationProvider>
+                <div data-threaded-annotations-portal />
+            </div>
+        </FocusTrap>,
+        popupPortalEl,
+    );
+};
+
+export default PopupV2;

package/src/components/Popups/messages.ts

@@ -6,6 +6,16 @@ export default defineMessages({
         description: 'Aria label description for reply popup',
         defaultMessage: 'Comment',
     },
+    ariaLabelMentionLoading: {
+        id: 'ba.popup.reply.mentionLoading',
+        description: 'Aria label for mention selector loading state',
+        defaultMessage: 'Loading users...',
+    },
+    ariaLabelMentionSelector: {
+        id: 'ba.popup.reply.mentionSelector',
+        description: 'Aria role description for mention user selector',
+        defaultMessage: 'Mention a collaborator',
+    },
     ariaLabelReplyField: {
         id: 'ba.popup.reply.field',
         description: 'Aria label description for annotation comment field',