Restructured changeset module

2025-11-18 03:01:05 +01:00 · 2018-09-19 13:49:04 +02:00
parent 6d0146f267
commit 10b120c862
3 changed files with 352 additions and 111 deletions
--- a/scm-ui/src/changesets/containers/Changesets.js
+++ b/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),
-    changesets: getChangesets(
-      state,
-      namespace,
-      name,
-      ownProps.match.params.branch
-    ),
-    branchNames: getBranchNames(namespace, name, state),
-    error: getFetchChangesetsFailure(
-      state,
-      namespace,
-      name,
-      ownProps.match.params.branch
-    )
+    loading,
+    changesets,
+    branchNames,
+    error,
+    list
  };
 };

 const mapDispatchToProps = dispatch => {
  return {
    fetchChangesetsByNamespaceAndName: (namespace: string, name: string) => {
-      dispatch(fetchChangesetsByNamespaceAndName(namespace, name));
+      dispatch(fetchChangesets(namespace, name));
    },
    fetchChangesetsByNamespaceNameAndBranch: (
      namespace: string,
--- a/scm-ui/src/changesets/modules/changesets.js
+++ b/scm-ui/src/changesets/modules/changesets.js
@@ -1,9 +1,15 @@
 // @flow

-import {FAILURE_SUFFIX, PENDING_SUFFIX, SUCCESS_SUFFIX} from "../../modules/types";
-import {apiClient} from "@scm-manager/ui-components";
-import {isPending} from "../../modules/pending";
-import {getFailure} from "../../modules/failure";
+import {
+  FAILURE_SUFFIX,
+  PENDING_SUFFIX,
+  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) {
-  return function (dispatch: any) {
+export function fetchChangesetsWithOptions(
+  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))
-      }).catch(cause => {
-        dispatch(fetchChangesetsFailure(namespace, name, branch, cause))
+        dispatch(fetchChangesetsSuccess(data, namespace, name, branch));
      })
-  }
+      .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
-      let oldChangesets = {[key]: {}};
+      const key = action.itemId;
+      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) {
-  return isPending(state, FETCH_CHANGESETS, createItemId(namespace, name, branch))
+export function isFetchChangesetsPending(
+  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) {
-  return getFailure(state, FETCH_CHANGESETS, createItemId(namespace, name, branch));
+export function getFetchChangesetsFailure(
+  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);
+};
--- a/scm-ui/src/changesets/modules/changesets.test.js
+++ b/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,7 +73,11 @@ describe("changesets", () => {
      ];

      const store = mockStore({});
-      return store.dispatch(fetchChangesetsByNamespaceNameAndBranch("foo", "bar", "specific")).then(() => {
+      return store
+        .dispatch(
+          fetchChangesetsByNamespaceNameAndBranch("foo", "bar", "specific")
+        )
+        .then(() => {
          expect(store.getActions()).toEqual(expectedActions);
        });
    });
@@ -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
+        .dispatch(
+          fetchChangesetsByNamespaceNameAndBranch("foo", "bar", "specific")
+        )
+        .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: "changeset2", description: "foo"},
-          {id: "changeset3", description: "bar"},
+          { id: "changeset1", author: { mail: "z@phod.com", name: "zaphod" } },
+          { id: "changeset2", description: "foo" },
+          { 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["foo/bar"].byId["changeset2"].description).toEqual("foo");
-      expect(newState["foo/bar"].byId["changeset3"].description).toEqual("bar");
+      expect(newState.byKey["foo/bar"].byId["changeset1"].author.mail).toEqual(
+        "z@phod.com"
+      );
+      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(
+        {
+          byKey: {
            "foo/bar": {
              byId: {
                ["changeset2"]: {
                  id: "changeset2",
-              author: {mail: "mail@author.com", name: "author"}
+                  author: { mail: "mail@author.com", name: "author" }
                }
              }
            }
-      }, fetchChangesetsSuccess(responseBody, "foo", "bar"));
-      expect(newState["foo/bar"].byId["changeset2"]).toBeDefined();
-      expect(newState["foo/bar"].byId["changeset1"]).toBeDefined();
-    })
+          }
+        },
+        fetchChangesetsSuccess(responseBody, "foo", "bar")
+      );
+      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: {
+            "foo/bar": {
              byId: {
-              "id1": {id: "id1"},
-              "id2": {id: "id2"}
+                id1: { id: "id1" },
+                id2: { id: "id2" }
+              }
            }
          }
        }
      };
-      const result = getChangesets(state, "foo", "bar" );
-      expect(result).toContainEqual({id: "id1"})
+      const result = getChangesets(state, "foo", "bar");
+      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();
-    })
-
+    });
  });
 });