katello 4.5.0.rc1 → 4.5.0.rc2

data/webpack/components/extensions/HostDetails/Tabs/ErrataTab/ErrataTab.js

@@ -1,8 +1,9 @@
 import React, { useCallback, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import {
-  Button, Split, SplitItem, ActionList, ActionListItem, Dropdown,
+  Split, SplitItem, ActionList, ActionListItem, Dropdown,
   DropdownItem, KebabToggle, Skeleton, Tooltip, ToggleGroup, ToggleGroupItem,
+  DropdownToggle, DropdownToggleAction,
 } from '@patternfly/react-core';
 import { TimesIcon, CheckIcon } from '@patternfly/react-icons';
 import {
@@ -33,8 +34,18 @@ import { installErrata } from '../RemoteExecutionActions';
 import { errataInstallUrl } from '../customizedRexUrlHelpers';
 import './ErrataTab.scss';
 import hostIdNotReady from '../../HostDetailsActions';
-import { defaultRemoteActionMethod, KATELLO_AGENT } from '../../hostDetailsHelpers';
+import { defaultRemoteActionMethod,
+  hasRequiredPermissions as can,
+  missingRequiredPermissions as cannot,
+  KATELLO_AGENT,
+  userPermissionsFromHostDetails } from '../../hostDetailsHelpers';
 import SortableColumnHeaders from '../../../../Table/components/SortableColumnHeaders';
+import { useRexJobPolling } from '../RemoteExecutionHooks';
+
+const recalculateApplicability = ['edit_hosts'];
+const invokeRexJobs = ['create_job_invocations'];
+const doKatelloAgentActions = ['edit_hosts'];
+const createBookmarks = ['create_bookmarks'];
 
 export const ErrataTab = () => {
   const hostDetails = useSelector(state => selectAPIResponse(state, 'HOST_DETAILS'));
@@ -44,6 +55,12 @@ export const ErrataTab = () => {
     content_facet_attributes: contentFacetAttributes,
     errata_status: errataStatus,
   } = hostDetails;
+  const userPermissions = userPermissionsFromHostDetails({ hostDetails });
+  const showRecalculate =
+    can(
+      recalculateApplicability,
+      userPermissions,
+    );
   const contentFacet = propsToCamelCase(contentFacetAttributes ?? {});
   const dispatch = useDispatch();
   const toggleGroupStates = ['all', 'installable'];
@@ -67,6 +84,12 @@ export const ErrataTab = () => {
     = useState(PARAM_TO_FRIENDLY_NAME[initialSeverity] ?? ERRATA_SEVERITY);
   const activeFilters = [errataTypeSelected, errataSeveritySelected];
   const defaultFilters = [ERRATA_TYPE, ERRATA_SEVERITY];
+
+  const [isActionOpen, setIsActionOpen] = useState(false);
+  const onActionToggle = () => {
+    setIsActionOpen(prev => !prev);
+  };
+
   const allUpToDate = errataStatus === 0;
   const emptyContentTitle = allUpToDate ? __('All errata up-to-date') : __('This host has errata that are applicable, but not installable.');
   const emptyContentBody = allUpToDate ? __('No action is needed because there are no applicable errata for this host.') : __("You may want to check the host's content view and lifecycle environment.");
@@ -136,8 +159,29 @@ export const ErrataTab = () => {
     initialSearchQuery: searchParam || '',
   });
 
-  const tdSelect = useCallback((errataId, rowIndex) => ({
-    disable: !isSelectable(errataId),
+  const installErrataAction = () => installErrata({
+    hostname, search: fetchBulkParams(),
+  });
+  const {
+    triggerJobStart: triggerBulkApply, lastCompletedJob: lastCompletedBulkApply,
+    isPolling: isBulkApplyInProgress,
+  } = useRexJobPolling(installErrataAction);
+
+  const installErratumAction = id => installErrata({
+    hostname,
+    search: errataSearchQuery(id),
+  });
+
+  const {
+    triggerJobStart: triggerApply, lastCompletedJob: lastCompletedApply,
+    isPolling: isApplyInProgress,
+  } = useRexJobPolling(installErratumAction);
+
+  const actionInProgress = (isApplyInProgress || isBulkApplyInProgress);
+  const disabledReason = __('A remote execution job is in progress');
+
+  const tdSelect = useCallback((errataId, rowIndex, rexJobInProgress) => ({
+    disable: rexJobInProgress || !isSelectable(errataId),
     isSelected: isSelected(errataId),
     onSelect: (event, selected) => selectOne(selected, errataId),
     rowIndex,
@@ -146,21 +190,11 @@ export const ErrataTab = () => {
 
   if (!hostId) return <Skeleton />;
 
-  const applyErratumViaRemoteExecution = id => dispatch(installErrata({
-    hostname,
-    search: errataSearchQuery(id),
-  }));
+  const applyErratumViaRemoteExecution = id => triggerApply(id);
 
   const applyViaRemoteExecution = () => {
-    dispatch(installErrata({
-      hostname, search: fetchBulkParams(),
-    }));
-
-    const params = { page: metadata.page, per_page: metadata.per_page, search: metadata.search };
-    dispatch(getInstallableErrata(
-      hostId,
-      { ...params, include_applicable: toggleGroupState === ALL },
-    ));
+    triggerBulkApply();
+    selectNone();
   };
 
   const bulkCustomizedRexUrl = () => errataInstallUrl({
@@ -185,6 +219,10 @@ export const ErrataTab = () => {
   ));
 
   const defaultRemoteAction = defaultRemoteActionMethod({ hostDetails });
+  const showActions = defaultRemoteAction === KATELLO_AGENT ?
+    can(doKatelloAgentActions, userPermissions) :
+    can(invokeRexJobs, userPermissions);
+
   const apply = () => {
     if (defaultRemoteAction === KATELLO_AGENT) {
       applyByKatelloAgent();
@@ -193,7 +231,10 @@ export const ErrataTab = () => {
     }
   };
 
-  const dropdownItems = [
+  const readOnlyBookmarks =
+  cannot(createBookmarks, userPermissionsFromHostDetails({ hostDetails }));
+
+  const dropdownKebabItems = [
     <DropdownItem
       aria-label="bulk_add"
       key="bulk_add"
@@ -204,20 +245,7 @@ export const ErrataTab = () => {
     </DropdownItem>,
   ];
 
-  if (defaultRemoteAction === KATELLO_AGENT) {
-    dropdownItems.push((
-      <DropdownItem
-        aria-label="apply_via_katello_agent"
-        key="apply_via_katello_agent"
-        component="button"
-        onClick={applyByKatelloAgent}
-        isDisabled={selectedCount === 0}
-      >
-        {__('Apply via Katello agent')}
-      </DropdownItem>));
-  }
-
-  dropdownItems.push((
+  const dropdownItems = [
     <DropdownItem
       aria-label="apply_via_remote_execution"
       key="apply_via_remote_execution"
@@ -226,9 +254,7 @@ export const ErrataTab = () => {
       isDisabled={selectedCount === 0}
     >
       {__('Apply via remote execution')}
-    </DropdownItem>));
-
-  dropdownItems.push((
+    </DropdownItem>,
     <DropdownItem
       aria-label="apply_via_customized_remote_execution"
       key="apply_via_customized_remote_execution"
@@ -237,7 +263,21 @@ export const ErrataTab = () => {
       isDisabled={selectedCount === 0}
     >
       {__('Apply via customized remote execution')}
-    </DropdownItem>));
+    </DropdownItem>,
+  ];
+
+  if (defaultRemoteAction === KATELLO_AGENT) {
+    dropdownItems.unshift((
+      <DropdownItem
+        aria-label="apply_via_katello_agent"
+        key="apply_via_katello_agent"
+        component="button"
+        onClick={applyByKatelloAgent}
+        isDisabled={selectedCount === 0}
+      >
+        {__('Apply via Katello agent')}
+      </DropdownItem>));
+  }
 
   const handleErrataTypeSelected = newType => setErrataTypeSelected((prevType) => {
     if (prevType === newType) {
@@ -253,27 +293,47 @@ export const ErrataTab = () => {
     return newSeverity;
   });
 
-  const actionButtons = (
+  const actionButtons = showActions ? (
     <>
       <Split hasGutter>
         <SplitItem>
           <ActionList isIconList>
             <ActionListItem>
-              <Button isDisabled={selectedCount === 0} onClick={apply}> {__('Apply')} </Button>
+              <Dropdown
+                aria-label="errata_dropdown"
+                toggle={
+                  <DropdownToggle
+                    aria-label="expand_errata_toggle"
+                    splitButtonItems={[
+                      <DropdownToggleAction key="action" aria-label="bulk_actions" onClick={apply}>
+                        {__('Apply')}
+                      </DropdownToggleAction>,
+                    ]}
+                    splitButtonVariant="action"
+                    toggleVariant="primary"
+                    onToggle={onActionToggle}
+                    isDisabled={selectedCount === 0}
+                  />
+              }
+                isOpen={isActionOpen}
+                dropdownItems={dropdownItems}
+              />
             </ActionListItem>
+            {showRecalculate &&
             <ActionListItem>
               <Dropdown
-                toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
+                toggle={<KebabToggle aria-label="bulk_actions_kebab" onToggle={toggleBulkAction} />}
                 isOpen={isBulkActionOpen}
                 isPlain
-                dropdownItems={dropdownItems}
+                dropdownItems={dropdownKebabItems}
               />
             </ActionListItem>
+            }
           </ActionList>
         </SplitItem>
       </Split>
     </>
-  );
+  ) : null;
 
   const hostIsNonLibrary = (
     contentFacet?.contentViewDefault === false && contentFacet.lifecycleEnvironmentLibrary === false
@@ -352,15 +412,17 @@ export const ErrataTab = () => {
           ouiaId="host-errata-table"
           additionalListeners={[
             hostId, toggleGroupState, errataTypeSelected,
-            errataSeveritySelected, activeSortColumn, activeSortDirection]}
+            errataSeveritySelected, activeSortColumn, activeSortDirection,
+            lastCompletedApply, lastCompletedBulkApply]}
           fetchItems={fetchItems}
           bookmarkController="katello_errata"
+          readOnlyBookmarks={readOnlyBookmarks}
           autocompleteEndpoint={`/hosts/${hostId}/errata/auto_complete_search`}
           foremanApiAutoComplete
           rowsCount={results?.length}
           variant={TableVariant.compact}
           {...selectAll}
-          displaySelectAllCheckbox
+          displaySelectAllCheckbox={showActions}
         >
           <Thead>
             <Tr>
@@ -391,6 +453,7 @@ export const ErrataTab = () => {
                   {
                     title: __('Apply via remote execution'),
                     onClick: () => applyErratumViaRemoteExecution(errataId),
+                    isDisabled: actionInProgress,
                   },
                   {
                     title: __('Apply via customized remote execution'),
@@ -425,7 +488,12 @@ export const ErrataTab = () => {
                         onToggle: (_event, _rInx, isOpen) => expandedErrata.onToggle(isOpen, id),
                       }}
                     />
-                    <Td select={tdSelect(errataId, rowIndex)} />
+                    {showActions ? (
+                      <Td
+                        select={tdSelect(errataId, rowIndex, actionInProgress)}
+                        title={actionInProgress && disabledReason}
+                      />
+                    ) : null}
                     <Td>
                       <a href={urlBuilder(`errata/${id}`, '')}>{errataId}</a>
                     </Td>
@@ -449,13 +517,14 @@ export const ErrataTab = () => {
                     </Td>
                     <Td><TableText wrapModifier="truncate">{title}</TableText></Td>
                     <Td key={publishedAt}><IsoDate date={publishedAt} /></Td>
-                    <Td
-                      key={`rowActions-${id}`}
-                      actions={{
-                        items: rowActions,
-                      }}
-
-                    />
+                    {showActions ? (
+                      <Td
+                        key={`rowActions-${id}`}
+                        actions={{
+                          items: rowActions,
+                        }}
+                      />
+                    ) : null}
                   </Tr>
                   <Tr key="child_row" isExpanded={isExpanded}>
                     {isExpanded && (

data/webpack/components/extensions/HostDetails/Tabs/ModuleStreamsTab/ModuleStreamsTab.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { Skeleton,
@@ -7,6 +7,7 @@ import { Skeleton,
   Button,
   Split,
   SplitItem,
+  Spinner,
   Checkbox,
   Dropdown,
   Text,
@@ -39,6 +40,13 @@ import {
 } from './ModuleStreamsConstants';
 import { moduleStreamAction } from '../RemoteExecutionActions';
 import { katelloModuleStreamActionUrl } from '../customizedRexUrlHelpers';
+import { useRexJobPolling } from '../RemoteExecutionHooks';
+import {
+  hasRequiredPermissions as can,
+  missingRequiredPermissions as cannot,
+  userPermissionsFromHostDetails,
+} from '../../hostDetailsHelpers';
+
 
 const EnabledIcon = ({ streamText, streamInstallStatus, upgradable }) => {
   switch (true) {
@@ -99,14 +107,9 @@ HostInstalledProfiles.propTypes = {
   installedProfiles: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
-const performModuleStreamAction = (hostName, action, moduleSpec, dispatch) => {
-  dispatch(moduleStreamAction({ hostname: hostName, action, moduleSpec }));
-};
-
 const ModuleActionConfirmationModal = ({
-  hostName, action, moduleSpec, actionModalOpen, setActionModalOpen,
+  hostname, action, moduleSpec, actionModalOpen, setActionModalOpen, triggerModuleStreamAction,
 }) => {
-  const dispatch = useDispatch();
   let title;
   let body;
   let confirmText;
@@ -163,7 +166,7 @@ const ModuleActionConfirmationModal = ({
           aria-label="confirm-module-action"
           key="confirm-module-action"
           onClick={() => {
-            performModuleStreamAction(hostName, action, moduleSpec, dispatch);
+            triggerModuleStreamAction({ hostname, action, moduleSpec });
             setActionModalOpen(false);
           }}
         >
@@ -188,21 +191,26 @@ const ModuleActionConfirmationModal = ({
 };
 
 ModuleActionConfirmationModal.propTypes = {
-  hostName: PropTypes.string.isRequired,
+  hostname: PropTypes.string.isRequired,
   action: PropTypes.string.isRequired,
   moduleSpec: PropTypes.string.isRequired,
   actionModalOpen: PropTypes.bool.isRequired,
   setActionModalOpen: PropTypes.func.isRequired,
+  triggerModuleStreamAction: PropTypes.func.isRequired,
 };
 
+const invokeRexJobs = ['create_job_invocations'];
+const createBookmarks = ['create_bookmarks'];
+
 export const ModuleStreamsTab = () => {
-  const { id: hostId, name: hostName } = useSelector(selectHostDetails);
+  const hostDetails = useSelector(selectHostDetails);
+  const { id: hostId, name: hostname } = hostDetails;
+  const showActions = can(invokeRexJobs, userPermissionsFromHostDetails({ hostDetails }));
   const [useCustomizedRex, setUseCustomizedRex] = useState('');
   const [dropdownOpen, setDropdownOpen] = useState('');
   const [actionModalOpen, setActionModalOpen] = useState(false);
   const [actionableModuleSpec, setActionableModuleSpec] = useState(null);
   const [hostModuleStreamAction, setHostModuleStreamAction] = useState(null);
-  const dispatch = useDispatch();
 
   const emptyContentTitle = __('This host does not have any Module streams.');
   const emptyContentBody = __('Module streams will appear here when available.');
@@ -244,6 +252,18 @@ export const ModuleStreamsTab = () => {
     initialSortColumnName: 'Name',
   });
 
+  const {
+    triggerJobStart: triggerModuleStreamAction, lastCompletedJob: tableJobCompleted,
+    isPolling: isModuleStreamActionInProgress,
+  } = useRexJobPolling(moduleStreamAction);
+
+  const {
+    triggerJobStart: triggerConfirmModalAction, lastCompletedJob: confirmModalJobCompleted,
+    isPolling: isConfirmModalActionInProgress,
+  } = useRexJobPolling(moduleStreamAction);
+
+  const actionInProgress = (isModuleStreamActionInProgress || isConfirmModalActionInProgress);
+
   const fetchItems = useCallback(
     (params) => {
       let extraParams = params;
@@ -279,7 +299,7 @@ export const ModuleStreamsTab = () => {
       });
 
   const customizedActionURL = (action, moduleSpec) =>
-    katelloModuleStreamActionUrl({ hostname: hostName, action, moduleSpec });
+    katelloModuleStreamActionUrl({ hostname, action, moduleSpec });
 
   const response = useSelector(selectModuleStream);
   const { results, ...metadata } = response;
@@ -297,11 +317,13 @@ export const ModuleStreamsTab = () => {
   });
   /* eslint-enable no-unused-vars */
 
+  const hideBookmarkActions =
+    cannot(createBookmarks, userPermissionsFromHostDetails({ hostDetails }));
+
   if (!hostId) return <Skeleton />;
 
   const activeFilters = [statusSelected, installStatusSelected];
   const defaultFilters = [MODULE_STREAM_STATUS, MODULE_STREAM_INSTALLATION_STATUS];
-
   return (
     <div>
       <div id="modulestreams-tab">
@@ -323,9 +345,11 @@ export const ModuleStreamsTab = () => {
           }}
           ouiaId="host-module-stream-table"
           additionalListeners={[hostId, activeSortColumn, activeSortDirection,
-            statusSelected, installStatusSelected]}
+            statusSelected, installStatusSelected, confirmModalJobCompleted,
+            tableJobCompleted]}
           fetchItems={fetchItems}
           bookmarkController="katello_host_available_module_streams"
+          readOnlyBookmarks={hideBookmarkActions}
           autocompleteEndpoint={`/hosts/${hostId}/module_streams/auto_complete_search`}
           foremanApiAutoComplete
           rowsCount={results?.length}
@@ -352,6 +376,11 @@ export const ModuleStreamsTab = () => {
                   setSelected={handleModuleStreamInstallationStatusSelected}
                 />
               </SplitItem>
+              {actionInProgress && (
+                <SplitItem style={{ alignSelf: 'center' }}>
+                  <Spinner size="lg" style={{ marginTop: '2px' }} />
+                </SplitItem>
+              )}
             </Split>
           }
         >
@@ -460,11 +489,11 @@ export const ModuleStreamsTab = () => {
                     key={`dropdownItem-enable-${id}`}
                     component="button"
                     onClick={() => {
-                      performModuleStreamAction(hostName, 'enable', moduleSpec, dispatch);
+                      triggerModuleStreamAction({ hostname, action: 'enable', moduleSpec });
                       setUseCustomizedRex('');
                       setDropdownOpen('');
                     }}
-                    isDisabled={stateText(moduleStreamStatus) ===
+                    isDisabled={actionInProgress || stateText(moduleStreamStatus) ===
                     HOST_MODULE_STREAM_STATUSES.ENABLED}
                   >
                     {__('Enable')}
@@ -480,7 +509,7 @@ export const ModuleStreamsTab = () => {
                       setUseCustomizedRex('');
                       setDropdownOpen('');
                     }}
-                    isDisabled={stateText(moduleStreamStatus) !==
+                    isDisabled={actionInProgress || stateText(moduleStreamStatus) !==
                     HOST_MODULE_STREAM_STATUSES.ENABLED}
                   >
                     {__('Disable')}
@@ -491,11 +520,11 @@ export const ModuleStreamsTab = () => {
                     key={`dropdownItem-install-${id}`}
                     component="button"
                     onClick={() => {
-                      performModuleStreamAction(hostName, 'install', moduleSpec, dispatch);
+                      triggerModuleStreamAction({ hostname, action: 'install', moduleSpec });
                       setUseCustomizedRex('');
                       setDropdownOpen('');
                     }}
-                    isDisabled={(upgradable ||
+                    isDisabled={(actionInProgress || upgradable ||
                       (installedStatus !== INSTALLED_STATE.NOTINSTALLED) ||
                       !(stateText(moduleStreamStatus) === HOST_MODULE_STREAM_STATUSES.ENABLED ||
                         stateText(moduleStreamStatus) === HOST_MODULE_STREAM_STATUSES.DISABLED)
@@ -508,11 +537,11 @@ export const ModuleStreamsTab = () => {
                     key={`dropdownItem-update-${id}`}
                     component="button"
                     onClick={() => {
-                      performModuleStreamAction(hostName, 'update', moduleSpec, dispatch);
+                      triggerModuleStreamAction({ hostname, action: 'update', moduleSpec });
                       setUseCustomizedRex('');
                       setDropdownOpen('');
                     }}
-                    isDisabled={!upgradable}
+                    isDisabled={actionInProgress || !upgradable}
                   >
                     {__('Update')}
                   </DropdownItem>,
@@ -527,6 +556,7 @@ export const ModuleStreamsTab = () => {
                       setUseCustomizedRex('');
                       setDropdownOpen('');
                     }}
+                    isDisabled={actionInProgress}
                   >
                     {__('Reset')}
                     <InactiveText style={{ marginBottom: '1px' }} text={__('Reset to the default state')} />
@@ -542,6 +572,7 @@ export const ModuleStreamsTab = () => {
                       setUseCustomizedRex('');
                       setDropdownOpen('');
                     }}
+                    isDisabled={actionInProgress}
                   >
                     {__('Remove')}
                     <InactiveText style={{ marginBottom: '1px' }} text={__('Uninstall and reset')} />
@@ -552,7 +583,7 @@ export const ModuleStreamsTab = () => {
                 <Tr key={`${id} ${index}`}>
                   <Td>
                     <a
-                      href={`/module_streams?search=module_spec%3D${moduleSpec}+and+host%3D${hostName}`}
+                      href={`/module_streams?search=module_spec%3D${moduleSpec}+and+host%3D${hostname}`}
                     >
                       {name}
                     </a>
@@ -574,20 +605,22 @@ export const ModuleStreamsTab = () => {
                       installedProfiles={installedProfiles}
                     />
                   </Td>
-                  <Td key={`actions-td-${id}-${dropdownOpen}`}>
-                    <Dropdown
-                      aria-label={`actions-dropdown-${id}`}
-                      key={`actions-dropdown-${id}-${dropdownOpen}`}
-                      isPlain
-                      style={{ width: 'inherit' }}
-                      position={DropdownPosition.right}
-                      toggle={
-                        <KebabToggle aria-label={`kebab-dropdown-${id}`} onToggle={() => ((dropdownOpen === id) ? setDropdownOpen('') : setDropdownOpen(id))} id={`toggle-dropdown-${id}`} />
-                    }
-                      isOpen={id === dropdownOpen}
-                      dropdownItems={dropdownItems}
-                    />
-                  </Td>
+                  {showActions && (
+                    <Td key={`actions-td-${id}-${dropdownOpen}`}>
+                      <Dropdown
+                        aria-label={`actions-dropdown-${id}`}
+                        key={`actions-dropdown-${id}-${dropdownOpen}`}
+                        isPlain
+                        style={{ width: 'inherit' }}
+                        position={DropdownPosition.right}
+                        toggle={
+                          <KebabToggle aria-label={`kebab-dropdown-${id}`} onToggle={() => ((dropdownOpen === id) ? setDropdownOpen('') : setDropdownOpen(id))} id={`toggle-dropdown-${id}`} />
+                      }
+                        isOpen={id === dropdownOpen}
+                        dropdownItems={dropdownItems}
+                      />
+                    </Td>
+                  )}
                 </Tr>
               );
             })
@@ -596,11 +629,12 @@ export const ModuleStreamsTab = () => {
         </TableWrapper>
         {actionModalOpen &&
           <ModuleActionConfirmationModal
-            hostName={hostName}
+            hostname={hostname}
             action={hostModuleStreamAction}
             moduleSpec={actionableModuleSpec}
             actionModalOpen={actionModalOpen}
             setActionModalOpen={setActionModalOpen}
+            triggerModuleStreamAction={triggerConfirmModalAction}
           />
         }
       </div>

data/webpack/components/extensions/HostDetails/Tabs/PackagesTab/PackageInstallModal.js

@@ -15,7 +15,6 @@ import { HOST_YUM_INSTALLABLE_PACKAGES_KEY } from './YumInstallablePackagesConst
 import { selectHostYumInstallablePackagesStatus } from './YumInstallablePackagesSelectors';
 import { getHostYumInstallablePackages } from './YumInstallablePackagesActions';
 import './PackageInstallModal.scss';
-import { installPackageBySearch } from '../RemoteExecutionActions';
 import { katelloPackageInstallBySearchUrl, katelloPackageInstallUrl } from '../customizedRexUrlHelpers';
 import hostIdNotReady from '../../HostDetailsActions';
 import { installPackageViaKatelloAgent } from './HostPackagesActions';
@@ -101,7 +100,7 @@ InstallDropdown.defaultProps = {
 };
 
 const PackageInstallModal = ({
-  isOpen, closeModal, hostId, hostName, showKatelloAgent,
+  isOpen, closeModal, hostId, hostName, showKatelloAgent, triggerPackageInstall,
 }) => {
   const emptyContentTitle = __('No packages available to install');
   const emptyContentBody = __('No packages available to install on this host. Please check the host\'s content view and lifecycle environment.');
@@ -127,6 +126,7 @@ const PackageInstallModal = ({
     selectedResults,
     ...selectAll
   } = useBulkSelect({ results, metadata });
+
   const fetchItems = (params) => {
     if (!hostId) return hostIdNotReady;
 
@@ -141,7 +141,7 @@ const PackageInstallModal = ({
   const selectedPackageNames = () => selectedResults.map(({ name }) => name);
 
   const installViaRex = () => {
-    dispatch(installPackageBySearch({ hostname: hostName, search: fetchBulkParams() }));
+    triggerPackageInstall(fetchBulkParams());
     selectNone();
     closeModal();
   };
@@ -271,6 +271,7 @@ PackageInstallModal.propTypes = {
   hostId: PropTypes.number.isRequired,
   hostName: PropTypes.string.isRequired,
   showKatelloAgent: PropTypes.bool,
+  triggerPackageInstall: PropTypes.func.isRequired,
 };
 
 PackageInstallModal.defaultProps = {