From 2366ce093110d57a11c87a1d74108e83478e28fe Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Sun, 4 Aug 2019 22:49:44 -0400
Subject: [PATCH] New: Add root folder from Media Management settings

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
---
 .../MediaManagement/MediaManagement.js        |  2 +
 .../RootFolder/AddRootFolder.css              |  7 ++
 .../RootFolder/AddRootFolder.js               | 71 +++++++++++++++++++
 .../RootFolder/AddRootFolderConnector.js      | 13 ++++
 4 files changed, 93 insertions(+)
 create mode 100644 frontend/src/Settings/MediaManagement/RootFolder/AddRootFolder.css
 create mode 100644 frontend/src/Settings/MediaManagement/RootFolder/AddRootFolder.js
 create mode 100644 frontend/src/Settings/MediaManagement/RootFolder/AddRootFolderConnector.js

diff --git a/frontend/src/Settings/MediaManagement/MediaManagement.js b/frontend/src/Settings/MediaManagement/MediaManagement.js
index a3ec06102..19c0b101f 100644
--- a/frontend/src/Settings/MediaManagement/MediaManagement.js
+++ b/frontend/src/Settings/MediaManagement/MediaManagement.js
@@ -12,6 +12,7 @@ import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import RootFoldersConnector from 'RootFolder/RootFoldersConnector';
 import NamingConnector from './Naming/NamingConnector';
+import AddRootFolderConnector from './RootFolder/AddRootFolderConnector';
 
 const rescanAfterRefreshOptions = [
   { key: 'always', value: 'Always' },
@@ -395,6 +396,7 @@ class MediaManagement extends Component {
 
           <FieldSet legend="Root Folders">
             <RootFoldersConnector />
+            <AddRootFolderConnector />
           </FieldSet>
         </PageContentBodyConnector>
       </PageContent>
diff --git a/frontend/src/Settings/MediaManagement/RootFolder/AddRootFolder.css b/frontend/src/Settings/MediaManagement/RootFolder/AddRootFolder.css
new file mode 100644
index 000000000..19b1880be
--- /dev/null
+++ b/frontend/src/Settings/MediaManagement/RootFolder/AddRootFolder.css
@@ -0,0 +1,7 @@
+.addRootFolderButtonContainer {
+  margin-top: 20px;
+}
+
+.importButtonIcon {
+  margin-right: 8px;
+}
diff --git a/frontend/src/Settings/MediaManagement/RootFolder/AddRootFolder.js b/frontend/src/Settings/MediaManagement/RootFolder/AddRootFolder.js
new file mode 100644
index 000000000..3da2a55b9
--- /dev/null
+++ b/frontend/src/Settings/MediaManagement/RootFolder/AddRootFolder.js
@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { icons, kinds, sizes } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import Icon from 'Components/Icon';
+import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
+import styles from './AddRootFolder.css';
+
+class AddRootFolder extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isAddNewRootFolderModalOpen: false
+    };
+  }
+
+  //
+  // Lifecycle
+
+  onAddNewRootFolderPress = () => {
+    this.setState({ isAddNewRootFolderModalOpen: true });
+  }
+
+  onNewRootFolderSelect = ({ value }) => {
+    this.props.onNewRootFolderSelect(value);
+  }
+
+  onAddRootFolderModalClose = () => {
+    this.setState({ isAddNewRootFolderModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <div className={styles.addRootFolderButtonContainer}>
+        <Button
+          kind={kinds.PRIMARY}
+          size={sizes.LARGE}
+          onPress={this.onAddNewRootFolderPress}
+        >
+          <Icon
+            className={styles.importButtonIcon}
+            name={icons.DRIVE}
+          />
+          Add Root Folder
+        </Button>
+
+        <FileBrowserModal
+          isOpen={this.state.isAddNewRootFolderModalOpen}
+          name="rootFolderPath"
+          value=""
+          onChange={this.onNewRootFolderSelect}
+          onModalClose={this.onAddRootFolderModalClose}
+        />
+      </div>
+    );
+  }
+}
+
+AddRootFolder.propTypes = {
+  onNewRootFolderSelect: PropTypes.func.isRequired
+};
+
+export default AddRootFolder;
diff --git a/frontend/src/Settings/MediaManagement/RootFolder/AddRootFolderConnector.js b/frontend/src/Settings/MediaManagement/RootFolder/AddRootFolderConnector.js
new file mode 100644
index 000000000..cd5f4c50d
--- /dev/null
+++ b/frontend/src/Settings/MediaManagement/RootFolder/AddRootFolderConnector.js
@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import AddRootFolder from './AddRootFolder';
+import { addRootFolder } from 'Store/Actions/rootFolderActions';
+
+function createMapDispatchToProps(dispatch) {
+  return {
+    onNewRootFolderSelect(path) {
+      dispatch(addRootFolder({ path }));
+    }
+  };
+}
+
+export default connect(null, createMapDispatchToProps)(AddRootFolder);