From d532c36204b7e9ee4d4062dcda4c1c8ac40f8c56 Mon Sep 17 00:00:00 2001
From: Philipp Czora <philipp.czora@cloudogu.com>
Date: Tue, 31 Jul 2018 18:44:01 +0200
Subject: [PATCH] Groups can now be added via the UI

---
 scm-ui/public/locales/en/groups.json          |  6 ++
 .../components/buttons/CreateGroupButton.js   | 30 ++++++++++
 scm-ui/src/groups/containers/AddGroup.js      | 38 ++++++++++---
 scm-ui/src/groups/containers/GroupForm.js     | 57 +++++++++++++++++--
 scm-ui/src/groups/containers/Groups.js        | 10 ++--
 5 files changed, 121 insertions(+), 20 deletions(-)
 create mode 100644 scm-ui/src/groups/components/buttons/CreateGroupButton.js

diff --git a/scm-ui/public/locales/en/groups.json b/scm-ui/public/locales/en/groups.json
index 6caf430157..247ba59f81 100644
--- a/scm-ui/public/locales/en/groups.json
+++ b/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"
   }
 }
diff --git a/scm-ui/src/groups/components/buttons/CreateGroupButton.js b/scm-ui/src/groups/components/buttons/CreateGroupButton.js
new file mode 100644
index 0000000000..2d8a2c2762
--- /dev/null
+++ b/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));
diff --git a/scm-ui/src/groups/containers/AddGroup.js b/scm-ui/src/groups/containers/AddGroup.js
index ee6166fa2e..d1fd7b0b62 100644
--- a/scm-ui/src/groups/containers/AddGroup.js
+++ b/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));
diff --git a/scm-ui/src/groups/containers/GroupForm.js b/scm-ui/src/groups/containers/GroupForm.js
index f65278bcf5..4ef2b89035 100644
--- a/scm-ui/src/groups/containers/GroupForm.js
+++ b/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;
\ No newline at end of file
+export default translate("groups")(GroupForm);
diff --git a/scm-ui/src/groups/containers/Groups.js b/scm-ui/src/groups/containers/Groups.js
index bf6c89efe2..7b7253bd98 100644
--- a/scm-ui/src/groups/containers/Groups.js
+++ b/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));