katello 4.16.1 → 4.17.0.rc1

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

@@ -1,3 +1,3 @@
-#package-install-modal .pf-c-input-group input {
+#package-install-modal .pf-v5-c-input-group input {
   min-width: 15em;
 }

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

@@ -3,6 +3,11 @@ import { useSelector, useDispatch } from 'react-redux';
 import {
   ActionList,
   ActionListItem,
+  Skeleton,
+  Split,
+  SplitItem,
+} from '@patternfly/react-core';
+import {
   Dropdown,
   DropdownItem,
   DropdownSeparator,
@@ -12,11 +17,8 @@ import {
   Select,
   SelectOption,
   SelectVariant,
-  Skeleton,
-  Split,
-  SplitItem,
-} from '@patternfly/react-core';
-import { TableVariant, Thead, Tbody, Tr, Th, Td, TableText } from '@patternfly/react-table';
+} from '@patternfly/react-core/deprecated';
+import { TableVariant, Thead, Tbody, Tr, Th, Td, TableText, ActionsColumn } from '@patternfly/react-table';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { HOST_DETAILS_KEY } from 'foremanReact/components/HostDetails/consts';
@@ -40,12 +42,16 @@ import { katelloPackageUpdateUrl, packagesUpdateUrl } from '../customizedRexUrlH
 import './PackagesTab.scss';
 import hostIdNotReady, { getHostDetails } from '../../HostDetailsActions';
 import PackageInstallModal from './PackageInstallModal';
-import { hasRequiredPermissions as can,
+import {
+  hasRequiredPermissions as can,
   missingRequiredPermissions as cannot,
-  userPermissionsFromHostDetails } from '../../hostDetailsHelpers';
+  userPermissionsFromHostDetails,
+  hostIsImageMode,
+} from '../../hostDetailsHelpers';
 import SortableColumnHeaders from '../../../../Table/components/SortableColumnHeaders';
 import { useRexJobPolling } from '../RemoteExecutionHooks';
 import { runSubmanRepos } from '../../Cards/ContentViewDetailsCard/HostContentViewActions';
+import ImageModeHostAlert from '../../../Hosts/ImageModeHostAlert';
 
 const invokeRexJobs = ['create_job_invocations'];
 const createBookmarks = ['create_bookmarks'];
@@ -74,7 +80,7 @@ const UpdateVersionsSelect = ({
           variant={SelectVariant.single}
           aria-label="upgradable-version-select"
           ouiaId="upgradable-version-select"
-          onToggle={isOpen => toggleUpgradableVersionSelect(isOpen, rowIndex)}
+          onToggle={(_event, isOpen) => toggleUpgradableVersionSelect(isOpen, rowIndex)}
           onSelect={(event, selected) => {
             onUpgradableVersionSelect(event, selected, rowIndex, packageName);
           }}
@@ -475,6 +481,7 @@ export const PackagesTab = () => {
   return (
     <div>
       <div id="packages-tab">
+        {hostIsImageMode({ hostDetails }) && <ImageModeHostAlert />}
         <TableWrapper
           {...{
             metadata,
@@ -515,13 +522,13 @@ export const PackagesTab = () => {
         >
           <Thead>
             <Tr ouiaId="row-header">
-              <Th key="select-all" />
+              <Th key="select-all" aria-label="Select all table header" />
               <SortableColumnHeaders
                 columnHeaders={columnHeaders}
                 pfSortParams={pfSortParams}
                 columnsToSortParams={COLUMNS_TO_SORT_PARAMS}
               />
-              <Th />
+              <Th aria-label="action menu header" />
             </Tr>
           </Thead>
           <Tbody>
@@ -550,15 +557,19 @@ export const PackagesTab = () => {
                     isDisabled: actionInProgress,
                   },
                   {
-                    title: __('Upgrade via customized remote execution'),
-                    component: 'a',
-                    href: katelloPackageUpdateUrl({
-                      hostname,
-                      packageName: selectedPackageUpgradeVersion({
-                        packageName,
-                        upgradableVersions,
-                      }),
-                    }),
+                    title: (
+                      <a
+                        href={katelloPackageUpdateUrl({
+                          hostname,
+                          packageName: selectedPackageUpgradeVersion({
+                            packageName,
+                            upgradableVersions,
+                          }),
+                        })}
+                      >
+                        {__('Upgrade via customized remote execution')}
+                      </a>
+                    ),
                   },
                 );
               }
@@ -568,7 +579,7 @@ export const PackagesTab = () => {
                   {showActions ? (
                     <Td
                       select={{
-                        disable: actionInProgress,
+                        isDisabled: actionInProgress,
                         isSelected: isSelected(id),
                         onSelect: (event, selected) => selectOne(selected, id, pkg),
                         rowIndex,
@@ -602,7 +613,10 @@ export const PackagesTab = () => {
                       actions={{
                         items: rowActions,
                       }}
+                    ><ActionsColumn
+                      actions={rowActions}
                     />
+                    </Td>
                   ) : null}
                 </Tr>
               );

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

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

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

@@ -22,9 +22,6 @@ import {
   ActionListItem,
   Alert,
   AlertActionCloseButton,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
   Label,
   Skeleton,
   Split,
@@ -33,6 +30,11 @@ import {
   ToggleGroupItem,
   Tooltip,
 } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+} from '@patternfly/react-core/deprecated';
 import { FlagIcon } from '@patternfly/react-icons';
 import {
   TableVariant,
@@ -593,13 +595,13 @@ const RepositorySetsTab = () => {
         >
           <Thead>
             <Tr ouiaId="header-tr">
-              <Th key="select-all" />
+              <Th key="select-all" aria-label="Select all table header" />
               <SortableColumnHeaders
                 columnHeaders={columnHeaders}
                 pfSortParams={pfSortParams}
                 columnsToSortParams={COLUMNS_TO_SORT_PARAMS}
               />
-              <Th key="action-menu" />
+              <Th key="action-menu" aria-label="action menu table header" />
             </Tr>
           </Thead>
           <Tbody>
@@ -622,7 +624,7 @@ const RepositorySetsTab = () => {
                 <Tr key={id} ouiaId={`tr-${rowIndex}`}>
                   {canDoContentOverrides ? (
                     <Td select={{
-                      disable: !isSelectable(id),
+                      isDisabled: !isSelectable(id),
                       isSelected: isSelected(id),
                       onSelect: (event, selected) => selectOne(selected, id),
                       rowIndex,

data/webpack/components/extensions/HostDetails/Tabs/TracesTab/EnableTracerModal.js

@@ -6,15 +6,17 @@ import {
   FlexItem,
   Modal,
   ModalVariant,
-  Dropdown,
-  DropdownItem,
-  DropdownToggle,
   Text,
   TextContent,
   TextList,
   TextListItem,
   Alert,
 } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+} from '@patternfly/react-core/deprecated';
 import { CaretDownIcon, ArrowRightIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { useSelector } from 'react-redux';

data/webpack/components/extensions/HostDetails/Tabs/TracesTab/EnableTracerModal.scss

@@ -1,4 +1,4 @@
-.pf-c-content {
+.pf-v5-c-content {
   ul {
       margin-top: 1rem;
       li svg {

data/webpack/components/extensions/HostDetails/Tabs/TracesTab/TracesEnabler.js

@@ -4,12 +4,11 @@ import {
   EmptyState,
   EmptyStateIcon,
   EmptyStateBody,
-  Title,
   EmptyStateVariant,
   Button,
   Flex,
   FlexItem,
-  Spinner,
+  Spinner, EmptyStateHeader, EmptyStateFooter,
 } from '@patternfly/react-core';
 import { WrenchIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -67,14 +66,12 @@ const TracesEnabler = ({ hostname, tracerRpmAvailable }) => {
   } = useRexJobPolling(initialAction, successAction);
 
   return (
-    <EmptyState variant={EmptyStateVariant.small}>
+    <EmptyState variant={EmptyStateVariant.sm}>
       {pollingStarted ?
         <Spinner /> :
         <EmptyStateIcon icon={WrenchIcon} />
       }
-      <Title ouiaId="enable-tracer-title" headingLevel="h2" size="lg">
-        {pollingStarted ? enablingTitle : title}
-      </Title>
+      <EmptyStateHeader titleText={<>{pollingStarted ? enablingTitle : title}</>} headingLevel="h2" />
       <EmptyStateBody>
         <Flex direction={{ default: 'column' }}>
           <FlexItem>{body}</FlexItem>
@@ -90,13 +87,15 @@ const TracesEnabler = ({ hostname, tracerRpmAvailable }) => {
           </FlexItem>
         </Flex>
       </EmptyStateBody>
-      <EnableTracerModal
-        key={hostname}
-        isOpen={enableTracerModalOpen}
-        setIsOpen={setEnableTracerModalOpen}
-        triggerJobStart={triggerJobStart}
-        tracerRpmAvailable={tracerRpmAvailable}
-      />
+      <EmptyStateFooter>
+        <EnableTracerModal
+          key={hostname}
+          isOpen={enableTracerModalOpen}
+          setIsOpen={setEnableTracerModalOpen}
+          triggerJobStart={triggerJobStart}
+          tracerRpmAvailable={tracerRpmAvailable}
+        />
+      </EmptyStateFooter>
     </EmptyState>
   );
 };

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

@@ -1,9 +1,19 @@
 import React, { useState, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 import {
-  Skeleton, Split, SplitItem, ActionList, ActionListItem, Dropdown,
-  DropdownItem, DropdownToggle, DropdownToggleAction, Alert,
+  Skeleton,
+  Split,
+  SplitItem,
+  ActionList,
+  ActionListItem,
+  Alert,
 } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+  DropdownToggleAction,
+} from '@patternfly/react-core/deprecated';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { TableVariant, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
@@ -233,13 +243,13 @@ const TracesTab = () => {
       >
         <Thead>
           <Tr ouiaId="row-header">
-            <Th key="select_checkbox" />
+            <Th key="select_checkbox" aria-label="select table header" />
             <SortableColumnHeaders
               columnHeaders={columnHeaders}
               pfSortParams={pfSortParams}
               columnsToSortParams={COLUMNS_TO_SORT_PARAMS}
             />
-            <Th key="action_menu" />
+            <Th key="action_menu" aria-label="action menu table header" />
           </Tr>
         </Thead>
         <Tbody>
@@ -257,7 +267,7 @@ const TracesTab = () => {
             let rowDropdownItems = [
               { title: 'Restart via remote execution', onClick: () => onRestartApp(id), isDisabled: actionInProgress },
               {
-                component: 'a', href: resolveTraceUrl({ hostname, search: tracesSearchQuery(id) }), title: 'Restart via customized remote execution',
+                title: <a href={resolveTraceUrl({ hostname, search: tracesSearchQuery(id) })}>{__('Restart via customized remote execution')}</a>,
               },
             ];
             if (resolveDisabled) {
@@ -270,7 +280,7 @@ const TracesTab = () => {
                 {showActions ? (
                   <Td
                     select={{
-                      disable: actionInProgress || resolveDisabled,
+                      isDisabled: actionInProgress || resolveDisabled,
                       props: {
                         'aria-label': `check-${application}`,
                       },

data/webpack/components/extensions/HostDetails/Tabs/__tests__/debsInstallModal.test.js

@@ -77,7 +77,8 @@ test('Can call API for installable deb packages and show on screen on page load'
   await patientlyWaitFor(() => expect(getAllByText(firstPackages.name)[0]).toBeInTheDocument());
   // Assert request was made and completed, see helper function
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+  assertNockRequest(scope);
+  done(); // Pass jest callback to confirm test is done
 });
 
 test('Can handle no installable deb packages being present', async (done) => {
@@ -109,7 +110,8 @@ test('Can handle no installable deb packages being present', async (done) => {
   await patientlyWaitFor(() => expect(queryByText('No packages available to install')).toBeInTheDocument());
   // Assert request was made and completed, see helper function
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+  assertNockRequest(scope);
+  done(); // Pass jest callback to confirm test is done
 });
 
 
@@ -146,7 +148,8 @@ test('Can install a deb package via remote execution', async (done) => {
 
   expect(triggerPackageInstall).toHaveBeenCalled();
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done);
+  assertNockRequest(scope);
+  done();
 });
 
 test('Can install a deb package via customized remote execution', async (done) => {
@@ -183,7 +186,8 @@ test('Can install a deb package via customized remote execution', async (done) =
     `/job_invocations/new?feature=${REX_FEATURES.KATELLO_PACKAGE_INSTALL}&search=name%20%5E%20(test-host)&inputs%5Bpackage%5D=duck,cheetah`,
   );
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done);
+  assertNockRequest(scope);
+  done();
 });
 
 test('Uses packages_install_by_search_query template when in select all mode', async (done) => {
@@ -221,6 +225,7 @@ test('Uses packages_install_by_search_query template when in select all mode', a
     `/job_invocations/new?feature=${REX_FEATURES.KATELLO_PACKAGE_INSTALL_BY_SEARCH}&search=name%20%5E%20(test-host)&inputs%5BPackage%20search%20query%5D=id%20!%5E%20(32376)`,
   );
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done);
+  assertNockRequest(scope);
+  done();
 });
 

data/webpack/components/extensions/HostDetails/Tabs/__tests__/debsTab.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, fireEvent, act } from 'react-testing-lib-wrapper';
 import * as hooks from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
 import { nockInstance, assertNockRequest, mockForemanAutocomplete } from '../../../../../test-utils/nockWrapper';
 import { foremanApi } from '../../../../../services/api';
@@ -75,7 +75,8 @@ test('Can call API for packages and show on screen on page load', async (done) =
   await patientlyWaitFor(() => expect(getAllByText(firstDeb.name)[0]).toBeInTheDocument());
   // Assert request was made and completed, see helper function
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+  assertNockRequest(scope);
+  done(); // Pass jest callback to confirm test is done
 });
 
 test('Can handle no packages being present', async (done) => {
@@ -101,7 +102,8 @@ test('Can handle no packages being present', async (done) => {
   await patientlyWaitFor(() => expect(queryByText('This host does not have any packages.')).toBeInTheDocument());
   // Assert request was made and completed, see helper function
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+  assertNockRequest(scope);
+  done(); // Pass jest callback to confirm test is done
 });
 
 test('Can filter by package status', async (done) => {
@@ -132,7 +134,9 @@ test('Can filter by package status', async (done) => {
 
   const statusDropdown = queryByText('Status', { ignore: 'th' });
   expect(statusDropdown).toBeInTheDocument();
-  fireEvent.click(statusDropdown);
+  await act(async () => {
+    fireEvent.click(statusDropdown);
+  });
   const upgradable = getByRole('option', { name: 'select Upgradable' });
   fireEvent.click(upgradable);
   await patientlyWaitFor(() => {
@@ -143,7 +147,8 @@ test('Can filter by package status', async (done) => {
 
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope);
-  assertNockRequest(scope2, done); // Pass jest callback to confirm test is done
+  assertNockRequest(scope2);
+  done(); // Pass jest callback to confirm test is done
 });
 
 test('Can upgrade a package via remote execution', async (done) => {
@@ -182,25 +187,32 @@ test('Can upgrade a package via remote execution', async (done) => {
 
   const statusDropdown = getByText('Status', { ignore: 'th' });
   expect(statusDropdown).toBeInTheDocument();
-  fireEvent.click(statusDropdown);
+  await act(async () => {
+    fireEvent.click(statusDropdown);
+  });
   const upgradable = getByRole('option', { name: 'select Upgradable' });
   fireEvent.click(upgradable);
   await patientlyWaitFor(() => {
     expect(getByText('libmagic1')).toBeInTheDocument();
     expect(getByText('libapt-pkg6.0')).toBeInTheDocument();
   });
-
-  const kebabDropdown = getAllByLabelText('Actions');
-  kebabDropdown[0].click();
+  const kebabDropdown = getAllByLabelText('Kebab toggle');
+  await act(async () => {
+    kebabDropdown[0].click();
+  });
 
   const rexAction = getByText('Upgrade via remote execution');
   await patientlyWaitFor(() => expect(rexAction).toBeInTheDocument());
-  fireEvent.click(rexAction);
+
+  await act(async () => {
+    fireEvent.click(rexAction);
+  });
 
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope);
   assertNockRequest(statusScope);
-  assertNockRequest(upgradeScope, done);
+  assertNockRequest(upgradeScope);
+  done();
 });
 
 test('Can upgrade a package via customized remote execution', async (done) => {
@@ -227,7 +239,9 @@ test('Can upgrade a package via customized remote execution', async (done) => {
 
   const statusDropdown = getByText('Status', { ignore: 'th' });
   expect(statusDropdown).toBeInTheDocument();
-  fireEvent.click(statusDropdown);
+  await act(async () => {
+    fireEvent.click(statusDropdown);
+  });
   const upgradable = getByRole('option', { name: 'select Upgradable' });
   fireEvent.click(upgradable);
   await patientlyWaitFor(() => {
@@ -235,8 +249,10 @@ test('Can upgrade a package via customized remote execution', async (done) => {
     expect(getByText('libmagic1')).toBeInTheDocument();
   });
 
-  const kebabDropdown = getAllByLabelText('Actions');
-  kebabDropdown[0].click();
+  const kebabDropdown = getAllByLabelText('Kebab toggle');
+  await act(async () => {
+    kebabDropdown[0].click();
+  });
 
   const rexAction = getByText('Upgrade via customized remote execution');
   const feature = REX_FEATURES.KATELLO_PACKAGE_UPDATE;
@@ -248,11 +264,14 @@ test('Can upgrade a package via customized remote execution', async (done) => {
     `/job_invocations/new?feature=${feature}&search=name%20%5E%20(${hostname})&inputs%5Bpackage%5D=${packageName}`,
   );
 
-  fireEvent.click(rexAction);
+  await act(async () => {
+    fireEvent.click(rexAction);
+  });
 
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope);
-  assertNockRequest(statusScope, done);
+  assertNockRequest(statusScope);
+  done();
 });
 
 test('Can bulk upgrade via remote execution', async (done) => {
@@ -295,11 +314,14 @@ test('Can bulk upgrade via remote execution', async (done) => {
 
   const rexAction = getByLabelText('bulk_upgrade_rex');
   expect(rexAction).toBeInTheDocument();
-  fireEvent.click(rexAction);
+  await act(async () => {
+    fireEvent.click(rexAction);
+  });
 
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope);
-  assertNockRequest(upgradeScope, done);
+  assertNockRequest(upgradeScope);
+  done();
 });
 
 test('Can bulk upgrade via customized remote execution', async (done) => {
@@ -338,7 +360,8 @@ test('Can bulk upgrade via customized remote execution', async (done) => {
   expect(rexAction).toHaveAttribute('href', job);
 
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done);
+  assertNockRequest(scope);
+  done();
 });
 
 test('Upgrade is disabled when there are non-upgradable packages selected', async (done) => {
@@ -368,7 +391,8 @@ test('Upgrade is disabled when there are non-upgradable packages selected', asyn
   expect(upgradeDropdown).toHaveAttribute('disabled');
 
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done);
+  assertNockRequest(scope);
+  done();
 });
 
 test('Remove is disabled when in select all mode', async (done) => {
@@ -394,7 +418,8 @@ test('Remove is disabled when in select all mode', async (done) => {
   expect(removeButton).toHaveAttribute('aria-disabled', 'true');
 
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done);
+  assertNockRequest(scope);
+  done();
 });
 
 test('Sets initial search query from url params', async (done) => {
@@ -415,6 +440,7 @@ test('Sets initial search query from url params', async (done) => {
   expect(queryByText(secondDeb.name)).not.toBeInTheDocument();
 
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+  assertNockRequest(scope);
+  done(); // Pass jest callback to confirm test is done
 });