Adds Survey Preview Functionality

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

@@ -14,7 +14,7 @@ import {
 import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons';
 
 function PasswordField(props) {
-  const { id, name, label, validate, isRequired, i18n } = props;
+  const { id, name, label, validate, isRequired, isDisabled, i18n } = props;
   const [inputType, setInputType] = useState('password');
   const [field, meta] = useField({ name, validate });
 
@@ -40,6 +40,7 @@ function PasswordField(props) {
             variant={ButtonVariant.control}
             aria-label={i18n._(t`Toggle Password`)}
             onClick={handlePasswordToggle}
+            isDisabled={isDisabled}
           >
             {inputType === 'password' && <EyeSlashIcon />}
             {inputType === 'text' && <EyeIcon />}
@@ -50,6 +51,7 @@ function PasswordField(props) {
           placeholder={field.value === '$encrypted$' ? 'ENCRYPTED' : undefined}
           {...field}
           value={field.value === '$encrypted$' ? '' : field.value}
+          isDisabled={isDisabled}
           isRequired={isRequired}
           isValid={isValid}
           type={inputType}
@@ -68,11 +70,13 @@ PasswordField.propTypes = {
   label: PropTypes.string.isRequired,
   validate: PropTypes.func,
   isRequired: PropTypes.bool,
+  isDisabled: PropTypes.bool,
 };
 
 PasswordField.defaultProps = {
   validate: () => {},
   isRequired: false,
+  isDisabled: false,
 };
 
 export default withI18n()(PasswordField);

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

@@ -1,12 +1,19 @@
 import React, { useState } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { DataList, Button } from '@patternfly/react-core';
+import { DataList, Button as _Button } from '@patternfly/react-core';
 import ContentLoading from '@components/ContentLoading';
 import ContentEmpty from '@components/ContentEmpty';
 import AlertModal from '@components/AlertModal';
+import styled from 'styled-components';
+
 import SurveyListItem from './SurveyListItem';
 import SurveyToolbar from './SurveyToolbar';
+import SurveyPreviewModal from './SurveyPreviewModal';
+
+const Button = styled(_Button)`
+  margin: 20px;
+`;
 
 function SurveyList({
   isLoading,
@@ -20,7 +27,7 @@ function SurveyList({
   const questions = survey?.spec || [];
   const [selected, setSelected] = useState([]);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-
+  const [isPreviewModalOpen, setIsPreviewModalOpen] = useState(false);
   const isAllSelected =
     selected.length === questions?.length && selected.length > 0;
 
@@ -92,6 +99,21 @@ function SurveyList({
             onMoveDown={moveDown}
           />
         ))}
+        {isPreviewModalOpen && (
+          <SurveyPreviewModal
+            isPreviewModalOpen={isPreviewModalOpen}
+            onToggleModalOpen={() => setIsPreviewModalOpen(false)}
+            questions={questions}
+          />
+        )}
+
+        <Button
+          onClick={() => setIsPreviewModalOpen(true)}
+          variant="primary"
+          aria-label={i18n._(t`Preview`)}
+        >
+          Preview
+        </Button>
       </DataList>
     );
   }

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import { withI18n } from '@lingui/react';
+import styled from 'styled-components';
+import { t } from '@lingui/macro';
+import { PasswordField } from '@components/FormField';
+import { Formik } from 'formik';
+
+import {
+  Chip,
+  Form,
+  FormGroup,
+  Modal,
+  TextInput,
+  TextArea,
+  Select,
+  SelectVariant,
+} from '@patternfly/react-core';
+
+// const Chip = styled(_Chip)`
+//   margin-right: 5px;
+// `;
+function SurveyPreviewModal({
+  questions,
+  isPreviewModalOpen,
+  onToggleModalOpen,
+  i18n,
+}) {
+  const initialValues = {};
+  questions.forEach(q => {
+    initialValues[q.variable] = q.default;
+    return initialValues;
+  });
+
+  return (
+    <Modal
+      title={i18n._(t`Survey Preview`)}
+      isOpen={isPreviewModalOpen}
+      onClose={() => onToggleModalOpen(false)}
+      isSmall
+    >
+      <Formik initialValues={initialValues}>
+        {() => (
+          <Form>
+            {questions.map(q => (
+              <div key={q.variable}>
+                {['text', 'integer', 'float'].includes(q.type) && (
+                  <FormGroup
+                    fieldId={`survey-preview-text-${q.variable}`}
+                    label={q.question_name}
+                  >
+                    <TextInput
+                      id={`survey-preview-text-${q.variable}`}
+                      value={q.default}
+                      isDisabled
+                      aria-label={i18n._(t`Text`)}
+                    />
+                  </FormGroup>
+                )}
+                {['textarea'].includes(q.type) && (
+                  <FormGroup
+                    fieldId={`survey-preview-textArea-${q.variable}`}
+                    label={q.question_name}
+                  >
+                    <TextArea
+                      id={`survey-preview-textArea-${q.variable}`}
+                      type={`survey-preview-textArea-${q.variable}`}
+                      value={q.default}
+                      aria-label={i18n._(t`Text Area`)}
+                      disabled
+                    />
+                  </FormGroup>
+                )}
+                {['password'].includes(q.type) && (
+                  <PasswordField
+                    id={`survey-preview-password-${q.variable}`}
+                    label={q.question_name}
+                    name={q.variable}
+                    isDisabled
+                  />
+                )}
+                {['multiplechoice'].includes(q.type) && (
+                  <FormGroup
+                    fieldId={`survey-preview-multipleChoice-${q.variable}`}
+                    label={q.question_name}
+                  >
+                    <Select
+                      id={`survey-preview-multipleChoice-${q.variable}`}
+                      isDisabled
+                      aria-label={i18n._(t`Multiple Choice`)}
+                      placeholderText={q.default}
+                      onToggle={() => {}}
+                    />
+                  </FormGroup>
+                )}
+                {['multiselect'].includes(q.type) && (
+                  <FormGroup
+                    fieldId={`survey-preview-multiSelect-${q.variable}`}
+                    label={q.question_name}
+                  >
+                    <Select
+                      isDisabled
+                      isReadOnly
+                      variant={SelectVariant.typeaheadMulti}
+                      isExpanded={false}
+                      selections={q.default.length > 0 && q.default.split('\n')}
+                      onToggle={() => {}}
+                      aria-label={i18n._(t`Multi-Select`)}
+                      id={`survey-preview-multiSelect-${q.variable}`}
+                    />
+                  </FormGroup>
+                )}
+              </div>
+            ))}
+          </Form>
+        )}
+      </Formik>
+    </Modal>
+  );
+}
+export default withI18n()(SurveyPreviewModal);

awx/ui_next/src/screens/Template/Survey/index.js

@@ -1,3 +1,4 @@
 export { default as SurveyList } from './SurveyList';
 export { default as SurveyQuestionAdd } from './SurveyQuestionAdd';
 export { default as SurveyQuestionEdit } from './SurveyQuestionEdit';
+export { default as SurveyPreviewModal } from './SurveyPreviewModal';