box-ui-elements 23.1.0 → 23.2.0

package/es/features/unified-share-modal/stories/UnifiedShareModal.stories.js

@@ -129,7 +129,7 @@ const contacts = [{
   collabID: '8',
   name: 'Wenbo',
   email: 'w@example.com',
-  type: 'user',
+  type: 'pending',
   hasCustomAvatar: false,
   translatedRole: 'Editor',
   userID: '8'
@@ -181,7 +181,7 @@ export const basic = () => {
         const collaborators = contacts.slice().map(contact => {
           // convert the existing contact entries to compatible collaborator entries in this example
           const collaborator = {
-            collabID: 1234,
+            collabID: contact.collabID,
             email: contact.email,
             id: contact.id,
             name: contact.name || '',
@@ -192,7 +192,8 @@ export const basic = () => {
               executeAt: contact.isExternalUser ? 'November 27, 2022' : ''
             },
             hasCustomAvatar: false,
-            imageURL: null
+            imageURL: null,
+            translatedRole: contact.translatedRole
           };
           return collaborator;
         });
@@ -775,7 +776,7 @@ export const withFormOnly = () => {
         const collaborators = contacts.slice().map(contact => {
           // convert the existing contact entries to compatible collaborator entries in this example
           const collaborator = {
-            collabID: 1234,
+            collabID: contact.collabID,
             email: contact.email,
             expiration: {
               executeAt: contact.isExternalUser ? 'November 27, 2022' : ''
@@ -946,6 +947,222 @@ export const withFormOnly = () => {
     }
   });
 };
+export const withRemoveCollaborators = () => {
+  const currentUserId = '0';
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [sharedLink, setSharedLink] = React.useState(DEFAULT_SHARED_LINK_STATE);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [collaboratorsList, setCollaboratorsList] = React.useState(INITIAL_STATE.collaboratorsList);
+  const closeModal = () => {
+    setIsOpen(false);
+    setSharedLink(DEFAULT_SHARED_LINK_STATE);
+    setCollaboratorsList({
+      collaborators: []
+    });
+  };
+  const fakeRequest = () => {
+    // submitting is used to disable input fields, and not to show the loading indicator
+    setIsSubmitting(true);
+    return new Promise(resolve => {
+      setTimeout(() => {
+        setIsSubmitting(false);
+        resolve();
+      }, 500);
+    });
+  };
+  const getInitialData = () => {
+    const initialPromise = fakeRequest();
+    const fetchCollaborators = new Promise(resolved => {
+      setTimeout(() => {
+        const collaborators = contacts.slice().map(contact => {
+          // convert the existing contact entries to compatible collaborator entries in this example
+          const collaborator = {
+            collabID: contact.collabID,
+            email: contact.email,
+            id: contact.id,
+            name: contact.name || '',
+            type: contact.type,
+            isExternalCollab: contact.isExternalUser || false,
+            userID: parseInt(contact.id, 10),
+            expiration: {
+              executeAt: contact.isExternalUser ? 'November 27, 2022' : ''
+            },
+            hasCustomAvatar: false,
+            imageURL: null,
+            translatedRole: contact.translatedRole,
+            isRemovable: currentUserId !== contact.userID
+          };
+          return collaborator;
+        });
+        setCollaboratorsList({
+          collaborators
+        });
+        resolved();
+      }, 1000);
+    });
+    return Promise.all([initialPromise, fetchCollaborators]);
+  };
+  return /*#__PURE__*/React.createElement("div", null, isOpen && /*#__PURE__*/React.createElement(UnifiedShareModal, {
+    canInvite: true,
+    changeSharedLinkAccessLevel: newLevel => {
+      return fakeRequest().then(() => {
+        const newSharedLink = _objectSpread(_objectSpread({}, sharedLink), {}, {
+          accessLevel: newLevel
+        });
+        setSharedLink(newSharedLink);
+        return newSharedLink;
+      });
+    },
+    changeSharedLinkPermissionLevel: newLevel => {
+      return fakeRequest().then(() => {
+        const newSharedLink = _objectSpread(_objectSpread({}, sharedLink), {}, {
+          permissionLevel: newLevel
+        });
+        setSharedLink(newSharedLink);
+        return newSharedLink;
+      });
+    },
+    collaboratorsList: collaboratorsList,
+    collaborationRestrictionWarning: "Collaboration invitations can only be sent to people within Box Corporate",
+    currentUserID: currentUserId,
+    getCollaboratorContacts: () => {
+      return Promise.resolve(contacts);
+    },
+    getSharedLinkContacts: () => {
+      return Promise.resolve(contacts);
+    },
+    getInitialData: getInitialData,
+    inviteePermissions: [{
+      default: false,
+      text: 'Co-owner',
+      value: 'Co-owner'
+    }, {
+      default: true,
+      text: 'Editor',
+      value: 'Editor'
+    }, {
+      default: false,
+      text: 'Viewer Uploader',
+      value: 'Viewer Uploader'
+    }, {
+      default: false,
+      text: 'Previewer Uploader',
+      value: 'Previewer Uploader'
+    }, {
+      default: false,
+      text: 'Viewer',
+      value: 'Viewer'
+    }, {
+      default: false,
+      text: 'Previewer',
+      value: 'Previewer'
+    }, {
+      default: false,
+      text: 'Uploader',
+      value: 'Uploader'
+    }],
+    isOpen: isOpen,
+    isToggleEnabled: true,
+    item: ITEM,
+    onAddLink: () => {
+      fakeRequest().then(() => {
+        setSharedLink({
+          accessLevel: 'peopleInYourCompany',
+          allowedAccessLevels: {
+            peopleWithTheLink: true,
+            peopleInYourCompany: true,
+            peopleInThisItem: true
+          },
+          canChangeAccessLevel: true,
+          enterpriseName: 'Box',
+          expirationTimestamp: 1509173940,
+          isDownloadAllowed: true,
+          isDownloadSettingAvailable: true,
+          isEditAllowed: true,
+          isEditSettingAvailable: true,
+          isNewSharedLink: true,
+          isPreviewAllowed: true,
+          permissionLevel: 'canViewDownload',
+          url: 'https://box.com/s/abcdefg'
+        });
+      });
+    },
+    onRemoveLink: () => {
+      fakeRequest().then(() => {
+        setSharedLink(DEFAULT_SHARED_LINK_STATE);
+        closeModal();
+      });
+    },
+    onRemoveCollaborator: async collaborator => {
+      await fakeRequest();
+      const collaborators = collaboratorsList.collaborators.filter(({
+        collabID
+      }) => collabID !== collaborator.collabID);
+      setCollaboratorsList({
+        collaborators
+      });
+    },
+    onRequestClose: closeModal
+    /* eslint-disable-next-line no-alert */,
+    onSettingsClick: () => alert('hi!'),
+    recommendedSharingTooltipCalloutName: "",
+    sendInvites: () => fakeRequest().then(() => {
+      closeModal();
+    }),
+    sendInvitesError: "",
+    sendSharedLink: () => fakeRequest().then(() => {
+      closeModal();
+    }),
+    sendSharedLinkError: "",
+    sharedLink: sharedLink,
+    showCalloutForUser: true,
+    showUpgradeOptions: true,
+    submitting: isSubmitting,
+    suggestedCollaborators: {
+      '2': {
+        id: '2',
+        userScore: 0.1,
+        name: 'David',
+        email: 'dt@example.com',
+        type: 'user'
+      },
+      '5': {
+        id: '5',
+        userScore: 0.2,
+        name: 'Will',
+        email: 'wy@example.com',
+        type: 'user'
+      },
+      '1': {
+        id: '1',
+        userScore: 0.5,
+        name: 'Jeff',
+        email: 'jt@example.com',
+        type: 'user'
+      },
+      '3': {
+        id: '3',
+        userScore: 2,
+        name: 'Yang',
+        email: 'yz@example.com',
+        type: 'user'
+      }
+    },
+    trackingProps: {
+      collaboratorListTracking: {},
+      inviteCollabsEmailTracking: {},
+      inviteCollabTracking: {},
+      modalTracking: {},
+      removeLinkConfirmModalTracking: {},
+      removeCollaboratorConfirmModalTracking: {},
+      sharedLinkEmailTracking: {},
+      sharedLinkTracking: {}
+    },
+    canRemoveCollaborators: true
+  }), /*#__PURE__*/React.createElement(Button, {
+    onClick: () => setIsOpen(true)
+  }, "Open USM Modal"));
+};
 export default {
   title: 'Features/UnifiedShareModal',
   component: UnifiedShareModal

package/es/features/unified-share-modal/stories/UnifiedShareModal.stories.js.flow

@@ -140,7 +140,7 @@ const contacts: Array<contactType> = [
         collabID: '8',
         name: 'Wenbo',
         email: 'w@example.com',
-        type: 'user',
+        type: 'pending',
         hasCustomAvatar: false,
         translatedRole: 'Editor',
         userID: '8',
@@ -199,7 +199,7 @@ export const basic = () => {
                 const collaborators: Array<collaboratorType> = contacts.slice().map(contact => {
                     // convert the existing contact entries to compatible collaborator entries in this example
                     const collaborator: collaboratorType = {
-                        collabID: 1234,
+                        collabID: contact.collabID,
                         email: contact.email,
                         id: contact.id,
                         name: contact.name || '',
@@ -209,6 +209,7 @@ export const basic = () => {
                         expiration: { executeAt: contact.isExternalUser ? 'November 27, 2022' : '' },
                         hasCustomAvatar: false,
                         imageURL: null,
+                        translatedRole: contact.translatedRole,
                     };
 
                     return collaborator;
@@ -766,7 +767,7 @@ export const withFormOnly = () => {
                 const collaborators: Array<collaboratorType> = contacts.slice().map(contact => {
                     // convert the existing contact entries to compatible collaborator entries in this example
                     const collaborator: collaboratorType = {
-                        collabID: 1234,
+                        collabID: contact.collabID,
                         email: contact.email,
                         expiration: { executeAt: contact.isExternalUser ? 'November 27, 2022' : '' },
                         imageURL: null,
@@ -920,6 +921,210 @@ export const withFormOnly = () => {
     );
 };
 
+export const withRemoveCollaborators = () => {
+    const currentUserId = '0';
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [sharedLink, setSharedLink] = React.useState<sharedLinkType>(DEFAULT_SHARED_LINK_STATE);
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
+    const [collaboratorsList, setCollaboratorsList] = React.useState<collaboratorsListType>(
+        INITIAL_STATE.collaboratorsList,
+    );
+
+    const closeModal = () => {
+        setIsOpen(false);
+        setSharedLink(DEFAULT_SHARED_LINK_STATE);
+        setCollaboratorsList({ collaborators: [] });
+    };
+
+    const fakeRequest = () => {
+        // submitting is used to disable input fields, and not to show the loading indicator
+        setIsSubmitting(true);
+        return new Promise(resolve => {
+            setTimeout(() => {
+                setIsSubmitting(false);
+                resolve();
+            }, 500);
+        });
+    };
+
+    const getInitialData = () => {
+        const initialPromise = fakeRequest();
+        const fetchCollaborators = new Promise(resolved => {
+            setTimeout(() => {
+                const collaborators: Array<collaboratorType> = contacts.slice().map(contact => {
+                    // convert the existing contact entries to compatible collaborator entries in this example
+                    const collaborator: collaboratorType = {
+                        collabID: contact.collabID,
+                        email: contact.email,
+                        id: contact.id,
+                        name: contact.name || '',
+                        type: contact.type,
+                        isExternalCollab: contact.isExternalUser || false,
+                        userID: parseInt(contact.id, 10),
+                        expiration: { executeAt: contact.isExternalUser ? 'November 27, 2022' : '' },
+                        hasCustomAvatar: false,
+                        imageURL: null,
+                        translatedRole: contact.translatedRole,
+                        isRemovable: currentUserId !== contact.userID,
+                    };
+
+                    return collaborator;
+                });
+
+                setCollaboratorsList({
+                    collaborators,
+                });
+                resolved();
+            }, 1000);
+        });
+        return Promise.all([initialPromise, fetchCollaborators]);
+    };
+
+    return (
+        <div>
+            {isOpen && (
+                <UnifiedShareModal
+                    canInvite
+                    changeSharedLinkAccessLevel={newLevel => {
+                        return fakeRequest().then(() => {
+                            const newSharedLink = {
+                                ...sharedLink,
+                                accessLevel: newLevel,
+                            };
+                            setSharedLink(newSharedLink);
+                            return newSharedLink;
+                        });
+                    }}
+                    changeSharedLinkPermissionLevel={newLevel => {
+                        return fakeRequest().then(() => {
+                            const newSharedLink = {
+                                ...sharedLink,
+                                permissionLevel: newLevel,
+                            };
+                            setSharedLink(newSharedLink);
+                            return newSharedLink;
+                        });
+                    }}
+                    collaboratorsList={collaboratorsList}
+                    collaborationRestrictionWarning="Collaboration invitations can only be sent to people within Box Corporate"
+                    currentUserID={currentUserId}
+                    getCollaboratorContacts={() => {
+                        return Promise.resolve(contacts);
+                    }}
+                    getSharedLinkContacts={() => {
+                        return Promise.resolve(contacts);
+                    }}
+                    getInitialData={getInitialData}
+                    inviteePermissions={[
+                        { default: false, text: 'Co-owner', value: 'Co-owner' },
+                        { default: true, text: 'Editor', value: 'Editor' },
+                        { default: false, text: 'Viewer Uploader', value: 'Viewer Uploader' },
+                        { default: false, text: 'Previewer Uploader', value: 'Previewer Uploader' },
+                        { default: false, text: 'Viewer', value: 'Viewer' },
+                        { default: false, text: 'Previewer', value: 'Previewer' },
+                        { default: false, text: 'Uploader', value: 'Uploader' },
+                    ]}
+                    isOpen={isOpen}
+                    isToggleEnabled
+                    item={ITEM}
+                    onAddLink={() => {
+                        fakeRequest().then(() => {
+                            setSharedLink({
+                                accessLevel: 'peopleInYourCompany',
+                                allowedAccessLevels: {
+                                    peopleWithTheLink: true,
+                                    peopleInYourCompany: true,
+                                    peopleInThisItem: true,
+                                },
+                                canChangeAccessLevel: true,
+                                enterpriseName: 'Box',
+                                expirationTimestamp: 1509173940,
+                                isDownloadAllowed: true,
+                                isDownloadSettingAvailable: true,
+                                isEditAllowed: true,
+                                isEditSettingAvailable: true,
+                                isNewSharedLink: true,
+                                isPreviewAllowed: true,
+                                permissionLevel: 'canViewDownload',
+                                url: 'https://box.com/s/abcdefg',
+                            });
+                        });
+                    }}
+                    onRemoveLink={() => {
+                        fakeRequest().then(() => {
+                            setSharedLink(DEFAULT_SHARED_LINK_STATE);
+                            closeModal();
+                        });
+                    }}
+                    onRemoveCollaborator={async (collaborator: collaboratorType) => {
+                        await fakeRequest();
+                        const collaborators = collaboratorsList.collaborators.filter(
+                            ({ collabID }) => collabID !== collaborator.collabID,
+                        );
+                        setCollaboratorsList({ collaborators });
+                    }}
+                    onRequestClose={closeModal}
+                    /* eslint-disable-next-line no-alert */
+                    onSettingsClick={() => alert('hi!')}
+                    recommendedSharingTooltipCalloutName=""
+                    sendInvites={() =>
+                        fakeRequest().then(() => {
+                            closeModal();
+                        })
+                    }
+                    sendInvitesError=""
+                    sendSharedLink={() =>
+                        fakeRequest().then(() => {
+                            closeModal();
+                        })
+                    }
+                    sendSharedLinkError=""
+                    sharedLink={sharedLink}
+                    showCalloutForUser
+                    showUpgradeOptions
+                    submitting={isSubmitting}
+                    suggestedCollaborators={{
+                        '2': {
+                            id: '2',
+                            userScore: 0.1,
+                            name: 'David',
+                            email: 'dt@example.com',
+                            type: 'user',
+                        },
+                        '5': {
+                            id: '5',
+                            userScore: 0.2,
+                            name: 'Will',
+                            email: 'wy@example.com',
+                            type: 'user',
+                        },
+                        '1': {
+                            id: '1',
+                            userScore: 0.5,
+                            name: 'Jeff',
+                            email: 'jt@example.com',
+                            type: 'user',
+                        },
+                        '3': { id: '3', userScore: 2, name: 'Yang', email: 'yz@example.com', type: 'user' },
+                    }}
+                    trackingProps={{
+                        collaboratorListTracking: {},
+                        inviteCollabsEmailTracking: {},
+                        inviteCollabTracking: {},
+                        modalTracking: {},
+                        removeLinkConfirmModalTracking: {},
+                        removeCollaboratorConfirmModalTracking: {},
+                        sharedLinkEmailTracking: {},
+                        sharedLinkTracking: {},
+                    }}
+                    canRemoveCollaborators
+                />
+            )}
+            <Button onClick={() => setIsOpen(true)}>Open USM Modal</Button>
+        </div>
+    );
+};
+
 export default {
     title: 'Features/UnifiedShareModal',
     component: UnifiedShareModal,