From 2f69d82734a5fbb92cfb9c61041c355a48bae967 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Tue, 2 Oct 2018 13:34:04 +0200
Subject: [PATCH] refactoring

---
 .../ui-components/src/LabelWithHelpIcon.js    | 54 +++++++++++++++++++
 .../ui-components/src/forms/InputField.js     | 36 +++----------
 .../ui-components/src/forms/Select.js         | 32 +++--------
 .../ui-components/src/forms/Textarea.js       | 34 +++---------
 .../packages/ui-components/src/index.js       |  1 +
 .../config/components/form/AdminSettings.js   |  2 -
 .../components/table/AdminGroupTable.js       |  1 +
 .../config/components/table/AdminUserTable.js |  1 +
 .../components/table/ArrayConfigTable.js      |  9 ++--
 scm-ui/src/groups/components/GroupForm.js     |  1 -
 .../src/groups/components/MemberNameTable.js  | 10 +++-
 11 files changed, 90 insertions(+), 91 deletions(-)
 create mode 100644 scm-ui-components/packages/ui-components/src/LabelWithHelpIcon.js

diff --git a/scm-ui-components/packages/ui-components/src/LabelWithHelpIcon.js b/scm-ui-components/packages/ui-components/src/LabelWithHelpIcon.js
new file mode 100644
index 0000000000..f83f57b519
--- /dev/null
+++ b/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;
diff --git a/scm-ui-components/packages/ui-components/src/forms/InputField.js b/scm-ui-components/packages/ui-components/src/forms/InputField.js
index 83d79ce43b..4d9208d41f 100644
--- a/scm-ui-components/packages/ui-components/src/forms/InputField.js
+++ b/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">
-            <div className="control">
-              {this.renderLabel()}
-            </div>
-            {this.renderHelp()}
-          </div>
+          <LabelWithHelpIcon
+            label={label}
+            helpText={helpText}
+          />
           <div className="control">
             <input
               ref={input => {
diff --git a/scm-ui-components/packages/ui-components/src/forms/Select.js b/scm-ui-components/packages/ui-components/src/forms/Select.js
index ad8077d5bf..902d9c36dd 100644
--- a/scm-ui-components/packages/ui-components/src/forms/Select.js
+++ b/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()}
-        <div className="field is-grouped">
+        <LabelWithHelpIcon
+          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>
     );
   }
diff --git a/scm-ui-components/packages/ui-components/src/forms/Textarea.js b/scm-ui-components/packages/ui-components/src/forms/Textarea.js
index 2239581f0e..f1bb773813 100644
--- a/scm-ui-components/packages/ui-components/src/forms/Textarea.js
+++ b/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">
-          <div className="control">
-            {this.renderLabel()}
-          </div>
-          {this.renderHelp()}
-        </div>
+        <LabelWithHelpIcon
+          label={label}
+          helpText={helpText}
+        />
         <div className="control">
           <textarea
             className="textarea"
diff --git a/scm-ui-components/packages/ui-components/src/index.js b/scm-ui-components/packages/ui-components/src/index.js
index 1f4c07d340..e2992ee0d6 100644
--- a/scm-ui-components/packages/ui-components/src/index.js
+++ b/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";
diff --git a/scm-ui/src/config/components/form/AdminSettings.js b/scm-ui/src/config/components/form/AdminSettings.js
index c10ab30120..0395ff294f 100644
--- a/scm-ui/src/config/components/form/AdminSettings.js
+++ b/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>
     );
diff --git a/scm-ui/src/config/components/table/AdminGroupTable.js b/scm-ui/src/config/components/table/AdminGroupTable.js
index db9f83af84..c07abd3f3a 100644
--- a/scm-ui/src/config/components/table/AdminGroupTable.js
+++ b/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")}
       />
     );
   }
diff --git a/scm-ui/src/config/components/table/AdminUserTable.js b/scm-ui/src/config/components/table/AdminUserTable.js
index d1f35e8424..a077a6d5d2 100644
--- a/scm-ui/src/config/components/table/AdminUserTable.js
+++ b/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")}
       />
     );
   }
diff --git a/scm-ui/src/config/components/table/ArrayConfigTable.js b/scm-ui/src/config/components/table/ArrayConfigTable.js
index d724caa6ae..21d53261f4 100644
--- a/scm-ui/src/config/components/table/ArrayConfigTable.js
+++ b/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 => {
diff --git a/scm-ui/src/groups/components/GroupForm.js b/scm-ui/src/groups/components/GroupForm.js
index 6638bbd419..4958fbf0fa 100644
--- a/scm-ui/src/groups/components/GroupForm.js
+++ b/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()}
diff --git a/scm-ui/src/groups/components/MemberNameTable.js b/scm-ui/src/groups/components/MemberNameTable.js
index b28f4fa3ed..b5add04c4b 100644
--- a/scm-ui/src/groups/components/MemberNameTable.js
+++ b/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 => {