Implement Git repo config

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

@@ -0,0 +1,89 @@
+// @flow
+
+import React from "react";
+import type {Branch} from "packages/ui-types/src/index";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+import DropDown from "./forms/DropDown";
+
+const styles = {
+  zeroflex: {
+    flexGrow: 0
+  },
+  minWidthOfLabel: {
+    minWidth: "4.5rem"
+  }
+};
+
+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="box field is-horizontal">
+          <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;
+    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";