diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx
index 95735b4af4..25d95f4237 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx
@@ -1,7 +1,6 @@
import 'styled-components/macro';
import React from 'react';
import { t } from '@lingui/macro';
-
import { Link } from 'react-router-dom';
import {
Button as _Button,
@@ -14,8 +13,13 @@ import {
DataListItem,
Stack,
StackItem,
+ Tooltip,
} from '@patternfly/react-core';
-import { CaretDownIcon, CaretUpIcon } from '@patternfly/react-icons';
+import {
+ CaretDownIcon,
+ CaretUpIcon,
+ PencilAltIcon,
+} from '@patternfly/react-icons';
import styled from 'styled-components';
import ChipGroup from '../../../components/ChipGroup';
@@ -27,11 +31,13 @@ const DataListAction = styled(_DataListAction)`
padding-bottom: 0;
}
`;
+
const Button = styled(_Button)`
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
`;
+
const Required = styled.span`
color: var(--pf-global--danger-color--100);
margin-left: var(--pf-global--spacer--xs);
@@ -41,10 +47,13 @@ const Label = styled.b`
margin-right: 20px;
`;
+const EditSection = styled(_DataListAction)``;
+
+const EditButton = styled(_Button)``;
+
function SurveyListItem({
canEdit,
question,
-
isLast,
isFirst,
isChecked,
@@ -116,7 +125,6 @@ function SurveyListItem({
)}
>
,
-
{question.type}
@@ -146,9 +154,27 @@ function SurveyListItem({
,
]}
/>
+
+ {canEdit && (
+
+
+
+
+
+
+
+ )}
+
);
}
-
export default SurveyListItem;
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 6a7cfe4227..d9dc7ab741 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyListItem.test.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyListItem.test.jsx
@@ -4,7 +4,13 @@ import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
import SurveyListItem from './SurveyListItem';
describe('', () => {
- const item = { question_name: 'Foo', default: 'Bar', type: 'text', id: 1 };
+ const item = {
+ question_name: 'Foo',
+ variable: 'buzz',
+ default: 'Bar',
+ type: 'text',
+ id: 1,
+ };
test('renders successfully', () => {
let wrapper;
act(() => {
@@ -122,13 +128,7 @@ describe('', () => {
let wrapper;
act(() => {
wrapper = mountWithContexts(
-
+
);
});
expect(wrapper.find('button[aria-label="move up"]').prop('disabled')).toBe(
@@ -137,5 +137,19 @@ describe('', () => {
expect(
wrapper.find('button[aria-label="move down"]').prop('disabled')
).toBe(true);
+ expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
+ });
+
+ test('edit button shown to users with edit capabilities', () => {
+ let wrapper;
+ act(() => {
+ wrapper = mountWithContexts(
+
+ );
+ });
+ expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
+ expect(wrapper.find('Button[ouiaId="edit-survey-buzz"]').prop('to')).toBe(
+ 'survey/edit?question_variable=buzz'
+ );
});
});