Rename draggable prop and fix typos

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

@@ -33,10 +33,10 @@ function CredentialLookup({
   credentialTypeId,
   credentialTypeKind,
   credentialTypeNamespace,
-  draggable,
   fieldName,
   helperTextInvalid,
   isDisabled,
+  isSelectedDraggable,
   isValid,
   label,
   modalDescription,
@@ -215,7 +215,7 @@ function CredentialLookup({
               dispatch({ type: 'SET_SELECTED_ITEMS', selectedItems })
             }
             multiple={multiple}
-            draggable={draggable}
+            isSelectedDraggable={isSelectedDraggable}
           />
         )}
       />

awx/ui_next/src/components/OptionsList/OptionsList.jsx

@@ -26,9 +26,9 @@ function OptionsList({
   contentError,
   deselectItem,
   displayKey,
-  draggable,
   header,
   isLoading,
+  isSelectedDraggable,
   multiple,
   name,
   optionCount,
@@ -46,7 +46,7 @@ function OptionsList({
 }) {
   let selectionPreview = null;
   if (value.length > 0) {
-    if (draggable) {
+    if (isSelectedDraggable) {
       selectionPreview = (
         <DraggableSelectedList
           onRemove={deselectItem}
@@ -116,7 +116,7 @@ const Item = shape({
 OptionsList.propTypes = {
   deselectItem: func.isRequired,
   displayKey: string,
-  draggable: bool,
+  isSelectedDraggable: bool,
   multiple: bool,
   optionCount: number.isRequired,
   options: arrayOf(Item).isRequired,
@@ -128,7 +128,7 @@ OptionsList.propTypes = {
   value: arrayOf(Item).isRequired,
 };
 OptionsList.defaultProps = {
-  draggable: false,
+  isSelectedDraggable: false,
   multiple: false,
   renderItemChip: null,
   searchColumns: [],

awx/ui_next/src/components/SelectedList/DraggableSelectedList.jsx

@@ -24,11 +24,11 @@ const RemoveActionSection = styled(DataListAction)`
 
 function DraggableSelectedList({ selected, onRemove, onRowDrag }) {
   const [liveText, setLiveText] = useState('');
-  const [id, setId] = React.useState('');
+  const [id, setId] = useState('');
 
   const onDragStart = newId => {
     setId(newId);
-    setLiveText(t`Dragging tarted for item id: ${newId}.`);
+    setLiveText(t`Dragging started for item id: ${newId}.`);
   };
 
   const onDragMove = (oldIndex, newIndex) => {

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

@@ -106,7 +106,7 @@ function OrganizationFormFields({
         onChange={handleCredentialUpdate}
         value={galaxyCredentialsField.value}
         multiple
-        draggable
+        isSelectedDraggable
         fieldName="galaxy_credentials"
         modalDescription={
           <>