From ebed0d0997a9d9cf70e88371a535a0bdcac0f686 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Tue, 21 Aug 2018 11:59:12 +0200
Subject: [PATCH] transfer field to add new entry of each component to global
 one

---
 .../components/forms/AddEntryToTableField.js  | 68 +++++++++++++++++
 .../components/fields/AddAdminGroupField.js   | 67 -----------------
 .../components/fields/AddAdminUserField.js    | 73 -------------------
 .../components/fields/AddProxyExcludeField.js | 73 -------------------
 .../config/components/form/AdminSettings.js   | 18 ++++-
 .../config/components/form/ProxySettings.js   | 10 ++-
 .../src/groups/components/AddMemberField.js   | 71 ------------------
 scm-ui/src/groups/components/GroupForm.js     | 10 ++-
 8 files changed, 97 insertions(+), 293 deletions(-)
 create mode 100644 scm-ui/src/components/forms/AddEntryToTableField.js
 delete mode 100644 scm-ui/src/config/components/fields/AddAdminGroupField.js
 delete mode 100644 scm-ui/src/config/components/fields/AddAdminUserField.js
 delete mode 100644 scm-ui/src/config/components/fields/AddProxyExcludeField.js
 delete mode 100644 scm-ui/src/groups/components/AddMemberField.js

