Refs #36793 - Refactored based on suggestions

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

@@ -1,29 +1,140 @@
 import React from 'react';
 import { CubeIcon } from '@patternfly/react-icons';
+import { Td } from '@patternfly/react-table';
+import {
+  Dropdown,
+  KebabToggle,
+  DropdownItem,
+  ToolbarItem,
+} from '@patternfly/react-core';
 import { translate as __ } from '../../common/I18n';
 import TableIndexPage from '../PF4/TableIndexPage/TableIndexPage';
+import { ActionKebab } from '../PF4/TableIndexPage/ActionKebab';
 import { HOSTS_API_PATH, API_REQUEST_KEY } from '../../routes/Hosts/constants';
+import { useAPI } from '../../common/hooks/API/APIHooks';
+import { useBulkSelect } from '../PF4/TableIndexPage/Table/TableHooks';
+import SelectAllCheckbox from '../PF4/TableIndexPage/Table/SelectAllCheckbox';
+import { getPageStats } from '../PF4/TableIndexPage/Table/helpers';
+import { STATUS } from '../../constants';
 
 const HostsIndex = () => {
   const columns = {
     name: {
       title: __('Name'),
-      wrapper: ({ id, name }) => (<a href={`hosts/${id}`}>{name}</a>),
+      wrapper: ({ id, name }) => <a href={`hosts/${id}`}>{name}</a>,
       isSorted: true,
     },
   };
+  const defaultParams = { search: '' }; // search ||
+
+  const response = useAPI(
+    'get',
+    HOSTS_API_PATH.includes('include_permissions')
+      ? HOSTS_API_PATH
+      : `${HOSTS_API_PATH}?include_permissions=true`,
+    {
+      ...{ key: API_REQUEST_KEY },
+      params: defaultParams,
+    }
+  );
+
+  const {
+    response: {
+      search: apiSearchQuery,
+      can_create: canCreate,
+      results,
+      total,
+      per_page: perPage,
+      page,
+      subtotal,
+      message: errorMessage,
+    },
+    status = STATUS.PENDING,
+    setAPIOptions,
+  } = response;
+
+  const { pageRowCount } = getPageStats({ total, page, perPage });
+
+  const {
+    updateSearchQuery,
+    fetchBulkParams,
+    ...selectAllOptions
+  } = useBulkSelect({
+    results,
+    metadata: {},
+  });
+
+  const {
+    selectAll,
+    selectPage,
+    selectNone,
+    selectedCount,
+    selectOne,
+    areAllRowsOnPageSelected,
+    areAllRowsSelected,
+    isSelected,
+  } = selectAllOptions;
 
   const computeContentSource = search =>
     `/change_host_content_source?search=${search}`;
 
-  const customActionKebabs = [
-    {
-      title: __('Change content source'),
-      icon: <CubeIcon />,
-      computeHref: computeContentSource,
-    },
+  const item = {
+    title: __('Change content source'),
+    icon: <CubeIcon />,
+    computeHref: computeContentSource,
+  };
+
+  const selectionToolbar = (
+    <ToolbarItem key="selectAll">
+      <SelectAllCheckbox
+        {...{
+          selectAll,
+          selectPage,
+          selectNone,
+          selectedCount,
+          pageRowCount,
+        }}
+        totalCount={total}
+        areAllRowsOnPageSelected={areAllRowsOnPageSelected()}
+        areAllRowsSelected={areAllRowsSelected()}
+      />
+    </ToolbarItem>
+  );
+
+  const rowSelectNodeFunc = result => (
+    <Td
+      select={{
+        rowIndex: result.id,
+        onSelect: (_event, isSelecting) => {
+          selectOne(isSelecting, result.id);
+        },
+        isSelected: isSelected(result.id),
+        disable: false,
+      }}
+    />
+  );
+
+  const computeHref = () => {
+    if (selectedCount > 0) {
+      return `/change_host_content_source?search=${fetchBulkParams()}`;
+    }
+    return '';
+  };
+
+  const actionNode = [
+    <DropdownItem
+      ouiaId="change-content-s-dropdown-item"
+      key={item.title}
+      title={item.title}
+      href={computeHref()}
+      isDisabled={selectedCount === 0}
+    >
+      {item.icon} {item.title}
+    </DropdownItem>,
   ];
 
+  const customToolbarItems = <ActionKebab items={actionNode} />;
+
   return (
     <TableIndexPage
       apiUrl={HOSTS_API_PATH}
@@ -32,9 +143,11 @@ const HostsIndex = () => {
       controller="hosts"
       isDeleteable
       columns={columns}
-      displaySelectAllCheckbox
-      customActionKebabs={customActionKebabs}
       creatable={false}
+      response={response}
+      customToolbarItems={customToolbarItems}
+      selectionToolbar={selectionToolbar}
+      rowSelectNodeFunc={rowSelectNodeFunc}
     />
   );
 };

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

@@ -1,6 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@patternfly/react-core';
+import {
+  Button,
+  Dropdown,
+  KebabToggle,
+  DropdownItem,
+} from '@patternfly/react-core';
 
 /**
  * Generate a button or a dropdown of buttons
@@ -10,20 +15,43 @@ import { Button } from '@patternfly/react-core';
  */
 export const ActionButtons = ({ buttons: originalButtons }) => {
   const buttons = [...originalButtons];
+  const [isOpen, setIsOpen] = useState(false);
   if (!buttons.length) return null;
-
-  const pfButtons = buttons.map(button => (
-    <Button
-      key={button.title}
-      ouiaId="action-buttons-button"
-      component={button.action?.href ? 'a' : undefined}
-      {...button.action}
-    >
-      {button.title}
-    </Button>
-  ));
-
-  return <>{pfButtons}</>;
+  const firstButton = buttons.shift();
+  return (
+    <>
+      <Button
+        ouiaId="action-buttons-button"
+        component={firstButton.action?.href ? 'a' : undefined}
+        {...firstButton.action}
+      >
+        {firstButton.title}
+      </Button>
+      {buttons.length > 0 && (
+        <Dropdown
+          ouiaId="action-buttons-dropdown"
+          toggle={
+            <KebabToggle
+              aria-label="toggle action dropdown"
+              onToggle={setIsOpen}
+            />
+          }
+          isOpen={isOpen}
+          isPlain
+          dropdownItems={buttons.map(button => (
+            <DropdownItem
+              ouiaId={`${button.title}-dropdown-item`}
+              key={button.title}
+              title={button.title}
+              {...button.action}
+            >
+              {button.icon} {button.title}
+            </DropdownItem>
+          ))}
+        />
+      )}
+    </>
+  );
 };
 
 ActionButtons.propTypes = {
@@ -32,7 +60,6 @@ ActionButtons.propTypes = {
       action: PropTypes.object,
       title: PropTypes.string,
       icon: PropTypes.node,
-      isDisabled: PropTypes.bool,
     })
   ),
 };

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

