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

This commit is contained in:
Keith J. Grant 2021-06-01 17:09:46 -07:00
parent 143a4a61b3
commit eeca5512be
13 changed files with 123 additions and 91 deletions

View File

@ -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));

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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] : []),

View File

@ -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>,

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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 });

View File

@ -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

View File

@ -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={
<HeaderRow qsConfig={QS_CONFIG}>
<HeaderCell sortKey="name">{t`Name`}</HeaderCell>
@ -200,9 +204,7 @@ function UserTeamList() {
{...props}
showSelectAll
isAllSelected={isAllSelected}
onSelectAll={isSelected =>
setSelected(isSelected ? [...teams] : [])
}
onSelectAll={selectAll}
qsConfig={QS_CONFIG}
additionalControls={[
...(canAdd

View File

@ -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={[
<WorkflowApprovalListApproveButton