feat(content-explorer): allow not using Portal when rendering modal (#…

…3501) * feat(content-explorer): allow not using Portal when rendering modal * feat(content-explorer): update test component renderer
box · Jan 31, 2024 · b096d38 · b096d38
1 parent 6e6a6d9
commit b096d38
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 2 deletions.
diff --git a/...atures/content-explorer/content-explorer-modal-container/ContentExplorerModalContainer.js b/...atures/content-explorer/content-explorer-modal-container/ContentExplorerModalContainer.js
@@ -145,6 +145,8 @@ class ContentExplorerModalContainer extends Component {
         listHeaderRenderer: PropTypes.func,
         /** Whether the new folder button should be shown */
         showCreateNewFolderButton: PropTypes.bool,
+        /** Whether the modals should be nested in a Portal or in a div */
+        shouldNotUsePortal: PropTypes.bool,
         /** Props for the search input */
         searchInputProps: PropTypes.object,
         /** Custom text for the choose button */
@@ -204,6 +206,7 @@ class ContentExplorerModalContainer extends Component {
             isCreatingFolder,
             createFolderError,
             initialFoldersPath,
+            shouldNotUsePortal,
             ...rest
         } = this.props;
         const { foldersPath, isNewFolderModalOpen } = this.state;
@@ -219,6 +222,7 @@ class ContentExplorerModalContainer extends Component {
                     isOpen
                     onEnterFolder={this.handleEnterFolder}
                     onCreateNewFolderButtonClick={this.handleCreateNewFolderButtonClick}
+                    shouldNotUsePortal={shouldNotUsePortal}
                     {...rest}
                 />
                 {isNewFolderModalOpen && (
@@ -230,6 +234,7 @@ class ContentExplorerModalContainer extends Component {
                         onCreateFolderInput={onCreateFolderInput}
                         isCreatingFolder={isCreatingFolder}
                         createFolderError={createFolderError}
+                        shouldNotUsePortal={shouldNotUsePortal}
                     />
                 )}
             </div>

diff --git a/...explorer/content-explorer-modal-container/__tests__/ContentExplorerModalContainer.test.js b/...explorer/content-explorer-modal-container/__tests__/ContentExplorerModalContainer.test.js
@@ -6,8 +6,8 @@ import ContentExplorerModalContainer from '../ContentExplorerModalContainer';
 describe('features/content-explorer/content-explorer-modal-container/ContentExplorerModalContainer', () => {
     const sandbox = sinon.sandbox.create();
     const initialSelectedItems = { '123': { id: '123', name: 'folder123' } };
-    const renderComponent = props =>
-        shallow(
+    const renderComponent = (props, renderer = shallow) =>
+        renderer(
             <ContentExplorerModalContainer
                 onRequestClose={() => {}}
                 isOpen
@@ -83,6 +83,20 @@ describe('features/content-explorer/content-explorer-modal-container/ContentExpl
             expect(wrapper.find('ContentExplorerModal').prop('onSelectedClick')).toEqual(onSelectedClick);
             expect(wrapper.find('ContentExplorerModal').prop('onSelectItem')).toEqual(onSelectItem);
         });
+
+        test('should render ContentExplorerModal and NewFolderModal in Portal by default', () => {
+            const wrapper = renderComponent({}, mount);
+            wrapper.setState({ isNewFolderModalOpen: true });
+
+            expect(wrapper.find('Portal').length).toBe(4);
+        });
+
+        test('should not render ContentExplorerModal and NewFolderModal in Portal if shouldNotUsePortal=true', () => {
+            const wrapper = renderComponent({ shouldNotUsePortal: true }, mount);
+            wrapper.setState({ isNewFolderModalOpen: true });
+
+            expect(wrapper.find('Portal').length).toBe(0);
+        });
     });
 
     describe('onNewFolderModalShown', () => {

diff --git a/src/features/content-explorer/content-explorer-modal/ContentExplorerModal.js b/src/features/content-explorer/content-explorer-modal/ContentExplorerModal.js
@@ -33,6 +33,7 @@ type Props = {
     onSelectedClick?: () => void,
     onSelectedItemsUpdate?: Function,
     onViewSelectedClick?: Function,
+    shouldNotUsePortal?: boolean,
     title?: string,
 };
 
@@ -47,6 +48,7 @@ const ContentExplorerModal = ({
     onRequestClose,
     onSelectedClick,
     onSelectItem,
+    shouldNotUsePortal = false,
     ...rest
 }: Props) => (
     <Modal
@@ -56,6 +58,7 @@ const ContentExplorerModal = ({
         })}
         isOpen={isOpen}
         onRequestClose={onRequestClose}
+        shouldNotUsePortal={shouldNotUsePortal}
     >
         {description}
         <ContentExplorer

diff --git a/...explorer/content-explorer-modal/__tests__/__snapshots__/ContentExplorerModal.test.js.snap b/...explorer/content-explorer-modal/__tests__/__snapshots__/ContentExplorerModal.test.js.snap
@@ -4,6 +4,7 @@ exports[`features/content-explorer/content-explorer-modal/ContentExplorerModal r
 <Modal
   className="content-explorer-modal"
   isOpen={true}
+  shouldNotUsePortal={false}
   style={
     {
       "backdrop": {},

diff --git a/src/features/content-explorer/new-folder-modal/NewFolderModal.js b/src/features/content-explorer/new-folder-modal/NewFolderModal.js
@@ -39,6 +39,8 @@ class NewFolderModal extends Component {
         isCreatingFolder: PropTypes.bool,
         /** Message that will be shown when there was an error creating the folder. */
         createFolderError: PropTypes.string,
+        /** Whether the modal should be nested in a Portal or in a div */
+        shouldNotUsePortal: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -47,6 +49,7 @@ class NewFolderModal extends Component {
         parentFolderName: '',
         isCreatingFolder: false,
         createFolderError: null,
+        shouldNotUsePortal: false,
     };
 
     constructor(props) {
@@ -82,6 +85,7 @@ class NewFolderModal extends Component {
             parentFolderName,
             isCreatingFolder,
             createFolderError,
+            shouldNotUsePortal,
         } = this.props;
         const { folderNameInput } = this.state;
 
@@ -93,6 +97,7 @@ class NewFolderModal extends Component {
                 focusElementSelector=".folder-name-input input"
                 isOpen={isOpen}
                 onRequestClose={onRequestClose}
+                shouldNotUsePortal={shouldNotUsePortal}
                 title={
                     <FormattedMessage
                         {...messages.newFolderModalTitle}