Implemented BranchChooser & selectors

scm-ui/src/repos/containers/BranchChooser.js

@@ -1,9 +1,9 @@
 // @flow
 
 import React from "react";
-import type {Repository} from "@scm-manager/ui-types";
-import {connect} from "react-redux";
-import {fetchBranches} from "../modules/branches";
+import type { Repository } from "@scm-manager/ui-types";
+import { connect } from "react-redux";
+import { fetchBranches, getBranch, getBranches } from "../modules/branches";
 import DropDown from "../components/DropDown";
 
 type Props = {
@@ -14,30 +14,46 @@ type Props = {
   selectedBranchName: string
 };
 
-type State = {};
+type State = {
+  selectedBranchName: string
+};
 
 class BranchChooser extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      selectedBranchName: props.selectedBranchName
+    };
+  }
+
   componentDidMount() {
     const { repository, fetchBranches } = this.props;
     fetchBranches(repository);
   }
 
   render() {
-    const { selectedBranchName, branches } = this.props;
+    const { branches } = this.props;
     return (
       <DropDown
         options={branches.map(b => b.name)}
-        preselectedOption={selectedBranchName}
+        preselectedOption={this.state.selectedBranchName}
         optionSelected={branch => this.branchChanged(branch)}
       />
     );
   }
 
-  branchChanged = (branchName: string) => {};
+  branchChanged = (branchName: string) => {
+    const { callback } = this.props;
+    this.setState({ ...this.state, selectedBranchName: branchName });
+    const branch = this.props.branches.find(b => b.name === branchName);
+    callback(branch);
+  };
 }
 
