#48: Support pinning files to cache [partial]

src/containers/Configuration/Configuration.js

@@ -96,29 +96,29 @@ class Configuration extends IPCContainer {
   createItemList = (config, template) => {
     const objectList = [];
     const itemList = Object
-      .keys(config)
-      .map(key => {
-        return {
-          advanced: template[key] ? template[key].advanced : false,
-          hide_remote: template[key] ? template[key].hide_remote : false,
-          label: key,
-          remote: template[key] ? template[key].remote : false,
-          type: template[key] ? template[key].type : null,
-          value: (template[key] && (template[key].type === 'object')) ?
+    .keys(config)
+    .map(key => {
+      return {
+        advanced: template[key] ? template[key].advanced : false,
+        hide_remote: template[key] ? template[key].hide_remote : false,
+        label: key,
+        remote: template[key] ? template[key].remote : false,
+        type: template[key] ? template[key].type : null,
+        value: (template[key] && (template[key].type === 'object')) ?
+          config[key] :
+          (template[key] && (template[key].type === 'string_array')) ?
             config[key] :
-            (template[key] && (template[key].type === 'string_array')) ?
-              config[key] :
-              config[key].toString(),
-        };
-      })
-      .filter(i=> {
-        let ret = template[i.label];
-        if (ret && (template[i.label].type === 'object')) {
-          objectList.push(i);
-          ret = false;
-        }
-        return ret;
-      });
+            config[key].toString(),
+      };
+    })
+    .filter(i => {
+      let ret = template[i.label];
+      if (ret && (template[i.label].type === 'object')) {
+        objectList.push(i);
+        ret = false;
+      }
+      return ret;
+    });
     return {
       ObjectList: objectList,
       ItemList: itemList,
@@ -190,7 +190,7 @@ class Configuration extends IPCContainer {
     if (arg.data.Success) {
       this.setState({
         Template: arg.data.Template,
-      }, ()=> {
+      }, () => {
         this.sendRequest(Constants.IPC_Get_Config, {
           Provider: this.props.DisplayConfiguration,
           Remote: this.props.DisplayRemoteConfiguration,
@@ -214,7 +214,7 @@ class Configuration extends IPCContainer {
   saveAndClose = () => {
     this.setState({
       Saving: true,
-    }, ()=> {
+    }, () => {
       const changedItems = [];
       for (const item of this.state.ChangedItems) {
         changedItems.push({
@@ -274,12 +274,17 @@ class Configuration extends IPCContainer {
         <Modal>
           <Box dxStyle={{width: '40vw', padding: 'var(--default_spacing)'}}>
             <h1 style={{width: '100%', textAlign: 'center'}}>Save Changes?</h1>
-            <table width='100%'><tbody>
+            <table width='100%'>
+              <tbody>
               <tr>
-                <td align='center' width='50%'><Button clicked={this.saveAndClose} disabled={this.state.Saving}>Yes</Button></td>
-                <td align='center' width='50%'><Button clicked={this.props.hideConfiguration} disabled={this.state.Saving}>No</Button></td>
+                <td align='center' width='50%'><Button clicked={this.saveAndClose}
+                                                       disabled={this.state.Saving}>Yes</Button>
+                </td>
+                <td align='center' width='50%'><Button clicked={this.props.hideConfiguration}
+                                                       disabled={this.state.Saving}>No</Button></td>
               </tr>
-            </tbody></table>
+              </tbody>
+            </table>
           </Box>
         </Modal>
       );
@@ -301,7 +306,7 @@ class Configuration extends IPCContainer {
                   (!k.advanced || (this.state.ShowAdvanced && k.advanced && !k.remote) || this.showRemoteConfigItem(k, this.state.ObjectLookup[key])) ?
                     <ConfigurationItem advanced={k.advanced}
                                        autoFocus={shouldFocus}
-                                       changed={e=>this.handleObjectItemChanged(e, key, i)}
+                                       changed={e => this.handleObjectItemChanged(e, key, i)}
                                        grouping={key}
                                        items={this.state.Template[key].template[k.label].items}
                                        key={i}
@@ -318,23 +323,23 @@ class Configuration extends IPCContainer {
     }
 
     const configurationItems = this.state.ItemList
-      .map((k, i) => {
-        const shouldFocus = autoFocus;
-        autoFocus = false;
-        return (
-          ((!this.state.IsRemoteMount || !k.hide_remote) && (!k.advanced || (this.state.ShowAdvanced && k.advanced))) ?
-            <ConfigurationItem advanced={k.advanced}
-                               autoFocus={shouldFocus}
-                               changed={e=>this.handleItemChanged(e, i)}
-                               grouping={'Settings'}
-                               items={this.state.Template[k.label].items}
-                               key={i}
-                               label={k.label}
-                               template={this.state.Template[k.label]}
-                               value={k.value}/> :
-            null
-        );
-      });
+    .map((k, i) => {
+      const shouldFocus = autoFocus;
+      autoFocus = false;
+      return (
+        ((!this.state.IsRemoteMount || !k.hide_remote) && (!k.advanced || (this.state.ShowAdvanced && k.advanced))) ?
+          <ConfigurationItem advanced={k.advanced}
+                             autoFocus={shouldFocus}
+                             changed={e => this.handleItemChanged(e, i)}
+                             grouping={'Settings'}
+                             items={this.state.Template[k.label].items}
+                             key={i}
+                             label={k.label}
+                             template={this.state.Template[k.label]}
+                             value={k.value}/> :
+          null
+      );
+    });
 
     return (
       <div className={'Configuration'}>
@@ -355,14 +360,16 @@ class Configuration extends IPCContainer {
           <h1 style={{width: '100%', textAlign: 'center'}}>{(
             this.props.DisplayRemoteConfiguration ?
               this.props.DisplayConfiguration.substr(6) :
-              this.props.DisplayConfiguration) + ' Configuration '}<a href={'#'}
-                                                                      className={'ConfigurationLink'}
-                                                                      onClick={() => {
-                                                                        this.props.displayPinnedManager(true);
-                                                                        return false;
-                                                                      }}><u>Pinned Files</u></a>
+              this.props.DisplayConfiguration) + ' Configuration '}
           </h1>
           <div style={{overflowY: 'auto', height: '90%'}}>
+            {this.props.MState.Mounted ? <Button
+              buttonStyles={{width: 'auto', height: 'auto', marginLeft: 'auto', marginRight: '4px'}}
+              clicked={() => {
+                this.props.displayPinnedManager(true);
+                return false;
+              }}>&nbsp;Pinned File Manager...&nbsp;</Button> : null}
+            <div style={{marginBottom: '4px'}}/>
             {objectItems}
             {(configurationItems.length > 0) ? <h2>Settings</h2> : null}
             {configurationItems}
@@ -378,6 +385,7 @@ const mapStateToProps = state => {
     DisplayConfiguration: state.mounts.DisplayConfiguration,
     DisplayRemoteConfiguration: state.mounts.DisplayRemoteConfiguration,
     DisplayS3Configuration: state.mounts.DisplayS3Configuration,
+    MState: state.mounts.MountState[state.mounts.DisplayConfiguration],
     Platform: state.common.Platform,
   }
 };