add help for groups and correct adding group

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

@@ -3,13 +3,15 @@ import React from "react";
 
 import { AddButton } from "../buttons";
 import InputField from "./InputField";
+import { translate } from "react-i18next";
 
 type Props = {
   addEntry: string => void,
   disabled: boolean,
   buttonLabel: string,
   fieldLabel: string,
-  errorMessage: string
+  errorMessage: string,
+  t: string => string,
 };
 
 type State = {
@@ -25,7 +27,7 @@ class AddEntryToTableField extends React.Component<Props, State> {
   }
 
   render() {
-    const { disabled, buttonLabel, fieldLabel, errorMessage } = this.props;
+    const { disabled, buttonLabel, fieldLabel, errorMessage, t } = this.props;
     return (
       <div className="field">
         <InputField
@@ -36,6 +38,7 @@ class AddEntryToTableField extends React.Component<Props, State> {
           value={this.state.entryToAdd}
           onReturnPressed={this.appendEntry}
           disabled={disabled}
+          helpText={t("group-form.help.membersHelpText")}
         />
         <AddButton
           label={buttonLabel}
@@ -65,4 +68,4 @@ class AddEntryToTableField extends React.Component<Props, State> {
   };
 }
 
-export default AddEntryToTableField;
+export default translate("groups")(AddEntryToTableField);

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

@@ -1,5 +1,6 @@
 //@flow
 import React from "react";
+import {Help} from "../index";
 
 export type SelectItem = {
   value: string,
@@ -10,7 +11,8 @@ type Props = {
   label?: string,
   placeholder?: SelectItem[],
   value?: string,
-  onChange: string => void
+  onChange: string => void,
+  helpText?: string
 };
 
 class Textarea extends React.Component<Props> {
@@ -28,13 +30,26 @@ class Textarea extends React.Component<Props> {
     return "";
   };
 
+  renderHelp = () => {
+    const helpText = this.props.helpText;
+    if(helpText){
+      return (
+        <div className="control columns is-vcentered">
+          <Help message={helpText} />
+        </div>);
+    }
+    else
+      return null;
+  };
+
   render() {
     const { placeholder, value } = this.props;
 
     return (
       <div className="field">
         {this.renderLabel()}
-        <div className="control">
+        <div className="field is-grouped">
+        <div className="control is-expanded">
           <textarea
             className="textarea"
             ref={input => {
@@ -45,6 +60,8 @@ class Textarea extends React.Component<Props> {
             value={value}
           />
         </div>
+          {this.renderHelp()}
+        </div>
       </div>
     );
   }