Merged in feature/ui-helpForFields (pull request #85)

Feature/ui helpForFields

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

@@ -23,12 +23,14 @@ class BaseUrlSettings extends React.Component<Props> {
           label={t("base-url-settings.force-base-url")}
           onChange={this.handleForceBaseUrlChange}
           disabled={!hasUpdatePermission}
+          helpText={t("help.forceBaseUrlHelpText")}
         />
         <InputField
           label={t("base-url-settings.base-url")}
           onChange={this.handleBaseUrlChange}
           value={baseUrl}
           disabled={!hasUpdatePermission}
+          helpText={t("help.baseUrlHelpText")}
         />
       </div>
     );

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

@@ -41,54 +41,63 @@ class GeneralSettings extends React.Component<Props> {
           onChange={this.handleRealmDescriptionChange}
           value={realmDescription}
           disabled={!hasUpdatePermission}
+          helpText={t("help.realmDescriptionHelpText")}
         />
         <InputField
           label={t("general-settings.date-format")}
           onChange={this.handleDateFormatChange}
           value={dateFormat}
           disabled={!hasUpdatePermission}
+          helpText={t("help.dateFormatHelpText")}
         />
         <InputField
           label={t("general-settings.plugin-url")}
           onChange={this.handlePluginUrlChange}
           value={pluginUrl}
           disabled={!hasUpdatePermission}
+          helpText={t("help.pluginRepositoryHelpText")}
         />
         <InputField
           label={t("general-settings.default-namespace-strategy")}
           onChange={this.handleDefaultNamespaceStrategyChange}
           value={defaultNamespaceStrategy}
           disabled={!hasUpdatePermission}
+          helpText={t("help.defaultNameSpaceStrategyHelpText")}
         />
         <Checkbox
           checked={enabledXsrfProtection}
           label={t("general-settings.enabled-xsrf-protection")}
           onChange={this.handleEnabledXsrfProtectionChange}
           disabled={!hasUpdatePermission}
+          helpText={t("help.enableXsrfProtectionHelpText")}
         />
         <Checkbox
           checked={enableRepositoryArchive}
           label={t("general-settings.enable-repository-archive")}
           onChange={this.handleEnableRepositoryArchiveChange}
           disabled={!hasUpdatePermission}
+          helpText={t("help.enableRepositoryArchiveHelpText")}
         />
         <Checkbox
           checked={disableGroupingGrid}
           label={t("general-settings.disable-grouping-grid")}
           onChange={this.handleDisableGroupingGridChange}
           disabled={!hasUpdatePermission}
+          helpText={t("help.disableGroupingGridHelpText")}
         />
         <Checkbox
           checked={anonymousAccessEnabled}
           label={t("general-settings.anonymous-access-enabled")}
           onChange={this.handleAnonymousAccessEnabledChange}
           disabled={!hasUpdatePermission}
+          helpText={t("help.allowAnonymousAccessHelpText")}
         />
         <Checkbox
           checked={skipFailedAuthenticators}
           label={t("general-settings.skip-failed-authenticators")}
           onChange={this.handleSkipFailedAuthenticatorsChange}
           disabled={!hasUpdatePermission}
+          helpText={t("help.skipFailedAuthenticatorsHelpText")}
         />
       </div>
     );

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

@@ -47,6 +47,7 @@ class LoginAttempt extends React.Component<Props, State> {
           disabled={!hasUpdatePermission}
           validationError={this.state.loginAttemptLimitError}
           errorMessage={t("validation.login-attempt-limit-invalid")}
+          helpText={t("help.loginAttemptLimitHelpText")}
         />
         <InputField
           label={t("login-attempt.login-attempt-limit-timeout")}
@@ -55,6 +56,7 @@ class LoginAttempt extends React.Component<Props, State> {
           disabled={!hasUpdatePermission}
           validationError={this.state.loginAttemptLimitTimeoutError}
           errorMessage={t("validation.login-attempt-limit-timeout-invalid")}
+          helpText={t("help.loginAttemptLimitTimeoutHelpText")}
         />
       </div>
     );

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

@@ -42,6 +42,7 @@ class ProxySettings extends React.Component<Props> {
           label={t("proxy-settings.enable-proxy")}
           onChange={this.handleEnableProxyChange}
           disabled={!hasUpdatePermission}
+          helpText={t("help.enableProxyHelpText")}
         />
         <InputField
           label={t("proxy-settings.proxy-password")}
@@ -49,24 +50,28 @@ class ProxySettings extends React.Component<Props> {
           value={proxyPassword}
           type="password"
           disabled={!enableProxy || !hasUpdatePermission}
+          helpText={t("help.proxyPasswordHelpText")}
         />
         <InputField
           label={t("proxy-settings.proxy-port")}
           value={proxyPort}
           onChange={this.handleProxyPortChange}
           disabled={!enableProxy || !hasUpdatePermission}
+          helpText={t("help.proxyPortHelpText")}
         />
         <InputField
           label={t("proxy-settings.proxy-server")}
           value={proxyServer}
           onChange={this.handleProxyServerChange}
           disabled={!enableProxy || !hasUpdatePermission}
+          helpText={t("help.proxyServerHelpText")}
         />
         <InputField
           label={t("proxy-settings.proxy-user")}
           value={proxyUser}
           onChange={this.handleProxyUserChange}
           disabled={!enableProxy || !hasUpdatePermission}
+          helpText={t("help.proxyUserHelpText")}
         />
         <ProxyExcludesTable
           proxyExcludes={proxyExcludes}

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/config/components/table/ProxyExcludesTable.js

@@ -22,6 +22,7 @@ class ProxyExcludesTable extends React.Component<Props, State> {
         removeLabel={t("proxy-settings.remove-proxy-exclude-button")}
         onRemove={this.removeEntry}
         disabled={disabled}
+        helpText={t("help.proxyExcludesHelpText")}
       />
     );
   }

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

@@ -80,6 +80,7 @@ class GroupForm extends React.Component<Props, State> {
           onChange={this.handleGroupNameChange}
           value={group.name}
           validationError={this.state.nameValidationError}
+          helpText={t("group-form.help.nameHelpText")}
         />
       );
     }
@@ -93,6 +94,7 @@ class GroupForm extends React.Component<Props, State> {
           onChange={this.handleDescriptionChange}
           value={group.description}
           validationError={false}
+          helpText={t("group-form.help.descriptionHelpText")}
         />
         <MemberNameTable
           members={this.state.group.members}

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.memberHelpText")}
+        />
         <table className="table is-hoverable is-fullwidth">
           <tbody>
             {this.props.members.map(member => {

scm-ui/src/repos/components/form/RepositoryForm.js

@@ -90,12 +90,14 @@ class RepositoryForm extends React.Component<Props, State> {
           value={repository ? repository.contact : ""}
           validationError={this.state.contactValidationError}
           errorMessage={t("validation.contact-invalid")}
+          helpText={t("help.contactHelpText")}
         />
 
         <Textarea
           label={t("repository.description")}
           onChange={this.handleDescriptionChange}
           value={repository ? repository.description : ""}
+          helpText={t("help.descriptionHelpText")}
         />
         <SubmitButton
           disabled={!this.isValid()}
@@ -129,12 +131,14 @@ class RepositoryForm extends React.Component<Props, State> {
           value={repository ? repository.name : ""}
           validationError={this.state.nameValidationError}
           errorMessage={t("validation.name-invalid")}
+          helpText={t("help.nameHelpText")}
         />
         <Select
           label={t("repository.type")}
           onChange={this.handleTypeChange}
           value={repository ? repository.type : ""}
           options={this.createSelectOptions(repositoryTypes)}
+          helpText={t("help.typeHelpText")}
         />
       </div>
     );

scm-ui/src/users/components/UserForm.js

@@ -97,6 +97,7 @@ class UserForm extends React.Component<Props, State> {
           value={user ? user.name : ""}
           validationError={this.state.nameValidationError}
           errorMessage={t("validation.name-invalid")}
+          helpText={t("help.usernameHelpText")}
         />
       );
     }
@@ -109,6 +110,7 @@ class UserForm extends React.Component<Props, State> {
           value={user ? user.displayName : ""}
           validationError={this.state.displayNameValidationError}
           errorMessage={t("validation.displayname-invalid")}
+          helpText={t("help.displayNameHelpText")}
         />
         <InputField
           label={t("user.mail")}
@@ -116,6 +118,7 @@ class UserForm extends React.Component<Props, State> {
           value={user ? user.mail : ""}
           validationError={this.state.mailValidationError}
           errorMessage={t("validation.mail-invalid")}
+          helpText={t("help.mailHelpText")}
         />
         <InputField
           label={t("user.password")}
@@ -124,6 +127,7 @@ class UserForm extends React.Component<Props, State> {
           value={user ? user.password : ""}
           validationError={this.state.validatePasswordError}
           errorMessage={t("validation.password-invalid")}
+          helpText={t("help.passwordHelpText")}
         />
         <InputField
           label={t("validation.validatePassword")}
@@ -132,16 +136,19 @@ class UserForm extends React.Component<Props, State> {
           value={this.state ? this.state.validatePassword : ""}
           validationError={this.state.passwordValidationError}
           errorMessage={t("validation.passwordValidation-invalid")}
+          helpText={t("help.passwordConfirmHelpText")}
         />
         <Checkbox
           label={t("user.admin")}
           onChange={this.handleAdminChange}
           checked={user ? user.admin : false}
+          helpText={t("help.adminHelpText")}
         />
         <Checkbox
           label={t("user.active")}
           onChange={this.handleActiveChange}
           checked={user ? user.active : false}
+          helpText={t("help.activeHelpText")}
         />
         <SubmitButton
           disabled={!this.isValid()}