mirror of
https://github.com/ansible/awx.git
synced 2026-01-11 18:09:57 -03:30
updated patternfly
This commit is contained in:
Alex Corey
parent
a259e48377
commit
4c2fd056ef
92
awx/ui/package-lock.json
generated
92
awx/ui/package-lock.json
generated
@ -6,10 +6,10 @@
|
||||
"": {
|
||||
"dependencies": {
|
||||
"@lingui/react": "3.9.0",
|
||||
"@patternfly/patternfly": "4.102.1",
|
||||
"@patternfly/react-core": "4.121.1",
|
||||
"@patternfly/react-icons": "4.7.22",
|
||||
"@patternfly/react-table": "4.26.7",
|
||||
"@patternfly/patternfly": "4.159.1",
|
||||
"@patternfly/react-core": "4.175.4",
|
||||
"@patternfly/react-icons": "4.26.4",
|
||||
"@patternfly/react-table": "4.44.4",
|
||||
"ace-builds": "^1.4.12",
|
||||
"ansi-to-html": "0.7.2",
|
||||
"axios": "0.22.0",
|
||||
@ -2614,22 +2614,22 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@patternfly/patternfly": {
|
||||
"version": "4.102.1",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.102.1.tgz",
|
||||
"integrity": "sha512-YQSJH4EirnFdwJ3eN7BUgGj/Q3bg/Lmc+8vU/bhIDnRuk5KqGZ7xbVCPrWwrV0oYrfIUAWgbrbJjpP03VjrJLw=="
|
||||
"version": "4.159.1",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.159.1.tgz",
|
||||
"integrity": "sha512-CPLE7yAmtETH8TAdQhHkyFmyvjGwsv/7PeR4k57DY9X4IHpx41m4SXrv9cBCr/+Uy8o2SjvE8dtlZb+h0rLByQ=="
|
||||
},
|
||||
"node_modules/@patternfly/react-core": {
|
||||
"version": "4.121.1",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.121.1.tgz",
|
||||
"integrity": "sha512-WIlh7Wd4o4r0PA2+9/fPcOxMAnc2H/InPx8rulJzD9a8KdUevl7+XDtKok6p6grKRUriV5wKPQyfZrxcb5VVHw==",
|
||||
"version": "4.175.4",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.175.4.tgz",
|
||||
"integrity": "sha512-bnQhvXKbprni5WhlbMI+nbYxwMR03bFZtUk+F7JiLM96uk/yCrPjUes6u8Pbgkh/HhsRYx8K1kx84WmC+MyD5w==",
|
||||
"dependencies": {
|
||||
"@patternfly/react-icons": "^4.10.7",
|
||||
"@patternfly/react-styles": "^4.10.7",
|
||||
"@patternfly/react-tokens": "^4.11.8",
|
||||
"@patternfly/react-icons": "^4.26.4",
|
||||
"@patternfly/react-styles": "^4.25.4",
|
||||
"@patternfly/react-tokens": "^4.27.4",
|
||||
"focus-trap": "6.2.2",
|
||||
"react-dropzone": "9.0.0",
|
||||
"tippy.js": "5.1.2",
|
||||
"tslib": "1.13.0"
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
@ -2646,12 +2646,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@patternfly/react-icons": {
|
||||
"version": "4.7.22",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.7.22.tgz",
|
||||
"integrity": "sha512-JDsnebr9CNIyrv9yjaGFQ56OChbV6KcxMYBIpNc8/sZdU4TXHWNC7P7rlUM/BuGpbWvyaOJtscRuf5uteIKX3A==",
|
||||
"version": "4.26.4",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.26.4.tgz",
|
||||
"integrity": "sha512-h1NJixtNVK+nYxLON3HOO0xguA9qXQ5rkGUo4TZJ/kRehFCJMH8PPeebdOAKgAo38NjS2/06+atNKjDRl6zYcA==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0",
|
||||
"react-dom": "^16.8.0"
|
||||
"react": "^16.8.0 || ^17.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@patternfly/react-styles": {
|
||||
@ -2660,14 +2660,14 @@
|
||||
"integrity": "sha512-GHFLzsvyimymkGTTyTW8HZDlhYbGpCqw/69Se1EHCaZnbTYluiJMRI6YfNTRC5ZvYF+x4GMAG5AjwQ5LfbZ/xg=="
|
||||
},
|
||||
"node_modules/@patternfly/react-table": {
|
||||
"version": "4.26.7",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.26.7.tgz",
|
||||
"integrity": "sha512-rG6ZrkOf9sDGoKFP5VuntmB2DiOr2CyStZ4TKSFpH55ZIIIQB9FtuaDmX58cTE0xDpP4YW/NPEKkWHDVo7t76Q==",
|
||||
"version": "4.44.4",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.44.4.tgz",
|
||||
"integrity": "sha512-UV2kq4OV1v6Hv2TXvvsEApPwbAyD6zvurvl0/BZoqqEHTWVQedG0m1jUN9jFMTJiD4GTESvg6TAcSowGkJlTug==",
|
||||
"dependencies": {
|
||||
"@patternfly/react-core": "^4.115.2",
|
||||
"@patternfly/react-icons": "^4.10.2",
|
||||
"@patternfly/react-styles": "^4.10.2",
|
||||
"@patternfly/react-tokens": "^4.11.3",
|
||||
"@patternfly/react-core": "^4.175.4",
|
||||
"@patternfly/react-icons": "^4.26.4",
|
||||
"@patternfly/react-styles": "^4.25.4",
|
||||
"@patternfly/react-tokens": "^4.27.4",
|
||||
"lodash": "^4.17.19",
|
||||
"tslib": "1.13.0"
|
||||
},
|
||||
@ -28535,22 +28535,22 @@
|
||||
"dev": true
|
||||
},
|
||||
"@patternfly/patternfly": {
|
||||
"version": "4.102.1",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.102.1.tgz",
|
||||
"integrity": "sha512-YQSJH4EirnFdwJ3eN7BUgGj/Q3bg/Lmc+8vU/bhIDnRuk5KqGZ7xbVCPrWwrV0oYrfIUAWgbrbJjpP03VjrJLw=="
|
||||
"version": "4.159.1",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.159.1.tgz",
|
||||
"integrity": "sha512-CPLE7yAmtETH8TAdQhHkyFmyvjGwsv/7PeR4k57DY9X4IHpx41m4SXrv9cBCr/+Uy8o2SjvE8dtlZb+h0rLByQ=="
|
||||
},
|
||||
"@patternfly/react-core": {
|
||||
"version": "4.121.1",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.121.1.tgz",
|
||||
"integrity": "sha512-WIlh7Wd4o4r0PA2+9/fPcOxMAnc2H/InPx8rulJzD9a8KdUevl7+XDtKok6p6grKRUriV5wKPQyfZrxcb5VVHw==",
|
||||
"version": "4.175.4",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.175.4.tgz",
|
||||
"integrity": "sha512-bnQhvXKbprni5WhlbMI+nbYxwMR03bFZtUk+F7JiLM96uk/yCrPjUes6u8Pbgkh/HhsRYx8K1kx84WmC+MyD5w==",
|
||||
"requires": {
|
||||
"@patternfly/react-icons": "^4.10.7",
|
||||
"@patternfly/react-styles": "^4.10.7",
|
||||
"@patternfly/react-tokens": "^4.11.8",
|
||||
"@patternfly/react-icons": "^4.26.4",
|
||||
"@patternfly/react-styles": "^4.25.4",
|
||||
"@patternfly/react-tokens": "^4.27.4",
|
||||
"focus-trap": "6.2.2",
|
||||
"react-dropzone": "9.0.0",
|
||||
"tippy.js": "5.1.2",
|
||||
"tslib": "1.13.0"
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@patternfly/react-icons": {
|
||||
@ -28562,9 +28562,9 @@
|
||||
}
|
||||
},
|
||||
"@patternfly/react-icons": {
|
||||
"version": "4.7.22",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.7.22.tgz",
|
||||
"integrity": "sha512-JDsnebr9CNIyrv9yjaGFQ56OChbV6KcxMYBIpNc8/sZdU4TXHWNC7P7rlUM/BuGpbWvyaOJtscRuf5uteIKX3A==",
|
||||
"version": "4.26.4",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.26.4.tgz",
|
||||
"integrity": "sha512-h1NJixtNVK+nYxLON3HOO0xguA9qXQ5rkGUo4TZJ/kRehFCJMH8PPeebdOAKgAo38NjS2/06+atNKjDRl6zYcA==",
|
||||
"requires": {}
|
||||
},
|
||||
"@patternfly/react-styles": {
|
||||
@ -28573,14 +28573,14 @@
|
||||
"integrity": "sha512-GHFLzsvyimymkGTTyTW8HZDlhYbGpCqw/69Se1EHCaZnbTYluiJMRI6YfNTRC5ZvYF+x4GMAG5AjwQ5LfbZ/xg=="
|
||||
},
|
||||
"@patternfly/react-table": {
|
||||
"version": "4.26.7",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.26.7.tgz",
|
||||
"integrity": "sha512-rG6ZrkOf9sDGoKFP5VuntmB2DiOr2CyStZ4TKSFpH55ZIIIQB9FtuaDmX58cTE0xDpP4YW/NPEKkWHDVo7t76Q==",
|
||||
"version": "4.44.4",
|
||||
"resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.44.4.tgz",
|
||||
"integrity": "sha512-UV2kq4OV1v6Hv2TXvvsEApPwbAyD6zvurvl0/BZoqqEHTWVQedG0m1jUN9jFMTJiD4GTESvg6TAcSowGkJlTug==",
|
||||
"requires": {
|
||||
"@patternfly/react-core": "^4.115.2",
|
||||
"@patternfly/react-icons": "^4.10.2",
|
||||
"@patternfly/react-styles": "^4.10.2",
|
||||
"@patternfly/react-tokens": "^4.11.3",
|
||||
"@patternfly/react-core": "^4.175.4",
|
||||
"@patternfly/react-icons": "^4.26.4",
|
||||
"@patternfly/react-styles": "^4.25.4",
|
||||
"@patternfly/react-tokens": "^4.27.4",
|
||||
"lodash": "^4.17.19",
|
||||
"tslib": "1.13.0"
|
||||
},
|
||||
|
||||
@ -6,10 +6,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@lingui/react": "3.9.0",
|
||||
"@patternfly/patternfly": "4.102.1",
|
||||
"@patternfly/react-core": "4.121.1",
|
||||
"@patternfly/react-icons": "4.7.22",
|
||||
"@patternfly/react-table": "4.26.7",
|
||||
"@patternfly/patternfly": "4.159.1",
|
||||
"@patternfly/react-core": "4.175.4",
|
||||
"@patternfly/react-icons": "4.26.4",
|
||||
"@patternfly/react-table": "4.44.4",
|
||||
"ace-builds": "^1.4.12",
|
||||
"ansi-to-html": "0.7.2",
|
||||
"axios": "0.22.0",
|
||||
|
||||
@ -1,15 +1,18 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
Button,
|
||||
DataList,
|
||||
DataListAction,
|
||||
DragDrop,
|
||||
Droppable,
|
||||
Draggable,
|
||||
DataListItemRow,
|
||||
DataListItemCells,
|
||||
DataList,
|
||||
DataListItem,
|
||||
DataListCell,
|
||||
DataListItemRow,
|
||||
DataListControl,
|
||||
DataListDragButton,
|
||||
DataListItemCells,
|
||||
} from '@patternfly/react-core';
|
||||
import { TimesIcon } from '@patternfly/react-icons';
|
||||
import styled from 'styled-components';
|
||||
@ -23,112 +26,82 @@ const RemoveActionSection = styled(DataListAction)`
|
||||
`;
|
||||
|
||||
function DraggableSelectedList({ selected, onRemove, onRowDrag }) {
|
||||
const [liveText, setLiveText] = useState('');
|
||||
const [id, setId] = useState('');
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
||||
const onDragStart = (newId) => {
|
||||
setId(newId);
|
||||
setLiveText(t`Dragging started for item id: ${newId}.`);
|
||||
setIsDragging(true);
|
||||
};
|
||||
|
||||
const onDragMove = (oldIndex, newIndex) => {
|
||||
setLiveText(
|
||||
t`Dragging item ${id}. Item with index ${oldIndex} in now ${newIndex}.`
|
||||
);
|
||||
};
|
||||
|
||||
const onDragCancel = () => {
|
||||
setLiveText(t`Dragging cancelled. List is unchanged.`);
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
const onDragFinish = (newItemOrder) => {
|
||||
const selectedItems = newItemOrder.map((item) =>
|
||||
selected.find((i) => i.name === item)
|
||||
);
|
||||
onRowDrag(selectedItems);
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
const removeItem = (item) => {
|
||||
onRemove(selected.find((i) => i.name === item));
|
||||
};
|
||||
|
||||
function reorder(list, startIndex, endIndex) {
|
||||
const result = Array.from(list);
|
||||
const [removed] = result.splice(startIndex, 1);
|
||||
result.splice(endIndex, 0, removed);
|
||||
return result;
|
||||
}
|
||||
|
||||
function dragItem(item, dest) {
|
||||
if (!dest || item.index === dest.index) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const newItems = reorder(selected, item.index, dest.index);
|
||||
onRowDrag(newItems);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (selected.length <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const orderedList = selected.map((item) => item?.name);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataList
|
||||
aria-label={t`Draggable list to reorder and remove selected items.`}
|
||||
data-cy="draggable-list"
|
||||
itemOrder={orderedList}
|
||||
onDragCancel={onDragCancel}
|
||||
onDragFinish={onDragFinish}
|
||||
onDragMove={onDragMove}
|
||||
onDragStart={onDragStart}
|
||||
>
|
||||
{orderedList.map((label, index) => {
|
||||
const rowPosition = index + 1;
|
||||
return (
|
||||
<DataListItem id={label} key={rowPosition}>
|
||||
<DataListItemRow>
|
||||
<DataListControl>
|
||||
<DataListDragButton
|
||||
aria-label={t`Reorder`}
|
||||
aria-labelledby={rowPosition}
|
||||
aria-describedby={t`Press space or enter to begin dragging,
|
||||
and use the arrow keys to navigate up or down.
|
||||
Press enter to confirm the drag, or any other key to
|
||||
cancel the drag operation.`}
|
||||
aria-pressed="false"
|
||||
data-cy={`reorder-${label}`}
|
||||
isDisabled={selected.length === 1}
|
||||
/>
|
||||
</DataListControl>
|
||||
<DataListItemCells
|
||||
dataListCells={[
|
||||
<DataListCell key={label}>
|
||||
<span id={rowPosition}>{`${rowPosition}. ${label}`}</span>
|
||||
</DataListCell>,
|
||||
]}
|
||||
/>
|
||||
<RemoveActionSection aria-label={t`Actions`} id={rowPosition}>
|
||||
<Button
|
||||
onClick={() => removeItem(label)}
|
||||
variant="plain"
|
||||
aria-label={t`Remove`}
|
||||
ouiaId={`draggable-list-remove-${label}`}
|
||||
isDisabled={isDragging}
|
||||
>
|
||||
<TimesIcon />
|
||||
</Button>
|
||||
</RemoveActionSection>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
);
|
||||
})}
|
||||
</DataList>
|
||||
<div className="pf-screen-reader" aria-live="assertive">
|
||||
{liveText}
|
||||
</div>
|
||||
</>
|
||||
<DragDrop onDrop={dragItem}>
|
||||
<Droppable>
|
||||
<DataList>
|
||||
{selected.map(({ name: label, id }, index) => {
|
||||
const rowPosition = index + 1;
|
||||
return (
|
||||
<Draggable value={id} key={rowPosition}>
|
||||
<DataListItem>
|
||||
<DataListItemRow>
|
||||
<DataListControl>
|
||||
<DataListDragButton isDisabled={selected.length < 2} />
|
||||
</DataListControl>
|
||||
<DataListItemCells
|
||||
dataListCells={[
|
||||
<DataListCell key={label}>
|
||||
<span
|
||||
id={rowPosition}
|
||||
>{`${rowPosition}. ${label}`}</span>
|
||||
</DataListCell>,
|
||||
]}
|
||||
/>
|
||||
<RemoveActionSection>
|
||||
<Button
|
||||
onClick={() => removeItem(label)}
|
||||
variant="plain"
|
||||
aria-label={t`Remove`}
|
||||
ouiaId={`draggable-list-remove-${label}`}
|
||||
>
|
||||
<TimesIcon />
|
||||
</Button>
|
||||
</RemoveActionSection>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
</Draggable>
|
||||
);
|
||||
})}
|
||||
</DataList>
|
||||
</Droppable>
|
||||
</DragDrop>
|
||||
);
|
||||
}
|
||||
|
||||
const ListItem = PropTypes.shape({
|
||||
const SelectedListItem = PropTypes.shape({
|
||||
id: PropTypes.number.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
});
|
||||
DraggableSelectedList.propTypes = {
|
||||
onRemove: PropTypes.func,
|
||||
onRowDrag: PropTypes.func,
|
||||
selected: PropTypes.arrayOf(ListItem),
|
||||
selected: PropTypes.arrayOf(SelectedListItem),
|
||||
};
|
||||
DraggableSelectedList.defaultProps = {
|
||||
onRemove: () => null,
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
|
||||
import DraggableSelectedList from './DraggableSelectedList';
|
||||
|
||||
@ -28,16 +27,16 @@ describe('<DraggableSelectedList />', () => {
|
||||
/>
|
||||
);
|
||||
expect(wrapper.find('DraggableSelectedList').length).toBe(1);
|
||||
expect(wrapper.find('DataListItem').length).toBe(2);
|
||||
expect(wrapper.find('Draggable').length).toBe(2);
|
||||
expect(
|
||||
wrapper
|
||||
.find('DataListItem DataListCell')
|
||||
.find('Draggable')
|
||||
.first()
|
||||
.containsMatchingElement(<span>1. foo</span>)
|
||||
).toEqual(true);
|
||||
expect(
|
||||
wrapper
|
||||
.find('DataListItem DataListCell')
|
||||
.find('Draggable')
|
||||
.last()
|
||||
.containsMatchingElement(<span>2. bar</span>)
|
||||
).toEqual(true);
|
||||
@ -65,64 +64,10 @@ describe('<DraggableSelectedList />', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<DraggableSelectedList selected={mockSelected} onRemove={onRemove} />
|
||||
);
|
||||
expect(
|
||||
wrapper
|
||||
.find('DataListDragButton[aria-label="Reorder"]')
|
||||
.prop('isDisabled')
|
||||
).toBe(true);
|
||||
wrapper
|
||||
.find('DataListItem[id="foo"] Button[aria-label="Remove"]')
|
||||
.simulate('click');
|
||||
wrapper.find('Button[aria-label="Remove"]').simulate('click');
|
||||
expect(onRemove).toBeCalledWith({
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
});
|
||||
});
|
||||
|
||||
test('should disable remove button when dragging item', () => {
|
||||
const mockSelected = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'foo',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'bar',
|
||||
},
|
||||
];
|
||||
wrapper = mountWithContexts(
|
||||
<DraggableSelectedList
|
||||
selected={mockSelected}
|
||||
onRemove={() => {}}
|
||||
onRowDrag={() => {}}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(
|
||||
wrapper.find('Button[aria-label="Remove"]').at(0).prop('isDisabled')
|
||||
).toBe(false);
|
||||
expect(
|
||||
wrapper.find('Button[aria-label="Remove"]').at(1).prop('isDisabled')
|
||||
).toBe(false);
|
||||
act(() => {
|
||||
wrapper.find('DataList').prop('onDragStart')();
|
||||
});
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper.find('Button[aria-label="Remove"]').at(0).prop('isDisabled')
|
||||
).toBe(true);
|
||||
expect(
|
||||
wrapper.find('Button[aria-label="Remove"]').at(1).prop('isDisabled')
|
||||
).toBe(true);
|
||||
act(() => {
|
||||
wrapper.find('DataList').prop('onDragCancel')();
|
||||
});
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper.find('Button[aria-label="Remove"]').at(0).prop('isDisabled')
|
||||
).toBe(false);
|
||||
expect(
|
||||
wrapper.find('Button[aria-label="Remove"]').at(1).prop('isDisabled')
|
||||
).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user