From d84615f64bd34d4c7b8ba514cb31ea52e3bde53f Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Thu, 10 Sep 2020 16:21:24 -0400
Subject: [PATCH] Rename onLoading/onDoneLoading props to onCopyStart and
 onCopyFinish.  Wrap the functions being passed in as those props in
 useCallback to keep them hooks safe.

---
 .../src/components/CopyButton/CopyButton.jsx  | 26 ++++++++++++++-----
 .../components/CopyButton/CopyButton.test.jsx |  8 +++---
 .../CredentialList/CredentialListItem.jsx     | 12 +++++++--
 .../InventoryList/InventoryListItem.jsx       | 12 +++++++--
 .../Project/ProjectList/ProjectListItem.jsx   | 12 +++++++--
 .../TemplateList/TemplateListItem.jsx         | 12 +++++++--
 6 files changed, 64 insertions(+), 18 deletions(-)

diff --git a/awx/ui_next/src/components/CopyButton/CopyButton.jsx b/awx/ui_next/src/components/CopyButton/CopyButton.jsx
index dd1e91a7aa..f8eeda7626 100644
--- a/awx/ui_next/src/components/CopyButton/CopyButton.jsx
+++ b/awx/ui_next/src/components/CopyButton/CopyButton.jsx
@@ -9,17 +9,24 @@ import useRequest, { useDismissableError } from '../../util/useRequest';
 import AlertModal from '../AlertModal';
 import ErrorDetail from '../ErrorDetail';
 
-function CopyButton({ i18n, copyItem, onLoading, onDoneLoading, helperText }) {
+function CopyButton({
+  i18n,
+  copyItem,
+  isDisabled,
+  onCopyStart,
+  onCopyFinish,
+  helperText,
+}) {
   const { isLoading, error: copyError, request: copyItemToAPI } = useRequest(
     copyItem
   );
 
   useEffect(() => {
     if (isLoading) {
-      return onLoading();
+      return onCopyStart();
     }
-    return onDoneLoading();
-  }, [isLoading, onLoading, onDoneLoading]);
+    return onCopyFinish();
+  }, [isLoading, onCopyStart, onCopyFinish]);
 
   const { error, dismissError } = useDismissableError(copyError);
 
