katello 4.16.3 → 4.17.0.rc1

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

@@ -49,7 +49,7 @@ const renderOptions = isTracerInstalled => ({ // sets initial Redux state
   },
 });
 
-const actionMenuToTheRightOf = node => node.nextElementSibling.firstElementChild.firstElementChild;
+const actionMenuToTheRightOf = node => node.nextElementSibling.firstElementChild;
 
 const hostTraces = foremanApi.getApiUrl('/hosts/1/traces');
 const autocompleteUrl = '/hosts/1/traces/auto_complete_search';
@@ -80,7 +80,8 @@ describe('With tracer installed', () => {
     await patientlyWaitFor(() => expect(queryByText(firstTrace.application)).toBeInTheDocument());
     // Assert request was made and completed, see helper function
     assertNockRequest(autocompleteScope);
-    assertNockRequest(scope, done);
+    assertNockRequest(scope);
+    done();
   });
 
   test('Can handle no traces being present', async (done) => {
@@ -99,7 +100,8 @@ describe('With tracer installed', () => {
     await patientlyWaitFor(() => expect(queryByText('No applications to restart')).toBeInTheDocument());
     // Assert request was made and completed, see helper function
     assertNockRequest(autocompleteScope);
-    assertNockRequest(scope, done);
+    assertNockRequest(scope);
+    done();
   });
 
   test('Can bulk restart traces via Restart App button', async (done) => {
@@ -137,7 +139,8 @@ describe('With tracer installed', () => {
 
     assertNockRequest(autocompleteScope);
     assertNockRequest(resolveTracesScope);
-    assertNockRequest(scope, done);
+    assertNockRequest(scope);
+    done();
   });
 
   test('Warns you when one of the selected traces requires reboot', async (done) => {
@@ -167,7 +170,8 @@ describe('With tracer installed', () => {
       expect(queryByText('At least one of the selected items requires the host to reboot')).toBeInTheDocument();
     });
     assertNockRequest(autocompleteScope);
-    assertNockRequest(scope, done);
+    assertNockRequest(scope);
+    done();
   });
 
   test('Warns about reboot when using select all', async (done) => {
@@ -197,7 +201,8 @@ describe('With tracer installed', () => {
       expect(queryByText('At least one of the selected items requires the host to reboot')).toBeInTheDocument();
     });
     assertNockRequest(autocompleteScope);
-    assertNockRequest(scope, done);
+    assertNockRequest(scope);
+    done();
   });
 
   test('Can bulk restart traces via remote execution', async (done) => {
@@ -227,14 +232,18 @@ describe('With tracer installed', () => {
     fireEvent.click(traceCheckbox);
     expect(traceCheckbox.checked).toEqual(true);
     const actionMenu = getByLabelText('bulk_actions');
-    actionMenu.click();
+
+    await act(async () => {
+      actionMenu.click();
+    });
     const viaRexAction = queryByText('Restart via remote execution');
     expect(viaRexAction).toBeInTheDocument();
     viaRexAction.click();
 
     assertNockRequest(autocompleteScope);
     assertNockRequest(resolveTracesScope);
-    assertNockRequest(scope, done);
+    assertNockRequest(scope);
+    done();
   });
 
   test('Can select all, exclude and bulk restart traces via remote execution', async (done) => {
@@ -268,17 +277,23 @@ describe('With tracer installed', () => {
 
 
     const selectAllCheckbox = getByLabelText('Select all');
-    fireEvent.click(selectAllCheckbox);
+
+    await act(async () => {
+      fireEvent.click(selectAllCheckbox);
+    });
     expect(traceCheckbox.checked).toEqual(true);
 
     fireEvent.click(getByLabelText('Select row 0')); // de select
     fireEvent.click(getByLabelText('Select row 2')); // de select
 
-    fireEvent.click(getByText('Reboot host'));
+    await act(async () => {
+      fireEvent.click(getByText('Reboot host'));
+    });
 
     assertNockRequest(autocompleteScope);
     assertNockRequest(resolveTracesScope);
-    assertNockRequest(scope, done);
+    assertNockRequest(scope);
+    done();
   });
 
   test('Can restart a single trace via remote execution', async (done) => {
@@ -301,20 +316,23 @@ describe('With tracer installed', () => {
     await patientlyWaitFor(() => {
       const traceNameNode = getByText(firstTrace.helper);
       traceActionMenu = actionMenuToTheRightOf(traceNameNode);
-      expect(traceActionMenu).toHaveAttribute('aria-label', 'Actions');
+      expect(traceActionMenu).toHaveAttribute('aria-label', 'Kebab toggle');
+    });
+    await act(async () => {
+      traceActionMenu.click();
     });
-    traceActionMenu.click();
-
     let viaRexAction;
     await patientlyWaitFor(() => {
       viaRexAction = getByText('Restart via remote execution');
       expect(viaRexAction).toBeInTheDocument();
     });
-    viaRexAction.click();
-
+    await act(async () => {
+      viaRexAction.click();
+    });
     assertNockRequest(autocompleteScope);
     assertNockRequest(resolveTracesScope);
-    assertNockRequest(scope, done);
+    assertNockRequest(scope);
+    done();
   });
 
   test('Can restart a single trace via customized remote execution', async (done) => {
@@ -334,10 +352,11 @@ describe('With tracer installed', () => {
     await patientlyWaitFor(() => {
       const traceNameNode = getByText(firstTrace.helper);
       traceActionMenu = actionMenuToTheRightOf(traceNameNode);
-      expect(traceActionMenu).toHaveAttribute('aria-label', 'Actions');
+      expect(traceActionMenu).toHaveAttribute('aria-label', 'Kebab toggle');
+    });
+    await act(async () => {
+      fireEvent.click(traceActionMenu);
     });
-    fireEvent.click(traceActionMenu);
-
     let viaCustomizedRexAction;
     await patientlyWaitFor(() => {
       viaCustomizedRexAction = getByText('Restart via customized remote execution');
@@ -349,7 +368,8 @@ describe('With tracer installed', () => {
     );
 
     assertNockRequest(autocompleteScope);
-    assertNockRequest(scope, done);
+    assertNockRequest(scope);
+    done();
   });
 
   test('Can bulk restart traces via customized remote execution', async (done) => {
@@ -372,7 +392,9 @@ describe('With tracer installed', () => {
     expect(traceCheckbox.checked).toEqual(true);
 
     const actionMenu = getByLabelText('bulk_actions');
-    fireEvent.click(actionMenu);
+    await act(async () => {
+      fireEvent.click(actionMenu);
+    });
     const viaCustomizedRexAction = queryByText('Restart via customized remote execution');
 
     expect(viaCustomizedRexAction).toBeInTheDocument();
@@ -382,7 +404,8 @@ describe('With tracer installed', () => {
     );
 
     assertNockRequest(autocompleteScope);
-    assertNockRequest(scope, done);
+    assertNockRequest(scope);
+    done();
   });
 
   describe('Remote execution URL helper logic', () => {
@@ -410,7 +433,8 @@ describe('With tracer installed', () => {
       expect(traceCheckbox.disabled).toEqual(true);
 
       assertNockRequest(autocompleteScope);
-      assertNockRequest(scope, done);
+      assertNockRequest(scope);
+      done();
     });
   });
 });
@@ -453,7 +477,8 @@ describe('Without tracer installed', () => {
     fireEvent.click(enableTracesModalButton);
     expect(queryByText('via remote execution')).not.toBeInTheDocument();
 
-    assertNockRequest(jobInvocationScope, done);
+    assertNockRequest(jobInvocationScope);
+    done();
   });
 
   test('Detects if tracer package is not available to install', async () => {

data/webpack/components/extensions/HostDetails/hostDetailsHelpers.js

@@ -24,3 +24,6 @@ export const hasRequiredPermissions = (requiredPermissions = [], userPermissions
 
 export const missingRequiredPermissions = (requiredPermissions = [], userPermissions) =>
   !hasRequiredPermissions(requiredPermissions, userPermissions);
+
+export const hostIsImageMode = ({ hostDetails }) =>
+    hostDetails?.content_facet_attributes?.bootc_booted_image;

data/webpack/components/extensions/Hosts/BulkActions/BulkErrataWizard/04_Review.js

@@ -1,8 +1,22 @@
 import React, { useContext, useState } from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { FormattedMessage } from 'react-intl';
-import { TreeView, Button, Text, TextContent, TextVariants, Flex, FlexItem, Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core';
-import { useWizardContext } from '@patternfly/react-core/next';
+import {
+  TreeView,
+  Button,
+  Text,
+  TextContent,
+  TextVariants,
+  Flex,
+  FlexItem,
+  useWizardContext,
+} from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+} from '@patternfly/react-core/deprecated';
+
 import { CaretDownIcon } from '@patternfly/react-icons';
 import { BulkErrataWizardContext } from './BulkErrataWizard';
 

data/webpack/components/extensions/Hosts/BulkActions/BulkErrataWizard/04_ReviewFooter.js

@@ -1,7 +1,11 @@
 import React, { useContext } from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { Button } from '@patternfly/react-core';
-import { WizardFooterWrapper, useWizardContext } from '@patternfly/react-core/next';
+import {
+  Button,
+  WizardFooterWrapper,
+  useWizardContext,
+} from '@patternfly/react-core';
+
 import { BulkErrataWizardContext } from './BulkErrataWizard';
 import { dropdownOptions } from './04_Review';
 import { errataInstallUrl } from '../../../HostDetails/Tabs/customizedRexUrlHelpers';

data/webpack/components/extensions/Hosts/BulkActions/BulkErrataWizard/BulkErrataWizard.js

@@ -1,5 +1,9 @@
 import React, { useState, createContext, useContext } from 'react';
-import { Wizard, WizardHeader, WizardStep } from '@patternfly/react-core/next';
+import {
+  Wizard,
+  WizardHeader,
+  WizardStep,
+} from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
 import { useBulkSelect } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';

data/webpack/components/extensions/Hosts/BulkActions/BulkPackagesWizard/04_Review.js

@@ -1,8 +1,22 @@
 import React, { useContext, useState } from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { FormattedMessage } from 'react-intl';
-import { TreeView, Button, Text, TextContent, TextVariants, Flex, FlexItem, Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core';
-import { useWizardContext } from '@patternfly/react-core/next';
+import {
+  TreeView,
+  Button,
+  Text,
+  TextContent,
+  TextVariants,
+  Flex,
+  FlexItem,
+  useWizardContext, /* data-codemods */
+} from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+} from '@patternfly/react-core/deprecated';
+
 import { CaretDownIcon } from '@patternfly/react-icons';
 import { BulkPackagesWizardContext, UPGRADE_ALL, INSTALL, REMOVE, UPGRADE } from './BulkPackagesWizard';
 

data/webpack/components/extensions/Hosts/BulkActions/BulkPackagesWizard/04_ReviewFooter.js

@@ -1,7 +1,11 @@
 import React, { useContext } from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { Button } from '@patternfly/react-core';
-import { WizardFooterWrapper, useWizardContext } from '@patternfly/react-core/next';
+import {
+  Button,
+  WizardFooterWrapper,
+  useWizardContext,
+} from '@patternfly/react-core';
+
 import { BulkPackagesWizardContext, INSTALL, UPGRADE, UPGRADE_ALL, REMOVE } from './BulkPackagesWizard';
 import { dropdownOptions } from './04_Review';
 import { katelloPackageInstallBySearchUrl, packagesUpdateUrl, katelloPackageRemoveBySearchUrl } from '../../../HostDetails/Tabs/customizedRexUrlHelpers';

data/webpack/components/extensions/Hosts/BulkActions/BulkPackagesWizard/BulkPackagesWizard.js

@@ -1,6 +1,15 @@
 import React, { useState, createContext, useContext } from 'react';
-import { Radio, Text, TextVariants, TextContent, Alert } from '@patternfly/react-core';
-import { Wizard, WizardHeader, WizardStep } from '@patternfly/react-core/next';
+import {
+  Radio,
+  Text,
+  TextVariants,
+  TextContent,
+  Alert,
+  Wizard,
+  WizardHeader,
+  WizardStep,
+} from '@patternfly/react-core';
+
 import { translate as __ } from 'foremanReact/common/I18n';
 import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
 import { useBulkSelect } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
@@ -191,6 +200,7 @@ const BulkPackagesWizard = () => {
               label={__('Upgrade all packages')}
               id="r1-upgrade-all-packages"
               ouiaId="r1-upgrade-all-packages"
+              style={{ marginTop: '0rem' }}
             />
             <Radio
               isChecked={selectedAction === UPGRADE}
@@ -199,6 +209,7 @@ const BulkPackagesWizard = () => {
               label={__('Upgrade packages')}
               id="r2-upgrade-packages"
               ouiaId="r2-upgrade-packages"
+              style={{ marginTop: '0rem' }}
             />
             <Radio
               isChecked={selectedAction === INSTALL}
@@ -207,6 +218,7 @@ const BulkPackagesWizard = () => {
               label={__('Install packages')}
               id="r3-install-packages"
               ouiaId="r3-install-packages"
+              style={{ marginTop: '0rem' }}
             />
             <Radio
               isChecked={selectedAction === REMOVE}
@@ -215,6 +227,7 @@ const BulkPackagesWizard = () => {
               label={__('Remove packages')}
               id="r4-remove-packages"
               ouiaId="r4-remove-packages"
+              style={{ marginTop: '0rem' }}
             />
           </div>
         </WizardStep>

data/webpack/components/extensions/Hosts/BulkActions/HostReview.js

@@ -105,7 +105,7 @@ const HostReview = ({
           {__('Review hosts')}
         </Text>
         <Text ouiaId="mpw-step-3-content" component={TextVariants.p}>
-          {__('Review and optionally exclude hosts from your selection.')}
+          {__('Review and optionally exclude hosts from your selection. Note that package actions on any image mode hosts will be transient and lost on the next reboot.')}
         </Text>
       </TextContent>
       {selectedCount === 0 && hasInteracted && (

data/webpack/components/extensions/Hosts/BulkActions/__tests__/bulkChangeHostCVModal.test.js

@@ -128,6 +128,7 @@ test('Select an env > call CV API > select a CV > Save button is enabled', async
   expect(saveButton).toBeInTheDocument();
   expect(saveButton).toHaveAttribute('aria-disabled', 'false');
 
-  assertNockRequest(contentViewsScope, done);
+  assertNockRequest(contentViewsScope);
+  done();
   act(done);
 });

data/webpack/components/extensions/Hosts/FontAwesomeImageModeIcon.js

@@ -47,7 +47,7 @@ FontAwesomeImageModeIcon.propTypes = {
 };
 
 FontAwesomeImageModeIcon.defaultProps = {
-  fill: 'var(--pf-global--palette--black-600)',
+  fill: 'var(--pf-v5-global--palette--black-600)',
   margin: '-2px',
   title: __('Image mode'),
 };

data/webpack/components/extensions/Hosts/ImageModeHostAlert.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import {
+  Alert,
+} from '@patternfly/react-core';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+
+const ImageModeHostAlert = () => (
+  <Alert style={{ alignItems: 'center' }} className="margin-16-24" title={__('Package actions will be transient')} variant="info" ouiaId="image-mode-alert-info">
+    <p>{__('Any updates to image mode host(s) will be lost on the next reboot.')}</p>
+  </Alert>
+);
+
+export default ImageModeHostAlert;

data/webpack/components/extensions/RegistrationCommands/__tests__/__snapshots__/ActivationKeys.test.js.snap

@@ -3,21 +3,6 @@
 exports[`ActivationKeys renders 1`] = `
 <FormGroup
   fieldId="activation_keys_field"
-  helperText="From host group: "
-  helperTextInvalid={
-    <a
-      href="/activation_keys/new"
-    >
-      Create new activation key
-    </a>
-  }
-  helperTextInvalidIcon={
-    <ExclamationCircleIcon
-      color="currentColor"
-      noVerticalAlign={false}
-      size="sm"
-    />
-  }
   isRequired={true}
   label="Activation Keys"
   labelIcon={
@@ -26,7 +11,6 @@ exports[`ActivationKeys renders 1`] = `
     />
   }
   onFocus={[Function]}
-  validated="error"
 >
   <Select
     aria-describedby=""
@@ -70,7 +54,6 @@ exports[`ActivationKeys renders 1`] = `
     ouiaSafe={true}
     placeholderText="No Activation keys to select"
     position="left"
-    removeFindDomNode={false}
     removeSelectionAriaLabel="Remove"
     selections={Array []}
     shouldResetOnSelect={true}
@@ -85,5 +68,19 @@ exports[`ActivationKeys renders 1`] = `
     width=""
     zIndex={9999}
   />
+  <FormHelperText>
+    <HelperText>
+      <HelperTextItem
+        icon={<ExclamationCircleIcon />}
+        variant="error"
+      >
+        <a
+          href="/activation_keys/new"
+        >
+          Create new activation key
+        </a>
+      </HelperTextItem>
+    </HelperText>
+  </FormHelperText>
 </FormGroup>
 `;

data/webpack/components/extensions/RegistrationCommands/__tests__/__snapshots__/Force.test.js.snap

@@ -6,10 +6,10 @@ exports[`Force renders 1`] = `
 >
   <Checkbox
     className=""
-    component="div"
     id="reg_katello_force"
     isChecked={false}
     isDisabled={false}
+    isLabelWrapped={false}
     isRequired={false}
     isValid={true}
     label={

data/webpack/components/extensions/RegistrationCommands/__tests__/__snapshots__/IgnoreSubmanErrors.test.js.snap

@@ -6,10 +6,10 @@ exports[`IgnoreSubmanErrors renders 1`] = `
 >
   <Checkbox
     className=""
-    component="div"
     id="reg_katello_ignore"
     isChecked={false}
     isDisabled={false}
+    isLabelWrapped={false}
     isRequired={false}
     isValid={true}
     label={

data/webpack/components/extensions/RegistrationCommands/fields/ActivationKeys.js

@@ -1,21 +1,14 @@
 /* eslint-disable max-len, react/forbid-prop-types */
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import {
-  FormGroup,
-  Select,
-  SelectOption,
-  SelectVariant,
-} from '@patternfly/react-core';
+import { FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 
 import LabelIcon from 'foremanReact/components/common/LabelIcon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
 
-import {
-  validateAKField,
-  akHasValidValue,
-} from '../RegistrationCommandsPageHelpers';
+import { validateAKField, akHasValidValue } from '../RegistrationCommandsPageHelpers';
 
 const ActivationKeys = ({
   activationKeys,
@@ -34,11 +27,7 @@ const ActivationKeys = ({
     onChange({ activationKeys: keys });
     handleInvalidField(
       'Activation Keys',
-      akHasValidValue(
-        hostGroupId,
-        pluginValues?.activationKeys,
-        hostGroupActivationKeys,
-      ),
+      akHasValidValue(hostGroupId, pluginValues?.activationKeys, hostGroupActivationKeys),
     );
   };
 
@@ -54,41 +43,24 @@ const ActivationKeys = ({
   useEffect(() => {
     handleInvalidField(
       'Activation Keys',
-      akHasValidValue(
-        hostGroupId,
-        pluginValues?.activationKeys,
-        hostGroupActivationKeys,
-      ),
+      akHasValidValue(hostGroupId, pluginValues?.activationKeys, hostGroupActivationKeys),
     );
   }, [handleInvalidField, hostGroupId, hostGroupActivationKeys, pluginValues]);
 
+  const isError =
+    validateAKField(
+      hasInteraction,
+      hostGroupId,
+      activationKeys,
+      pluginValues?.activationKeys,
+      hostGroupActivationKeys,
+    ) === 'error';
   return (
     <FormGroup
       onFocus={() => setHasInteraction(true)}
       label={__('Activation Keys')}
       fieldId="activation_keys_field"
-      helperText={
-        hostGroupActivationKeys &&
-        sprintf('From host group: %s', hostGroupActivationKeys)
-      }
-      helperTextInvalid={
-        activationKeys?.length === 0 ? (
-          <a href="/activation_keys/new">{__('Create new activation key')}</a>
-        ) : (
-          __('No Activation Keys selected')
-        )
-      }
-      helperTextInvalidIcon={<ExclamationCircleIcon />}
-      labelIcon={
-        <LabelIcon text={__('Activation key(s) to use during registration')} />
-      }
-      validated={validateAKField(
-        hasInteraction,
-        hostGroupId,
-        activationKeys,
-        pluginValues?.activationKeys,
-        hostGroupActivationKeys,
-      )}
+      labelIcon={<LabelIcon text={__('Activation key(s) to use during registration')} />}
       isRequired
     >
       <Select
@@ -116,9 +88,7 @@ const ActivationKeys = ({
         id="activation_keys_field"
         className="without_select2"
         isDisabled={isLoading || activationKeys?.length === 0}
-        placeholderText={
-          activationKeys?.length === 0 ? __('No Activation keys to select') : ''
-        }
+        placeholderText={activationKeys?.length === 0 ? __('No Activation keys to select') : ''}
       >
         {activationKeys &&
           activationKeys.map(ack => (
@@ -129,6 +99,28 @@ const ActivationKeys = ({
             />
           ))}
       </Select>
+      {isError && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant="error" icon={<ExclamationCircleIcon />}>
+              {activationKeys?.length === 0 ? (
+                <a href="/activation_keys/new">{__('Create new activation key')}</a>
+              ) : (
+                __('No Activation Keys selected')
+              )}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+      {!isError && hostGroupActivationKeys && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>
+              {sprintf('From host group: %s', hostGroupActivationKeys)}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
     </FormGroup>
   );
 };
@@ -136,10 +128,7 @@ const ActivationKeys = ({
 ActivationKeys.propTypes = {
   activationKeys: PropTypes.array,
   selectedKeys: PropTypes.array,
-  hostGroupActivationKeys: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.array,
-  ]),
+  hostGroupActivationKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   hostGroupId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   pluginValues: PropTypes.shape({
     activationKeys: PropTypes.array,

data/webpack/containers/Application/overrides.scss

@@ -122,7 +122,7 @@ html .pagination-pf-pagesize.btn-group {
 }
 
 // Modal sizing fix
-.pf-l-bullseye .pf-c-modal-box {
+.pf-v5-l-bullseye .pf-v5-c-modal-box {
   margin-top: 76px;
   max-height: calc(100vh - 76px);
 
@@ -137,11 +137,11 @@ html .pagination-pf-pagesize.btn-group {
   margin: 0 8px;
 
   svg {
-    color: var(--pf-global--Color--200)
+    color: var(--pf-v5-global--Color--200)
   }
 
   svg:hover {
-    color: var(--pf-global--Color--100)
+    color: var(--pf-v5-global--Color--100)
   }
 }
 
@@ -168,24 +168,24 @@ html .pagination-pf-pagesize.btn-group {
 
 .primary-detail-border {
   border-top: 0.2px;
-  border-top-color: var(--pf-c-table--BorderColor);
+  border-top-color: var(--pf-v5-c-table--BorderColor);
   border-top-style: inset;
 }
 
 .primary-detail-stack-items-border {
   border-bottom: 0.2px;
-  border-bottom-color: var(--pf-c-table--BorderColor);
+  border-bottom-color: var(--pf-v5-c-table--BorderColor);
   border-bottom-style: inset;
 }
 
 .border-left {
   border-left: 0.2px;
-  border-left-color: var(--pf-c-table--BorderColor);
+  border-left-color: var(--pf-v5-c-table--BorderColor);
   border-left-style: inset;
 }
 
 .border-right {
   border-right: 0.2px;
-  border-right-color: var(--pf-c-table--BorderColor);
+  border-right-color: var(--pf-v5-c-table--BorderColor);
   border-right-style: inset;
 }