Merge pull request #9417 from metabase/cleanup-collection-action-modals

Cleanup collection action modals

frontend/src/metabase/components/CollectionLanding.jsx

@@ -153,7 +153,7 @@ class DefaultLanding extends React.Component {
       await Promise.all(
         this.state.selectedItems.map(item => item.setCollection(collection)),
       );
-      this.setState({ selectedItems: null, selectedAction: null });
+      this.handleCloseModal();
     } finally {
       this.handleBulkActionSuccess();
     }
@@ -166,6 +166,10 @@ class DefaultLanding extends React.Component {
     this.props.onSelectNone();
   };
 
+  handleCloseModal = () => {
+    this.setState({ selectedItems: null, selectedAction: null });
+  };
+
   render() {
     const {
       ancestors,
@@ -499,14 +503,12 @@ class DefaultLanding extends React.Component {
         </Box>
         {!_.isEmpty(selectedItems) &&
           selectedAction == "copy" && (
-            <Modal>
+            <Modal onClose={this.handleCloseModal}>
               <CollectionCopyEntityModal
                 entityObject={selectedItems[0]}
-                onClose={() =>
-                  this.setState({ selectedItems: null, selectedAction: null })
-                }
+                onClose={this.handleCloseModal}
                 onSaved={newEntityObject => {
-                  this.setState({ selectedItems: null, selectedAction: null });
+                  this.handleCloseModal();
                   this.handleBulkActionSuccess();
                 }}
               />
@@ -514,16 +516,14 @@ class DefaultLanding extends React.Component {
           )}
         {!_.isEmpty(selectedItems) &&
           selectedAction == "move" && (
-            <Modal>
+            <Modal onClose={this.handleCloseModal}>
               <CollectionMoveModal
                 title={
                   selectedItems.length > 1
                     ? t`Move ${selectedItems.length} items?`
                     : t`Move "${selectedItems[0].getName()}"?`
                 }
-                onClose={() =>
-                  this.setState({ selectedItems: null, selectedAction: null })
-                }
+                onClose={this.handleCloseModal}
                 onMove={this.handleBulkMove}
               />
             </Modal>

frontend/src/metabase/containers/CollectionMoveModal.jsx

@@ -3,10 +3,9 @@ import PropTypes from "prop-types";
 
 import { t } from "c-3po";
 
-import { Flex, Box } from "grid-styled";
-import Subhead from "metabase/components/Subhead";
+import { Flex } from "grid-styled";
 import Button from "metabase/components/Button";
-import Icon from "metabase/components/Icon";
+import ModalContent from "metabase/components/ModalContent";
 
 import CollectionPicker from "metabase/containers/CollectionPicker";
 
@@ -41,15 +40,7 @@ class CollectionMoveModal extends React.Component {
     const { selectedCollectionId } = this.state;
 
     return (
-      <Box p={3}>
-        <Flex align="center" mb={2}>
-          <Subhead>{this.props.title}</Subhead>
-          <Icon
-            name="close"
-            className="ml-auto"
-            onClick={() => this.props.onClose()}
-          />
-        </Flex>
+      <ModalContent title={this.props.title} onClose={this.props.onClose}>
         <CollectionPicker
           value={selectedCollectionId}
           onChange={selectedCollectionId =>
@@ -78,7 +69,7 @@ class CollectionMoveModal extends React.Component {
             {t`Move`}
           </Button>
         </Flex>
-      </Box>
+      </ModalContent>
     );
   }
 }