From c2a57aa8f58962d8158e6803f7f0df4b56b42308 Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Tue, 1 Jun 2021 17:09:46 -0700 Subject: [PATCH] update remaining lists to clear selection on pagination/search/sort --- .../src/components/JobList/JobList.jsx | 5 ++--- .../ApplicationsList/ApplicationsList.jsx | 18 ++++++++------- .../CredentialTypeList/CredentialTypeList.jsx | 18 ++++++++------- .../ExecutionEnvironmentList.jsx | 18 ++++++++------- .../InstanceGroupList/InstanceGroupList.jsx | 18 ++++++++------- .../InventoryGroups/InventoryGroupsList.jsx | 18 ++++++++------- .../InventoryHostGroupsList.jsx | 18 ++++++++------- .../InventorySources/InventorySourceList.jsx | 17 ++++++++------ .../NotificationTemplateList.jsx | 16 +++++++++----- .../SubscriptionEdit/SubscriptionModal.jsx | 10 ++++++++- .../src/screens/User/UserList/UserList.jsx | 18 ++++++++------- .../screens/User/UserTeams/UserTeamList.jsx | 18 ++++++++------- .../WorkflowApprovalList.jsx | 22 ++++++++++--------- 13 files changed, 123 insertions(+), 91 deletions(-) diff --git a/awx/ui_next/src/components/JobList/JobList.jsx b/awx/ui_next/src/components/JobList/JobList.jsx index f0be9e05e41b..c2d113b829e4 100644 --- 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 index 23af1fb071dd..e9cb51e8f7bd 100644 --- 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 index bf8e371e31aa..4b93b28438f8 100644 --- 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/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentList.jsx b/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentList.jsx index 534a6830386d..6db687b03141 100644 --- a/awx/ui_next/src/screens/ExecutionEnvironment/ExecutionEnvironmentList/ExecutionEnvironmentList.jsx +++ b/awx/ui_next/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 index f125fd200380..776a9e9afbc0 100644 --- 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,7 +205,7 @@ function InstanceGroupList() { itemCount={instanceGroupsCount} pluralizedItemName={pluralizedItemName} qsConfig={QS_CONFIG} - onRowClick={handleSelect} + clearSelected={clearSelected} toolbarSearchableKeys={searchableKeys} toolbarRelatedSearchableKeys={relatedSearchableKeys} renderToolbar={props => ( @@ -209,9 +213,7 @@ function InstanceGroupList() { {...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 index ec9d562453a0..1c680f905087 100644 --- 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(); }} /> , diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx b/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx index 49868207c50b..e493fb2197af 100644 --- 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 index 5147773c866f..14c22a06b5b8 100644 --- 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 => ( - setSelected(isSelected ? [...sources] : []) - } + onSelectAll={selectAll} qsConfig={QS_CONFIG} additionalControls={[ ...(canAdd diff --git a/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.jsx b/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.jsx index 849290a166cb..a927ab77ca35 100644 --- a/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.jsx +++ b/awx/ui_next/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 diff --git a/awx/ui_next/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionModal.jsx b/awx/ui_next/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionModal.jsx index 9f15164b86bc..04a9b964af78 100644 --- a/awx/ui_next/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionModal.jsx +++ b/awx/ui_next/src/screens/Setting/Subscription/SubscriptionEdit/SubscriptionModal.jsx @@ -52,7 +52,7 @@ function SubscriptionModal({ [] ); - const { selected, handleSelect } = useSelected(subscriptions); + const { selected, setSelected } = useSelected(subscriptions); function handleConfirm() { const [subscription] = selected; @@ -64,6 +64,14 @@ function SubscriptionModal({ fetchSubscriptions(); }, [fetchSubscriptions]); + const handleSelect = item => { + if (selected.some(s => s.pool_id === item.pool_id)) { + setSelected(selected.filter(s => s.pool_id !== item.pool_id)); + } else { + setSelected(selected.concat(item)); + } + }; + useEffect(() => { if (selectedSubscription?.pool_id) { handleSelect({ pool_id: selectedSubscription.pool_id }); diff --git a/awx/ui_next/src/screens/User/UserList/UserList.jsx b/awx/ui_next/src/screens/User/UserList/UserList.jsx index 4ff7395e11a6..b1ee126eddd0 100644 --- a/awx/ui_next/src/screens/User/UserList/UserList.jsx +++ b/awx/ui_next/src/screens/User/UserList/UserList.jsx @@ -73,9 +73,13 @@ function UserList() { fetchUsers(); }, [fetchUsers]); - const { selected, isAllSelected, handleSelect, setSelected } = useSelected( - users - ); + const { + selected, + isAllSelected, + handleSelect, + clearSelected, + selectAll, + } = useSelected(users); const { isLoading: isDeleteLoading, @@ -95,7 +99,7 @@ function UserList() { const handleUserDelete = async () => { await deleteUsers(); - setSelected([]); + clearSelected(); }; const hasContentLoading = isDeleteLoading || isLoading; @@ -112,7 +116,7 @@ function UserList() { itemCount={itemCount} pluralizedItemName={t`Users`} qsConfig={QS_CONFIG} - onRowClick={handleSelect} + clearSelected={clearSelected} toolbarSearchColumns={[ { name: t`Username`, @@ -135,9 +139,7 @@ function UserList() { {...props} showSelectAll isAllSelected={isAllSelected} - onSelectAll={isSelected => - setSelected(isSelected ? [...users] : []) - } + onSelectAll={selectAll} qsConfig={QS_CONFIG} additionalControls={[ ...(canAdd diff --git a/awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx b/awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx index 8560039babd9..d65c0383c5f7 100644 --- a/awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx +++ b/awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx @@ -85,9 +85,13 @@ function UserTeamList() { fetchTeams(); }, [fetchTeams]); - const { selected, isAllSelected, handleSelect, setSelected } = useSelected( - teams - ); + const { + selected, + isAllSelected, + handleSelect, + clearSelected, + selectAll, + } = useSelected(teams); const disassociateUserRoles = team => { return [ @@ -141,7 +145,7 @@ function UserTeamList() { const handleDisassociate = async () => { await disassociateTeams(); - setSelected([]); + clearSelected(); }; const { error, dismissError } = useDismissableError( @@ -176,7 +180,7 @@ function UserTeamList() { itemCount={count} pluralizedItemName={t`Teams`} qsConfig={QS_CONFIG} - onRowClick={handleSelect} + clearSelected={clearSelected} headerRow={ {t`Name`} @@ -200,9 +204,7 @@ function UserTeamList() { {...props} showSelectAll isAllSelected={isAllSelected} - onSelectAll={isSelected => - setSelected(isSelected ? [...teams] : []) - } + onSelectAll={selectAll} qsConfig={QS_CONFIG} additionalControls={[ ...(canAdd diff --git a/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalList.jsx b/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalList.jsx index 4181cf1ef55e..8a1e9fd70d52 100644 --- a/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalList.jsx +++ b/awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovalList/WorkflowApprovalList.jsx @@ -84,9 +84,13 @@ function WorkflowApprovalsList() { QS_CONFIG ); - const { selected, isAllSelected, handleSelect, setSelected } = useSelected( - workflowApprovals - ); + const { + selected, + isAllSelected, + handleSelect, + clearSelected, + selectAll, + } = useSelected(workflowApprovals); const { isLoading: isDeleteLoading, @@ -108,7 +112,7 @@ function WorkflowApprovalsList() { const handleDelete = async () => { await deleteWorkflowApprovals(); - setSelected([]); + clearSelected(); }; const { @@ -126,7 +130,7 @@ function WorkflowApprovalsList() { const handleApprove = async () => { await approveWorkflowApprovals(); - setSelected([]); + clearSelected(); }; const { @@ -144,7 +148,7 @@ function WorkflowApprovalsList() { const handleDeny = async () => { await denyWorkflowApprovals(); - setSelected([]); + clearSelected(); }; const { @@ -168,7 +172,7 @@ function WorkflowApprovalsList() { itemCount={count} pluralizedItemName={t`Workflow Approvals`} qsConfig={QS_CONFIG} - onRowClick={handleSelect} + clearSelected={clearSelected} toolbarSearchColumns={[ { name: t`Name`, @@ -187,9 +191,7 @@ function WorkflowApprovalsList() { {...props} showSelectAll isAllSelected={isAllSelected} - onSelectAll={set => - setSelected(set ? [...workflowApprovals] : []) - } + onSelectAll={selectAll} qsConfig={QS_CONFIG} additionalControls={[