DRYDOCK-367: content share changes for crooze

src/components/guide-tooltip/GuideTooltip.tsx

@@ -22,6 +22,7 @@ type Props = TooltipProps & {
     steps?: [number, number];
     primaryButtonProps?: JSX.LibraryManagedAttributes<typeof Button, Button['props']>;
     secondaryButtonProps?: JSX.LibraryManagedAttributes<typeof Button, Button['props']>;
+    container?: HTMLElement;
 };
 
 function GuideTooltip({
@@ -36,6 +37,7 @@ function GuideTooltip({
     secondaryButtonProps,
     showCloseButton = true,
     title,
+    container,
     ...rest
 }: Props) {
     return (
@@ -44,6 +46,7 @@ function GuideTooltip({
             className={`bdl-GuideTooltip ${className}`}
             isShown={isShown}
             showCloseButton={showCloseButton}
+            bodyElement={container}
             text={
                 <>
                     {icon && <div className="bdl-GuideTooltip-icon">{icon}</div>}

src/components/modal/Modal.js

@@ -15,6 +15,7 @@ type Props = {
     children: React.Node,
     /** Additional CSS classname of the `.modal` element */
     className?: string,
+    container?: HTMLElement,
     focusElementSelector?: string,
     isLoading?: boolean,
     isOpen?: boolean,
@@ -130,7 +131,8 @@ class Modal extends React.Component<Props> {
     };
 
     render() {
-        const { className, isLoading, isOpen, onRequestClose, shouldNotUsePortal, style, ...rest } = this.props;
+        const { className, isLoading, isOpen, onRequestClose, shouldNotUsePortal, style, container, ...rest } =
+            this.props;
 
         if (!isOpen) {
             return null;
@@ -148,7 +150,12 @@ class Modal extends React.Component<Props> {
         const WrapperComponent = shouldNotUsePortal ? 'div' : Portal;
         // Render a style tag to prevent body from scrolling as long as the Modal is open
         return (
-            <WrapperComponent className={classNames('modal', className)} onKeyDown={this.onKeyDown} tabIndex="-1">
+            <WrapperComponent
+                className={classNames('modal', className)}
+                onKeyDown={this.onKeyDown}
+                tabIndex="-1"
+                container={container}
+            >
                 {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
                 <div className="modal-backdrop" onClick={this.onBackdropClick} style={style.backdrop} />
                 <FocusTrap className="modal-dialog-container">

src/components/notification/NotificationsWrapper.js

@@ -6,10 +6,11 @@ import Portal from '../portal';
 
 type Props = {
     children?: React.Node,
+    container?: HTMLElement,
 };
 
-const NotificationsWrapper = ({ children }: Props) => (
-    <Portal className="notifications-wrapper" aria-live="polite">
+const NotificationsWrapper = ({ children, container }: Props) => (
+    <Portal className="notifications-wrapper" aria-live="polite" container={container}>
         {children ? <FocusTrap>{children}</FocusTrap> : null}
     </Portal>
 );

src/elements/content-sharing/ContentSharing.js

@@ -23,6 +23,7 @@ type ContentSharingProps = {
     apiHost: string,
     /** config - Configuration object that shows/hides features in the USM */
     config?: USMConfig,
+    container?: HTMLElement,
     /**
      * customButton - Clickable element for opening the SharingModal component.
      * This property should always be used in conjunction with displayInModal.
@@ -35,6 +36,7 @@ type ContentSharingProps = {
      * the modal will appear on page load. See ContentSharing.stories.js for examples.
      */
     displayInModal: boolean,
+    dropdownMenuClassname?: string,
     /** itemID - Box file or folder ID */
     itemID: string,
     /** itemType - "file" or "folder" */
@@ -68,6 +70,8 @@ function ContentSharing({
     messages,
     token,
     uuid,
+    container,
+    dropdownMenuClassname,
 }: ContentSharingProps) {
     const [api, setAPI] = React.useState<API | null>(createAPI(apiHost, itemID, itemType, token));
     const [launchButton, setLaunchButton] = React.useState<React.Element<any> | null>(null);
@@ -112,6 +116,8 @@ function ContentSharing({
                     messages={messages}
                     setIsVisible={setIsVisible}
                     uuid={uuid}
+                    container={container}
+                    dropdownMenuClassname={dropdownMenuClassname}
                 />
             )}
         </>

src/elements/content-sharing/SharingModal.js

@@ -49,7 +49,9 @@ import type {
 type SharingModalProps = {
     api: API,
     config?: USMConfig,
+    container?: HTMLElement,
     displayInModal: boolean,
+    dropdownMenuClassname?: string,
     isVisible: boolean,
     itemID: string,
     itemType: ItemType,
@@ -70,6 +72,8 @@ function SharingModal({
     messages,
     setIsVisible,
     uuid,
+    container,
+    dropdownMenuClassname,
 }: SharingModalProps) {
     const [item, setItem] = React.useState<itemFlowType | null>(null);
     const [sharedLink, setSharedLink] = React.useState<ContentSharingSharedLinkType | null>(null);
@@ -80,14 +84,10 @@ function SharingModal({
     const [collaboratorsList, setCollaboratorsList] = React.useState<collaboratorsListType | null>(null);
     const [onAddLink, setOnAddLink] = React.useState<null | SharedLinkUpdateLevelFnType>(null);
     const [onRemoveLink, setOnRemoveLink] = React.useState<null | SharedLinkUpdateLevelFnType>(null);
-    const [
-        changeSharedLinkAccessLevel,
-        setChangeSharedLinkAccessLevel,
-    ] = React.useState<null | SharedLinkUpdateLevelFnType>(null);
-    const [
-        changeSharedLinkPermissionLevel,
-        setChangeSharedLinkPermissionLevel,
-    ] = React.useState<null | SharedLinkUpdateLevelFnType>(null);
+    const [changeSharedLinkAccessLevel, setChangeSharedLinkAccessLevel] =
+        React.useState<null | SharedLinkUpdateLevelFnType>(null);
+    const [changeSharedLinkPermissionLevel, setChangeSharedLinkPermissionLevel] =
+        React.useState<null | SharedLinkUpdateLevelFnType>(null);
     const [onSubmitSettings, setOnSubmitSettings] = React.useState<null | SharedLinkUpdateSettingsFnType>(null);
     const [currentView, setCurrentView] = React.useState<string>(CONTENT_SHARING_VIEWS.UNIFIED_SHARE_MODAL);
     const [getContacts, setGetContacts] = React.useState<null | GetContactsFnType>(null);
@@ -263,6 +263,7 @@ function SharingModal({
                     setOnSubmitSettings={setOnSubmitSettings}
                     setSendInvites={setSendInvites}
                     setSharedLink={setSharedLink}
+                    container={container}
                 />
                 {isVisible && currentView === CONTENT_SHARING_VIEWS.SHARED_LINK_SETTINGS && (
                     <SharedLinkSettingsModal
@@ -276,10 +277,12 @@ function SharingModal({
                         submitting={isLoading}
                         {...sharedLink}
                         canChangeExpiration={canChangeExpiration && !!currentUserEnterpriseName}
+                        container={container}
                     />
                 )}
                 {isVisible && currentView === CONTENT_SHARING_VIEWS.UNIFIED_SHARE_MODAL && (
                     <UnifiedShareModal
+                        dropdownMenuClassname={dropdownMenuClassname}
                         canInvite={sharedLink.canInvite}
                         config={config}
                         changeSharedLinkAccessLevel={changeSharedLinkAccessLevel}
@@ -305,6 +308,7 @@ function SharingModal({
                             expirationTimestamp: expirationTimestamp ? expirationTimestamp / 1000 : null,
                         }} // the USM expects this value in seconds, while the SLSM expects this value in milliseconds
                         submitting={isLoading}
+                        container={container}
                     />
                 )}
             </>

src/elements/content-sharing/SharingNotification.js

@@ -40,6 +40,7 @@ type SharingNotificationProps = {
     closeComponent: () => void,
     closeSettings: () => void,
     collaboratorsList: collaboratorsListType | null,
+    container?: HTMLElement,
     currentUserID: string | null,
     getContacts: GetContactsFnType | null,
     isDownloadAvailable: boolean,
@@ -97,6 +98,7 @@ function SharingNotification({
     setOnSubmitSettings,
     setSendInvites,
     setSharedLink,
+    container,
 }: SharingNotificationProps) {
     const [notifications, setNotifications] = React.useState<{ [string]: typeof Notification }>({});
     const [notificationID, setNotificationID] = React.useState<number>(0);
@@ -170,42 +172,37 @@ function SharingNotification({
     };
 
     // Generate shared link CRUD functions for the item
-    const {
-        changeSharedLinkAccessLevel,
-        changeSharedLinkPermissionLevel,
-        onAddLink,
-        onRemoveLink,
-        onSubmitSettings,
-    } = useSharedLink(api, itemID, itemType, permissions, accessLevel, {
-        handleUpdateSharedLinkError: () => {
-            createNotification(TYPE_ERROR, contentSharingMessages.sharedLinkUpdateError);
-            setIsLoading(false);
-            closeSettings();
-        },
-        handleUpdateSharedLinkSuccess: itemData => {
-            createNotification(TYPE_INFO, contentSharingMessages.sharedLinkSettingsUpdateSuccess);
-            handleUpdateSharedLinkSuccess(itemData);
-            setIsLoading(false);
-            closeSettings();
-        },
-        handleRemoveSharedLinkError: () => {
-            createNotification(TYPE_ERROR, contentSharingMessages.sharedLinkUpdateError);
-            setIsLoading(false);
-            closeComponent(); // if this function is provided, it will close the modal
-        },
-        handleRemoveSharedLinkSuccess: itemData => {
-            createNotification(TYPE_INFO, contentSharingMessages.sharedLinkRemovalSuccess);
-            handleRemoveSharedLinkSuccess(itemData);
-            setIsLoading(false);
-            closeComponent();
-        },
-        setIsLoading,
-        transformAccess: newAccessLevel => USM_TO_API_ACCESS_LEVEL_MAP[newAccessLevel],
-        transformPermissions: newSharedLinkPermissionLevel =>
-            convertSharedLinkPermissions(newSharedLinkPermissionLevel),
-        transformSettings: (settings, access) =>
-            convertSharedLinkSettings(settings, access, isDownloadAvailable, serverURL),
-    });
+    const { changeSharedLinkAccessLevel, changeSharedLinkPermissionLevel, onAddLink, onRemoveLink, onSubmitSettings } =
+        useSharedLink(api, itemID, itemType, permissions, accessLevel, {
+            handleUpdateSharedLinkError: () => {
+                createNotification(TYPE_ERROR, contentSharingMessages.sharedLinkUpdateError);
+                setIsLoading(false);
+                closeSettings();
+            },
+            handleUpdateSharedLinkSuccess: itemData => {
+                createNotification(TYPE_INFO, contentSharingMessages.sharedLinkSettingsUpdateSuccess);
+                handleUpdateSharedLinkSuccess(itemData);
+                setIsLoading(false);
+                closeSettings();
+            },
+            handleRemoveSharedLinkError: () => {
+                createNotification(TYPE_ERROR, contentSharingMessages.sharedLinkUpdateError);
+                setIsLoading(false);
+                closeComponent(); // if this function is provided, it will close the modal
+            },
+            handleRemoveSharedLinkSuccess: itemData => {
+                createNotification(TYPE_INFO, contentSharingMessages.sharedLinkRemovalSuccess);
+                handleRemoveSharedLinkSuccess(itemData);
+                setIsLoading(false);
+                closeComponent();
+            },
+            setIsLoading,
+            transformAccess: newAccessLevel => USM_TO_API_ACCESS_LEVEL_MAP[newAccessLevel],
+            transformPermissions: newSharedLinkPermissionLevel =>
+                convertSharedLinkPermissions(newSharedLinkPermissionLevel),
+            transformSettings: (settings, access) =>
+                convertSharedLinkSettings(settings, access, isDownloadAvailable, serverURL),
+        });
 
     setChangeSharedLinkAccessLevel(() => changeSharedLinkAccessLevel);
     setChangeSharedLinkPermissionLevel(() => changeSharedLinkPermissionLevel);
@@ -267,7 +264,7 @@ function SharingNotification({
     }
 
     return (
-        <NotificationsWrapper>
+        <NotificationsWrapper container={container}>
             <>{[...Object.values(notifications)]}</>
         </NotificationsWrapper>
     );

src/elements/content-uploader/Footer.scss

@@ -18,6 +18,6 @@
 
     .bcu-footer-right {
         display: flex;
-        gap: tokens.$size-2;
+        // gap: tokens.$size-2;
     }
 }

src/features/shared-link-settings-modal/SharedLinkSettingsModal.js

@@ -55,6 +55,7 @@ class SharedLinkSettingsModal extends Component {
         dateFormat: PropTypes.string,
         hideVanityNameSection: PropTypes.bool,
         isOpen: PropTypes.bool,
+        container: PropTypes.element,
         onRequestClose: PropTypes.func,
         submitting: PropTypes.bool,
         warnOnPublic: PropTypes.bool,
@@ -293,13 +294,8 @@ class SharedLinkSettingsModal extends Component {
     }
 
     renderExpirationSection() {
-        const {
-            canChangeExpiration,
-            dateDisplayFormat,
-            dateFormat,
-            expirationCheckboxProps,
-            expirationInputProps,
-        } = this.props;
+        const { canChangeExpiration, dateDisplayFormat, dateFormat, expirationCheckboxProps, expirationInputProps } =
+            this.props;
         const { expirationDate, isExpirationEnabled, expirationError } = this.state;
 
         return (
@@ -404,6 +400,7 @@ class SharedLinkSettingsModal extends Component {
             onRequestClose,
             saveButtonProps,
             submitting,
+            container,
         } = this.props;
 
         const showInaccessibleSettingsNotice = !(
@@ -420,6 +417,7 @@ class SharedLinkSettingsModal extends Component {
                 isOpen={isOpen}
                 onRequestClose={submitting ? undefined : onRequestClose}
                 title={this.renderModalTitle()}
+                container={container}
                 {...modalProps}
             >
                 <form onSubmit={this.onSubmit}>

src/features/unified-share-modal/InviteePermissionsMenu.js

@@ -19,6 +19,7 @@ import type { inviteePermissionType } from './flowTypes';
 type Props = {
     changeInviteePermissionLevel: Function,
     disabled: boolean,
+    dropdownMenuClassname?: string,
     inviteePermissionLevel: string,
     inviteePermissions: Array<inviteePermissionType>,
     inviteePermissionsButtonProps?: Object,
@@ -76,6 +77,7 @@ class InviteePermissionsMenu extends Component<Props> {
             inviteePermissionLevel,
             disabled,
             itemType,
+            dropdownMenuClassname,
         } = this.props;
         const defaultPermissionLevel = getDefaultPermissionLevel(inviteePermissions);
         const selectedPermissionLevel = inviteePermissionLevel || defaultPermissionLevel;
@@ -121,7 +123,7 @@ class InviteePermissionsMenu extends Component<Props> {
         // the available vertical space. cannot use the constraint props here in short windows.
         return (
             <div className="be invitee-menu-wrap">
-                <DropdownMenu>
+                <DropdownMenu className={dropdownMenuClassname}>
                     {plainButtonWrap}
                     {this.renderMenu()}
                 </DropdownMenu>

src/features/unified-share-modal/RemoveLinkConfirmModal.js

@@ -11,6 +11,7 @@ import messages from './messages';
 
 type Props = {
     cancelButtonProps?: Object,
+    container?: HTMLElement,
     isOpen: boolean,
     modalProps?: Object,
     okayButtonProps?: Object,
@@ -38,6 +39,7 @@ class RemoveLinkConfirmModal extends Component<Props> {
             okayButtonProps,
             modalProps,
             cancelButtonProps,
+            container,
         } = this.props;
 
         return (
@@ -48,6 +50,7 @@ class RemoveLinkConfirmModal extends Component<Props> {
                 onRequestClose={submitting ? undefined : onRequestClose}
                 title={<FormattedMessage {...messages.removeLinkConfirmationTitle} />}
                 type="alert"
+                container={container}
                 {...modalProps}
             >
                 <FormattedMessage {...messages.removeLinkConfirmationDescription} />

src/features/unified-share-modal/SharedLinkAccessMenu.js

@@ -27,6 +27,7 @@ type Props = {
     accessLevelsDisabledReason: accessLevelsDisabledReasonType,
     allowedAccessLevels: allowedAccessLevelsType,
     changeAccessLevel: (newAccessLevel: accessLevelType) => Promise<{ accessLevel: accessLevelType }>,
+    dropdownMenuClassname?: string,
     enterpriseName?: string,
     itemType: ItemType,
     onDismissTooltip: () => void,
@@ -117,6 +118,7 @@ class SharedLinkAccessMenu extends React.Component<Props> {
             submitting,
             tooltipContent,
             trackingProps,
+            dropdownMenuClassname,
         } = this.props;
         const { onSharedLinkAccessMenuOpen, sharedLinkAccessMenuButtonProps } = trackingProps;
 
@@ -130,7 +132,11 @@ class SharedLinkAccessMenu extends React.Component<Props> {
                 text={tooltipContent}
                 theme="callout"
             >
-                <DropdownMenu onMenuOpen={onSharedLinkAccessMenuOpen} constrainToWindow>
+                <DropdownMenu
+                    onMenuOpen={onSharedLinkAccessMenuOpen}
+                    constrainToWindow
+                    className={dropdownMenuClassname}
+                >
                     <PlainButton
                         className={classNames('lnk', {
                             'is-disabled': submitting,