export and import invana settings to/from localstorage

src/web/layouts/default.js

@@ -32,7 +32,7 @@ export default class DefaultLayout extends React.Component {
                 {
                     this.state.showSettings === true
                         ? <Modal className={"border-0 "}
-                                 size=""
+                                 size="md"
                                  show={true}
                                  dialogClassName="modal-90w"
                                  backdrop={true}

src/web/viewlets/settings.js

@@ -4,9 +4,9 @@ import {faSignInAlt} from "@fortawesome/free-solid-svg-icons";
 import {STUDIO_SETTINGS} from "../../settings";
 import PropTypes from "prop-types";
 import {askToSwitchGremlinServer} from "../interface/utils";
-import {Button, Card} from "react-bootstrap";
+import {Button, Card, Form} from "react-bootstrap";
 import DefaultRemoteRoutableComponent from "../layouts/default-remote-routable";
-import downloadTextAsFile, {exportDataFromStorage} from "../../utils/download";
+import downloadTextAsFile, {exportDataFromStorage, importDataToStorage} from "../../utils/download";
 
 export default class SettingsComponent extends DefaultRemoteRoutableComponent {
 
@@ -15,6 +15,34 @@ export default class SettingsComponent extends DefaultRemoteRoutableComponent {
         onClose: PropTypes.func,
     }
 
+    constructor(props) {
+        super(props);
+        this.state = {
+            ...this.state,
+            showImportSettings: false
+        };
+        // this.child = React.createRef();
+    }
+/*
+    componentDidMount() {
+        super.componentDidMount();
+        document.getElementById('fileInput').addEventListener('change',
+            this.handleFileSelect.bind(this),
+            false);
+
+    }*/
+
+    handleFileSelect(event) {
+        const reader = new FileReader()
+        reader.onload = this.handleFileLoad.bind(this);
+        reader.readAsText(event.target.files[0])
+    }
+
+    handleFileLoad(event) {
+        console.log(" event.target.result", event.target.result);
+        importDataToStorage(event.target.result);
+        // document.getElementById('fileContent').textContent = event.target.result;
+    }
 
     connectionStringWithoutCreds() {
         try {
@@ -38,6 +66,10 @@ export default class SettingsComponent extends DefaultRemoteRoutableComponent {
         }
     }
 
+    setImportSettingsVisibility(setting) {
+        this.setState({showImportSettings: setting});
+    }
+
 
     render() {
         return (
@@ -55,9 +87,9 @@ export default class SettingsComponent extends DefaultRemoteRoutableComponent {
                         <span>{this.connectionStringWithoutCreds()}</span>
                     </p>
                     <p className={""}>
-                        <Button size={"sm"} variant={"outline-secondary"}
+                        <Button size={"sm"} variant={"link text-muted p-0"}
                                 id={"connectionStringBtn"} onClick={this.showCredentials.bind(this)}
-                                className={"selected pt-1 pb-1 "}>
+                                className={"selected  "}>
                             <small>show full connection string(toggle)</small>
                         </Button>
                     </p>
@@ -67,6 +99,7 @@ export default class SettingsComponent extends DefaultRemoteRoutableComponent {
                         <p>{STUDIO_SETTINGS.CONNECTION_URL}</p>
                     </div>
                     <br/>
+                    <hr/>
                     <Button variant={"outline-danger"} onClick={() => askToSwitchGremlinServer()}
                             title={"Switch Server"}>
                         Disconnect<FontAwesomeIcon className={"ml-2"} icon={faSignInAlt}/>
@@ -75,14 +108,44 @@ export default class SettingsComponent extends DefaultRemoteRoutableComponent {
                         this.props.onClose()}>cancel
                     </Button>
 
-                    <p className={"mt-5"}>
-                        <Button className={"btn btn-link p-0 text-muted"} variant={"link"}
+                    <p className={"mt-3 small"}>
+                        <Button className={"btn btn-link p-0 mr-3 text-muted small"} variant={"link"}
                                 onClick={() => downloadTextAsFile(
                                     exportDataFromStorage(),
                                     "invana-settings.txt")}
                         >export settings</Button>
-                    </p>
 
+                        <Button className={"btn btn-link p-0 ml-3 text-muted small"} variant={"link"}
+                                onClick={() => this.setImportSettingsVisibility(true)}
+                        >import settings</Button>
+
+
+                    </p>
+                    {
+                        this.state.showImportSettings === true
+                            ? <Form>
+                                <div className="mb-3">
+                                    <Card>
+                                        <Card.Body className={"p-2"}>
+                                            {/*<h3>Import invana settings</h3>*/}
+                                            <Form.File id="formcheck-api-regular">
+                                                <h6 className={"border-bottom text-muted pb-2 font-weight-bold"}>Import invana settings
+                                                    file:</h6>
+                                                <Form.File.Input id="fileInput" onChange={(event) => this.handleFileSelect(event)}/>
+                                                <p className="small mb-2 mt-2 text-muted">Browse and selected the settings
+                                                    file.
+                                                    ex: <strong>invana-settings.txt</strong></p>
+                                                <Button variant={"outline-secondary"}
+                                                        onClick={()=> this.setImportSettingsVisibility(false)}
+                                                        className={"pl-1 pr-1 pt-0 pb-0 small  "}>close
+                                                    import</Button>
+                                            </Form.File>
+                                        </Card.Body>
+                                    </Card>
+                                </div>
+                            </Form>
+                            : <React.Fragment/>
+                    }
 
 
                 </Card.Body>

src/web/viewlets/welcome/welcome.js

@@ -1,8 +1,7 @@
 import React from "react";
 import {Button, Card, Col, Row} from "react-bootstrap";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faExternalLinkSquareAlt} from "@fortawesome/free-solid-svg-icons";
-import {faPiedPiper} from "@fortawesome/free-brands-svg-icons";
+import {faExternalLinkSquareAlt, faUserAstronaut} from "@fortawesome/free-solid-svg-icons";
 import {getDataFromLocalStorage} from "../../../utils/localStorage";
 import {HISTORY_SETTINGS} from "../../../settings/history";
 import DefaultRemoteComponent from "../../layouts/default-remote";
@@ -29,7 +28,7 @@ export default class Welcome extends DefaultRemoteComponent {
                 <Card.Body style={{"padding": "5rem 3rem 3rem 3rem"}}>
                     <Row>
                         <Col md={"6"}>
-                            <FontAwesomeIcon icon={faPiedPiper} size={"5x"}/>
+                            <FontAwesomeIcon icon={faUserAstronaut} size={"5x"}/>
                             <Card.Title style={{"fontSize": "1.8rem"}}>Invana Studio
                                 <small style={{"fontSize": "1rem"}}
                                        className={"ml-2"}>v{STUDIO_SETTINGS.VERSION}</small></Card.Title>

src/web/views/console.js

@@ -9,6 +9,7 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import RequestHistoryView from "../viewlets/canvas/query-history";
 import Modal from 'react-bootstrap/Modal'
 import QueryTextarea from "../query-textarea/query-textarea";
+import {addQueryToHistory} from "../../utils/localStorage";
 
 export default class ConsoleView extends DefaultRemoteRoutableComponent {
 
@@ -97,7 +98,7 @@ export default class ConsoleView extends DefaultRemoteRoutableComponent {
         }
         this.setState({isQuerying: true});
 
-        this.addQueryToHistory(queryObj, "console")
+        addQueryToHistory(queryObj, "console")
     }