merged with 2.0.0-m3

scm-ui-components/packages/ui-components/src/BranchSelector.js

@@ -0,0 +1,106 @@
+// @flow
+
+import React from "react";
+import type {Branch} from "@scm-manager/ui-types";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+import DropDown from "./forms/DropDown";
+
+const styles = {
+  zeroflex: {
+    flexGrow: 0
+  },
+  minWidthOfLabel: {
+    minWidth: "4.5rem"
+  },
+  wrapper: {
+    padding: "1rem 1.5rem 0.25rem 1.5rem",
+    border: "1px solid #eee",
+    borderRadius: "5px 5px 0 0"
+  }
+};
+
+type Props = {
+  branches: Branch[], // TODO: Use generics?
+  selected: (branch?: Branch) => void,
+  selectedBranch?: string,
+  label: string,
+
+  // context props
+  classes: Object
+};
+
+type State = { selectedBranch?: Branch };
+
+class BranchSelector extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {
+    const selectedBranch = this.props.branches.find(branch => branch.name === this.props.selectedBranch);
+    this.setState({ selectedBranch });
+  }
+
+  render() {
+    const { branches, classes, label } = this.props;
+
+    if (branches) {
+      return (
+        <div
+          className={classNames(
+            "has-background-light field",
+            "is-horizontal",
+            classes.wrapper
+          )}
+        >
+          <div
+            className={classNames(
+              "field-label",
+              "is-normal",
+              classes.zeroflex,
+              classes.minWidthOfLabel
+            )}
+          >
+            <label className="label">{label}</label>
+          </div>
+          <div className="field-body">
+            <div className="field is-narrow">
+              <div className="control">
+                <DropDown
+                  className="is-fullwidth"
+                  options={branches.map(b => b.name)}
+                  optionSelected={this.branchSelected}
+                  preselectedOption={
+                    this.state.selectedBranch
+                      ? this.state.selectedBranch.name
+                      : ""
+                  }
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  branchSelected = (branchName: string) => {
+    const { branches, selected } = this.props;
+
+    if (!branchName) {
+      this.setState({ selectedBranch: undefined });
+      selected(undefined);
+      return;
+    }
+    const branch = branches.find(b => b.name === branchName);
+
+    selected(branch);
+    this.setState({ selectedBranch: branch });
+  };
+}
+
+export default injectSheet(styles)(BranchSelector);

scm-ui-components/packages/ui-components/src/forms/DropDown.js

@@ -0,0 +1,40 @@
+// @flow
+
+import React from "react";
+import classNames from "classnames";
+
+type Props = {
+  options: string[],
+  optionSelected: string => void,
+  preselectedOption?: string,
+  className: any
+};
+
+class DropDown extends React.Component<Props> {
+  render() {
+    const { options, preselectedOption, className } = this.props;
+    return (
+      <div className={classNames(className, "select")}>
+        <select
+          value={preselectedOption ? preselectedOption : ""}
+          onChange={this.change}
+        >
+          <option key="" />
+          {options.map(option => {
+            return (
+              <option key={option} value={option}>
+                {option}
+              </option>
+            );
+          })}
+        </select>
+      </div>
+    );
+  }
+
+  change = (event: SyntheticInputEvent<HTMLSelectElement>) => {
+    this.props.optionSelected(event.target.value);
+  };
+}
+
+export default DropDown;

scm-ui-components/packages/ui-components/src/forms/index.js

@@ -7,5 +7,6 @@ export { default as InputField } from "./InputField.js";
 export { default as Select } from "./Select.js";
 export { default as Textarea } from "./Textarea.js";
 export { default as PasswordConfirmation } from "./PasswordConfirmation.js";
-export { default as LabelWithHelpIcon } from "./LabelWithHelpIcon";
+export { default as LabelWithHelpIcon } from "./LabelWithHelpIcon.js";
+export { default as DropDown } from "./DropDown.js";
 

scm-ui-components/packages/ui-components/src/index.js

@@ -24,6 +24,7 @@ export { default as HelpIcon } from "./HelpIcon";
 export { default as Tooltip } from "./Tooltip";
 export { getPageFromMatch } from "./urls";
 export { default as Autocomplete} from "./Autocomplete";
+export { default as BranchSelector } from "./BranchSelector";
 
 export { apiClient, NOT_FOUND_ERROR, UNAUTHORIZED_ERROR, CONFLICT_ERROR } from "./apiclient.js";
 

scm-ui-components/packages/ui-components/src/repos/LoadingDiff.js

@@ -30,6 +30,16 @@ class LoadingDiff extends React.Component<Props, State> {
   }
 
   componentDidMount() {
+   this.fetchDiff();
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if(prevProps.url !== this.props.url){
+      this.fetchDiff();
+    }
+  }
+
+  fetchDiff = () => {
     const { url } = this.props;
     apiClient
       .get(url)
@@ -46,15 +56,18 @@ class LoadingDiff extends React.Component<Props, State> {
           error
         });
       });
-  }
+  };
 
   render() {
     const { diff, loading, error } = this.state;
     if (error) {
       return <ErrorNotification error={error} />;
-    } else if (loading || !diff) {
+    } else if (loading) {
       return <Loading />;
-    } else {
+    } else if(!diff){
+        return null;
+    }
+    else {
       return <Diff diff={diff} />;
     }
   }