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' + ); }); });