From ed3b6385f156ed079a0b6b3f647f68801cb21333 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Fri, 27 Mar 2020 10:25:32 -0400
Subject: [PATCH 1/3] Fixes several things about Survey List Aligns Select All
 with other select buttons Add required asterisk to those items that are
 required Adds label for the Default and Question Type column Adds chips for
 multiselect items. Adds RBAC to add and edit survey. Also fixes a bug where
 the survey was not reloading properly after edit

---
 .../PaginatedDataList/ToolbarAddButton.jsx    |  3 +-
 .../screens/Template/Survey/SurveyList.jsx    |  3 +
 .../Template/Survey/SurveyList.test.jsx       | 38 +++++++-
 .../Template/Survey/SurveyListItem.jsx        | 59 ++++++++++--
 .../Template/Survey/SurveyListItem.test.jsx   | 93 +++++++++++++++++++
 .../Template/Survey/SurveyQuestionForm.jsx    |  3 +
 .../screens/Template/Survey/SurveyToolbar.jsx | 16 +++-
 .../Template/Survey/SurveyToolbar.test.jsx    | 28 ++++++
 awx/ui_next/src/screens/Template/Template.jsx | 10 +-
 .../src/screens/Template/TemplateSurvey.jsx   | 32 +++++--
 .../screens/Template/WorkflowJobTemplate.jsx  | 10 +-
 11 files changed, 269 insertions(+), 26 deletions(-)

