#48: Support pinning files to cache [partial]

src/containers/Configuration/Configuration.css

@@ -3,4 +3,8 @@
   height: calc(100vh - (var(--default_spacing) * 4));
   padding: var(--default_spacing);
   margin: 0;
-}
+}
+
+.ConfigurationLink {
+  cursor: pointer;
+}

src/containers/Configuration/Configuration.js

@@ -8,6 +8,7 @@ import Modal from '../../components/UI/Modal/Modal';
 import IPCContainer from '../IPCContainer/IPCContainer';
 import {displayConfiguration} from '../../redux/actions/mount_actions';
 import {notifyError} from '../../redux/actions/error_actions';
+import {displayPinnedManager} from '../../redux/actions/pinned_manager_actions';
 
 const Constants = require('../../constants');
 
@@ -339,7 +340,14 @@ class Configuration extends IPCContainer {
       <div className={'Configuration'}>
         {confirmSave}
         <Box dxDark dxStyle={{padding: 'var(--default_spacing)'}}>
-          <div style={{float: 'right', margin: 0, padding: 0, marginTop: '-4px', boxSizing: 'border-box', display: 'block'}}>
+          <div style={{
+            float: 'right',
+            margin: 0,
+            padding: 0,
+            marginTop: '-4px',
+            boxSizing: 'border-box',
+            display: 'block'
+          }}>
             <a href={'#'}
                onClick={this.checkSaveRequired}
                style={{cursor: 'pointer'}}>X</a>
@@ -347,7 +355,13 @@ class Configuration extends IPCContainer {
           <h1 style={{width: '100%', textAlign: 'center'}}>{(
             this.props.DisplayRemoteConfiguration ?
               this.props.DisplayConfiguration.substr(6) :
-              this.props.DisplayConfiguration) + ' Configuration'}</h1>
+              this.props.DisplayConfiguration) + ' Configuration '}<a href={'#'}
+                                                                      className={'ConfigurationLink'}
+                                                                      onClick={() => {
+                                                                        this.props.displayPinnedManager(true);
+                                                                        return false;
+                                                                      }}><u>Pinned Files</u></a>
+          </h1>
           <div style={{overflowY: 'auto', height: '90%'}}>
             {objectItems}
             {(configurationItems.length > 0) ? <h2>Settings</h2> : null}
@@ -370,6 +384,7 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
   return {
+    displayPinnedManager: display => dispatch(displayPinnedManager(display)),
     notifyError: (msg, critical, callback) => dispatch(notifyError(msg, critical, callback)),
     hideConfiguration: () => dispatch(displayConfiguration(null, false)),
   }

src/containers/PinnedManager/PinnedManager.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import './PinnedManager.css';
+import {connect} from 'react-redux';
+import IPCContainer from '../IPCContainer/IPCContainer';
+import {notifyApplicationBusy} from '../../redux/actions/common_actions';
+import {notifyError, notifyInfo} from '../../redux/actions/error_actions';
+import Box from '../../components/UI/Box/Box';
+import {displayPinnedManager} from '../../redux/actions/pinned_manager_actions';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {
+  faCheckSquare, faChevronDown,
+  faChevronRight, faFile, faFolder, faFolderOpen,
+  faHSquare, faMinusSquare, faPlusSquare,
+  faSquare
+} from '@fortawesome/free-solid-svg-icons';
+import Button from '../../components/UI/Button/Button';
+
+const mapDispatchToProps = dispatch => {
+  return {
+    displayPinnedManager: display => dispatch(displayPinnedManager(display)),
+    notifyApplicationBusy: busy => dispatch(notifyApplicationBusy(busy, true)),
+    notifyError: msg => dispatch(notifyError(msg)),
+    notifyInfo: (title, msg) => dispatch(notifyInfo(title, msg)),
+  }
+};
+
+export default connect(null, mapDispatchToProps)(class extends IPCContainer {
+  state = {
+    active_directory: '/',
+    items: [],
+  }
+
+  componentDidMount() {
+  }
+
+  componentWillUnmount() {
+    super.componentWillUnmount();
+  }
+
+  render() {
+    return (
+      <Box dxDark dxStyle={{
+        height: 'calc(100vh - (var(--default_spacing) * 4)',
+        padding: 'var(--default_spacing)',
+        width: 'calc(100vw - (var(--default_spacing) * 4)'
+      }}>
+        <div
+          style={{
+            float: 'right',
+            margin: 0,
+            padding: 0,
+            marginTop: '-4px',
+            boxSizing: 'border-box',
+            display: 'block'
+          }}>
+          <a href={'#'}
+             onClick={() => this.props.displayPinnedManager(false)}
+             style={{cursor: 'pointer'}}>X</a>
+        </div>
+        <h1 style={{width: '100%', textAlign: 'center'}}>{'Pinned File Manager'}</h1>
+        <div className={'PinnedManagerItems'}>
+
+        </div>
+      </Box>
+    )
+  }
+});