clear list selection on navigate (first batch)

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

Hide file tree

Showing 15 changed files with 183 additions and 195 deletions.
diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
@@ -37,7 +37,6 @@ function DataListToolbar({
   onExpand,
   onSelectAll,
   additionalControls,
-
   qsConfig,
   pagination,
 }) {

diff --git a/awx/ui_next/src/components/JobList/JobList.jsx b/awx/ui_next/src/components/JobList/JobList.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import { t, Plural } from '@lingui/macro';
 
@@ -13,7 +13,7 @@ import useRequest, {
   useDismissableError,
 } from '../../util/useRequest';
 import { useConfig } from '../../contexts/Config';
-
+import useSelected from '../../util/useSelected';
 import { isJobRunning, getJobModel } from '../../util/jobs';
 import { getQSConfig, parseQueryString } from '../../util/qs';
 import JobListItem from './JobListItem';
@@ -35,8 +35,6 @@ function JobList({ defaultParams, showTypeColumn = false }) {
   );
 
   const { me } = useConfig();
-
-  const [selected, setSelected] = useState([]);
   const location = useLocation();
   const {
     result: { results, count, relatedSearchableKeys, searchableKeys },
@@ -88,7 +86,14 @@ function JobList({ defaultParams, showTypeColumn = false }) {
 
   const jobs = useWsJobs(results, fetchJobsById, qsConfig);
 
-  const isAllSelected = selected.length === jobs.length && selected.length > 0;
+  const {
+    selected,
+    isAllSelected,
+    handleSelect,
+    setSelected,
+    selectAll,
+    clearSelected,
+  } = useSelected(jobs);
 
   const {
     error: cancelJobsError,
@@ -143,18 +148,6 @@ function JobList({ defaultParams, showTypeColumn = false }) {
     setSelected([]);
   };
 
-  const handleSelectAll = isSelected => {
-    setSelected(isSelected ? [...jobs] : []);
-  };
-
-  const handleSelect = item => {
-    if (selected.some(s => s.id === item.id)) {
-      setSelected(selected.filter(s => s.id !== item.id));
-    } else {
-      setSelected(selected.concat(item));
-    }
-  };
-
   const cannotDeleteItems = selected.filter(job => isJobRunning(job.status));
 
   return (
@@ -226,14 +219,15 @@ function JobList({ defaultParams, showTypeColumn = false }) {
               <HeaderCell>{t`Actions`}</HeaderCell>
             </HeaderRow>
           }
+          clearSelected={clearSelected}
           toolbarSearchableKeys={searchableKeys}
           toolbarRelatedSearchableKeys={relatedSearchableKeys}
           renderToolbar={props => (
             <DatalistToolbar
               {...props}
               showSelectAll
               isAllSelected={isAllSelected}
-              onSelectAll={handleSelectAll}
+              onSelectAll={selectAll}
               qsConfig={qsConfig}
               additionalControls={[
                 <ToolbarDeleteButton

diff --git a/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx b/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx
@@ -1,10 +1,10 @@
 import 'styled-components/macro';
-import React, { Fragment } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { TableComposable, Tbody } from '@patternfly/react-table';
 
 import { t } from '@lingui/macro';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 
 import ListHeader from '../ListHeader';
 import ContentEmpty from '../ContentEmpty';
@@ -37,9 +37,15 @@ function PaginatedTable({
   showPageSizeOptions,
   renderToolbar,
   emptyContentMessage,
+  clearSelected,
   ouiaId,
 }) {
   const history = useHistory();
+  const location = useLocation();
+
+  useEffect(() => {
+    clearSelected();
+  }, [location.search, clearSelected]);
 
   const pushHistoryState = params => {
     const { pathname, search } = history.location;
@@ -132,7 +138,7 @@ function PaginatedTable({
   );
 
   return (
-    <Fragment>
+    <>
       <ListHeader
         itemCount={itemCount}
         renderToolbar={renderToolbar}
@@ -164,7 +170,7 @@ function PaginatedTable({
           onPerPageSelect={handleSetPageSize}
         />
       ) : null}
-    </Fragment>
+    </>
   );
 }
 
@@ -187,6 +193,7 @@ PaginatedTable.propTypes = {
   renderToolbar: PropTypes.func,
   hasContentLoading: PropTypes.bool,
   contentError: PropTypes.shape(),
+  clearSelected: PropTypes.func,
   ouiaId: PropTypes.string,
 };
 
@@ -200,6 +207,7 @@ PaginatedTable.defaultProps = {
   showPageSizeOptions: true,
   renderToolbar: props => <DataListToolbar {...props} />,
   ouiaId: null,
+  clearSelected: () => {},
 };
 
 export { PaginatedTable as _PaginatedTable };

diff --git a/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleList.jsx b/awx/ui_next/src/components/Schedule/ScheduleList/ScheduleList.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import { bool, func } from 'prop-types';
 
@@ -10,6 +10,7 @@ import PaginatedTable, { HeaderRow, HeaderCell } from '../../PaginatedTable';
 import DataListToolbar from '../../DataListToolbar';
 import { ToolbarAddButton, ToolbarDeleteButton } from '../../PaginatedDataList';
 import useRequest, { useDeleteItems } from '../../../util/useRequest';
+import useSelected from '../../../util/useSelected';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import ScheduleListItem from './ScheduleListItem';
 
@@ -27,8 +28,6 @@ function ScheduleList({
   launchConfig,
   surveyConfig,
 }) {
-  const [selected, setSelected] = useState([]);
-
   const location = useLocation();
 
   const {
@@ -76,8 +75,13 @@ function ScheduleList({
     fetchSchedules();
   }, [fetchSchedules]);
 
-  const isAllSelected =
-    selected.length === schedules.length && selected.length > 0;
+  const {
+    selected,
+    isAllSelected,
+    handleSelect,
+    selectAll,
+    clearSelected,
+  } = useSelected(schedules);
 
   const {
     isLoading: isDeleteLoading,
@@ -95,21 +99,9 @@ function ScheduleList({
     }
   );
 
-  const handleSelectAll = isSelected => {
-    setSelected(isSelected ? [...schedules] : []);
-  };
-
-  const handleSelect = row => {
-    if (selected.some(s => s.id === row.id)) {
-      setSelected(selected.filter(s => s.id !== row.id));
-    } else {
-      setSelected(selected.concat(row));
-    }
-  };
-
   const handleDelete = async () => {
     await deleteJobs();
-    setSelected([]);
+    clearSelected();
   };
 
   const canAdd =
@@ -183,6 +175,7 @@ function ScheduleList({
             isMissingSurvey={isTemplate && hasMissingSurveyValue(item)}
           />
         )}
+        clearSelected={clearSelected}
         toolbarSearchColumns={[
           {
             name: t`Name`,
@@ -209,7 +202,7 @@ function ScheduleList({
             {...props}
             showSelectAll
             isAllSelected={isAllSelected}
-            onSelectAll={handleSelectAll}
+            onSelectAll={selectAll}
             qsConfig={QS_CONFIG}
             additionalControls={[
               ...(canAdd

diff --git a/awx/ui_next/src/components/TemplateList/TemplateList.jsx b/awx/ui_next/src/components/TemplateList/TemplateList.jsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { useLocation, Link } from 'react-router-dom';
 import { t, Plural } from '@lingui/macro';
 import { Card, DropdownItem } from '@patternfly/react-core';
@@ -13,6 +13,7 @@ import ErrorDetail from '../ErrorDetail';
 import { ToolbarDeleteButton } from '../PaginatedDataList';
 import PaginatedTable, { HeaderRow, HeaderCell } from '../PaginatedTable';
 import useRequest, { useDeleteItems } from '../../util/useRequest';
+import useSelected from '../../util/useSelected';
 import { getQSConfig, parseQueryString } from '../../util/qs';
 import useWsTemplates from '../../util/useWsTemplates';
 import AddDropDownButton from '../AddDropDownButton';
@@ -35,8 +36,6 @@ function TemplateList({ defaultParams }) {
   );
 
   const location = useLocation();
-  const [selected, setSelected] = useState([]);
-
   const {
     result: {
       results,
@@ -87,8 +86,14 @@ function TemplateList({ defaultParams }) {
 
   const templates = useWsTemplates(results);
 
-  const isAllSelected =
-    selected.length === templates.length && selected.length > 0;
+  const {
+    selected,
+    isAllSelected,
+    handleSelect,
+    selectAll,
+    clearSelected,
+  } = useSelected(templates);
+
   const {
     isLoading: isDeleteLoading,
     deleteItems: deleteTemplates,
@@ -117,19 +122,7 @@ function TemplateList({ defaultParams }) {
 
   const handleTemplateDelete = async () => {
     await deleteTemplates();
-    setSelected([]);
-  };
-
-  const handleSelectAll = isSelected => {
-    setSelected(isSelected ? [...templates] : []);
-  };
-
-  const handleSelect = template => {
-    if (selected.some(s => s.id === template.id)) {
-      setSelected(selected.filter(s => s.id !== template.id));
-    } else {
-      setSelected(selected.concat(template));
-    }
+    clearSelected();
   };
 
   const canAddJT =
@@ -179,7 +172,7 @@ function TemplateList({ defaultParams }) {
   );
 
   return (
-    <Fragment>
+    <>
       <Card>
         <PaginatedTable
           contentError={contentError}
@@ -188,7 +181,7 @@ function TemplateList({ defaultParams }) {
           itemCount={count}
           pluralizedItemName={t`Templates`}
           qsConfig={qsConfig}
-          onRowClick={handleSelect}
+          clearSelected={clearSelected}
           toolbarSearchColumns={[
             {
               name: t`Name`,
@@ -235,7 +228,7 @@ function TemplateList({ defaultParams }) {
               {...props}
               showSelectAll
               isAllSelected={isAllSelected}
-              onSelectAll={handleSelectAll}
+              onSelectAll={selectAll}
               qsConfig={qsConfig}
               additionalControls={[
                 ...(canAddJT || canAddWFJT ? [addButton] : []),
@@ -281,7 +274,7 @@ function TemplateList({ defaultParams }) {
         {t`Failed to delete one or more templates.`}
         <ErrorDetail error={deletionError} />
       </AlertModal>
-    </Fragment>
+    </>
   );
 }
 

diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
@@ -76,9 +76,14 @@ function CredentialList() {
     fetchCredentials();
   }, [fetchCredentials]);
 
-  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
-    credentials
-  );
+  const {
+    selected,
+    isAllSelected,
+    handleSelect,
+    setSelected,
+    selectAll,
+    clearSelected,
+  } = useSelected(credentials);
 
   const {
     isLoading: isDeleteLoading,
@@ -115,7 +120,7 @@ function CredentialList() {
           items={credentials}
           itemCount={credentialCount}
           qsConfig={QS_CONFIG}
-          onRowClick={handleSelect}
+          clearSelected={clearSelected}
           toolbarSearchableKeys={searchableKeys}
           toolbarRelatedSearchableKeys={relatedSearchableKeys}
           toolbarSearchColumns={[
@@ -160,9 +165,7 @@ function CredentialList() {
               {...props}
               showSelectAll
               isAllSelected={isAllSelected}
-              onSelectAll={isSelected =>
-                setSelected(isSelected ? [...credentials] : [])
-              }
+              onSelectAll={selectAll}
               qsConfig={QS_CONFIG}
               additionalControls={[
                 ...(canAdd