From 4cb644f9f8aee2f23e04affb665979b210ef52e8 Mon Sep 17 00:00:00 2001
From: Philipp Czora <philipp.czora@cloudogu.com>
Date: Mon, 17 Sep 2018 14:03:13 +0200
Subject: [PATCH] Restructured Changeset Component

WIP
---
 .../changesets/components/ChangesetTable.js   | 28 ++++++
 .../src/changesets/components/Changesets.js   | 65 --------------
 .../src/changesets/containers/Changesets.js   | 85 +++++++++++++++++++
 scm-ui/src/changesets/modules/changesets.js   |  8 +-
 .../src/repos/components/RepositoryDetails.js |  2 -
 scm-ui/src/repos/containers/RepositoryRoot.js | 35 ++++----
 scm-ui/src/repos/modules/branches.js          |  8 ++
 scm-ui/src/repos/modules/branches.test.js     | 25 +++++-
 8 files changed, 167 insertions(+), 89 deletions(-)
 create mode 100644 scm-ui/src/changesets/components/ChangesetTable.js
 delete mode 100644 scm-ui/src/changesets/components/Changesets.js
 create mode 100644 scm-ui/src/changesets/containers/Changesets.js

diff --git a/scm-ui/src/changesets/components/ChangesetTable.js b/scm-ui/src/changesets/components/ChangesetTable.js
new file mode 100644
index 0000000000..29260bdc32
--- /dev/null
+++ b/scm-ui/src/changesets/components/ChangesetTable.js
@@ -0,0 +1,28 @@
+// @flow
+import ChangesetRow from "./ChangesetRow";
+import React from "react";
+
+type Props = {
+  changesets: Changeset[]
+}
+
+class ChangesetTable extends React.Component<Props> {
+
+  render() {
+    const {changesets} = this.props;
+    return <table className="table is-hoverable is-fullwidth is-striped is-bordered">
+      <thead>
+      <tr>
+        <th>Changesets</th>
+      </tr>
+      </thead>
+      <tbody>
+      {changesets.map((changeset, index) => {
+        return <ChangesetRow key={index} changeset={changeset}/>;
+      })}
+      </tbody>
+    </table>
+  }
+}
+
+export default ChangesetTable;
diff --git a/scm-ui/src/changesets/components/Changesets.js b/scm-ui/src/changesets/components/Changesets.js
deleted file mode 100644
index f9feb51829..0000000000
--- a/scm-ui/src/changesets/components/Changesets.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from "react"
-import { connect } from "react-redux";
-import ChangesetRow from "./ChangesetRow";
-import type {Changeset} from "@scm-manager/ui-types";
-
-import {
-  fetchChangesetsByNamespaceAndName,
-  getChangesets,
-} from "../modules/changesets";
-import { translate } from "react-i18next";
-import {fetchBranchesByNamespaceAndName} from "../../repos/modules/branches";
-
-type Props = {
-  changesets: Changeset[],
-  t: string => string
-}
-
-class Changesets extends React.Component<Props> {
-  componentDidMount() {
-    const {namespace, name} = this.props.repository;
-    this.props.fetchChangesetsByNamespaceAndName(namespace, name);
-    this.props.fetchBranchesByNamespaceAndName(namespace, name);
-  }
-
-  render() {
-    const { t, changesets } = this.props;
-    if (!changesets) {
-      return null;
-    }
-    return <table className="table is-hoverable is-fullwidth is-striped is-bordered">
-      <thead>
-      <th>Changesets</th>
-      </thead>
-      <tbody>
-      {changesets.map((changeset, index) => {
-        return <ChangesetRow key={index} changeset={changeset} />;
-      })}
-      </tbody>
-    </table>
-  }
-}
-
-const mapStateToProps = (state, ownProps) => {
-  const {namespace, name} = ownProps.repository;
-  return {
-    changesets: getChangesets(namespace, name, "", state)
-  }
-};
-
-const mapDispatchToProps = dispatch => {
-  return {
-    fetchChangesetsByNamespaceAndName: (namespace: string, name: string) => {
-      dispatch(fetchChangesetsByNamespaceAndName(namespace, name));
-    },
-
-    fetchBranchesByNamespaceAndName: (namespace: string, name: string) => {
-      dispatch(fetchBranchesByNamespaceAndName(namespace, name));
-    }
-  }
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(translate("changesets")(Changesets));
diff --git a/scm-ui/src/changesets/containers/Changesets.js b/scm-ui/src/changesets/containers/Changesets.js
new file mode 100644
index 0000000000..2cc64f8bb5
--- /dev/null
+++ b/scm-ui/src/changesets/containers/Changesets.js
@@ -0,0 +1,85 @@
+import React from "react"
+import {connect} from "react-redux";
+
+import {
+  fetchChangesetsByNamespaceAndName, fetchChangesetsByNamespaceNameAndBranch,
+  getChangesets,
+} from "../modules/changesets";
+import {translate} from "react-i18next";
+import {fetchBranchesByNamespaceAndName, getBranchNames} from "../../repos/modules/branches";
+import type {Repository} from "@scm-manager/ui-types";
+import ChangesetTable from "../components/ChangesetTable";
+import DropDown from "../components/DropDown";
+
+type Props = {
+  repository: Repository,
+  branchName: string,
+  history: History,
+  fetchChangesetsByNamespaceNameAndBranch: (namespace: string, name: string, branch: string) => void
+}
+
+type State = {
+  branchName: string
+}
+
+class Changesets extends React.Component<State, Props> {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {
+    const {namespace, name} = this.props.repository;
+    this.props.fetchChangesetsByNamespaceNameAndBranch(namespace, name, this.props.branchName);
+    this.props.fetchBranchesByNamespaceAndName(namespace, name);
+  }
+
+  render() {
+    const {changesets, branchNames} = this.props;
+    if (changesets === null) {
+      return null
+    }
+    if (branchNames) {
+      return <div>
+        <DropDown options={branchNames} optionSelected={this.branchChanged}/>
+        <ChangesetTable changesets={changesets}/>
+      </div>;
+    } else {
+      return <ChangesetTable changesets={changesets}/>
+    }
+
+  }
+
+  branchChanged = (branchName: string) => {
+    this.props.history.push("./history/" + branchName)
+  };
+}
+
+
+const mapStateToProps = (state, ownProps: Props) => {
+  console.log("mapStateToProps ownProps: ", ownProps);
+  const {namespace, name} = ownProps.repository;
+  return {
+    changesets: getChangesets(namespace, name, ownProps.branchName, state),
+    branchNames: getBranchNames(namespace, name, state)
+  }
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchChangesetsByNamespaceAndName: (namespace: string, name: string) => {
+      dispatch(fetchChangesetsByNamespaceAndName(namespace, name));
+    },
+    fetchChangesetsByNamespaceNameAndBranch: (namespace: string, name: string, branch: string) => {
+      dispatch(fetchChangesetsByNamespaceNameAndBranch(namespace, name, branch));
+    },
+    fetchBranchesByNamespaceAndName: (namespace: string, name: string) => {
+      dispatch(fetchBranchesByNamespaceAndName(namespace, name));
+    }
+  }
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Changesets);
diff --git a/scm-ui/src/changesets/modules/changesets.js b/scm-ui/src/changesets/modules/changesets.js
index d77a1423aa..cd35801a2f 100644
--- a/scm-ui/src/changesets/modules/changesets.js
+++ b/scm-ui/src/changesets/modules/changesets.js
@@ -83,14 +83,13 @@ function createItemId(namespace: string, name: string, branch?: string): string
 export default function reducer(state: any = {}, action: Action = {type: "UNKNOWN"}): Object {
   switch (action.type) {
     case FETCH_CHANGESETS_SUCCESS:
-      const {namespace, name} = action.payload;
-      const key = namespace + "/" + name;
-
+      const {namespace, name, branch} = action.payload;
+      const key = createItemId(namespace, name, branch);
       let oldChangesets = {[key]: {}};
       if (state[key] !== undefined) {
         oldChangesets[key] = state[key]
       }
-      return {[key]: {byId: extractChangesetsByIds(action.payload.collection, oldChangesets[key].byId)}};
+      return {...state, [key]: {byId: extractChangesetsByIds(action.payload.collection, oldChangesets[key].byId)}};
     default:
       return state;
   }
@@ -122,6 +121,7 @@ export function getChangesetsForNamespaceAndNameFromState(namespace: string, nam
 
 export function getChangesets(namespace: string, name: string, branch: string, state: Object) {
   const key = createItemId(namespace, name, branch);
+  console.log("getChangesets for key " + key);
   if (!state.changesets[key]) {
     return null;
   }
diff --git a/scm-ui/src/repos/components/RepositoryDetails.js b/scm-ui/src/repos/components/RepositoryDetails.js
index 33edaff541..99c88fec94 100644
--- a/scm-ui/src/repos/components/RepositoryDetails.js
+++ b/scm-ui/src/repos/components/RepositoryDetails.js
@@ -3,7 +3,6 @@ import React from "react";
 import type { Repository } from "@scm-manager/ui-types";
 import RepositoryDetailTable from "./RepositoryDetailTable";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import Changesets from "../../changesets/components/Changesets";
 
 type Props = {
   repository: Repository
@@ -21,7 +20,6 @@ class RepositoryDetails extends React.Component<Props> {
             renderAll={true}
             props={{ repository }}
           />
-          <Changesets repository={repository}/>
         </div>
       </div>
     );
diff --git a/scm-ui/src/repos/containers/RepositoryRoot.js b/scm-ui/src/repos/containers/RepositoryRoot.js
index 2816cdb5c5..0f6f6ada20 100644
--- a/scm-ui/src/repos/containers/RepositoryRoot.js
+++ b/scm-ui/src/repos/containers/RepositoryRoot.js
@@ -7,9 +7,9 @@ import {
   getRepository,
   isFetchRepoPending
 } from "../modules/repos";
-import { connect } from "react-redux";
-import { Route } from "react-router-dom";
-import type { Repository } from "@scm-manager/ui-types";
+import {connect} from "react-redux";
+import {Route} from "react-router-dom";
+import type {Repository} from "@scm-manager/ui-types";
 import {
   Page,
   Loading,
@@ -18,13 +18,14 @@ import {
   NavLink,
   Section
 } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import {translate} from "react-i18next";
 import RepositoryDetails from "../components/RepositoryDetails";
 import DeleteNavAction from "../components/DeleteNavAction";
 import Edit from "../containers/Edit";
 
-import type { History } from "history";
+import type {History} from "history";
 import EditNavLink from "../components/EditNavLink";
+import Changesets from "../../changesets/containers/Changesets";
 
 type Props = {
   namespace: string,
@@ -45,7 +46,7 @@ type Props = {
 
 class RepositoryRoot extends React.Component<Props> {
   componentDidMount() {
-    const { fetchRepo, namespace, name } = this.props;
+    const {fetchRepo, namespace, name} = this.props;
 
     fetchRepo(namespace, name);
   }
@@ -70,7 +71,7 @@ class RepositoryRoot extends React.Component<Props> {
   };
 
   render() {
-    const { loading, error, repository, t } = this.props;
+    const {loading, error, repository, t} = this.props;
 
     if (error) {
       return (
@@ -83,7 +84,7 @@ class RepositoryRoot extends React.Component<Props> {
     }
 
     if (!repository || loading) {
-      return <Loading />;
+      return <Loading/>;
     }
 
     const url = this.matchedUrl();
@@ -95,22 +96,26 @@ class RepositoryRoot extends React.Component<Props> {
             <Route
               path={url}
               exact
-              component={() => <RepositoryDetails repository={repository} />}
+              component={() => <RepositoryDetails repository={repository}/>}
             />
             <Route
               path={`${url}/edit`}
-              component={() => <Edit repository={repository} />}
+              component={() => <Edit repository={repository}/>}
+            />
+            <Route
+              path={`${url}/history`}
+              component={() => <Changesets repository={repository} branchName={"master"} history={this.props.history}/>}
             />
           </div>
           <div className="column">
             <Navigation>
               <Section label={t("repository-root.navigation-label")}>
-                <NavLink to={url} label={t("repository-root.information")} />
-                <EditNavLink repository={repository} editUrl={`${url}/edit`} />
+                <NavLink to={url} label={t("repository-root.information")}/>
+                <EditNavLink repository={repository} editUrl={`${url}/edit`}/>
               </Section>
               <Section label={t("repository-root.actions-label")}>
-                <DeleteNavAction repository={repository} delete={this.delete} />
-                <NavLink to="/repos" label={t("repository-root.back-label")} />
+                <DeleteNavAction repository={repository} delete={this.delete}/>
+                <NavLink to="/repos" label={t("repository-root.back-label")}/>
               </Section>
             </Navigation>
           </div>
@@ -121,7 +126,7 @@ class RepositoryRoot extends React.Component<Props> {
 }
 
 const mapStateToProps = (state, ownProps) => {
-  const { namespace, name } = ownProps.match.params;
+  const {namespace, name} = ownProps.match.params;
   const repository = getRepository(state, namespace, name);
   const loading = isFetchRepoPending(state, namespace, name);
   const error = getFetchRepoFailure(state, namespace, name);
diff --git a/scm-ui/src/repos/modules/branches.js b/scm-ui/src/repos/modules/branches.js
index 4f1624184f..fb1b222aa9 100644
--- a/scm-ui/src/repos/modules/branches.js
+++ b/scm-ui/src/repos/modules/branches.js
@@ -92,3 +92,11 @@ export function getBranchesForNamespaceAndNameFromState(namespace: string, name:
   }
   return Object.values(state.branches[key].byNames);
 }
+
+export function getBranchNames(namespace: string, name: string, state: Object) {
+  const key = namespace + "/" + name;
+  if (!state.branches[key]) {
+    return null;
+  }
+  return Object.keys(state.branches[key].byNames);
+}
diff --git a/scm-ui/src/repos/modules/branches.test.js b/scm-ui/src/repos/modules/branches.test.js
index 83a6f73b03..d97d9aa7bf 100644
--- a/scm-ui/src/repos/modules/branches.test.js
+++ b/scm-ui/src/repos/modules/branches.test.js
@@ -5,7 +5,7 @@ import {
   FETCH_BRANCHES_FAILURE,
   FETCH_BRANCHES_PENDING,
   FETCH_BRANCHES_SUCCESS,
-  fetchBranchesByNamespaceAndName, getBranchesForNamespaceAndNameFromState
+  fetchBranchesByNamespaceAndName, getBranchesForNamespaceAndNameFromState, getBranchNames
 } from "./branches";
 import reducer from "./branches";
 
@@ -128,6 +128,25 @@ describe("branch selectors", () => {
         }
       }
     };
-    getBranchesForNamespaceAndNameFromState(namespace, name, state);
-  })
+    const branches = getBranchesForNamespaceAndNameFromState(namespace, name, state);
+    expect(branches.length).toEqual(1);
+    expect(branches[0]).toEqual(branch1);
+  });
+
+  it("should return branches names", () => {
+    const state = {
+      branches: {
+        [key]: {
+          byNames: {
+            "branch1": branch1,
+            "branch2": branch2
+          }
+        }
+      }
+    };
+    const names = getBranchNames(namespace, name, state);
+    expect(names.length).toEqual(2);
+    expect(names).toContain("branch1");
+    expect(names).toContain("branch2");
+  });
 });