Adds styling, and dynamic rendering of extra fields

awx/ui_next/src/components/FormField/TextAndCheckboxField.jsx

@@ -1,16 +1,19 @@
-import React, { useState } from 'react';
+import React from 'react';
-import { useField, useFormikContext } from 'formik';
+import { useField } from 'formik';
 import { t } from '@lingui/macro';
-import { FormGroup, TextInput, Button } from '@patternfly/react-core';
+import {
+  FormGroup,
+  TextInput,
+  Button,
+  InputGroup as PFInputGroup,
+  Tooltip,
+} from '@patternfly/react-core';
 import PFCheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
 import styled from 'styled-components';
 import Popover from '../Popover';
 
-const InputWrapper = styled.span`
+const InputGroup = styled(PFInputGroup)`
-  && {
+  padding-bottom: 5px;
-    display: flex;
-    padding-bottom: 5px;
-  }
 `;
 const CheckIcon = styled(PFCheckIcon)`
   color: var(--pf-c-button--m-plain--disabled--Color);
@@ -18,34 +21,17 @@ const CheckIcon = styled(PFCheckIcon)`
     props.isSelected &&
     `color: var(--pf-c-button--m-secondary--active--Color)`};
 `;
-function TextAndCheckboxField({
+function TextAndCheckboxField({ label, helperText, tooltip }) {
-  id,
-  label,
-  helperText,
-  isRequired,
-  isValid,
-  tooltip,
-  name,
-  rows,
-  ...rest
-}) {
-  const { values: formikValues } = useFormikContext();
   const [choicesField, choicesMeta, choicesHelpers] = useField('choices');
-  // const [fields, setFields] = useState(choicesField.value.split('\n'));
+  const [typeField] = useField('type');
-  // const [defaultValue, setDefaultValue] = useState(
+  const [defaultField, , defaultHelpers] = useField('default');
-  //   formikValues.default.split('\n')
-  // );
-  const [, , defaultHelpers] = useField('default');
-
-  const [isNewValueChecked, setIsNewValueChecked] = useState(false);
-  console.log('set');
 
   const handleCheckboxChange = v =>
     defaultSplit.includes(v)
       ? defaultHelpers.setValue(defaultSplit.filter(d => d !== v).join('\n'))
-      : defaultHelpers.setValue(formikValues.default.concat(`\n${v}`));
+      : defaultHelpers.setValue(defaultField.value.concat(`\n${v}`));
   const choicesSplit = choicesField.value.split('\n');
-  const defaultSplit = formikValues.default.split('\n');
+  const defaultSplit = defaultField.value?.split('\n');
   return (
     <FormGroup
       helperText={helperText}
@@ -53,64 +39,58 @@ function TextAndCheckboxField({
       label={label}
       labelIcon={<Popover content={tooltip} />}
     >
-      {choicesSplit
+      {choicesSplit.map((v, i) => (
-        .map((v, i) => (
+        <InputGroup>
-          <InputWrapper>
+          <TextInput
-            <TextInput
+            onKeyDown={e => {
-              value={v}
+              if (e.key === 'Enter' && i === choicesSplit.length - 1) {
-              onChange={value => {
+                choicesHelpers.setValue(choicesField.value.concat('\n'));
-                defaultHelpers.setValue(
+              }
-                  defaultSplit.filter(d => d !== v).join('\n')
-                );
 
-                const newFields = choicesSplit
+              if (e.key === 'Backspace' && v.length <= 1) {
-                  .map((choice, index) => (i === index ? value : choice))
+                const removeEmptyField = choicesSplit
+                  .filter((choice, index) => index !== i)
                   .join('\n');
+                choicesHelpers.setValue(removeEmptyField);
+              }
+            }}
+            value={v}
+            onChange={value => {
+              defaultHelpers.setValue(
+                defaultSplit.filter(d => d !== v).join('\n')
+              );
 
-                return value === ''
+              const newFields = choicesSplit
-                  ? choicesHelpers.setValue(
+                .map((choice, index) => (i === index ? value : choice))
-                      choicesSplit.filter(d => d !== v).join('\n')
+                .join('\n');
-                    )
+
-                  : choicesHelpers.setValue(newFields);
+              return value === ''
-              }}
+                ? choicesHelpers.setValue(
-            />
+                    choicesSplit.filter(d => d !== v).join('\n')
+                  )
+                : choicesHelpers.setValue(newFields);
+            }}
+          />
+          <Tooltip
+            content={t`Click to select this answer as a default answer.`}
+            position="right"
+            trigger="mouseenter"
+          >
             <Button
               variant="control"
               aria-label={t`Click to toggle default value`}
               ouiaId={v}
               onClick={() =>
-                formikValues.type === 'multiselect'
+                typeField.value === 'multiselect'
                   ? handleCheckboxChange(v)
                   : defaultHelpers.setValue(`${v}`)
               }
             >
-              <CheckIcon isSelected={defaultSplit.includes(v)} />
+              <CheckIcon isSelected={defaultSplit?.includes(v) || false} />
             </Button>
-          </InputWrapper>
+          </Tooltip>
-        ))
+        </InputGroup>
-        .concat(
+      ))}
-          <InputWrapper>
-            <TextInput
-              value=""
-              onChange={(value, event) => {
-                choicesHelpers.setValue([...choicesSplit, value].join('\n'));
-              }}
-            />
-            <Button
-              variant="control"
-              aria-label={t`Click to toggle default value`}
-              ouiaId="new input"
-              onClick={
-                () => {}
-                // formikValues.type === 'multiselect'
-                //   ? handleCheckboxChange(v)
-                //   : defaultHelpers.setValue(`${v}`)
-              }
-            >
-              <CheckIcon isSelected={false} />
-            </Button>
-          </InputWrapper>
-        )}
     </FormGroup>
   );
 }

awx/ui_next/src/components/FormField/TextAndCheckboxField.test.jsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { Formik } from 'formik';
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import TextAndCheckboxField from './TextAndCheckboxField';
+
+describe('<TextAndCheckboxField/>', () => {
+  test('should activate default values, multiselect', async () => {
+    let wrapper;
+
+    act(() => {
+      wrapper = mountWithContexts(
+        <Formik
+          initialValues={{
+            choices: 'alex\napollo\nathena',
+            default: 'alex\napollo',
+            type: 'multiselect',
+          }}
+        >
+          <TextAndCheckboxField id="question-options" name="choices" />
+        </Formik>
+      );
+    });
+    await act(async () =>
+      wrapper
+        .find('TextAndCheckboxField')
+        .find('TextAndCheckboxField')
+        .find('TextInput')
+        .at(0)
+        .prop('onChange')('alex')
+    );
+    wrapper.update();
+    expect(
+      wrapper
+        .find('Button[ouiaId="alex"]')
+        .find('CheckIcon')
+        .prop('isSelected')
+    ).toBe(false);
+    await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')());
+    wrapper.update();
+    expect(
+      wrapper
+        .find('Button[ouiaId="alex"]')
+        .find('CheckIcon')
+        .prop('isSelected')
+    ).toBe(true);
+    await act(async () =>
+      wrapper
+        .find('TextAndCheckboxField')
+        .find('TextAndCheckboxField')
+        .find('TextInput')
+        .at(0)
+        .prop('onKeyDown')({ key: 'Enter' })
+    );
+    wrapper.update();
+    expect(wrapper.find('TextAndCheckboxField').find('InputGroup').length).toBe(
+      3
+    );
+    await act(async () =>
+      wrapper
+        .find('TextAndCheckboxField')
+        .find('TextAndCheckboxField')
+        .find('TextInput')
+        .at(1)
+        .prop('onChange')('spencer')
+    );
+    wrapper.update();
+    expect(wrapper.find('TextAndCheckboxField').find('InputGroup').length).toBe(
+      3
+    );
+    await act(() => wrapper.find('Button[ouiaId="spencer"]').prop('onClick')());
+    wrapper.update();
+    expect(
+      wrapper
+        .find('Button[ouiaId="spencer"]')
+        .find('CheckIcon')
+        .prop('isSelected')
+    ).toBe(true);
+    await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')());
+    wrapper.update();
+    expect(
+      wrapper
+        .find('Button[ouiaId="alex"]')
+        .find('CheckIcon')
+        .prop('isSelected')
+    ).toBe(false);
+  });
+
+  test('should select default, multiplechoice', async () => {
+    let wrapper;
+
+    act(() => {
+      wrapper = mountWithContexts(
+        <Formik
+          initialValues={{
+            choices: 'alex\napollo\nathena',
+            default: 'alex\napollo',
+            type: 'multiplechoice',
+          }}
+        >
+          <TextAndCheckboxField id="question-options" name="choices" />
+        </Formik>
+      );
+    });
+    await act(async () =>
+      wrapper
+        .find('TextAndCheckboxField')
+        .find('TextAndCheckboxField')
+        .find('TextInput')
+        .at(0)
+        .prop('onChange')('alex')
+    );
+    wrapper.update();
+    expect(
+      wrapper
+        .find('Button[ouiaId="alex"]')
+        .find('CheckIcon')
+        .prop('isSelected')
+    ).toBe(false);
+    await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')());
+    wrapper.update();
+    expect(
+      wrapper
+        .find('Button[ouiaId="alex"]')
+        .find('CheckIcon')
+        .prop('isSelected')
+    ).toBe(true);
+    expect(wrapper.find('TextAndCheckboxField').find('InputGroup').length).toBe(
+      3
+    );
+    await act(async () =>
+      wrapper
+        .find('TextAndCheckboxField')
+        .find('TextAndCheckboxField')
+        .find('TextInput')
+        .at(0)
+        .prop('onKeyDown')({ key: 'Enter' })
+    );
+    wrapper.update();
+    await act(async () =>
+      wrapper
+        .find('TextAndCheckboxField')
+        .find('TextAndCheckboxField')
+        .find('TextInput')
+        .at(1)
+        .prop('onChange')('spencer')
+    );
+    wrapper.update();
+    expect(wrapper.find('TextAndCheckboxField').find('InputGroup').length).toBe(
+      3
+    );
+    await act(() => wrapper.find('Button[ouiaId="spencer"]').prop('onClick')());
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('Button[ouiaId="spencer"]')
+        .find('CheckIcon')
+        .prop('isSelected')
+    ).toBe(true);
+    expect(
+      wrapper
+        .find('Button[ouiaId="alex"]')
+        .find('CheckIcon')
+        .prop('isSelected')
+    ).toBe(false);
+  });
+});

awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx

@@ -104,20 +104,6 @@ function SurveyQuestionForm({
   handleCancel,
   submitError,
 }) {
-  const defaultIsNotAvailable = choices => {
-    return defaultValue => {
-      let errorMessage;
-      const found = [...defaultValue].every(dA => {
-        return choices.indexOf(dA) > -1;
-      });
-
-      if (!found) {
-        errorMessage = t`Default choice must be answered from the choices listed.`;
-      }
-      return errorMessage;
-    };
-  };
-
   return (
     <Formik
       enableReinitialize
@@ -236,29 +222,14 @@ function SurveyQuestionForm({
               />
             )}
             {['multiplechoice', 'multiselect'].includes(formik.values.type) && (
-              <>
+              <TextAndCheckboxField
-                <TextAndCheckboxField
+                id="question-options"
-                  id="question-options"
+                name="choices"
-                  name="choices"
+                label={t`Multiple Choice Options`}
-                  type={formik.values.type}
+                validate={required()}
-                  label={t`Multiple Choice Options`}
+                tooltip={t`Type answer choices and click the check next the default choice(s). Multiple Choice (multi select) can have more than 1 default answer.  Multiple Choice (single select) can only have 1 default answer.  Press enter to get additional inputs`}
-                  validate={required()}
+                isRequired
-                  tooltip={t`Each answer choice must be on a separate line.`}
+              />
-                  isRequired
-                  rows="10"
-                />
-                <FormField
-                  id="question-default"
-                  name="default"
-                  validate={defaultIsNotAvailable(formik.values.choices)}
-                  type={
-                    formik.values.type === 'multiplechoice'
-                      ? 'text'
-                      : 'textarea'
-                  }
-                  label={t`Default answer`}
-                />
-              </>
             )}
           </FormColumnLayout>
           <FormSubmitError error={submitError} />

awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.test.jsx

@@ -17,12 +17,15 @@ const noop = () => {};
 
 async function selectType(wrapper, type) {
   await act(async () => {
-    wrapper.find('AnsibleSelect#question-type').invoke('onChange')({
+    wrapper.find('AnsibleSelect#question-type').invoke('onChange')(
-      target: {
+      {
-        name: 'type',
+        target: {
-        value: type,
+          name: 'type',
+          value: type,
+        },
       },
-    });
+      type
+    );
   });
   wrapper.update();
 }
@@ -146,12 +149,15 @@ describe('<SurveyQuestionForm />', () => {
     });
     await selectType(wrapper, 'multiplechoice');
 
-    expect(wrapper.find('FormField#question-options').prop('type')).toEqual(
+    expect(wrapper.find('TextAndCheckboxField').length).toBe(1);
-      'textarea'
+    expect(wrapper.find('TextAndCheckboxField').find('TextInput').length).toBe(
-    );
+      1
-    expect(wrapper.find('FormField#question-default').prop('type')).toEqual(
-      'text'
     );
+    expect(
+      wrapper
+        .find('TextAndCheckboxField')
+        .find('Button[aria-label="Click to toggle default value"]').length
+    ).toBe(1);
   });
 
   test('should provide fields for multi-select question', async () => {
@@ -168,12 +174,15 @@ describe('<SurveyQuestionForm />', () => {
     });
     await selectType(wrapper, 'multiselect');
 
-    expect(wrapper.find('FormField#question-options').prop('type')).toEqual(
+    expect(wrapper.find('TextAndCheckboxField').length).toBe(1);
-      'textarea'
+    expect(wrapper.find('TextAndCheckboxField').find('TextInput').length).toBe(
-    );
+      1
-    expect(wrapper.find('FormField#question-default').prop('type')).toEqual(
-      'textarea'
     );
+    expect(
+      wrapper
+        .find('TextAndCheckboxField')
+        .find('Button[aria-label="Click to toggle default value"]').length
+    ).toBe(1);
   });
 
   test('should provide fields for integer question', async () => {
@@ -225,7 +234,7 @@ describe('<SurveyQuestionForm />', () => {
       wrapper.find('FormField#question-default input').prop('type')
     ).toEqual('number');
   });
-  test('should not throw validation error', async () => {
+  test('should activate default values, multiselect', async () => {
     let wrapper;
 
     act(() => {
@@ -239,25 +248,71 @@ describe('<SurveyQuestionForm />', () => {
     });
     await selectType(wrapper, 'multiselect');
     await act(async () =>
-      wrapper.find('textarea#question-options').simulate('change', {
+      wrapper
-        target: { value: 'a \n b', name: 'choices' },
+        .find('TextAndCheckboxField')
-      })
+        .find('TextAndCheckboxField')
+        .find('TextInput')
+        .at(0)
+        .prop('onChange')('alex')
     );
-    await act(async () =>
-      wrapper.find('textarea#question-options').simulate('change', {
-        target: { value: 'b \n a', name: 'default' },
-      })
-    );
-    wrapper.find('FormField#question-default').prop('validate')('b \n a', {});
     wrapper.update();
     expect(
       wrapper
-        .find('FormGroup[fieldId="question-default"]')
+        .find('Button[ouiaId="alex"]')
-        .prop('helperTextInvalid')
+        .find('CheckIcon')
-    ).toBe(undefined);
+        .prop('isSelected')
+    ).toBe(false);
+    await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')());
+    wrapper.update();
+    expect(
+      wrapper
+        .find('Button[ouiaId="alex"]')
+        .find('CheckIcon')
+        .prop('isSelected')
+    ).toBe(true);
+    await act(async () =>
+      wrapper
+        .find('TextAndCheckboxField')
+        .find('TextAndCheckboxField')
+        .find('TextInput')
+        .at(0)
+        .prop('onKeyDown')({ key: 'Enter' })
+    );
+    wrapper.update();
+    expect(wrapper.find('TextAndCheckboxField').find('InputGroup').length).toBe(
+      2
+    );
+    await act(async () =>
+      wrapper
+        .find('TextAndCheckboxField')
+        .find('TextAndCheckboxField')
+        .find('TextInput')
+        .at(1)
+        .prop('onChange')('spencer')
+    );
+    wrapper.update();
+    expect(wrapper.find('TextAndCheckboxField').find('InputGroup').length).toBe(
+      2
+    );
+    await act(() => wrapper.find('Button[ouiaId="spencer"]').prop('onClick')());
+    wrapper.update();
+    expect(
+      wrapper
+        .find('Button[ouiaId="spencer"]')
+        .find('CheckIcon')
+        .prop('isSelected')
+    ).toBe(true);
+    await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')());
+    wrapper.update();
+    expect(
+      wrapper
+        .find('Button[ouiaId="alex"]')
+        .find('CheckIcon')
+        .prop('isSelected')
+    ).toBe(false);
   });
 
-  test('should throw validation error', async () => {
+  test('should select default, multiplechoice', async () => {
     let wrapper;
 
     act(() => {
@@ -269,23 +324,68 @@ describe('<SurveyQuestionForm />', () => {
         />
       );
     });
-    await selectType(wrapper, 'multiselect');
+    await selectType(wrapper, 'multiplechoice');
     await act(async () =>
-      wrapper.find('textarea#question-options').simulate('change', {
+      wrapper
-        target: { value: 'a \n b', name: 'choices' },
+        .find('TextAndCheckboxField')
-      })
+        .find('TextAndCheckboxField')
+        .find('TextInput')
+        .at(0)
+        .prop('onChange')('alex')
     );
-    await act(async () =>
-      wrapper.find('textarea#question-default').simulate('change', {
-        target: { value: 'c', name: 'default' },
-      })
-    );
-    wrapper.find('FormField#question-default').prop('validate')('c', {});
     wrapper.update();
     expect(
       wrapper
-        .find('FormGroup[fieldId="question-default"]')
+        .find('Button[ouiaId="alex"]')
-        .prop('helperTextInvalid')
+        .find('CheckIcon')
-    ).toBe('Default choice must be answered from the choices listed.');
+        .prop('isSelected')
+    ).toBe(false);
+    await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')());
+    wrapper.update();
+    expect(
+      wrapper
+        .find('Button[ouiaId="alex"]')
+        .find('CheckIcon')
+        .prop('isSelected')
+    ).toBe(true);
+    expect(wrapper.find('TextAndCheckboxField').find('InputGroup').length).toBe(
+      1
+    );
+    await act(async () =>
+      wrapper
+        .find('TextAndCheckboxField')
+        .find('TextAndCheckboxField')
+        .find('TextInput')
+        .at(0)
+        .prop('onKeyDown')({ key: 'Enter' })
+    );
+    wrapper.update();
+    await act(async () =>
+      wrapper
+        .find('TextAndCheckboxField')
+        .find('TextAndCheckboxField')
+        .find('TextInput')
+        .at(1)
+        .prop('onChange')('spencer')
+    );
+    wrapper.update();
+    expect(wrapper.find('TextAndCheckboxField').find('InputGroup').length).toBe(
+      2
+    );
+    await act(() => wrapper.find('Button[ouiaId="spencer"]').prop('onClick')());
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('Button[ouiaId="spencer"]')
+        .find('CheckIcon')
+        .prop('isSelected')
+    ).toBe(true);
+    expect(
+      wrapper
+        .find('Button[ouiaId="alex"]')
+        .find('CheckIcon')
+        .prop('isSelected')
+    ).toBe(false);
   });
 });