Disable remove button if row is being dragged

Disable remove button if row is being dragged.
Also, disable drag button there is just one item selected.

closes: https://github.com/ansible/awx/issues/10548

awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx

@@ -90,7 +90,7 @@ function InstanceGroupsLookup({
             <br />
             <Trans>
               Note: The order in which these are selected sets the execution
-              precedence.
+              precedence. Select more than one to enable drag.
             </Trans>
           </>
         }

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 (
     <>
       <DataList
@@ -83,6 +88,7 @@ function DraggableSelectedList({ selected, onRemove, onRowDrag }) {
                     cancel the drag operation.`}
                     aria-pressed="false"
                     data-cy={`reorder-${label}`}
+                    isDisabled={selected.length === 1}
                   />
                 </DataListControl>
                 <DataListItemCells
@@ -98,6 +104,7 @@ function DraggableSelectedList({ selected, onRemove, onRowDrag }) {
                     variant="plain"
                     aria-label={t`Remove`}
                     ouiaId={`draggable-list-remove-${label}`}
+                    isDisabled={isDragging}
                   >
                     <TimesIcon />
                   </Button>

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('<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');
@@ -72,4 +78,69 @@ describe('<DraggableSelectedList />', () => {
       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);
+  });
 });

awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx

@@ -115,7 +115,7 @@ function OrganizationFormFields({
             <br />
             <Trans>
               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.
             </Trans>
           </>
         }