feat(drawing): Add PopupDrawingToolbar (#644)

Author: Conrad Chan

i18n/en-US.properties

@@ -8,8 +8,12 @@ ba.annotationsLoadError = We’re sorry, the annotations failed to load for this
 ba.annotationsPost = Post
 # Label for the save button
 ba.annotationsSave = Save
+# Button label for adding a comment in the drawing toolbar
+ba.popups.addComment = Add Comment
 # Button label for cancelling the creation of a description, comment, or reply
 ba.popups.cancel = Cancel
+# Button title for deleting a staged drawing
+ba.popups.deleteDrawing = Delete Drawing
 # Prompt message following cursor in region annotations mode
 ba.popups.popupCursor.regionPrompt = Draw a box to comment
 # Popup message for highlight promoter

src/components/Popups/Popper.ts

@@ -4,6 +4,7 @@ import unionBy from 'lodash/unionBy';
 
 export type Instance = popper.Instance;
 export type Options = popper.Options;
+export type Rect = popper.Rect;
 export type State = popper.State;
 export type VirtualElement = popper.VirtualElement;
 

src/components/Popups/PopupDrawingToolbar.scss

@@ -0,0 +1,74 @@
+@import '~box-ui-elements/es/styles/variables';
+
+@mixin ba-PopupDrawingToolbarButton($width: 32px, $height: 32px) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $width;
+    height: $height;
+    padding: 0;
+    color: $white;
+    background: transparent;
+    border: none;
+    border-radius: $bdl-border-radius-size;
+    outline: none;
+    cursor: pointer;
+    opacity: .7;
+    transition: opacity 200ms ease;
+
+    &:focus,
+    &:hover {
+        opacity: 1;
+    }
+
+    &[disabled] {
+        cursor: default;
+        opacity: .2;
+    }
+}
+
+.ba-PopupDrawingToolbar {
+    background-color: $bdl-gray;
+    border-radius: $bdl-border-radius-size;
+
+    .ba-Popup-arrow {
+        display: none;
+    }
+
+    .ba-Popup-content {
+        display: flex;
+        background-color: $bdl-gray;
+        border: none;
+        border-radius: $bdl-border-radius-size;
+        box-shadow: none;
+    }
+}
+
+.ba-PopupDrawingToolbar-group {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & + & {
+        border-left: 1px solid #000;
+    }
+}
+
+.ba-PopupDrawingToolbar-delete {
+    @include ba-PopupDrawingToolbarButton;
+
+    path {
+        fill: #fff;
+    }
+}
+
+.ba-PopupDrawingToolbar-comment {
+    @include ba-PopupDrawingToolbarButton($width: auto);
+    @include common-typography;
+
+    padding-right: 18px;
+    padding-left: 18px;
+    color: $white;
+    font-weight: bold;
+}

src/components/Popups/PopupDrawingToolbar.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormattedMessage, useIntl } from 'react-intl';
+import IconTrash from 'box-ui-elements/es/icon/line/Trash16';
+import messages from './messages';
+import PopupBase from './PopupBase';
+import { Options, PopupReference, Rect } from './Popper';
+import './PopupDrawingToolbar.scss';
+
+export type Props = {
+    className?: string;
+    onDelete: () => void;
+    onReply: () => void;
+    reference: PopupReference;
+};
+
+const options: Partial<Options> = {
+    modifiers: [
+        {
+            name: 'eventListeners',
+            options: {
+                scroll: false,
+            },
+        },
+        {
+            name: 'offset',
+            options: {
+                offset: ({ popper }: { popper: Rect }) => [-popper.width / 2, 8],
+            },
+        },
+        {
+            name: 'preventOverflow',
+            options: {
+                padding: 5,
+            },
+        },
+    ],
+    placement: 'top',
+};
+
+const PopupDrawingToolbar = ({ className, onDelete, onReply, reference }: Props): JSX.Element => {
+    const intl = useIntl();
+
+    return (
+        <PopupBase
+            className={classNames(className, 'ba-PopupDrawingToolbar')}
+            data-resin-component="popupDrawingToolbar"
+            options={options}
+            reference={reference}
+        >
+            <div className="ba-PopupDrawingToolbar-group">
+                {/* TODO: Add undo/redo support */}
+                <button
+                    className="ba-PopupDrawingToolbar-delete"
+                    data-testid="ba-PopupDrawingToolbar-delete"
+                    onClick={() => onDelete()}
+                    title={intl.formatMessage(messages.buttonDeleteDrawing)}
+                    type="button"
+                >
+                    <IconTrash />
+                </button>
+            </div>
+            <div className="ba-PopupDrawingToolbar-group">
+                <button
+                    className="ba-PopupDrawingToolbar-comment"
+                    data-testid="ba-PopupDrawingToolbar-comment"
+                    onClick={() => onReply()}
+                    type="button"
+                >
+                    <FormattedMessage {...messages.buttonAddComent} />
+                </button>
+            </div>
+        </PopupBase>
+    );
+};
+
+export default PopupDrawingToolbar;

