Fixes #38830 - Add sub-menu Host collections to bulk hosts Change associations

Author: lfu

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

@@ -61,7 +61,7 @@ import Slot from '../common/Slot';
 import forceSingleton from '../../common/forceSingleton';
 import './index.scss';
 import { STATUS } from '../../constants';
-import { RowSelectTd } from './RowSelectTd';
+import { RowSelectTd } from '../PF4/TableIndexPage/RowSelectTd';
 import {
   useCurrentUserTablePreferences,
   useSetParamsAndApiAndSearch,
@@ -304,6 +304,12 @@ const HostsIndex = () => {
               >
                 {__('Host group')}
               </MenuItem>
+              <Slot
+                id="_host-associations"
+                fetchBulkParams={fetchBulkParams}
+                selectedCount={selectedCount}
+                multi
+              />
               <MenuItem
                 itemId="change-owner-dropdown-item"
                 key="change-owner-dropdown-item"

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Td } from '@patternfly/react-table';
+
+export const RowSelectTd = ({
+  rowData,
+  selectOne,
+  isSelected,
+  isSelectable,
+  idColumnName = 'id',
+}) => {
+  const isRowSelectable = isSelectable ? isSelectable(rowData) : true;
+
+  return (
+    <Td
+      select={{
+        rowIndex: rowData[idColumnName],
+        onSelect: (_event, isSelecting) => {
+          selectOne(isSelecting, rowData[idColumnName], rowData);
+        },
+        isSelected: isSelected(rowData[idColumnName]),
+        isDisabled: !isRowSelectable,
+      }}
+    />
+  );
+};
+
+RowSelectTd.propTypes = {
+  rowData: PropTypes.object.isRequired,
+  selectOne: PropTypes.func.isRequired,
+  isSelected: PropTypes.func.isRequired,
+  isSelectable: PropTypes.func,
+  idColumnName: PropTypes.string,
+};
+
+RowSelectTd.defaultProps = {
+  isSelectable: null,
+  idColumnName: 'id',
+};

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

@@ -16,6 +16,7 @@ import Pagination from '../../../Pagination';
 import { DeleteModal } from './DeleteModal';
 import EmptyPage from '../../../../routes/common/EmptyPage';
 import { getColumnHelpers } from './helpers';
+import { RowSelectTd as DefaultRowSelectTd } from '../RowSelectTd';
 
 export const Table = ({
   columns,
@@ -28,6 +29,7 @@ export const Table = ({
   itemCount,
   selectOne,
   isSelected,
+  isSelectable,
   params,
   refreshData,
   results,
@@ -106,7 +108,7 @@ export const Table = ({
       })),
     ].filter(Boolean);
   };
-  const RowSelectTd = rowSelectTd;
+  const RowSelectTd = rowSelectTd === noop ? DefaultRowSelectTd : rowSelectTd;
   return (
     <>
       <DeleteModal
@@ -206,6 +208,7 @@ export const Table = ({
                         rowData={result}
                         selectOne={selectOne}
                         isSelected={isSelected}
+                        isSelectable={isSelectable}
                         idColumnName={idColumn}
                       />
                     )}
@@ -256,6 +259,7 @@ Table.propTypes = {
   idColumn: PropTypes.string,
   selectOne: PropTypes.func,
   isSelected: PropTypes.func,
+  isSelectable: PropTypes.func,
   showCheckboxes: PropTypes.bool,
   bottomPagination: PropTypes.node,
   childrenOutsideTbody: PropTypes.bool,
@@ -279,6 +283,7 @@ Table.defaultProps = {
   idColumn: 'id',
   selectOne: noop,
   isSelected: noop,
+  isSelectable: null,
   showCheckboxes: false,
   bottomPagination: null,
   childrenOutsideTbody: false,