update remaining lists to clear selection on pagination/search/sort

ansible · Jun 2, 2021 · c2a57aa · c2a57aa
1 parent 5377733
commit c2a57aa
Show file tree

Hide file tree

Showing 13 changed files with 123 additions and 91 deletions.
diff --git a/awx/ui_next/src/components/JobList/JobList.jsx b/awx/ui_next/src/components/JobList/JobList.jsx
@@ -90,7 +90,6 @@ function JobList({ defaultParams, showTypeColumn = false }) {
     selected,
     isAllSelected,
     handleSelect,
-    setSelected,
     selectAll,
     clearSelected,
   } = useSelected(jobs);
@@ -140,12 +139,12 @@ function JobList({ defaultParams, showTypeColumn = false }) {
 
   const handleJobCancel = async () => {
     await cancelJobs();
-    setSelected([]);
+    clearSelected();
   };
 
   const handleJobDelete = async () => {
     await deleteJobs();
-    setSelected([]);
+    clearSelected();
   };
 
   const cannotDeleteItems = selected.filter(job => isJobRunning(job.status));

diff --git a/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationsList.jsx b/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationsList.jsx
@@ -77,9 +77,13 @@ function ApplicationsList() {
     fetchApplications();
   }, [fetchApplications]);
 
-  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
-    applications
-  );
+  const {
+    selected,
+    isAllSelected,
+    handleSelect,
+    clearSelected,
+    selectAll,
+  } = useSelected(applications);
 
   const {
     isLoading: deleteLoading,
@@ -99,7 +103,7 @@ function ApplicationsList() {
 
   const handleDeleteApplications = async () => {
     await deleteApplications();
-    setSelected([]);
+    clearSelected();
   };
 
   const canAdd = actions && actions.POST;
@@ -115,7 +119,7 @@ function ApplicationsList() {
             itemCount={itemCount}
             pluralizedItemName={t`Applications`}
             qsConfig={QS_CONFIG}
-            onRowClick={handleSelect}
+            clearSelected={clearSelected}
             toolbarSearchColumns={[
               {
                 name: t`Name`,
@@ -134,9 +138,7 @@ function ApplicationsList() {
                 {...props}
                 showSelectAll
                 isAllSelected={isAllSelected}
-                onSelectAll={isSelected =>
-                  setSelected(isSelected ? [...applications] : [])
-                }
+                onSelectAll={selectAll}
                 qsConfig={QS_CONFIG}
                 additionalControls={[
                   ...(canAdd

diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.jsx b/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.jsx
@@ -77,9 +77,13 @@ function CredentialTypeList() {
     fetchCredentialTypes();
   }, [fetchCredentialTypes]);
 
-  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
-    credentialTypes
-  );
+  const {
+    selected,
+    isAllSelected,
+    handleSelect,
+    clearSelected,
+    selectAll,
+  } = useSelected(credentialTypes);
 
   const {
     isLoading: deleteLoading,
@@ -101,7 +105,7 @@ function CredentialTypeList() {
 
   const handleDelete = async () => {
     await deleteCredentialTypes();
-    setSelected([]);
+    clearSelected();
   };
 
   const canAdd = actions && actions.POST;
@@ -121,7 +125,7 @@ function CredentialTypeList() {
             itemCount={credentialTypesCount}
             pluralizedItemName={t`Credential Types`}
             qsConfig={QS_CONFIG}
-            onRowClick={handleSelect}
+            clearSelected={clearSelected}
             toolbarSearchColumns={[
               {
                 name: t`Name`,
@@ -148,9 +152,7 @@ function CredentialTypeList() {
                 {...props}
                 showSelectAll
                 isAllSelected={isAllSelected}
-                onSelectAll={isSelected =>
-                  setSelected(isSelected ? [...credentialTypes] : [])
-                }
+                onSelectAll={selectAll}
                 qsConfig={QS_CONFIG}
                 additionalControls={[
                   ...(canAdd

diff --git a/...xt/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentList.jsx b/...xt/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentList.jsx
@@ -76,9 +76,13 @@ function ExecutionEnvironmentList() {
     fetchExecutionEnvironments();
   }, [fetchExecutionEnvironments]);
 
-  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
-    executionEnvironments
-  );
+  const {
+    selected,
+    isAllSelected,
+    handleSelect,
+    clearSelected,
+    selectAll,
+  } = useSelected(executionEnvironments);
 
   const {
     isLoading: deleteLoading,
@@ -100,7 +104,7 @@ function ExecutionEnvironmentList() {
 
   const handleDelete = async () => {
     await deleteExecutionEnvironments();
-    setSelected([]);
+    clearSelected();
   };
 
   const canAdd = actions && actions.POST;
@@ -119,7 +123,7 @@ function ExecutionEnvironmentList() {
             itemCount={executionEnvironmentsCount}
             pluralizedItemName={t`Execution Environments`}
             qsConfig={QS_CONFIG}
-            onRowClick={handleSelect}
+            clearSelected={clearSelected}
             toolbarSearchableKeys={searchableKeys}
             toolbarRelatedSearchableKeys={relatedSearchableKeys}
             toolbarSearchColumns={[
@@ -164,9 +168,7 @@ function ExecutionEnvironmentList() {
                 {...props}
                 showSelectAll
                 isAllSelected={isAllSelected}
-                onSelectAll={isSelected =>
-                  setSelected(isSelected ? [...executionEnvironments] : [])
-                }
+                onSelectAll={selectAll}
                 qsConfig={QS_CONFIG}
                 additionalControls={[
                   ...(canAdd

diff --git a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.jsx b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.jsx
@@ -92,9 +92,13 @@ function InstanceGroupList() {
     fetchInstanceGroups();
   }, [fetchInstanceGroups]);
 
-  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
-    instanceGroups
-  );
+  const {
+    selected,
+    isAllSelected,
+    handleSelect,
+    clearSelected,
+    selectAll,
+  } = useSelected(instanceGroups);
 
   const modifiedSelected = modifyInstanceGroups(selected);
 
@@ -118,7 +122,7 @@ function InstanceGroupList() {
 
   const handleDelete = async () => {
     await deleteInstanceGroups();
-    setSelected([]);
+    clearSelected();
   };
 
   const canAdd = actions && actions.POST;
@@ -201,17 +205,15 @@ function InstanceGroupList() {
             itemCount={instanceGroupsCount}
             pluralizedItemName={pluralizedItemName}
             qsConfig={QS_CONFIG}
-            onRowClick={handleSelect}
+            clearSelected={clearSelected}
             toolbarSearchableKeys={searchableKeys}
             toolbarRelatedSearchableKeys={relatedSearchableKeys}
             renderToolbar={props => (
               <DatalistToolbar
                 {...props}
                 showSelectAll
                 isAllSelected={isAllSelected}
-                onSelectAll={isSelected =>
-                  setSelected(isSelected ? [...instanceGroups] : [])
-                }
+                onSelectAll={selectAll}
                 qsConfig={QS_CONFIG}
                 additionalControls={[
                   ...(canAdd ? [addButton] : []),

diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
@@ -77,9 +77,13 @@ function InventoryGroupsList() {
     fetchData();
   }, [fetchData]);
 
-  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
-    groups
-  );
+  const {
+    selected,
+    isAllSelected,
+    handleSelect,
+    clearSelected,
+    selectAll,
+  } = useSelected(groups);
 
   const renderTooltip = () => {
     const itemsUnableToDelete = selected
@@ -111,7 +115,7 @@ function InventoryGroupsList() {
         items={groups}
         itemCount={groupCount}
         qsConfig={QS_CONFIG}
-        onRowClick={handleSelect}
+        clearSelected={clearSelected}
         toolbarSearchColumns={[
           {
             name: t`Name`,
@@ -159,9 +163,7 @@ function InventoryGroupsList() {
             {...props}
             showSelectAll
             isAllSelected={isAllSelected}
-            onSelectAll={isSelected =>
-              setSelected(isSelected ? [...groups] : [])
-            }
+            onSelectAll={selectAll}
             qsConfig={QS_CONFIG}
             additionalControls={[
               ...(canAdd
@@ -185,7 +187,7 @@ function InventoryGroupsList() {
                   }
                   onAfterDelete={() => {
                     fetchData();
-                    setSelected([]);
+                    clearSelected();
                   }}
                 />
               </Tooltip>,

diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx b/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx
@@ -84,9 +84,13 @@ function InventoryHostGroupsList() {
     fetchGroups();
   }, [fetchGroups]);
 
-  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
-    groups
-  );
+  const {
+    selected,
+    isAllSelected,
+    handleSelect,
+    clearSelected,
+    selectAll,
+  } = useSelected(groups);
 
   const {
     isLoading: isDisassociateLoading,
@@ -107,7 +111,7 @@ function InventoryHostGroupsList() {
 
   const handleDisassociate = async () => {
     await disassociateHosts();
-    setSelected([]);
+    clearSelected();
   };
 
   const fetchGroupsToAssociate = useCallback(
@@ -156,7 +160,7 @@ function InventoryHostGroupsList() {
         items={groups}
         itemCount={itemCount}
         qsConfig={QS_CONFIG}
-        onRowClick={handleSelect}
+        clearSelected={clearSelected}
         toolbarSearchColumns={[
           {
             name: t`Name`,
@@ -195,9 +199,7 @@ function InventoryHostGroupsList() {
             {...props}
             showSelectAll
             isAllSelected={isAllSelected}
-            onSelectAll={isSelected =>
-              setSelected(isSelected ? [...groups] : [])
-            }
+            onSelectAll={selectAll}
             qsConfig={QS_CONFIG}
             additionalControls={[
               ...(canAdd

diff --git a/awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceList.jsx b/awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceList.jsx
@@ -83,9 +83,13 @@ function InventorySourceList() {
     fetchSources();
   }, [fetchSources]);
 
-  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
-    sources
-  );
+  const {
+    selected,
+    isAllSelected,
+    handleSelect,
+    clearSelected,
+    selectAll,
+  } = useSelected(sources);
 
   const {
     isLoading: isDeleteLoading,
@@ -140,7 +144,7 @@ function InventorySourceList() {
     if (!deleteRelatedResourcesError) {
       await handleDeleteSources();
     }
-    setSelected([]);
+    clearSelected();
   };
   const canAdd =
     sourceChoicesOptions &&
@@ -164,14 +168,13 @@ function InventorySourceList() {
         itemCount={sourceCount}
         pluralizedItemName={t`Inventory Sources`}
         qsConfig={QS_CONFIG}
+        clearSelected={clearSelected}
         renderToolbar={props => (
           <DatalistToolbar
             {...props}
             showSelectAll
             isAllSelected={isAllSelected}
-            onSelectAll={isSelected =>
-              setSelected(isSelected ? [...sources] : [])
-            }
+            onSelectAll={selectAll}
             qsConfig={QS_CONFIG}
             additionalControls={[
               ...(canAdd

diff --git a/...xt/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.jsx b/...xt/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.jsx
@@ -82,9 +82,13 @@ function NotificationTemplatesList() {
     fetchTemplates();
   }, [fetchTemplates]);
 
-  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
-    templates
-  );
+  const {
+    selected,
+    isAllSelected,
+    handleSelect,
+    clearSelected,
+    selectAll,
+  } = useSelected(templates);
 
   const {
     isLoading: isDeleteLoading,
@@ -106,7 +110,7 @@ function NotificationTemplatesList() {
 
   const handleDelete = async () => {
     await deleteTemplates();
-    setSelected([]);
+    clearSelected();
   };
 
   const addTestToast = useCallback(notification => {
@@ -133,7 +137,7 @@ function NotificationTemplatesList() {
             itemCount={count}
             pluralizedItemName={t`Notification Templates`}
             qsConfig={QS_CONFIG}
-            onRowClick={handleSelect}
+            clearSelected={clearSelected}
             toolbarSearchColumns={[
               {
                 name: t`Name`,
@@ -176,7 +180,7 @@ function NotificationTemplatesList() {
                 {...props}
                 showSelectAll
                 isAllSelected={isAllSelected}
-                onSelectAll={set => setSelected(set ? [...templates] : [])}
+                onSelectAll={selectAll}
                 qsConfig={QS_CONFIG}
                 additionalControls={[
                   ...(canAdd