ordered branches in selectfield and added first form validation

scm-ui/public/locales/en/repos.json

@@ -11,7 +11,10 @@
   "validation": {
     "namespace-invalid": "The repository namespace is invalid",
     "name-invalid": "The repository name is invalid",
-    "contact-invalid": "Contact must be a valid mail address"
+    "contact-invalid": "Contact must be a valid mail address",
+    "branch": {
+      "nameInvalid": "The branch name is invalid"
+    }
   },
   "help": {
     "namespaceHelpText": "The namespace of the repository. This name will be part of the repository url.",

scm-ui/src/repos/branches/components/BranchForm.js

@@ -8,6 +8,7 @@ import {
   SubmitButton,
   validation as validator
 } from "@scm-manager/ui-components";
+import { orderBranches } from "../util/orderBranches";
 
 type Props = {
   submitForm: Branch => void,
@@ -32,8 +33,17 @@ class BranchForm extends React.Component<Props, State> {
     };
   }
 
+  isFalsy(value) {
+    return !value;
+  }
+
   isValid = () => {
-    return true; //TODO
+    const { source, name } = this.state;
+    return !(
+      this.state.nameValidationError ||
+      this.isFalsy(source) ||
+      this.isFalsy(name)
+    );
   };
 
   submit = (event: Event) => {
@@ -44,8 +54,9 @@ class BranchForm extends React.Component<Props, State> {
   };
 
   render() {
-    const { t, branches } = this.props;
-    const { loading } = this.state;
+    const { t, branches, loading } = this.props;
+    const { name } = this.state;
+    orderBranches(branches);
     const options = branches.map(branch => ({
       label: branch.name,
       value: branch.name
@@ -67,6 +78,9 @@ class BranchForm extends React.Component<Props, State> {
                 name="name"
                 label={t("branches.create.name")}
                 onChange={this.handleNameChange}
+                value={name ? name : ""}
+                validationError={this.state.nameValidationError}
+                errorMessage={t("validation.branch.nameInvalid")}
               />
             </div>
           </div>