accept query params for filter/sort in browse table page (close hasur…

…a#833) (hasura#3041)

console/package.json

@@ -96,7 +96,7 @@
     "react-tabs": "^2.1.0",
     "react-toggle": "^4.0.2",
     "redux": "^4.0.0",
-    "redux-logger": "^3.0.6",
+    "redux-logger": "3.0.1",
     "redux-thunk": "^2.2.0",
     "sanitize-filename": "^1.6.1",
     "semver": "5.5.1",

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

@@ -5,6 +5,7 @@
   derive everything through viewtable as much as possible.
 */
 import PropTypes from 'prop-types';
+import { createHistory } from 'history';
 
 import React, { Component } from 'react';
 import { Operators } from '../constants';
@@ -25,6 +26,8 @@ import { setDefaultQuery, runQuery, setOffset } from './FilterActions';
 import Button from '../../../Common/Button/Button';
 import ReloadEnumValuesButton from '../Common/ReusableComponents/ReloadEnumValuesButton';
 
+const history = createHistory();
+
 const renderCols = (colName, tableSchema, onChange, usage, key) => {
   const columns = tableSchema.columns.map(c => c.column_name);
   return (
@@ -182,7 +185,67 @@ const renderSorts = (orderBy, tableSchema, dispatch) => {
 class FilterQuery extends Component {
   componentDidMount() {
     const dispatch = this.props.dispatch;
-    dispatch(setDefaultQuery(this.props.curQuery));
+    let urlFilters = [];
+    if (typeof this.props.urlQuery.filter === 'string') {
+      urlFilters = [this.props.urlQuery.filter];
+    } else if (Array.isArray(this.props.urlQuery.filter)) {
+      urlFilters = this.props.urlQuery.filter;
+    }
+    const where = {
+      $and: urlFilters.map(filter => {
+        const parts = filter.split(';');
+        const col = parts[0];
+        const op = parts[1];
+        const value = parts[2];
+        return { [col]: { [op]: value } };
+      }),
+    };
+
+    let urlSorts = [];
+    if (typeof this.props.urlQuery.sort === 'string') {
+      urlSorts = [this.props.urlQuery.sort];
+    } else if (Array.isArray(this.props.urlQuery.sort)) {
+      urlSorts = this.props.urlQuery.sort;
+    }
+
+    const order_by = urlSorts.map(sort => {
+      const parts = sort.split(';');
+      const column = parts[0];
+      const type = parts[1];
+      const nulls = 'last';
+      return { column, type, nulls };
+    });
+
+    dispatch(setDefaultQuery({ where, order_by }));
+    dispatch(runQuery(this.props.tableSchema));
+  }
+
+  setParams(query = { filters: [], sorts: [] }) {
+    const searchParams = new URLSearchParams();
+    query.filters.forEach(filter => searchParams.append('filter', filter));
+    query.sorts.forEach(sort => searchParams.append('sort', sort));
+    return searchParams.toString();
+  }
+
+  setUrlParams(whereAnd, orderBy) {
+    const sorts = orderBy
+      .filter(order => order.column)
+      .map(order => `${order.column};${order.type}`);
+    const filters = whereAnd
+      .filter(
+        where => Object.keys(where).length === 1 && Object.keys(where)[0] !== ''
+      )
+      .map(where => {
+        const col = Object.keys(where)[0];
+        const op = Object.keys(where[col])[0];
+        const value = where[col][op];
+        return `${col};${op};${value}`;
+      });
+    const url = this.setParams({ filters, sorts });
+    history.push({
+      pathname: history.getCurrentLocation().pathname,
+      search: `?${url}`,
+    });
   }
 
   render() {
@@ -195,22 +258,19 @@ class FilterQuery extends Component {
           onSubmit={e => {
             e.preventDefault();
             dispatch(setOffset(0));
+            this.setUrlParams(whereAnd, orderBy);
             dispatch(runQuery(tableSchema));
           }}
         >
           <div>
             <div
-              className={`${styles.queryBox} col-xs-6 ${
-                styles.padd_left_remove
-              }`}
+              className={`${styles.queryBox} col-xs-6 ${styles.padd_left_remove}`}
             >
               <span className={styles.subheading_text}>Filter</span>
               {renderWheres(whereAnd, tableSchema, dispatch)}
             </div>
             <div
-              className={`${styles.queryBox} col-xs-6 ${
-                styles.padd_left_remove
-              }`}
+              className={`${styles.queryBox} col-xs-6 ${styles.padd_left_remove}`}
             >
               <b className={styles.subheading_text}>Sort</b>
               {renderSorts(orderBy, tableSchema, dispatch)}

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

@@ -70,6 +70,7 @@ const ViewRows = ({
   updateInvocationFunction,
   triggeredRow,
   triggeredFunction,
+  location,
   readOnlyMode,
 }) => {
   const styles = require('../../../Common/TableCommon/Table.scss');
@@ -637,6 +638,7 @@ const ViewRows = ({
             count={count}
             tableName={curTableName}
             offset={offset}
+            urlQuery={location.query}
           />
         );
       }

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

@@ -159,6 +159,7 @@ class ViewTable extends Component {
       manualTriggers = [],
       triggeredRow,
       triggeredFunction,
+      location,
     } = this.props;
 
     // check if table exists
@@ -202,6 +203,7 @@ class ViewTable extends Component {
         updateInvocationFunction={this.updateInvocationFunction.bind(this)}
         triggeredRow={triggeredRow}
         triggeredFunction={triggeredFunction}
+        location={location}
         readOnlyMode={readOnlyMode}
       />
     );