box-annotations 5.2.1-beta.6 → 5.2.1-beta.7

package/src/components/Popups/PopupV2.tsx

@@ -0,0 +1,314 @@
+import React from 'react';
+import noop from 'lodash/noop';
+import { useDispatch, useSelector } from 'react-redux';
+import { useIntl } from 'react-intl';
+import { BlueprintModernizationProvider } 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 {
+    createReplyAction,
+    deleteAnnotationAction,
+    setActiveAnnotationIdAction,
+    updateAnnotationAction,
+} from '../../store/annotations/actions';
+import { getAnnotation } from '../../store/annotations/selectors';
+import { getApiHost, getToken } from '../../store/options';
+import { fetchCollaboratorsAction } from '../../store/users/actions';
+
+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;
+    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;
+};
+
+// Callers render initials as a fallback on null.
+// A persistent null across all users usually indicates a stale token.
+const fetchAvatarBlob = async (apiHost: string, token: string, userId: string): Promise<string | null> => {
+    try {
+        const response = await fetch(`${apiHost}/2.0/users/${userId}/avatar?pic_type=large`, {
+            headers: { Authorization: `Bearer ${token}` },
+        });
+        if (!response.ok) return null;
+        const blob = await response.blob();
+        return URL.createObjectURL(blob);
+    } catch {
+        return null;
+    }
+};
+
+const PopupV2 = ({ annotationId, onSubmit, reference }: Props): JSX.Element => {
+    const intl = useIntl();
+    const dispatch = useDispatch<AppThunkDispatch>();
+    const popupRef = React.useRef<HTMLDivElement>(null);
+    const popperRef = React.useRef<Instance>();
+    const optionsRef = React.useRef<Partial<Options>>(getPopupOptions());
+
+    const apiHost = useSelector(getApiHost);
+    const token = useSelector(getToken);
+    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, 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, 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 handleThreadDelete = React.useCallback(
+        async (): Promise<void> => {
+            if (annotationId) {
+                await dispatch(deleteAnnotationAction(annotationId));
+            }
+        },
+        [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],
+    );
+
+    return (
+        <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>
+                    <MentionContextProvider value={{
+                        collaborationPopoverProps: {
+                            onSubmit: () => Promise.resolve(),
+                        },
+                    }}>
+                        {annotationId ? (
+                            <ThreadedAnnotationsV2
+                                isAnnotations
+                                isResolved={isResolved}
+                                messages={threadMessages}
+                                onAvatarClick={noop}
+                                onDelete={noop}
+                                onPost={handlePost}
+                                onResolve={handleResolve}
+                                onThreadDelete={handleThreadDelete}
+                                onUnresolve={handleUnresolve}
+                                resolvedAt={resolvedAt}
+                                resolvedBy={resolvedBy}
+                                userSelectorProps={userSelectorProps}
+                            />
+                        ) : (
+                            <MessageEditorV2
+                                isFirstAnnotation
+                                onPost={handlePost}
+                                userSelectorProps={userSelectorProps}
+                            />
+                        )}
+                    </MentionContextProvider>
+                </BlueprintModernizationProvider>
+                <div data-threaded-annotations-portal />
+            </div>
+        </FocusTrap>
+    );
+};
+
+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',

package/src/document/DocumentAnnotator.ts

@@ -15,7 +15,7 @@ import { getAnnotation } from '../store/annotations';
 import { BoundingBox } from '../store/boundingBoxHighlights';
 import { getSelection } from './docUtil';
 import { Manager } from '../common/BaseManager';
-import { getFileId, getIsCurrentFileVersion, getViewMode, Mode } from '../store';
+import { getFileId, getIsCurrentFileVersion, getRotation, getViewMode, Mode } from '../store';
 import { scrollToLocation } from '../utils/scroll';
 import './DocumentAnnotator.scss';
 
