katello 4.6.2.1 → 4.7.0.rc1

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

@@ -46,13 +46,9 @@ import {
   userPermissionsFromHostDetails,
 } from '../../hostDetailsHelpers';
 
-const moduleStreamSupported = ({ os, version }) =>
-  os.match(/RedHat|CentOS|Rocky|AlmaLinux|OracleLinux/i) && Number(version) > 7;
 export const hideModuleStreamsTab = ({ hostDetails }) => {
   const osMatch = hostDetails?.operatingsystem_name?.match(/(\w+) (\d+)/);
-  if (!osMatch) return true;
-  const [, os, version] = osMatch;
-  return !(osMatch && moduleStreamSupported({ os, version }));
+  return !(osMatch && osMatch[1].match(/RedHat|CentOS/i) && Number(osMatch[2]) > 7);
 };
 
 const EnabledIcon = ({ streamText, streamInstallStatus, upgradable }) => {
@@ -164,6 +160,7 @@ const ModuleActionConfirmationModal = ({
       variant={ModalVariant.small}
       isOpen={actionModalOpen}
       aria-label="Module action confirmation modal"
+      ouiaId="Module-action-confirmation-modal"
       title={title}
       titleIconVariant="warning"
       showClose
@@ -171,6 +168,7 @@ const ModuleActionConfirmationModal = ({
       actions={[
         <Button
           aria-label="confirm-module-action"
+          ouiaId="confirm-module-action"
           key="confirm-module-action"
           onClick={() => {
             triggerModuleStreamAction({ hostname, action, moduleSpec });
@@ -181,6 +179,7 @@ const ModuleActionConfirmationModal = ({
         </Button>,
         <Button
           aria-label="cancel-module-action"
+          ouiaId="cancel-module-action"
           key="cancel-module-action"
           variant="link"
           onClick={() => setActionModalOpen(false)}
@@ -189,7 +188,7 @@ const ModuleActionConfirmationModal = ({
         </Button>,
       ]}
     >
-      <Text component={TextVariants.p}>
+      <Text component={TextVariants.p} ouiaId="text">
         {body}
       </Text>
 
@@ -408,7 +407,7 @@ export const ModuleStreamsTab = () => {
           }
         >
           <Thead>
-            <Tr>
+            <Tr ouiaId="header-tr">
               <SortableColumnHeaders
                 columnHeaders={columnHeaders}
                 pfSortParams={pfSortParams}
@@ -429,22 +428,24 @@ export const ModuleStreamsTab = () => {
             }, index) => {
               /* eslint-disable react/no-array-index-key */
               const dropdownItems = [
-                <DropdownItem key={`dropdownItem-checkbox-${id}`}>
+                <DropdownItem key={`dropdownItem-checkbox-${id}`} ouiaId={`dropdownItem-checkbox-${id}`}>
                   <Checkbox
                     aria-label={`customize-checkbox-${id}`}
+                    ouiaId={`customize-checkbox-${id}`}
                     id={`Checkbox${id}`}
                     label={__('Customize with Rex')}
                     isChecked={id === useCustomizedRex}
                     onChange={checked => (checked ? setUseCustomizedRex(id) : setUseCustomizedRex(''))}
                   />
                 </DropdownItem>,
-                <DropdownSeparator key={`separator-${id}`} />,
+                <DropdownSeparator key={`separator-${id}`} ouiaId={`separator-${id}`} />,
 
               ];
               if (id === useCustomizedRex) {
                 dropdownItems.push(
                   <DropdownItem
                     aria-label={`enable-${id}-href`}
+                    ouiaId={`enable-${id}-href`}
                     key={`dropdownItem-enable-url-${id}`}
                     component="a"
                     href={customizedActionURL('enable', moduleSpec)}
@@ -455,6 +456,7 @@ export const ModuleStreamsTab = () => {
                   </DropdownItem>,
                   <DropdownItem
                     aria-label={`disable-${id}-href`}
+                    ouiaId={`disable-${id}-href`}
                     key={`dropdownItem-disable-url-${id}`}
                     component="a"
                     href={customizedActionURL('disable', moduleSpec)}
@@ -466,6 +468,7 @@ export const ModuleStreamsTab = () => {
                   </DropdownItem>,
                   <DropdownItem
                     aria-label={`install-${id}-href`}
+                    ouiaId={`install-${id}-href`}
                     key={`dropdownItem-install-url-${id}`}
                     component="a"
                     href={customizedActionURL('install', moduleSpec)}
@@ -479,6 +482,7 @@ export const ModuleStreamsTab = () => {
                   </DropdownItem>,
                   <DropdownItem
                     aria-label={`update-${id}-href`}
+                    ouiaId={`update-${id}-href`}
                     key={`dropdownItem-update-${id}`}
                     component="a"
                     href={customizedActionURL('update', moduleSpec)}
@@ -488,6 +492,7 @@ export const ModuleStreamsTab = () => {
                   </DropdownItem>,
                   <DropdownItem
                     aria-label={`reset-${id}-href`}
+                    ouiaId={`reset-${id}-href`}
                     key={`dropdownItem-reset-${id}`}
                     component="a"
                     href={customizedActionURL('reset', moduleSpec)}
@@ -497,6 +502,7 @@ export const ModuleStreamsTab = () => {
                   </DropdownItem>,
                   <DropdownItem
                     aria-label={`remove-${id}-href`}
+                    ouiaId={`remove-${id}-href`}
                     key={`dropdownItem-remove-${id}`}
                     component="a"
                     href={customizedActionURL('remove', moduleSpec)}
@@ -509,6 +515,7 @@ export const ModuleStreamsTab = () => {
                 dropdownItems.push(
                   <DropdownItem
                     aria-label={`enable-${id}-button`}
+                    ouiaId={`enable-${id}-button`}
                     key={`dropdownItem-enable-${id}`}
                     component="button"
                     onClick={() => {
@@ -523,6 +530,7 @@ export const ModuleStreamsTab = () => {
                   </DropdownItem>,
                   <DropdownItem
                     aria-label={`disable-${id}-button`}
+                    ouiaId={`disable-${id}-button`}
                     key={`dropdownItem-disable-${id}`}
                     component="button"
                     onClick={() => {
@@ -540,6 +548,7 @@ export const ModuleStreamsTab = () => {
                   </DropdownItem>,
                   <DropdownItem
                     aria-label={`install-${id}-button`}
+                    ouiaId={`install-${id}-button`}
                     key={`dropdownItem-install-${id}`}
                     component="button"
                     onClick={() => {
@@ -557,6 +566,7 @@ export const ModuleStreamsTab = () => {
                   </DropdownItem>,
                   <DropdownItem
                     aria-label={`update-${id}-button`}
+                    ouiaId={`update-${id}-button`}
                     key={`dropdownItem-update-${id}`}
                     component="button"
                     onClick={() => {
@@ -570,6 +580,7 @@ export const ModuleStreamsTab = () => {
                   </DropdownItem>,
                   <DropdownItem
                     aria-label={`reset-${id}-button`}
+                    ouiaId={`reset-${id}-button`}
                     key={`dropdownItem-reset-${id}`}
                     component="button"
                     onClick={() => {
@@ -586,6 +597,7 @@ export const ModuleStreamsTab = () => {
                   </DropdownItem>,
                   <DropdownItem
                     aria-label={`remove-${id}-button`}
+                    ouiaId={`remove-${id}-button`}
                     key={`dropdownItem-remove-${id}`}
                     component="button"
                     onClick={() => {
@@ -603,7 +615,7 @@ export const ModuleStreamsTab = () => {
                 );
               }
               return (
-                <Tr key={`${id} ${index}`}>
+                <Tr key={`${id} ${index}`} ouiaId={`tr-${id}-${index}`}>
                   <Td>
                     <a
                       href={`/module_streams?search=module_spec%3D${moduleSpec}+and+host%3D${hostname}`}
@@ -632,6 +644,7 @@ export const ModuleStreamsTab = () => {
                     <Td key={`actions-td-${id}-${dropdownOpen}`}>
                       <Dropdown
                         aria-label={`actions-dropdown-${id}`}
+                        ouiaId={`actions-dropdown-${id}`}
                         key={`actions-dropdown-${id}-${dropdownOpen}`}
                         isPlain
                         style={{ width: 'inherit' }}

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

@@ -3,6 +3,7 @@ export const HOST_PACKAGES_INSTALL_KEY = 'HOST_PACKAGES_KATELLO_AGENT_INSTALL';
 export const HOST_PACKAGES_REMOVE_KEY = 'HOST_PACKAGES_REMOVE';
 export const HOST_PACKAGES_UPGRADE_KEY = 'HOST_PACKAGES_UPGRADE';
 export const PACKAGES_SEARCH_QUERY = 'Packages search query';
+export const SELECTED_UPDATE_VERSIONS = 'Selected update versions';
 
 export const PACKAGES_VERSION_STATUSES = {
   UPGRADABLE: 'Upgradable',

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

@@ -35,17 +35,19 @@ const InstallDropdown = ({
   const dropdownItems = [
     <DropdownItem
       key="install-k-agent"
+      ouiaId="install-k-agent"
       component="button"
       onClick={installViaKatelloAgent}
       isDisabled={disableInstallViaKatelloAgent}
     >
       {__('Install via katello-agent')}
     </DropdownItem>,
-    <DropdownItem key="install-rex" component="button" onClick={installViaRex}>
+    <DropdownItem key="install-rex" ouiaId="install-rex" component="button" onClick={installViaRex}>
       {__('Install via remote execution')}
     </DropdownItem>,
     <DropdownItem
       key="install-customized-rex"
+      ouiaId="install-customized-rex"
       component="a"
       href={bulkCustomizedRexUrl}
       onClick={onActionSelect}
@@ -59,10 +61,12 @@ const InstallDropdown = ({
 
   return (
     <Dropdown
+      ouiaId="action-dropdown"
       direction={DropdownDirection.up}
       onSelect={onActionSelect}
       toggle={
         <DropdownToggle
+          ouiaId="install-action-toggle"
           isDisabled={isDisabled}
           splitButtonItems={[
             <DropdownToggleAction key="install" onClick={defaultRemoteAction}>
@@ -174,7 +178,7 @@ const PackageInstallModal = ({
       showKatelloAgent={showKatelloAgent}
       disableInstallViaKatelloAgent={selectedResults.length === 0}
     />,
-    <Button key="cancel" variant="link" onClick={handleModalClose}>
+    <Button key="cancel" ouiaId="cancel-button" variant="link" onClick={handleModalClose}>
       Cancel
     </Button>,
   ]);
@@ -187,6 +191,7 @@ const PackageInstallModal = ({
       width="50%"
       actions={modalActions}
       id="package-install-modal"
+      ouiaId="package-install-modal"
     >
       <FormattedMessage
         className="pkg-install-modal-blurb"
@@ -221,7 +226,7 @@ const PackageInstallModal = ({
         displaySelectAllCheckbox
       >
         <Thead>
-          <Tr>
+          <Tr ouiaId="row-header">
             {columnHeaders.map(col =>
               <Th key={col}>{col}</Th>)}
             <Th />
@@ -236,7 +241,7 @@ const PackageInstallModal = ({
               version,
             } = pkg;
             return (
-              <Tr key={id}>
+              <Tr key={id} ouiaId={`row-${id}`}>
                 <Td
                   select={{
                     disable: false,

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import {
   ActionList,
@@ -9,19 +9,23 @@ import {
   DropdownToggle,
   DropdownToggleAction,
   KebabToggle,
+  Select,
+  SelectOption,
+  SelectVariant,
   Skeleton,
   Split,
   SplitItem,
 } from '@patternfly/react-core';
-import { TableVariant, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import { TableVariant, Thead, Tbody, Tr, Th, Td, TableText } from '@patternfly/react-table';
+import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
 
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
 import SelectableDropdown from '../../../../SelectableDropdown';
 import TableWrapper from '../../../../../components/Table/TableWrapper';
-import { useBulkSelect, useTableSort, useUrlParams } from '../../../../../components/Table/TableHooks';
-import { PackagesStatus, PackagesLatestVersion } from '../../../../../components/Packages';
+import { useBulkSelect, useTableSort, useUrlParams, useSet } from '../../../../../components/Table/TableHooks';
+import PackagesStatus from '../../../../../components/Packages';
 import {
   getInstalledPackagesWithLatest,
   removePackageViaKatelloAgent,
@@ -35,7 +39,7 @@ import {
 import { removePackage, updatePackage, removePackages, updatePackages, installPackageBySearch } from '../RemoteExecutionActions';
 import { katelloPackageUpdateUrl, packagesUpdateUrl } from '../customizedRexUrlHelpers';
 import './PackagesTab.scss';
-import hostIdNotReady from '../../HostDetailsActions';
+import hostIdNotReady, { getHostDetails } from '../../HostDetailsActions';
 import PackageInstallModal from './PackageInstallModal';
 import { defaultRemoteActionMethod,
   hasRequiredPermissions as can,
@@ -49,6 +53,70 @@ const invokeRexJobs = ['create_job_invocations'];
 const doKatelloAgentActions = ['edit_hosts'];
 const createBookmarks = ['create_bookmarks'];
 
+const UpdateVersionsSelect = ({
+  packageName,
+  rowIndex,
+  selections,
+  upgradableVersions,
+  toggleUpgradableVersionSelect,
+  onUpgradableVersionSelect,
+  upgradableVersionSelectOpen,
+}) => {
+  if (upgradableVersions === null) {
+    return <TableText wrapModifier="nowrap">—</TableText>;
+  } else if (upgradableVersions.length === 1) {
+    return <TableText wrapModifier="nowrap">{upgradableVersions[0]}</TableText>;
+  }
+
+  return (
+    <div>
+      <span id="style-select-id">
+        <Select
+          variant={SelectVariant.single}
+          aria-label="upgradable-version-select"
+          ouiaId="upgradable-version-select"
+          onToggle={isOpen => toggleUpgradableVersionSelect(isOpen, rowIndex)}
+          onSelect={(event, selected) => {
+            onUpgradableVersionSelect(event, selected, rowIndex, packageName);
+          }}
+          selections={selections}
+          isOpen={upgradableVersionSelectOpen.has(rowIndex)}
+          isPlain
+        >
+          {upgradableVersions.map(version => (
+            <SelectOption
+              key={version}
+              value={version}
+              label={`${version}-version-select-option`}
+            />
+          ))}
+        </Select>
+      </span>
+    </div>
+  );
+};
+
+UpdateVersionsSelect.propTypes = {
+  packageName: PropTypes.string.isRequired,
+  rowIndex: PropTypes.number.isRequired,
+  selections: PropTypes.string,
+  upgradableVersions: PropTypes.arrayOf(PropTypes.string),
+  toggleUpgradableVersionSelect: PropTypes.func,
+  onUpgradableVersionSelect: PropTypes.func,
+  upgradableVersionSelectOpen: PropTypes.shape({
+    has: PropTypes.func,
+    rowIndex: PropTypes.number,
+  }),
+};
+
+UpdateVersionsSelect.defaultProps = {
+  selections: null,
+  upgradableVersions: null,
+  toggleUpgradableVersionSelect: undefined,
+  onUpgradableVersionSelect: undefined,
+  upgradableVersionSelectOpen: null,
+};
+
 export const PackagesTab = () => {
   const hostDetails = useSelector(state => selectAPIResponse(state, 'HOST_DETAILS'));
   const {
@@ -79,6 +147,26 @@ export const PackagesTab = () => {
     setIsActionOpen(prev => !prev);
   };
 
+  const upgradableVersionSelectOpen = useSet([]);
+  const toggleUpgradableVersionSelect = (isOpenState, rowIndex) => {
+    if (isOpenState) {
+      upgradableVersionSelectOpen.add(rowIndex);
+    } else {
+      upgradableVersionSelectOpen.delete(rowIndex);
+    }
+  };
+
+  const selectedNewVersions = useRef({});
+  const onUpgradableVersionSelect = (_event, selected, rowIndex, packageName) => {
+    toggleUpgradableVersionSelect(false, rowIndex);
+    selectedNewVersions.current[packageName] = selected;
+  };
+  const selectedPackageUpgradeVersion = ({ packageName, upgradableVersions }) => (
+    selectedNewVersions.current[packageName] || upgradableVersions[0]
+  );
+  const selectedNVRAVersions = Object.keys(selectedNewVersions.current).map(k =>
+    selectedNewVersions.current[k]);
+
   const emptyContentTitle = __('This host does not have any packages.');
   const emptyContentBody = __('Packages will appear here when available.');
   const emptySearchTitle = __('No matching packages found');
@@ -161,27 +249,28 @@ export const PackagesTab = () => {
     isPolling: isBulkRemoveInProgress,
   } = useRexJobPolling(packageBulkRemoveAction);
 
-  const packageUpgradeAction = packageName => updatePackage({
+  const packageUpgradeAction = ({ packageName, upgradableVersions }) => updatePackage({
     hostname,
-    packageName,
+    packageName: selectedPackageUpgradeVersion({ packageName, upgradableVersions }),
   });
 
   const {
     triggerJobStart: triggerPackageUpgrade,
     lastCompletedJob: lastCompletedPackageUpgrade,
     isPolling: isUpgradeInProgress,
-  } = useRexJobPolling(packageUpgradeAction);
+  } = useRexJobPolling(packageUpgradeAction, getHostDetails({ hostname }));
 
   const packageBulkUpgradeAction = bulkParams => updatePackages({
     hostname,
     search: bulkParams,
+    versions: JSON.stringify(selectedNVRAVersions || []),
   });
 
   const {
     triggerJobStart: triggerBulkPackageUpgrade,
     lastCompletedJob: lastCompletedBulkPackageUpgrade,
     isPolling: isBulkUpgradeInProgress,
-  } = useRexJobPolling(packageBulkUpgradeAction);
+  } = useRexJobPolling(packageBulkUpgradeAction, getHostDetails({ hostname }));
 
   const packageInstallAction
     = bulkParams => installPackageBySearch({ hostname, search: bulkParams });
@@ -190,7 +279,7 @@ export const PackagesTab = () => {
     triggerJobStart: triggerPackageInstall,
     lastCompletedJob: lastCompletedPackageInstall,
     isPolling: isInstallInProgress,
-  } = useRexJobPolling(packageInstallAction);
+  } = useRexJobPolling(packageInstallAction, getHostDetails({ hostname }));
 
   const actionInProgress = (isRemoveInProgress || isUpgradeInProgress
     || isBulkRemoveInProgress || isBulkUpgradeInProgress || isInstallInProgress);
@@ -218,7 +307,8 @@ export const PackagesTab = () => {
   };
 
   const selectedPackageNames = () => selectedResults.map(({ name }) => name);
-  const selectedUpgradableVersions = () => selectedResults.map(({ upgradable_version: v }) => v);
+  const selectedUpgradableVersions = () => selectedResults.map(({ name, upgradable_versions: v }) =>
+    selectedNewVersions.current[name] || v[0]);
 
   const removePackagesViaKatelloAgent = () => {
     dispatch(removePackageViaKatelloAgent(hostId, { packages: selectedPackageNames() }));
@@ -243,7 +333,9 @@ export const PackagesTab = () => {
     }
   };
 
-  const upgradeViaRemoteExecution = packageName => triggerPackageUpgrade(packageName);
+  const upgradeViaRemoteExecution = ({ packageName, upgradableVersions }) => (
+    triggerPackageUpgrade({ packageName, upgradableVersions })
+  );
 
   const upgradeBulkViaRemoteExecution = () => {
     const selected = fetchBulkParams();
@@ -270,13 +362,16 @@ export const PackagesTab = () => {
   };
 
   const upgradeViaCustomizedRemoteExecution = selectedCount ?
-    packagesUpdateUrl({ hostname, search: fetchBulkParams() }) :
-    '#';
+    packagesUpdateUrl({
+      hostname,
+      search: fetchBulkParams(),
+      versions: JSON.stringify(selectedNVRAVersions),
+    }) : '#';
 
   const disableRemove = () => selectedCount === 0 || selectAllMode;
 
   const allUpgradable = () => selectedResults.length > 0 &&
-    selectedResults.every(item => item.upgradable_version);
+    selectedResults.every(item => item.upgradable_versions?.length > 0);
   const disableUpgrade = () => selectedCount === 0 ||
     (selectAllMode && packageStatusSelected !== 'Upgradable') ||
     (defaultRemoteAction === KATELLO_AGENT && selectAllMode && !areAllRowsSelected()) ||
@@ -288,6 +383,7 @@ export const PackagesTab = () => {
   const dropdownUpgradeItems = [
     <DropdownItem
       aria-label="bulk_upgrade_rex"
+      ouiaId="bulk_upgrade_rex"
       key="bulk_upgrade_rex"
       component="button"
       onClick={upgradeBulkViaRemoteExecution}
@@ -296,6 +392,7 @@ export const PackagesTab = () => {
     </DropdownItem>,
     <DropdownItem
       aria-label="bulk_upgrade_customized_rex"
+      ouiaId="bulk_upgrade_customized_rex"
       key="bulk_upgrade_customized_rex"
       component="a"
       href={upgradeViaCustomizedRemoteExecution}
@@ -307,6 +404,7 @@ export const PackagesTab = () => {
   const dropdownRemoveItems = [
     <DropdownItem
       aria-label="bulk_remove"
+      ouiaId="bulk_remove"
       key="bulk_remove"
       component="button"
       onClick={removeBulk}
@@ -314,9 +412,10 @@ export const PackagesTab = () => {
     >
       {__('Remove')}
     </DropdownItem>,
-    <DropdownSeparator key="separator" />,
+    <DropdownSeparator key="separator" ouiaId="separator" />,
     <DropdownItem
       aria-label="install_pkg_on_host"
+      ouiaId="install_pkg_on_host"
       key="install_pkg_on_host"
       component="button"
       onClick={handleInstallPackagesClick}
@@ -338,9 +437,11 @@ export const PackagesTab = () => {
         <ActionList isIconList>
           <ActionListItem>
             <Dropdown
+              ouiaId="upgrade_actions_dropdown"
               onSelect={onActionSelect}
               toggle={
                 <DropdownToggle
+                  ouiaId="upgrade_actions_dropdown_toggle"
                   splitButtonItems={[
                     <DropdownToggleAction key="action" aria-label="upgrade_actions" onClick={upgradeBulk}>
                       {__('Upgrade')}
@@ -362,6 +463,7 @@ export const PackagesTab = () => {
               isOpen={isBulkActionOpen}
               isPlain
               dropdownItems={dropdownRemoveItems}
+              ouiaId="bulk_actions_dropdown"
             />
           </ActionListItem>
         </ActionList>
@@ -429,7 +531,7 @@ export const PackagesTab = () => {
           alwaysShowActionButtons={false}
         >
           <Thead>
-            <Tr>
+            <Tr ouiaId="row-header">
               <Th key="select-all" />
               <SortableColumnHeaders
                 columnHeaders={columnHeaders}
@@ -446,7 +548,7 @@ export const PackagesTab = () => {
                 name: packageName,
                 nvra: installedVersion,
                 rpm_id: rpmId,
-                upgradable_version: upgradableVersion,
+                upgradable_versions: upgradableVersions,
               } = pkg;
 
               const rowActions = [
@@ -457,23 +559,29 @@ export const PackagesTab = () => {
                 },
               ];
 
-              if (upgradableVersion) {
+              if (upgradableVersions) {
                 rowActions.unshift(
                   {
                     title: __('Upgrade via remote execution'),
-                    onClick: () => upgradeViaRemoteExecution(upgradableVersion),
+                    onClick: () => upgradeViaRemoteExecution({ packageName, upgradableVersions }),
                     isDisabled: actionInProgress,
                   },
                   {
                     title: __('Upgrade via customized remote execution'),
                     component: 'a',
-                    href: katelloPackageUpdateUrl({ hostname, packageName: upgradableVersion }),
+                    href: katelloPackageUpdateUrl({
+                      hostname,
+                      packageName: selectedPackageUpgradeVersion({
+                        packageName,
+                        upgradableVersions,
+                      }),
+                    }),
                   },
                 );
               }
 
               return (
-                <Tr key={`${id}`}>
+                <Tr key={`${id}`} ouiaId={`action-row-${id}`}>
                   {showActions ? (
                     <Td
                       select={{
@@ -494,7 +602,17 @@ export const PackagesTab = () => {
                   </Td>
                   <Td><PackagesStatus {...pkg} /></Td>
                   <Td>{installedVersion.replace(`${packageName}-`, '')}</Td>
-                  <Td><PackagesLatestVersion {...pkg} /></Td>
+                  <Td>
+                    <UpdateVersionsSelect
+                      packageName={packageName}
+                      rowIndex={rowIndex}
+                      selections={selectedNewVersions.current[packageName]}
+                      upgradableVersions={upgradableVersions}
+                      toggleUpgradableVersionSelect={toggleUpgradableVersionSelect}
+                      onUpgradableVersionSelect={onUpgradableVersionSelect}
+                      upgradableVersionSelectOpen={upgradableVersionSelectOpen}
+                    />
+                  </Td>
                   {showActions ? (
                     <Td
                       key={`rowActions-${id}`}

data/webpack/components/extensions/HostDetails/Tabs/PackagesTab/PackagesTab.scss

@@ -4,4 +4,9 @@
 
 #packages-alert {
   margin: 16px 24px;
-}
+}
+
+#style-select-id .pf-c-select button.pf-c-select__toggle {
+  font-size: 1em;
+  margin-left: -0.5rem;
+}

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

@@ -6,7 +6,7 @@ import { errorToast, renderRexJobStartedToast } from '../../../../scenes/Tasks/h
 import { ERRATA_SEARCH_QUERY } from './ErrataTab/HostErrataConstants';
 import { TRACES_SEARCH_QUERY } from './TracesTab/HostTracesConstants';
 import { PACKAGE_SEARCH_QUERY } from './PackagesTab/YumInstallablePackagesConstants';
-import { PACKAGES_SEARCH_QUERY } from './PackagesTab/HostPackagesConstants';
+import { PACKAGES_SEARCH_QUERY, SELECTED_UPDATE_VERSIONS } from './PackagesTab/HostPackagesConstants';
 
 // PARAM BUILDING
 const baseParams = ({ feature, hostname, inputs = {} }) => ({
@@ -54,12 +54,13 @@ const katelloPackageUpdateParams = ({ hostname, packageName }) =>
     feature: REX_FEATURES.KATELLO_PACKAGE_UPDATE,
   });
 
-const katelloPackagesUpdateParams = ({ hostname, search }) =>
-  baseParams({
-    hostname,
-    inputs: { [PACKAGES_SEARCH_QUERY]: search },
+const katelloPackagesUpdateParams = ({ hostname, search, versions }) => ({
+  job_invocation: {
     feature: REX_FEATURES.KATELLO_PACKAGES_UPDATE_BY_SEARCH,
-  });
+    inputs: { [PACKAGES_SEARCH_QUERY]: search, [SELECTED_UPDATE_VERSIONS]: versions },
+    search_query: `name ^ (${hostname})`,
+  },
+});
 
 const katelloTracerResolveParams = ({ hostname, search }) =>
   baseParams({
@@ -150,11 +151,11 @@ export const updatePackage = ({ hostname, packageName }) => post({
   errorToast,
 });
 
-export const updatePackages = ({ hostname, search }) => post({
+export const updatePackages = ({ hostname, search, versions }) => post({
   type: API_OPERATIONS.POST,
   key: REX_JOB_INVOCATIONS_KEY,
   url: foremanApi.getApiUrl('/job_invocations'),
-  params: katelloPackagesUpdateParams({ hostname, search }),
+  params: katelloPackagesUpdateParams({ hostname, search, versions }),
   handleSuccess: showRexToast,
   errorToast,
 });