New: Show relative file name when selecting movie in Manual Import

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js

@@ -253,6 +253,7 @@ class InteractiveImportRow extends Component {
         <SelectMovieModal
           isOpen={isSelectMovieModalOpen}
           ids={[id]}
+          relativePath={relativePath}
           onModalClose={this.onSelectMovieModalClose}
         />
 

frontend/src/InteractiveImport/Movie/SelectMovieModalContent.css

@@ -16,3 +16,36 @@
 .scroller {
   flex: 1 1 auto;
 }
+
+.footer {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.path {
+  margin-right: 20px;
+  color: $dimColor;
+}
+
+.buttons {
+  display: flex;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .footer {
+    display: block;
+  }
+
+  .path {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .buttons {
+    justify-content: space-between;
+    flex-grow: 1;
+  }
+}

frontend/src/InteractiveImport/Movie/SelectMovieModalContent.js

@@ -37,6 +37,7 @@ class SelectMovieModalContent extends Component {
   render() {
     const {
       items,
+      relativePath,
       onMovieSelect,
       onModalClose
     } = this.props;
@@ -46,7 +47,9 @@ class SelectMovieModalContent extends Component {
     return (
       <ModalContent onModalClose={onModalClose}>
         <ModalHeader>
-          Manual Import - Select Movie
+          <div className={styles.header}>
+            Manual Import - Select Movie
+          </div>
         </ModalHeader>
 
         <ModalBody
@@ -81,10 +84,13 @@ class SelectMovieModalContent extends Component {
           </Scroller>
         </ModalBody>
 
-        <ModalFooter>
+        <ModalFooter className={styles.footer}>
-          <Button onPress={onModalClose}>
+          <div className={styles.path}>{relativePath}</div>
-            Cancel
+          <div className={styles.buttons}>
-          </Button>
+            <Button onPress={onModalClose}>
+              Cancel
+            </Button>
+          </div>
         </ModalFooter>
       </ModalContent>
     );
@@ -93,6 +99,7 @@ class SelectMovieModalContent extends Component {
 
 SelectMovieModalContent.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  relativePath: PropTypes.string.isRequired,
   onMovieSelect: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };