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

@@ -1,13 +1,14 @@
 //@flow
 import * as React from "react";
 import injectSheet from "react-jss";
-import { Help, Tag } from "./index";
+import type { DisplayedUser } from "@scm-manager/ui-types";
+import { Help, Tag } from "../index";
 
 type Props = {
-  items: string[],
+  items: DisplayedUser[],
   label: string,
   helpText?: string,
-  onRemove: (string[]) => void,
+  onRemove: (DisplayedUser[]) => void,
 
   // context props
   classes: Object
@@ -45,7 +46,7 @@ class TagGroup extends React.Component<Props> {
               <div className="tags has-addons">
                 <Tag
                   color="info is-outlined"
-                  label={item}
+                  label={item.displayName}
                   onRemove={() => this.removeEntry(item)}
                 />
               </div>
@@ -56,7 +57,7 @@ class TagGroup extends React.Component<Props> {
     );
   }
 
-  removeEntry = (item: string) => {
+  removeEntry = item => {
     const newItems = this.props.items.filter(name => name !== item);
     this.props.onRemove(newItems);
   };

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";

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

@@ -24,7 +24,6 @@ export { default as ProtectedRoute } from "./ProtectedRoute.js";
 export { default as Help } from "./Help";
 export { default as HelpIcon } from "./HelpIcon";
 export { default as Tag } from "./Tag";
-export { default as TagGroup } from "./TagGroup";
 export { default as Tooltip } from "./Tooltip";
 // TODO do we need this? getPageFromMatch is already exported by urls
 export { getPageFromMatch } from "./urls";