refactoring

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

@@ -0,0 +1,54 @@
+//@flow
+import React from "react";
+import {Help} from "./index";
+
+type Props = {
+  label: string,
+  helpText?: string
+};
+
+class LabelWithHelpIcon extends React.Component<Props> {
+
+  renderLabel = () => {
+    const label = this.props.label;
+    if (label) {
+      return <label className="label">{label}</label>;
+    }
+    return "";
+  };
+
+  renderHelp = () => {
+    const helpText = this.props.helpText;
+    if(helpText){
+      return (
+        <div className="control columns is-vcentered">
+          <Help message={helpText} />
+        </div>);
+    }
+    else
+      return null;
+  };
+
+  renderLabelWithHelpIcon = () => {
+    if(this.props.label){
+      return(
+        <div className="field is-grouped">
+        <div className="control">
+          {this.renderLabel()}
+        </div>
+        {this.renderHelp()}
+      </div>
+      )
+    }
+    else
+      return null;
+  };
+
+  render() {
+    return (
+      this.renderLabelWithHelpIcon()
+    );
+  }
+}
+
+export default LabelWithHelpIcon;

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

@@ -1,7 +1,7 @@
 //@flow
 import React from "react";
 import classNames from "classnames";
-import {Help, Page} from "../index";
+import {LabelWithHelpIcon} from "../index";
 
 type Props = {
   label?: string,
@@ -35,26 +35,6 @@ class InputField extends React.Component<Props> {
     this.props.onChange(event.target.value);
   };
 
-  renderLabel = () => {
-    const label = this.props.label;
-    if (label) {
-      return <label className="label">{label}</label>;
-    }
-    return "";
-  };
-
-  renderHelp = () => {
-    const helpText = this.props.helpText;
-    if(helpText){
-      return (
-        <div className="control columns is-vcentered">
-          <Help message={helpText} />
-        </div>);
-    }
-    else
-      return null;
-  };
-
   handleKeyPress = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
     const onReturnPressed = this.props.onReturnPressed;
     if (!onReturnPressed) {
@@ -73,7 +53,9 @@ class InputField extends React.Component<Props> {
       value,
       validationError,
       errorMessage,
-      disabled
+      disabled,
+      label,
+      helpText
     } = this.props;
     const errorView = validationError ? "is-danger" : "";
     const helper = validationError ? (
@@ -83,12 +65,10 @@ class InputField extends React.Component<Props> {
     );
     return (
         <div className="field">
-          <div className="field is-grouped">
+          <LabelWithHelpIcon
-            <div className="control">
+            label={label}
-              {this.renderLabel()}
+            helpText={helpText}
-            </div>
+          />
-            {this.renderHelp()}
-          </div>
           <div className="control">
             <input
               ref={input => {

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

@@ -1,6 +1,6 @@
 //@flow
 import React from "react";
-import {Help} from "../index";
+import {LabelWithHelpIcon} from "../index";
 
 export type SelectItem = {
   value: string,
@@ -30,33 +30,15 @@ class Select extends React.Component<Props> {
     this.props.onChange(event.target.value);
   };
 
-  renderLabel = () => {
-    const label = this.props.label;
-    if (label) {
-      return <label className="label">{label}</label>;
-    }
-    return "";
-  };
-
-  renderHelp = () => {
-    const helpText = this.props.helpText;
-    if(helpText){
-      return (
-        <div className="control columns is-vcentered">
-          <Help message={helpText} />
-        </div>);
-    }
-    else
-      return null;
-  };
-
   render() {
-    const { options, value } = this.props;
+    const { options, value, label, helpText } = this.props;
 
     return (
       <div className="field">
-        {this.renderLabel()}
+        <LabelWithHelpIcon
-        <div className="field is-grouped">
+          label={label}
+          helpText={helpText}
+        />
         <div className="control select">
           <select
             ref={input => {
@@ -74,8 +56,6 @@ class Select extends React.Component<Props> {
             })}
           </select>
         </div>
-          {this.renderHelp()}
-        </div>
       </div>
     );
   }

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

@@ -1,6 +1,6 @@
 //@flow
 import React from "react";
-import {Help} from "../index";
+import {LabelWithHelpIcon} from "../index";
 
 export type SelectItem = {
   value: string,
@@ -22,37 +22,15 @@ class Textarea extends React.Component<Props> {
     this.props.onChange(event.target.value);
   };
 
-  renderLabel = () => {
-    const label = this.props.label;
-    if (label) {
-      return <label className="label">{label}</label>;
-    }
-    return "";
-  };
-
-  renderHelp = () => {
-    const helpText = this.props.helpText;
-    if(helpText){
-      return (
-        <div className="control columns is-vcentered">
-          <Help message={helpText} />
-        </div>);
-    }
-    else
-      return null;
-  };
-
   render() {
-    const { placeholder, value } = this.props;
+    const { placeholder, value, label, helpText } = this.props;
 
     return (
       <div className="field">
-        <div className="field is-grouped">
+        <LabelWithHelpIcon
-          <div className="control">
+          label={label}
-            {this.renderLabel()}
+          helpText={helpText}
-          </div>
+        />
-          {this.renderHelp()}
-        </div>
         <div className="control">
           <textarea
             className="textarea"

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

@@ -17,6 +17,7 @@ export { default as Notification } from "./Notification.js";
 export { default as Paginator } from "./Paginator.js";
 export { default as ProtectedRoute } from "./ProtectedRoute.js";
 export { default as Help } from "./Help.js";
+export { default as LabelWithHelpIcon } from "./LabelWithHelpIcon.js";
 
 
 export { apiClient, NOT_FOUND_ERROR, UNAUTHORIZED_ERROR } from "./apiclient.js";

scm-ui/src/config/components/form/AdminSettings.js

@@ -33,7 +33,6 @@ class AdminSettings extends React.Component<Props> {
           buttonLabel={t("admin-settings.add-group-button")}
           fieldLabel={t("admin-settings.add-group-textfield")}
           errorMessage={t("admin-settings.add-group-error")}
-          helpText={t("help.adminGroupsHelpText")}
         />
         <AdminUserTable
           adminUsers={adminUsers}
@@ -48,7 +47,6 @@ class AdminSettings extends React.Component<Props> {
           buttonLabel={t("admin-settings.add-user-button")}
           fieldLabel={t("admin-settings.add-user-textfield")}
           errorMessage={t("admin-settings.add-user-error")}
-          helpText={t("help.adminUsersHelpText")}
         />
       </div>
     );

scm-ui/src/config/components/table/AdminGroupTable.js

@@ -24,6 +24,7 @@ class AdminGroupTable extends React.Component<Props, State> {
         removeLabel={t("admin-settings.remove-group-button")}
         onRemove={this.removeEntry}
         disabled={disabled}
+        helpText={t("help.adminGroupsHelpText")}
       />
     );
   }

scm-ui/src/config/components/table/AdminUserTable.js

@@ -22,6 +22,7 @@ class AdminUserTable extends React.Component<Props> {
         removeLabel={t("admin-settings.remove-user-button")}
         onRemove={this.removeEntry}
         disabled={disabled}
+        helpText={t("help.adminUsersHelpText")}
       />
     );
   }

scm-ui/src/config/components/table/ArrayConfigTable.js

@@ -1,21 +1,22 @@
 //@flow
 import React from "react";
-import { RemoveEntryOfTableButton } from "@scm-manager/ui-components";
+import { RemoveEntryOfTableButton, LabelWithHelpIcon } from "@scm-manager/ui-components";
 
 type Props = {
   items: string[],
   label: string,
   removeLabel: string,
   onRemove: (string[], string) => void,
-  disabled: boolean
+  disabled: boolean,
+  helpText: string
 };
 
 class ArrayConfigTable extends React.Component<Props> {
   render() {
-    const { label, disabled, removeLabel, items } = this.props;
+    const { label, disabled, removeLabel, items, helpText } = this.props;
     return (
       <div>
-        <label className="label">{label}</label>
+        <LabelWithHelpIcon label={label} helpText={helpText}/>
         <table className="table is-hoverable is-fullwidth">
           <tbody>
             {items.map(item => {

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

@@ -106,7 +106,6 @@ class GroupForm extends React.Component<Props, State> {
           buttonLabel={t("add-member-button.label")}
           fieldLabel={t("add-member-textfield.label")}
           errorMessage={t("add-member-textfield.error")}
-          helpText={t("group-form.help.membersHelpText")}
         />
         <SubmitButton
           disabled={!this.isValid()}

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

@@ -1,7 +1,10 @@
 //@flow
 import React from "react";
 import { translate } from "react-i18next";
-import { RemoveEntryOfTableButton } from "@scm-manager/ui-components";
+import {
+  RemoveEntryOfTableButton,
+  LabelWithHelpIcon
+} from "@scm-manager/ui-components";
 
 type Props = {
   members: string[],
@@ -16,7 +19,10 @@ class MemberNameTable extends React.Component<Props, State> {
     const { t } = this.props;
     return (
       <div>
-        <label className="label">{t("group.members")}</label>
+        <LabelWithHelpIcon
+          label={t("group.members")}
+          helpText={t("group-form.help.membersHelpText")}
+        />
         <table className="table is-hoverable is-fullwidth">
           <tbody>
             {this.props.members.map(member => {