katello 4.16.1 → 4.17.0.rc1

data/webpack/scenes/AlternateContentSources/Create/Steps/AcsUrlPaths.js

@@ -6,6 +6,9 @@ import {
   FormGroup,
   TextInput,
   TextArea,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
 } from '@patternfly/react-core';
 import ACSCreateContext from '../ACSCreateContext';
 import WizardHeader from '../../../ContentViews/components/WizardHeader';
@@ -41,8 +44,6 @@ const AcsUrlPaths = () => {
         <FormGroup
           label={__('Base URL')}
           fieldId="acs_base_url"
-          helperTextInvalid={helperTextInvalid}
-          validated={urlValidated}
           isRequired
         >
           <TextInput
@@ -55,8 +56,17 @@ const AcsUrlPaths = () => {
             placeholder={baseURLplaceholder}
             value={url}
             validated={urlValidated}
-            onChange={value => setUrl(value)}
+            onChange={(_event, value) => setUrl(value)}
           />
+          {urlValidated === 'error' && (
+            <FormHelperText>
+              <HelperText>
+                <HelperTextItem variant="error">
+                  {helperTextInvalid}
+                </HelperTextItem>
+              </HelperText>
+            </FormHelperText>
+          )}
         </FormGroup>
         {acsType === 'rhui' &&
         <>
@@ -73,19 +83,24 @@ const AcsUrlPaths = () => {
         <FormGroup
           label={__('Subpaths')}
           type="string"
-          fieldId="acs_subpaths"
-          helperTextInvalid={__('Comma-separated list of subpaths. All subpaths must have a slash at the end and none at the front.')}
-          validated={subPathValidated}
         >
           <TextArea
             placeholder="test/repo1/, test/repo2/,"
             value={subpaths}
             validated={subPathValidated}
-            onChange={value => setSubpaths(value)}
+            onChange={(_event, value) => setSubpaths(value)}
             name="acs_subpath_field"
             id="acs_subpath_field"
             aria-label="acs_subpath_field"
           />
+          {subPathValidated === 'error' && (
+            <FormHelperText>
+              <HelperText>
+                <HelperTextItem variant="error">
+                  {__('Comma-separated list of subpaths. All subpaths must have a slash at the end and none at the front.')}
+                </HelperTextItem>
+              </HelperText>
+            </FormHelperText>)}
         </FormGroup>
       </Form>
     </>

data/webpack/scenes/AlternateContentSources/Create/Steps/NameACS.js

@@ -35,7 +35,7 @@ const NameACS = () => {
             name="acs_name_field"
             aria-label="acs_name_field"
             value={name}
-            onChange={(value) => { setName(value); }}
+            onChange={(_event, value) => { setName(value); }}
           />
         </FormGroup>
         <FormGroup
@@ -45,7 +45,7 @@ const NameACS = () => {
         >
           <TextArea
             value={description}
-            onChange={(value) => { setDescription(value); }}
+            onChange={(_event, value) => { setDescription(value); }}
             name="acs_description_field"
             id="acs_description_field"
           />

data/webpack/scenes/AlternateContentSources/Create/Steps/SelectSource.js

@@ -111,7 +111,7 @@ const SelectSource = () => {
             isRequired
             isDisabled={acsType === 'rhui'}
             value={contentType}
-            onChange={(value) => {
+            onChange={(_event, value) => {
               setContentType(value);
             }}
             aria-label="FormSelect Input"

data/webpack/scenes/AlternateContentSources/Create/__tests__/acsCreate.test.js

@@ -215,7 +215,8 @@ test('Can display create wizard and create custom ACS', async (done) => {
   assertNockRequest(contentCredentialScope);
   assertNockRequest(productScope);
   assertNockRequest(smartProxyScope);
-  assertNockRequest(createScope, done);
+  assertNockRequest(createScope);
+  done();
   act(done);
 });
 
@@ -307,7 +308,8 @@ test('Can display create wizard and create RHUI ACS', async (done) => {
   assertNockRequest(contentCredentialScope);
   assertNockRequest(productScope);
   assertNockRequest(smartProxyScope);
-  assertNockRequest(createScope, done);
+  assertNockRequest(createScope);
+  done();
   act(done);
 });
 
@@ -387,6 +389,7 @@ test('Can display create wizard and create simplified ACS', async (done) => {
   assertNockRequest(productScope);
   assertNockRequest(contentCredentialScope);
   assertNockRequest(smartProxyScope);
-  assertNockRequest(createScope, done);
+  assertNockRequest(createScope);
+  done();
   act(done);
 });

data/webpack/scenes/AlternateContentSources/Details/ACSExpandableDetails.js

@@ -103,7 +103,8 @@ const ACSExpandableDetails = ({ expandedId }) => {
                   setShowUrlPaths(false);
                   setShowCredentials(false);
                 }}
-                contentId="showDetails"
+                contentId="showDetails-content"
+                toggleId="showDetails-toggle"
               >
                 <Text ouiaId="expandable-details-text">{__('Details')}</Text>
               </ExpandableSectionToggle>
@@ -114,7 +115,7 @@ const ACSExpandableDetails = ({ expandedId }) => {
                 ouiaId="edit-details-pencil-edit"
                 aria-label="edit-details-pencil-edit"
                 variant="link"
-                isSmall
+                size="sm"
                 icon={<PencilAltIcon />}
                 onClick={() => setEditDetailsModalOpen(true)}
               >{__('Edit')}
@@ -127,7 +128,8 @@ const ACSExpandableDetails = ({ expandedId }) => {
           <ExpandableSection
             isExpanded={showDetails}
             isDetached
-            contentId="showDetails"
+            contentId="showDetails-content"
+            toggleId="showDetails-toggle"
           >
             <TextContent className="margin-0-24 expandable-section-text">
               <TextList component={TextListVariants.dl}>
@@ -183,7 +185,8 @@ const ACSExpandableDetails = ({ expandedId }) => {
                   setShowCredentials(false);
                   setShowProducts(false);
                 }}
-                contentId="showSmartProxies"
+                contentId="showSmartProxies-content"
+                toggleId="showSmartProxies-toggle"
               >
                 <Text ouiaId="expandable-smart-proxies-text">{__('Smart proxies')}</Text>
               </ExpandableSectionToggle>
@@ -194,7 +197,7 @@ const ACSExpandableDetails = ({ expandedId }) => {
                 ouiaId="edit-smart-proxies-pencil-edit"
                 aria-label="edit-smart-proxies-pencil-edit"
                 variant="link"
-                isSmall
+                size="sm"
                 icon={<PencilAltIcon />}
                 onClick={() => setEditSmartProxiesModalOpen(true)}
               >{__('Edit')}
@@ -206,7 +209,8 @@ const ACSExpandableDetails = ({ expandedId }) => {
         <StackItem className="primary-detail-stack-items-border">
           <ExpandableSection
             isDetached
-            contentId="showSmartProxies"
+            contentId="showSmartProxies-content"
+            toggleId="showSmartProxies-toggle"
             isExpanded={showSmartProxies}
           >
             <List className="margin-0-24 expandable-section-text" isPlain isBordered>
@@ -254,7 +258,8 @@ const ACSExpandableDetails = ({ expandedId }) => {
                     setShowCredentials(false);
                   }}
                   isExpanded={showProducts}
-                  contentId="showProducts"
+                  contentId="showProducts-content"
+                  toggleId="showProducts-toggle"
                 >
                   <Text ouiaId="expandable-products-text">{__('Products')}</Text>
                 </ExpandableSectionToggle>
@@ -265,7 +270,7 @@ const ACSExpandableDetails = ({ expandedId }) => {
                   ouiaId="edit-products-pencil-edit"
                   aria-label="edit-products-pencil-edit"
                   variant="link"
-                  isSmall
+                  size="sm"
                   icon={<PencilAltIcon />}
                   onClick={() => setEditProductsModalOpen(true)}
                 >{__('Edit')}
@@ -277,7 +282,8 @@ const ACSExpandableDetails = ({ expandedId }) => {
           <StackItem>
             <ExpandableSection
               isDetached
-              contentId="showProducts"
+              contentId="showProducts-content"
+              toggleId="showProducts-toggle"
               isExpanded={showProducts}
             >
               <List className="margin-0-24 expandable-section-text" isPlain isBordered>
@@ -308,7 +314,8 @@ const ACSExpandableDetails = ({ expandedId }) => {
                     setShowCredentials(false);
                   }}
                   isExpanded={showUrlPaths}
-                  contentId="showUrlPaths"
+                  contentId="showUrlPaths-content"
+                  toggleId="showUrlPaths-toggle"
                 >
                   <Text ouiaId="expandable-url-paths-text">{__('URL and subpaths')}</Text>
                 </ExpandableSectionToggle>
@@ -319,7 +326,7 @@ const ACSExpandableDetails = ({ expandedId }) => {
                   ouiaId="edit-urls-pencil-edit"
                   aria-label="edit-urls-pencil-edit"
                   variant="link"
-                  isSmall
+                  size="sm"
                   icon={<PencilAltIcon />}
                   onClick={() => setEditUrlModalOpen(true)}
                 >{__('Edit')}
@@ -330,7 +337,8 @@ const ACSExpandableDetails = ({ expandedId }) => {
           </StackItem>
           <StackItem className="primary-detail-stack-items-border">
             <ExpandableSection
-              contentId="showUrlPaths"
+              contentId="showUrlPaths-content"
+              toggleId="showUrlPaths-toggle"
               isDetached
               isExpanded={showUrlPaths}
             >
@@ -369,7 +377,8 @@ const ACSExpandableDetails = ({ expandedId }) => {
                     setShowCredentials(expanded);
                   }}
                   isExpanded={showCredentials}
-                  contentId="showCredentials"
+                  contentId="showCredentials-content"
+                  toggleId="showCredentials-toggle"
                 >
                   <Text ouiaId="expandable-credentials-text">{__('Credentials')}</Text>
                 </ExpandableSectionToggle>
@@ -380,7 +389,7 @@ const ACSExpandableDetails = ({ expandedId }) => {
                   ouiaId="edit-credentials-pencil-edit"
                   aria-label="edit-credentials-pencil-edit"
                   variant="link"
-                  isSmall
+                  size="sm"
                   icon={<PencilAltIcon />}
                   onClick={() => setEditCredentialsModalOpen(true)}
                 >{__('Edit')}
@@ -392,7 +401,8 @@ const ACSExpandableDetails = ({ expandedId }) => {
           <StackItem className="primary-detail-stack-items-border">
             <ExpandableSection
               isExpanded={showCredentials}
-              contentId="showCredentials"
+              contentId="showCredentials-content"
+              toggleId="showCredentials-toggle"
               isDetached
             >
               <TextContent className="margin-0-24 expandable-section-text">

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditCredentials.js

@@ -135,7 +135,7 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
             id="verify-ssl-switch"
             aria-label="verify-ssl-switch"
             isChecked={acsVerifySSL}
-            onChange={checked => setAcsVerifySSL(checked)}
+            onChange={(_event, checked) => setAcsVerifySSL(checked)}
           />
         </FormGroup>
         <FormGroup
@@ -148,7 +148,7 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
             isRequired
             isDisabled={!acsVerifySSL}
             value={acsCAcert}
-            onChange={value => setAcsCAcert(value)}
+            onChange={(_event, value) => setAcsCAcert(value)}
             aria-label="sslCAcert_select"
           >
             {
@@ -180,6 +180,7 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
             setAcsSslClientCert('');
             setAcsSslClientKey('');
           }}
+          style={{ marginTop: '0rem' }}
         />
         {authentication === 'manual' &&
         <>
@@ -197,7 +198,7 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
               name="acs_username_field"
               aria-label="acs_username_field"
               value={acsUsername}
-              onChange={(value) => {
+              onChange={(_event, value) => {
                 setAcsUsername(value);
               }}
             />
@@ -216,7 +217,7 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
               name="acs_password_field"
               aria-label="acs_password_field"
               value={acsPassword}
-              onChange={(value) => {
+              onChange={(_event, value) => {
                 setAcsPassword(value);
               }}
             />
@@ -235,6 +236,7 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
             setAcsUsername('');
             setAcsPassword('');
           }}
+          style={{ marginTop: '0rem' }}
         />
         {authentication === 'credentials' &&
         <>
@@ -247,7 +249,7 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
               ouiaId="ssl-client-cert-select"
               isRequired
               value={acsSslClientCert}
-              onChange={value => setAcsSslClientCert(value)}
+              onChange={(_event, value) => setAcsSslClientCert(value)}
               aria-label="ssl_client_cert_select"
             >
               {
@@ -276,7 +278,7 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
               ouiaId="ssl_client_key_select"
               isRequired
               value={acsSslClientKey}
-              onChange={value => setAcsSslClientKey(value)}
+              onChange={(_event, value) => setAcsSslClientKey(value)}
               aria-label="ssl_client_key_select"
             >
               {
@@ -311,6 +313,7 @@ const ACSEditCredentials = ({ onClose, acsId, acsDetails }) => {
             setAcsUsername('');
             setAcsPassword('');
           }}
+          style={{ marginTop: '0rem' }}
         />
         <ActionGroup>
           <Button

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditDetails.js

@@ -50,7 +50,7 @@ const ACSEditDetails = ({ onClose, acsId, acsDetails }) => {
             name="acs_name_field"
             aria-label="acs_name_field"
             value={acsName}
-            onChange={(value) => {
+            onChange={(_event, value) => {
               setACSName(value);
             }}
           />
@@ -62,7 +62,7 @@ const ACSEditDetails = ({ onClose, acsId, acsDetails }) => {
         >
           <TextArea
             value={acsDescription}
-            onChange={(value) => {
+            onChange={(_event, value) => {
               setAcsDescription(value);
             }}
             name="acs_description_field"

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditSmartProxies.js

@@ -113,7 +113,7 @@ const ACSEditSmartProxies = ({ onClose, acsId, acsDetails }) => {
             aria-label="use-http-proxies-switch"
             ouiaId="use-http-proxies-switch"
             isChecked={acsUseHttpProxies}
-            onChange={checked => setAcsUseHttpProxies(checked)}
+            onChange={(_event, checked) => setAcsUseHttpProxies(checked)}
           />
         </FormGroup>
         <ActionGroup>

data/webpack/scenes/AlternateContentSources/Details/EditModals/ACSEditURLPaths.js

@@ -2,7 +2,19 @@ import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { ActionGroup, Button, Form, FormGroup, Modal, ModalVariant, TextArea, TextInput } from '@patternfly/react-core';
+import {
+  ActionGroup,
+  Button,
+  Form,
+  FormGroup,
+  Modal,
+  ModalVariant,
+  TextArea,
+  TextInput,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
 import { editACS, getACSDetails } from '../../ACSActions';
 import { areSubPathsValid, isValidUrl } from '../../helpers';
 
@@ -63,8 +75,6 @@ const ACSEditURLPaths = ({ onClose, acsId, acsDetails }) => {
           label={__('Base URL')}
           type="string"
           fieldId="acs_base_url"
-          helperTextInvalid={helperTextInvalid}
-          validated={urlValidated}
           isRequired
         >
           <TextInput
@@ -77,25 +87,41 @@ const ACSEditURLPaths = ({ onClose, acsId, acsDetails }) => {
             placeholder={baseURLplaceholder}
             value={acsUrl}
             validated={urlValidated}
-            onChange={value => setAcsUrl(value)}
+            onChange={(_event, value) => setAcsUrl(value)}
           />
+          {urlValidated === 'error' && (
+            <FormHelperText>
+              <HelperText>
+                <HelperTextItem variant="error">
+                  {helperTextInvalid}
+                </HelperTextItem>
+              </HelperText>
+            </FormHelperText>
+          )}
         </FormGroup>
         <FormGroup
           label={__('Subpaths')}
           type="string"
           fieldId="acs_subpaths"
-          helperTextInvalid={__('Comma-separated list of subpaths. All subpaths must have a slash at the end and none at the front.')}
-          validated={subPathValidated}
         >
           <TextArea
             placeholder="test/repo1/, test/repo2/,"
             value={acsSubpath}
             validated={subPathValidated}
-            onChange={value => setAcsSubpath(value)}
+            onChange={(_event, value) => setAcsSubpath(value)}
             name="acs_subpath_field"
             id="acs_subpath_field"
             aria-label="acs_subpath_field"
           />
+          {subPathValidated === 'error' && (
+            <FormHelperText>
+              <HelperText>
+                <HelperTextItem variant="error">
+                  {__('Comma-separated list of subpaths. All subpaths must have a slash at the end and none at the front.')}
+                </HelperTextItem>
+              </HelperText>
+            </FormHelperText>
+          )}
         </FormGroup>
         <ActionGroup>
           <Button

data/webpack/scenes/AlternateContentSources/Details/__tests__/ACSEdits.test.js

@@ -44,7 +44,8 @@ test('Can show custom ACS details expandable sections with edit buttons', async
     expect(queryByText('Credentials')).toBeInTheDocument();
     expect(getByLabelText('edit-credentials-pencil-edit')).toBeInTheDocument();
   });
-  assertNockRequest(acsDetailsScope, done);
+  assertNockRequest(acsDetailsScope);
+  done();
   act(done);
 });
 
@@ -89,7 +90,8 @@ test('Can open and close edit ACS details modal', async (done) => {
   await patientlyWaitFor(() => {
     expect(queryByLabelText('edit_acs_details')).not.toBeInTheDocument();
   });
-  assertNockRequest(acsDetailsScope, done);
+  assertNockRequest(acsDetailsScope);
+  done();
   act(done);
 });
 
@@ -138,7 +140,8 @@ test('Can edit ACS details in the edit modal', async (done) => {
   });
   assertNockRequest(acsDetailsScope);
   assertNockRequest(acsEditScope);
-  assertNockRequest(acsDetailsScope, done);
+  assertNockRequest(acsDetailsScope);
+  done();
   act(done);
 });
 
@@ -175,7 +178,8 @@ test('Can show simplified ACS details expandable sections with edit buttons', as
     expect(queryByText('Credentials')).not.toBeInTheDocument();
     expect(queryByText('URL and subpaths')).not.toBeInTheDocument();
   });
-  assertNockRequest(acsDetailsScope, done);
+  assertNockRequest(acsDetailsScope);
+  done();
   act(done);
 });
 
@@ -240,6 +244,7 @@ test('Can edit products in a simplified ACS details edit modal', async (done) =>
   assertNockRequest(acsDetailsScope);
   assertNockRequest(productsScope);
   assertNockRequest(acsEditScope);
-  assertNockRequest(acsDetailsScope, done);
+  assertNockRequest(acsDetailsScope);
+  done();
   act(done);
 });

data/webpack/scenes/AlternateContentSources/Details/__tests__/ACSExpandableDetails.test.js

@@ -36,7 +36,8 @@ test('Can call API and show ACS details expandable sections on page load', async
     expect(queryByText('URL and subpaths')).toBeInTheDocument();
     expect(queryByText('Credentials')).toBeInTheDocument();
   });
-  assertNockRequest(acsDetailsScope, done);
+  assertNockRequest(acsDetailsScope);
+  done();
   act(done);
 });
 
@@ -104,6 +105,7 @@ test('Can expand expandable sections on details page', async (done) => {
     expect(queryByText('true')).not.toBeInTheDocument();
   });
 
-  assertNockRequest(acsDetailsScope, done);
+  assertNockRequest(acsDetailsScope);
+  done();
   act(done);
 });

data/webpack/scenes/AlternateContentSources/MainTable/ACSTable.js

@@ -15,9 +15,6 @@ import {
   DrawerHead,
   DrawerPanelContent,
   DrawerPanelBody,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
   Text,
   TextContent,
   TextList,
@@ -26,6 +23,11 @@ import {
   TextListVariants,
   TextVariants,
 } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+} from '@patternfly/react-core/deprecated';
 import { TableVariant, Tbody, Td, Th, Thead, Tr, ActionsColumn } from '@patternfly/react-table';
 import { useSelectionSet } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
 import { useTableSort } from 'foremanReact/components/PF4/Helpers/useTableSort';
@@ -148,7 +150,7 @@ const ACSTable = () => {
   const isSingleSelected = rowId => (Number(rowId) === Number(acsId) ||
       Number(rowId) === Number(expandedId));
   const customStyle = {
-    borderLeft: '5px solid var(--pf-global--primary-color--100)',
+    borderLeft: '5px solid var(--pf-v5-global--primary-color--100)',
   };
 
   const PanelContent = () => {
@@ -196,14 +198,14 @@ const ACSTable = () => {
                 ouiaId="refresh-acs"
                 onClick={() => onRefresh(acs?.id)}
                 variant="secondary"
-                isSmall
+                size="sm"
                 aria-label="refresh_acs"
               >
                 {__('Refresh source')}
               </Button>
               <Dropdown
                 style={{ paddingRight: '0px' }}
-                toggle={<KebabToggle aria-label="details_actions" onToggle={setDetailsKebabOpen} style={{ paddingRight: '0px' }} />}
+                toggle={<KebabToggle aria-label="details_actions" onToggle={(_event, val) => setDetailsKebabOpen(val)} style={{ paddingRight: '0px' }} />}
                 isOpen={detailsKebabOpen}
                 ouiaId="acs-details-actions"
                 isPlain
@@ -344,7 +346,7 @@ const ACSTable = () => {
                   </Button>}
                   {renderActionButtons && (canEdit || canDelete) &&
                   <Dropdown
-                    toggle={<KebabToggle aria-label="bulk_actions" onToggle={setKebabOpen} />}
+                    toggle={<KebabToggle aria-label="bulk_actions" onToggle={(_event, val) => setKebabOpen(val)} />}
                     isOpen={kebabOpen}
                     ouiaId="acs-bulk-actions"
                     isPlain
@@ -430,7 +432,7 @@ const ACSTable = () => {
                           id={id}
                           aria-label={`Select ACS ${id}`}
                           isChecked={isSelected(id)}
-                          onChange={selected => selectOne(selected, id)}
+                          onChange={(_event, selected) => selectOne(selected, id)}
                         />
                       </Td>
                       <Td>

data/webpack/scenes/AlternateContentSources/MainTable/__tests__/acsTable.test.js

@@ -30,7 +30,8 @@ test('Can call API and show ACS on page load', async (done) => {
   // Assert that the ACS name is now showing on the screen, but wait for it to appear.
   await patientlyWaitFor(() => expect(getByText(firstAcs.name)).toBeInTheDocument());
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done);
+  assertNockRequest(scope);
+  done();
   act(done);
 });
 
@@ -56,6 +57,7 @@ test('Can handle no ACS being present', async (done) => {
   expect(queryByText(firstAcs.name)).toBeNull();
   expect(queryByLabelText('Select all')).not.toBeInTheDocument();
   await patientlyWaitFor(() => expect(queryByText("You currently don't have any alternate content sources.")).toBeInTheDocument());
-  assertNockRequest(scope, done);
+  assertNockRequest(scope);
+  done();
   act(done);
 });

data/webpack/scenes/BootedContainerImages/BootedContainerImagesPage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Th, Tbody, Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
+import { Table, Thead, Th, Tbody, Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
 import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableIndexPage';
 import {
   useSetParamsAndApiAndSearch,
@@ -114,7 +114,7 @@ const BootedContainerImagesPage = () => {
       controller="/katello/api/v2/host_bootc_images"
     >
       <>
-        <TableComposable variant="compact" ouiaId="booted-containers-table" isStriped>
+        <Table variant="compact" ouiaId="booted-containers-table" isStriped>
           <Thead>
             <Tr ouiaId="table-header">
               <>
@@ -201,7 +201,7 @@ const BootedContainerImagesPage = () => {
                     <Td />
                     <Td colSpan={3}>
                       <ExpandableRowContent>
-                        <TableComposable variant="compact" isStriped ouiaId={`table-composable-expanded-${rowIndex}`}>
+                        <Table variant="compact" isStriped ouiaId={`table-composable-expanded-${rowIndex}`}>
                           <Thead>
                             <Tr ouiaId={`table-row-inner-expandable-${rowIndex}`}>
                               <Th width={55}>{__('Image digest')}</Th>
@@ -218,14 +218,14 @@ const BootedContainerImagesPage = () => {
                               </Tr>
                             ))}
                           </Tbody>
-                        </TableComposable>
+                        </Table>
                       </ExpandableRowContent>
                     </Td>
                   </Tr> : null}
               </Tbody>
             );
           })}
-        </TableComposable>
+        </Table>
         {results.length > 0 && !errorMessage &&
           <Pagination
             key="table-bottom-pagination"