@@ -196,14 +196,35 @@ export default class DocumentAnnotator extends BaseAnnotator {
     renderPage(pageEl: HTMLElement): void {
         const pageManagers = this.getPageManagers(pageEl);
         const pageNumber = this.getPageNumber(pageEl);
+        const rotation = getRotation(this.store.getState()) || 0;
+
+        // Calculate original (unrotated) page dimensions for annotation layer sizing
+        const pageWidth = pageEl.clientWidth;
+        const pageHeight = pageEl.clientHeight;
+        const isOrthogonal = rotation % 180 !== 0;
+        const origWidth = isOrthogonal ? pageHeight : pageWidth;
+        const origHeight = isOrthogonal ? pageWidth : pageHeight;
 
         // Render annotations for every page
-        pageManagers.forEach(manager =>
+        pageManagers.forEach(manager => {
+            // Apply rotation transform to annotation layers
+            if (rotation) {
+                manager.style({
+                    height: `${origHeight}px`,
+                    left: '50%',
+                    top: '50%',
+                    transform: `translate(-50%, -50%) rotate(${rotation}deg)`,
+                    width: `${origWidth}px`,
+                });
+            } else {
+                manager.style({height: '', left: '', top: '', transform: '', width: ''});
+            }
+
             manager.render({
                 intl: this.intl,
                 store: this.store,
-            }),
-        );
+            });
+        });
 
         this.managers.set(pageNumber, pageManagers);
     }

package/src/drawing/DrawingTarget.tsx

@@ -64,6 +64,7 @@ export const DrawingTarget = (props: Props, ref: React.Ref<DrawingTargetRef>): J
         <a
             ref={ref}
             className={classNames('ba-DrawingTarget', className, { 'is-active': isActive })}
+            data-ba-annotation-id={annotationId}
             data-resin-itemid={annotationId}
             data-resin-target="highlightDrawing"
             data-testid={`ba-AnnotationTarget-${annotationId}`}

package/src/highlight/HighlightTarget.tsx

@@ -69,6 +69,7 @@ const HighlightTarget = (props: Props, ref: React.Ref<HighlightTargetRef>): JSX.
         <a
             ref={ref}
             className={classNames('ba-HighlightTarget', className, { 'is-active': isActive })}
+            data-ba-annotation-id={annotationId}
             data-ba-reference-id={uuid}
             data-resin-itemid={annotationId}
             data-resin-target="highlightText"

package/src/popup/PopupContainer.tsx

@@ -15,12 +15,14 @@ import {
     setMessageAction,
     getCreatorReferenceId,
 } from '../store';
