add displayName functionality to reuse component in scm-review-plugin.

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

@@ -1,7 +1,8 @@
 //@flow
 import React from "react";
 import { translate } from "react-i18next";
-import TagGroup from "../TagGroup";
+import type { DisplayedUser } from "@scm-manager/ui-types";
+import TagGroup from "./TagGroup";
 
 type Props = {
   members: string[],
@@ -12,10 +13,12 @@ type Props = {
 class MemberNameTagGroup extends React.Component<Props> {
   render() {
     const { members, t } = this.props;
-
+    const membersExtended = members.map(id => {
+      return { id, displayName: id, mail: "" };
+    });
     return (
       <TagGroup
-        items={members}
+        items={membersExtended}
         label={t("group.members")}
         helpText={t("groupForm.help.memberHelpText")}
         onRemove={this.removeEntry}
@@ -23,8 +26,11 @@ class MemberNameTagGroup extends React.Component<Props> {
     );
   }
 
-  removeEntry = (member: string[]) => {
-    this.props.memberListChanged(member);
+  removeEntry = (membersExtended: DisplayedUser[]) => {
+    const members = membersExtended.map(function(item) {
+      return item["id"];
+    });
+    this.props.memberListChanged(members);
   };
 }
 

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

@@ -0,0 +1,66 @@
+//@flow
+import * as React from "react";
+import injectSheet from "react-jss";
+import type { DisplayedUser } from "@scm-manager/ui-types";
+import { Help, Tag } from "../index";
+
+type Props = {
+  items: DisplayedUser[],
+  label: string,
+  helpText?: string,
+  onRemove: (DisplayedUser[]) => void,
+
+  // context props
+  classes: Object
+};
+
+const styles = {
+  help: {
+    position: "relative"
+  }
+};
+
+class TagGroup extends React.Component<Props> {
+  render() {
+    const { items, label, helpText, classes } = this.props;
+    let help = null;
+    if (helpText) {
+      help = <Help className={classes.help} message={helpText} />;
+    }
+    return (
+      <div className="field is-grouped is-grouped-multiline">
+        {label && items ? (
+          <div className="control">
+            <strong>
+              {label}
+              {help}
+              {items.length > 0 ? ":" : ""}
+            </strong>
+          </div>
+        ) : (
+          ""
+        )}
+        {items.map((item, key) => {
+          return (
+            <div className="control" key={key}>
+              <div className="tags has-addons">
+                <Tag
+                  color="info is-outlined"
+                  label={item.displayName}
+                  onRemove={() => this.removeEntry(item)}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  removeEntry = item => {
+    const newItems = this.props.items.filter(name => name !== item);
+    this.props.onRemove(newItems);
+  };
+}
+
+export default injectSheet(styles)(TagGroup);

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

@@ -2,6 +2,7 @@
 
 export { default as AddEntryToTableField } from "./AddEntryToTableField.js";
 export { default as AutocompleteAddEntryToTableField } from "./AutocompleteAddEntryToTableField.js";
+export { default as TagGroup } from "./TagGroup.js";
 export { default as MemberNameTagGroup } from "./MemberNameTagGroup.js";
 export { default as Checkbox } from "./Checkbox.js";
 export { default as Radio } from "./Radio.js";