Groups can now be added via the UI

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

@@ -22,5 +22,11 @@
   "add-group": {
     "title": "Create Group",
     "subtitle": "Create a new group"
+  },
+  "create-group-button": {
+    "label": "Create group"
+  },
+  "group-form": {
+    "submit": "Submit"
   }
 }

scm-ui/src/groups/components/buttons/CreateGroupButton.js

@@ -0,0 +1,30 @@
+//@flow
+import React from "react";
+import injectSheet from "react-jss";
+import { translate } from "react-i18next";
+import { AddButton } from "../../../components/buttons";
+import classNames from "classnames";
+
+const styles = {
+  spacing: {
+    margin: "1em 0 0 1em"
+  }
+};
+
+type Props = {
+  t: string => string,
+  classes: any
+};
+
+class CreateGroupButton extends React.Component<Props> {
+  render() {
+    const { classes, t } = this.props;
+    return (
+      <div className={classNames("is-pulled-right", classes.spacing)}>
+        <AddButton label={t("create-group-button.label")} link="/groups/add" />
+      </div>
+    );
+  }
+}
+
+export default translate("groups")(injectSheet(styles)(CreateGroupButton));

scm-ui/src/groups/containers/AddGroup.js

@@ -1,24 +1,44 @@
 //@flow
-import React from 'react';
+import React from "react";
 
-import Page from "../../components/layout/Page"
+import Page from "../../components/layout/Page";
 import { translate } from "react-i18next";
-import GroupForm from './GroupForm';
+import GroupForm from "./GroupForm";
+import { connect } from "react-redux";
+import { createGroup } from "../modules/groups";
 
 export interface Props {
-  t: string => string
+  t: string => string;
 }
 
-export interface State {
-}
+export interface State {}
 
 class AddGroup extends React.Component<Props, State> {
-
   render() {
     const { t } = this.props;
-    return <Page title={t("add-group.title")} subtitle={t("add-group.subtitle")}><div><GroupForm /></div></Page>
+    return (
+      <Page title={t("add-group.title")} subtitle={t("add-group.subtitle")}>
+        <div>
+          <GroupForm submitForm={group => this.createGroup(group)} />
+        </div>
+      </Page>
+    );
   }
 
+  createGroup = (group: Group) => {
+    this.props.createGroup(group);
+  };
 }
 
-export default translate("groups")(AddGroup);
+const mapDispatchToProps = dispatch => {
+  return {
+    createGroup: (group: Group) => dispatch(createGroup(group))
+  };
+};
+
+const mapStateToProps = state => {};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(translate("groups")(AddGroup));

scm-ui/src/groups/containers/GroupForm.js

@@ -1,23 +1,68 @@
 //@flow
-import React from 'react';
+import React from "react";
+
+import InputField from "../../components/forms/InputField";
+import { SubmitButton } from "../../components/buttons";
+import { translate } from "react-i18next";
+import type { Group } from "../types/Group";
 
-import InputField from "../../components/forms/InputField"
 export interface Props {
+  t: string => string;
+  submitForm: Group => void;
 }
 
 export interface State {
+  group: Group;
 }
 
 class GroupForm extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  onSubmit = (event: Event) => {
+    event.preventDefault();
+    this.props.submitForm(this.state.group);
+  };
 
   render() {
+    const { t } = this.props;
     return (
-      <form>
-      <InputField label="Name" errorMessage="" onChange={()=>{}} validationError={false}/>
+      <form onSubmit={this.onSubmit}>
+        <InputField
+          label={t("group.name")}
+          errorMessage=""
+          onChange={this.handleGroupNameChange}
+          validationError={false}
+        />
+        <InputField
+          label={t("group.description")}
+          errorMessage=""
+          onChange={this.handleDescriptionChange}
+          validationError={false}
+        />
+        <SubmitButton label={t("group-form.submit")} />
       </form>
-    )
+    );
   }
 
+  handleGroupNameChange = (name: string) => {
+    this.setState({
+      group: {
+        ...this.state.group,
+        name
+      }
+    });
+  };
+
+  handleDescriptionChange = (description: string) => {
+    this.setState({
+      group: {
+        ...this.state.group,
+        description
+      }
+    });
+  };
 }
 
-export default GroupForm;
+export default translate("groups")(GroupForm);

scm-ui/src/groups/containers/Groups.js

@@ -8,6 +8,7 @@ import type { History } from "history";
 import { Page } from "../../components/layout";
 import { GroupTable } from "./../components/table";
 import Paginator from "../../components/Paginator";
+import CreateGroupButton from "../components/buttons/CreateGroupButton";
 
 import {
   fetchGroupsByPage,
@@ -37,7 +38,6 @@ type Props = {
 };
 
 class Groups extends React.Component<Props> {
-
   componentDidMount() {
     this.props.fetchGroupsByPage(this.props.page);
   }
@@ -69,7 +69,7 @@ class Groups extends React.Component<Props> {
         loading={loading || !groups}
         error={error}
       >
-      <GroupTable groups={groups} />
+        <GroupTable groups={groups} />
         {this.renderPaginator()}
         {this.renderCreateButton()}
       </Page>
@@ -85,11 +85,11 @@ class Groups extends React.Component<Props> {
   }
 
   renderCreateButton() {
-   /* if (this.props.canAddGroups) {
+    if (this.props.canAddGroups) {
       return <CreateGroupButton />;
     } else {
       return;
-    }*/
+    }
   }
 }
 
@@ -122,7 +122,7 @@ const mapStateToProps = (state, ownProps) => {
   };
 };
 
-const mapDispatchToProps = (dispatch) => {
+const mapDispatchToProps = dispatch => {
   return {
     fetchGroupsByPage: (page: number) => {
       dispatch(fetchGroupsByPage(page));