+import { getActiveAnnotationId } from '../store/annotations/selectors';
 import { isFeatureEnabled } from '../store/options';
 import { createDrawingAction } from '../drawing/actions';
 import { createHighlightAction } from '../highlight/actions';
 import { createRegionAction } from '../region';
 
 export type Props = {
+    activeAnnotationId: string | null;
     isPromoting: boolean;
     isThreadedAnnotation?: boolean;
     message: string;
@@ -32,6 +34,7 @@ export type Props = {
 
 export const mapStateToProps = (state: AppState, { location }: { location: number }): Props => {
     return {
+        activeAnnotationId: getActiveAnnotationId(state),
         isPromoting: getIsPromoting(state),
         isThreadedAnnotation: isFeatureEnabled(state, 'isThreadedAnnotation'),
         message: getCreatorMessage(state),

package/src/popup/PopupLayer.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import noop from 'lodash/noop';
 import PopupReply from '../components/Popups/PopupReply';
+import PopupV2 from '../components/Popups/PopupV2';
 import { CreateArg as DrawingCreateArg } from '../drawing/actions';
 import { CreateArg as HighlightCreateArg } from '../highlight/actions';
 import { CreateArg as RegionCreateArg } from '../region/actions';
@@ -13,10 +14,13 @@ import {
     Mode,
 } from '../store';
 import { PopupReference } from '../components/Popups/Popper';
-import './PopupLayer.scss';
+
 import { TARGET_TYPE } from '../constants';
 
+import './PopupLayer.scss';
+
 export type Props = {
+    activeAnnotationId: string | null;
     createDrawing?: (arg: DrawingCreateArg) => void;
     createHighlight?: (arg: HighlightCreateArg) => void;
     createRegion?: (arg: RegionCreateArg) => void;
@@ -41,6 +45,7 @@ const modeStagedMap: { [M in Mode]?: (staged: CreatorItem | null) => boolean } =
 
 const PopupLayer = (props: Props): JSX.Element | null => {
     const {
+        activeAnnotationId,
         createDrawing = noop,
         createHighlight = noop,
         createRegion = noop,
@@ -57,6 +62,7 @@ const PopupLayer = (props: Props): JSX.Element | null => {
     } = props;
 
     const [reference, setReference] = React.useState<PopupReference | null>(null);
+    const [activeReference, setActiveReference] = React.useState<PopupReference | null>(null);
     const canCreate = (modeStagedMap[mode]?.(staged ?? null) ?? false) || isPromoting;
     const canReply = status !== CreatorStatus.started && status !== CreatorStatus.init;
     const isPending = status === CreatorStatus.pending;
@@ -69,17 +75,19 @@ const PopupLayer = (props: Props): JSX.Element | null => {
         setMessage(text);
     };
 
-    const handleSubmit = (): void => {
+    const handleSubmit = (text?: string): void => {
         if (!staged) {
             return;
         }
 
+        const submitMessage = text ?? message;
+
         if (isCreatorStagedHighlight(staged)) {
-            createHighlight({ ...staged, message, targetType });
+            createHighlight({ ...staged, message: submitMessage, targetType });
         } else if (isCreatorStagedRegion(staged)) {
-            createRegion({ ...staged, message, targetType });
+            createRegion({ ...staged, message: submitMessage, targetType });
         } else if (isCreatorStagedDrawing(staged)) {
-            createDrawing({ ...staged, message, targetType });
+            createDrawing({ ...staged, message: submitMessage, targetType });
         }
     };
 
@@ -87,24 +95,56 @@ const PopupLayer = (props: Props): JSX.Element | null => {
         setReference(referenceId ? document.querySelector(`[data-ba-reference-id="${referenceId}"]`) : null);
     }, [referenceId]);
 
+    React.useEffect(() => {
+        if (activeAnnotationId && isThreadedAnnotation) {
+            const el = document.querySelector(`[data-ba-annotation-id="${CSS.escape(activeAnnotationId)}"]`);
+            setActiveReference(el);
+        } else {
+            setActiveReference(null);
+        }
+    }, [activeAnnotationId, isThreadedAnnotation]);
+
+    const showCreator = canCreate && canReply && reference && staged;
+
+    if (showCreator && isThreadedAnnotation) {
+        return (
+            <div className="ba-PopupLayer-popup">
+                <PopupV2
+                    onSubmit={handleSubmit}
+                    reference={reference}
+                />
+            </div>
+        );
+    }
+
+    if (showCreator) {
+        return (
+            <div className="ba-PopupLayer-popup">
+                <PopupReply
+                    isPending={isPending}
+                    onCancel={handleCancel}
+                    onChange={handleChange}
+                    onSubmit={handleSubmit}
+                    reference={reference}
+                    value={message}
+                />
+            </div>
+        );
+    }
+
+    if (isThreadedAnnotation && activeAnnotationId && activeReference) {
+        return (
+            <div className="ba-PopupLayer-popup">
+                <PopupV2
+                    annotationId={activeAnnotationId}
+                    onSubmit={handleSubmit}
+                    reference={activeReference}
+                />
+            </div>
+        );
+    }
 
-    return (
-        <>
-            {canCreate && canReply && reference && staged && (
-                <div className="ba-PopupLayer-popup">
-                    <PopupReply
-                        isPending={isPending}
-                        isThreadedAnnotation={isThreadedAnnotation}
-                        onCancel={handleCancel}
-                        onChange={handleChange}
-                        onSubmit={handleSubmit}
-                        reference={reference}
-                        value={message}
-                    />
-                </div>
-            )}
-        </>
-    );
+    return null;
 };
 
 export default PopupLayer;

package/src/region/RegionAnnotation.tsx

@@ -36,6 +36,7 @@ export const RegionAnnotation = (props: Props, ref: React.Ref<RegionAnnotationRe
         <button
             ref={ref}
             className={classNames('ba-RegionAnnotation', className, { 'is-active': isActive })}
+            data-ba-annotation-id={annotationId}
             data-resin-itemid={annotationId}
             data-resin-target="highlightRegion"
             data-testid={`ba-AnnotationTarget-${annotationId}`}

package/src/store/annotations/actions.ts

@@ -1,8 +1,9 @@
 import { createAction, createAsyncThunk } from '@reduxjs/toolkit';
-import { Annotation, NewAnnotation } from '../../@types';
+import { Annotation, NewAnnotation, Reply } from '../../@types';
 import { APICollection } from '../../api';
 import { AppThunkAPI } from '../types';
-import { getFileId, getFileVersionId, getPermissions } from '../options';
+import { getAnnotation } from './selectors';
+import { getFileId, getFileVersionId, getPermissions, isFeatureEnabled } from '../options';
 
 export const createAnnotationAction = createAsyncThunk<Annotation, NewAnnotation, AppThunkAPI>(
     'CREATE_ANNOTATION',
@@ -39,9 +40,83 @@ export const fetchAnnotationsAction = createAsyncThunk<APICollection<Annotation>
             client.destroy();
         });
 
+        const shouldFetchReplies = isFeatureEnabled({ options: getState().options }, 'isThreadedAnnotation');
+
         // Wrap the client request in a promise to allow it to be returned and cancelled
         return new Promise<APICollection<Annotation>>((resolve, reject) => {
-            client.getAnnotations(fileId, fileVersionId, permissions, resolve, reject, 1000, false);
+            client.getAnnotations(fileId, fileVersionId, permissions, resolve, reject, 1000, false, shouldFetchReplies);
+        });
+    },
+);
+
+export const createReplyAction = createAsyncThunk<
+    { annotationId: string; reply: Reply },
+    { annotationId: string; message: string },
+    AppThunkAPI
+>(
+    'CREATE_REPLY',
+    async ({ annotationId, message }, { extra, getState, signal }) => {
+        const client = extra.api.getAnnotationsAPI();
+        const state = getState();
+        const fileId = getFileId(state);
+        const filePermissions = getPermissions(state);
+        const annotation = getAnnotation(state, annotationId);
+        const permissions = { ...filePermissions, ...annotation?.permissions };
+
+        signal.addEventListener('abort', () => {
+            client.destroy();
+        });
+
+        const reply = await new Promise<Reply>((resolve, reject) => {
+            client.createAnnotationReply(fileId, annotationId, permissions, message, resolve, reject);
+        });
+
+        return { annotationId, reply };
+    },
+);
+
+export const deleteAnnotationAction = createAsyncThunk<string, string, AppThunkAPI>(
+    'DELETE_ANNOTATION',
+    async (annotationId, { extra, getState, signal }) => {
+        const client = extra.api.getAnnotationsAPI();
+        const state = getState();
+        const fileId = getFileId(state);
+        const filePermissions = getPermissions(state);
+        const annotation = getAnnotation(state, annotationId);
+        const permissions = { ...filePermissions, ...annotation?.permissions };
+
+        signal.addEventListener('abort', () => {
+            client.destroy();
+        });
+
+        await new Promise<void>((resolve, reject) => {
+            client.deleteAnnotation(fileId, annotationId, permissions, resolve, reject);
+        });
+
+        return annotationId;
+    },
+);
+
+export const updateAnnotationAction = createAsyncThunk<
+    Annotation,
+    { annotationId: string; payload: { message?: string; status?: string } },
+    AppThunkAPI
+>(
+    'UPDATE_ANNOTATION',
+    async ({ annotationId, payload }, { extra, getState, signal }) => {
+        const client = extra.api.getAnnotationsAPI();
+        const state = getState();
+        const fileId = getFileId(state);
+        const filePermissions = getPermissions(state);
+        const existingAnnotation = getAnnotation(state, annotationId);
+        const permissions = { ...filePermissions, ...existingAnnotation?.permissions };
+
+        signal.addEventListener('abort', () => {
+            client.destroy();
+        });
+
+        return new Promise<Annotation>((resolve, reject) => {
+            client.updateAnnotation(fileId, annotationId, permissions, payload, resolve, reject);
         });
     },
 );