From f8fd882257f3d1671ceacef0cf85dc8ea7e619f7 Mon Sep 17 00:00:00 2001
From: Anupam Dagar <dagaranupam@gmail.com>
Date: Tue, 11 Dec 2018 15:37:33 +0530
Subject: [PATCH 01/10] Add Json editor for Json Data Type.

This adds a generic input to json editor toggle component.

Fixes: 504
---
 console/src/components/Common/Common.scss     | 10 +++
 .../components/Common/Toggler/Jsontoggler.js  | 72 +++++++++++++++++++
 .../Services/Data/TableBrowseRows/EditItem.js | 21 +++---
 .../Data/TableInsertItem/InsertItem.js        | 17 +++--
 4 files changed, 104 insertions(+), 16 deletions(-)
 create mode 100644 console/src/components/Common/Toggler/Jsontoggler.js

diff --git a/console/src/components/Common/Common.scss b/console/src/components/Common/Common.scss
index 07032186da4ca..8485ffa0bfaeb 100644
--- a/console/src/components/Common/Common.scss
+++ b/console/src/components/Common/Common.scss
@@ -20,6 +20,16 @@ table thead tr th
   color: #4D4D4D;
   font-weight: 600 !important;
 }
+
+.jsonButtonAlign {
+  position: relative;
+  float: right;
+  margin-left: -30px;
+  margin-right: 5px;
+  margin-top: 10px;
+  z-index: 2;
+}
+
 .pageSidebar {
   height: calc(100vh - 50px);
   overflow: auto;
diff --git a/console/src/components/Common/Toggler/Jsontoggler.js b/console/src/components/Common/Toggler/Jsontoggler.js
new file mode 100644
index 0000000000000..c14bda1f737a6
--- /dev/null
+++ b/console/src/components/Common/Toggler/Jsontoggler.js
@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import AceEditor from 'react-ace';
+
+const styles = require('../Common.scss');
+
+class Jsontoggler extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      input_json: 0,
+      input_value: this.props.standardProps.defaultValue,
+    };
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+    const stateValue = this.state.input_json;
+    if (stateValue === 0) {
+      this.setState({ input_json: 1 });
+    } else {
+      this.setState({ input_json: 0 });
+    }
+  }
+
+  render() {
+    return (
+      <span>
+        <label>
+          {this.state.input_json === 1 ? (
+            <AceEditor
+              {...this.props.standardProps}
+              mode="json"
+              theme="github"
+              name="jsontoggler"
+              minLines={10}
+              maxLines={100}
+              width="100%"
+              value={this.state.input_value}
+              onChange={e => {
+                this.setState({ input_value: e });
+              }}
+              showPrintMargin={false}
+              showGutter={false}
+            />
+          ) : (
+            <input
+              {...this.props.standardProps}
+              placeholder={this.props.placeholderProp}
+              value={this.state.input_value}
+              onChange={e => {
+                this.setState({ input_value: e.target.value });
+              }}
+            />
+          )}
+        </label>
+        <i
+          className={
+            (this.state.input_json === 1
+              ? 'fa fa-compress '
+              : 'fa fa-expand ') + styles.jsonButtonAlign
+          }
+          onClick={this.handleClick}
+        />
+      </span>
+    );
+  }
+}
+
+export default Jsontoggler;
diff --git a/console/src/components/Services/Data/TableBrowseRows/EditItem.js b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
index 9e8f612cbe3e2..d5ed65d939110 100644
--- a/console/src/components/Services/Data/TableBrowseRows/EditItem.js
+++ b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
@@ -4,7 +4,7 @@ import TableHeader from '../TableCommon/TableHeader';
 import { editItem, E_ONGOING_REQ } from './EditActions';
 import globals from '../../../../Globals';
 import { modalClose } from './EditActions';
-
+import Jsontoggler from '../../../Common/Toggler/Jsontoggler';
 // import RichTextEditor from 'react-rte';
 import { replace } from 'react-router-redux';
 
