box-ui-elements 16.0.0-beta.9 → 16.0.0

package/src/elements/common/current-user/__tests__/withCurrentUser.test.tsx

@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { ComponentWithCurrentUser, CurrentUserState, WithCurrentUserProps } from '../withCurrentUser';
+import { withCurrentUser } from '../index';
+// @ts-ignore no ts defintion
+import messages from '../../messages';
+
+const { defaultErrorMaskSubHeaderMessage, currentUserErrorHeaderMessage } = messages;
+
+type WrappedProps = Partial<WithCurrentUserProps>;
+type WrapperType = ShallowWrapper<WrappedProps, CurrentUserState, Component & ComponentWithCurrentUser>;
+
+jest.mock('../../api-context/withAPIContext', () => (div: React.Component) => div);
+
+describe('elements/common/current-user/withCurrentUser', () => {
+    const usersAPI = {
+        getUser: jest.fn(),
+    };
+
+    const api = {
+        getUsersAPI: () => usersAPI,
+    };
+
+    const file = {
+        id: 'id',
+    };
+
+    const MockComponent = (props: WithCurrentUserProps) => <div {...props} />;
+    const WrappedComponent = withCurrentUser(MockComponent);
+
+    const getWrapper = (props: WrappedProps = {}): WrapperType =>
+        shallow(<WrappedComponent api={api} file={file} {...props} />);
+
+    const currentUser = {
+        id: 'foo',
+    };
+
+    let instance: React.Component<{}, {}, {}> & ComponentWithCurrentUser;
+    let wrapper: WrapperType;
+
+    describe('fetchCurrentUser()', () => {
+        beforeEach(() => {
+            wrapper = getWrapper();
+            instance = wrapper.instance();
+        });
+
+        test('should invoke setState() directly if user parameter is not missing', () => {
+            instance.setState = jest.fn();
+            instance.fetchCurrentUser(currentUser);
+
+            expect(instance.setState).toBeCalledWith({
+                currentUser,
+                currentUserError: undefined,
+            });
+        });
+
+        test('should get the user', () => {
+            instance.fetchCurrentUser();
+
+            expect(usersAPI.getUser).toBeCalled();
+        });
+    });
+
+    describe('fetchCurrentUserSuccessCallback()', () => {
+        beforeEach(() => {
+            wrapper = getWrapper();
+            instance = wrapper.instance();
+            instance.setState = jest.fn();
+        });
+
+        test('should set the feedItems in the state', () => {
+            instance.fetchCurrentUserSuccessCallback(currentUser);
+            expect(instance.setState).toBeCalledWith({
+                currentUser,
+                currentUserError: undefined,
+            });
+        });
+    });
+
+    describe('fetchCurrentUserErrorCallback()', () => {
+        beforeEach(() => {
+            wrapper = getWrapper({ file });
+            instance = wrapper.instance();
+            instance.errorCallback = jest.fn();
+            instance.fetchCurrentUser = jest.fn();
+        });
+
+        test('should set a maskError if there is an error in fetching the current user', () => {
+            instance.fetchCurrentUserErrorCallback({}, '404');
+            const inlineErrorState = wrapper.state().currentUserError.maskError;
+
+            expect(typeof currentUserErrorHeaderMessage).toBe('object');
+            expect(typeof defaultErrorMaskSubHeaderMessage).toBe('object');
+            expect(inlineErrorState.errorHeader).toEqual(currentUserErrorHeaderMessage);
+            expect(inlineErrorState.errorSubHeader).toEqual(defaultErrorMaskSubHeaderMessage);
+        });
+
+        test('should set the current user error and call the error callback', () => {
+            instance.setState = jest.fn();
+            instance.fetchCurrentUserErrorCallback({ status: 500 }, '500');
+            expect(instance.setState).toBeCalledWith({
+                currentUser: undefined,
+                currentUserError: expect.any(Object),
+            });
+            expect(instance.errorCallback).toBeCalled();
+        });
+    });
+});

package/src/elements/common/current-user/index.js.flow

@@ -0,0 +1,8 @@
+/**
+ * Flowtype definitions for index.ts
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.10.0
+ */
+
+declare export { default } from "./withCurrentUser";
+declare export { default as withCurrentUser } from "./withCurrentUser";

package/src/elements/common/current-user/index.ts

@@ -0,0 +1,2 @@
+export { default } from './withCurrentUser';
+export { default as withCurrentUser } from './withCurrentUser';

