reduce minimum app size

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

@@ -1,8 +1,9 @@
 //@flow
 import React from "react";
 import injectSheet from "react-jss";
-import Tooltip from './Tooltip';
-import HelpIcon from './HelpIcon';
+import classNames from "classnames";
+import Tooltip from "./Tooltip";
+import HelpIcon from "./HelpIcon";
 
 const styles = {
   tooltip: {
@@ -14,21 +15,22 @@ const styles = {
 
 type Props = {
   message: string,
+  className?: string,
   classes: any
-}
+};
 
 class Help extends React.Component<Props> {
-
   render() {
-    const { message, classes } = this.props;
+    const { message, className, classes } = this.props;
     return (
-      <Tooltip className={classes.tooltip} message={message}>
+      <Tooltip
+        className={classNames(classes.tooltip, className)}
+        message={message}
+      >
         <HelpIcon />
       </Tooltip>
     );
   }
-
 }
 
 export default injectSheet(styles)(Help);
-

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

@@ -8,7 +8,8 @@ type Props = {
   icon?: string,
   label: string,
   title?: string,
-  onClick?: () => void
+  onClick?: () => void,
+  onRemove?: () => void
 };
 
 class Tag extends React.Component<Props> {
@@ -17,25 +18,41 @@ class Tag extends React.Component<Props> {
   };
 
   render() {
-    const { className, color, icon, label, title, onClick } = this.props;
+    const {
+      className,
+      color,
+      icon,
+      label,
+      title,
+      onClick,
+      onRemove
+    } = this.props;
     let showIcon = null;
     if (icon) {
       showIcon = (
         <>
-          <i className={classNames("fas", `fa-${icon}`)} />&nbsp;
+          <i className={classNames("fas", `fa-${icon}`)} />
+          &nbsp;
         </>
       );
     }
+    let showDelete = null;
+    if (onRemove) {
+      showDelete = <a className="tag is-delete" onClick={onRemove} />;
+    }
 
     return (
-      <span
-        className={classNames("tag", `is-${color}`, className)}
-        title={title}
-        onClick={onClick}
-      >
-        {showIcon}
-        {label}
-      </span>
+      <>
+        <span
+          className={classNames("tag", `is-${color}`, className)}
+          title={title}
+          onClick={onClick}
+        >
+          {showIcon}
+          {label}
+        </span>
+        {showDelete}
+      </>
     );
   }
 }

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

@@ -0,0 +1,65 @@
+//@flow
+import * as React from "react";
+import injectSheet from "react-jss";
+import { Help, Tag } from "./index";
+
+type Props = {
+  items: string[],
+  label: string,
+  helpText?: string,
+  onRemove: (string[]) => 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 => {
+          return (
+            <div className="control">
+              <div className="tags has-addons">
+                <Tag
+                  color="info"
+                  label={item}
+                  onRemove={this.removeEntry}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  removeEntry = (item: string) => {
+    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/MemberNameTable.js

@@ -2,44 +2,30 @@
 import React from "react";
 import { translate } from "react-i18next";
 import RemoveEntryOfTableButton from "../buttons/RemoveEntryOfTableButton";
+import TagGroup from "../TagGroup";
 
 type Props = {
   members: string[],
-  t: string => string,
-  memberListChanged: (string[]) => void
+  memberListChanged: (string[]) => void,
+  t: string => string
 };
 
-type State = {};
-
-class MemberNameTable extends React.Component<Props, State> {
+class MemberNameTable extends React.Component<Props> {
   render() {
-    const { t } = this.props;
+    const { members, t } = this.props;
+
     return (
-      <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>
+      <TagGroup
+        items={members}
+        label={t("group.members")}
+        helpText={t("groupForm.help.memberHelpText")}
+        onRemove={() => this.removeEntry}
+      />
     );
   }
 
-  removeEntry = (membername: string) => {
-    const newMembers = this.props.members.filter(name => name !== membername);
-    this.props.memberListChanged(newMembers);
+  removeEntry = (member: string[]) => {
+    this.props.memberListChanged(member);
   };
 }
 

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

@@ -24,6 +24,7 @@ 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";