@@ -27,6 +34,7 @@ function CopyButton({ i18n, copyItem, onLoading, onDoneLoading, helperText }) {
     <>
       <Tooltip content={helperText.tooltip} position="top">
         <Button
+          isDisabled={isDisabled}
           aria-label={i18n._(t`Copy`)}
           variant="plain"
           onClick={copyItemToAPI}
@@ -50,11 +58,17 @@ function CopyButton({ i18n, copyItem, onLoading, onDoneLoading, helperText }) {
 
 CopyButton.propTypes = {
   copyItem: PropTypes.func.isRequired,
-  onLoading: PropTypes.func.isRequired,
-  onDoneLoading: PropTypes.func.isRequired,
+  onCopyStart: PropTypes.func.isRequired,
+  onCopyFinish: PropTypes.func.isRequired,
   helperText: PropTypes.shape({
     tooltip: PropTypes.string.isRequired,
     errorMessage: PropTypes.string.isRequired,
   }).isRequired,
+  isDisabled: PropTypes.bool,
 };
+
+CopyButton.defaultProps = {
+  isDisabled: false,
+};
+
 export default withI18n()(CopyButton);
diff --git a/awx/ui_next/src/components/CopyButton/CopyButton.test.jsx b/awx/ui_next/src/components/CopyButton/CopyButton.test.jsx
index 0660d57cd0..f81c0eab1d 100644
--- a/awx/ui_next/src/components/CopyButton/CopyButton.test.jsx
+++ b/awx/ui_next/src/components/CopyButton/CopyButton.test.jsx
@@ -8,8 +8,8 @@ describe('<CopyButton/>', () => {
   test('shold mount properly', () => {
     const wrapper = mountWithContexts(
       <CopyButton
-        onLoading={() => {}}
-        onDoneLoading={() => {}}
+        onCopyStart={() => {}}
+        onCopyFinish={() => {}}
         copyItem={() => {}}
         helperText={{
           tooltip: `Copy Template`,
@@ -22,8 +22,8 @@ describe('<CopyButton/>', () => {
   test('should render proper tooltip', () => {
     const wrapper = mountWithContexts(
       <CopyButton
-        onLoading={() => {}}
-        onDoneLoading={() => {}}
+        onCopyStart={() => {}}
+        onCopyFinish={() => {}}
         copyItem={() => {}}
         helperText={{
           tooltip: `Copy Template`,
diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
index 69f01d49d8..88266fed41 100644
--- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
@@ -48,6 +48,14 @@ function CredentialListItem({
     await fetchCredentials();
   }, [credential.id, credential.name, fetchCredentials]);
 
+  const handleCopyStart = useCallback(() => {
+    setIsDisabled(true);
+  }, []);
+
+  const handleCopyFinish = useCallback(() => {
+    setIsDisabled(false);
+  }, []);
+
   return (
     <DataListItem
       key={credential.id}
@@ -95,8 +103,8 @@ function CredentialListItem({
           {credential.summary_fields.user_capabilities.copy && (
             <CopyButton
               isDisabled={isDisabled}
-              onLoading={() => setIsDisabled(true)}
-              onDoneLoading={() => setIsDisabled(false)}
+              onCopyStart={handleCopyStart}
+              onCopyFinish={handleCopyFinish}
               copyItem={copyCredential}
               helperText={{
                 tooltip: i18n._(t`Copy Credential`),
diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
index 519fd9cbd6..1974827032 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
@@ -52,6 +52,14 @@ function InventoryListItem({
     await fetchInventories();
   }, [inventory.id, inventory.name, fetchInventories]);
 
+  const handleCopyStart = useCallback(() => {
+    setIsDisabled(true);
+  }, []);
+
+  const handleCopyFinish = useCallback(() => {
+    setIsDisabled(false);
+  }, []);
+
   const labelId = `check-action-${inventory.id}`;
 
   let syncStatus = 'disabled';
@@ -128,8 +136,8 @@ function InventoryListItem({
               <CopyButton
                 copyItem={copyInventory}
                 isDisabled={isDisabled}
-                onLoading={() => setIsDisabled(true)}
-                onDoneLoading={() => setIsDisabled(false)}
+                onCopyStart={handleCopyStart}
+                onCopyFinish={handleCopyFinish}
                 helperText={{
                   tooltip: i18n._(t`Copy Inventory`),
                   errorMessage: i18n._(t`Failed to copy inventory.`),
diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
index e23f3339c5..b2539e5f87 100644
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
@@ -79,6 +79,14 @@ function ProjectListItem({
     );
   };
 
+  const handleCopyStart = useCallback(() => {
+    setIsDisabled(true);
+  }, []);
+
+  const handleCopyFinish = useCallback(() => {
+    setIsDisabled(false);
+  }, []);
+
   const labelId = `check-action-${project.id}`;
   return (
     <DataListItem
@@ -182,8 +190,8 @@ function ProjectListItem({
             <CopyButton
               copyItem={copyProject}
               isDisabled={isDisabled}
-              onLoading={() => setIsDisabled(true)}
-              onDoneLoading={() => setIsDisabled(false)}
+              onCopyStart={handleCopyStart}
+              onCopyFinish={handleCopyFinish}
               helperText={{
                 tooltip: i18n._(t`Copy Project`),
                 errorMessage: i18n._(t`Failed to copy project.`),
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
index 10a34bedc7..242f757a54 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -60,6 +60,14 @@ function TemplateListItem({
     await fetchTemplates();
   }, [fetchTemplates, template.id, template.name, template.type]);
 
+  const handleCopyStart = useCallback(() => {
+    setIsDisabled(true);
+  }, []);
+
+  const handleCopyFinish = useCallback(() => {
+    setIsDisabled(false);
+  }, []);
+
   const missingResourceIcon =
     template.type === 'job_template' &&
     (!template.summary_fields.project ||
@@ -157,8 +165,8 @@ function TemplateListItem({
                 errorMessage: i18n._(t`Failed to copy template.`),
               }}
               isDisabled={isDisabled}
-              onLoading={() => setIsDisabled(true)}
-              onDoneLoading={() => setIsDisabled(false)}
+              onCopyStart={handleCopyStart}
+              onCopyFinish={handleCopyFinish}
               copyItem={copyTemplate}
             />
           )}