package/src/elements/common/current-user/withCurrentUser.js.flow

@@ -0,0 +1,40 @@
+/**
+ * Flowtype definitions for withCurrentUser.tsx
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.10.0
+ */
+
+import React from "react";
+import messages from "../messages";
+import { withAPIContext } from "../api-context";
+import { getBadItemError } from "../../../utils/error";
+import { ElementsXhrError, ErrorContextProps } from "../../../common/types/api";
+import { Errors } from "../flowTypes";
+import { User } from "../../../common/types/core";
+export type WithCurrentUserProps = {
+  currentUser?: User,
+  currentUserError?: Errors,
+  ...
+} & ErrorContextProps;
+export type ComponentWithCurrentUser = {
+  errorCallback: (
+    error: ElementsXhrError,
+    code: string,
+    contextInfo: Object
+  ) => void,
+  fetchCurrentUser: (user?: User, shouldDestroy?: boolean) => void,
+  fetchCurrentUserErrorCallback: (e: ElementsXhrError, code: string) => Errors,
+  fetchCurrentUserSuccessCallback: (currentUser: User) => void,
+  ...
+};
+export type CurrentUserState = {
+  currentUser?: User,
+  currentUserError?: Errors,
+  ...
+};
+export type WithCurrentUserComponent<P> = React.ComponentClass<
+  P & WithCurrentUserProps
+>;
+declare export default function withCurrentUser<P: { [key: string]: any }>(
+  WrappedComponent: React.ComponentType<P & WithCurrentUserProps>
+): WithCurrentUserComponent<P>;

package/src/elements/common/current-user/withCurrentUser.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+// @ts-ignore: no ts definition
+import messages from '../messages';
+// @ts-ignore: no ts definition
+import { withAPIContext } from '../api-context';
+// @ts-ignore: no ts definition
+import { getBadItemError } from '../../../utils/error';
+// @ts-ignore: no ts definition
+// eslint-disable-next-line import/named
+import { ElementsXhrError, ErrorContextProps } from '../../../common/types/api';
+// @ts-ignore: no ts definition
+// eslint-disable-next-line import/named
+import { Errors } from '../flowTypes';
+// @ts-ignore: no ts definition
+// eslint-disable-next-line import/named
+import { User } from '../../../common/types/core';
+
+export type WithCurrentUserProps = {
+    currentUser?: User;
+    currentUserError?: Errors;
+} & ErrorContextProps;
+
+export type ComponentWithCurrentUser = {
+    errorCallback: (error: ElementsXhrError, code: string, contextInfo: Object) => void;
+    fetchCurrentUser: (user?: User, shouldDestroy?: boolean) => void;
+    fetchCurrentUserErrorCallback: (e: ElementsXhrError, code: string) => Errors;
+    fetchCurrentUserSuccessCallback: (currentUser: User) => void;
+};
+
+export type CurrentUserState = {
+    currentUser?: User;
+    currentUserError?: Errors;
+};
+
+export type WithCurrentUserComponent<P> = React.ComponentClass<P & WithCurrentUserProps>;
+
+export default function withCurrentUser<P extends object>(
+    WrappedComponent: React.ComponentType<P & WithCurrentUserProps>,
+): WithCurrentUserComponent<P> {
+    class ComponentWithCurrentUser extends React.Component<P & WithCurrentUserProps, CurrentUserState> {
+        static displayName: string;
+
+        constructor(props: P & WithCurrentUserProps) {
+            super(props);
+            const { currentUser } = props;
+            this.state = { currentUser };
+        }
+
+        componentDidMount() {
+            const { currentUser } = this.state;
+            this.fetchCurrentUser(currentUser);
+        }
+
+        /**
+         * Network error callback
+         *
+         * @private
+         * @param {Error} error - Error object
+         * @param {Error} code - the code for the error
+         * @param {Object} contextInfo - the context info for the error
+         * @return {void}
+         */
+        errorCallback = (error: ElementsXhrError, code: string, contextInfo: Object = {}): void => {
+            // eslint-disable-next-line no-console
+            console.error(error);
+            this.props.onError(error, code, contextInfo);
+        };
+
+        /**
+         * Fetches a Users info
+         *
+         * @private
+         * @param {User} [user] - Box User. If missing, gets user that the current token was generated for.
+         * @param {boolean} shouldDestroy
+         * @return {void}
+         */
+        fetchCurrentUser = (user?: User, shouldDestroy = false): void => {
+            const { api, file } = this.props;
+
+            if (!file) {
+                throw getBadItemError();
+            }
+
+            if (typeof user === 'undefined') {
+                api.getUsersAPI(shouldDestroy).getUser(
+                    file.id,
+                    this.fetchCurrentUserSuccessCallback,
+                    this.fetchCurrentUserErrorCallback,
+                );
+            } else {
+                this.setState({ currentUser: user, currentUserError: undefined });
+            }
+        };
+
+        /**
+         * User fetch success callback
+         *
+         * @private
+         * @param {Object} currentUser - User info object
+         * @return {void}
+         */
+        fetchCurrentUserSuccessCallback = (currentUser: User): void => {
+            this.setState({ currentUser, currentUserError: undefined });
+        };
+
+        /**
+         * Handles a failed file user info fetch
+         *
+         * @private
+         * @param {ElementsXhrError} e - API error
+         * @return {void}
+         */
+        fetchCurrentUserErrorCallback = (e: ElementsXhrError, code: string) => {
+            this.setState({
+                currentUser: undefined,
+                currentUserError: {
+                    maskError: {
+                        errorHeader: messages.currentUserErrorHeaderMessage,
+                        errorSubHeader: messages.defaultErrorMaskSubHeaderMessage,
+                    },
+                },
+            });
+
+            this.errorCallback(e, code, {
+                error: e,
+            });
+        };
+
+        render() {
+            const { currentUser, currentUserError } = this.state;
+            return <WrappedComponent {...this.props} currentUser={currentUser} currentUserError={currentUserError} />;
+        }
+    }
+
+    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+    ComponentWithCurrentUser.displayName = `WithCurrentUser(${displayName})`;
+
+    return withAPIContext(ComponentWithCurrentUser);
+}

