box-ui-elements 20.0.0 → 20.0.1-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "20.0.0",
+    "version": "20.0.1-beta.2",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",

package/src/components/contact-datalist-item/ContactDatalistItem.tsx

@@ -15,6 +15,7 @@ export interface ContactDatalistItemProps {
     name: string | null | undefined;
     showAvatar?: boolean;
     subtitle?: React.ReactNode;
+    type?: string | null | undefined;
 }
 
 interface ContactDatalistItemState {
@@ -48,11 +49,12 @@ class ContactDatalistItem extends React.PureComponent<ContactDatalistItemProps,
      * @return {void}
      */
     getAvatarUrl() {
-        const { getContactAvatarUrl, id } = this.props;
+        const { getContactAvatarUrl, id, type } = this.props;
         Promise.resolve(
             getContactAvatarUrl && id
                 ? getContactAvatarUrl({
                       id,
+                      type,
                   })
                 : undefined,
         )

package/src/components/contact-datalist-item/__tests__/ContactDatalistItem.test.tsx

@@ -79,5 +79,34 @@ describe('components/contact-datalist-item/ContactDatalistItem', () => {
             expect(wrapper.find(Avatar).length).toBe(1);
             expect(wrapper.find(Avatar).props().avatarUrl).toBeUndefined();
         });
+
+        test.each([['user'], [undefined], [null]])('should have avatar URL when the type prop is %s', type => {
+            const contactID = '123';
+            const getContactAvatarUrlMock = jest
+                .fn()
+                .mockImplementation(() => Promise.resolve(`/test?id=${contactID}`));
+            const wrapper = shallow(
+                <ContactDatalistItem
+                    name="name"
+                    id={contactID}
+                    type={type}
+                    showAvatar
+                    getContactAvatarUrl={getContactAvatarUrlMock}
+                />,
+            );
+            expect(wrapper.state('avatarUrl')).toBe(undefined);
+            const instance = wrapper.instance();
+
+            if (instance.componentDidMount) {
+                instance.componentDidMount();
+            }
+
+            setImmediate(() => {
+                wrapper.update();
+                expect(wrapper.find('LabelPillIcon').length).toBe(2);
+                expect(wrapper.find('LabelPillIcon[avatarUrl]').length).toBe(1);
+                expect(getContactAvatarUrlMock).toHaveBeenCalledWith({ id: contactID, type });
+            });
+        });
     });
 });

package/src/components/pill-selector-dropdown/PillSelector.js

@@ -258,6 +258,7 @@ class PillSelectorBase extends React.Component<Props, State> {
                                       id={option.id}
                                       hasWarning={option.hasWarning}
                                       isExternal={option.isExternalUser}
+                                      type={option.type}
                                   />
                               );
                           })

package/src/components/pill-selector-dropdown/RoundPill.js

