feat(reply): Integrate collaborators endpoint (#484)

Author: Mingze

docs/styles.css

@@ -27,4 +27,4 @@
 #preview-container {
     width: 100vw;
     height: 75vh;
-}
+}

src/components/ItemList/ItemList.scss

@@ -0,0 +1,5 @@
+.ba {
+    .ba-ItemList-row {
+        padding: 5px 30px 5px 15px;
+    }
+}

src/components/ItemList/ItemList.tsx

@@ -0,0 +1,44 @@
+import React, { SyntheticEvent } from 'react';
+import noop from 'lodash/noop';
+import ItemRow from './ItemRow';
+import './ItemList.scss';
+
+export type Props<T extends { id: string }> = {
+    activeItemIndex?: number;
+    itemRowAs?: JSX.Element;
+    items: T[];
+    onActivate?: (index: number) => void;
+    onSelect: (index: number, event: React.SyntheticEvent) => void;
+};
+
+const ItemList = <T extends { id: string }>({
+    activeItemIndex = 0,
+    itemRowAs = <ItemRow />,
+    items,
+    onActivate = noop,
+    onSelect,
+    ...rest
+}: Props<T>): JSX.Element => (
+    <ul data-testid="ba-ItemList" role="listbox" {...rest}>
+        {items.map((item, index) =>
+            React.cloneElement(itemRowAs, {
+                ...item,
+                key: item.id,
+                className: 'ba-ItemList-row',
+                isActive: index === activeItemIndex,
+                onClick: (event: SyntheticEvent) => {
+                    onSelect(index, event);
+                },
+                /* preventDefault on mousedown so blur doesn't happen before click */
+                onMouseDown: (event: SyntheticEvent) => {
+                    event.preventDefault();
+                },
+                onMouseEnter: () => {
+                    onActivate(index);
+                },
+            }),
+        )}
+    </ul>
+);
+
+export default ItemList;

src/components/ItemList/ItemRow.scss

@@ -0,0 +1,11 @@
+@import '~box-ui-elements/es/styles/variables';
+
+.ba-ItemRow-name {
+    line-height: 15px;
+}
+
+.ba-ItemRow-email {
+    color: $bdl-gray-62;
+    font-size: 11px;
+    line-height: 15px;
+}

src/components/ItemList/ItemRow.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import DatalistItem from 'box-ui-elements/es/components/datalist-item';
+import { UserMini, GroupMini } from '../../@types';
+import './ItemRow.scss';
+
+export type Props = {
+    id?: string;
+    item?: UserMini | GroupMini;
+    name?: string;
+};
+
+const ItemRow = ({ item, ...rest }: Props): JSX.Element | null => {
+    if (!item || !item.name) {
+        return null;
+    }
+
+    return (
+        <DatalistItem {...rest}>
+            <div className="ba-ItemRow-name" data-testid="ba-ItemRow-name">
+                {item.name}
+            </div>
+            {'email' in item && (
+                <div className="ba-ItemRow-email" data-testid="ba-ItemRow-email">
+                    {item.email}
+                </div>
+            )}
+        </DatalistItem>
+    );
+};
+
+export default ItemRow;

src/components/ItemList/__tests__/ItemList-test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import ItemList, { Props } from '../ItemList';
+import { Collaborator } from '../../../@types';
+
+describe('components/ItemList', () => {
+    const defaults: Props<Collaborator> = {
+        items: [
+            { id: 'testid1', name: 'test1' },
+            { id: 'testid2', name: 'test2' },
+        ],
+        onSelect: jest.fn(),
+    };
+
+    const getWrapper = (props = {}): ShallowWrapper => shallow(<ItemList {...defaults} {...props} />);
+
+    describe('render()', () => {
+        test('should render elements with correct props', () => {
+            const wrapper = getWrapper({ activeItemIndex: 1 });
+
+            const itemList = wrapper.find('[data-testid="ba-ItemList"]');
+            const firstChild = itemList.childAt(0);
+            const secondChild = itemList.childAt(1);
+
+            expect(itemList.props()).toMatchObject({
+                role: 'listbox',
+            });
+            expect(itemList.children()).toHaveLength(2);
+            expect(firstChild.prop('className')).toEqual('ba-ItemList-row');
+            expect(firstChild.prop('isActive')).toEqual(false);
+            expect(secondChild.prop('isActive')).toEqual(true);
+        });
+
+        test('should trigger events', () => {
+            const mockSetIndex = jest.fn();
+            const mockEvent = {
+                preventDefault: jest.fn(),
+            };
+
+            const wrapper = getWrapper({ onActivate: mockSetIndex });
+            const firstChild = wrapper.find('[data-testid="ba-ItemList"]').childAt(0);
+
+            firstChild.simulate('click', mockEvent);
+            expect(defaults.onSelect).toBeCalledWith(0, mockEvent);
+
+            firstChild.simulate('mousedown', mockEvent);
+            expect(mockEvent.preventDefault).toBeCalled();
+
+            firstChild.simulate('mouseenter');
+            expect(mockSetIndex).toBeCalledWith(0);
+        });
+    });
+});

src/components/ItemList/__tests__/ItemRow-test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import DatalistItem from 'box-ui-elements/es/components/datalist-item';
+import ItemRow, { Props } from '../ItemRow';
+
+describe('components/Popups/ReplyField/ItemRow', () => {
+    const defaults: Props = {
+        id: 'testid',
+        item: { email: 'test@box.com', id: 'testid', name: 'testname', type: 'user' },
+        name: 'testname',
+    };
+
+    const getWrapper = (props = {}): ShallowWrapper => shallow(<ItemRow {...defaults} {...props} />);
+
+    describe('render()', () => {
+        test('should render DatalistItem with correct props', () => {
+            const wrapper = getWrapper();
+
+            expect(wrapper.find(DatalistItem).props()).toMatchObject({
+                id: 'testid',
+                name: 'testname',
+            });
+        });
+
+        test('should not render anything if no item', () => {
+            const wrapper = getWrapper({ item: null });
+
+            expect(wrapper.exists(DatalistItem)).toBeFalsy();
+        });
+
+        test('should not render anything if no item name', () => {
+            const wrapper = getWrapper({ item: {} });
+
+            expect(wrapper.exists(DatalistItem)).toBeFalsy();
+        });
+
+        test('should render item name and email', () => {
+            const wrapper = getWrapper();
+
+            expect(wrapper.find('[data-testid="ba-ItemRow-name"]').text()).toBe('testname');
+            expect(wrapper.find('[data-testid="ba-ItemRow-email"]').text()).toBe('test@box.com');
+        });
+
+        test('should not render email if item has no email', () => {
+            const wrapper = getWrapper({ item: { id: 'testid', name: 'testname', type: 'group' } });
+
+            expect(wrapper.exists('[data-testid="ba-ItemRow-email"]')).toBeFalsy();
+        });
+    });
+});

src/components/ItemList/index.ts

@@ -0,0 +1 @@
+export { default } from './ItemList';

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 State = popper.State;
 export type VirtualElement = popper.VirtualElement;
 
 export type PopupReference = Element | VirtualElement;

src/components/Popups/ReplyField/MentionItem.scss

@@ -0,0 +1,6 @@
+@import '~box-ui-elements/es/styles/variables';
+
+.ba-MentionItem-link {
+    color: $bdl-box-blue;
+    font-weight: bold;
+}