@@ -144,15 +144,18 @@ class EditItem extends Component {
           />
         );
       } else if (colType === 'json' || colType === 'jsonb') {
+        const standardEditProps = {
+          className: `form-control ${styles.insertBox}`,
+          onClick: clicker,
+          ref: inputRef,
+          defaultValue: JSON.stringify(oldItem[colName]),
+          'data-test': `typed-input-${i}`,
+          type: 'text',
+        };
         typedInput = (
-          <input
-            placeholder={'{"name": "foo"} or [12, "asdf"]'}
-            type="text"
-            className={'form-control ' + styles.insertBox}
-            onClick={clicker}
-            ref={inputRef}
-            defaultValue={JSON.stringify(oldItem[colName])}
-            data-test={`typed-input-${i}`}
+          <Jsontoggler
+            standardProps={standardEditProps}
+            placeholderProp={'{"name": "foo"} or [12, "asdf"]'}
           />
         );
       } else if (colType === 'boolean') {
diff --git a/console/src/components/Services/Data/TableInsertItem/InsertItem.js b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
index fdcc669ffd5ba..9eedb7ff60d92 100644
--- a/console/src/components/Services/Data/TableInsertItem/InsertItem.js
+++ b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
@@ -4,6 +4,7 @@ import TableHeader from '../TableCommon/TableHeader';
 import { insertItem, I_RESET } from './InsertActions';
 import { ordinalColSort } from '../utils';
 import { setTable } from '../DataActions';
+import Jsontoggler from '../../../Common/Toggler/Jsontoggler';
 
 class InsertItem extends Component {
   constructor() {
@@ -152,12 +153,9 @@ class InsertItem extends Component {
       if (colType === 'json' || colType === 'jsonb') {
         // JSON/JSONB
         typedInput = (
-          <input
-            {...standardInputProps}
-            placeholder={getPlaceholder(colType)}
-            defaultValue={
-              clone && colName in clone ? JSON.stringify(clone[colName]) : ''
-            }
+          <Jsontoggler
+            standardProps={standardInputProps}
+            placeholderProp={getPlaceholder(colType)}
           />
         );
       }
@@ -299,7 +297,12 @@ class InsertItem extends Component {
                       // default
                       return;
                     } else {
-                      inputValues[colName] = refs[colName].valueNode.value;
+                      if (refs[colName].valueNode.props !== undefined) {
+                        inputValues[colName] =
+                          refs[colName].valueNode.refEditor.innerText;
+                      } else {
+                        inputValues[colName] = refs[colName].valueNode.value;
+                      }
                     }
                   });
                   dispatch(insertItem(tableName, inputValues)).then(() => {

From 5bc818fcf72af06029e66f56131da66cf354a081 Mon Sep 17 00:00:00 2001
From: Karthik Venkateswaran <karthik@hasura.io>
Date: Wed, 15 May 2019 18:38:37 +0530
Subject: [PATCH 02/10] Change it to use hooks

---
 console/src/components/Common/Common.scss     |  14 +-
 .../Common/CustomInputTypes/JsonInput.js      | 190 ++++++++++++++++++
 .../components/Common/Toggler/Jsontoggler.js  |  72 -------
 .../Services/Data/TableBrowseRows/EditItem.js |   4 +-
 .../Data/TableInsertItem/InsertItem.js        |  16 +-
 5 files changed, 210 insertions(+), 86 deletions(-)
 create mode 100644 console/src/components/Common/CustomInputTypes/JsonInput.js
 delete mode 100644 console/src/components/Common/Toggler/Jsontoggler.js

diff --git a/console/src/components/Common/Common.scss b/console/src/components/Common/Common.scss
index 25faa62ec04f9..496a8689caffb 100644
--- a/console/src/components/Common/Common.scss
+++ b/console/src/components/Common/Common.scss
@@ -50,12 +50,10 @@ table thead tr th {
 }
 
 .jsonButtonAlign {
-  position: relative;
-  float: right;
-  margin-left: -30px;
-  margin-right: 5px;
-  margin-top: 10px;
-  z-index: 2;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 100;
 }
 .pageSidebar {
   height: calc(100vh - 50px);
@@ -1238,6 +1236,10 @@ code {
   }
 }
 
+.relative_position {
+  position: relative;
+}
+
 .fixed_header_internal_link {
   display: block;
   position: relative;
diff --git a/console/src/components/Common/CustomInputTypes/JsonInput.js b/console/src/components/Common/CustomInputTypes/JsonInput.js
new file mode 100644
index 0000000000000..317b7f1d4b653
--- /dev/null
+++ b/console/src/components/Common/CustomInputTypes/JsonInput.js
@@ -0,0 +1,190 @@
+import React, { useState } from 'react';
+import AceEditor from 'react-ace';
+
+const styles = require('../Common.scss');
+
+const N = 'normal';
+const J = 'json';
+
+const parseJSONData = data => {
+  try {
+    if (typeof data === 'object') {
+      return JSON.stringify(data, null, 4);
+    }
+    return JSON.stringify(JSON.parse(data), null, 4);
+  } catch (e) {
+    return data;
+  }
+};
+
+const createInitialState = data => {
+  const initialState = {
+    showEditorType: N,
+    data: parseJSONData(data),
+  };
+  return initialState;
+};
+
+const JsonInput = props => {
+  const { standardProps, placeholderProp } = props;
+  const { defaultValue } = standardProps;
+  const allProps = { ...standardProps };
+  delete allProps.defaultValue;
+  const [state, updateState] = useState(createInitialState(defaultValue));
+  const { showEditorType, data } = state;
+  const updateData = newData => {
+    return {
+      ...state,
+      data: newData,
+    };
+  };
+  const toggleEditorType = () => {
+    if (state.showEditorType === J) {
+      return {
+        ...state,
+        showEditorType: N,
+      };
+    }
+    return {
+      ...state,
+      data: parseJSONData(state.data),
+      showEditorType: J,
+    };
+  };
+  const handleKeyUpEvent = e => {
+    if (e.ctrlKey && e.which === 32) {
+      console.log(
+        'Control space conbination is pressed, toggling between json'
+      );
+      updateState(toggleEditorType());
+    }
+  };
+  const renderHtml =
+    showEditorType === J ? (
+      <AceEditor
+        key="ace_json_editor"
+        {...allProps}
+        mode="json"
+        theme="github"
+        name="jsontoggler"
+        minLines={10}
+        maxLines={100}
+        width="100%"
+        value={data}
+        showPrintMargin={false}
+        showGutter={false}
+        onChange={val => updateState(updateData(val))}
+      />
+    ) : (
+      <input
+        key="input_json_editor"
+        {...allProps}
+        placeholder={`${placeholderProp} (Ctrl + Space to toggle)`}
+        value={data}
+        onChange={e => updateState(updateData(e.target.value))}
+        onKeyUp={handleKeyUpEvent}
+      />
+    );
+  return [
+    renderHtml,
+    <i
+      key="icon_json_editor"
+      className={
+        (state.showEditorType === J ? 'fa fa-compress ' : 'fa fa-expand ') +
+        styles.jsonButtonAlign
+      }
+      onClick={() => updateState(toggleEditorType())}
+    />,
+  ];
+};
+
+/*
+class Jsontoggler extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      input_json: 0,
+    };
+
+    this.handleClick = this.handleClick.bind(this);
+    this.parseString = this.parseString.bind(this);
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+    const stateValue = this.state.input_json;
+    if (stateValue === 0) {
+      this.setState({ input_json: 1 });
+    } else {
+      this.setState({ input_json: 0 });
+    }
+  }
+
+  parseString() {
+    const { defaultValue } = this.props.standardProps;
+    try {
+      if (typeof defaultValue === 'object') {
+        return JSON.stringify(defaultValue, null, 4);
+      }
+      return JSON.stringify(JSON.parse(defaultValue), null, 4);
+    } catch (e) {
+      return defaultValue;
+    }
+  }
+
+  getValueFromRelatedInput() {
+    const { refNode } = this.props;
+    console.log('RefNode');
+    console.log(refNode);
+    if (refNode && 'valueNode' in refNode && refNode.valueNode) {
+      if ('props' in refNode.valueNode) {
+        return refNode.valueNode.refEditor.innerText;
+      }
+      return refNode.valueNode.value;
+    }
+    return '';
+  }
+
+  render() {
+    const initialVal = this.getValueFromRelatedInput() || this.parseString();
+    console.log('initialVal');
+    console.log(initialVal);
+    return (
+      <span>
+        <label>
+          {this.state.input_json === 1 ? (
+            <AceEditor
+              {...this.props.standardProps}
+              mode="json"
+              theme="github"
+              name="jsontoggler"
+              minLines={10}
+              maxLines={100}
+              width="100%"
+              defaultValue={initialVal}
+              showPrintMargin={false}
+              showGutter={false}
+            />
+          ) : (
+            <input
+              {...this.props.standardProps}
+              placeholder={this.props.placeholderProp}
+              defaultValue={initialVal}
+            />
+          )}
+        </label>
+        <i
+          className={
+            (this.state.input_json === 1
+              ? 'fa fa-compress '
+              : 'fa fa-expand ') + styles.jsonButtonAlign
+          }
+          onClick={this.handleClick}
+        />
+      </span>
+    );
+  }
+} */
+
+export default JsonInput;
diff --git a/console/src/components/Common/Toggler/Jsontoggler.js b/console/src/components/Common/Toggler/Jsontoggler.js
deleted file mode 100644
index c14bda1f737a6..0000000000000
--- a/console/src/components/Common/Toggler/Jsontoggler.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { Component } from 'react';
-import AceEditor from 'react-ace';
-
-const styles = require('../Common.scss');
-
-class Jsontoggler extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      input_json: 0,
-      input_value: this.props.standardProps.defaultValue,
-    };
-
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick(e) {
-    e.preventDefault();
-    const stateValue = this.state.input_json;
-    if (stateValue === 0) {
-      this.setState({ input_json: 1 });
-    } else {
-      this.setState({ input_json: 0 });
-    }
-  }
-
-  render() {
-    return (
-      <span>
-        <label>
-          {this.state.input_json === 1 ? (
-            <AceEditor
-              {...this.props.standardProps}
-              mode="json"
-              theme="github"
-              name="jsontoggler"
-              minLines={10}
-              maxLines={100}
-              width="100%"
-              value={this.state.input_value}
-              onChange={e => {
-                this.setState({ input_value: e });
-              }}
-              showPrintMargin={false}
-              showGutter={false}
-            />
-          ) : (
-            <input
-              {...this.props.standardProps}
-              placeholder={this.props.placeholderProp}
-              value={this.state.input_value}
-              onChange={e => {
-                this.setState({ input_value: e.target.value });
-              }}
-            />
-          )}
-        </label>
-        <i
-          className={
-            (this.state.input_json === 1
-              ? 'fa fa-compress '
-              : 'fa fa-expand ') + styles.jsonButtonAlign
-          }
-          onClick={this.handleClick}
-        />
-      </span>
-    );
-  }
-}
-
-export default Jsontoggler;
diff --git a/console/src/components/Services/Data/TableBrowseRows/EditItem.js b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
index 2ca8508524ca2..c37fbdf47deb9 100644
--- a/console/src/components/Services/Data/TableBrowseRows/EditItem.js
+++ b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
@@ -4,7 +4,7 @@ import TableHeader from '../TableCommon/TableHeader';
 import { editItem, E_ONGOING_REQ } from './EditActions';
 import globals from '../../../../Globals';
 import { modalClose } from './EditActions';
-import Jsontoggler from '../../../Common/Toggler/Jsontoggler';
+import JsonInput from '../../../Common/CustomInputTypes/JsonInput';
 import Button from '../../../Common/Button/Button';
 
 import {
@@ -178,7 +178,7 @@ class EditItem extends Component {
           type: 'text',
         };
         typedInput = (
-          <Jsontoggler
+          <JsonInput
             standardProps={standardEditProps}
             placeholderProp={'{"name": "foo"} or [12, "asdf"]'}
           />
diff --git a/console/src/components/Services/Data/TableInsertItem/InsertItem.js b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
index 81134c6463bfb..c3015da7632e3 100644
--- a/console/src/components/Services/Data/TableInsertItem/InsertItem.js
+++ b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
@@ -4,7 +4,7 @@ import TableHeader from '../TableCommon/TableHeader';
 import { insertItem, I_RESET } from './InsertActions';
 import { ordinalColSort } from '../utils';
 import { setTable } from '../DataActions';
-import Jsontoggler from '../../../Common/Toggler/Jsontoggler';
+import JsonInput from '../../../Common/CustomInputTypes/JsonInput';
 import Button from '../../../Common/Button/Button';
 import { getPlaceholder, BOOLEAN, JSONB, JSONDTYPE } from '../utils';
 
@@ -83,14 +83,12 @@ class InsertItem extends Component {
           const radioToSelectWhenEmpty = hasDefault
             ? refs[colName].defaultNode
             : refs[colName].nullNode;
-
           refs[colName].insertRadioNode.checked = !!textValue.length;
           radioToSelectWhenEmpty.checked = !textValue.length;
         },
         onFocus: e => {
           if (isAutoIncrement) return;
           if (!isNullable && !hasDefault) return;
-
           const textValue = e.target.value;
           if (
             textValue === undefined ||
@@ -111,7 +109,6 @@ class InsertItem extends Component {
       };
 
       const colType = col.data_type;
-
       const placeHolder = hasDefault
         ? col.column_default
         : getPlaceholder(colType);
@@ -129,7 +126,7 @@ class InsertItem extends Component {
       if (colType === JSONDTYPE || colType === JSONB) {
         // JSON/JSONB
         typedInput = (
-          <Jsontoggler
+          <JsonInput
             standardProps={standardInputProps}
             placeholderProp={getPlaceholder(colType)}
           />
@@ -164,7 +161,14 @@ class InsertItem extends Component {
           >
             {colName}
           </label>
-          <label className={styles.radioLabel + ' radio-inline'}>
+          <label
+            className={
+              styles.radioLabel +
+              ' radio-inline' +
+              ' ' +
+              styles.relative_position
+            }
+          >
             <input
               disabled={isAutoIncrement}
               type="radio"

From 89de9f8eb613c45d285754f931fd7aaa675ab6aa Mon Sep 17 00:00:00 2001
From: Karthik Venkateswaran <karthik@hasura.io>
Date: Thu, 16 May 2019 09:55:14 +0530
Subject: [PATCH 03/10] WIP

---
 .../Common/CustomInputTypes/JsonInput.js      | 43 ++++++++++---------
 .../Data/TableBrowseRows/EditActions.js       |  2 +
 .../Data/TableInsertItem/InsertItem.js        |  9 +---
 3 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/console/src/components/Common/CustomInputTypes/JsonInput.js b/console/src/components/Common/CustomInputTypes/JsonInput.js
index 317b7f1d4b653..080d8e76dbf05 100644
--- a/console/src/components/Common/CustomInputTypes/JsonInput.js
+++ b/console/src/components/Common/CustomInputTypes/JsonInput.js
@@ -3,8 +3,8 @@ import AceEditor from 'react-ace';
 
 const styles = require('../Common.scss');
 
-const N = 'normal';
-const J = 'json';
+const NORMALKEY = 'normal';
+const JSONKEY = 'json';
 
 const parseJSONData = data => {
   try {
@@ -19,7 +19,7 @@ const parseJSONData = data => {
 
 const createInitialState = data => {
   const initialState = {
-    showEditorType: N,
+    showEditorType: NORMALKEY,
     data: parseJSONData(data),
   };
   return initialState;
@@ -39,28 +39,25 @@ const JsonInput = props => {
     };
   };
   const toggleEditorType = () => {
-    if (state.showEditorType === J) {
+    if (state.showEditorType === JSONKEY) {
       return {
         ...state,
-        showEditorType: N,
+        showEditorType: NORMALKEY,
       };
     }
     return {
       ...state,
       data: parseJSONData(state.data),
-      showEditorType: J,
+      showEditorType: JSONKEY,
     };
   };
   const handleKeyUpEvent = e => {
     if (e.ctrlKey && e.which === 32) {
-      console.log(
-        'Control space conbination is pressed, toggling between json'
-      );
       updateState(toggleEditorType());
     }
   };
   const renderHtml =
-    showEditorType === J ? (
+    showEditorType === JSONKEY ? (
       <AceEditor
         key="ace_json_editor"
         {...allProps}
@@ -74,6 +71,7 @@ const JsonInput = props => {
         showPrintMargin={false}
         showGutter={false}
         onChange={val => updateState(updateData(val))}
+        onFocus={e => console.log(e)}
       />
     ) : (
       <input
@@ -85,17 +83,20 @@ const JsonInput = props => {
         onKeyUp={handleKeyUpEvent}
       />
     );
-  return [
-    renderHtml,
-    <i
-      key="icon_json_editor"
-      className={
-        (state.showEditorType === J ? 'fa fa-compress ' : 'fa fa-expand ') +
-        styles.jsonButtonAlign
-      }
-      onClick={() => updateState(toggleEditorType())}
-    />,
-  ];
+  return (
+    <span>
+      <label>{renderHtml}</label>
+      <i
+        key="icon_json_editor"
+        className={
+          (state.showEditorType === JSONKEY
+            ? 'fa fa-compress '
+            : 'fa fa-expand ') + styles.jsonButtonAlign
+        }
+        onClick={() => updateState(toggleEditorType())}
+      />
+    </span>
+  );
 };
 
 /*
diff --git a/console/src/components/Services/Data/TableBrowseRows/EditActions.js b/console/src/components/Services/Data/TableBrowseRows/EditActions.js
index fb6868acd1340..29ba248542e58 100644
--- a/console/src/components/Services/Data/TableBrowseRows/EditActions.js
+++ b/console/src/components/Services/Data/TableBrowseRows/EditActions.js
@@ -44,6 +44,8 @@ const editItem = (tableName, colValues) => {
           insertObject[colName] = null;
         }
       } else if (colType === 'json' || colType === 'jsonb') {
+        console.log('ColValues');
+        console.log(colValues[colName]);
         try {
           const val = JSON.parse(colValues[colName]);
           insertObject[colName] = val;
diff --git a/console/src/components/Services/Data/TableInsertItem/InsertItem.js b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
index c3015da7632e3..035eca1d66576 100644
--- a/console/src/components/Services/Data/TableInsertItem/InsertItem.js
+++ b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
@@ -161,14 +161,7 @@ class InsertItem extends Component {
           >
             {colName}
           </label>
-          <label
-            className={
-              styles.radioLabel +
-              ' radio-inline' +
-              ' ' +
-              styles.relative_position
-            }
-          >
+          <label className={styles.radioLabel + ' radio-inline'}>
             <input
               disabled={isAutoIncrement}
               type="radio"

From 25ce59121c87bd3a68a324443b7bce8828cc1188 Mon Sep 17 00:00:00 2001
From: Karthik Venkateswaran <karthik@hasura.io>
Date: Thu, 16 May 2019 13:07:54 +0530
Subject: [PATCH 04/10] Add json editor for json input

---
 console/src/components/Common/Common.scss     |   4 +
 .../Common/CustomInputTypes/JsonInput.js      | 124 ++++--------------
 .../Data/TableBrowseRows/EditActions.js       |   2 -
 .../Services/Data/TableBrowseRows/EditItem.js |   7 +-
 .../Data/TableInsertItem/InsertItem.js        |  21 ++-
 console/src/utils/domFunctions.js             |   9 ++
 6 files changed, 64 insertions(+), 103 deletions(-)

diff --git a/console/src/components/Common/Common.scss b/console/src/components/Common/Common.scss
index 496a8689caffb..9e4740b1b617a 100644
--- a/console/src/components/Common/Common.scss
+++ b/console/src/components/Common/Common.scss
@@ -54,6 +54,10 @@ table thead tr th {
   top: 10px;
   right: 10px;
   z-index: 100;
+  opacity: 0.3;
+  &:hover {
+    opacity: 1.0;
+  }
 }
 .pageSidebar {
   height: calc(100vh - 50px);
diff --git a/console/src/components/Common/CustomInputTypes/JsonInput.js b/console/src/components/Common/CustomInputTypes/JsonInput.js
index 080d8e76dbf05..e18191b98bd3e 100644
--- a/console/src/components/Common/CustomInputTypes/JsonInput.js
+++ b/console/src/components/Common/CustomInputTypes/JsonInput.js
@@ -27,7 +27,7 @@ const createInitialState = data => {
 
 const JsonInput = props => {
   const { standardProps, placeholderProp } = props;
-  const { defaultValue } = standardProps;
+  const { defaultValue, onChange } = standardProps;
   const allProps = { ...standardProps };
   delete allProps.defaultValue;
   const [state, updateState] = useState(createInitialState(defaultValue));
@@ -52,10 +52,25 @@ const JsonInput = props => {
     };
   };
   const handleKeyUpEvent = e => {
-    if (e.ctrlKey && e.which === 32) {
+    if ((e.ctrlKey || event.metaKey) && e.which === 32) {
       updateState(toggleEditorType());
     }
   };
+
+  const handleInputChangeAndPropagate = e => {
+    updateState(updateData(e.target.value));
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  const handleTextAreaChangeAndPropagate = (value, e) => {
+    updateState(updateData(value));
+    if (onChange) {
+      onChange(e, value);
+    }
+  };
+
   const renderHtml =
     showEditorType === JSONKEY ? (
       <AceEditor
@@ -69,9 +84,16 @@ const JsonInput = props => {
         width="100%"
         value={data}
         showPrintMargin={false}
+        onChange={handleTextAreaChangeAndPropagate}
         showGutter={false}
-        onChange={val => updateState(updateData(val))}
-        onFocus={e => console.log(e)}
+        focus
+        commands={[
+          {
+            name: 'toggleEditor',
+            bindKey: { win: 'Ctrl-Space', mac: 'Command-Space' },
+            exec: () => updateState(toggleEditorType()),
+          },
+        ]}
       />
     ) : (
       <input
@@ -79,12 +101,12 @@ const JsonInput = props => {
         {...allProps}
         placeholder={`${placeholderProp} (Ctrl + Space to toggle)`}
         value={data}
-        onChange={e => updateState(updateData(e.target.value))}
+        onChange={handleInputChangeAndPropagate}
         onKeyUp={handleKeyUpEvent}
       />
     );
   return (
-    <span>
+    <span className="json_input_editor">
       <label>{renderHtml}</label>
       <i
         key="icon_json_editor"
@@ -98,94 +120,4 @@ const JsonInput = props => {
     </span>
   );
 };
-
-/*
-class Jsontoggler extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      input_json: 0,
-    };
-
-    this.handleClick = this.handleClick.bind(this);
-    this.parseString = this.parseString.bind(this);
-  }
-
-  handleClick(e) {
-    e.preventDefault();
-    const stateValue = this.state.input_json;
-    if (stateValue === 0) {
-      this.setState({ input_json: 1 });
-    } else {
-      this.setState({ input_json: 0 });
-    }
-  }
-
-  parseString() {
-    const { defaultValue } = this.props.standardProps;
-    try {
-      if (typeof defaultValue === 'object') {
-        return JSON.stringify(defaultValue, null, 4);
-      }
-      return JSON.stringify(JSON.parse(defaultValue), null, 4);
-    } catch (e) {
-      return defaultValue;
-    }
-  }
-
-  getValueFromRelatedInput() {
-    const { refNode } = this.props;
-    console.log('RefNode');
-    console.log(refNode);
-    if (refNode && 'valueNode' in refNode && refNode.valueNode) {
-      if ('props' in refNode.valueNode) {
-        return refNode.valueNode.refEditor.innerText;
-      }
-      return refNode.valueNode.value;
-    }
-    return '';
-  }
-
-  render() {
-    const initialVal = this.getValueFromRelatedInput() || this.parseString();
-    console.log('initialVal');
-    console.log(initialVal);
-    return (
-      <span>
-        <label>
-          {this.state.input_json === 1 ? (
-            <AceEditor
-              {...this.props.standardProps}
-              mode="json"
-              theme="github"
-              name="jsontoggler"
-              minLines={10}
-              maxLines={100}
-              width="100%"
-              defaultValue={initialVal}
-              showPrintMargin={false}
-              showGutter={false}
-            />
-          ) : (
-            <input
-              {...this.props.standardProps}
-              placeholder={this.props.placeholderProp}
-              defaultValue={initialVal}
-            />
-          )}
-        </label>
-        <i
-          className={
-            (this.state.input_json === 1
-              ? 'fa fa-compress '
-              : 'fa fa-expand ') + styles.jsonButtonAlign
-          }
-          onClick={this.handleClick}
-        />
-      </span>
-    );
-  }
-} */
-
 export default JsonInput;
diff --git a/console/src/components/Services/Data/TableBrowseRows/EditActions.js b/console/src/components/Services/Data/TableBrowseRows/EditActions.js
index 29ba248542e58..fb6868acd1340 100644
--- a/console/src/components/Services/Data/TableBrowseRows/EditActions.js
+++ b/console/src/components/Services/Data/TableBrowseRows/EditActions.js
@@ -44,8 +44,6 @@ const editItem = (tableName, colValues) => {
           insertObject[colName] = null;
         }
       } else if (colType === 'json' || colType === 'jsonb') {
-        console.log('ColValues');
-        console.log(colValues[colName]);
         try {
           const val = JSON.parse(colValues[colName]);
           insertObject[colName] = val;
diff --git a/console/src/components/Services/Data/TableBrowseRows/EditItem.js b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
index c37fbdf47deb9..06fa46e145593 100644
--- a/console/src/components/Services/Data/TableBrowseRows/EditItem.js
+++ b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
@@ -354,7 +354,12 @@ class EditItem extends Component {
                       // default
                       return;
                     } else {
-                      inputValues[colName] = refs[colName].valueNode.value; // TypedInput is an input inside a div
+                      if (refs[colName].valueNode.props) {
+                        inputValues[colName] =
+                          refs[colName].valueNode.props.value;
+                      } else {
+                        inputValues[colName] = refs[colName].valueNode.value; // TypedInput is an input inside a div
+                      }
                     }
                   });
                   dispatch(editItem(tableName, inputValues));
diff --git a/console/src/components/Services/Data/TableInsertItem/InsertItem.js b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
index 035eca1d66576..da95e5f9210ef 100644
--- a/console/src/components/Services/Data/TableInsertItem/InsertItem.js
+++ b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
@@ -8,6 +8,8 @@ import JsonInput from '../../../Common/CustomInputTypes/JsonInput';
 import Button from '../../../Common/Button/Button';
 import { getPlaceholder, BOOLEAN, JSONB, JSONDTYPE } from '../utils';
 
+import { getMeParentNodeByClass } from '../../../../utils/domFunctions';
+
 class InsertItem extends Component {
   constructor() {
     super();
@@ -58,7 +60,12 @@ class InsertItem extends Component {
       refs[colName] = { valueNode: null, nullNode: null, defaultNode: null };
       const inputRef = node => (refs[colName].valueNode = node);
       const clicker = e => {
-        e.target.parentNode.click();
+        const checkboxLabel = getMeParentNodeByClass(e.target, 'radio-inline');
+        if (checkboxLabel) {
+          checkboxLabel.click();
+        } else {
+          e.target.parentNode.click();
+        }
         e.target.focus();
       };
       const colDefault = col.column_default;
@@ -75,11 +82,16 @@ class InsertItem extends Component {
         'data-test': `typed-input-${i}`,
         defaultValue: clone && colName in clone ? clone[colName] : '',
         onClick: clicker,
-        onChange: e => {
+        onChange: (e, val) => {
           if (isAutoIncrement) return;
           if (!isNullable && !hasDefault) return;
 
-          const textValue = e.target.value;
+          let textValue = '';
+          if (typeof val === 'string') {
+            textValue = val;
+          } else {
+            textValue = e.target.value;
+          }
           const radioToSelectWhenEmpty = hasDefault
             ? refs[colName].defaultNode
             : refs[colName].nullNode;
@@ -258,8 +270,9 @@ class InsertItem extends Component {
                       return;
                     } else {
                       if (refs[colName].valueNode.props !== undefined) {
+                        console.log(refs[colName].valueNode.props);
                         inputValues[colName] =
-                          refs[colName].valueNode.refEditor.innerText;
+                          refs[colName].valueNode.props.value;
                       } else {
                         inputValues[colName] = refs[colName].valueNode.value;
                       }
diff --git a/console/src/utils/domFunctions.js b/console/src/utils/domFunctions.js
index 16644cc4675c7..9ead23fe40bef 100644
--- a/console/src/utils/domFunctions.js
+++ b/console/src/utils/domFunctions.js
@@ -7,3 +7,12 @@ export const getMeParentNode = (node, selector) => {
   }
   return null;
 };
+
+export const getMeParentNodeByClass = (node, selector) => {
+  if (node && !node.documentElement) {
+    return node.classList.contains(selector)
+      ? node
+      : getMeParentNodeByClass(node.parentNode, selector);
+  }
+  return null;
+};

From 5a02920cb7906cb47be490340d261360d411e27f Mon Sep 17 00:00:00 2001
From: Karthik Venkateswaran <karthik@hasura.io>
Date: Thu, 16 May 2019 13:47:51 +0530
Subject: [PATCH 05/10] Fix issue where toggle was referencing older state

---
 .../Common/CustomInputTypes/JsonInput.js      | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/console/src/components/Common/CustomInputTypes/JsonInput.js b/console/src/components/Common/CustomInputTypes/JsonInput.js
index e18191b98bd3e..4636b2c568470 100644
--- a/console/src/components/Common/CustomInputTypes/JsonInput.js
+++ b/console/src/components/Common/CustomInputTypes/JsonInput.js
@@ -32,40 +32,47 @@ const JsonInput = props => {
   delete allProps.defaultValue;
   const [state, updateState] = useState(createInitialState(defaultValue));
   const { showEditorType, data } = state;
-  const updateData = newData => {
+  const updateData = (newData, currentState) => {
     return {
-      ...state,
+      ...currentState,
       data: newData,
     };
   };
-  const toggleEditorType = () => {
-    if (state.showEditorType === JSONKEY) {
+
+  const toggleEditorType = currentState => {
+    if (currentState.showEditorType === JSONKEY) {
       return {
-        ...state,
+        ...currentState,
         showEditorType: NORMALKEY,
       };
     }
     return {
-      ...state,
-      data: parseJSONData(state.data),
+      ...currentState,
+      data: parseJSONData(currentState.data),
       showEditorType: JSONKEY,
     };
   };
   const handleKeyUpEvent = e => {
     if ((e.ctrlKey || event.metaKey) && e.which === 32) {
-      updateState(toggleEditorType());
+      updateState(toggleEditorType);
     }
   };
 
+  const handleEditorExec = () => {
+    updateState(toggleEditorType);
+  };
+
   const handleInputChangeAndPropagate = e => {
-    updateState(updateData(e.target.value));
+    const val = e.target.value;
+    updateState(currentState => updateData(val, currentState));
     if (onChange) {
       onChange(e);
     }
   };
 
   const handleTextAreaChangeAndPropagate = (value, e) => {
-    updateState(updateData(value));
+    const val = value;
+    updateState(currentState => updateData(val, currentState));
     if (onChange) {
       onChange(e, value);
     }
@@ -91,7 +98,7 @@ const JsonInput = props => {
           {
             name: 'toggleEditor',
             bindKey: { win: 'Ctrl-Space', mac: 'Command-Space' },
-            exec: () => updateState(toggleEditorType()),
+            exec: handleEditorExec,
           },
         ]}
       />
@@ -115,7 +122,7 @@ const JsonInput = props => {
             ? 'fa fa-compress '
             : 'fa fa-expand ') + styles.jsonButtonAlign
         }
-        onClick={() => updateState(toggleEditorType())}
+        onClick={() => updateState(toggleEditorType)}
       />
     </span>
   );

From dfb6eec3b7fa2a812542772565715ebe4f7285bc Mon Sep 17 00:00:00 2001
From: rikinsk <rikin.kachhia@gmail.com>
Date: Fri, 24 May 2019 19:21:29 +0530
Subject: [PATCH 06/10] added padding

---
 console/src/components/Common/Common.scss     | 10 -------
 .../Common/CustomInputTypes/JsonInput.js      | 26 ++++++++++++++-----
 .../Common/CustomInputTypes/JsonInput.scss    | 14 ++++++++++
 3 files changed, 33 insertions(+), 17 deletions(-)
 create mode 100644 console/src/components/Common/CustomInputTypes/JsonInput.scss

diff --git a/console/src/components/Common/Common.scss b/console/src/components/Common/Common.scss
index 03f75a0c446f3..3d3edf9c25ca3 100644
--- a/console/src/components/Common/Common.scss
+++ b/console/src/components/Common/Common.scss
@@ -49,16 +49,6 @@ table thead tr th {
   font-weight: 600 !important;
 }
 
-.jsonButtonAlign {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 100;
-  opacity: 0.3;
-  &:hover {
-    opacity: 1.0;
-  }
-}
 .pageSidebar {
   height: calc(100vh - 50px);
   overflow: auto;
diff --git a/console/src/components/Common/CustomInputTypes/JsonInput.js b/console/src/components/Common/CustomInputTypes/JsonInput.js
index 4636b2c568470..7d5ff0cac9d56 100644
--- a/console/src/components/Common/CustomInputTypes/JsonInput.js
+++ b/console/src/components/Common/CustomInputTypes/JsonInput.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import AceEditor from 'react-ace';
 
-const styles = require('../Common.scss');
+const styles = require('./JsonInput.scss');
 
 const NORMALKEY = 'normal';
 const JSONKEY = 'json';
@@ -32,6 +32,7 @@ const JsonInput = props => {
   delete allProps.defaultValue;
   const [state, updateState] = useState(createInitialState(defaultValue));
   const { showEditorType, data } = state;
+
   const updateData = (newData, currentState) => {
     return {
       ...currentState,
@@ -52,6 +53,7 @@ const JsonInput = props => {
       showEditorType: JSONKEY,
     };
   };
+
   const handleKeyUpEvent = e => {
     if ((e.ctrlKey || event.metaKey) && e.which === 32) {
       updateState(toggleEditorType);
@@ -78,8 +80,8 @@ const JsonInput = props => {
     }
   };
 
-  const renderHtml =
-    showEditorType === JSONKEY ? (
+  const getJsonEditor = () => {
+    return (
       <AceEditor
         key="ace_json_editor"
         {...allProps}
@@ -102,7 +104,11 @@ const JsonInput = props => {
           },
         ]}
       />
-    ) : (
+    );
+  };
+
+  const getNormalEditor = () => {
+    return (
       <input
         key="input_json_editor"
         {...allProps}
@@ -110,17 +116,23 @@ const JsonInput = props => {
         value={data}
         onChange={handleInputChangeAndPropagate}
         onKeyUp={handleKeyUpEvent}
+        className={allProps.className + ' ' + styles.jsonInput}
       />
     );
+  };
+
+  const renderHtml =
+    showEditorType === JSONKEY ? getJsonEditor() : getNormalEditor();
+
   return (
     <span className="json_input_editor">
       <label>{renderHtml}</label>
       <i
         key="icon_json_editor"
         className={
-          (state.showEditorType === JSONKEY
-            ? 'fa fa-compress '
-            : 'fa fa-expand ') + styles.jsonButtonAlign
+          'fa ' +
+          styles.jsonButtonAlign +
+          (showEditorType === JSONKEY ? ' fa-compress' : ' fa-expand')
         }
         onClick={() => updateState(toggleEditorType)}
       />
diff --git a/console/src/components/Common/CustomInputTypes/JsonInput.scss b/console/src/components/Common/CustomInputTypes/JsonInput.scss
new file mode 100644
index 0000000000000..ea4d0ce33e27d
--- /dev/null
+++ b/console/src/components/Common/CustomInputTypes/JsonInput.scss
@@ -0,0 +1,14 @@
+.jsonInput {
+  padding-right: 30px;
+}
+
+.jsonButtonAlign {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 100;
+  opacity: 0.3;
+  &:hover {
+    opacity: 1.0;
+  }
+}
\ No newline at end of file

From dec15dc67d1a72fd342c9844fb79d79ad5557099 Mon Sep 17 00:00:00 2001
From: rikinsk <rikin.kachhia@gmail.com>
Date: Fri, 24 May 2019 19:57:20 +0530
Subject: [PATCH 07/10] update

---
 console/src/components/Common/Common.scss     |  4 ----
 .../Common/CustomInputTypes/JsonInput.js      |  4 ++--
 .../components/Common/Dropdown/Dropdown.js    |  4 ++--
 .../Services/Data/TableBrowseRows/EditItem.js | 12 ++++------
 .../Data/TableInsertItem/InsertItem.js        | 23 +++++++------------
 console/src/utils/domFunctions.js             |  8 +++----
 6 files changed, 20 insertions(+), 35 deletions(-)

diff --git a/console/src/components/Common/Common.scss b/console/src/components/Common/Common.scss
index 3d3edf9c25ca3..78ebdd0fe5c88 100644
--- a/console/src/components/Common/Common.scss
+++ b/console/src/components/Common/Common.scss
@@ -1245,10 +1245,6 @@ code {
   }
 }
 
-.relative_position {
-  position: relative;
-}
-
 .fixed_header_internal_link {
   display: block;
   position: relative;
diff --git a/console/src/components/Common/CustomInputTypes/JsonInput.js b/console/src/components/Common/CustomInputTypes/JsonInput.js
index 7d5ff0cac9d56..cb6e8f07da5ad 100644
--- a/console/src/components/Common/CustomInputTypes/JsonInput.js
+++ b/console/src/components/Common/CustomInputTypes/JsonInput.js
@@ -121,12 +121,12 @@ const JsonInput = props => {
     );
   };
 
-  const renderHtml =
+  const editor =
     showEditorType === JSONKEY ? getJsonEditor() : getNormalEditor();
 
   return (
     <span className="json_input_editor">
-      <label>{renderHtml}</label>
+      <label>{editor}</label>
       <i
         key="icon_json_editor"
         className={
diff --git a/console/src/components/Common/Dropdown/Dropdown.js b/console/src/components/Common/Dropdown/Dropdown.js
index 5eb5f6b46494b..c58aafd52bafe 100644
--- a/console/src/components/Common/Dropdown/Dropdown.js
+++ b/console/src/components/Common/Dropdown/Dropdown.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { getMeParentNode } from '../../../utils/domFunctions';
+import { getParentNodeByAttribute } from '../../../utils/domFunctions';
 import Button from '../Button/Button';
 
 const styles = require('./Dropdown.scss');
@@ -65,7 +65,7 @@ const Dropdown = ({ keyPrefix, testId, children, options, position }) => {
     /*
      * Update the state only if the element clicked on is not the data dropdown component
      * */
-    const dataElement = getMeParentNode(e.target, 'data-element');
+    const dataElement = getParentNodeByAttribute(e.target, 'data-element');
     if (d) {
       /* If the element has parent whose `nodeId` is same as the current one
        * */
diff --git a/console/src/components/Services/Data/TableBrowseRows/EditItem.js b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
index 06fa46e145593..faeae37e29b7b 100644
--- a/console/src/components/Services/Data/TableBrowseRows/EditItem.js
+++ b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
@@ -15,8 +15,6 @@ import {
   DATE,
   BOOLEAN,
   UUID,
-  // JSONDTYPE,
-  // JSONB,
   TIMESTAMP,
   TIMETZ,
 } from '../utils';
@@ -354,12 +352,10 @@ class EditItem extends Component {
                       // default
                       return;
                     } else {
-                      if (refs[colName].valueNode.props) {
-                        inputValues[colName] =
-                          refs[colName].valueNode.props.value;
-                      } else {
-                        inputValues[colName] = refs[colName].valueNode.value; // TypedInput is an input inside a div
-                      }
+                      inputValues[colName] =
+                        refs[colName].valueNode.props !== undefined
+                          ? refs[colName].valueNode.props.value
+                          : refs[colName].valueNode.value;
                     }
                   });
                   dispatch(editItem(tableName, inputValues));
diff --git a/console/src/components/Services/Data/TableInsertItem/InsertItem.js b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
index da95e5f9210ef..401cd9bdc7def 100644
--- a/console/src/components/Services/Data/TableInsertItem/InsertItem.js
+++ b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
@@ -8,7 +8,7 @@ import JsonInput from '../../../Common/CustomInputTypes/JsonInput';
 import Button from '../../../Common/Button/Button';
 import { getPlaceholder, BOOLEAN, JSONB, JSONDTYPE } from '../utils';
 
-import { getMeParentNodeByClass } from '../../../../utils/domFunctions';
+import { getParentNodeByClass } from '../../../../utils/domFunctions';
 
 class InsertItem extends Component {
   constructor() {
@@ -60,7 +60,7 @@ class InsertItem extends Component {
       refs[colName] = { valueNode: null, nullNode: null, defaultNode: null };
       const inputRef = node => (refs[colName].valueNode = node);
       const clicker = e => {
-        const checkboxLabel = getMeParentNodeByClass(e.target, 'radio-inline');
+        const checkboxLabel = getParentNodeByClass(e.target, 'radio-inline');
         if (checkboxLabel) {
           checkboxLabel.click();
         } else {
@@ -86,12 +86,8 @@ class InsertItem extends Component {
           if (isAutoIncrement) return;
           if (!isNullable && !hasDefault) return;
 
-          let textValue = '';
-          if (typeof val === 'string') {
-            textValue = val;
-          } else {
-            textValue = e.target.value;
-          }
+          const textValue = typeof val === 'string' ? val : e.target.value;
+
           const radioToSelectWhenEmpty = hasDefault
             ? refs[colName].defaultNode
             : refs[colName].nullNode;
@@ -269,13 +265,10 @@ class InsertItem extends Component {
                       // default
                       return;
                     } else {
-                      if (refs[colName].valueNode.props !== undefined) {
-                        console.log(refs[colName].valueNode.props);
-                        inputValues[colName] =
-                          refs[colName].valueNode.props.value;
-                      } else {
-                        inputValues[colName] = refs[colName].valueNode.value;
-                      }
+                      inputValues[colName] =
+                        refs[colName].valueNode.props !== undefined
+                          ? refs[colName].valueNode.props.value
+                          : refs[colName].valueNode.value;
                     }
                   });
                   dispatch(insertItem(tableName, inputValues)).then(() => {
diff --git a/console/src/utils/domFunctions.js b/console/src/utils/domFunctions.js
index 9ead23fe40bef..853444f31f908 100644
--- a/console/src/utils/domFunctions.js
+++ b/console/src/utils/domFunctions.js
@@ -1,18 +1,18 @@
 /* Add error messages when trying to use the function */
-export const getMeParentNode = (node, selector) => {
+export const getParentNodeByAttribute = (node, selector) => {
   if (node && !node.documentElement) {
     return node.hasAttribute(selector)
       ? node
-      : getMeParentNode(node.parentNode, selector);
+      : getParentNodeByAttribute(node.parentNode, selector);
   }
   return null;
 };
 
-export const getMeParentNodeByClass = (node, selector) => {
+export const getParentNodeByClass = (node, selector) => {
   if (node && !node.documentElement) {
     return node.classList.contains(selector)
       ? node
-      : getMeParentNodeByClass(node.parentNode, selector);
+      : getParentNodeByClass(node.parentNode, selector);
   }
   return null;
 };

From 122c99d2ff008d3ce31f176bca6cac1c86021c97 Mon Sep 17 00:00:00 2001
From: rikinsk <rikin.kachhia@gmail.com>
Date: Fri, 24 May 2019 19:58:59 +0530
Subject: [PATCH 08/10] update

---
 console/src/components/Common/CustomInputTypes/JsonInput.js   | 4 ++--
 console/src/components/Common/CustomInputTypes/JsonInput.scss | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/console/src/components/Common/CustomInputTypes/JsonInput.js b/console/src/components/Common/CustomInputTypes/JsonInput.js
index cb6e8f07da5ad..9fe866a91e405 100644
--- a/console/src/components/Common/CustomInputTypes/JsonInput.js
+++ b/console/src/components/Common/CustomInputTypes/JsonInput.js
@@ -116,7 +116,7 @@ const JsonInput = props => {
         value={data}
         onChange={handleInputChangeAndPropagate}
         onKeyUp={handleKeyUpEvent}
-        className={allProps.className + ' ' + styles.jsonInput}
+        className={allProps.className + ' ' + styles.jsonNormalInput}
       />
     );
   };
@@ -131,7 +131,7 @@ const JsonInput = props => {
         key="icon_json_editor"
         className={
           'fa ' +
-          styles.jsonButtonAlign +
+          styles.jsonToggleButton +
           (showEditorType === JSONKEY ? ' fa-compress' : ' fa-expand')
         }
         onClick={() => updateState(toggleEditorType)}
diff --git a/console/src/components/Common/CustomInputTypes/JsonInput.scss b/console/src/components/Common/CustomInputTypes/JsonInput.scss
index ea4d0ce33e27d..ae10091148f1e 100644
--- a/console/src/components/Common/CustomInputTypes/JsonInput.scss
+++ b/console/src/components/Common/CustomInputTypes/JsonInput.scss
@@ -1,8 +1,8 @@
-.jsonInput {
+.jsonNormalInput {
   padding-right: 30px;
 }
 
-.jsonButtonAlign {
+.jsonToggleButton {
   position: absolute;
   top: 10px;
   right: 10px;

From a6a0fa04d0f1506db6c5cceabb55d9e191ecd59d Mon Sep 17 00:00:00 2001
From: rikinsk <rikin.kachhia@gmail.com>
Date: Fri, 24 May 2019 20:26:32 +0530
Subject: [PATCH 09/10] update

---
 .../Common/CustomInputTypes/JsonInput.js      | 17 ++----
 console/src/components/Services/Data/utils.js | 56 +++++++++----------
 2 files changed, 33 insertions(+), 40 deletions(-)

diff --git a/console/src/components/Common/CustomInputTypes/JsonInput.js b/console/src/components/Common/CustomInputTypes/JsonInput.js
index 9fe866a91e405..8aa121542a4a8 100644
--- a/console/src/components/Common/CustomInputTypes/JsonInput.js
+++ b/console/src/components/Common/CustomInputTypes/JsonInput.js
@@ -8,10 +8,9 @@ const JSONKEY = 'json';
 
 const parseJSONData = data => {
   try {
-    if (typeof data === 'object') {
-      return JSON.stringify(data, null, 4);
-    }
-    return JSON.stringify(JSON.parse(data), null, 4);
+    return typeof data === 'object'
+      ? JSON.stringify(data)
+      : JSON.stringify(JSON.parse(data));
   } catch (e) {
     return data;
   }
@@ -41,16 +40,10 @@ const JsonInput = props => {
   };
 
   const toggleEditorType = currentState => {
-    if (currentState.showEditorType === JSONKEY) {
-      return {
-        ...currentState,
-        showEditorType: NORMALKEY,
-      };
-    }
     return {
       ...currentState,
-      data: parseJSONData(currentState.data),
-      showEditorType: JSONKEY,
+      showEditorType:
+        currentState.showEditorType === JSONKEY ? NORMALKEY : JSONKEY,
     };
   };
 
diff --git a/console/src/components/Services/Data/utils.js b/console/src/components/Services/Data/utils.js
index a7ec99cfb8897..dd5eaf12b4758 100644
--- a/console/src/components/Services/Data/utils.js
+++ b/console/src/components/Services/Data/utils.js
@@ -193,42 +193,24 @@ export const commonDataTypes = [
     description: 'autoincrementing four-byte integer',
     hasuraDatatype: null,
   },
-  {
-    name: 'UUID',
-    value: 'uuid',
-    description: 'universal unique identifier',
-    hasuraDatatype: 'uuid',
-  },
-  {
-    name: 'Big Integer',
-    value: 'bigint',
-    description: 'signed eight-byte integer',
-    hasuraDatatype: 'bigint',
-  },
-  {
-    name: 'Big Integer (auto-increment)',
-    value: 'bigserial',
-    description: 'autoincrementing eight-byte integer',
-    hasuraDatatype: null,
-  },
   {
     name: 'Text',
     value: 'text',
     description: 'variable-length character string',
     hasuraDatatype: 'text',
   },
+  {
+    name: 'Boolean',
+    value: 'boolean',
+    description: 'logical Boolean (true/false)',
+    hasuraDatatype: 'boolean',
+  },
   {
     name: 'Numeric',
     value: 'numeric',
     description: 'exact numeric of selected precision',
     hasuraDatatype: 'numeric',
   },
-  {
-    name: 'Date',
-    value: 'date',
-    description: 'calendar date (year, month, day)',
-    hasuraDatatype: 'date',
-  },
   {
     name: 'Timestamp',
     value: 'timestamptz',
@@ -242,10 +224,16 @@ export const commonDataTypes = [
     hasuraDatatype: 'time with time zone',
   },
   {
-    name: 'Boolean',
-    value: 'boolean',
-    description: 'logical Boolean (true/false)',
-    hasuraDatatype: 'boolean',
+    name: 'Date',
+    value: 'date',
+    description: 'calendar date (year, month, day)',
+    hasuraDatatype: 'date',
+  },
+  {
+    name: 'UUID',
+    value: 'uuid',
+    description: 'universal unique identifier',
+    hasuraDatatype: 'uuid',
   },
   {
     name: 'JSONB',
@@ -253,6 +241,18 @@ export const commonDataTypes = [
     description: 'binary format JSON data',
     hasuraDatatype: 'jsonb',
   },
+  {
+    name: 'Big Integer',
+    value: 'bigint',
+    description: 'signed eight-byte integer',
+    hasuraDatatype: 'bigint',
+  },
+  {
+    name: 'Big Integer (auto-increment)',
+    value: 'bigserial',
+    description: 'autoincrementing eight-byte integer',
+    hasuraDatatype: null,
+  },
 ];
 
 export const fetchColumnTypesQuery = `

From 8acb16aeeea04611a96b9996ba57ddf497589a98 Mon Sep 17 00:00:00 2001
From: rikinsk <rikin.kachhia@gmail.com>
Date: Fri, 24 May 2019 20:39:24 +0530
Subject: [PATCH 10/10] update

---
 .../Common/CustomInputTypes/JsonInput.js      | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/console/src/components/Common/CustomInputTypes/JsonInput.js b/console/src/components/Common/CustomInputTypes/JsonInput.js
index 8aa121542a4a8..83e7a55318112 100644
--- a/console/src/components/Common/CustomInputTypes/JsonInput.js
+++ b/console/src/components/Common/CustomInputTypes/JsonInput.js
@@ -6,11 +6,11 @@ const styles = require('./JsonInput.scss');
 const NORMALKEY = 'normal';
 const JSONKEY = 'json';
 
-const parseJSONData = data => {
+const parseJSONData = (data, editorType) => {
   try {
-    return typeof data === 'object'
-      ? JSON.stringify(data)
-      : JSON.stringify(JSON.parse(data));
+    const dataObject = typeof data === 'object' ? data : JSON.parse(data);
+
+    return JSON.stringify(dataObject, null, editorType === JSONKEY ? 4 : 0);
   } catch (e) {
     return data;
   }
@@ -18,8 +18,8 @@ const parseJSONData = data => {
 
 const createInitialState = data => {
   const initialState = {
-    showEditorType: NORMALKEY,
-    data: parseJSONData(data),
+    editorType: NORMALKEY,
+    data: parseJSONData(data, NORMALKEY),
   };
   return initialState;
 };
@@ -30,7 +30,7 @@ const JsonInput = props => {
   const allProps = { ...standardProps };
   delete allProps.defaultValue;
   const [state, updateState] = useState(createInitialState(defaultValue));
-  const { showEditorType, data } = state;
+  const { editorType, data } = state;
 
   const updateData = (newData, currentState) => {
     return {
@@ -40,10 +40,13 @@ const JsonInput = props => {
   };
 
   const toggleEditorType = currentState => {
+    const nextEditorType =
+      currentState.editorType === JSONKEY ? NORMALKEY : JSONKEY;
+
     return {
       ...currentState,
-      showEditorType:
-        currentState.showEditorType === JSONKEY ? NORMALKEY : JSONKEY,
+      data: parseJSONData(currentState.data, nextEditorType),
+      editorType: nextEditorType,
     };
   };
 
@@ -114,8 +117,7 @@ const JsonInput = props => {
     );
   };
 
-  const editor =
-    showEditorType === JSONKEY ? getJsonEditor() : getNormalEditor();
+  const editor = editorType === JSONKEY ? getJsonEditor() : getNormalEditor();
 
   return (
     <span className="json_input_editor">
@@ -125,7 +127,7 @@ const JsonInput = props => {
         className={
           'fa ' +
           styles.jsonToggleButton +
-          (showEditorType === JSONKEY ? ' fa-compress' : ' fa-expand')
+          (editorType === JSONKEY ? ' fa-compress' : ' fa-expand')
         }
         onClick={() => updateState(toggleEditorType)}
       />