Refactoring

src/containers/MountItems/MountItem/MountItem.css

@@ -0,0 +1,19 @@
+.MountItem {
+  padding: 0;
+  margin: 0;
+  height: 56px;
+  overflow: visible;
+}
+
+input.MountItemInput {
+  margin: 0;
+  padding: 4px;
+  border-radius: var(--border_radius);
+  background: var(--control_background);
+  border: none;
+  box-shadow: none;
+  outline: none;
+  color: var(--text_color);
+  box-sizing: border-box;
+  width: 100%;
+}

src/containers/MountItems/MountItem/MountItem.js

@@ -0,0 +1,184 @@
+import React from 'react';
+import './MountItem.css';
+import {connect} from 'react-redux';
+import DropDown from '../../../components/UI/DropDown/DropDown';
+import Button from '../../../components/UI/Button/Button';
+import Loader from 'react-loader-spinner';
+import Text from '../../../components/UI/Text/Text';
+import Grid from '../../../components/UI/Grid/Grid';
+import configureImage from '../../../assets/images/configure.png';
+import RootElem from '../../../components/UI/RootElem/RootElem';
+import {displayConfiguration, removeRemoteMount, setProviderState} from '../../../redux/actions/mount_actions';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import { faTrashAlt} from '@fortawesome/free-solid-svg-icons';
+import CheckBox from '../../../components/UI/CheckBox/CheckBox';
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    MState: state.mounts.MountState[ownProps.provider],
+    Platform: state.common.Platform,
+    PState: state.mounts.ProviderState[ownProps.provider]
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    displayConfiguration: (provider, remote) => dispatch(displayConfiguration(provider, remote)),
+    removeRemoteMount: provider => dispatch(removeRemoteMount(provider)),
+    setProviderState: (provider, state) => dispatch(setProviderState(provider, state)),
+  }
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(props => {
+  const handleAutoMountChanged = e => {
+    const state = {
+      ...props.PState,
+      AutoMount: e.target.checked,
+    };
+    props.setProviderState(props.provider, state);
+  };
+
+  const handleAutoRestartChanged = e => {
+    const state = {
+      ...props.PState,
+      AutoRestart: e.target.checked,
+    };
+    props.setProviderState(props.provider, state);
+  };
+
+  let configButton = null;
+  let secondRow = 6;
+  if (props.allowConfig) {
+    const pointer = {cursor: props.MState.AllowMount ? 'pointer' : 'no-drop'};
+    configButton = (
+      <RootElem colSpan={4}
+                rowSpan={6}>
+        <img alt=''
+             height={'16px'}
+             onClick={props.MState.AllowMount ? ()=>props.displayConfiguration(props.provider, props.remote) : e=>{e.preventDefault();}}
+             src={configureImage}
+             style={{padding: 0, border: 0, margin: 0, ...pointer}}
+             width={'16px'}/>
+      </RootElem>
+    );
+  }
+
+  let inputColumnSpan;
+  let inputControls = null;
+  if (props.Platform === 'win32') {
+    inputColumnSpan = 20;
+    const index = props.MState.DriveLetters.indexOf(props.PState.MountLocation);
+    inputControls = <DropDown changed={props.changed}
+                              colSpan={inputColumnSpan}
+                              disabled={!props.MState.AllowMount || props.MState.Mounted}
+                              items={props.MState.DriveLetters}
+                              row={secondRow}
+                              rowSpan={7}
+                              selected={index >= 0 ? props.PState.MountLocation : ''}/>;
+
+  } else {
+    inputColumnSpan = 64;
+    inputControls = [];
+    let key = 0;
+    inputControls.push((
+      <RootElem colSpan={inputColumnSpan - 8}
+                key={'i' + key++}
+                row={secondRow}
+                rowSpan={7}>
+        <input disabled={!props.MState.AllowMount || props.MState.Mounted}
+               maxLength={4096}
+               onChange={props.changed}
+               size={4096}
+               className={'MountItemInput'}
+               type={'text'}
+               value={props.PState.MountLocation}/>
+      </RootElem>
+    ));
+    inputControls.push((
+      <Button clicked={()=>props.browseClicked(props.provider, props.PState.MountLocation)}
+              col={inputColumnSpan - 7}
+              colSpan={7}
+              disabled={props.MState.Mounted || !props.MState.AllowMount}
+              key={'b' + key++}
+              row={secondRow}
+              rowSpan={7}>...</Button>
+    ));
+  }
+
+  const buttonDisplay = props.MState.AllowMount ?
+    (props.MState.Mounted ? 'Unmount' : 'Mount') :
+    <Loader color={'var(--heading_text_color)'}
+            height={19}
+            type='Circles'
+            width={19}/>;
+
+  const actionsDisplay = (
+    <Button clicked={()=>props.clicked(props.provider, props.remote, !props.MState.Mounted, props.PState.MountLocation)}
+            col={inputColumnSpan + 2}
+            colSpan={21}
+            disabled={!props.MState.AllowMount}
+            row={secondRow}
+            rowSpan={7}>
+      {buttonDisplay}
+    </Button>);
+
+  const autoMountControl = (
+    <RootElem col={inputColumnSpan + 24}
+              colSpan={28}
+              row={secondRow}
+              rowSpan={7}>
+      <CheckBox changed={handleAutoMountChanged}
+                checked={props.PState.AutoMount} label={'Auto-mount'}/>
+    </RootElem>
+  );
+
+  const autoRestartControl = (
+    <RootElem col={inputColumnSpan + 24 + 28}
+              colSpan={24}
+              row={secondRow}
+              rowSpan={7}>
+      <CheckBox changed={handleAutoRestartChanged}
+                checked={props.PState.AutoRestart}
+                label={'Restart'}/>
+    </RootElem>
+  );
+
+  let removeControl;
+  if (props.remote) {
+    const removeDisabled = !props.MState.AllowMount || props.MState.Mounted;
+    const removeStyle = {
+      cursor: removeDisabled ? 'no-drop' : 'pointer'
+    };
+    const handleRemoveMount = () => {
+      if (!removeDisabled) {
+        props.removeRemoteMount(props.provider);
+      }
+    };
+    removeControl = (
+      <a col={dimensions=>dimensions.columns - 6}
+         href={void(0)}
+         onClick={handleRemoveMount}
+         row={secondRow + 3}
+         style={removeStyle}>
+      <FontAwesomeIcon icon={faTrashAlt}/>
+    </a>);
+  }
+
+  return (
+    <div className={'MountItem'}>
+      <Grid noScroll>
+        {configButton}
+        <Text
+          col={configButton ? 6 : 0}
+          rowSpan={5}
+          text={props.remote ? props.provider.substr(6) : props.provider}
+          type={'Heading1'}/>
+        {inputControls}
+        {actionsDisplay}
+        {autoMountControl}
+        {autoRestartControl}
+        {removeControl}
+      </Grid>
+    </div>
+  );
+});

src/containers/MountItems/MountItems.js

@@ -5,7 +5,7 @@ import Button from '../../components/UI/Button/Button';
 import {connect} from 'react-redux';
 import './MountItems.css';
 import Modal from '../../components/UI/Modal/Modal';
-import MountItem from '../../components/MountItem/MountItem';
+import MountItem from './MountItem/MountItem';
 import IPCContainer from '../IPCContainer/IPCContainer';
 import {
   resetMountsState,