Restructured changeset module

scm-ui/src/changesets/containers/Changesets.js

@@ -1,20 +1,26 @@
+// @flow
 import React from "react";
 import { connect } from "react-redux";
-import { ErrorNotification, Loading } from "@scm-manager/ui-components";
+import {
+  ErrorNotification,
+  Loading,
+  Paginator
+} from "@scm-manager/ui-components";
 
 import {
-  fetchChangesetsByNamespaceAndName,
+  fetchChangesets,
   fetchChangesetsByNamespaceNameAndBranch,
   getChangesets,
   getFetchChangesetsFailure,
-  isFetchChangesetsPending
+  isFetchChangesetsPending,
+  selectListAsCollection
 } from "../modules/changesets";
 import type { History } from "history";
 import {
   fetchBranchesByNamespaceAndName,
   getBranchNames
 } from "../../repos/modules/branches";
-import type { Repository } from "@scm-manager/ui-types";
+import type { PagedCollection, Repository } from "@scm-manager/ui-types";
 import ChangesetTable from "../components/ChangesetTable";
 import DropDown from "../components/DropDown";
 import { withRouter } from "react-router-dom";
@@ -27,7 +33,8 @@ type Props = {
     namespace: string,
     name: string,
     branch: string
-  ) => void
+  ) => void,
+  list: PagedCollection
 };
 
 class Changesets extends React.Component<State, Props> {
@@ -60,12 +67,13 @@ class Changesets extends React.Component<State, Props> {
     return (
       <div>
         <ErrorNotification error={error} />
-        {this.renderContent()}
+        {this.renderTable()}
+        {this.renderPaginator()}
       </div>
     );
   }
 
-  renderContent = () => {
+  renderTable = () => {
     const branch = this.props.match.params.branch;
     const { changesets, branchNames } = this.props;
 
@@ -78,7 +86,6 @@ class Changesets extends React.Component<State, Props> {
             preselectedOption={branch}
             optionSelected={branch => this.branchChanged(branch)}
           />
-          <hr />
           <ChangesetTable changesets={changesets} />
         </div>
       );
@@ -87,7 +94,15 @@ class Changesets extends React.Component<State, Props> {
     return <ChangesetTable changesets={changesets} />;
   };
 
-  branchChanged = (branchName: string) => {
+  renderPaginator() {
+    const { list } = this.props;
+    if (list) {
+      return <Paginator collection={list} onPageChange={this.onPageChange} />;
+    }
+    return null;
+  }
+
+  branchChanged = (branchName: string): void => {
     const { history, repository } = this.props;
     history.push(
       `/repo/${repository.namespace}/${repository.name}/history/${branchName}`
@@ -97,28 +112,35 @@ class Changesets extends React.Component<State, Props> {
 
 const mapStateToProps = (state, ownProps: Props) => {
   const { namespace, name } = ownProps.repository;
+  const loading = isFetchChangesetsPending(namespace, name, state);
+  const changesets = getChangesets(
+    state,
+    namespace,
+    name,
+    ownProps.match.params.branch
+  );
+  const branchNames = getBranchNames(namespace, name, state);
+  const error = getFetchChangesetsFailure(
+    state,
+    namespace,
+    name,
+    ownProps.match.params.branch
+  );
+  const list = selectListAsCollection(state);
+
   return {
-    loading: isFetchChangesetsPending(namespace, name, state),
+    loading,
-    changesets: getChangesets(
+    changesets,
-      state,
+    branchNames,
-      namespace,
+    error,
-      name,
+    list
-      ownProps.match.params.branch
-    ),
-    branchNames: getBranchNames(namespace, name, state),
-    error: getFetchChangesetsFailure(
-      state,
-      namespace,
-      name,
-      ownProps.match.params.branch
-    )
   };
 };
 
 const mapDispatchToProps = dispatch => {
   return {
     fetchChangesetsByNamespaceAndName: (namespace: string, name: string) => {
-      dispatch(fetchChangesetsByNamespaceAndName(namespace, name));
+      dispatch(fetchChangesets(namespace, name));
     },
     fetchChangesetsByNamespaceNameAndBranch: (
       namespace: string,

scm-ui/src/changesets/modules/changesets.js

@@ -1,9 +1,15 @@
 // @flow
 
-import {FAILURE_SUFFIX, PENDING_SUFFIX, SUCCESS_SUFFIX} from "../../modules/types";
+import {
-import {apiClient} from "@scm-manager/ui-components";
+  FAILURE_SUFFIX,
-import {isPending} from "../../modules/pending";
+  PENDING_SUFFIX,
-import {getFailure} from "../../modules/failure";
+  SUCCESS_SUFFIX
+} from "../../modules/types";
+import { apiClient } from "@scm-manager/ui-components";
+import { isPending } from "../../modules/pending";
+import { getFailure } from "../../modules/failure";
+import { combineReducers } from "redux";
+import type { Action, PagedCollection } from "@scm-manager/ui-types";
 
 export const FETCH_CHANGESETS = "scm/repos/FETCH_CHANGESETS";
 export const FETCH_CHANGESETS_PENDING = `${FETCH_CHANGESETS}_${PENDING_SUFFIX}`;
@@ -11,51 +17,98 @@ export const FETCH_CHANGESETS_SUCCESS = `${FETCH_CHANGESETS}_${SUCCESS_SUFFIX}`;
 export const FETCH_CHANGESETS_FAILURE = `${FETCH_CHANGESETS}_${FAILURE_SUFFIX}`;
 
 const REPO_URL = "repositories";
-
+//TODO: Content type
-
 // actions
-export function fetchChangesetsByNamespaceAndName(namespace: string, name: string) {
-  return function (dispatch: any) {
-    dispatch(fetchChangesetsPending(namespace, name));
-    return apiClient.get(REPO_URL + "/" + namespace + "/" + name + "/changesets").then(response => response.json())
-      .then(data => {
-        dispatch(fetchChangesetsSuccess(data, namespace, name))
-      }).catch(cause => {
-        dispatch(fetchChangesetsFailure(namespace, name, cause))
-      })
-  }
-}
 
-export function fetchChangesetsByNamespaceNameAndBranch(namespace: string, name: string, branch: string) {
+export function fetchChangesetsWithOptions(
-  return function (dispatch: any) {
+  namespace: string,
+  name: string,
+  branch?: string,
+  suffix?: string
+) {
+  let link = REPO_URL + `/${namespace}/${name}`;
+  if (branch && branch !== "") {
+    link = link + `/branches/${branch}`;
+  }
+  link = link + "/changesets";
+  if (suffix) {
+    link = link + `${suffix}`;
+  }
+  return function(dispatch: any) {
     dispatch(fetchChangesetsPending(namespace, name, branch));
-    return apiClient.get(REPO_URL + "/" + namespace + "/" + name + "/branches/" + branch + "/changesets").then(response => response.json())
+    return apiClient
+      .get(link)
+      .then(response => response.json())
       .then(data => {
-        dispatch(fetchChangesetsSuccess(data, namespace, name, branch))
+        dispatch(fetchChangesetsSuccess(data, namespace, name, branch));
-      }).catch(cause => {
-        dispatch(fetchChangesetsFailure(namespace, name, branch, cause))
       })
-  }
+      .catch(cause => {
+        dispatch(fetchChangesetsFailure(namespace, name, cause, branch));
+      });
+  };
 }
 
-export function fetchChangesetsPending(namespace: string, name: string, branch?: string): Action {
+export function fetchChangesets(namespace: string, name: string) {
+  return fetchChangesetsWithOptions(namespace, name);
+}
+
+export function fetchChangesetsByPage(
+  namespace: string,
+  name: string,
+  page: number
+) {
+  return fetchChangesetsWithOptions(namespace, name, "", `?page=${page}`);
+}
+
+export function fetchChangesetsByBranchAndPage(
+  namespace: string,
+  name: string,
+  branch: string,
+  page: number
+) {
+  return fetchChangesetsWithOptions(namespace, name, branch, `?page=${page}`);
+}
+
+export function fetchChangesetsByNamespaceNameAndBranch(
+  namespace: string,
+  name: string,
+  branch: string
+) {
+  return fetchChangesetsWithOptions(namespace, name, branch);
+}
+
+export function fetchChangesetsPending(
+  namespace: string,
+  name: string,
+  branch?: string
+): Action {
   const itemId = createItemId(namespace, name, branch);
   return {
     type: FETCH_CHANGESETS_PENDING,
     payload: itemId,
     itemId
-  }
+  };
 }
 
-export function fetchChangesetsSuccess(changesets: any, namespace: string, name: string, branch?: string): Action {
+export function fetchChangesetsSuccess(
+  changesets: any,
+  namespace: string,
+  name: string,
+  branch?: string
+): Action {
   return {
     type: FETCH_CHANGESETS_SUCCESS,
     payload: changesets,
     itemId: createItemId(namespace, name, branch)
-  }
+  };
 }
 
-function fetchChangesetsFailure(namespace: string, name: string, branch?: string, error: Error): Action {
+function fetchChangesetsFailure(
+  namespace: string,
+  name: string,
+  error: Error,
+  branch?: string
+): Action {
   return {
     type: FETCH_CHANGESETS_FAILURE,
     payload: {
@@ -65,10 +118,14 @@ function fetchChangesetsFailure(namespace: string, name: string, branch?: string
       error
     },
     itemId: createItemId(namespace, name, branch)
-  }
+  };
 }
 
-function createItemId(namespace: string, name: string, branch?: string): string {
+function createItemId(
+  namespace: string,
+  name: string,
+  branch?: string
+): string {
   let itemId = namespace + "/" + name;
   if (branch && branch !== "") {
     itemId = itemId + "/" + branch;
@@ -77,20 +134,54 @@ function createItemId(namespace: string, name: string, branch?: string): string
 }
 
 // reducer
-export default function reducer(state: any = {}, action: Action = {type: "UNKNOWN"}): Object {
+function byKeyReducer(
+  state: any = {},
+  action: Action = { type: "UNKNOWN" }
+): Object {
   switch (action.type) {
     case FETCH_CHANGESETS_SUCCESS:
-      const key = action.itemId
+      const key = action.itemId;
-      let oldChangesets = {[key]: {}};
+      let oldChangesets = { [key]: {} };
       if (state[key] !== undefined) {
-        oldChangesets[key] = state[key]
+        oldChangesets[key] = state[key];
       }
-      return {...state, [key]: {byId: extractChangesetsByIds(action.payload, oldChangesets[key].byId)}};
+      return {
+        ...state,
+        [key]: {
+          byId: extractChangesetsByIds(action.payload, oldChangesets[key].byId)
+        }
+      };
     default:
       return state;
   }
 }
 
+function listReducer(
+  state: any = {},
+  action: Action = { type: "UNKNOWN" }
+): Object {
+  switch (action.type) {
+    case FETCH_CHANGESETS_SUCCESS:
+      const changesets = action.payload._embedded.changesets;
+      const changesetIds = changesets.map(c => c.id);
+      return {
+        entries: changesetIds,
+        entry: {
+          page: action.payload.page,
+          pageTotal: action.payload.pageTotal,
+          _links: action.payload._links
+        }
+      };
+    default:
+      return state;
+  }
+}
+
+export default combineReducers({
+  list: listReducer,
+  byKey: byKeyReducer
+});
+
 function extractChangesetsByIds(data: any, oldChangesetsByIds: any) {
   const changesets = data._embedded.changesets;
   const changesetsByIds = {};
@@ -107,19 +198,60 @@ function extractChangesetsByIds(data: any, oldChangesetsByIds: any) {
 }
 
 //selectors
-export function getChangesets(state: Object, namespace: string, name: string, branch?: string) {
+export function getChangesets(
+  state: Object,
+  namespace: string,
+  name: string,
+  branch?: string
+) {
   const key = createItemId(namespace, name, branch);
-  if (!state.changesets[key]) {
+  if (!state.changesets.byKey[key]) {
     return null;
   }
-  return Object.values(state.changesets[key].byId);
+  return Object.values(state.changesets.byKey[key].byId);
 }
 
-export function isFetchChangesetsPending(state: Object, namespace: string, name: string, branch?: string) {
+export function isFetchChangesetsPending(
-  return isPending(state, FETCH_CHANGESETS, createItemId(namespace, name, branch))
+  state: Object,
+  namespace: string,
+  name: string,
+  branch?: string
+) {
+  return isPending(
+    state,
+    FETCH_CHANGESETS,
+    createItemId(namespace, name, branch)
+  );
 }
 
-export function getFetchChangesetsFailure(state: Object, namespace: string, name: string, branch?: string) {
+export function getFetchChangesetsFailure(
-  return getFailure(state, FETCH_CHANGESETS, createItemId(namespace, name, branch));
+  state: Object,
+  namespace: string,
+  name: string,
+  branch?: string
+) {
+  return getFailure(
+    state,
+    FETCH_CHANGESETS,
+    createItemId(namespace, name, branch)
+  );
 }
 
+const selectList = (state: Object) => {
+  if (state.changesets && state.changesets.list) {
+    return state.changesets.list;
+  }
+  return {};
+};
+
+const selectListEntry = (state: Object): Object => {
+  const list = selectList(state);
+  if (list.entry) {
+    return list.entry;
+  }
+  return {};
+};
+
+export const selectListAsCollection = (state: Object): PagedCollection => {
+  return selectListEntry(state);
+};

scm-ui/src/changesets/modules/changesets.test.js

@@ -8,8 +8,10 @@ import {
   FETCH_CHANGESETS_FAILURE,
   FETCH_CHANGESETS_PENDING,
   FETCH_CHANGESETS_SUCCESS,
-  fetchChangesetsByNamespaceAndName,
+  fetchChangesets,
+  fetchChangesetsByBranchAndPage,
   fetchChangesetsByNamespaceNameAndBranch,
+  fetchChangesetsByPage,
   fetchChangesetsSuccess,
   getChangesets,
   getFetchChangesetsFailure,
@@ -22,7 +24,8 @@ const changesets = {};
 describe("changesets", () => {
   describe("fetching of changesets", () => {
     const DEFAULT_BRANCH_URL = "/api/rest/v2/repositories/foo/bar/changesets";
-    const SPECIFIC_BRANCH_URL = "/api/rest/v2/repositories/foo/bar/branches/specific/changesets";
+    const SPECIFIC_BRANCH_URL =
+      "/api/rest/v2/repositories/foo/bar/branches/specific/changesets";
     const mockStore = configureMockStore([thunk]);
 
     afterEach(() => {
@@ -35,7 +38,8 @@ describe("changesets", () => {
 
       const expectedActions = [
         {
-          type: FETCH_CHANGESETS_PENDING, payload: "foo/bar",
+          type: FETCH_CHANGESETS_PENDING,
+          payload: "foo/bar",
           itemId: "foo/bar"
         },
         {
@@ -46,7 +50,7 @@ describe("changesets", () => {
       ];
 
       const store = mockStore({});
-      return store.dispatch(fetchChangesetsByNamespaceAndName("foo", "bar")).then(() => {
+      return store.dispatch(fetchChangesets("foo", "bar")).then(() => {
         expect(store.getActions()).toEqual(expectedActions);
       });
     });
@@ -57,7 +61,8 @@ describe("changesets", () => {
 
       const expectedActions = [
         {
-          type: FETCH_CHANGESETS_PENDING, payload: itemId,
+          type: FETCH_CHANGESETS_PENDING,
+          payload: itemId,
           itemId
         },
         {
@@ -68,9 +73,13 @@ describe("changesets", () => {
       ];
 
       const store = mockStore({});
-      return store.dispatch(fetchChangesetsByNamespaceNameAndBranch("foo", "bar", "specific")).then(() => {
+      return store
-        expect(store.getActions()).toEqual(expectedActions);
+        .dispatch(
-      });
+          fetchChangesetsByNamespaceNameAndBranch("foo", "bar", "specific")
+        )
+        .then(() => {
+          expect(store.getActions()).toEqual(expectedActions);
+        });
     });
 
     it("should fail fetching changesets on error", () => {
@@ -79,18 +88,19 @@ describe("changesets", () => {
 
       const expectedActions = [
         {
-          type: FETCH_CHANGESETS_PENDING, payload: itemId,
+          type: FETCH_CHANGESETS_PENDING,
+          payload: itemId,
           itemId
         }
       ];
 
       const store = mockStore({});
-      return store.dispatch(fetchChangesetsByNamespaceAndName("foo", "bar")).then(() => {
+      return store.dispatch(fetchChangesets("foo", "bar")).then(() => {
         expect(store.getActions()[0]).toEqual(expectedActions[0]);
         expect(store.getActions()[1].type).toEqual(FETCH_CHANGESETS_FAILURE);
         expect(store.getActions()[1].payload).toBeDefined();
       });
-    })
+    });
 
     it("should fail fetching changesets for specific branch on error", () => {
       const itemId = "foo/bar/specific";
@@ -98,27 +108,81 @@ describe("changesets", () => {
 
       const expectedActions = [
         {
-          type: FETCH_CHANGESETS_PENDING, payload: itemId,
+          type: FETCH_CHANGESETS_PENDING,
+          payload: itemId,
           itemId
         }
       ];
 
       const store = mockStore({});
-      return store.dispatch(fetchChangesetsByNamespaceNameAndBranch("foo", "bar", "specific")).then(() => {
+      return store
-        expect(store.getActions()[0]).toEqual(expectedActions[0]);
+        .dispatch(
-        expect(store.getActions()[1].type).toEqual(FETCH_CHANGESETS_FAILURE);
+          fetchChangesetsByNamespaceNameAndBranch("foo", "bar", "specific")
-        expect(store.getActions()[1].payload).toBeDefined();
+        )
+        .then(() => {
+          expect(store.getActions()[0]).toEqual(expectedActions[0]);
+          expect(store.getActions()[1].type).toEqual(FETCH_CHANGESETS_FAILURE);
+          expect(store.getActions()[1].payload).toBeDefined();
+        });
+    });
+
+    it("should fetch changesets by page", () => {
+      fetchMock.getOnce(DEFAULT_BRANCH_URL + "?page=5", "{}");
+
+      const expectedActions = [
+        {
+          type: FETCH_CHANGESETS_PENDING,
+          payload: "foo/bar",
+          itemId: "foo/bar"
+        },
+        {
+          type: FETCH_CHANGESETS_SUCCESS,
+          payload: changesets,
+          itemId: "foo/bar"
+        }
+      ];
+
+      const store = mockStore({});
+      return store.dispatch(fetchChangesetsByPage("foo", "bar", 5)).then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
       });
-    })
+    });
+
+    it("should fetch changesets by branch and page", () => {
+      fetchMock.getOnce(SPECIFIC_BRANCH_URL + "?page=5", "{}");
+
+      const expectedActions = [
+        {
+          type: FETCH_CHANGESETS_PENDING,
+          payload: "foo/bar/specific",
+          itemId: "foo/bar/specific"
+        },
+        {
+          type: FETCH_CHANGESETS_SUCCESS,
+          payload: changesets,
+          itemId: "foo/bar/specific"
+        }
+      ];
+
+      const store = mockStore({});
+      return store
+        .dispatch(fetchChangesetsByBranchAndPage("foo", "bar", "specific", 5))
+        .then(() => {
+          expect(store.getActions()).toEqual(expectedActions);
+        });
+    });
   });
 
   describe("changesets reducer", () => {
     const responseBody = {
+      page: 1,
+      pageTotal: 10,
+      _links: {},
       _embedded: {
         changesets: [
-          {id: "changeset1", author: {mail: "z@phod.com", name: "zaphod"}},
+          { id: "changeset1", author: { mail: "z@phod.com", name: "zaphod" } },
-          {id: "changeset2", description: "foo"},
+          { id: "changeset2", description: "foo" },
-          {id: "changeset3", description: "bar"},
+          { id: "changeset3", description: "bar" }
         ],
         _embedded: {
           tags: [],
@@ -129,18 +193,35 @@ describe("changesets", () => {
     };
 
     it("should set state to received changesets", () => {
-      const newState = reducer({}, fetchChangesetsSuccess(responseBody, "foo", "bar"));
+      const newState = reducer(
+        {},
+        fetchChangesetsSuccess(responseBody, "foo", "bar")
+      );
       expect(newState).toBeDefined();
-      expect(newState["foo/bar"].byId["changeset1"].author.mail).toEqual("z@phod.com");
+      expect(newState.byKey["foo/bar"].byId["changeset1"].author.mail).toEqual(
-      expect(newState["foo/bar"].byId["changeset2"].description).toEqual("foo");
+        "z@phod.com"
-      expect(newState["foo/bar"].byId["changeset3"].description).toEqual("bar");
+      );
+      expect(newState.byKey["foo/bar"].byId["changeset2"].description).toEqual(
+        "foo"
+      );
+      expect(newState.byKey["foo/bar"].byId["changeset3"].description).toEqual(
+        "bar"
+      );
+      expect(newState.list).toEqual({
+        entry: {
+          page: 1,
+          pageTotal: 10,
+          _links: {}
+        },
+        entries: ["changeset1", "changeset2", "changeset3"]
+      });
     });
 
     it("should not delete existing changesets from state", () => {
       const responseBody = {
         _embedded: {
           changesets: [
-            {id: "changeset1", author: {mail: "z@phod.com", name: "zaphod"}},
+            { id: "changeset1", author: { mail: "z@phod.com", name: "zaphod" } }
           ],
           _embedded: {
             tags: [],
@@ -149,19 +230,24 @@ describe("changesets", () => {
           }
         }
       };
-      const newState = reducer({
+      const newState = reducer(
-        "foo/bar": {
+        {
-          byId: {
+          byKey: {
-            ["changeset2"]: {
+            "foo/bar": {
-              id: "changeset2",
+              byId: {
-              author: {mail: "mail@author.com", name: "author"}
+                ["changeset2"]: {
+                  id: "changeset2",
+                  author: { mail: "mail@author.com", name: "author" }
+                }
+              }
             }
           }
-        }
+        },
-      }, fetchChangesetsSuccess(responseBody, "foo", "bar"));
+        fetchChangesetsSuccess(responseBody, "foo", "bar")
-      expect(newState["foo/bar"].byId["changeset2"]).toBeDefined();
+      );
-      expect(newState["foo/bar"].byId["changeset1"]).toBeDefined();
+      expect(newState.byKey["foo/bar"].byId["changeset2"]).toBeDefined();
-    })
+      expect(newState.byKey["foo/bar"].byId["changeset1"]).toBeDefined();
+    });
   });
 
   describe("changeset selectors", () => {
@@ -170,16 +256,18 @@ describe("changesets", () => {
     it("should get all changesets for a given namespace and name", () => {
       const state = {
         changesets: {
-          ["foo/bar"]: {
+          byKey: {
-            byId: {
+            "foo/bar": {
-              "id1": {id: "id1"},
+              byId: {
-              "id2": {id: "id2"}
+                id1: { id: "id1" },
+                id2: { id: "id2" }
+              }
             }
           }
         }
       };
-      const result = getChangesets(state, "foo", "bar" );
+      const result = getChangesets(state, "foo", "bar");
-      expect(result).toContainEqual({id: "id1"})
+      expect(result).toContainEqual({ id: "id1" });
     });
 
     it("should return true, when fetching changesets is pending", () => {
@@ -208,7 +296,6 @@ describe("changesets", () => {
 
     it("should return false if fetching changesets did not fail", () => {
       expect(getFetchChangesetsFailure({}, "foo", "bar")).toBeUndefined();
-    })
+    });
-
   });
 });