From 619fabc3a1b76cf0c98424c747d00747048474d3 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Tue, 10 Nov 2020 11:47:30 -0500
Subject: [PATCH] adds asterisk to required survey questions in preview modal

---
 .../screens/Template/Survey/SurveyPreviewModal.jsx   |  5 +++++
 .../Template/Survey/SurveyPreviewModal.test.jsx      | 12 ++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.jsx
index f26f1f8ed1..94aab7ce3f 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.jsx
@@ -44,6 +44,7 @@ function SurveyPreviewModal({
                   <FormGroup
                     fieldId={`survey-preview-text-${q.variable}`}
                     label={q.question_name}
+                    isRequired={q.required}
                   >
                     <TextInput
                       id={`survey-preview-text-${q.variable}`}
@@ -57,6 +58,7 @@ function SurveyPreviewModal({
                   <FormGroup
                     fieldId={`survey-preview-textArea-${q.variable}`}
                     label={q.question_name}
+                    isRequired={q.required}
                   >
                     <TextArea
                       id={`survey-preview-textArea-${q.variable}`}
@@ -73,12 +75,14 @@ function SurveyPreviewModal({
                     label={q.question_name}
                     name={q.variable}
                     isDisabled
+                    isRequired={q.required}
                   />
                 )}
                 {['multiplechoice'].includes(q.type) && (
                   <FormGroup
                     fieldId={`survey-preview-multipleChoice-${q.variable}`}
                     label={q.question_name}
+                    isRequired={q.required}
                   >
                     <Select
                       id={`survey-preview-multipleChoice-${q.variable}`}
@@ -93,6 +97,7 @@ function SurveyPreviewModal({
                   <FormGroup
                     fieldId={`survey-preview-multiSelect-${q.variable}`}
                     label={q.question_name}
+                    isRequired={q.required}
                   >
                     <Select
                       isDisabled
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.test.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.test.jsx
index 74aac44a3f..03a8d7f2ea 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.test.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.test.jsx
@@ -94,7 +94,7 @@ describe('<SurveyPreviewModal />', () => {
     const question3 = wrapper
       .find('FormGroup[label="Text Area Question"]')
       .find('label');
-    const question3Value = wrapper.find('TextArea');
+    const question3Value = wrapper.find('textarea');
 
     const question4 = wrapper.find('FormGroup[label="Password Question"]');
     const question4Value = wrapper.find('TextInputBase[type="password"]');
@@ -106,24 +106,24 @@ describe('<SurveyPreviewModal />', () => {
       .find('Select[aria-label="Multi-Select"]')
       .find('Chip');
 
-    expect(question1.text()).toBe('Text Question ');
+    expect(question1.text()).toBe('Text Question * ');
     expect(question1Value.prop('value')).toBe('Text Question Value');
     expect(question1Value.prop('isDisabled')).toBe(true);
 
-    expect(question2.text()).toBe('Select Question');
+    expect(question2.text()).toBe('Select Question *');
     expect(question2Value.find('.pf-c-select__toggle-text').text()).toBe(
       'Select Question Value'
     );
     expect(question2Value.prop('isDisabled')).toBe(true);
 
-    expect(question3.text()).toBe('Text Area Question');
+    expect(question3.text()).toBe('Text Area Question *');
     expect(question3Value.prop('value')).toBe('Text Area Question Value');
     expect(question3Value.prop('disabled')).toBe(true);
-    expect(question4.text()).toBe('Password Question ');
+    expect(question4.text()).toBe('Password Question * ');
     expect(question4Value.prop('placeholder')).toBe('ENCRYPTED');
     expect(question4Value.prop('isDisabled')).toBe(true);
 
-    expect(question5.text()).toBe('Multiple select Question');
+    expect(question5.text()).toBe('Multiple select Question *');
     expect(question5Value.length).toBe(4);
     expect(
       wrapper.find('Select[aria-label="Multi-Select"]').prop('isDisabled')