diff --git a/scm-ui/src/components/forms/AddEntryToTableField.js b/scm-ui/src/components/forms/AddEntryToTableField.js
new file mode 100644
index 0000000000..1770e07807
--- /dev/null
+++ b/scm-ui/src/components/forms/AddEntryToTableField.js
@@ -0,0 +1,68 @@
+//@flow
+import React from "react";
+
+import { AddButton } from "../buttons";
+import InputField from "./InputField";
+
+type Props = {
+  addEntry: string => void,
+  disabled: boolean,
+  buttonLabel: string,
+  fieldLabel: string,
+  errorMessage: string
+};
+
+type State = {
+  entryToAdd: string
+};
+
+class AddEntryToTableField extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      entryToAdd: ""
+    };
+  }
+
+  render() {
+    const { disabled, buttonLabel, fieldLabel, errorMessage } = this.props;
+    return (
+      <div className="field">
+        <InputField
+          label={fieldLabel}
+          errorMessage={errorMessage}
+          onChange={this.handleAddEntryChange}
+          validationError={false}
+          value={this.state.entryToAdd}
+          onReturnPressed={this.appendEntry}
+          disabled={disabled}
+        />
+        <AddButton
+          label={buttonLabel}
+          action={this.addButtonClicked}
+          disabled={disabled}
+        />
+      </div>
+    );
+  }
+
+  addButtonClicked = (event: Event) => {
+    event.preventDefault();
+    this.appendEntry();
+  };
+
+  appendEntry = () => {
+    const { entryToAdd } = this.state;
+    this.props.addEntry(entryToAdd);
+    this.setState({ ...this.state, entryToAdd: "" });
+  };
+
+  handleAddEntryChange = (entryname: string) => {
+    this.setState({
+      ...this.state,
+      entryToAdd: entryname
+    });
+  };
+}
+
+export default AddEntryToTableField;
diff --git a/scm-ui/src/config/components/fields/AddAdminGroupField.js b/scm-ui/src/config/components/fields/AddAdminGroupField.js
deleted file mode 100644
index 21cba365ed..0000000000
--- a/scm-ui/src/config/components/fields/AddAdminGroupField.js
+++ /dev/null
@@ -1,67 +0,0 @@
-//@flow
-import React from "react";
-
-import { translate } from "react-i18next";
-import { AddButton } from "../../../components/buttons";
-import InputField from "../../../components/forms/InputField";
-
-type Props = {
-  t: string => string,
-  addGroup: string => void,
-  disabled: boolean
-};
-
-type State = {
-  groupToAdd: string
-};
-
-class AddAdminGroupField extends React.Component<Props, State> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      groupToAdd: ""
-    };
-  }
-
-  render() {
-    const { t, disabled } = this.props;
-    return (
-      <div className="field">
-        <InputField
-          label={t("admin-settings.add-group-textfield")}
-          errorMessage={t("admin-settings.add-group-error")}
-          onChange={this.handleAddGroupChange}
-          validationError={false}
-          value={this.state.groupToAdd}
-          onReturnPressed={this.appendGroup}
-          disabled={disabled}
-        />
-        <AddButton
-          label={t("admin-settings.add-group-button")}
-          action={this.addButtonClicked}
-          disabled={disabled}
-        />
-      </div>
-    );
-  }
-
-  addButtonClicked = (event: Event) => {
-    event.preventDefault();
-    this.appendGroup();
-  };
-
-  appendGroup = () => {
-    const { groupToAdd } = this.state;
-    this.props.addGroup(groupToAdd);
-    this.setState({ ...this.state, groupToAdd: "" });
-  };
-
-  handleAddGroupChange = (groupname: string) => {
-    this.setState({
-      ...this.state,
-      groupToAdd: groupname
-    });
-  };
-}
-
-export default translate("config")(AddAdminGroupField);
diff --git a/scm-ui/src/config/components/fields/AddAdminUserField.js b/scm-ui/src/config/components/fields/AddAdminUserField.js
deleted file mode 100644
index 025ed6cb4d..0000000000
--- a/scm-ui/src/config/components/fields/AddAdminUserField.js
+++ /dev/null
@@ -1,73 +0,0 @@
-//@flow
-import React from "react";
-
-import { translate } from "react-i18next";
-import { AddButton } from "../../../components/buttons";
-import InputField from "../../../components/forms/InputField";
-
-type Props = {
-  t: string => string,
-  addUser: string => void,
-  disabled: boolean
-};
-
-type State = {
-  userToAdd: string
-  //validationError: boolean
-};
-
-class AddAdminUserField extends React.Component<Props, State> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      userToAdd: ""
-      //validationError: false
-    };
-  }
-
-  render() {
-    const { t, disabled } = this.props;
-    return (
-      <div className="field">
-        <InputField
-          label={t("admin-settings.add-user-textfield")}
-          errorMessage={t("admin-settings.add-user-error")}
-          onChange={this.handleAddUserChange}
-          validationError={false}
-          value={this.state.userToAdd}
-          onReturnPressed={this.appendUser}
-          disabled={disabled}
-        />
-        <AddButton
-          label={t("admin-settings.add-user-button")}
-          action={this.addButtonClicked}
-          disabled={disabled}
-          //disabled={!isMemberNameValid(this.state.memberToAdd)}
-        />
-      </div>
-    );
-  }
-
-  addButtonClicked = (event: Event) => {
-    event.preventDefault();
-    this.appendUser();
-  };
-
-  appendUser = () => {
-    const { userToAdd } = this.state;
-    //if (isMemberNameValid(memberToAdd)) {
-    this.props.addUser(userToAdd);
-    this.setState({ ...this.state, userToAdd: "" });
-    // }
-  };
-
-  handleAddUserChange = (username: string) => {
-    this.setState({
-      ...this.state,
-      userToAdd: username
-      //validationError: membername.length > 0 && !isMemberNameValid(membername)
-    });
-  };
-}
-
-export default translate("config")(AddAdminUserField);
diff --git a/scm-ui/src/config/components/fields/AddProxyExcludeField.js b/scm-ui/src/config/components/fields/AddProxyExcludeField.js
deleted file mode 100644
index bb7e005b02..0000000000
--- a/scm-ui/src/config/components/fields/AddProxyExcludeField.js
+++ /dev/null
@@ -1,73 +0,0 @@
-//@flow
-import React from "react";
-
-import { translate } from "react-i18next";
-import { AddButton } from "../../../components/buttons";
-import InputField from "../../../components/forms/InputField";
-
-type Props = {
-  t: string => string,
-  addProxyExclude: string => void,
-  disabled: boolean
-};
-
-type State = {
-  proxyExcludeToAdd: string
-  //validationError: boolean
-};
-
-class AddProxyExcludeField extends React.Component<Props, State> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      proxyExcludeToAdd: ""
-      //validationError: false
-    };
-  }
-
-  render() {
-    const { t } = this.props;
-    return (
-      <div className="field">
-        <InputField
-          label={t("proxy-settings.add-proxy-exclude-textfield")}
-          errorMessage={t("proxy-settings.add-proxy-exclude-error")}
-          onChange={this.handleAddProxyExcludeChange}
-          validationError={false}
-          value={this.state.proxyExcludeToAdd}
-          onReturnPressed={this.appendProxyExclude}
-          disabled={this.props.disabled}
-        />
-        <AddButton
-          label={t("proxy-settings.add-proxy-exclude-button")}
-          action={this.addButtonClicked}
-          disabled={this.props.disabled}
-          //disabled={!isMemberNameValid(this.state.memberToAdd)}
-        />
-      </div>
-    );
-  }
-
-  addButtonClicked = (event: Event) => {
-    event.preventDefault();
-    this.appendProxyExclude();
-  };
-
-  appendProxyExclude = () => {
-    const { proxyExcludeToAdd } = this.state;
-    //if (isMemberNameValid(memberToAdd)) {
-    this.props.addProxyExclude(proxyExcludeToAdd);
-    this.setState({ ...this.state, proxyExcludeToAdd: "" });
-    // }
-  };
-
-  handleAddProxyExcludeChange = (username: string) => {
-    this.setState({
-      ...this.state,
-      proxyExcludeToAdd: username
-      //validationError: membername.length > 0 && !isMemberNameValid(membername)
-    });
-  };
-}
-
-export default translate("config")(AddProxyExcludeField);
diff --git a/scm-ui/src/config/components/form/AdminSettings.js b/scm-ui/src/config/components/form/AdminSettings.js
index b7a39f234c..ea1a88fe6f 100644
--- a/scm-ui/src/config/components/form/AdminSettings.js
+++ b/scm-ui/src/config/components/form/AdminSettings.js
@@ -4,8 +4,7 @@ import { translate } from "react-i18next";
 import Subtitle from "../../../components/layout/Subtitle";
 import AdminGroupTable from "../table/AdminGroupTable";
 import AdminUserTable from "../table/AdminUserTable";