@@ -22,6 +22,7 @@ type Props = {
     onRemove: () => any,
     showAvatar?: boolean,
     text: string,
+    type?: string | null,
 };
 
 type State = {
@@ -82,8 +83,8 @@ class RoundPill extends React.PureComponent<Props, State> {
      * @return {void}
      */
     getAvatarUrl() {
-        const { getPillImageUrl, id } = this.props;
-        Promise.resolve(getPillImageUrl && id ? getPillImageUrl({ id }) : undefined)
+        const { getPillImageUrl, id, type } = this.props;
+        Promise.resolve(getPillImageUrl && id ? getPillImageUrl({ id, type }) : undefined)
             .then(this.getAvatarUrlHandler)
             .catch(() => {
                 // noop

package/src/components/pill-selector-dropdown/__tests__/RoundPill.test.js

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import RoundPill from '../RoundPill';
 
 describe('components/RoundPill-selector-dropdown/RoundPill', () => {
@@ -113,4 +112,23 @@ describe('components/RoundPill-selector-dropdown/RoundPill', () => {
         expect(wrapper.find('LabelPillIcon').length).toBe(2);
         expect(wrapper.find('LabelPillIcon[avatarUrl]').length).toBe(0);
     });
+
+    test.each([['user'], [undefined], [null]])('should have avatar URL when the type prop is %s', type => {
+        const contactID = '123';
+        const getPillImageUrlMock = jest.fn().mockImplementation(() => Promise.resolve(`/test?id=${contactID}`));
+        const wrapper = shallow(
+            <RoundPill name="name" id={contactID} type={type} showAvatar getPillImageUrl={getPillImageUrlMock} />,
+        );
+        expect(wrapper.state('avatarUrl')).toBe(undefined);
+        const instance = wrapper.instance();
+
+        instance.componentDidMount();
+
+        setImmediate(() => {
+            wrapper.update();
+            expect(wrapper.find('LabelPillIcon').length).toBe(2);
+            expect(wrapper.find('LabelPillIcon[avatarUrl]').length).toBe(1);
+            expect(getPillImageUrlMock).toHaveBeenCalledWith({ id: contactID, type });
+        });
+    });
 });

package/src/components/pill-selector-dropdown/flowTypes.js

@@ -19,6 +19,7 @@ export type RoundOption = {
     hasWarning: boolean,
     id?: number | string,
     isExternalUser: boolean,
+    type?: string,
 } & Option;
 
 export type SelectedRoundOptions = Array<RoundOption> | List<RoundOption>;

package/src/elements/common/messages.js

@@ -35,7 +35,7 @@ const messages = defineMessages({
     previewError: {
         id: 'be.previewError',
         description: 'Error message when Preview fails due to the files call.',
-        defaultMessage: 'We’re sorry, the preview didn’t load. Please refresh the page.',
+        defaultMessage: 'This preview didn’t load. Please try to open or download the file to view.',
     },
     previewErrorBlockedByPolicy: {
         id: 'be.previewErrorBlockedByPolicy',

package/src/elements/content-preview/__tests__/__snapshots__/PreviewError.test.js.snap

@@ -12,7 +12,7 @@ exports[`elements/content-preview/PreviewError render() should render correctly
     className="bcpr-PreviewError-message"
   >
     <FormattedMessage
-      defaultMessage="We’re sorry, the preview didn’t load. Please refresh the page."
+      defaultMessage="This preview didn’t load. Please try to open or download the file to view."
       id="be.previewError"
     />
   </div>

package/src/elements/content-sidebar/additional-tabs/AdditionalTab.scss

@@ -15,4 +15,6 @@
 .bdl-AdditionalTab-icon {
     @include bdl-openComponentAnimation(.5s);
     @include bdl-SidebarNavIcon;
+
+    border-radius: 5px;
 }

package/src/features/unified-share-modal/ContactsField.js

@@ -215,11 +215,12 @@ class ContactsField extends React.Component<Props, State> {
                 validateForError={validateForError}
                 validator={validator}
             >
-                {contacts.map(({ email, isExternalUser, text = null, id }) => (
+                {contacts.map(({ email, isExternalUser, text = null, id, type }) => (
                     <ContactDatalistItem
                         getContactAvatarUrl={getContactAvatarUrl}
                         key={id}
                         id={id}
+                        type={type}
                         isExternal={isExternalUser}
                         name={text}
                         subtitle={email || groupLabel}

package/src/features/unified-share-modal/__tests__/__snapshots__/ContactsField.test.js.snap

@@ -155,6 +155,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="w@example.com"
     title="W User"
+    type="user"
   />
   <ContactDatalistItem
     id="12345"
@@ -164,6 +165,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="x@example.com"
     title="X User"
+    type="group"
   />
   <ContactDatalistItem
     id="23456"
@@ -173,6 +175,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="y@example.com"
     title="Y User"
+    type="user"
   />
   <ContactDatalistItem
     id="34567"
@@ -182,6 +185,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="z@example.com"
     title="Z User"
+    type="user"
   />
   <ContactDatalistItem
     id="12"
@@ -191,6 +195,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="a@example.com"
     title="a b"
+    type="user"
   />
   <ContactDatalistItem
     id="13"
@@ -200,6 +205,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="b@example.com"
     title="a b"
+    type="user"
   />
   <ContactDatalistItem
     id="14"
@@ -209,6 +215,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="c@example.com"
     title="a c"
+    type="user"
   />
   <ContactDatalistItem
     id="14"
@@ -218,6 +225,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="d@example.com"
     title="a d"
+    type="user"
   />
   <ContactDatalistItem
     id="14"
@@ -227,6 +235,7 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     showAvatar={false}
     subtitle="e@example.com"
     title="a e"
+    type="user"
   />
 </PillSelectorDropdown>
 `;

package/src/features/unified-share-modal/types.ts

@@ -4,6 +4,6 @@ export interface ContactType {
     isExternalUser?: boolean;
     name?: string;
     text?: string;
-    type?: string;
+    type?: string | null | undefined;
     value?: string;
 }