Move the MemberNameTable component to the scm-ui project to be used in combination with the Autocomplete component

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

@@ -3,6 +3,8 @@ import React from "react";
 import { translate } from "react-i18next";
 import {
   AutocompleteAddEntryToTableField,
+  LabelWithHelpIcon,
+  MemberNameTable,
   InputField,
   SubmitButton,
   Textarea
@@ -10,7 +12,6 @@ import {
 import type { Group, SelectValue } from "@scm-manager/ui-types";
 
 import * as validator from "./groupValidation";
-import MemberNameTable from "./MemberNameTable";
 
 type Props = {
   t: string => string,
@@ -97,6 +98,10 @@ class GroupForm extends React.Component<Props, State> {
           validationError={false}
           helpText={t("group-form.help.descriptionHelpText")}
         />
+        <LabelWithHelpIcon
+          label={t("group.members")}
+          helpText={t("group-form.help.memberHelpText")}
+        />
         <MemberNameTable
           members={group.members}
           memberListChanged={this.memberListChanged}

scm-ui/src/groups/components/MemberNameTable.js

@@ -1,55 +0,0 @@
-//@flow
-import React from "react";
-import { translate } from "react-i18next";
-import {
-  RemoveEntryOfTableButton,
-  LabelWithHelpIcon
-} from "@scm-manager/ui-components";
-
-type Props = {
-  members: string[],
-  t: string => string,
-  memberListChanged: (string[]) => void
-};
-
-type State = {};
-
-class MemberNameTable extends React.Component<Props, State> {
-  render() {
-    const { t } = this.props;
-    return (
-      <div>
-        <LabelWithHelpIcon
-          label={t("group.members")}
-          helpText={t("group-form.help.memberHelpText")}
-        />
-        <table className="table is-hoverable is-fullwidth">
-          <tbody>
-            {this.props.members.map(member => {
-              return (
-                <tr key={member}>
-                  <td key={member}>{member}</td>
-                  <td>
-                    <RemoveEntryOfTableButton
-                      entryname={member}
-                      removeEntry={this.removeEntry}
-                      disabled={false}
-                      label={t("remove-member-button.label")}
-                    />
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-
-  removeEntry = (membername: string) => {
-    const newMembers = this.props.members.filter(name => name !== membername);
-    this.props.memberListChanged(newMembers);
-  };
-}
-
-export default translate("groups")(MemberNameTable);