diff --git a/awx/ui/package-lock.json b/awx/ui/package-lock.json index 0ad19843da..706d495a5d 100644 --- a/awx/ui/package-lock.json +++ b/awx/ui/package-lock.json @@ -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" }, diff --git a/awx/ui/package.json b/awx/ui/package.json index 0bd39f1b1b..e4ad786809 100644 --- a/awx/ui/package.json +++ b/awx/ui/package.json @@ -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", diff --git a/awx/ui/src/components/SelectedList/DraggableSelectedList.js b/awx/ui/src/components/SelectedList/DraggableSelectedList.js index 8724e0220d..64987618c0 100644 --- a/awx/ui/src/components/SelectedList/DraggableSelectedList.js +++ b/awx/ui/src/components/SelectedList/DraggableSelectedList.js @@ -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 ( - <> - - {orderedList.map((label, index) => { - const rowPosition = index + 1; - return ( - - - - - - - {`${rowPosition}. ${label}`} - , - ]} - /> - - - - - - ); - })} - -
- {liveText} -
- + + + + {selected.map(({ name: label, id }, index) => { + const rowPosition = index + 1; + return ( + + + + + + + + {`${rowPosition}. ${label}`} + , + ]} + /> + + + + + + + ); + })} + + + ); } -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, diff --git a/awx/ui/src/components/SelectedList/DraggableSelectedList.test.js b/awx/ui/src/components/SelectedList/DraggableSelectedList.test.js index 98a57d5847..7fb47272b0 100644 --- a/awx/ui/src/components/SelectedList/DraggableSelectedList.test.js +++ b/awx/ui/src/components/SelectedList/DraggableSelectedList.test.js @@ -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('', () => { /> ); 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(1. foo) ).toEqual(true); expect( wrapper - .find('DataListItem DataListCell') + .find('Draggable') .last() .containsMatchingElement(2. bar) ).toEqual(true); @@ -65,64 +64,10 @@ describe('', () => { wrapper = mountWithContexts( ); - 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( - {}} - 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); - }); });