@@ -8,8 +8,7 @@ import { Dropdown, KebabToggle, DropdownItem } from '@patternfly/react-core';
  * @param  {Object} action action to preform when the button is click can be href with data-method or Onclick
  * @return {Function} button component or splitbutton component
  */
-export const ActionKebab = ({ items: originalItems }) => {
-  const items = [...originalItems];
+export const ActionKebab = ({ items }) => {
   const [isOpen, setIsOpen] = useState(false);
   if (!items.length) return null;
   return (
@@ -25,32 +24,15 @@ export const ActionKebab = ({ items: originalItems }) => {
           }
           isOpen={isOpen}
           isPlain
-          dropdownItems={items.map(item => (
-            <DropdownItem
-              ouiaId={`${item.title}-dropdown-item`}
-              key={item.title}
-              title={item.title}
-              {...item.action}
-              isDisabled={item.isDisabled}
-            >
-              {item.icon} {item.title}
-            </DropdownItem>
-          ))}
+          dropdownItems={items}
         />
       )}
     </>
   );
 };
 
 ActionKebab.propTypes = {
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      action: PropTypes.object,
-      title: PropTypes.string,
-      icon: PropTypes.node,
-      isDisabled: PropTypes.bool,
-    })
-  ),
+  items: PropTypes.arrayOf(PropTypes.node),
 };
 
 ActionKebab.defaultProps = {

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

@@ -29,9 +29,7 @@ export const Table = ({
   url,
   isPending,
   isEmbedded,
-  displaySelectAllCheckbox,
-  isSelected,
-  selectOne,
+  rowSelectNodeFunc,
 }) => {
   const columnsToSortParams = {};
   Object.keys(columns).forEach(key => {
@@ -86,7 +84,7 @@ export const Table = ({
       <TableComposable variant="compact" ouiaId="table">
         <Thead>
           <Tr ouiaId="table-header">
-            {displaySelectAllCheckbox && <Th key="checkbox-th" />}
+            {rowSelectNodeFunc && <Th key="checkbox-th" />}
             {columnNamesKeys.map(k => (
               <Th
                 key={k}
@@ -129,18 +127,7 @@ export const Table = ({
           )}
           {results.map((result, rowIndex) => (
             <Tr key={rowIndex} ouiaId={`table-row-${rowIndex}`}>
-              {displaySelectAllCheckbox && (
-                <Td
-                  select={{
-                    rowIndex: result.id,
-                    onSelect: (_event, isSelecting) => {
-                      selectOne(isSelecting, result.id);
-                    },
-                    isSelected: isSelected(result.id),
-                    disable: false,
-                  }}
-                />
-              )}
+              {rowSelectNodeFunc && rowSelectNodeFunc(result)}
               {columnNamesKeys.map(k => (
                 <Td key={k} dataLabel={columnNames[k]}>
                   {columns[k].wrapper ? columns[k].wrapper(result) : result[k]}
@@ -183,19 +170,15 @@ Table.propTypes = {
   url: PropTypes.string.isRequired,
   isPending: PropTypes.bool.isRequired,
   isEmbedded: PropTypes.bool,
-  displaySelectAllCheckbox: PropTypes.bool,
-  isSelected: PropTypes.func,
-  selectOne: PropTypes.func,
+  rowSelectNodeFunc: PropTypes.func,
 };
 
 Table.defaultProps = {
   errorMessage: null,
   isDeleteable: false,
   itemCount: 0,
   getActions: null,
+  rowSelectNodeFunc: undefined,
   results: [],
   isEmbedded: false,
-  displaySelectAllCheckbox: false,
-  selectOne: noop,
-  isSelected: noop,
 };

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

@@ -215,7 +215,6 @@ export const useBulkSelect = ({
   };
 
   const selectAll = checked => {
-    console.log({ checked });
     setSelectAllMode(checked);
     if (checked) {
       exclusionSet.clear();
@@ -225,15 +224,13 @@ export const useBulkSelect = ({
   };
 
   const fetchBulkParams = (idColumnName = idColumn) => {
-    console.log('fetchBulkParams');
     const searchQueryWithExclusionSet = () => {
       const query = [
         searchQuery,
         filtersQuery,
         !isEmpty(exclusionSet) &&
           `${idColumnName} !^ (${[...exclusionSet].join(',')})`,
       ];
-      console.log(query.filter(item => item).join(' and '));
       return query.filter(item => item).join(' and ');
     };
 
@@ -242,8 +239,6 @@ export const useBulkSelect = ({
         throw new Error('Cannot build a search query with no items selected');
       return `${idColumnName} ^ (${[...inclusionSet].join(',')})`;
     };
-
-    console.log({ selectAllMode });
     return selectAllMode
       ? searchQueryWithExclusionSet()
       : searchQueryWithInclusionSet();
@@ -299,4 +294,4 @@ export const useUrlParams = () => {
     searchParam,
     ...urlParams,
   };
-};
+};