wip adding select all

webpack/assets/javascripts/react_app/components/HostsIndex/index.js

@@ -1,4 +1,5 @@
 import React, { createContext } from 'react';
+import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { useSelector, useDispatch, shallowEqual } from 'react-redux';
 import { Td } from '@patternfly/react-table';
@@ -15,6 +16,7 @@ import SelectAllCheckbox from '../PF4/TableIndexPage/Table/SelectAllCheckbox';
 import { getPageStats } from '../PF4/TableIndexPage/Table/helpers';
 import { deleteHost } from '../HostDetails/ActionsBar/actions';
 import { useForemanSettings } from '../../Root/Context/ForemanContext';
+import { getURIsearch } from '../../common/urlHelpers';
 
 export const ForemanHostsIndexActionsBarContext = createContext({});
 
@@ -26,7 +28,15 @@ const HostsIndex = () => {
       isSorted: true,
     },
   };
-  const defaultParams = { search: '' };
+
+  const history = useHistory();
+  const { location: { search: historySearch } = {} } = history || {};
+  const urlParams = new URLSearchParams(historySearch);
+  const urlParamsSearch = urlParams.get('search') || '';
+  const searchFromUrl = urlParamsSearch || getURIsearch();
+  const initialSearchQuery = apiSearchQuery || searchFromUrl || '';
+
+  const defaultParams = { search: initialSearchQuery };
 
   const response = useAPI('get', `${HOSTS_API_PATH}?include_permissions=true`, {
     key: API_REQUEST_KEY,
@@ -37,6 +47,7 @@ const HostsIndex = () => {
     response: {
       search: apiSearchQuery,
       results,
+      subtotal,
       total,
       per_page: perPage,
       page,
@@ -45,10 +56,14 @@ const HostsIndex = () => {
 
   const { pageRowCount } = getPageStats({ total, page, perPage });
 
-  const { fetchBulkParams, ...selectAllOptions } = useBulkSelect({
+  const {
+    fetchBulkParams,
+    updateSearchQuery,
+    ...selectAllOptions
+  } = useBulkSelect({
     results,
-    metadata: { total, page },
-    initialSearchQuery: apiSearchQuery || '',
+    metadata: { total, page, selectable: subtotal },
+    initialSearchQuery,
   });
 
   const {
@@ -60,8 +75,6 @@ const HostsIndex = () => {
     areAllRowsOnPageSelected,
     areAllRowsSelected,
     isSelected,
-    selectedResults,
-    selectAllMode,
   } = selectAllOptions;
 
   const selectionToolbar = (
@@ -102,23 +115,17 @@ const HostsIndex = () => {
   const deleteHostHandler = ({ hostName, computeId }) =>
     dispatch(deleteHost(hostName, computeId, destroyVmOnHostDelete));
   const handleBulkDelete = () => {
-    // eslint-disable-next-line camelcase
-    const selectedHosts = selectedResults.map(
-      ({ id, name: hostName, compute_id: computeId }) => ({
-        id,
-        hostName,
-        computeId,
-      })
-    );
-    deleteHostHandler(selectedHosts[0]);
+    const bulkParams = fetchBulkParams();
+    // dispatch(bulkDeleteHosts(bulkParams));
+    console.log(bulkParams)
   };
 
   const dropdownItems = [
     <DropdownItem
       ouiaId="delete=hosts-dropdown-item"
       key="delete=hosts-dropdown-item"
       onClick={handleBulkDelete}
-      isDisabled={selectAllMode || selectedCount === 0}
+      isDisabled={selectedCount === 0}
       icon={<TrashIcon />}
     >
       {__('Delete')}
@@ -160,6 +167,7 @@ const HostsIndex = () => {
       showCheckboxes
       rowSelectTd={RowSelectTd}
       rowKebabItems={rowKebabItems}
+      updateSearchQuery={updateSearchQuery}
     />
   );
 };

webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/TableHooks.js

@@ -227,7 +227,7 @@ export const useBulkSelect = ({
   const fetchBulkParams = ({
     idColumnName = idColumn,
     selectAllQuery = '',
-  }) => {
+  } = {}) => {
     const searchQueryWithExclusionSet = () => {
       const query = [
         searchQuery,

webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js

@@ -86,6 +86,7 @@ const TableIndexPage = ({
   showCheckboxes,
   rowSelectTd,
   rowKebabItems,
+  updateSearchQuery,
 }) => {
   const history = useHistory();
   const { location: { search: historySearch } = {} } = history || {};
@@ -154,6 +155,7 @@ const TableIndexPage = ({
   const setSearch = newSearch => {
     const uri = new URI();
     uri.setSearch(newSearch);
+    updateSearchQuery(newSearch.search);
     history.push({ search: uri.search() });
     setParamsAndAPI({ ...params, ...newSearch });
   };
@@ -324,6 +326,7 @@ TableIndexPage.propTypes = {
   rowSelectTd: PropTypes.func,
   showCheckboxes: PropTypes.bool,
   rowKebabItems: PropTypes.func,
+  updateSearchQuery: PropTypes.func,
 };
 
 TableIndexPage.defaultProps = {
@@ -350,6 +353,7 @@ TableIndexPage.defaultProps = {
   showCheckboxes: false,
   replacementResponse: null,
   rowKebabItems: noop,
+  updateSearchQuery: noop,
 };
 
 export default TableIndexPage;