src/components/Popups/__tests__/PopupDrawingToolbar-test.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import IconTrash from 'box-ui-elements/es/icon/line/Trash16';
+import { FormattedMessage } from 'react-intl';
+import { shallow, ShallowWrapper } from 'enzyme';
+import messages from '../messages';
+import PopupBase from '../PopupBase';
+import PopupDrawingToolbar, { Props } from '../PopupDrawingToolbar';
+
+describe('PopupDrawingToolbar', () => {
+    const getDOMRect = (x = 0, y = 0, height = 1000, width = 1000): DOMRect => ({
+        bottom: y + height,
+        top: y,
+        left: x,
+        right: x + width,
+        height,
+        width,
+        toJSON: jest.fn(),
+        x,
+        y,
+    });
+    const getDefaults = (): Props => ({
+        onDelete: jest.fn(),
+        onReply: jest.fn(),
+        reference: { getBoundingClientRect: () => getDOMRect() },
+    });
+    const getWrapper = (props?: Partial<Props>): ShallowWrapper =>
+        shallow(<PopupDrawingToolbar {...getDefaults()} {...props} />);
+
+    describe('render', () => {
+        test('should render popup and buttons', () => {
+            const wrapper = getWrapper({ className: 'foo' });
+
+            expect(wrapper.find(PopupBase).props()).toMatchObject({
+                className: 'foo ba-PopupDrawingToolbar',
+                'data-resin-component': 'popupDrawingToolbar',
+            });
+
+            // Delete button
+            expect(wrapper.find('[data-testid="ba-PopupDrawingToolbar-delete"]').props()).toMatchObject({
+                className: 'ba-PopupDrawingToolbar-delete',
+                'data-testid': 'ba-PopupDrawingToolbar-delete',
+                onClick: expect.any(Function),
+                title: 'Delete Drawing',
+                type: 'button',
+            });
+            expect(wrapper.exists(IconTrash)).toBe(true);
+
+            // Add comment button
+            expect(wrapper.find('[data-testid="ba-PopupDrawingToolbar-comment"]').props()).toMatchObject({
+                className: 'ba-PopupDrawingToolbar-comment',
+                'data-testid': 'ba-PopupDrawingToolbar-comment',
+                onClick: expect.any(Function),
+                type: 'button',
+            });
+            expect(wrapper.find(FormattedMessage).props()).toMatchObject(messages.buttonAddComent);
+        });
+    });
+
+    describe('callbacks', () => {
+        test.each`
+            callback      | button
+            ${'onDelete'} | ${'ba-PopupDrawingToolbar-delete'}
+            ${'onReply'}  | ${'ba-PopupDrawingToolbar-comment'}
+        `('should call $callback when $button is clicked', ({ callback, button }) => {
+            const mockFn = jest.fn();
+            const wrapper = getWrapper({ [callback]: mockFn });
+
+            wrapper.find(`[data-testid="${button}"]`).simulate('click');
+
+            expect(mockFn).toHaveBeenCalled();
+        });
+    });
+});

src/components/Popups/messages.ts