package/src/elements/common/flowTypes.js

@@ -1,4 +1,5 @@
 // @flow
+import type { MessageDescriptor } from 'react-intl';
 import {
     VIEW_MODE_GRID,
     VIEW_MODE_LIST,
@@ -54,14 +55,31 @@ type ModalOptions = {
     overlayClassName: string,
 };
 
+type MaskError = {
+    errorHeader: MessageDescriptor,
+    errorSubHeader?: MessageDescriptor,
+};
+
+type InlineError = {
+    content: MessageDescriptor,
+    title: MessageDescriptor,
+};
+
+type Errors = {
+    error?: MessageDescriptor,
+    inlineError?: InlineError,
+    maskError?: MaskError,
+};
+
 export type {
-    ViewMode,
+    AdditionalVersionInfo,
+    Alignment,
+    ElementOrigin,
     ErrorType,
+    Errors,
     GetAvatarUrlCallback,
     GetProfileUrlCallback,
-    AdditionalVersionInfo,
-    ElementOrigin,
-    Alignment,
     ModalOptions,
     Page,
+    ViewMode,
 };

package/src/elements/common/interactionTargets.js

@@ -32,6 +32,8 @@ export const DETAILS_TARGETS = {
 export const ACTIVITY_TARGETS = {
     ANNOTATION_OPTIONS_DELETE: 'activityfeed-annotation-delete',
     ANNOTATION_OPTIONS_EDIT: 'activityfeed-annotation-edit',
+    ANNOTATION_OPTIONS_RESOLVE: 'activityfeed-annotation-resolve',
+    ANNOTATION_OPTIONS_UNRESOLVE: 'activityfeed-annotation-unresolve',
     ANNOTATION_OPTIONS: 'activityfeedannotation', // component
     APPROVAL_FORM_ADD_TASK: 'activityfeed-apporvalformaddtask',
     APPROVAL_FORM_CANCEL: 'activityfeed-approvalformcancel',

package/src/elements/common/logger/Logger.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import noop from 'lodash/noop';
-import uuidv4 from 'uuid/v4';
+import { v4 as uuidv4 } from 'uuid';
 import { isMarkSupported } from '../../../utils/performance';
 import { EVENT_DATA_READY, EVENT_JS_READY } from './constants';
 import { METRIC_TYPE_PREVIEW, METRIC_TYPE_ELEMENTS_LOAD_METRIC } from '../../../constants';

package/src/elements/common/messages.js

@@ -362,6 +362,11 @@ const messages = defineMessages({
         description: 'Title for the sidebar access stats.',
         defaultMessage: 'Access Stats',
     },
+    sidebarContentInsights: {
+        id: 'be.sidebarContentInsights',
+        description: 'Title for the sidebar content insights.',
+        defaultMessage: 'Content Insights',
+    },
     sidebarShow: {
         id: 'be.sidebarShow',
         description: 'Label for the show sidebar button.',

package/src/elements/content-explorer/DeleteConfirmationDialog.js

@@ -14,6 +14,8 @@ import messages from '../common/messages';
 import { CLASS_MODAL_CONTENT, CLASS_MODAL_OVERLAY, CLASS_MODAL, TYPE_FOLDER } from '../../constants';
 import type { BoxItem } from '../../common/types/core';
 
+import './DeleteConfirmationDialog.scss';
+
 type Props = {
     appElement: HTMLElement,
     isLoading: boolean,
@@ -44,7 +46,7 @@ const DeleteConfirmationDialog = ({
             onRequestClose={onCancel}
             overlayClassName={CLASS_MODAL_OVERLAY}
             parentSelector={() => parentElement}
-            portalClassName={CLASS_MODAL}
+            portalClassName={`${CLASS_MODAL} be-modal-delete`}
         >
             <FormattedMessage {...message} values={{ name: item.name }} />
             <div className="be-modal-btns">

package/src/elements/content-explorer/DeleteConfirmationDialog.scss

@@ -0,0 +1,5 @@
+.be-modal.be-modal-delete {
+    .be-modal-dialog-content {
+        overflow-wrap: break-word;
+    }
+}

package/src/elements/content-explorer/stories/DeleteConfirmationDialog.stories.js

@@ -0,0 +1,60 @@
+// @flow
+import * as React from 'react';
+import { boolean } from '@storybook/addon-knobs';
+import { State, Store } from '@sambego/storybook-state';
+
+import PrimaryButton from '../../../components/primary-button/PrimaryButton';
+
+import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
+import notes from './DeleteConfirmationDialog.stories.md';
+
+export const deleteDialog = () => {
+    const componentStore = new Store({
+        isModalOpen: false,
+    });
+
+    const openModal = () =>
+        componentStore.set({
+            isModalOpen: true,
+        });
+
+    const closeModal = () => componentStore.set({ isModalOpen: false });
+
+    const rootElement = document.createElement('div');
+    const appElement = document.createElement('div');
+    rootElement.appendChild(appElement);
+    if (document.body) {
+        document.body.appendChild(rootElement);
+    }
+
+    return (
+        <State store={componentStore}>
+            {state => (
+                <div>
+                    <DeleteConfirmationDialog
+                        appElement={appElement}
+                        isLoading={boolean('isLoading', false)}
+                        isOpen={state.isModalOpen}
+                        item={{
+                            id: 'abcdefg',
+                            name:
+                                'somethinggjsdlkfjsdkajfksdajfdjsomethinggjsdlkfjsdkajfksdajfdjsomethinggjsdlkfjsdkajfksdajfdjsomethinggjsdlkfjsdkajfksdajfdjsomethinggjsdlkfjsdkajfksdajfdjsomethinggjsdlkfjsdkajfksdajfdjsomethinggjsdlkfjsdkajfksdajfdjsomethinggjsdlkfjsdkajfksdajfdjsomethinggjsdlkfjsdkajfksdajfdjsomethinggjsdlkfjsdkajfksdajfdjsomethinggjsdlkfjsdkajfksdajfdjsomethinggjsdlkfjsdkajfksdajfdjsomethinggjsdlkfjsdkajfksdajfdjsomethinggjsdlkfjsdkajfksdajfdjsomethinggjsdlkfjsdkajfksdajfdjsomethinggjsdlkfjsdkajfksdajfdj ',
+                        }}
+                        onCancel={closeModal}
+                        onDelete={() => {}}
+                        parentElement={rootElement}
+                    />
+                    <PrimaryButton onClick={openModal}>Launch DeleteConfirmationDialog</PrimaryButton>
+                </div>
+            )}
+        </State>
+    );
+};
+
+export default {
+    title: 'Elements|ContentExplorer|DeleteConfirmationDialog',
+    component: DeleteConfirmationDialog,
+    parameters: {
+        notes,
+    },
+};

package/src/elements/content-explorer/stories/DeleteConfirmationDialog.stories.md

@@ -0,0 +1 @@
+`import DeleteConfirmationDialog from 'src/elements/content-explorer/DeleteConfirmationDialog';`