Skylink import syntax

src/components/InfoDetails/InfoDetails.css

@@ -6,6 +6,14 @@
 .InfoDetailsContent {
   max-height: 60vh;
   min-width: 80vw;
+  max-width: 90vw;
   overflow-y: auto;
+  overflow-x: auto;
+  white-space: pre-line;
   margin-bottom: var(--default_spacing);
-}
+}
+
+.InfoDetailsContent.Alternate {
+  white-space: pre;
+  hyphens: none;
+}

src/components/InfoDetails/InfoDetails.js

@@ -18,13 +18,20 @@ const mapDispatchToProps = dispatch => {
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(props => {
+  let msg = props.InfoMessage.message;
+  const classes = ['InfoDetailsContent'];
+  if (props.InfoMessage.message.startsWith("!alternate!")) {
+    classes.push('Alternate');
+    msg = props.InfoMessage.message.substr('!alternate!'.length)
+  }
+
   return (
     <Box dxDark dxStyle={{padding: 'var(--default_spacing)'}}>
       <h1 className={'InfoDetailsHeading'}>{props.InfoMessage.title}</h1>
-      <div className={'InfoDetailsContent'}>
-        <p style={{textAlign: 'left', whiteSpace: 'pre-line'}}>{props.InfoMessage.message}</p>
+      <div className={classes.join(' ')}>
+        <p style={{textAlign: 'left'}}>{msg}</p>
       </div>
       <Button clicked={props.dismissInfo}>Dismiss</Button>
     </Box>
   );
-});
+});

src/containers/SkynetImport/SkynetImport.js

@@ -5,10 +5,12 @@ import './SkynetImport.css'
 import Box from '../../components/UI/Box/Box';
 import Button from '../../components/UI/Button/Button';
 import {displaySkynetImport} from '../../redux/actions/skynet_actions';
+import {notifyInfo} from '../../redux/actions/error_actions';
 
 const mapDispatchToProps = dispatch => {
   return {
     displaySkynetImport: display => dispatch(displaySkynetImport(display)),
+    notifyInfo: msg => dispatch(notifyInfo("Import Syntax", msg)),
   }
 };
 
@@ -18,6 +20,35 @@ export default connect(null, mapDispatchToProps)(class extends Component {
     import_list: '',
   };
 
+  displaySyntax = () => {
+    const msg = "!alternate!To import Skylinks into the root directory, list each Skylink on a new line:\n" +
+      "  AACeCiD6WQG6DzDcCdIu3cFPSxMUMoQPx46NYSyijNMKUA\n" +
+      "  AACyjmDGoHqY7mTaxi-rkpnKUJGZK1B4UhrF74Nv6tY6Cg\n" +
+      "\n" +
+      "To import Skylinks to new or existing directories, use the following syntax:\n" +
+      "  directory=\"/my/sub/dir\",skylink=\"AACeCiD6WQG6DzDcCdIu3cFPSxMUMoQPx46NYSyijNMKUA\"\n" +
+      "  directory=\"/my/sub/dir2\",skylink=\"AACyjmDGoHqY7mTaxi-rkpnKUJGZK1B4UhrF74Nv6tY6Cg\"\n" +
+      "\n" +
+      "You can also specify a password if this in an encrypted Repertory Skylink:\n" +
+      "  directory=\"/my/sub/dir\",skylink=\"AACeCiD6WQG6DzDcCdIu3cFPSxMUMoQPx46NYSyijNMKUA\",token=\"My Password\"\n" +
+      "  directory=\"/my/sub/dir\",skylink=\"AACyjmDGoHqY7mTaxi-rkpnKUJGZK1B4UhrF74Nv6tY6Cg\",token=\"My Password\"\n" +
+      "\n" +
+      "To import JSON Skylinks, use the following syntax:\n" +
+      "  [\n" +
+      "     {\n" +
+      "        \"directory\": \"/\",\n" +
+      "        \"skylink\": \"AACeCiD6WQG6DzDcCdIu3cFPSxMUMoQPx46NYSyijNMKUA\",\n" +
+      "        \"token\": \"My Password\"\n" +
+      "     },\n" +
+      "     {\n" +
+      "        \"directory\": \"/my/sub/dir\",\n" +
+      "        \"skylink\": \"AACyjmDGoHqY7mTaxi-rkpnKUJGZK1B4UhrF74Nv6tY6Cg\",\n" +
+      "        \"token\": \"My Password\"\n" +
+      "     }\n" +
+      "  ]";
+    this.props.notifyInfo(msg)
+  }
+
   render() {
     return (
       <Box dxDark dxStyle={{height: 'auto', padding: 'var(--default_spacing)', width: 'calc(100vw - (var(--default_spacing) * 4)'}}>
@@ -37,7 +68,7 @@ export default connect(null, mapDispatchToProps)(class extends Component {
                   rows={10} />
 
         <div className={'SkynetImportButtons'}>
-          <Button buttonStyles={{height: 'auto', marginTop: 'var(--default_spacing)', width: 'auto'}}>Import Syntax...</Button>
+          <Button buttonStyles={{height: 'auto', marginTop: 'var(--default_spacing)', width: 'auto'}} clicked={this.displaySyntax}>Import Syntax...</Button>
           <Button buttonStyles={{height: 'auto', marginLeft: 'var(--default_spacing)', marginTop: 'var(--default_spacing)', width: 'auto'}}>Next</Button>
         </div>
       </Box>