EditRolesForm.js in foreman_ansible-7.1.1

- old
+ new

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
-
+import { isEqual } from 'lodash';
 import { useMutation } from '@apollo/client';
 
 import { Button, Modal, Spinner } from '@patternfly/react-core';
 import { encodeId } from '../../../../../globalIdHelper';
 import assignAnsibleRoles from '../../../../../graphql/mutations/assignAnsibleRoles.gql';
@@ -19,40 +19,42 @@
     hostId,
     baseModalProps,
     actions,
   } = props;
 
-  const [formState, setFormState] = useState({
-    availableOptions: [],
-    chosenOptions: [],
-  });
+  const initAvailableOpt = availableRoles.map(item => item.name);
+  const initChosenOpt = assignedRoles.map(item => item.name);
+  const [availableOptions, setAvailableOptions] = useState(initAvailableOpt);
+  const [chosenOptions, setChosenOptions] = useState(initChosenOpt);
 
-  useEffect(() => {
-    setFormState({
-      availableOptions: availableRoles.map(item => item.name),
-      chosenOptions: assignedRoles.map(item => item.name) || [],
-    });
-  }, [availableRoles, assignedRoles]);
+  const onListChange = (nextAvailable, nextChosen) => {
+    setAvailableOptions(nextAvailable);
+    setChosenOptions(nextChosen);
+  };
 
   const [callMutation, { loading }] = useMutation(assignAnsibleRoles, {
     onCompleted: onCompleted(closeModal),
     onError,
   });
 
   const allRoles = (availableRoles || []).concat(assignedRoles || []);
 
   const variables = {
     id: encodeId('Host', hostId),
-    ansibleRoleIds: roleNamesToIds(allRoles, formState.chosenOptions),
+    ansibleRoleIds: roleNamesToIds(allRoles, chosenOptions),
   };
 
+  const didNotModifyOptions = () =>
+    isEqual(initAvailableOpt.sort(), availableOptions.sort()) &&
+    isEqual(initChosenOpt, chosenOptions); // The order of the chosen options is important.
+
   const formActions = [
     <Button
       key="confirm"
       variant="primary"
       onClick={() => callMutation({ variables })}
-      isDisabled={loading}
+      isDisabled={loading || didNotModifyOptions()}
       aria-label="submit ansible roles"
     >
       {__('Confirm')}
     </Button>,
     ...actions,
@@ -63,28 +65,28 @@
   }
 
   return (
     <Modal {...baseModalProps} actions={formActions}>
       <DualList
-        availableOptions={formState.availableOptions}
-        chosenOptions={formState.chosenOptions}
-        onListChange={(newAvailable, newChosen) =>
-          setFormState({
-            availableOptions: newAvailable,
-            chosenOptions: newChosen,
-          })
-        }
+        availableOptions={availableOptions}
+        chosenOptions={chosenOptions}
+        onListChange={onListChange}
       />
     </Modal>
   );
 };
 
 EditRolesForm.propTypes = {
   closeModal: PropTypes.func.isRequired,
-  assignedRoles: PropTypes.array.isRequired,
-  availableRoles: PropTypes.array.isRequired,
+  assignedRoles: PropTypes.array,
+  availableRoles: PropTypes.array,
   actions: PropTypes.array.isRequired,
   hostId: PropTypes.number.isRequired,
   baseModalProps: PropTypes.object.isRequired,
+};
+
+EditRolesForm.defaultProps = {
+  assignedRoles: [],
+  availableRoles: [],
 };
 
 export default withLoading(EditRolesForm);