Set number of databases per page to display (#1168)

* Set number of databases per page to display

* Update nano helpers to avoid Node warnings during Nightwatch tests

.gitignore

@@ -39,3 +39,5 @@ test/bundle.js
 test/bundle.dev.js
 test/templates.js
 test/dashboard.assets
+# test coverage dir
+coverage

app/addons/components/actions.js

@@ -10,8 +10,9 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-import FauxtonAPI from "../../core/api";
-import ActionTypes from "./actiontypes";
+import { deleteRequest } from '../../core/ajax';
+import FauxtonAPI from '../../core/api';
+import ActionTypes from './actiontypes';
 
 function showDeleteDatabaseModal (options) {
  FauxtonAPI.dispatch({
@@ -20,14 +21,14 @@ function showDeleteDatabaseModal (options) {
  });
 }
 
-function deleteDatabase (dbId) {
+function deleteDatabase (dbId, onDeleteSuccess) {
  const url = FauxtonAPI.urls('databaseBaseURL', 'server', dbId, '');
 
- $.ajax({
- url: url,
- dataType: 'json',
- type: 'DELETE'
- }).then(function () {
+ deleteRequest(url).then(resp => {
+ if (!resp.ok) {
+  const msg = resp.reason || '';
+  throw new Error(msg);
+  }
  this.showDeleteDatabaseModal({ showModal: true });
 
  FauxtonAPI.addNotification({
@@ -37,10 +38,12 @@ function deleteDatabase (dbId) {
  });
 
  Backbone.history.loadUrl(FauxtonAPI.urls('allDBs', 'app'));
-
- }.bind(this)).fail(function (rsp, error, msg) {
+ if (onDeleteSuccess) {
+ onDeleteSuccess();
+ }
+ }).catch(err => {
  FauxtonAPI.addNotification({
- msg: 'Could not delete the database, reason ' + msg + '.',
+ msg: 'Could not delete the database. ' + err.message,
  type: 'error',
  clear: true
  });

app/addons/components/components/deletedatabasemodal.js

@@ -20,7 +20,8 @@ import Actions from "../actions";
 export class DeleteDatabaseModal extends React.Component {
  static propTypes = {
  showHide: PropTypes.func.isRequired,
- modalProps: PropTypes.object
+ modalProps: PropTypes.object,
+ onSuccess: PropTypes.func
  };
 
  state = {
@@ -64,12 +65,12 @@ export class DeleteDatabaseModal extends React.Component {
  onDeleteClick = (e) => {
  e.preventDefault();
 
- Actions.deleteDatabase(this.getDatabaseName());
+ Actions.deleteDatabase(this.getDatabaseName(), this.props.onSuccess);
  };
 
  onInputKeypress = (e) => {
  if (e.keyCode === 13 && this.state.disableSubmit !== true) {
- Actions.deleteDatabase(this.getDatabaseName());
+ Actions.deleteDatabase(this.getDatabaseName(), this.props.onSuccess);
  }
  };
 

app/addons/databases/__tests__/components.test.js

@@ -52,16 +52,45 @@ describe('DatabasePagination', () => {
  store.reset();
  });
 
+ afterEach(() => {
+ sinon.restore();
+ });
+
  it('uses custom URL prefix on the navigation if passed through props', () => {
+ const mockNavigate = sinon.stub(FauxtonAPI, 'navigate');
  const pagination = mount(<Views.DatabasePagination linkPath="_custom_path" />);
  const links = pagination.find('a');
 
  expect(links.length).toBe(3);
  links.forEach(link => {
- expect(link.props('href').href).toContain('_custom_path');
+ link.simulate('click', { preventDefault: () => {}});
+ sinon.assert.calledWithMatch(mockNavigate, '_custom_path');
+ mockNavigate.reset();
  });
  });
 
+ it('sets the correct page and perPage values', () => {
+ const mockNavigate = sinon.stub(FauxtonAPI, 'navigate');
+ store._fullDbList = ['db1', 'db2', 'db3', 'db4'];
+ store._page = 2;
+ store._limit = 2;
+ const pagination = mount(<Views.DatabasePagination />);
+ const links = pagination.find('a');
+ // "<<" link
+ links.at(0).simulate('click', { preventDefault: () => {}});
+ sinon.assert.calledWithMatch(mockNavigate, 'page=1&limit=2');
+ mockNavigate.reset();
+
+ // page "2" link
+ links.at(2).simulate('click', { preventDefault: () => {}});
+ sinon.assert.calledWithMatch(mockNavigate, 'page=2&limit=2');
+ mockNavigate.reset();
+
+ // ">>" link
+ links.at(3).simulate('click', { preventDefault: () => {}});
+ sinon.assert.calledWithMatch(mockNavigate, 'page=2&limit=2');
+ });
+
  it('renders the database count and range', () => {
  const controller = mount(<Views.DatabasePagination linkPath="_custom_path" />);
  const dbList = [];

app/addons/databases/__tests__/databasepagination.test.js

@@ -33,6 +33,7 @@ describe('Database Pagination', function () {
  const tempStore = {
  getTotalAmountOfDatabases: () => { return 10; },
  getPage: () => { return 1; },
+ getLimit: () => { return 20; },
  on: () => {},
  off: () => {}
  };

app/addons/databases/actions.js

@@ -9,13 +9,13 @@
 // WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 // License for the specific language governing permissions and limitations under
 // the License.
-import app from "../../app";
-import Helpers from "../../helpers";
-import FauxtonAPI from "../../core/api";
-import { get } from "../../core/ajax";
+import app from '../../app';
+import Helpers from '../../helpers';
+import FauxtonAPI from '../../core/api';
+import { get } from '../../core/ajax';
 import DatabasesBase from '../databases/base';
-import Stores from "./stores";
-import ActionTypes from "./actiontypes";
+import Stores from './stores';
+import ActionTypes from './actiontypes';
 import * as API from './api';
 
 function getDatabaseDetails (dbList, fullDbList) {
@@ -75,19 +75,18 @@ function updateDatabases (options) {
 }
 
 export default {
- getDatabaseList: getDatabaseList,
- paginate: paginate,
- getDatabaseDetails: getDatabaseDetails,
- fetch: fetch,
-
- init: function () {
- const params = app.getParams();
- const page = params.page ? parseInt(params.page, 10) : 1;
- const limit = FauxtonAPI.constants.MISC.DEFAULT_PAGE_SIZE;
+ getDatabaseList,
+ paginate,
+ getDatabaseDetails,
+ fetch,
+ updateDatabases,
 
+ init({page, limit}) {
  this.setStartLoading();
-
  this.setPage(page);
+ if (limit) {
+ this.setLimit(limit);
+ }
 
  getDatabaseList(limit, page)
  .then((fullDbList) => {
@@ -104,30 +103,37 @@ export default {
  });
  },
 
- updateDatabases,
-
- setPage: function (page) {
+ setPage(page) {
  FauxtonAPI.dispatch({
  type: ActionTypes.DATABASES_SETPAGE,
  options: {
- page: page
+ page
+ }
+ });
+ },
+
+ setLimit(limit) {
+ FauxtonAPI.dispatch({
+ type: ActionTypes.DATABASES_SETLIMIT,
+ options: {
+ limit
  }
  });
  },
 
- setStartLoading: function () {
+ setStartLoading() {
  FauxtonAPI.dispatch({
  type: ActionTypes.DATABASES_STARTLOADING
  });
  },
 
- setLoadComplete: function () {
+ setLoadComplete() {
  FauxtonAPI.dispatch({
  type: ActionTypes.DATABASES_LOADCOMPLETE
  });
  },
 
- createNewDatabase: function (databaseName, partitioned) {
+ createNewDatabase(databaseName, partitioned) {
  if (_.isNull(databaseName) || databaseName.trim().length === 0) {
  FauxtonAPI.addNotification({
  msg: 'Please enter a valid database name',
@@ -147,7 +153,7 @@ export default {
 
  const db = Stores.databasesStore.obtainNewDatabaseModel(databaseName, partitioned);
  FauxtonAPI.addNotification({ msg: 'Creating database.' });
- db.save().done(function () {
+ db.save().done(() => {
  FauxtonAPI.addNotification({
  msg: 'Database created successfully',
  type: 'success',
@@ -156,7 +162,7 @@ export default {
  const route = FauxtonAPI.urls('allDocs', 'app', app.utils.safeURLName(databaseName));
  app.router.navigate(route, { trigger: true });
  }
- ).fail(function (xhr) {
+ ).fail((xhr) => {
  const responseText = JSON.parse(xhr.responseText).reason;
  FauxtonAPI.addNotification({
  msg: 'Create database failed: ' + responseText,
@@ -167,7 +173,7 @@ export default {
  );
  },
 
- jumpToDatabase: function (databaseName) {
+ jumpToDatabase(databaseName) {
  if (_.isNull(databaseName) || databaseName.trim().length === 0) {
  return;
  }
@@ -179,10 +185,10 @@ export default {
  return setTimeout(() => { FauxtonAPI.navigate(url); });
  },
 
- fetchAllDbsWithKey: (id, callback) => {
+ fetchAllDbsWithKey(id, callback) {
  const query = '?' + app.utils.queryParams({
  startkey: JSON.stringify(id),
- endkey: JSON.stringify(id + "\u9999"),
+ endkey: JSON.stringify(id + '\u9999'),
  limit: 30
  });
 

app/addons/databases/actiontypes.js

@@ -11,6 +11,7 @@
 // the License.
 export default {
  DATABASES_SETPAGE: 'DATABASES_SETPAGE',
+ DATABASES_SETLIMIT: 'DATABASES_SETLIMIT',
  DATABASES_SET_PROMPT_VISIBLE: 'DATABASES_SET_PROMPT_VISIBLE',
  DATABASES_STARTLOADING: 'DATABASES_STARTLOADING',
  DATABASES_LOADCOMPLETE: 'DATABASES_LOADCOMPLETE',