-import AddAdminGroupField from "../fields/AddAdminGroupField";
-import AddAdminUserField from "../fields/AddAdminUserField";
+import AddEntryToTableField from "../../../components/forms/AddEntryToTableField";
 
 type Props = {
   adminGroups: string[],
@@ -29,8 +28,14 @@ class AdminSettings extends React.Component<Props> {
           }
           disabled={!hasUpdatePermission}
         />
-        <AddAdminGroupField addGroup={this.addGroup} disabled={!hasUpdatePermission}
+        <AddEntryToTableField
+          addEntry={this.addGroup}
+          disabled={!hasUpdatePermission}
+          buttonLabel={t("admin-settings.add-group-button")}
+          fieldLabel={t("admin-settings.add-group-textfield")}
+          errorMessage={t("admin-settings.add-group-error")}
         />
+
         <AdminUserTable
           adminUsers={adminUsers}
           onChange={(isValid, changedValue, name) =>
@@ -38,7 +43,12 @@ class AdminSettings extends React.Component<Props> {
           }
           disabled={!hasUpdatePermission}
         />
-        <AddAdminUserField addUser={this.addUser} disabled={!hasUpdatePermission}
+        <AddEntryToTableField
+          addEntry={this.addUser}
+          disabled={!hasUpdatePermission}
+          buttonLabel={t("admin-settings.add-user-button")}
+          fieldLabel={t("admin-settings.add-user-textfield")}
+          errorMessage={t("admin-settings.add-user-error")}
         />
       </div>
     );
diff --git a/scm-ui/src/config/components/form/ProxySettings.js b/scm-ui/src/config/components/form/ProxySettings.js
index eb434513fe..a1d513f9b1 100644
--- a/scm-ui/src/config/components/form/ProxySettings.js
+++ b/scm-ui/src/config/components/form/ProxySettings.js
@@ -4,7 +4,7 @@ import { translate } from "react-i18next";
 import { Checkbox, InputField } from "../../../components/forms/index";
 import Subtitle from "../../../components/layout/Subtitle";
 import ProxyExcludesTable from "../table/ProxyExcludesTable";
-import AddProxyExcludeField from "../fields/AddProxyExcludeField";
+import AddEntryToTableField from "../../../components/forms/AddEntryToTableField";
 
 type Props = {
   proxyPassword: string,
@@ -65,6 +65,7 @@ class ProxySettings extends React.Component<Props> {
           onChange={this.handleProxyUserChange}
           disabled={!enableProxy || !hasUpdatePermission}
         />
+
         <ProxyExcludesTable
           proxyExcludes={proxyExcludes}
           onChange={(isValid, changedValue, name) =>
@@ -72,9 +73,12 @@ class ProxySettings extends React.Component<Props> {
           }
           disabled={!enableProxy || !hasUpdatePermission}
         />
-        <AddProxyExcludeField
-          addProxyExclude={this.addProxyExclude}
+        <AddEntryToTableField
+          addEntry={this.addProxyExclude}
           disabled={!enableProxy || !hasUpdatePermission}
+          buttonLabel={t("proxy-settings.add-proxy-exclude-button")}
+          fieldLabel={t("proxy-settings.add-proxy-exclude-textfield")}
+          errorMessage={t("proxy-settings.add-proxy-exclude-error")}
         />
       </div>
     );
diff --git a/scm-ui/src/groups/components/AddMemberField.js b/scm-ui/src/groups/components/AddMemberField.js
deleted file mode 100644
index 6237e88291..0000000000
--- a/scm-ui/src/groups/components/AddMemberField.js
+++ /dev/null
@@ -1,71 +0,0 @@
-//@flow
-import React from "react";
-
-import { translate } from "react-i18next";
-import { AddButton } from "../../components/buttons";
-import InputField from "../../components/forms/InputField";
-import { isMemberNameValid } from "./groupValidation";
-
-type Props = {
-  t: string => string,
-  addMember: string => void
-};
-
-type State = {
-  memberToAdd: string,
-  validationError: boolean
-};
-
-class AddMemberField extends React.Component<Props, State> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      memberToAdd: "",
-      validationError: false
-    };
-  }
-
-  render() {
-    const { t } = this.props;
-    return (
-      <div className="field">
-        <InputField
-          label={t("add-member-textfield.label")}
-          errorMessage={t("add-member-textfield.error")}
-          onChange={this.handleAddMemberChange}
-          validationError={this.state.validationError}
-          value={this.state.memberToAdd}
-          onReturnPressed={this.appendMember}
-        />
-        <AddButton
-          label={t("add-member-button.label")}
-          action={this.addButtonClicked}
-          disabled={!isMemberNameValid(this.state.memberToAdd)}
-        />
-      </div>
-    );
-  }
-
-  addButtonClicked = (event: Event) => {
-    event.preventDefault();
-    this.appendMember();
-  };
-
-  appendMember = () => {
-    const { memberToAdd } = this.state;
-    if (isMemberNameValid(memberToAdd)) {
-      this.props.addMember(memberToAdd);
-      this.setState({ ...this.state, memberToAdd: "" });
-    }
-  };
-
-  handleAddMemberChange = (membername: string) => {
-    this.setState({
-      ...this.state,
-      memberToAdd: membername,
-      validationError: membername.length > 0 && !isMemberNameValid(membername)
-    });
-  };
-}
-
-export default translate("groups")(AddMemberField);
diff --git a/scm-ui/src/groups/components/GroupForm.js b/scm-ui/src/groups/components/GroupForm.js
index 2e941ea7eb..a989bdc1c5 100644
--- a/scm-ui/src/groups/components/GroupForm.js
+++ b/scm-ui/src/groups/components/GroupForm.js
@@ -6,9 +6,9 @@ import { SubmitButton } from "../../components/buttons";
 import { translate } from "react-i18next";
 import type { Group } from "../types/Group";
 import * as validator from "./groupValidation";
-import AddMemberField from "./AddMemberField";
 import MemberNameTable from "./MemberNameTable";
 import Textarea from "../../components/forms/Textarea";
+import AddEntryToTableField from "../../components/forms/AddEntryToTableField";
 
 type Props = {
   t: string => string,
@@ -96,7 +96,13 @@ class GroupForm extends React.Component<Props, State> {
           members={this.state.group.members}
           memberListChanged={this.memberListChanged}
         />
-        <AddMemberField addMember={this.addMember} />
+        <AddEntryToTableField
+          addEntry={this.addMember}
+          disabled={false}
+          buttonLabel={t("add-member-button.label")}
+          fieldLabel={t("add-member-textfield.label")}
+          errorMessage={t("add-member-textfield.error")}
+        />
         <SubmitButton
           disabled={!this.isValid()}
           label={t("group-form.submit")}