change json field placeholder from 'asdf' to 'bar' (close #1260) (#1261)

console/src/components/Services/Data/TableBrowseRows/EditItem.js

@@ -6,6 +6,19 @@ import globals from '../../../../Globals';
 import { modalClose } from './EditActions';
 import Button from '../../Layout/Button/Button';
 
+import {
+  getPlaceholder,
+  INTEGER,
+  BIGINT,
+  NUMERIC,
+  DATE,
+  BOOLEAN,
+  UUID,
+  JSONDTYPE,
+  JSONB,
+  TIMESTAMP,
+  TIMETZ,
+} from '../../../../constants';
 // import RichTextEditor from 'react-rte';
 import { replace } from 'react-router-redux';
 
@@ -72,7 +85,7 @@ class EditItem extends Component {
       // Text type
       let typedInput = (
         <input
-          placeholder="text"
+          placeholder={getPlaceholder(colType)}
           type="text"
           className={'form-control ' + styles.insertBox}
           onClick={clicker}
@@ -83,10 +96,10 @@ class EditItem extends Component {
       );
 
       // Integer
-      if (colType === 'integer') {
+      if (colType === INTEGER) {
         typedInput = (
           <input
-            placeholder="integer"
+            placeholder={getPlaceholder(colType)}
             type="text"
             className={'form-control ' + styles.insertBox}
             onClick={clicker}
@@ -95,10 +108,10 @@ class EditItem extends Component {
             data-test={`typed-input-${i}`}
           />
         );
-      } else if (colType === 'numeric') {
+      } else if (colType === BIGINT) {
         typedInput = (
           <input
-            placeholder="float"
+            placeholder={getPlaceholder(colType)}
             type="text"
             className={'form-control ' + styles.insertBox}
             onClick={clicker}
@@ -107,10 +120,10 @@ class EditItem extends Component {
             data-test={`typed-input-${i}`}
           />
         );
-      } else if (colType === 'timestamp with time zone') {
+      } else if (colType === NUMERIC) {
         typedInput = (
           <input
-            placeholder={new Date().toISOString()}
+            placeholder={getPlaceholder(colType)}
             type="text"
             className={'form-control ' + styles.insertBox}
             onClick={clicker}
@@ -119,10 +132,10 @@ class EditItem extends Component {
             data-test={`typed-input-${i}`}
           />
         );
-      } else if (colType === 'date') {
+      } else if (colType === TIMESTAMP) {
         typedInput = (
           <input
-            placeholder={new Date().toISOString().slice(0, 10)}
+            placeholder={getPlaceholder(colType)}
             type="text"
             className={'form-control ' + styles.insertBox}
             onClick={clicker}
@@ -131,11 +144,10 @@ class EditItem extends Component {
             data-test={`typed-input-${i}`}
           />
         );
-      } else if (colType === 'timetz') {
-        const time = new Date().toISOString().slice(11, 19);
+      } else if (colType === DATE) {
         typedInput = (
           <input
-            placeholder={`${time}Z or ${time}+05:30`}
+            placeholder={getPlaceholder(colType)}
             type="text"
             className={'form-control ' + styles.insertBox}
             onClick={clicker}
@@ -144,10 +156,22 @@ class EditItem extends Component {
             data-test={`typed-input-${i}`}
           />
         );
-      } else if (colType === 'json' || colType === 'jsonb') {
+      } else if (colType === TIMETZ) {
         typedInput = (
           <input
-            placeholder={'{"name": "foo"} or [12, "asdf"]'}
+            placeholder={getPlaceholder(colType)}
+            type="text"
+            className={'form-control ' + styles.insertBox}
+            onClick={clicker}
+            ref={inputRef}
+            defaultValue={oldItem[colName]}
+            data-test={`typed-input-${i}`}
+          />
+        );
+      } else if (colType === JSONDTYPE || colType === JSONB) {
+        typedInput = (
+          <input
+            placeholder={getPlaceholder(colType)}
             type="text"
             className={'form-control ' + styles.insertBox}
             onClick={clicker}
@@ -156,7 +180,7 @@ class EditItem extends Component {
             data-test={`typed-input-${i}`}
           />
         );
-      } else if (colType === 'boolean') {
+      } else if (colType === BOOLEAN) {
         typedInput = (
           <select
             className="form-control"
@@ -173,6 +197,18 @@ class EditItem extends Component {
             <option value="false">False</option>
           </select>
         );
+      } else if (colType === UUID) {
+        typedInput = (
+          <input
+            placeholder={getPlaceholder(colType)}
+            type="text"
+            className={'form-control ' + styles.insertBox}
+            onClick={clicker}
+            ref={inputRef}
+            defaultValue={oldItem[colName]}
+            data-test={`typed-input-${i}`}
+          />
+        );
       } else {
         // everything else is text.
         // find value to be shown. rich text editor vs clone

console/src/components/Services/Data/TableInsertItem/InsertItem.js

@@ -5,6 +5,12 @@ import { insertItem, I_RESET } from './InsertActions';
 import { ordinalColSort } from '../utils';
 import { setTable } from '../DataActions';
 import Button from '../../Layout/Button/Button';
+import {
+  getPlaceholder,
+  BOOLEAN,
+  JSONB,
+  JSONDTYPE,
+} from '../../../../constants';
 
 class InsertItem extends Component {
   constructor() {
@@ -109,32 +115,6 @@ class InsertItem extends Component {
         type: 'text',
       };
 
-      const getPlaceholder = type => {
-        switch (type) {
-          case 'integer':
-            return 'integer';
-          case 'bigint':
-            return 'BIG integer';
-          case 'numeric':
-            return 'float';
-          case 'timestamp with time zone':
-            return new Date().toISOString();
-          case 'date':
-            return new Date().toISOString().slice(0, 10);
-          case 'timetz':
-            const time = new Date().toISOString().slice(11, 19);
-            return `${time}Z or ${time}+05:30`;
-          case 'uuid':
-            return 'UUID';
-          case 'json':
-            return '{"name": "foo"} or [12, "asdf"]';
-          case 'jsonb':
-            return '{"name": "foo"} or [12, "asdf"]';
-          default:
-            return 'text';
-        }
-      };
-
       const colType = col.data_type;
       let typedInput = (
         <input {...standardInputProps} placeholder={getPlaceholder(colType)} />
@@ -150,7 +130,7 @@ class InsertItem extends Component {
         );
       }
 
-      if (colType === 'json' || colType === 'jsonb') {
+      if (colType === JSONDTYPE || colType === JSONB) {
         // JSON/JSONB
         typedInput = (
           <input
@@ -163,7 +143,7 @@ class InsertItem extends Component {
         );
       }
 
-      if (colType === 'boolean') {
+      if (colType === BOOLEAN) {
         // Boolean
         typedInput = (
           <select

console/src/constants.js

@@ -5,7 +5,37 @@ export const SERIAL = 'serial';
 export const BIGINT = 'bigint';
 export const BIGSERIAL = 'bigserial';
 export const UUID = 'uuid';
-export const JSON = 'json';
+export const JSONDTYPE = 'json';
 export const JSONB = 'jsonb';
 export const TIMESTAMP = 'timestamp with time zone';
 export const TIME = 'time with time zone';
+export const NUMERIC = 'numeric';
+export const DATE = 'date';
+export const TIMETZ = 'timetz';
+export const BOOLEAN = 'boolean';
+
+export const getPlaceholder = type => {
+  switch (type) {
+    case 'integer':
+      return 'integer';
+    case 'bigint':
+      return 'BIG integer';
+    case 'numeric':
+      return 'float';
+    case 'timestamp with time zone':
+      return new Date().toISOString();
+    case 'date':
+      return new Date().toISOString().slice(0, 10);
+    case 'timetz':
+      const time = new Date().toISOString().slice(11, 19);
+      return `${time}Z or ${time}+05:30`;
+    case 'uuid':
+      return 'UUID';
+    case 'json':
+      return '{"name": "foo"} or [12, "bar"]';
+    case 'jsonb':
+      return '{"name": "foo"} or [12, "bar"]';
+    default:
+      return 'text';
+  }
+};