External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-11 10:00:01 -03:30
Code Issues Packages Projects Releases Wiki Activity

Add edit icon to SurveyListItem

Browse Source 
Add edit icon to SurveyListItem

closes: https://github.com/ansible/awx/issues/10095
This commit is contained in:
nixocio 2021-07-14 10:04:06 -04:00
parent 4eca133080
commit ef4feae9bf
2 changed files with 53 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
awx/ui_next/src/screens/Template/Survey/SurveyListItem.jsx
View File

@ -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({
)}
</>
</DataListCell>,
<DataListCell key="type">
<Label>{t`Type`}</Label>
{question.type}
@ -146,9 +154,27 @@ function SurveyListItem({
</DataListCell>,
]}
/>
<EditSection aria-label={t`actions`}>
{canEdit && (
<EditButton variant="plain">
<Tooltip content={t`Edit Survey`} position="top">
<EditButton
ouiaId={`edit-survey-${question.variable}`}
aria-label={t`edit survey`}
variant="plain"
component={Link}
to={`survey/edit?question_variable=${encodeURIComponent(
question.variable
)}`}
>
<PencilAltIcon />
</EditButton>
</Tooltip>
</EditButton>
)}
</EditSection>
</DataListItemRow>
</DataListItem>
);
}
export default SurveyListItem;

30
awx/ui_next/src/screens/Template/Survey/SurveyListItem.test.jsx
View File

@ -4,7 +4,13 @@ import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
import SurveyListItem from './SurveyListItem';
describe('<SurveyListItem />', () => {
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('<SurveyListItem />', () => {
let wrapper;
act(() => {
wrapper = mountWithContexts(
<SurveyListItem
question={item}
canAddAndDelete={false}
isChecked={false}
isFirst
isLast
/>
<SurveyListItem canEdit={false} question={item} isChecked={false} />
);
});
expect(wrapper.find('button[aria-label="move up"]').prop('disabled')).toBe(
@ -137,5 +137,19 @@ describe('<SurveyListItem />', () => {
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(
<SurveyListItem canEdit question={item} isChecked={false} />
);
});
expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
expect(wrapper.find('Button[ouiaId="edit-survey-buzz"]').prop('to')).toBe(
'survey/edit?question_variable=buzz'
);
});
});