console: persist page size in data browser (hasura#4323)

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ### console: persist columns state in data browser
 
-The order and collapsed state of columns is now persisted across page navigation
+The order, collapsed state of columns and page size is now persisted across page navigation
 
 (close #3390) (#3753)
 

console/.eslintrc

@@ -150,6 +150,7 @@
         "no-redeclare": "off",
         "no-useless-constructor": "off",
         "no-unused-expressions": "off",
+        "no-console": "off",
         "prefer-destructuring": "off"
       }
     }

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

@@ -133,9 +133,8 @@ const filterReducer = (state = defaultCurFilter, action) => {
           'order_by' in q
             ? [...q.order_by, ...defaultCurFilter.order_by]
             : [...defaultCurFilter.order_by];
-        newCurFilterQ.limit = 'limit' in q ? q.limit : defaultCurFilter.limit;
-        newCurFilterQ.offset =
-          'offset' in q ? q.offset : defaultCurFilter.offset;
+        newCurFilterQ.limit = q.limit || defaultCurFilter.limit;
+        newCurFilterQ.offset = q.offset || defaultCurFilter.offset;
         return newCurFilterQ;
       }
       return defaultCurFilter;

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

@@ -26,6 +26,7 @@ import { setDefaultQuery, runQuery, setOffset } from './FilterActions';
 import Button from '../../../Common/Button/Button';
 import ReloadEnumValuesButton from '../Common/Components/ReloadEnumValuesButton';
 import styles from '../../../Common/FilterQuery/FilterQuery.scss';
+import { getPersistedPageSize } from './localStorageUtils';
 
 const history = createHistory();
 
@@ -202,9 +203,10 @@ const renderSorts = (orderBy, tableSchema, dispatch) => {
 
 class FilterQuery extends Component {
   componentDidMount() {
-    const dispatch = this.props.dispatch;
+    const { dispatch, tableSchema, curQuery } = this.props;
+    const limit = getPersistedPageSize();
     if (!this.props.urlQuery) {
-      dispatch(setDefaultQuery(this.props.curQuery));
+      dispatch(setDefaultQuery({ ...curQuery, limit }));
       return;
     }
 
@@ -239,8 +241,8 @@ class FilterQuery extends Component {
       return { column, type, nulls };
     });
 
-    dispatch(setDefaultQuery({ where, order_by }));
-    dispatch(runQuery(this.props.tableSchema));
+    dispatch(setDefaultQuery({ where, order_by, limit }));
+    dispatch(runQuery(tableSchema));
   }
 
   setParams(query = { filters: [], sorts: [] }) {

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

@@ -56,7 +56,7 @@ const vCollapseRow = () => ({
   type: V_COLLAPSE_ROW,
 });
 
-const vSetDefaults = () => ({ type: V_SET_DEFAULTS });
+const vSetDefaults = limit => ({ type: V_SET_DEFAULTS, limit });
 
 const vMakeRowsRequest = () => {
   return (dispatch, getState) => {
@@ -513,7 +513,11 @@ const viewReducer = (tableName, currentSchema, schemas, viewState, action) => {
         ...defaultViewState,
         query: {
           columns: currentColumns,
-          limit: 10,
+          limit: action.limit || 10,
+        },
+        curFilter: {
+          ...defaultViewState.curFilter,
+          limit: action.limit || 10,
         },
         activePath: [tableName],
         rows: [],

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

@@ -49,10 +49,11 @@ import {
 } from '../../../Common/utils/pgUtils';
 import { updateSchemaInfo } from '../DataActions';
 import {
-  handleCollapseChange,
-  getCollapsedColumns,
-  handleOrderChange,
-  getColumnsOrder,
+  persistColumnCollapseChange,
+  getPersistedCollapsedColumns,
+  persistColumnOrderChange,
+  getPersistedColumnsOrder,
+  persistPageSizeChange,
 } from './localStorageUtils';
 
 const ViewRows = ({
@@ -675,7 +676,7 @@ const ViewRows = ({
         if ('order_by' in curFilter) {
           orderBy = [...curFilter.order_by];
         }
-        const limit = 'limit' in curFilter ? curFilter.limit : 10;
+
         const offset = 'offset' in curFilter ? curFilter.offset : 0;
 
         _filterQuery = (
@@ -684,7 +685,6 @@ const ViewRows = ({
             whereAnd={wheres}
             tableSchema={tableSchema}
             orderBy={orderBy}
-            limit={limit}
             dispatch={dispatch}
             count={count}
             tableName={curTableName}
@@ -821,8 +821,11 @@ const ViewRows = ({
       );
     }
 
-    const collapsedColumns = getCollapsedColumns(curTableName, currentSchema);
-    const columnsOrder = getColumnsOrder(curTableName, currentSchema);
+    const collapsedColumns = getPersistedCollapsedColumns(
+      curTableName,
+      currentSchema
+    );
+    const columnsOrder = getPersistedColumnsOrder(curTableName, currentSchema);
 
     let disableSortColumn = false;
 
@@ -923,6 +926,7 @@ const ViewRows = ({
         dispatch(setOffset(0));
         dispatch(runQuery(tableSchema));
         setSelectedRows([]);
+        persistPageSizeChange(size);
       }
     };
 
@@ -945,11 +949,15 @@ const ViewRows = ({
         onPageSizeChange={handlePageSizeChange}
         page={Math.floor(curFilter.offset / curFilter.limit)}
         onCollapseChange={collapsedData =>
-          handleCollapseChange(curTableName, currentSchema, collapsedData)
+          persistColumnCollapseChange(
+            curTableName,
+            currentSchema,
+            collapsedData
+          )
         }
         defaultCollapsed={collapsedColumns}
         onOrderChange={reorderData =>
-          handleOrderChange(curTableName, currentSchema, reorderData)
+          persistColumnOrderChange(curTableName, currentSchema, reorderData)
         }
         defaultReorders={columnsOrder}
       />

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

@@ -14,6 +14,7 @@ import ViewRows from './ViewRows';
 
 import { NotFoundError } from '../../../Error/PageNotFound';
 import { exists } from '../../../Common/utils/jsUtils';
+import { getPersistedPageSize } from './localStorageUtils';
 
 /*
 const genHeadings = headings => {
@@ -92,10 +93,11 @@ class ViewTable extends Component {
   }
 
   getInitialData(tableName) {
-    const { dispatch } = this.props;
+    const { dispatch, currentSchema } = this.props;
+    const limit = getPersistedPageSize(tableName, currentSchema);
     Promise.all([
       dispatch(setTable(tableName)),
-      dispatch(vSetDefaults(tableName)),
+      dispatch(vSetDefaults(limit)),
       dispatch(vMakeTableRequests()),
       dispatch(fetchManualTriggers(tableName)),
     ]);
@@ -123,7 +125,7 @@ class ViewTable extends Component {
   componentWillUnmount() {
     // Remove state data beloging to this table
     const dispatch = this.props.dispatch;
-    dispatch(vSetDefaults(this.props.tableName));
+    dispatch(vSetDefaults());
   }
 
   updateInvocationRow = row => {