use user friendly terms for filter operators in browse rows page (#3699)

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

@@ -43,6 +43,15 @@ const setOffset = offset => ({ type: SET_OFFSET, offset });
 const setNextPage = () => ({ type: SET_NEXTPAGE });
 const setPrevPage = () => ({ type: SET_PREVPAGE });
 
+const parseArray = val => {
+  if (Array.isArray(val)) return val;
+  try {
+    return JSON.parse(val);
+  } catch (err) {
+    return '';
+  }
+};
+
 const runQuery = tableSchema => {
   return (dispatch, getState) => {
     const state = getState().tables.view.curFilter;
@@ -61,6 +70,12 @@ const runQuery = tableSchema => {
       const colName = Object.keys(w)[0];
       const opName = Object.keys(w[colName])[0];
       const val = w[colName][opName];
+
+      if (['$in', '$nin'].includes(opName)) {
+        w[colName][opName] = parseArray(val);
+        return w;
+      }
+
       const colType = tableSchema.columns.find(c => c.column_name === colName)
         .data_type;
       if (Integers.indexOf(colType) > 0) {

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

@@ -64,12 +64,22 @@ const renderOps = (opName, onChange, key) => (
     ) : null}
     {Operators.map((o, i) => (
       <option key={i} value={o.value}>
-        {o.value}
+        {`[${o.graphqlOp}] ${o.name}`}
       </option>
     ))}
   </select>
 );
 
+const getDefaultValue = (possibleValue, opName) => {
+  if (possibleValue) {
+    if (Array.isArray(possibleValue)) return JSON.stringify(possibleValue);
+    return possibleValue;
+  }
+
+  const operator = Operators.find(op => op.value === opName);
+  return operator && operator.defaultValue ? operator.defaultValue : '';
+};
+
 const renderWheres = (whereAnd, tableSchema, dispatch) => {
   const styles = require('../../../Common/FilterQuery/FilterQuery.scss');
   return whereAnd.map((clause, i) => {
@@ -93,6 +103,7 @@ const renderWheres = (whereAnd, tableSchema, dispatch) => {
         />
       );
     }
+
     return (
       <div key={i} className={`${styles.inputRow} row`}>
         <div className="col-xs-4">
@@ -103,7 +114,7 @@ const renderWheres = (whereAnd, tableSchema, dispatch) => {
           <input
             className="form-control"
             placeholder="-- value --"
-            value={clause[colName][opName]}
+            value={getDefaultValue(clause[colName][opName], opName)}
             onChange={e => {
               dispatch(setFilterVal(e.target.value, i));
               if (i + 1 === whereAnd.length) {
@@ -187,7 +198,7 @@ class FilterQuery extends Component {
             dispatch(runQuery(tableSchema));
           }}
         >
-          <div className="">
+          <div>
             <div
               className={`${styles.queryBox} col-xs-6 ${
                 styles.padd_left_remove

console/src/components/Services/Data/constants.js

@@ -1,18 +1,33 @@
 export const Operators = [
-  { name: 'equals', value: '$eq' },
-  { name: 'not equals', value: '$ne' },
-  { name: 'in', value: '$in' },
-  { name: 'not in', value: '$nin' },
-  { name: '>', value: '$gt' },
-  { name: '<', value: '$lt' },
-  { name: '>=', value: '$gte' },
-  { name: '<=', value: '$lte' },
-  { name: 'like', value: '$like' },
-  { name: 'not like', value: '$nlike' },
-  { name: 'ilike', value: '$ilike' },
-  { name: 'not ilike', value: '$nilike' },
-  { name: 'similar', value: '$similar' },
-  { name: 'not similar', value: '$nsimilar' },
+  { name: 'equals', value: '$eq', graphqlOp: '_eq' },
+  { name: 'not equals', value: '$ne', graphqlOp: '_neq' },
+  { name: 'in', value: '$in', graphqlOp: '_in', defaultValue: '[]' },
+  { name: 'not in', value: '$nin', graphqlOp: '_nin', defaultValue: '[]' },
+  { name: '>', value: '$gt', graphqlOp: '_gt' },
+  { name: '<', value: '$lt', graphqlOp: '_lt' },
+  { name: '>=', value: '$gte', graphqlOp: '_gte' },
+  { name: '<=', value: '$lte', graphqlOp: '_lte' },
+  { name: 'like', value: '$like', graphqlOp: '_like', defaultValue: '%%' },
+  {
+    name: 'not like',
+    value: '$nlike',
+    graphqlOp: '_nlike',
+    defaultValue: '%%',
+  },
+  {
+    name: 'like (case-insensitive)',
+    value: '$ilike',
+    graphqlOp: '_ilike',
+    defaultValue: '%%',
+  },
+  {
+    name: 'not like (case-insensitive)',
+    value: '$nilike',
+    graphqlOp: '_nilike',
+    defaultValue: '%%',
+  },
+  { name: 'similar', value: '$similar', graphqlOp: '_similar' },
+  { name: 'not similar', value: '$nsimilar', graphqlOp: '_nsimilar' },
 ];
 
 export const Integers = [