Refs #36822 - Added a new change concent source action

theforeman · Oct 11, 2023 · a31aa65 · a31aa65
1 parent 6c8b1f5
commit a31aa65
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 3 deletions.
diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/ActionButtons.js b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/ActionButtons.js
@@ -44,6 +44,7 @@ export const ActionButtons = ({ buttons: originalButtons }) => {
               key={button.title}
               title={button.title}
               {...button.action}
+              isDisabled = {button.isDisabled}
             >
               {button.icon} {button.title}
             </DropdownItem>

diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js
@@ -128,7 +128,7 @@ const TableIndexPage = ({
     results,
     metadata: {},
   });
-console.log({selectAllOptions});
+
   const {
     selectAll,
                   selectPage,
@@ -166,6 +166,21 @@ console.log({selectAllOptions});
     }
   };
 
+  const additionalActionButtons = customActionButtons.map((customButton) => {
+    const responseButton = {...customButton}
+
+    if (selectedCount === 0) {
+      responseButton.isDisabled = true
+    }
+
+    if (displaySelectAllCheckbox && responseButton.action?.onClick && selectedCount > 0) {
+      responseButton.action.onClick = () => responseButton.action.onClick(fetchBulkParams());
+    }
+    return responseButton;
+  });
+
+
+
   const actionButtons = [
     creatable &&
       canCreate && {
@@ -183,7 +198,7 @@ console.log({selectAllOptions});
       icon: <QuestionCircleIcon />,
       action: { href: customHelpURL || helpURL() },
     },
-    ...customActionButtons,
+    ...additionalActionButtons,
   ].filter(item => item);
 
   return (
@@ -326,7 +341,7 @@ TableIndexPage.propTypes = {
   isDeleteable: PropTypes.bool,
   searchable: PropTypes.bool,
   children: PropTypes.node,
-  displaySelectAllCheckbox: PropTypes.bool,
+  displaySelectAllCheckbox: PropTypes.bool
 };
 
 TableIndexPage.defaultProps = {

diff --git a/webpack/assets/javascripts/react_app/routes/Hosts/HostsPage/index.js b/webpack/assets/javascripts/react_app/routes/Hosts/HostsPage/index.js
@@ -1,11 +1,20 @@
 import React from 'react';
+import { useDispatch } from 'react-redux';
 
+import { QuestionCircleIcon } from '@patternfly/react-icons';
+import {
+  Split, SplitItem, ActionList, ActionListItem, Dropdown,
+  DropdownItem, KebabToggle, Skeleton, Tooltip, ToggleGroup,
+  DropdownToggle, DropdownToggleAction,
+} from '@patternfly/react-core';
 import { translate as __ } from '../../../common/I18n';
 import TableIndexPage from '../../../components/PF4/TableIndexPage/TableIndexPage';
 
+
 import { HOSTS_API_PATH, API_REQUEST_KEY } from '../constants';
 
 const HostsPage = () => {
+  const dispatch = useDispatch();
   const columns = {
     name: {
       title: __('Name'),
@@ -18,6 +27,65 @@ const HostsPage = () => {
       isSorted: true,
     },
   };
+
+
+  const changeContentSource = (search) => {
+    dispatch ({
+      type: 'API_GET',
+      payload: {
+        key: "HOSTS_CHANGE_CONTENT_SOURCE",
+        url: `/change_host_content_source?search=${search}`,
+      },
+    });
+  }
+
+  const dropdownItems = [
+    <DropdownItem
+      aria-label="change_content_source"
+      ouiaId="change_content_source"
+      key="change_content_source"
+      component="button"
+      onClick={changeContentSource}
+
+    >
+      {__('Change Content Source')}
+    </DropdownItem>,
+    ];
+
+  const customActionButtons = [{
+      title: __('Change Content Source'),
+      icon: <QuestionCircleIcon />,
+      action: { onClick: changeContentSource },
+    }]
+
+
+  // const customActionButtons = (
+  //     <ActionList isIconList>
+  //     <ActionListItem>
+  //       <Dropdown
+  //         aria-label="host-actions"
+  //         ouiaId="host_actions"
+  //         // toggle={
+  //         //   <DropdownToggle
+  //         //     aria-label="change_content_source"
+  //         //     ouiaId="expand_errata_toggle"
+  //         //     splitButtonItems={[
+  //         //       <DropdownToggleAction key="action" aria-label="bulk_actions" onClick={changeContentSource}>
+  //         //         {__('Change Content Source')}
+  //         //       </DropdownToggleAction>,
+  //         //     ]}
+  //         //     splitButtonVariant="action"
+  //         //     toggleVariant="primary"
+  //         //     // onToggle={onActionToggle}
+  //         //   />
+  //       //}
+  //         // isOpen={isActionOpen}
+  //         dropdownItems={dropdownItems}
+  //       />
+  //     </ActionListItem>
+  //   </ActionList>
+  //   );
+
   return (
     <TableIndexPage
       apiUrl={HOSTS_API_PATH}
@@ -28,6 +96,7 @@ const HostsPage = () => {
       columns={columns}
       areAllRowsOnPageSelected = { () => false }
       displaySelectAllCheckbox = { true }
+      customActionButtons = {customActionButtons}
     />
   );
 };