feat: Add FieldHintPopover component to BoolField

KaotoIO · Jan 22, 2024 · fbbd597 · fbbd597
1 parent 853fbd6
commit fbbd597
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/src/BoolField.tsx b/src/BoolField.tsx
@@ -20,10 +20,12 @@
 import * as React from 'react';
 import { Checkbox, CheckboxProps } from '@patternfly/react-core/dist/js/components/Checkbox';
 import { Switch, SwitchProps } from '@patternfly/react-core/dist/js/components/Switch';
-import { connectField, FieldProps } from 'uniforms';
-import wrapField from './wrapField';
-import { FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core/dist/js';
+import { FormHelperText } from '@patternfly/react-core/dist/js/components/Form';
+import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/js/components/HelperText';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { connectField, FieldProps } from 'uniforms';
+import FieldHintPopover from './FieldHintPopover';
+import wrapField, { WrapFieldProps } from './wrapField';
 
 enum ComponentType {
   checkbox = 'checkbox',
@@ -32,7 +34,7 @@ enum ComponentType {
 
 export type BoolFieldProps = FieldProps<
   boolean,
-  CheckboxProps & SwitchProps,
+  CheckboxProps & SwitchProps & WrapFieldProps,
   {
     appearance?: ComponentType;
     inputRef?: React.RefObject<Switch | Checkbox> & React.RefObject<HTMLInputElement>;
@@ -43,7 +45,7 @@ function BoolField({ appearance, disabled, id, inputRef, label, name, onChange,
   const Component = appearance === ComponentType.switch ? Switch : Checkbox;
   return wrapField(
     { id, ...props },
-    <>
+    <div style={{ display: 'flex', alignItems: 'center' }}>
       {' '}
       <Component
         data-testid={'bool-field'}
@@ -55,14 +57,15 @@ function BoolField({ appearance, disabled, id, inputRef, label, name, onChange,
         ref={inputRef}
         label={label}
       />
+      <FieldHintPopover default={props.default} description={props.description} />
       <FormHelperText>
         <HelperText>
           <HelperTextItem icon={props.error === false && <ExclamationCircleIcon />} variant={props.error ? 'error' : 'default'}>
             {!props.error ? '' : props.errorMessage}
           </HelperTextItem>
         </HelperText>
       </FormHelperText>
-    </>,
+    </div>,
   );
 }
 

diff --git a/src/__tests__/BoolField.test.tsx b/src/__tests__/BoolField.test.tsx
@@ -90,6 +90,22 @@ test("<BoolField> - renders a input with correct value (specified)", () => {
   expect(screen.getByTestId("bool-field")).toHaveAttribute("checked");
 });
 
+test("<BoolField> - renders an input with correct hint popover description provided", () => {
+  const { getByTestId } = render(
+    usingUniformsContext(<BoolField name="x" description="BoolFieldDescription" />, { x: { type: Boolean } }),
+  );
+
+  expect(getByTestId("field-hint-button")).toBeInTheDocument();
+});
+
+test("<BoolField> - renders an input without hint popover when description not provided", () => {
+  const { queryByTestId } = render(
+    usingUniformsContext(<BoolField name="x" />, { x: { type: Boolean } }),
+  );
+
+  expect(queryByTestId('field-hint-button')).not.toBeInTheDocument();
+});
+
 test("<BoolField> - renders a input which correctly reacts on change", () => {
   const onChange = jest.fn();