Fixes #36822 - Design new hosts page

Update the TableIndexPage as a part of this action to accept things like
select all

config/routes.rb

@@ -550,10 +550,13 @@
     mount GraphiQL::Rails::Engine, at: '/graphiql', graphql_path: '/api/graphql'
   end
 
+
   match 'host_statuses' => 'react#index', :via => :get
   constraints(id: /[^\/]+/) do
     match 'new/hosts/:id' => 'react#index', :via => :get, :as => :host_details_page
   end
+  match 'new/hosts/' => 'react#index', :via => :get
+
   get 'page-not-found' => 'react#index'
   get 'links/:type(/:section)' => 'links#show', :as => 'external_link', :constraints => { section: %r{.*} }
 end

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

@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownToggle, DropdownToggleCheckbox,
+  DropdownItem } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { noop } from 'foremanReact/common/helpers';
+
+import './SelectAllCheckbox.scss';
+
+const SelectAllCheckbox = ({
+  selectNone,
+  selectPage,
+  selectedCount,
+  pageRowCount,
+  totalCount,
+  areAllRowsOnPageSelected,
+  areAllRowsSelected,
+  selectAll,
+}) => {
+  const [isSelectAllDropdownOpen, setSelectAllDropdownOpen] = useState(false);
+  const [selectionToggle, setSelectionToggle] = useState(false);
+
+  const canSelectAll = selectAll !== noop;
+  // Checkbox states: false = unchecked, null = partially-checked, true = checked
+  // Flow: All are selected -> click -> none are selected
+  // Some are selected -> click -> none are selected
+  // None are selected -> click -> page is selected
+  const onSelectAllCheckboxChange = (checked) => {
+    if (checked && selectionToggle !== null) {
+      if (!canSelectAll) {
+        selectPage();
+      } else {
+        selectAll(true);
+      }
+    } else {
+      selectNone();
+    }
+  };
+
+  const onSelectAllDropdownToggle = () => setSelectAllDropdownOpen(isOpen => !isOpen);
+
+  const handleSelectAll = () => {
+    setSelectAllDropdownOpen(false);
+    setSelectionToggle(true);
+    selectAll(true);
+  };
+  const handleSelectPage = () => {
+    setSelectAllDropdownOpen(false);
+    setSelectionToggle(true);
+    selectPage();
+  };
+  const handleSelectNone = () => {
+    setSelectAllDropdownOpen(false);
+    setSelectionToggle(false);
+    selectNone();
+  };
+
+  useEffect(() => {
+    let newCheckedState = null; // null is partially-checked state
+
+    if (areAllRowsSelected) {
+      newCheckedState = true;
+    } else if (selectedCount === 0) {
+      newCheckedState = false;
+    }
+    setSelectionToggle(newCheckedState);
+  }, [selectedCount, areAllRowsSelected]);
+
+  const selectAllDropdownItems = [
+    <DropdownItem key="select-none" ouiaId="select-none" component="button" isDisabled={selectedCount === 0} onClick={handleSelectNone} >
+      {`${__('Select none')} (0)`}
+    </DropdownItem>,
+    <DropdownItem key="select-page" ouiaId="select-page" component="button" isDisabled={pageRowCount === 0 || areAllRowsOnPageSelected} onClick={handleSelectPage}>
+      {`${__('Select page')} (${pageRowCount})`}
+    </DropdownItem>,
+  ];
+  if (canSelectAll) {
+    selectAllDropdownItems.push((
+      <DropdownItem key="select-all" id="all" ouiaId="select-all" component="button" isDisabled={totalCount === 0 || areAllRowsSelected} onClick={handleSelectAll}>
+        {`${__('Select all')} (${totalCount})`}
+      </DropdownItem>));
+  }
+
+  return (
+    <Dropdown
+      toggle={
+        <DropdownToggle
+          onToggle={onSelectAllDropdownToggle}
+          id="select-all-checkbox-dropdown-toggle"
+          ouiaId="select-all-checkbox-dropdown-toggle"
+          splitButtonItems={[
+            <DropdownToggleCheckbox
+              className="tablewrapper-select-all-checkbox"
+              key="tablewrapper-select-all-checkbox"
+              ouiaId="select-all-checkbox-dropdown-toggle-checkbox"
+              aria-label="Select all"
+              onChange={checked => onSelectAllCheckboxChange(checked)}
+              isChecked={selectionToggle}
+              isDisabled={totalCount === 0 && selectedCount === 0}
+            >
+              {selectedCount > 0 && `${selectedCount} selected`}
+            </DropdownToggleCheckbox>,
+          ]}
+        />
+      }
+      isOpen={isSelectAllDropdownOpen}
+      dropdownItems={selectAllDropdownItems}
+      id="selection-checkbox"
+      ouiaId="selection-checkbox"
+    />
+  );
+};
+
+SelectAllCheckbox.propTypes = {
+  selectedCount: PropTypes.number.isRequired,
+  selectNone: PropTypes.func.isRequired,
+  selectPage: PropTypes.func.isRequired,
+  selectAll: PropTypes.func,
+  pageRowCount: PropTypes.number.isRequired,
+  totalCount: PropTypes.number.isRequired,
+  areAllRowsOnPageSelected: PropTypes.bool.isRequired,
+  areAllRowsSelected: PropTypes.bool.isRequired,
+};
+
+SelectAllCheckbox.defaultProps = {
+  selectAll: noop,
+  pageRowCount: 0,
+  totalCount: 0
+};
+
+export default SelectAllCheckbox;

webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.scss

@@ -0,0 +1,3 @@
+.tablewrapper-select-all-checkbox {
+  font-weight: normal;
+}

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

@@ -9,12 +9,13 @@ import {
   Td,
   ActionsColumn,
 } from '@patternfly/react-table';
+import { noop } from '../../../../common/helpers';
 import { translate as __ } from '../../../../common/I18n';
 import { useTableSort } from '../../Helpers/useTableSort';
 import Pagination from '../../../Pagination';
 import { DeleteModal } from './DeleteModal';
+import SelectAllCheckbox from './SelectAllCheckbox';
 import EmptyPage from '../../../../routes/common/EmptyPage';
-
 export const Table = ({
   columns,
   errorMessage,
@@ -27,6 +28,18 @@ export const Table = ({
   setParams,
   url,
   isPending,
+  displaySelectAllCheckbox,
+  selectAll,
+  selectAllMode,
+  selectNone,
+  selectPage,
+  areAllRowsOnPageSelected,
+  areAllRowsSelected,
+  selectedCount,
+  selectedResults,
+  clearSelectedResults,
+  isSelected,
+  selectOne
 }) => {
   const columnsToSortParams = {};
   Object.keys(columns).forEach(key => {
@@ -68,6 +81,7 @@ export const Table = ({
       getActions && getActions({ id, name, ...item }),
     ].filter(Boolean);
   const columnNamesKeys = Object.keys(columns);
+
   return (
     <>
       <DeleteModal
@@ -80,14 +94,14 @@ export const Table = ({
       <TableComposable variant="compact" ouiaId="table">
         <Thead>
           <Tr ouiaId="table-header">
+           {displaySelectAllCheckbox && <Th key="checkbox-th"/>}
             {columnNamesKeys.map(k => (
               <Th
                 key={k}
                 sort={
                   Object.values(columnsToSortParams).includes(k) &&
                   pfSortParams(columnNames[k])
-                }
-              >
+                }>
                 {columnNames[k]}
               </Th>
             ))}
@@ -122,6 +136,18 @@ export const Table = ({
           )}
           {results.map((result, rowIndex) => (
             <Tr key={rowIndex} ouiaId={`table-row-${rowIndex}`}>
+           {displaySelectAllCheckbox &&
+              <Td
+                select={{
+                rowIndex: result.id,
+                onSelect: (_event, isSelecting) => {
+                  console.log({result, isSelecting});
+                  selectOne(isSelecting, result.id);
+                },
+                isSelected: isSelected(result.id),
+                disable: false
+              }}
+            />}
               {columnNamesKeys.map(k => (
                 <Td key={k} dataLabel={columnNames[k]}>
                   {columns[k].wrapper ? columns[k].wrapper(result) : result[k]}
@@ -162,6 +188,18 @@ Table.propTypes = {
   setParams: PropTypes.func.isRequired,
   url: PropTypes.string.isRequired,
   isPending: PropTypes.bool.isRequired,
+  displaySelectAllCheckbox: PropTypes.bool,
+  selectedCount: PropTypes.number,
+  selectedResults: PropTypes.arrayOf(PropTypes.shape({})),
+  clearSelectedResults: PropTypes.func,
+  selectAll: PropTypes.func,
+  selectAllMode: PropTypes.bool,
+  selectNone: PropTypes.func,
+  selectPage: PropTypes.func,
+  areAllRowsOnPageSelected: PropTypes.func,
+  areAllRowsSelected: PropTypes.func,
+  isSelected: PropTypes.func,
+  selectOne: PropTypes.func,
 };
 
 Table.defaultProps = {
@@ -170,4 +208,16 @@ Table.defaultProps = {
   itemCount: 0,
   getActions: null,
   results: [],
+  displaySelectAllCheckbox: false,
+  selectedCount: 0,
+  selectedResults: [],
+  clearSelectedResults: noop,
+  selectAll: undefined,
+  selectAllMode: false,
+  selectNone: undefined,
+  selectPage: undefined,
+  selectOne: noop,
+  areAllRowsOnPageSelected: noop,
+  areAllRowsSelected: noop,
+  isSelected: noop
 };