@@ -1,11 +1,21 @@
 import { defineMessages } from 'react-intl';
 
 export default defineMessages({
+    buttonAddComent: {
+        id: 'ba.popups.addComment',
+        description: 'Button label for adding a comment in the drawing toolbar',
+        defaultMessage: 'Add Comment',
+    },
     buttonCancel: {
         id: 'ba.popups.cancel',
         description: 'Button label for cancelling the creation of a description, comment, or reply',
         defaultMessage: 'Cancel',
     },
+    buttonDeleteDrawing: {
+        id: 'ba.popups.deleteDrawing',
+        description: 'Button title for deleting a staged drawing',
+        defaultMessage: 'Delete Drawing',
+    },
     buttonPost: {
         id: 'ba.popups.post',
         description: 'Button label for creating a description, comment, or reply',

src/drawing/DrawingAnnotations.scss

@@ -26,3 +26,14 @@
     pointer-events: auto;
     touch-action: none;
 }
+
+.ba-DrawingAnnotations-toolbar {
+    opacity: 1;
+    transition: opacity 200ms ease;
+    pointer-events: auto;
+
+    &.ba-is-drawing {
+        opacity: .3;
+        pointer-events: none;
+    }
+}

src/drawing/DrawingAnnotations.tsx

@@ -1,51 +1,75 @@
 import React from 'react';
-import * as uuid from 'uuid';
+import classNames from 'classnames';
 import DecoratedDrawingPath from './DecoratedDrawingPath';
 import DrawingList from './DrawingList';
 import DrawingCreator from './DrawingCreator';
 import DrawingPathGroup from './DrawingPathGroup';
 import DrawingSVG, { DrawingSVGRef } from './DrawingSVG';
+import DrawingSVGGroup from './DrawingSVGGroup';
+import PopupDrawingToolbar from '../components/Popups/PopupDrawingToolbar';
 import { AnnotationDrawing, PathGroup } from '../@types';
-import { CreatorStatus } from '../store';
+import { CreatorItemDrawing, CreatorStatus } from '../store';
 import './DrawingAnnotations.scss';
 
 export type Props = {
     activeAnnotationId: string | null;
     addDrawingPathGroup: (pathGroup: PathGroup) => void;
     annotations: AnnotationDrawing[];
+    canShowPopupToolbar: boolean;
     drawnPathGroups: Array<PathGroup>;
     isCreating: boolean;
     location: number;
+    resetDrawing: () => void;
     setActiveAnnotationId: (annotationId: string | null) => void;
-    setDrawingLocation: (location: number) => void;
+    setReferenceId: (uuid: string) => void;
+    setStaged: (staged: CreatorItemDrawing | null) => void;
     setStatus: (status: CreatorStatus) => void;
+    setupDrawing: (location: number) => void;
 };
 
 const DrawingAnnotations = (props: Props): JSX.Element => {
     const {
         activeAnnotationId,
         addDrawingPathGroup,
         annotations,
+        canShowPopupToolbar,
         drawnPathGroups,
         isCreating,
         location,
+        resetDrawing,
         setActiveAnnotationId,
-        setDrawingLocation,
+        setReferenceId,
+        setStaged,
         setStatus,
+        setupDrawing,
     } = props;
+    const [isDrawing, setIsDrawing] = React.useState<boolean>(false);
     const [stagedRootEl, setStagedRootEl] = React.useState<DrawingSVGRef | null>(null);
     const hasDrawnPathGroups = drawnPathGroups.length > 0;
-    const uuidRef = React.useRef<string>(uuid.v4());
+    const stagedGroupRef = React.useRef<SVGGElement>(null);
+    const { current: drawingSVGGroup } = stagedGroupRef;
 
     const handleAnnotationActive = (annotationId: string | null): void => {
         setActiveAnnotationId(annotationId);
     };
+    const handleDelete = (): void => {
+        resetDrawing();
+    };
+    const handleDrawingMount = (uuid: string): void => {
+        setReferenceId(uuid);
+    };
+    const handleReply = (): void => {
+        setStaged({ location, pathGroups: drawnPathGroups });
+        setStatus(CreatorStatus.staged);
+    };
     const handleStart = (): void => {
+        setupDrawing(location);
         setStatus(CreatorStatus.started);
-        setDrawingLocation(location);
+        setIsDrawing(true);
     };
     const handleStop = (pathGroup: PathGroup): void => {
         addDrawingPathGroup(pathGroup);
+        setIsDrawing(false);
     };
 
     return (
@@ -60,7 +84,7 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
             {hasDrawnPathGroups && (
                 <DrawingSVG ref={setStagedRootEl} className="ba-DrawingAnnotations-target">
                     {/* Group element to capture the bounding box around the drawn path groups */}
-                    <g data-ba-reference-id={uuidRef.current}>
+                    <DrawingSVGGroup ref={stagedGroupRef} onMount={handleDrawingMount}>
                         {drawnPathGroups.map(({ clientId: pathGroupClientId, paths, stroke }) => (
                             <DrawingPathGroup key={pathGroupClientId} rootEl={stagedRootEl} stroke={stroke}>
                                 {/* Use the children render function to pass down the calculated strokeWidthWithBorder value */}
@@ -76,13 +100,22 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
                                 }
                             </DrawingPathGroup>
                         ))}
-                    </g>
+                    </DrawingSVGGroup>
                 </DrawingSVG>
             )}
 
             {isCreating && (
                 <DrawingCreator className="ba-DrawingAnnotations-creator" onStart={handleStart} onStop={handleStop} />
             )}
+
+            {isCreating && hasDrawnPathGroups && drawingSVGGroup && canShowPopupToolbar && (
+                <PopupDrawingToolbar
+                    className={classNames('ba-DrawingAnnotations-toolbar', { 'ba-is-drawing': isDrawing })}
+                    onDelete={handleDelete}
+                    onReply={handleReply}
+                    reference={drawingSVGGroup}
+                />
+            )}
         </>
     );
 };