diff --git a/awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.jsx b/awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.jsx
index 6819581c93..19ae9a68c9 100644
--- a/awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.jsx
+++ b/awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.jsx
@@ -5,7 +5,7 @@ import { Button, Tooltip } from '@patternfly/react-core';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
-function ToolbarAddButton({ linkTo, onClick, i18n }) {
+function ToolbarAddButton({ linkTo, onClick, i18n, isDisabled }) {
   if (!linkTo && !onClick) {
     throw new Error(
       'ToolbarAddButton requires either `linkTo` or `onClick` prop'
@@ -15,6 +15,7 @@ function ToolbarAddButton({ linkTo, onClick, i18n }) {
     return (
       <Tooltip content={i18n._(t`Add`)} position="top">
         <Button
+          isDisabled={isDisabled}
           component={Link}
           to={linkTo}
           variant="primary"
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyList.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyList.jsx
index 8f859af943..4110e56078 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyList.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyList.jsx
@@ -22,6 +22,7 @@ function SurveyList({
   toggleSurvey,
   updateSurvey,
   deleteSurvey,
+  canAddAndEditSurvey,
   i18n,
 }) {
   const questions = survey?.spec || [];
@@ -97,6 +98,7 @@ function SurveyList({
             onSelect={() => handleSelect(question)}
             onMoveUp={moveUp}
             onMoveDown={moveDown}
+            canAddAndEditSurvey={canAddAndEditSurvey}
           />
         ))}
         {isPreviewModalOpen && (
@@ -169,6 +171,7 @@ function SurveyList({
         surveyEnabled={surveyEnabled}
         onToggleSurvey={toggleSurvey}
         isDeleteDisabled={selected?.length === 0}
+        canAddAndEditSurvey={canAddAndEditSurvey}
         onToggleDeleteModal={() => setIsDeleteModalOpen(true)}
       />
       {content}
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyList.test.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyList.test.jsx
index 9621886314..8190a01162 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyList.test.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyList.test.jsx
@@ -43,6 +43,7 @@ describe('<SurveyList />', () => {
     await act(async () => {
       wrapper.find('Switch').invoke('onChange')(true);
     });
+
     wrapper.update();
 
     expect(toggleSurvey).toHaveBeenCalled();
@@ -53,14 +54,18 @@ describe('<SurveyList />', () => {
     let wrapper;
     await act(async () => {
       wrapper = mountWithContexts(
-        <SurveyList survey={surveyData} deleteSurvey={deleteSurvey} />
+        <SurveyList
+          survey={surveyData}
+          deleteSurvey={deleteSurvey}
+          canAddAndEditSurvey
+        />
       );
     });
     wrapper.update();
+
     expect(wrapper.find('Button[variant="danger"]').prop('isDisabled')).toBe(
       true
     );
-
     expect(
       wrapper.find('Checkbox[aria-label="Select all"]').prop('isChecked')
     ).toBe(false);
@@ -81,6 +86,7 @@ describe('<SurveyList />', () => {
     act(() => {
       wrapper.find('Button[variant="danger"]').invoke('onClick')();
     });
+
     wrapper.update();
 
     await act(() =>
@@ -88,6 +94,7 @@ describe('<SurveyList />', () => {
     );
     expect(deleteSurvey).toHaveBeenCalled();
   });
+
   test('should render Preview button ', async () => {
     let wrapper;
 
@@ -97,6 +104,7 @@ describe('<SurveyList />', () => {
 
     expect(wrapper.find('Button[aria-label="Preview"]').length).toBe(1);
   });
+
   test('Preview button should render Modal', async () => {
     let wrapper;
 
@@ -108,6 +116,7 @@ describe('<SurveyList />', () => {
 
     expect(wrapper.find('SurveyPreviewModal').length).toBe(1);
   });
+
   test('Modal close button should close modal', async () => {
     let wrapper;
 
@@ -119,11 +128,34 @@ describe('<SurveyList />', () => {
 
     expect(wrapper.find('SurveyPreviewModal').length).toBe(1);
 
-    wrapper.find('Modal').prop('onClose')();
+    act(() => wrapper.find('Modal').prop('onClose')());
+
     wrapper.update();
 
     expect(wrapper.find('SurveyPreviewModal').length).toBe(0);
   });
+
+  test('user without edit/delete permission cannot delete', async () => {
+    const deleteSurvey = jest.fn();
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <SurveyList survey={surveyData} deleteSurvey={deleteSurvey} />
+      );
+    });
+
+    expect(
+      wrapper
+        .find('DataToolbar')
+        .find('Checkbox')
+        .prop('isDisabled')
+    ).toBe(true);
+    expect(wrapper.find('Switch').prop('isDisabled')).toBe(true);
+    expect(wrapper.find('ToolbarAddButton').prop('isDisabled')).toBe(true);
+    expect(wrapper.find('Button[variant="danger"]').prop('isDisabled')).toBe(
+      true
+    );
+  });
 });
 
 describe('Survey with no questions', () => {
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx
index 15f718d857..bddffc0186 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx
@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
 import { Link } from 'react-router-dom';
 import {
   Button as _Button,
+  Chip as _Chip,
   DataListAction as _DataListAction,
   DataListCheck,
   DataListItemCells,
@@ -27,8 +28,20 @@ const Button = styled(_Button)`
   padding-bottom: 0;
   padding-left: 0;
 `;
+const Required = styled.span`
+  color: red;
+  margin-left: 5px;
+`;
+const Chip = styled(_Chip)`
+  margin-right: 5px;
+`;
+
+const Label = styled.b`
+  margin-right: 20px;
+`;
 
 function SurveyListItem({
+  canAddAndEditSurvey,
   question,
   i18n,
   isLast,
@@ -54,7 +67,7 @@ function SurveyListItem({
               <Button
                 variant="plain"
                 aria-label={i18n._(t`move up`)}
-                isDisabled={isFirst}
+                isDisabled={isFirst || !canAddAndEditSurvey}
                 onClick={() => onMoveUp(question)}
               >
                 <CaretUpIcon />
@@ -64,7 +77,7 @@ function SurveyListItem({
               <Button
                 variant="plain"
                 aria-label={i18n._(t`move down`)}
-                isDisabled={isLast}
+                isDisabled={isLast || !canAddAndEditSurvey}
                 onClick={() => onMoveDown(question)}
               >
                 <CaretDownIcon />
@@ -73,6 +86,7 @@ function SurveyListItem({
           </Stack>
         </DataListAction>
         <DataListCheck
+          isDisabled={!canAddAndEditSurvey}
           checked={isChecked}
           onChange={onSelect}
           aria-labelledby="survey check"
@@ -80,12 +94,43 @@ function SurveyListItem({
         <DataListItemCells
           dataListCells={[
             <DataListCell key="name">
-              <Link to={`survey/edit/${question.variable}`}>
-                {question.question_name}
-              </Link>
+              <>
+                <Link to={`survey/edit/${question.variable}`}>
+                  {question.question_name}
+                </Link>
+                {question.required && (
+                  <Required
+                    aria-label={i18n._(t`Required`)}
+                    className="pf-c-form__label-required"
+                    aria-hidden="true"
+                  >
+                    *
+                  </Required>
+                )}
+              </>
+            </DataListCell>,
+
+            <DataListCell key="type">
+              <Label>{i18n._(t`Type:`)}</Label>
+              {question.type}
+            </DataListCell>,
+            <DataListCell key="default">
+              <Label>{i18n._(t`Default:`)}</Label>
+              {[question.type].includes('password') && (
+                <span>{i18n._(t`encrypted`).toUpperCase()}</span>
+              )}
+              {[question.type].includes('multiselect') &&
+                question.default.length > 0 &&
+                question.default.split('\n').map(chip => (
+                  <Chip key={chip} isReadOnly>
+                    {chip}
+                  </Chip>
+                ))}
+              {![question.type].includes('password') &&
+                ![question.type].includes('multiselect') && (
+                  <span>{question.default}</span>
+                )}
             </DataListCell>,
-            <DataListCell key="type">{question.type}</DataListCell>,
-            <DataListCell key="default">{question.default}</DataListCell>,
           ]}
         />
       </DataListItemRow>
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyListItem.test.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyListItem.test.jsx
index 9a98115617..23083d3a95 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyListItem.test.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyListItem.test.jsx
@@ -25,6 +25,18 @@ describe('<SurveyListItem />', () => {
     const moveDown = wrapper.find('Button[aria-label="move down"]');
     expect(moveUp.length).toBe(1);
     expect(moveDown.length).toBe(1);
+    expect(
+      wrapper
+        .find('b')
+        .at(0)
+        .text()
+    ).toBe('Type:');
+    expect(
+      wrapper
+        .find('b')
+        .at(1)
+        .text()
+    ).toBe('Default:');
     expect(wrapper.find('DataListCheck').length).toBe(1);
     expect(wrapper.find('DataListCell').length).toBe(3);
   });
@@ -44,4 +56,85 @@ describe('<SurveyListItem />', () => {
     expect(moveUp).toBe(true);
     expect(moveDown).toBe(true);
   });
+  test('required item has required asterisk', () => {
+    const newItem = {
+      question_name: 'Foo',
+      default: 'Bar',
+      type: 'text',
+      id: 1,
+      required: true,
+    };
+
+    let wrapper;
+    act(() => {
+      wrapper = mountWithContexts(
+        <SurveyListItem question={newItem} isChecked={false} isFirst isLast />
+      );
+    });
+    expect(wrapper.find('span[aria-label="Required"]').length).toBe(1);
+  });
+  test('items that are not required should not have an asterisk', () => {
+    let wrapper;
+    act(() => {
+      wrapper = mountWithContexts(
+        <SurveyListItem question={item} isChecked={false} isFirst isLast />
+      );
+    });
+    expect(wrapper.find('span[aria-label="Required"]').length).toBe(0);
+  });
+  test('required item has required asterisk', () => {
+    const newItem = {
+      question_name: 'Foo',
+      default: 'a\nd\nb\ne\nf\ng\nh\ni\nk',
+      type: 'multiselect',
+      id: 1,
+    };
+
+    let wrapper;
+    act(() => {
+      wrapper = mountWithContexts(
+        <SurveyListItem question={newItem} isChecked={false} isFirst isLast />
+      );
+    });
+    expect(wrapper.find('Chip').length).toBe(9);
+    wrapper
+      .find('Chip')
+      .map(chip => expect(chip.prop('isReadOnly')).toBe(true));
+  });
+  test('items that are no required should have no an asterisk', () => {
+    const newItem = {
+      question_name: 'Foo',
+      default: '$encrypted$',
+      type: 'password',
+      id: 1,
+    };
+
+    let wrapper;
+    act(() => {
+      wrapper = mountWithContexts(
+        <SurveyListItem question={newItem} isChecked={false} isFirst isLast />
+      );
+    });
+    expect(wrapper.find('span').text()).toBe('ENCRYPTED');
+  });
+  test('users without edit/delete permissions are unable to reorder the questions', () => {
+    let wrapper;
+    act(() => {
+      wrapper = mountWithContexts(
+        <SurveyListItem
+          question={item}
+          canAddAndDelete={false}
+          isChecked={false}
+          isFirst
+          isLast
+        />
+      );
+    });
+    expect(wrapper.find('button[aria-label="move up"]').prop('disabled')).toBe(
+      true
+    );
+    expect(
+      wrapper.find('button[aria-label="move down"]').prop('disabled')
+    ).toBe(true);
+  });
 });
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
index 5f3fdb8258..4914e60c21 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
@@ -183,6 +183,9 @@ function SurveyQuestionForm({
                   type="textarea"
                   label={i18n._(t`Multiple Choice Options`)}
                   validate={required(null, i18n)}
+                  tooltip={i18n._(
+                    t`Each answer choice must be on a separate line.`
+                  )}
                   isRequired
                 />
                 <FormField
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyToolbar.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyToolbar.jsx
index fa2e171615..8346535a8e 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyToolbar.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyToolbar.jsx
@@ -2,9 +2,10 @@ import React from 'react';
 import { useRouteMatch } from 'react-router-dom';
 import { t } from '@lingui/macro';
 import { withI18n } from '@lingui/react';
+import styled from 'styled-components';
 
 import {
-  DataToolbar,
+  DataToolbar as _DataToolbar,
   DataToolbarContent,
   DataToolbarGroup,
   DataToolbarItem,
@@ -12,7 +13,12 @@ import {
 import { Switch, Checkbox, Button } from '@patternfly/react-core';
 import { ToolbarAddButton } from '@components/PaginatedDataList';
 
+const DataToolbar = styled(_DataToolbar)`
+  margin-left: 52px;
+`;
+
 function SurveyToolbar({
+  canAddAndEditSurvey,
   isAllSelected,
   onSelectAll,
   i18n,
@@ -21,12 +27,14 @@ function SurveyToolbar({
   isDeleteDisabled,
   onToggleDeleteModal,
 }) {
+  isDeleteDisabled = !canAddAndEditSurvey || isDeleteDisabled;
   const match = useRouteMatch();
   return (
     <DataToolbar id="survey-toolbar">
       <DataToolbarContent>
         <DataToolbarItem>
           <Checkbox
+            isDisabled={!canAddAndEditSurvey}
             isChecked={isAllSelected}
             onChange={isChecked => {
               onSelectAll(isChecked);
@@ -42,12 +50,16 @@ function SurveyToolbar({
             label={i18n._(t`On`)}
             labelOff={i18n._(t`Off`)}
             isChecked={surveyEnabled}
+            isDisabled={!canAddAndEditSurvey}
             onChange={() => onToggleSurvey(!surveyEnabled)}
           />
         </DataToolbarItem>
         <DataToolbarGroup>
           <DataToolbarItem>
-            <ToolbarAddButton linkTo={`${match.url}/add`} />
+            <ToolbarAddButton
+              isDisabled={!canAddAndEditSurvey}
+              linkTo={`${match.url}/add`}
+            />
           </DataToolbarItem>
           <DataToolbarItem>
             <Button
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyToolbar.test.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyToolbar.test.jsx
index 0249332aab..7cfde81af8 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyToolbar.test.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyToolbar.test.jsx
@@ -36,6 +36,7 @@ describe('<SurveyToolbar />', () => {
           isAllSelected
           onToggleDeleteModal={jest.fn()}
           onToggleSurvey={jest.fn()}
+          canAddAndEditSurvey
         />
       );
     });
@@ -84,4 +85,31 @@ describe('<SurveyToolbar />', () => {
     expect(wrapper.find('Switch').length).toBe(1);
     expect(wrapper.find('Switch').prop('isChecked')).toBe(true);
   });
+  test('all action buttons in toolbar are disabled', () => {
+    let wrapper;
+    act(() => {
+      wrapper = mountWithContexts(
+        <SurveyToolbar
+          surveyEnabled
+          isDeleteDisabled={false}
+          onSelectAll={jest.fn()}
+          isAllSelected
+          onToggleDelete={jest.fn()}
+          onToggleSurvey={jest.fn()}
+          canAddAndEditSurvey={false}
+        />
+      );
+    });
+    expect(
+      wrapper
+        .find('DataToolbar')
+        .find('Checkbox')
+        .prop('isDisabled')
+    ).toBe(true);
+    expect(wrapper.find('Switch').prop('isDisabled')).toBe(true);
+    expect(wrapper.find('ToolbarAddButton').prop('isDisabled')).toBe(true);
+    expect(wrapper.find('Button[variant="danger"]').prop('isDisabled')).toBe(
+      true
+    );
+  });
 });
diff --git a/awx/ui_next/src/screens/Template/Template.jsx b/awx/ui_next/src/screens/Template/Template.jsx
index 4588f1283f..a4091c85d5 100644
--- a/awx/ui_next/src/screens/Template/Template.jsx
+++ b/awx/ui_next/src/screens/Template/Template.jsx
@@ -71,6 +71,9 @@ function Template({ i18n, me, setBreadcrumb }) {
   };
 
   const canSeeNotificationsTab = me.is_system_auditor || isNotifAdmin;
+  const canAddAndEditSurvey =
+    template?.summary_fields?.user_capabilities.edit ||
+    template?.summary_fields?.user_capabilities.delete;
 
   const tabsArray = [
     { name: i18n._(t`Details`), link: `${match.url}/details` },
@@ -97,7 +100,7 @@ function Template({ i18n, me, setBreadcrumb }) {
       link: `${match.url}/completed_jobs`,
     },
     {
-      name: i18n._(t`Survey`),
+      name: canAddAndEditSurvey ? i18n._(t`Survey`) : i18n._(t`View Survey`),
       link: `${match.url}/survey`,
     }
   );
@@ -200,7 +203,10 @@ function Template({ i18n, me, setBreadcrumb }) {
           )}
           {template && (
             <Route path="/templates/:templateType/:id/survey">
-              <TemplateSurvey template={template} />
+              <TemplateSurvey
+                template={template}
+                canAddAndEditSurvey={canAddAndEditSurvey}
+              />
             </Route>
           )}
           {!hasRolesandTemplateLoading && (
diff --git a/awx/ui_next/src/screens/Template/TemplateSurvey.jsx b/awx/ui_next/src/screens/Template/TemplateSurvey.jsx
index dae02aa02a..262ec101fd 100644
--- a/awx/ui_next/src/screens/Template/TemplateSurvey.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateSurvey.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Switch, Route, useParams } from 'react-router-dom';
+import { Switch, Route, useParams, useLocation } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from '@api';
@@ -9,10 +9,12 @@ import ErrorDetail from '@components/ErrorDetail';
 import useRequest, { useDismissableError } from '@util/useRequest';
 import { SurveyList, SurveyQuestionAdd, SurveyQuestionEdit } from './Survey';
 
-function TemplateSurvey({ template, i18n }) {
+function TemplateSurvey({ template, canAddAndEditSurvey, i18n }) {
   const [surveyEnabled, setSurveyEnabled] = useState(template.survey_enabled);
 
   const { templateType } = useParams();
+  const location = useLocation();
+
   const {
     result: survey,
     request: fetchSurvey,
@@ -28,9 +30,10 @@ function TemplateSurvey({ template, i18n }) {
       return data;
     }, [template.id, templateType])
   );
+
   useEffect(() => {
     fetchSurvey();
-  }, [fetchSurvey]);
+  }, [fetchSurvey, location]);
 
   const { request: updateSurvey, error: updateError } = useRequest(
     useCallback(
@@ -82,12 +85,22 @@ function TemplateSurvey({ template, i18n }) {
   return (
     <>
       <Switch>
-        <Route path="/templates/:templateType/:id/survey/add">
-          <SurveyQuestionAdd survey={survey} updateSurvey={updateSurveySpec} />
-        </Route>
-        <Route path="/templates/:templateType/:id/survey/edit/:variable">
-          <SurveyQuestionEdit survey={survey} updateSurvey={updateSurveySpec} />
-        </Route>
+        {canAddAndEditSurvey && (
+          <Route path="/templates/:templateType/:id/survey/add">
+            <SurveyQuestionAdd
+              survey={survey}
+              updateSurvey={updateSurveySpec}
+            />
+          </Route>
+        )}
+        {canAddAndEditSurvey && (
+          <Route path="/templates/:templateType/:id/survey/edit/:variable">
+            <SurveyQuestionEdit
+              survey={survey}
+              updateSurvey={updateSurveySpec}
+            />
+          </Route>
+        )}
         <Route path="/templates/:templateType/:id/survey" exact>
           <SurveyList
             isLoading={isLoading}
@@ -96,6 +109,7 @@ function TemplateSurvey({ template, i18n }) {
             toggleSurvey={toggleSurvey}
             updateSurvey={updateSurveySpec}
             deleteSurvey={deleteSurvey}
+            canAddAndEditSurvey={canAddAndEditSurvey}
           />
         </Route>
       </Switch>
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
index 98de6a9432..1999ca0873 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
@@ -116,6 +116,9 @@ class WorkflowJobTemplate extends Component {
 
     const canSeeNotificationsTab = me.is_system_auditor || isNotifAdmin;
     const canToggleNotifications = isNotifAdmin;
+    const canAddAndEditSurvey =
+      template?.summary_fields?.user_capabilities.edit ||
+      template?.summary_fields?.user_capabilities.delete;
 
     const tabsArray = [
       { name: i18n._(t`Details`), link: `${match.url}/details` },
@@ -145,7 +148,7 @@ class WorkflowJobTemplate extends Component {
       link: `${match.url}/completed_jobs`,
     });
     tabsArray.push({
-      name: i18n._(t`Survey`),
+      name: canAddAndEditSurvey ? i18n._(t`Survey`) : i18n._(t`View Survey`),
       link: `${match.url}/survey`,
     });
 
@@ -269,7 +272,10 @@ class WorkflowJobTemplate extends Component {
             )}
             {template && (
               <Route path="/templates/:templateType/:id/survey">
-                <TemplateSurvey template={template} />
+                <TemplateSurvey
+                  template={template}
+                  canAddAndEditSurvey={canAddAndEditSurvey}
+                />
               </Route>
             )}
             <Route key="not-found" path="*">

From a95632c349a78c54becd7d98fa56683aac648bb3 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Wed, 8 Apr 2020 17:16:24 -0400
Subject: [PATCH 2/3] Adds error handling and validation. Also adresses small
 PR issues

---
 .../components/ErrorDetail/ErrorDetail.jsx    | 22 ++++---
 .../ErrorDetail/ErrorDetail.test.jsx          | 22 +++++++
 .../components/ErrorDetail/getErrorMessage.js | 15 +++++
 .../ErrorDetail/getErrorMessage.test.js       | 60 +++++++++++++++++++
 .../DeleteRoleConfirmationModal.test.jsx.snap |  2 +
 .../screens/Template/Survey/SurveyList.jsx    |  6 +-
 .../Template/Survey/SurveyList.test.jsx       |  6 +-
 .../Template/Survey/SurveyListItem.jsx        | 33 +++++-----
 .../Template/Survey/SurveyListItem.test.jsx   |  3 +-
 .../Template/Survey/SurveyQuestionForm.jsx    | 10 +++-
 .../screens/Template/Survey/SurveyToolbar.jsx | 10 ++--
 .../Template/Survey/SurveyToolbar.test.jsx    |  4 +-
 awx/ui_next/src/screens/Template/Template.jsx |  2 +-
 .../src/screens/Template/TemplateSurvey.jsx   |  8 +--
 .../screens/Template/WorkflowJobTemplate.jsx  |  2 +-
 .../Template/WorkflowJobTemplate.test.jsx     |  1 +
 awx/ui_next/src/util/validators.jsx           | 11 ++++
 17 files changed, 169 insertions(+), 48 deletions(-)
 create mode 100644 awx/ui_next/src/components/ErrorDetail/getErrorMessage.js
 create mode 100644 awx/ui_next/src/components/ErrorDetail/getErrorMessage.test.js

diff --git a/awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx b/awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx
index f1c309e959..898eef3609 100644
--- a/awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx
+++ b/awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx
@@ -9,6 +9,7 @@ import {
   CardBody as PFCardBody,
   Expandable as PFExpandable,
 } from '@patternfly/react-core';
+import getErrorMessage from './getErrorMessage';
 
 const Card = styled(PFCard)`
   background-color: var(--pf-global--BackgroundColor--200);
@@ -52,14 +53,7 @@ class ErrorDetail extends Component {
   renderNetworkError() {
     const { error } = this.props;
     const { response } = error;
-
-    let message = '';
-    if (response?.data) {
-      message =
-        typeof response.data === 'string'
-          ? response.data
-          : response.data?.detail;
-    }
+    const message = getErrorMessage(response);
 
     return (
       <Fragment>
@@ -67,7 +61,17 @@ class ErrorDetail extends Component {
           {response?.config?.method.toUpperCase()} {response?.config?.url}{' '}
           <strong>{response?.status}</strong>
         </CardBody>
-        <CardBody>{message}</CardBody>
+        <CardBody>
+          {Array.isArray(message) ? (
+            <ul>
+              {message.map(m => (
+                <li key={m}>{m}</li>
+              ))}
+            </ul>
+          ) : (
+            message
+          )}
+        </CardBody>
       </Fragment>
     );
   }
diff --git a/awx/ui_next/src/components/ErrorDetail/ErrorDetail.test.jsx b/awx/ui_next/src/components/ErrorDetail/ErrorDetail.test.jsx
index b6499766dc..409fefc3f8 100644
--- a/awx/ui_next/src/components/ErrorDetail/ErrorDetail.test.jsx
+++ b/awx/ui_next/src/components/ErrorDetail/ErrorDetail.test.jsx
@@ -21,4 +21,26 @@ describe('ErrorDetail', () => {
     );
     expect(wrapper).toHaveLength(1);
   });
+  test('testing errors', () => {
+    const wrapper = mountWithContexts(
+      <ErrorDetail
+        error={
+          new Error({
+            response: {
+              config: {
+                method: 'patch',
+              },
+              data: {
+                project: ['project error'],
+                inventory: ['inventory error'],
+              },
+            },
+          })
+        }
+      />
+    );
+    wrapper.find('Expandable').prop('onToggle')();
+    wrapper.update();
+    // console.log(wrapper.find('ErrorDetail').prop('error'));
+  });
 });
diff --git a/awx/ui_next/src/components/ErrorDetail/getErrorMessage.js b/awx/ui_next/src/components/ErrorDetail/getErrorMessage.js
new file mode 100644
index 0000000000..82783f8f63
--- /dev/null
+++ b/awx/ui_next/src/components/ErrorDetail/getErrorMessage.js
@@ -0,0 +1,15 @@
+export default function getErrorMessage(response) {
+  if (typeof response.data === 'string') {
+    return response.data;
+  }
+  if (!response.data) {
+    return null;
+  }
+  if (response.data.detail) {
+    return response.data.detail;
+  }
+  return Object.values(response.data).reduce(
+    (acc, currentValue) => acc.concat(currentValue),
+    []
+  );
+}
diff --git a/awx/ui_next/src/components/ErrorDetail/getErrorMessage.test.js b/awx/ui_next/src/components/ErrorDetail/getErrorMessage.test.js
new file mode 100644
index 0000000000..c67728f00b
--- /dev/null
+++ b/awx/ui_next/src/components/ErrorDetail/getErrorMessage.test.js
@@ -0,0 +1,60 @@
+import getErrorMessage from './getErrorMessage';
+
+describe('getErrorMessage', () => {
+  test('should return data string', () => {
+    const response = {
+      data: 'error response',
+    };
+    expect(getErrorMessage(response)).toEqual('error response');
+  });
+  test('should return detail string', () => {
+    const response = {
+      data: {
+        detail: 'detail string',
+      },
+    };
+    expect(getErrorMessage(response)).toEqual('detail string');
+  });
+  test('should return an array of strings', () => {
+    const response = {
+      data: {
+        project: ['project error response'],
+      },
+    };
+    expect(getErrorMessage(response)).toEqual(['project error response']);
+  });
+  test('should consolidate error messages from multiple keys into an array', () => {
+    const response = {
+      data: {
+        project: ['project error response'],
+        inventory: ['inventory error response'],
+        organization: ['org error response'],
+      },
+    };
+    expect(getErrorMessage(response)).toEqual([
+      'project error response',
+      'inventory error response',
+      'org error response',
+    ]);
+  });
+  test('should handle no response.data', () => {
+    const response = {};
+    expect(getErrorMessage(response)).toEqual(null);
+  });
+  test('should consolidate multiple error messages from multiple keys into an array', () => {
+    const response = {
+      data: {
+        project: ['project error response'],
+        inventory: [
+          'inventory error response',
+          'another inventory error response',
+        ],
+      },
+    };
+    expect(getErrorMessage(response)).toEqual([
+      'project error response',
+      'inventory error response',
+      'another inventory error response',
+    ]);
+  });
+});
diff --git a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
index e66d8780df..795f398ba2 100644
--- a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
+++ b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
@@ -322,6 +322,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
               className="pf-c-backdrop"
             >
               <FocusTrap
+                _createFocusTrap={[Function]}
                 active={true}
                 className="pf-l-bullseye"
                 focusTrapOptions={
@@ -330,6 +331,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                   }
                 }
                 paused={false}
+                tag="div"
               >
                 <div
                   className="pf-l-bullseye"
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyList.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyList.jsx
index 4110e56078..201136e1b3 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyList.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyList.jsx
@@ -22,7 +22,7 @@ function SurveyList({
   toggleSurvey,
   updateSurvey,
   deleteSurvey,
-  canAddAndEditSurvey,
+  canEdit,
   i18n,
 }) {
   const questions = survey?.spec || [];
@@ -98,7 +98,7 @@ function SurveyList({
             onSelect={() => handleSelect(question)}
             onMoveUp={moveUp}
             onMoveDown={moveDown}
-            canAddAndEditSurvey={canAddAndEditSurvey}
+            canEdit={canEdit}
           />
         ))}
         {isPreviewModalOpen && (
@@ -171,7 +171,7 @@ function SurveyList({
         surveyEnabled={surveyEnabled}
         onToggleSurvey={toggleSurvey}
         isDeleteDisabled={selected?.length === 0}
-        canAddAndEditSurvey={canAddAndEditSurvey}
+        canEdit={canEdit}
         onToggleDeleteModal={() => setIsDeleteModalOpen(true)}
       />
       {content}
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyList.test.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyList.test.jsx
index 8190a01162..0564010692 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyList.test.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyList.test.jsx
@@ -54,11 +54,7 @@ describe('<SurveyList />', () => {
     let wrapper;
     await act(async () => {
       wrapper = mountWithContexts(
-        <SurveyList
-          survey={surveyData}
-          deleteSurvey={deleteSurvey}
-          canAddAndEditSurvey
-        />
+        <SurveyList survey={surveyData} deleteSurvey={deleteSurvey} canEdit />
       );
     });
     wrapper.update();
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx
index bddffc0186..44260988b7 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx
@@ -4,7 +4,8 @@ import { withI18n } from '@lingui/react';
 import { Link } from 'react-router-dom';
 import {
   Button as _Button,
-  Chip as _Chip,
+  Chip,
+  ChipGroup,
   DataListAction as _DataListAction,
   DataListCheck,
   DataListItemCells,
@@ -29,11 +30,8 @@ const Button = styled(_Button)`
   padding-left: 0;
 `;
 const Required = styled.span`
-  color: red;
-  margin-left: 5px;
-`;
-const Chip = styled(_Chip)`
-  margin-right: 5px;
+  color: var(--pf-global--danger-color--100);
+  margin-left: var(--pf-global--spacer--xs);
 `;
 
 const Label = styled.b`
@@ -41,7 +39,7 @@ const Label = styled.b`
 `;
 
 function SurveyListItem({
-  canAddAndEditSurvey,
+  canEdit,
   question,
   i18n,
   isLast,
@@ -67,7 +65,7 @@ function SurveyListItem({
               <Button
                 variant="plain"
                 aria-label={i18n._(t`move up`)}
-                isDisabled={isFirst || !canAddAndEditSurvey}
+                isDisabled={isFirst || !canEdit}
                 onClick={() => onMoveUp(question)}
               >
                 <CaretUpIcon />
@@ -77,7 +75,7 @@ function SurveyListItem({
               <Button
                 variant="plain"
                 aria-label={i18n._(t`move down`)}
-                isDisabled={isLast || !canAddAndEditSurvey}
+                isDisabled={isLast || !canEdit}
                 onClick={() => onMoveDown(question)}
               >
                 <CaretDownIcon />
@@ -86,7 +84,7 @@ function SurveyListItem({
           </Stack>
         </DataListAction>
         <DataListCheck
-          isDisabled={!canAddAndEditSurvey}
+          isDisabled={!canEdit}
           checked={isChecked}
           onChange={onSelect}
           aria-labelledby="survey check"
@@ -120,12 +118,15 @@ function SurveyListItem({
                 <span>{i18n._(t`encrypted`).toUpperCase()}</span>
               )}
               {[question.type].includes('multiselect') &&
-                question.default.length > 0 &&
-                question.default.split('\n').map(chip => (
-                  <Chip key={chip} isReadOnly>
-                    {chip}
-                  </Chip>
-                ))}
+                question.default.length > 0 && (
+                  <ChipGroup numChips={5}>
+                    {question.default.split('\n').map(chip => (
+                      <Chip key={chip} isReadOnly>
+                        {chip}
+                      </Chip>
+                    ))}
+                  </ChipGroup>
+                )}
               {![question.type].includes('password') &&
                 ![question.type].includes('multiselect') && (
                   <span>{question.default}</span>
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyListItem.test.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyListItem.test.jsx
index 23083d3a95..af5b7e82c2 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyListItem.test.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyListItem.test.jsx
@@ -96,9 +96,10 @@ describe('<SurveyListItem />', () => {
         <SurveyListItem question={newItem} isChecked={false} isFirst isLast />
       );
     });
-    expect(wrapper.find('Chip').length).toBe(9);
+    expect(wrapper.find('Chip').length).toBe(6);
     wrapper
       .find('Chip')
+      .filter(chip => chip.prop('isOverFlowChip') !== true)
       .map(chip => expect(chip.prop('isReadOnly')).toBe(true));
   });
   test('items that are no required should have no an asterisk', () => {
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
index 4914e60c21..1706513d95 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
@@ -13,7 +13,13 @@ import FormField, {
   FieldTooltip,
 } from '@components/FormField';
 import AnsibleSelect from '@components/AnsibleSelect';
-import { required, noWhiteSpace, combine } from '@util/validators';
+import {
+  required,
+  noWhiteSpace,
+  combine,
+  maxLength,
+  defaultIsNotAvailable,
+} from '@util/validators';
 
 function AnswerTypeField({ i18n }) {
   const [field] = useField({
@@ -156,6 +162,7 @@ function SurveyQuestionForm({
               <FormField
                 id="question-default"
                 name="default"
+                validate={maxLength(formik.values.max, i18n)}
                 type={formik.values.type === 'text' ? 'text' : 'number'}
                 label={i18n._(t`Default answer`)}
               />
@@ -191,6 +198,7 @@ function SurveyQuestionForm({
                 <FormField
                   id="question-default"
                   name="default"
+                  validate={defaultIsNotAvailable(formik.values.choices, i18n)}
                   type={
                     formik.values.type === 'multiplechoice'
                       ? 'text'
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyToolbar.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyToolbar.jsx
index 8346535a8e..3dc82e67d4 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyToolbar.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyToolbar.jsx
@@ -18,7 +18,7 @@ const DataToolbar = styled(_DataToolbar)`
 `;
 
 function SurveyToolbar({
-  canAddAndEditSurvey,
+  canEdit,
   isAllSelected,
   onSelectAll,
   i18n,
@@ -27,14 +27,14 @@ function SurveyToolbar({
   isDeleteDisabled,
   onToggleDeleteModal,
 }) {
-  isDeleteDisabled = !canAddAndEditSurvey || isDeleteDisabled;
+  isDeleteDisabled = !canEdit || isDeleteDisabled;
   const match = useRouteMatch();
   return (
     <DataToolbar id="survey-toolbar">
       <DataToolbarContent>
         <DataToolbarItem>
           <Checkbox
-            isDisabled={!canAddAndEditSurvey}
+            isDisabled={!canEdit}
             isChecked={isAllSelected}
             onChange={isChecked => {
               onSelectAll(isChecked);
@@ -50,14 +50,14 @@ function SurveyToolbar({
             label={i18n._(t`On`)}
             labelOff={i18n._(t`Off`)}
             isChecked={surveyEnabled}
-            isDisabled={!canAddAndEditSurvey}
+            isDisabled={!canEdit}
             onChange={() => onToggleSurvey(!surveyEnabled)}
           />
         </DataToolbarItem>
         <DataToolbarGroup>
           <DataToolbarItem>
             <ToolbarAddButton
-              isDisabled={!canAddAndEditSurvey}
+              isDisabled={!canEdit}
               linkTo={`${match.url}/add`}
             />
           </DataToolbarItem>
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyToolbar.test.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyToolbar.test.jsx
index 7cfde81af8..8931c9a7ec 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyToolbar.test.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyToolbar.test.jsx
@@ -36,7 +36,7 @@ describe('<SurveyToolbar />', () => {
           isAllSelected
           onToggleDeleteModal={jest.fn()}
           onToggleSurvey={jest.fn()}
-          canAddAndEditSurvey
+          canEdit
         />
       );
     });
@@ -96,7 +96,7 @@ describe('<SurveyToolbar />', () => {
           isAllSelected
           onToggleDelete={jest.fn()}
           onToggleSurvey={jest.fn()}
-          canAddAndEditSurvey={false}
+          canEdit={false}
         />
       );
     });
diff --git a/awx/ui_next/src/screens/Template/Template.jsx b/awx/ui_next/src/screens/Template/Template.jsx
index a4091c85d5..c916500685 100644
--- a/awx/ui_next/src/screens/Template/Template.jsx
+++ b/awx/ui_next/src/screens/Template/Template.jsx
@@ -205,7 +205,7 @@ function Template({ i18n, me, setBreadcrumb }) {
             <Route path="/templates/:templateType/:id/survey">
               <TemplateSurvey
                 template={template}
-                canAddAndEditSurvey={canAddAndEditSurvey}
+                canEdit={canAddAndEditSurvey}
               />
             </Route>
           )}
diff --git a/awx/ui_next/src/screens/Template/TemplateSurvey.jsx b/awx/ui_next/src/screens/Template/TemplateSurvey.jsx
index 262ec101fd..fc15a71a8c 100644
--- a/awx/ui_next/src/screens/Template/TemplateSurvey.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateSurvey.jsx
@@ -9,7 +9,7 @@ import ErrorDetail from '@components/ErrorDetail';
 import useRequest, { useDismissableError } from '@util/useRequest';
 import { SurveyList, SurveyQuestionAdd, SurveyQuestionEdit } from './Survey';
 
-function TemplateSurvey({ template, canAddAndEditSurvey, i18n }) {
+function TemplateSurvey({ template, canEdit, i18n }) {
   const [surveyEnabled, setSurveyEnabled] = useState(template.survey_enabled);
 
   const { templateType } = useParams();
@@ -85,7 +85,7 @@ function TemplateSurvey({ template, canAddAndEditSurvey, i18n }) {
   return (
     <>
       <Switch>
-        {canAddAndEditSurvey && (
+        {canEdit && (
           <Route path="/templates/:templateType/:id/survey/add">
             <SurveyQuestionAdd
               survey={survey}
@@ -93,7 +93,7 @@ function TemplateSurvey({ template, canAddAndEditSurvey, i18n }) {
             />
           </Route>
         )}
-        {canAddAndEditSurvey && (
+        {canEdit && (
           <Route path="/templates/:templateType/:id/survey/edit/:variable">
             <SurveyQuestionEdit
               survey={survey}
@@ -109,7 +109,7 @@ function TemplateSurvey({ template, canAddAndEditSurvey, i18n }) {
             toggleSurvey={toggleSurvey}
             updateSurvey={updateSurveySpec}
             deleteSurvey={deleteSurvey}
-            canAddAndEditSurvey={canAddAndEditSurvey}
+            canEdit={canEdit}
           />
         </Route>
       </Switch>
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
index 1999ca0873..ba4530a673 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
@@ -274,7 +274,7 @@ class WorkflowJobTemplate extends Component {
               <Route path="/templates/:templateType/:id/survey">
                 <TemplateSurvey
                   template={template}
-                  canAddAndEditSurvey={canAddAndEditSurvey}
+                  canEdit={canAddAndEditSurvey}
                 />
               </Route>
             )}
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.test.jsx
index 611f75ae29..ae5dc41fa9 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.test.jsx
@@ -48,6 +48,7 @@ describe('<WorkflowJobTemplate/>', () => {
               { name: 'Label 3', id: 3 },
             ],
           },
+          user_capabilities: {},
         },
         related: {
           webhook_key: '/api/v2/workflow_job_templates/57/webhook_key/',
diff --git a/awx/ui_next/src/util/validators.jsx b/awx/ui_next/src/util/validators.jsx
index d21347f3d1..1a6e3128a7 100644
--- a/awx/ui_next/src/util/validators.jsx
+++ b/awx/ui_next/src/util/validators.jsx
@@ -36,6 +36,17 @@ export function minMaxValue(min, max, i18n) {
   };
 }
 
+export function defaultIsNotAvailable(choices, i18n) {
+  return defaultValue => {
+    if (!choices.includes(defaultValue)) {
+      return i18n._(
+        t`Default choice must be answered from the choices listed.`
+      );
+    }
+    return undefined;
+  };
+}
+
 export function requiredEmail(i18n) {
   return value => {
     if (!value) {

From ee6fda9f8aca8954128ef8290be8dd88fa2f0155 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Mon, 13 Apr 2020 15:30:35 -0400
Subject: [PATCH 3/3] moves validator function

---
 .../ErrorDetail/ErrorDetail.test.jsx          |  1 -
 .../components/ErrorDetail/getErrorMessage.js |  6 +++---
 .../LaunchPrompt/LaunchPrompt.test.jsx        |  8 +++++++-
 .../DeleteRoleConfirmationModal.test.jsx.snap |  2 --
 .../Template/Survey/SurveyQuestionForm.jsx    | 19 ++++++++++++-------
 awx/ui_next/src/util/validators.jsx           | 11 -----------
 6 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/awx/ui_next/src/components/ErrorDetail/ErrorDetail.test.jsx b/awx/ui_next/src/components/ErrorDetail/ErrorDetail.test.jsx
index 409fefc3f8..383c41e4ed 100644
--- a/awx/ui_next/src/components/ErrorDetail/ErrorDetail.test.jsx
+++ b/awx/ui_next/src/components/ErrorDetail/ErrorDetail.test.jsx
@@ -41,6 +41,5 @@ describe('ErrorDetail', () => {
     );
     wrapper.find('Expandable').prop('onToggle')();
     wrapper.update();
-    // console.log(wrapper.find('ErrorDetail').prop('error'));
   });
 });
diff --git a/awx/ui_next/src/components/ErrorDetail/getErrorMessage.js b/awx/ui_next/src/components/ErrorDetail/getErrorMessage.js
index 82783f8f63..ca6fbb23be 100644
--- a/awx/ui_next/src/components/ErrorDetail/getErrorMessage.js
+++ b/awx/ui_next/src/components/ErrorDetail/getErrorMessage.js
@@ -1,10 +1,10 @@
 export default function getErrorMessage(response) {
-  if (typeof response.data === 'string') {
-    return response.data;
-  }
   if (!response.data) {
     return null;
   }
+  if (typeof response.data === 'string') {
+    return response.data;
+  }
   if (response.data.detail) {
     return response.data.detail;
   }
diff --git a/awx/ui_next/src/components/LaunchPrompt/LaunchPrompt.test.jsx b/awx/ui_next/src/components/LaunchPrompt/LaunchPrompt.test.jsx
index 3a490db6bc..78e8dc5504 100644
--- a/awx/ui_next/src/components/LaunchPrompt/LaunchPrompt.test.jsx
+++ b/awx/ui_next/src/components/LaunchPrompt/LaunchPrompt.test.jsx
@@ -6,9 +6,11 @@ import InventoryStep from './InventoryStep';
 import CredentialsStep from './CredentialsStep';
 import OtherPromptsStep from './OtherPromptsStep';
 import PreviewStep from './PreviewStep';
-import { InventoriesAPI } from '@api';
+import { InventoriesAPI, CredentialsAPI, CredentialTypesAPI } from '@api';
 
 jest.mock('@api/models/Inventories');
+jest.mock('@api/models/CredentialTypes');
+jest.mock('@api/models/Credentials');
 
 let config;
 const resource = {
@@ -25,6 +27,10 @@ describe('LaunchPrompt', () => {
         count: 1,
       },
     });
+    CredentialsAPI.read.mockResolvedValue({
+      data: { results: [{ id: 1 }], count: 1 },
+    });
+    CredentialTypesAPI.loadAllTypes({ data: { results: [{ type: 'ssh' }] } });
 
     config = {
       can_start_without_user_input: false,
diff --git a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
index 795f398ba2..e66d8780df 100644
--- a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
+++ b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap
@@ -322,7 +322,6 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
               className="pf-c-backdrop"
             >
               <FocusTrap
-                _createFocusTrap={[Function]}
                 active={true}
                 className="pf-l-bullseye"
                 focusTrapOptions={
@@ -331,7 +330,6 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                   }
                 }
                 paused={false}
-                tag="div"
               >
                 <div
                   className="pf-l-bullseye"
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
index 1706513d95..78c59d274f 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
@@ -13,13 +13,7 @@ import FormField, {
   FieldTooltip,
 } from '@components/FormField';
 import AnsibleSelect from '@components/AnsibleSelect';
-import {
-  required,
-  noWhiteSpace,
-  combine,
-  maxLength,
-  defaultIsNotAvailable,
-} from '@util/validators';
+import { required, noWhiteSpace, combine, maxLength } from '@util/validators';
 
 function AnswerTypeField({ i18n }) {
   const [field] = useField({
@@ -72,6 +66,17 @@ function SurveyQuestionForm({
   submitError,
   i18n,
 }) {
+  const defaultIsNotAvailable = choices => {
+    return defaultValue => {
+      if (!choices.includes(defaultValue)) {
+        return i18n._(
+          t`Default choice must be answered from the choices listed.`
+        );
+      }
+      return undefined;
+    };
+  };
+
   return (
     <Formik
       initialValues={{
diff --git a/awx/ui_next/src/util/validators.jsx b/awx/ui_next/src/util/validators.jsx
index 1a6e3128a7..d21347f3d1 100644
--- a/awx/ui_next/src/util/validators.jsx
+++ b/awx/ui_next/src/util/validators.jsx
@@ -36,17 +36,6 @@ export function minMaxValue(min, max, i18n) {
   };
 }
 
-export function defaultIsNotAvailable(choices, i18n) {
-  return defaultValue => {
-    if (!choices.includes(defaultValue)) {
-      return i18n._(
-        t`Default choice must be answered from the choices listed.`
-      );
-    }
-    return undefined;
-  };
-}
-
 export function requiredEmail(i18n) {
   return value => {
     if (!value) {