diff --git a/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx b/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx index 12f2ceb3d6..c3bfa74b4e 100644 --- a/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx +++ b/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx @@ -90,7 +90,7 @@ function InstanceGroupsLookup({
Note: The order in which these are selected sets the execution - precedence. + precedence. Select more than one to enable drag. } diff --git a/awx/ui_next/src/components/SelectedList/DraggableSelectedList.jsx b/awx/ui_next/src/components/SelectedList/DraggableSelectedList.jsx index 8e1231fd4c..925ffc4d72 100644 --- a/awx/ui_next/src/components/SelectedList/DraggableSelectedList.jsx +++ b/awx/ui_next/src/components/SelectedList/DraggableSelectedList.jsx @@ -25,10 +25,12 @@ 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) => { @@ -39,6 +41,7 @@ function DraggableSelectedList({ selected, onRemove, onRowDrag }) { const onDragCancel = () => { setLiveText(t`Dragging cancelled. List is unchanged.`); + setIsDragging(false); }; const onDragFinish = newItemOrder => { @@ -46,6 +49,7 @@ function DraggableSelectedList({ selected, onRemove, onRowDrag }) { selected.find(i => i.name === item) ); onRowDrag(selectedItems); + setIsDragging(false); }; const removeItem = item => { @@ -56,7 +60,8 @@ function DraggableSelectedList({ selected, onRemove, onRowDrag }) { return null; } - const orderedList = selected.map(item => item.name); + const orderedList = selected.map(item => item?.name); + return ( <> diff --git a/awx/ui_next/src/components/SelectedList/DraggableSelectedList.test.jsx b/awx/ui_next/src/components/SelectedList/DraggableSelectedList.test.jsx index c0318069c7..b3b6c8bc21 100644 --- a/awx/ui_next/src/components/SelectedList/DraggableSelectedList.test.jsx +++ b/awx/ui_next/src/components/SelectedList/DraggableSelectedList.test.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { act } from 'react-dom/test-utils'; import { mountWithContexts } from '../../../testUtils/enzymeHelpers'; import DraggableSelectedList from './DraggableSelectedList'; @@ -64,6 +65,11 @@ 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'); @@ -72,4 +78,69 @@ describe('', () => { 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); + }); }); diff --git a/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx b/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx index 355db7b531..5f249cb4f0 100644 --- a/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx +++ b/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx @@ -115,7 +115,7 @@ function OrganizationFormFields({
Note: The order of these credentials sets precedence for the sync - and lookup of the content. + and lookup of the content. Select more than one to enable drag. }