From 264b13f33ccaa1882b7745a52804fb790bb44b15 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Wed, 14 Apr 2021 17:32:31 -0400
Subject: [PATCH] can write in inputs properly

---
 .../FormField/TextAndCheckboxField.jsx        | 82 +++++++++----------
 .../Template/Survey/SurveyQuestionForm.jsx    | 32 +++++++-
 2 files changed, 71 insertions(+), 43 deletions(-)

diff --git a/awx/ui_next/src/components/FormField/TextAndCheckboxField.jsx b/awx/ui_next/src/components/FormField/TextAndCheckboxField.jsx
index 8ece9c3d6e..e3ebe93acb 100644
--- a/awx/ui_next/src/components/FormField/TextAndCheckboxField.jsx
+++ b/awx/ui_next/src/components/FormField/TextAndCheckboxField.jsx
@@ -1,16 +1,23 @@
 import React, { useState } from 'react';
 import { useField, useFormikContext } from 'formik';
-
-import { Checkbox, FormGroup, TextInput, Radio } from '@patternfly/react-core';
+import { t } from '@lingui/macro';
+import { FormGroup, TextInput, Button } 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`
   && {
     display: flex;
-    padding-bottom: 20px;
+    padding-bottom: 5px;
   }
 `;
+const CheckIcon = styled(PFCheckIcon)`
+  color: var(--pf-c-button--m-plain--disabled--Color);
+  ${props =>
+    props.isSelected &&
+    `color: var(--pf-c-button--m-secondary--active--Color)`};
+`;
 function TextAndCheckboxField({
   id,
   label,
@@ -32,44 +39,24 @@ function TextAndCheckboxField({
 
   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}`));
   const choicesSplit = choicesField.value.split('\n');
   const defaultSplit = formikValues.default.split('\n');
   return (
     <FormGroup
-      fieldId={id}
       helperText={helperText}
       helperTextInvalid={choicesMeta.error}
-      isRequired={isRequired}
-      validated={isValid ? 'default' : 'error'}
       label={label}
       labelIcon={<Popover content={tooltip} />}
     >
       {choicesSplit
         .map((v, i) => (
           <InputWrapper>
-            {formikValues.type === 'multiselect' ? (
-              <Checkbox
-                isChecked={defaultSplit.includes(v)}
-                onChange={() =>
-                  defaultSplit.includes(v)
-                    ? defaultHelpers.setValue(
-                        defaultSplit.filter(d => d !== v).join('\n')
-                      )
-                    : defaultHelpers.setValue(
-                        formikValues.default.concat(`\n${v}`)
-                      )
-                }
-              />
-            ) : (
-              <Radio
-                isChecked={defaultSplit.includes(v)}
-                onChange={defaultHelpers.setValue(`${v}`)}
-              />
-            )}
             <TextInput
-              id={id}
-              isRequired={isRequired}
-              validated={isValid ? 'default' : 'error'}
               value={v}
               onChange={value => {
                 defaultHelpers.setValue(
@@ -87,30 +74,41 @@ function TextAndCheckboxField({
                   : choicesHelpers.setValue(newFields);
               }}
             />
+            <Button
+              variant="control"
+              aria-label={t`Click to toggle default value`}
+              ouiaId={v}
+              onClick={() =>
+                formikValues.type === 'multiselect'
+                  ? handleCheckboxChange(v)
+                  : defaultHelpers.setValue(`${v}`)
+              }
+            >
+              <CheckIcon isSelected={defaultSplit.includes(v)} />
+            </Button>
           </InputWrapper>
         ))
         .concat(
           <InputWrapper>
-            {formikValues.type === 'multiselect' ? (
-              <Checkbox
-                isChecked={isNewValueChecked}
-                onChange={setIsNewValueChecked}
-              />
-            ) : (
-              <Radio
-                isChecked={isNewValueChecked}
-                onChange={setIsNewValueChecked}
-              />
-            )}
             <TextInput
-              id={id}
-              isRequired={isRequired}
-              validated={isValid ? 'default' : 'error'}
               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>
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
index d4c8d3faef..99be1cffca 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
@@ -25,10 +25,37 @@ import {
 } from '../../../util/validators';
 
 function AnswerTypeField() {
-  const [field] = useField({
+  const [field, meta, helpers] = useField({
     name: 'type',
     validate: required(t`Select a value for this field`),
   });
+  const [defaultField, defaultMeta, defaultHelpers] = useField('default');
+  const [choicesField] = useField('choices');
+
+  const handleTypeChange = value => {
+    helpers.setValue(value);
+
+    const firstElementInBoth = choicesField.value
+      ?.split('\n')
+      .map(d =>
+        defaultField.value?.split('\n').find(c => (c === d ? c : false))
+      );
+
+    if (value === 'multiplechoice' && meta.initialValue === 'multiselect') {
+      defaultHelpers.setValue(
+        firstElementInBoth.length > 0
+          ? firstElementInBoth[0]
+          : defaultField.value
+      );
+    }
+    if (
+      field.value === 'multiplechoice' &&
+      value === 'multiselect' &&
+      meta.initialValue === 'multiselect'
+    ) {
+      defaultHelpers.setValue(defaultMeta.initialValue);
+    }
+  };
 
   return (
     <FormGroup
@@ -46,6 +73,9 @@ function AnswerTypeField() {
       <AnsibleSelect
         id="question-type"
         {...field}
+        onChange={(event, value) => {
+          handleTypeChange(value);
+        }}
         data={[
           { key: 'text', value: 'text', label: t`Text` },
           { key: 'textarea', value: 'textarea', label: t`Textarea` },