From 95c0d0bbf37541efd163ed0ee77b1fec22adfd36 Mon Sep 17 00:00:00 2001
From: Shannon Lal <shannonlal@hotmail.com>
Date: Sat, 24 Feb 2018 11:00:14 -0500
Subject: [PATCH 1/3] Refactoring SQL Options

---
 .../OptionsDropdown/ESDocsOptions.react.js    |  0
 .../OptionsDropdown/ESIndicesOptions.react.js | 61 +++++++++++++++++++
 .../OptionsDropdown/OptionsDropdown.react.js  | 46 +++-----------
 .../OptionsDropdown/SQLOptions.react.js       | 60 ++++++++++++++++++
 yarn.lock                                     | 28 +++------
 5 files changed, 141 insertions(+), 54 deletions(-)
 create mode 100644 app/components/Settings/OptionsDropdown/ESDocsOptions.react.js
 create mode 100644 app/components/Settings/OptionsDropdown/ESIndicesOptions.react.js
 create mode 100644 app/components/Settings/OptionsDropdown/SQLOptions.react.js

diff --git a/app/components/Settings/OptionsDropdown/ESDocsOptions.react.js b/app/components/Settings/OptionsDropdown/ESDocsOptions.react.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/components/Settings/OptionsDropdown/ESIndicesOptions.react.js b/app/components/Settings/OptionsDropdown/ESIndicesOptions.react.js
new file mode 100644
index 000000000..8c292e640
--- /dev/null
+++ b/app/components/Settings/OptionsDropdown/ESIndicesOptions.react.js
@@ -0,0 +1,61 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+export default class ESIndicesOptions extends Component {
+    static propTypes = {
+        elasticsearchMappingsRequest: PropTypes.object,
+        setIndex: PropTypes.func,
+        selectedIndex: PropTypes.any
+    };
+
+    /**
+     * ES Indicies Options is an options drop down
+     * @param {object} props  - Component Properties
+     * @param {object} props.elasticsearchMappingsRequest - The ES Mapping Request
+     * @param {object} props.setIndex - The Set Index Function
+     * @param {object} props.electedIndex - The Selected Index
+     */
+    constructor(props) {
+        super(props);
+    }
+
+    render(){
+        const {
+            elasticsearchMappingsRequest: EMR,
+            setIndex,
+            selectedIndex
+        } = this.props;
+        if (!EMR.status) {
+            return null;
+        } else if (EMR.status === 'loading') {
+            return <div>{'Loading docs'}</div>;
+        } else if (EMR.status > 300) {
+            // TODO - Make this prettier.
+            return (
+                <div>
+                    <div>{'There was an error loading up your docs'}</div>
+                    <div style={{color: 'red'}}>{JSON.stringify(EMR)}</div>
+                </div>
+            );
+        } else if (EMR.status === 200) {
+            const indeciesList = keys(EMR.content);
+            if (indeciesList.length === 0) {
+                return <div>{'No docs found'}</div>;
+            }
+            return (
+                <div className={'dropdown'}
+                    id="test-table-dropdown"
+                >
+                    <Select
+                        options={indeciesList.map(t => ({label: t, value: t}))}
+                        value={selectedIndex}
+                        searchable={false}
+                        onChange={option => {
+                            setIndex(option.value);
+                        }}
+                    />
+                </div>
+            );
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/components/Settings/OptionsDropdown/OptionsDropdown.react.js b/app/components/Settings/OptionsDropdown/OptionsDropdown.react.js
index 558a22f68..5d06f503a 100644
--- a/app/components/Settings/OptionsDropdown/OptionsDropdown.react.js
+++ b/app/components/Settings/OptionsDropdown/OptionsDropdown.react.js
@@ -2,7 +2,8 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {flatten, keys} from 'ramda';
 import Select from 'react-select';
-
+import SQLOptions from './SQLOptions.react';
+import ESIndicesOptions from './ESDocsOptions.react';
 export default class OptionsDropdown extends Component {
     constructor(props) {
         super(props);
@@ -15,7 +16,6 @@ export default class OptionsDropdown extends Component {
         // See type of react-select's Select `value` property
         selectedTable: PropTypes.any,
         selectedIndex: PropTypes.any,
-
         tablesRequest: PropTypes.object,
         setTable: PropTypes.func,
         elasticsearchMappingsRequest: PropTypes.object,
@@ -24,38 +24,8 @@ export default class OptionsDropdown extends Component {
 
     renderSQLOptions() {
         const {selectedTable, tablesRequest, setTable} = this.props;
-        if (!tablesRequest.status) {
-            return null;
-        } else if (tablesRequest.status === 'loading') {
-            return <div>{'Loading tables'}</div>;
-        } else if (tablesRequest.status > 300) {
-            // TODO - Make this prettier.
-            return (
-                <div>
-                    <div>{'Hm.. there was an error loading up your tables'}</div>
-                    <div style={{color: 'red'}}>{JSON.stringify(tablesRequest)}</div>
-                </div>
-            );
-        } else if (tablesRequest.status === 200) {
-            const tablesList = flatten(tablesRequest.content);
-            if (tablesList.length === 0) {
-                return <div>{'No tables found'}</div>;
-            }
-            return (
-                <div className={'dropdown'}
-                    id="test-table-dropdown"
-                >
-                    <Select
-                        options={tablesList.map(t => ({label: t, value: t}))}
-                        value={selectedTable}
-                        searchable={false}
-                        onChange={option => {
-                            setTable(option.value);
-                        }}
-                    />
-                </div>
-            );
-        }
+
+        return (<SQLOptions selectedTable={selectedTable} tablesRequest={tablesRequest} setTable={setTable} />);
     }
 
     renderElasticsearchIndecies() {
@@ -64,7 +34,11 @@ export default class OptionsDropdown extends Component {
             setIndex,
             selectedIndex
         } = this.props;
-        if (!EMR.status) {
+
+        return (<ESIndicesOptions  elasticsearchMappingsRequest={EMR} 
+                                    setIndex={setIndex} 
+                                    selectedIndex={selectedIndex}/>);
+        /*if (!EMR.status) {
             return null;
         } else if (EMR.status === 'loading') {
             return <div>{'Loading docs'}</div>;
@@ -95,7 +69,7 @@ export default class OptionsDropdown extends Component {
                     />
                 </div>
             );
-        }
+        }*/
     }
 
     renderElasticsearchDocs() {
diff --git a/app/components/Settings/OptionsDropdown/SQLOptions.react.js b/app/components/Settings/OptionsDropdown/SQLOptions.react.js
new file mode 100644
index 000000000..b383e53ea
--- /dev/null
+++ b/app/components/Settings/OptionsDropdown/SQLOptions.react.js
@@ -0,0 +1,60 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+export default class SQLOptions extends Component {
+
+
+    static propTypes = {
+        selectedTable: PropTypes.any,
+        tablesRequest: PropTypes.object,
+        setTable: PropTypes.func
+    };
+
+    /**
+     * SQLOptions is an options drop down down
+     * @param {object} props  - Component Properties
+     * @param {object} props.selectedTable - The selected table
+     * @param {object} props.tablesRequest - The Requested Table
+     * @param {object} props.setTable - The set table function
+     */
+    constructor(props) {
+        super(props);
+    }
+
+    render(){
+        console.log( 'Start Rendering the SQL Options');
+        const {selectedTable, tablesRequest, setTable} = this.props;
+        if (!tablesRequest.status) {
+            console.log( 'Returning null from SQL Options');
+            return null;
+        } else if (tablesRequest.status === 'loading') {
+            return <div>{'Loading tables'}</div>;
+        } else if (tablesRequest.status > 300) {
+            // TODO - Make this prettier.
+            return (
+                <div>
+                    <div>{'Hm.. there was an error loading up your tables'}</div>
+                    <div style={{color: 'red'}}>{JSON.stringify(tablesRequest)}</div>
+                </div>
+            );
+        } else if (tablesRequest.status === 200) {
+            const tablesList = flatten(tablesRequest.content);
+            if (tablesList.length === 0) {
+                return <div>{'No tables found'}</div>;
+            }
+            return (
+                <div className={'dropdown'}
+                    id="test-table-dropdown"
+                >
+                    <Select
+                        options={tablesList.map(t => ({label: t, value: t}))}
+                        value={selectedTable}
+                        searchable={false}
+                        onChange={option => {
+                            setTable(option.value);
+                        }}
+                    />
+                </div>
+            );
+        }
+    }
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index c4c23051a..5592f52be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2836,18 +2836,16 @@ doctrine@^2.0.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-<<<<<<< HEAD
 dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
   dependencies:
     domelementtype "~1.1.1"
     entities "~1.1.1"
-=======
+
 dom-storage@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/dom-storage/-/dom-storage-2.0.2.tgz#ed17cbf68abd10e0aef8182713e297c5e4b500b0"
->>>>>>> upstream-master
 
 dom-walk@^0.1.0:
   version "0.1.1"
@@ -3636,15 +3634,13 @@ execa@^0.7.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-<<<<<<< HEAD
-exit@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
-=======
 exit-on-epipe@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz#0bdd92e87d5285d267daa8171d0eb06159689692"
->>>>>>> upstream-master
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
 
 expand-brackets@^0.1.4:
   version "0.1.5"
@@ -7823,18 +7819,16 @@ pretty-bytes@^1.0.2:
     get-stdin "^4.0.1"
     meow "^3.1.0"
 
-<<<<<<< HEAD
 pretty-format@^22.1.0:
   version "22.1.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-22.1.0.tgz#2277605b40ed4529ae4db51ff62f4be817647914"
   dependencies:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
-=======
+
 printj@~1.1.0, printj@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/printj/-/printj-1.1.1.tgz#3749360215888d460a35b683ae13dcc02c620b47"
->>>>>>> upstream-master
 
 private@^0.1.6, private@^0.1.7:
   version "0.1.8"
@@ -10524,11 +10518,6 @@ xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
 
-<<<<<<< HEAD
-xml-name-validator@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
-=======
 xlsx@^0.11.17:
   version "0.11.19"
   resolved "https://registry.yarnpkg.com/xlsx/-/xlsx-0.11.19.tgz#2f019d9df756f6345aac5bc1af2442cf22a025e3"
@@ -10540,7 +10529,10 @@ xlsx@^0.11.17:
     crc-32 "~1.2.0"
     exit-on-epipe "~1.0.1"
     ssf "~0.10.1"
->>>>>>> upstream-master
+
+xml-name-validator@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
 
 xml2js@0.4.17:
   version "0.4.17"

From f1212f0b3b28dc19f0d6a2544e3115ba55510628 Mon Sep 17 00:00:00 2001
From: Shannon Lal <shannonlal@hotmail.com>
Date: Sat, 24 Feb 2018 21:06:51 -0500
Subject: [PATCH 2/3] Refactor Options Dropdown to seperate components

---
 .../OptionsDropdown/ESDocsOptions.react.js    |  58 ++++++++++
 .../OptionsDropdown/ESIndicesOptions.react.js |   6 +-
 .../OptionsDropdown/OptionsDropdown.react.js  | 102 ++++++------------
 .../OptionsDropdown/SQLOptions.react.js       |  10 +-
 4 files changed, 101 insertions(+), 75 deletions(-)

diff --git a/app/components/Settings/OptionsDropdown/ESDocsOptions.react.js b/app/components/Settings/OptionsDropdown/ESDocsOptions.react.js
index e69de29bb..88910caaa 100644
--- a/app/components/Settings/OptionsDropdown/ESDocsOptions.react.js
+++ b/app/components/Settings/OptionsDropdown/ESDocsOptions.react.js
@@ -0,0 +1,58 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {keys} from 'ramda';
+import Select from 'react-select';
+
+export default class ESDocsOptions extends Component {
+    static propTypes = {
+        selectedTable: PropTypes.any,
+        selectedIndex: PropTypes.any,
+        setTable: PropTypes.func,
+        elasticsearchMappingsRequest: PropTypes.object
+    }
+
+    /**
+     * ES Docs Options is an options drop down
+     * @param {object} props  - Component Properties
+     * @param {object} props.elasticsearchMappingsRequest - The ES Mapping Request
+     * @param {object} props.selectedTable - The selected table
+     * @param {object} props.selectedIndex - The Selected Index
+     * @param {object} props.setTable - The table
+     */
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const {
+            selectedTable,
+            selectedIndex,
+            elasticsearchMappingsRequest: EMR,
+            setTable
+        } = this.props;
+
+        if (!selectedIndex) {
+            return null;
+        }
+
+        const tablesList = keys(EMR.content[selectedIndex].mappings);
+        if (tablesList.length === 0) {
+            return <div>{'No docs found'}</div>;
+        }
+
+        return (
+            <div className={'dropdown'}
+                id="test-table-dropdown"
+            >
+                <Select
+                    options={tablesList.map(t => ({label: t, value: t}))}
+                    value={selectedTable}
+                    searchable={false}
+                    onChange={option => {
+                        setTable(option.value);
+                    }}
+                />
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/app/components/Settings/OptionsDropdown/ESIndicesOptions.react.js b/app/components/Settings/OptionsDropdown/ESIndicesOptions.react.js
index 8c292e640..5b97f0876 100644
--- a/app/components/Settings/OptionsDropdown/ESIndicesOptions.react.js
+++ b/app/components/Settings/OptionsDropdown/ESIndicesOptions.react.js
@@ -1,5 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import {keys} from 'ramda';
+import Select from 'react-select';
 
 export default class ESIndicesOptions extends Component {
     static propTypes = {
@@ -13,13 +15,13 @@ export default class ESIndicesOptions extends Component {
      * @param {object} props  - Component Properties
      * @param {object} props.elasticsearchMappingsRequest - The ES Mapping Request
      * @param {object} props.setIndex - The Set Index Function
-     * @param {object} props.electedIndex - The Selected Index
+     * @param {object} props.selectedIndex - The Selected Index
      */
     constructor(props) {
         super(props);
     }
 
-    render(){
+    render() {
         const {
             elasticsearchMappingsRequest: EMR,
             setIndex,
diff --git a/app/components/Settings/OptionsDropdown/OptionsDropdown.react.js b/app/components/Settings/OptionsDropdown/OptionsDropdown.react.js
index 5d06f503a..5bf014dc6 100644
--- a/app/components/Settings/OptionsDropdown/OptionsDropdown.react.js
+++ b/app/components/Settings/OptionsDropdown/OptionsDropdown.react.js
@@ -1,16 +1,10 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {flatten, keys} from 'ramda';
-import Select from 'react-select';
 import SQLOptions from './SQLOptions.react';
-import ESIndicesOptions from './ESDocsOptions.react';
+import ESIndicesOptions from './ESIndicesOptions.react';
+import ESDocsOptions from './ESDocsOptions.react';
+
 export default class OptionsDropdown extends Component {
-    constructor(props) {
-        super(props);
-        this.renderSQLOptions = this.renderSQLOptions.bind(this);
-        this.renderElasticsearchIndecies = this.renderElasticsearchIndecies.bind(this);
-        this.renderElasticsearchDocs = this.renderElasticsearchDocs.bind(this);
-    }
 
     static propTypes = {
         // See type of react-select's Select `value` property
@@ -22,10 +16,31 @@ export default class OptionsDropdown extends Component {
         setIndex: PropTypes.func
     }
 
+    /**
+     * Options Dropdown is an options drop down
+     * @param {object} props  - Component Properties
+     * @param {object} props.selectedTable - The selected table
+     * @param {object} props.tablesRequest - The Requested Table
+     * @param {function} props.setTable - The set table function
+     * @param {object} props.elasticsearchMappingsRequest - The ES Mapping Request
+     * @param {object} props.selectedTable - The selected table
+     * @param {object} props.selectedIndex - The Selected Index
+     * @param {function} props.setIndex - The Set the index
+     */
+    constructor(props) {
+        super(props);
+        this.renderSQLOptions = this.renderSQLOptions.bind(this);
+        this.renderElasticsearchIndecies = this.renderElasticsearchIndecies.bind(this);
+        this.renderElasticsearchDocs = this.renderElasticsearchDocs.bind(this);
+    }
+
     renderSQLOptions() {
         const {selectedTable, tablesRequest, setTable} = this.props;
 
-        return (<SQLOptions selectedTable={selectedTable} tablesRequest={tablesRequest} setTable={setTable} />);
+        return (<SQLOptions selectedTable={selectedTable}
+                            tablesRequest={tablesRequest}
+                            setTable={setTable}
+        />);
     }
 
     renderElasticsearchIndecies() {
@@ -35,41 +50,10 @@ export default class OptionsDropdown extends Component {
             selectedIndex
         } = this.props;
 
-        return (<ESIndicesOptions  elasticsearchMappingsRequest={EMR} 
-                                    setIndex={setIndex} 
-                                    selectedIndex={selectedIndex}/>);
-        /*if (!EMR.status) {
-            return null;
-        } else if (EMR.status === 'loading') {
-            return <div>{'Loading docs'}</div>;
-        } else if (EMR.status > 300) {
-            // TODO - Make this prettier.
-            return (
-                <div>
-                    <div>{'There was an error loading up your docs'}</div>
-                    <div style={{color: 'red'}}>{JSON.stringify(EMR)}</div>
-                </div>
-            );
-        } else if (EMR.status === 200) {
-            const indeciesList = keys(EMR.content);
-            if (indeciesList.length === 0) {
-                return <div>{'No docs found'}</div>;
-            }
-            return (
-                <div className={'dropdown'}
-                    id="test-table-dropdown"
-                >
-                    <Select
-                        options={indeciesList.map(t => ({label: t, value: t}))}
-                        value={selectedIndex}
-                        searchable={false}
-                        onChange={option => {
-                            setIndex(option.value);
-                        }}
-                    />
-                </div>
-            );
-        }*/
+        return (<ESIndicesOptions elasticsearchMappingsRequest={EMR}
+                                  setIndex={setIndex}
+                                  selectedIndex={selectedIndex}
+        />);
     }
 
     renderElasticsearchDocs() {
@@ -80,29 +64,11 @@ export default class OptionsDropdown extends Component {
             setTable
         } = this.props;
 
-        if (!selectedIndex) {
-            return null;
-        }
-
-        const tablesList = keys(EMR.content[selectedIndex].mappings);
-        if (tablesList.length === 0) {
-            return <div>{'No docs found'}</div>;
-        }
-
-        return (
-            <div className={'dropdown'}
-                id="test-table-dropdown"
-            >
-                <Select
-                    options={tablesList.map(t => ({label: t, value: t}))}
-                    value={selectedTable}
-                    searchable={false}
-                    onChange={option => {
-                        setTable(option.value);
-                    }}
-                />
-            </div>
-        );
+        return (<ESDocsOptions selectedTable={selectedTable}
+                                selectedIndex={selectedIndex}
+                                elasticsearchMappingsRequest={EMR}
+                                setTable={setTable}
+        />);
     }
 
     render() {
diff --git a/app/components/Settings/OptionsDropdown/SQLOptions.react.js b/app/components/Settings/OptionsDropdown/SQLOptions.react.js
index b383e53ea..7c60fc1f9 100644
--- a/app/components/Settings/OptionsDropdown/SQLOptions.react.js
+++ b/app/components/Settings/OptionsDropdown/SQLOptions.react.js
@@ -1,7 +1,9 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-export default class SQLOptions extends Component {
+import {flatten} from 'ramda';
+import Select from 'react-select';
 
+export default class SQLOptions extends Component {
 
     static propTypes = {
         selectedTable: PropTypes.any,
@@ -14,17 +16,15 @@ export default class SQLOptions extends Component {
      * @param {object} props  - Component Properties
      * @param {object} props.selectedTable - The selected table
      * @param {object} props.tablesRequest - The Requested Table
-     * @param {object} props.setTable - The set table function
+     * @param {function} props.setTable - The set table function
      */
     constructor(props) {
         super(props);
     }
 
-    render(){
-        console.log( 'Start Rendering the SQL Options');
+    render() {
         const {selectedTable, tablesRequest, setTable} = this.props;
         if (!tablesRequest.status) {
-            console.log( 'Returning null from SQL Options');
             return null;
         } else if (tablesRequest.status === 'loading') {
             return <div>{'Loading tables'}</div>;

From 15ca9cb2d6db6da82b3b2557cb27743290e9bc1b Mon Sep 17 00:00:00 2001
From: Shannon Lal <shannonlal@hotmail.com>
Date: Mon, 26 Feb 2018 20:45:18 -0500
Subject: [PATCH 3/3] Code refactoring based on @n-riesco comments

---
 .../OptionsDropdown/OptionsDropdown.react.js  | 61 ++++++-------------
 ...csOptions.react.js => es-docs-options.jsx} |  4 +-
 ...ptions.react.js => es-indices-options.jsx} |  2 +-
 .../{SQLOptions.react.js => sql-options.jsx}  |  2 +-
 4 files changed, 24 insertions(+), 45 deletions(-)
 rename app/components/Settings/OptionsDropdown/{ESDocsOptions.react.js => es-docs-options.jsx} (95%)
 rename app/components/Settings/OptionsDropdown/{ESIndicesOptions.react.js => es-indices-options.jsx} (98%)
 rename app/components/Settings/OptionsDropdown/{SQLOptions.react.js => sql-options.jsx} (98%)

diff --git a/app/components/Settings/OptionsDropdown/OptionsDropdown.react.js b/app/components/Settings/OptionsDropdown/OptionsDropdown.react.js
index 5bf014dc6..1235e1729 100644
--- a/app/components/Settings/OptionsDropdown/OptionsDropdown.react.js
+++ b/app/components/Settings/OptionsDropdown/OptionsDropdown.react.js
@@ -1,15 +1,16 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import SQLOptions from './SQLOptions.react';
-import ESIndicesOptions from './ESIndicesOptions.react';
-import ESDocsOptions from './ESDocsOptions.react';
+import SQLOptions from './sql-options';
+import ESIndicesOptions from './es-indices-options';
+import ESDocsOptions from './es-docs-options';
 
 export default class OptionsDropdown extends Component {
 
     static propTypes = {
         // See type of react-select's Select `value` property
-        selectedTable: PropTypes.any,
-        selectedIndex: PropTypes.any,
+        selectedTable: PropTypes.string,
+        selectedIndex: PropTypes.string,
+
         tablesRequest: PropTypes.object,
         setTable: PropTypes.func,
         elasticsearchMappingsRequest: PropTypes.object,
@@ -29,54 +30,32 @@ export default class OptionsDropdown extends Component {
      */
     constructor(props) {
         super(props);
-        this.renderSQLOptions = this.renderSQLOptions.bind(this);
-        this.renderElasticsearchIndecies = this.renderElasticsearchIndecies.bind(this);
-        this.renderElasticsearchDocs = this.renderElasticsearchDocs.bind(this);
     }
 
-    renderSQLOptions() {
-        const {selectedTable, tablesRequest, setTable} = this.props;
-
-        return (<SQLOptions selectedTable={selectedTable}
-                            tablesRequest={tablesRequest}
-                            setTable={setTable}
-        />);
-    }
-
-    renderElasticsearchIndecies() {
+    render() {
         const {
+            selectedTable,
+            tablesRequest,
+            setTable,
             elasticsearchMappingsRequest: EMR,
             setIndex,
             selectedIndex
         } = this.props;
-
-        return (<ESIndicesOptions elasticsearchMappingsRequest={EMR}
+        return (
+            <div style={{marginTop: '25px'}}>
+                <SQLOptions selectedTable={selectedTable}
+                            tablesRequest={tablesRequest}
+                            setTable={setTable}
+                />
+                <ESIndicesOptions elasticsearchMappingsRequest={EMR}
                                   setIndex={setIndex}
                                   selectedIndex={selectedIndex}
-        />);
-    }
-
-    renderElasticsearchDocs() {
-        const {
-            selectedTable,
-            selectedIndex,
-            elasticsearchMappingsRequest: EMR,
-            setTable
-        } = this.props;
-
-        return (<ESDocsOptions selectedTable={selectedTable}
+                />
+                <ESDocsOptions selectedTable={selectedTable}
                                 selectedIndex={selectedIndex}
                                 elasticsearchMappingsRequest={EMR}
                                 setTable={setTable}
-        />);
-    }
-
-    render() {
-        return (
-            <div style={{marginTop: '25px'}}>
-                {this.renderSQLOptions()}
-                {this.renderElasticsearchIndecies()}
-                {this.renderElasticsearchDocs()}
+                />
             </div>
         );
     }
diff --git a/app/components/Settings/OptionsDropdown/ESDocsOptions.react.js b/app/components/Settings/OptionsDropdown/es-docs-options.jsx
similarity index 95%
rename from app/components/Settings/OptionsDropdown/ESDocsOptions.react.js
rename to app/components/Settings/OptionsDropdown/es-docs-options.jsx
index 88910caaa..2914178c3 100644
--- a/app/components/Settings/OptionsDropdown/ESDocsOptions.react.js
+++ b/app/components/Settings/OptionsDropdown/es-docs-options.jsx
@@ -5,8 +5,8 @@ import Select from 'react-select';
 
 export default class ESDocsOptions extends Component {
     static propTypes = {
-        selectedTable: PropTypes.any,
-        selectedIndex: PropTypes.any,
+        selectedTable: PropTypes.string,
+        selectedIndex: PropTypes.string,
         setTable: PropTypes.func,
         elasticsearchMappingsRequest: PropTypes.object
     }
diff --git a/app/components/Settings/OptionsDropdown/ESIndicesOptions.react.js b/app/components/Settings/OptionsDropdown/es-indices-options.jsx
similarity index 98%
rename from app/components/Settings/OptionsDropdown/ESIndicesOptions.react.js
rename to app/components/Settings/OptionsDropdown/es-indices-options.jsx
index 5b97f0876..543fe8b5f 100644
--- a/app/components/Settings/OptionsDropdown/ESIndicesOptions.react.js
+++ b/app/components/Settings/OptionsDropdown/es-indices-options.jsx
@@ -7,7 +7,7 @@ export default class ESIndicesOptions extends Component {
     static propTypes = {
         elasticsearchMappingsRequest: PropTypes.object,
         setIndex: PropTypes.func,
-        selectedIndex: PropTypes.any
+        selectedIndex: PropTypes.string
     };
 
     /**
diff --git a/app/components/Settings/OptionsDropdown/SQLOptions.react.js b/app/components/Settings/OptionsDropdown/sql-options.jsx
similarity index 98%
rename from app/components/Settings/OptionsDropdown/SQLOptions.react.js
rename to app/components/Settings/OptionsDropdown/sql-options.jsx
index 7c60fc1f9..9ed01a463 100644
--- a/app/components/Settings/OptionsDropdown/SQLOptions.react.js
+++ b/app/components/Settings/OptionsDropdown/sql-options.jsx
@@ -6,7 +6,7 @@ import Select from 'react-select';
 export default class SQLOptions extends Component {
 
     static propTypes = {
-        selectedTable: PropTypes.any,
+        selectedTable: PropTypes.string,
         tablesRequest: PropTypes.object,
         setTable: PropTypes.func
     };