New: Add root folder from Media Management settings

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

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>

frontend/src/Settings/MediaManagement/RootFolder/AddRootFolder.css

@@ -0,0 +1,7 @@
+.addRootFolderButtonContainer {
+  margin-top: 20px;
+}
+
+.importButtonIcon {
+  margin-right: 8px;
+}

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;

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);