Fix #170: show total number of records (#657)

* Fix #170: show total number of records * Code style fix * @glasserc review
Kinto · Oct 5, 2018 · 34be6e2 · 34be6e2
1 parent 3b10ed9
commit 34be6e2
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 3 deletions.
diff --git a/interfaces/external-modules/kinto-http.d.js b/interfaces/external-modules/kinto-http.d.js
@@ -77,6 +77,7 @@ declare module "kinto-http" {
     setPermissions(permissions: Permissions): Promise<ObjectResponseBody<Resource>>;
     removeAttachment(): Promise<ObjectResponseBody<Resource>>;
     listRecords(options: Object): Promise<ListResponseBody<Resource>>;
+    getTotalRecords(options?: Object): Promise<number>;
     addAttachment(attachment: string, record: Object, options?: Options): Promise<ObjectResponseBody<Resource>>;
     createRecord(record: Object, options?: Options): Promise<ObjectResponseBody<Resource>>;
     updateRecord(record: Object, options?: Options): Promise<ObjectResponseBody<Resource>>;

diff --git a/src/actions/collection.js b/src/actions/collection.js
@@ -17,6 +17,7 @@ import {
   COLLECTION_RECORDS_REQUEST,
   COLLECTION_RECORDS_NEXT_REQUEST,
   COLLECTION_RECORDS_SUCCESS,
+  COLLECTION_TOTAL_RECORDS,
   RECORD_CREATE_REQUEST,
   RECORD_UPDATE_REQUEST,
   RECORD_DELETE_REQUEST,
@@ -75,6 +76,18 @@ export function listRecordsSuccess(
   };
 }
 
+export function collectionTotalRecords(
+  totalRecords: number
+): {
+  type: "COLLECTION_TOTAL_RECORDS",
+  totalRecords: number,
+} {
+  return {
+    type: COLLECTION_TOTAL_RECORDS,
+    totalRecords,
+  };
+}
+
 export function listCollectionHistory(
   bid: string,
   cid: string,

diff --git a/src/components/collection/CollectionRecords.js b/src/components/collection/CollectionRecords.js
@@ -391,6 +391,7 @@ export default class CollectionRecords extends PureComponent<Props> {
       records,
       recordsLoaded,
       hasNextRecords,
+      totalRecords,
     } = collection;
     const { schema, displayFields } = data;
 
@@ -417,7 +418,8 @@ export default class CollectionRecords extends PureComponent<Props> {
           bid={bid}
           cid={cid}
           selected="records"
-          capabilities={capabilities}>
+          capabilities={capabilities}
+          totalRecords={totalRecords}>
           {listActions}
           <Table
             busy={busy}

diff --git a/src/components/collection/CollectionTabs.js b/src/components/collection/CollectionTabs.js
@@ -12,11 +12,19 @@ type Props = {
   selected: "records" | "attributes" | "permissions" | "history",
   capabilities: Capabilities,
   children?: React.Node,
+  totalRecords?: ?number,
 };
 
 export default class CollectionTabs extends PureComponent<Props> {
   render() {
-    const { bid, cid, selected, capabilities, children } = this.props;
+    const {
+      bid,
+      cid,
+      selected,
+      capabilities,
+      children,
+      totalRecords,
+    } = this.props;
 
     return (
       <div className="tabs-container">
@@ -26,7 +34,7 @@ export default class CollectionTabs extends PureComponent<Props> {
             className={selected === "records" ? "active" : ""}>
             <AdminLink name="collection:records" params={{ bid, cid }}>
               <i className="glyphicon glyphicon-align-justify" />
-              Records
+              Records {totalRecords ? `(${totalRecords})` : null}
             </AdminLink>
           </li>
           <li

diff --git a/src/constants.js b/src/constants.js
@@ -30,6 +30,7 @@ export const COLLECTION_RECORDS_REQUEST = "COLLECTION_RECORDS_REQUEST";
 export const COLLECTION_RECORDS_NEXT_REQUEST =
   "COLLECTION_RECORDS_NEXT_REQUEST";
 export const COLLECTION_RECORDS_SUCCESS = "COLLECTION_RECORDS_SUCCESS";
+export const COLLECTION_TOTAL_RECORDS = "COLLECTION_TOTAL_RECORDS";
 
 export const GROUP_BUSY = "GROUP_BUSY";
 export const GROUP_RESET = "GROUP_RESET";

diff --git a/src/reducers/collection.js b/src/reducers/collection.js
@@ -11,6 +11,7 @@ import {
   COLLECTION_HISTORY_REQUEST,
   COLLECTION_HISTORY_NEXT_REQUEST,
   COLLECTION_HISTORY_SUCCESS,
+  COLLECTION_TOTAL_RECORDS,
   ROUTE_LOAD_REQUEST,
   ROUTE_LOAD_SUCCESS,
   ROUTE_LOAD_FAILURE,
@@ -32,6 +33,7 @@ export const INITIAL_STATE: CollectionState = {
   recordsLoaded: false,
   hasNextRecords: false,
   listNextRecords: null,
+  totalRecords: undefined,
   history: paginator(undefined, { type: "@@INIT" }),
 };
 
@@ -91,6 +93,13 @@ export function collection(
         listNextRecords,
       };
     }
+    case COLLECTION_TOTAL_RECORDS: {
+      const { totalRecords } = action;
+      return {
+        ...state,
+        totalRecords,
+      };
+    }
     case COLLECTION_HISTORY_REQUEST:
     case COLLECTION_HISTORY_NEXT_REQUEST:
     case COLLECTION_HISTORY_SUCCESS: {

diff --git a/src/sagas/collection.js b/src/sagas/collection.js
@@ -54,7 +54,11 @@ export function* listRecords(
       sort: sort || currentSort || defaultSort,
       limit: maxPerPage,
     });
+    // Show list of records.
     yield put(actions.listRecordsSuccess(data, hasNextPage, next));
+    // Request number of total records.
+    const totalRecords = yield call([coll, coll.getTotalRecords]);
+    yield put(actions.collectionTotalRecords(totalRecords));
   } catch (error) {
     yield put(notifyError("Couldn't list records.", error));
   }

diff --git a/src/types.js b/src/types.js
@@ -99,6 +99,7 @@ export type CollectionState = {
   recordsLoaded: boolean,
   hasNextRecords: boolean,
   listNextRecords: ?Function,
+  totalRecords: ?number,
   history: Paginator<ResourceHistoryEntry>,
 };
 

diff --git a/test/components/CollectionRecords_test.js b/test/components/CollectionRecords_test.js
@@ -129,6 +129,37 @@ describe("CollectionRecords component", () => {
     });
   });
 
+  describe("Tabs", () => {
+    let node;
+
+    const collection = {
+      busy: false,
+      data: {},
+      permissions: {},
+      recordsLoaded: true,
+      records: [],
+      totalRecords: 18,
+    };
+
+    beforeEach(() => {
+      node = createComponent(CollectionRecords, {
+        match: { params: { bid: "bucket", cid: "collection" } },
+        session: {},
+        pluginHooks: {},
+        bucket,
+        collection,
+        capabilities,
+        listRecords: () => {},
+      });
+    });
+
+    it("should show the total number of records", () => {
+      expect(
+        node.querySelector(".tabs-container li.active").textContent
+      ).to.eql("Records (18)");
+    });
+  });
+
   describe("List actions", () => {
     const collection = {
       busy: false,