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.
>
}