-const mapStateToProps = (state: State) => {
-  return {};
+const mapStateToProps = (state: State, ownProps: Props) => {
+  return {
+    branches: getBranches(state, ownProps.repository)
+  };
 };
 
 const mapDispatchToProps = (dispatch: any) => {

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

@@ -28,6 +28,7 @@ import ChangesetList from "../components/changesets/ChangesetList";
 import DropDown from "../components/DropDown";
 import { withRouter } from "react-router-dom";
 import { fetchBranches, getBranchNames } from "../modules/branches";
+import BranchChooser from "./BranchChooser";
 
 type Props = {
   repository: Repository,
@@ -148,10 +149,10 @@ class Changesets extends React.PureComponent<Props, State> {
             <label className="label">
               {t("changesets.branchselector-label")}
             </label>
-            <DropDown
-              options={branchNames}
-              preselectedOption={branch}
-              optionSelected={branch => this.branchChanged(branch)}
+            <BranchChooser
+              repository={repository}
+              selectedBranchName={branch}
+              callback={branch => this.branchChanged(branch.name)}
             />
           </div>
           <ChangesetList repository={repository} changesets={changesets} />

scm-ui/src/repos/modules/branches.js

@@ -1,7 +1,11 @@
 // @flow
-import {FAILURE_SUFFIX, PENDING_SUFFIX, SUCCESS_SUFFIX} from "../../modules/types";
-import {apiClient} from "@scm-manager/ui-components";
-import type {Repository} from "@scm-manager/ui-types";
+import {
+  FAILURE_SUFFIX,
+  PENDING_SUFFIX,
+  SUCCESS_SUFFIX
+} from "../../modules/types";
+import { apiClient } from "@scm-manager/ui-components";
+import type { Repository } from "@scm-manager/ui-types";
 
 export const FETCH_BRANCHES = "scm/repos/FETCH_BRANCHES";
 export const FETCH_BRANCHES_PENDING = `${FETCH_BRANCHES}_${PENDING_SUFFIX}`;
@@ -27,29 +31,26 @@ export function fetchBranches(repository: Repository) {
 
 // Action creators
 export function fetchBranchesPending(repository: Repository) {
-  const { namespace, name } = repository;
   return {
     type: FETCH_BRANCHES_PENDING,
     payload: { repository },
-    itemId: namespace + "/" + name
+    itemId: createKey(repository)
   };
 }
 
 export function fetchBranchesSuccess(data: string, repository: Repository) {
-  const { namespace, name } = repository;
   return {
     type: FETCH_BRANCHES_SUCCESS,
     payload: { data, repository },
-    itemId: namespace + "/" + name
+    itemId: createKey(repository)
   };
 }
 
 export function fetchBranchesFailure(repository: Repository, error: Error) {
-  const { namespace, name } = repository;
   return {
     type: FETCH_BRANCHES_FAILURE,
     payload: { error, repository },
-    itemId: namespace + "/" + name
+    itemId: createKey(repository)
   };
 }
 
@@ -61,8 +62,7 @@ export default function reducer(
 ): Object {
   switch (action.type) {
     case FETCH_BRANCHES_SUCCESS:
-      const { namespace, name } = action.payload.repository;
-      const key = `${namespace}/${name}`;
+      const key = createKey(action.payload.repository);
       let oldBranchesByNames = { [key]: {} };
       if (state[key] !== undefined) {
         oldBranchesByNames[key] = state[key];
@@ -96,21 +96,8 @@ function extractBranchesByNames(data: any, oldBranchesByNames: any): Branch[] {
 
 // Selectors
 
-export function getBranchesForNamespaceAndNameFromState(
-  namespace: string,
-  name: string,
-  state: Object
-) {
-  const key = namespace + "/" + name;
-  if (!state.branches[key]) {
-    return null;
-  }
-  return Object.values(state.branches[key].byNames);
-}
-
 export function getBranchNames(state: Object, repository: Repository) {
-  const { namespace, name } = repository;
-  const key = namespace + "/" + name;
+  const key = createKey(repository);
   if (!state.branches[key] || !state.branches[key].byNames) {
     return null;
   }
@@ -118,5 +105,16 @@ export function getBranchNames(state: Object, repository: Repository) {
 }
 
 export function getBranches(state: Object, repository: Repository) {
-  return null;
+  const key = createKey(repository);
+  return Object.values(state.branches[key].byNames);
+}
+
+export function getBranch(state: Object, repository: Repository, name: string) {
+  const key = createKey(repository);
+  return state.branches[key].byNames[name];
+}
+
+function createKey(repository: Repository) {
+  const { namespace, name } = repository;
+  return `${namespace}/${name}`;
 }

scm-ui/src/repos/modules/branches.test.js

@@ -6,6 +6,8 @@ import reducer, {
   FETCH_BRANCHES_PENDING,
   FETCH_BRANCHES_SUCCESS,
   fetchBranches,
+  getBranch,
+  getBranches,
   getBranchNames
 } from "./branches";
 
@@ -125,17 +127,18 @@ describe("branches", () => {
   });
 
   describe("branch selectors", () => {
-    it("should return branches names", () => {
-      const state = {
-        branches: {
-          [key]: {
-            byNames: {
-              branch1: branch1,
-              branch2: branch2
-            }
+    const state = {
+      branches: {
+        [key]: {
+          byNames: {
+            branch1,
+            branch2
           }
         }
-      };
+      }
+    };
+
+    it("should return branches names", () => {
       const names = getBranchNames(state, repository);
       expect(names.length).toEqual(2);
       expect(names).toContain("branch1");
@@ -143,11 +146,20 @@ describe("branches", () => {
     });
 
     it("should return branches", () => {
-      const state = {
-        branches: {
-          [key]: {}
-        }
-      };
+      const branches = getBranches(state, repository);
+      expect(branches.length).toEqual(2);
+      expect(branches).toContain(branch1);
+      expect(branches).toContain(branch2);
+    });
+
+    it("should return single branch by name", () => {
+      const branch = getBranch(state, repository, "branch1");
+      expect(branch).toEqual(branch1);
+    });
+
+    it("should return undefined if branch does not exist", () => {
+      const branch = getBranch(state, repository, "branch42");
+      expect(branch).toBeUndefined();
     });
   });
 });

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

@@ -201,7 +201,11 @@ function extractChangesetsByIds(changesets: any, oldChangesetsByIds: any) {
 }
 
 //selectors
-export function getChangesets(state: Object, repository, branch?: string) {
+export function getChangesets(
+  state: Object,
+  repository: Repository,
+  branch?: string
+) {
   const key = createItemId(repository, branch);
   if (!state.changesets.byKey[key]) {
     return null;