Fixes #26094 - Add tooltip prop to CommonForm

webpack/assets/javascripts/react_app/components/PasswordStrength/__tests__/__snapshots__/PasswordStrength.test.js.snap

@@ -8,6 +8,7 @@ exports[`PasswordStrength component rendering renders password-strength 1`] = `
     inputClassName="col-md-4"
     label="Password"
     required={false}
+    tooltipHelp={null}
     touched={true}
   >
     <ReactPasswordStrength
@@ -47,6 +48,7 @@ exports[`PasswordStrength component rendering renders password-strength with pas
     inputClassName="col-md-4"
     label="Password"
     required={false}
+    tooltipHelp={null}
     touched={true}
   >
     <ReactPasswordStrength
@@ -81,6 +83,7 @@ exports[`PasswordStrength component rendering renders password-strength with pas
     inputClassName="col-md-4"
     label="Verify"
     required={false}
+    tooltipHelp={null}
     touched={true}
   >
     <input
@@ -102,6 +105,7 @@ exports[`PasswordStrength component rendering renders password-strength with unm
     inputClassName="col-md-4"
     label="Password"
     required={false}
+    tooltipHelp={null}
     touched={true}
   >
     <ReactPasswordStrength
@@ -136,6 +140,7 @@ exports[`PasswordStrength component rendering renders password-strength with unm
     inputClassName="col-md-4"
     label="Verify"
     required={false}
+    tooltipHelp={null}
     touched={true}
   >
     <input
@@ -157,6 +162,7 @@ exports[`PasswordStrength component rendering renders password-strength with use
     inputClassName="col-md-4"
     label="Password"
     required={false}
+    tooltipHelp={null}
     touched={true}
   >
     <ReactPasswordStrength

webpack/assets/javascripts/react_app/components/bookmarks/form/__snapshots__/form.test.js.snap

@@ -590,6 +590,7 @@ exports[`bookmark form should render the entire form 1`] = `
                             inputClassName="col-md-4"
                             label="Name"
                             required="true"
+                            tooltipHelp={null}
                             touched={false}
                           >
                             <div
@@ -977,6 +978,7 @@ exports[`bookmark form should render the entire form 1`] = `
                             inputClassName="col-md-8"
                             label="Query"
                             required="true"
+                            tooltipHelp={null}
                             touched={false}
                           >
                             <div
@@ -1333,6 +1335,7 @@ exports[`bookmark form should render the entire form 1`] = `
                             inputClassName="col-md-4"
                             label="Public"
                             required={false}
+                            tooltipHelp={null}
                             touched={false}
                           >
                             <div

webpack/assets/javascripts/react_app/components/common/forms/CommonForm.js

@@ -9,13 +9,15 @@ const CommonForm = ({
   required,
   children,
   inputClassName,
+  tooltipHelp,
 }) => (
   <div
     className={`form-group ${className} ${touched && error ? 'has-error' : ''}`}
   >
     <label className="col-md-2 control-label">
       {label}
       {required && ' *'}
+      {tooltipHelp}
     </label>
     <div className={inputClassName}>{children}</div>
     {touched && error && (
@@ -34,6 +36,7 @@ CommonForm.propTypes = {
   required: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   children: PropTypes.node,
   inputClassName: PropTypes.string,
+  tooltipHelp: PropTypes.node,
 };
 
 CommonForm.defaultProps = {
@@ -44,6 +47,7 @@ CommonForm.defaultProps = {
   required: false,
   children: null,
   inputClassName: 'col-md-4',
+  tooltipHelp: null,
 };
 
 export default CommonForm;

webpack/assets/javascripts/react_app/components/common/forms/CommonForm.test.js

@@ -1,6 +1,7 @@
 import toJson from 'enzyme-to-json';
 import { shallow } from 'enzyme';
 import React from 'react';
+import { FieldLevelHelp } from 'patternfly-react';
 
 import CommonForm from './CommonForm';
 
@@ -41,4 +42,17 @@ describe('common Form', () => {
 
     expect(wrapper.find('.col-md-10').exists()).toBe(true);
   });
+
+  it('should render tooltip help', () => {
+    const wrapper = shallow(
+      <CommonForm
+        name="name"
+        label="Required form field"
+        required
+        tooltipHelp={<FieldLevelHelp content="This is a helpful tooltip" />}
+      />
+    );
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
 });

webpack/assets/javascripts/react_app/components/common/forms/RadioButtonGroup/__snapshots__/RadioButtonGroup.test.js.snap

@@ -6,6 +6,7 @@ exports[`radio button group should render group of radio buttons 1`] = `
   inputClassName="col-md-6"
   label="RadioButtonGroupLabel"
   required={false}
+  tooltipHelp={null}
   touched={false}
 >
   <Field

webpack/assets/javascripts/react_app/components/common/forms/TextField/__snapshots__/TextFieldInner.test.js.snap

@@ -6,6 +6,7 @@ exports[`TextFieldInner render 1`] = `
   inputClassName="col-md-4"
   label=""
   required={false}
+  tooltipHelp={null}
   touched={false}
 >
   <input
@@ -21,6 +22,7 @@ exports[`TextFieldInner render textarea 1`] = `
   inputClassName="col-md-4"
   label=""
   required={false}
+  tooltipHelp={null}
   touched={false}
 >
   <textarea
@@ -37,6 +39,7 @@ exports[`TextFieldInner render with item some props 1`] = `
   inputClassName="some-input-class"
   label="some-label"
   required={true}
+  tooltipHelp={null}
   touched={true}
 >
   <input

webpack/assets/javascripts/react_app/components/common/forms/__snapshots__/CommonForm.test.js.snap

@@ -84,3 +84,25 @@ exports[`common Form should not display validation errors if there are none 1`]
   />
 </div>
 `;
+
+exports[`common Form should render tooltip help 1`] = `
+<div
+  className="form-group  "
+>
+  <label
+    className="col-md-2 control-label"
+  >
+    Required form field
+     *
+    <FieldLevelHelp
+      buttonClass=""
+      content="This is a helpful tooltip"
+      placement="top"
+      rootClose={true}
+    />
+  </label>
+  <div
+    className="col-md-4"
+  />
+</div>
+`;