From c86309cfc0db2a2ae787a61d7a0fcd4ab0115d15 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Thu, 11 Jul 2019 19:32:11 -0700
Subject: [PATCH] New: Show relative file name when selecting episode in Manual
 Import

Closes #3197
---
 .../Episode/SelectEpisodeModalContent.css     | 32 +++++++++++++++++++
 .../Episode/SelectEpisodeModalContent.js      | 28 ++++++++++------
 .../Interactive/InteractiveImportRow.js       |  1 +
 3 files changed, 52 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.css

diff --git a/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.css b/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.css
new file mode 100644
index 000000000..0cef68a5e
--- /dev/null
+++ b/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.css
@@ -0,0 +1,32 @@
+.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;
+  }
+}
diff --git a/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.js b/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.js
index 8f8906839..3dbda3c48 100644
--- a/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.js
+++ b/frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.js
@@ -14,6 +14,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import SelectEpisodeRow from './SelectEpisodeRow';
+import styles from './SelectEpisodeModalContent.css';
 
 const columns = [
   {
@@ -83,6 +84,7 @@ class SelectEpisodeModalContent extends Component {
       isPopulated,
       error,
       items,
+      relativePath,
       sortKey,
       sortDirection,
       onSortPress,
@@ -100,7 +102,10 @@ class SelectEpisodeModalContent extends Component {
     return (
       <ModalContent onModalClose={onModalClose}>
         <ModalHeader>
-          Manual Import - Select Episode(s)
+          <div className={styles.header}>
+            Manual Import - Select Episode(s)
+          </div>
+
         </ModalHeader>
 
         <ModalBody>
@@ -152,17 +157,21 @@ class SelectEpisodeModalContent extends Component {
           }
         </ModalBody>
 
-        <ModalFooter>
-          <Button onPress={onModalClose}>
+        <ModalFooter className={styles.footer}>
+          <div className={styles.path}>{relativePath}</div>
+
+          <div className={styles.buttons}>
+            <Button onPress={onModalClose}>
             Cancel
-          </Button>
+            </Button>
 
-          <Button
-            kind={kinds.SUCCESS}
-            onPress={this.onEpisodesSelect}
-          >
+            <Button
+              kind={kinds.SUCCESS}
+              onPress={this.onEpisodesSelect}
+            >
             Select Episodes
-          </Button>
+            </Button>
+          </div>
         </ModalFooter>
       </ModalContent>
     );
@@ -174,6 +183,7 @@ SelectEpisodeModalContent.propTypes = {
   isPopulated: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  relativePath: PropTypes.string.isRequired,
   sortKey: PropTypes.string,
   sortDirection: PropTypes.string,
   onSortPress: PropTypes.func.isRequired,
diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js b/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js
index 16a9f8d00..68f2cab75 100644
--- a/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js
+++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js
@@ -340,6 +340,7 @@ class InteractiveImportRow extends Component {
           id={id}
           seriesId={series && series.id}
           seasonNumber={seasonNumber}
+          relativePath={relativePath}
           onModalClose={this.onSelectEpisodeModalClose}
         />