katello 4.16.3 → 4.17.0.rc1

data/webpack/scenes/ContentViews/Details/Versions/Delete/RemoveSteps/CVEnvironmentSelectionForm.js

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-import { Alert, Checkbox, EmptyState, EmptyStateVariant, Title, EmptyStateBody, AlertActionCloseButton } from '@patternfly/react-core';
-import { TableVariant, TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import { Alert, Checkbox, EmptyState, EmptyStateVariant, EmptyStateBody, AlertActionCloseButton, EmptyStateHeader } from '@patternfly/react-core';
+import { TableVariant, Table /* data-codemods */, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
 import { translate as __ } from 'foremanReact/common/I18n';
 import DeleteContext from '../DeleteContext';
 
@@ -25,9 +25,15 @@ const CVEnvironmentSelectionForm = () => {
 
   // Based on env selected for removal, decide if we need to reassign hosts and activation keys.
   useDeepCompareEffect(() => {
-    const selectedEnv = versionEnvironments.filter(env => selectedEnvSet.has(env.id));
-    setAffectedActivationKeys(!!(selectedEnv.filter(env => env.activation_key_count > 0).length));
-    setAffectedHosts(!!(selectedEnv.filter(env => env.host_count > 0).length));
+    const selectedEnvironments = versionEnvironments.filter(env => selectedEnvSet.has(env.id));
+
+    const needsHostReassignment = selectedEnvironments.some(env =>
+      (env.host_count || 0) > (env.multi_env_host_count || 0));
+    setAffectedHosts(needsHostReassignment);
+
+    const needsAKReassignment = selectedEnvironments.some(env =>
+      (env.activation_key_count || 0) > (env.multi_env_ak_count || 0));
+    setAffectedActivationKeys(needsAKReassignment);
   }, [setAffectedActivationKeys, setAffectedHosts,
     versionEnvironments, selectedEnvSet, selectedEnvSet.size]);
 
@@ -73,12 +79,12 @@ const CVEnvironmentSelectionForm = () => {
               id="delete_version"
               label={__('Delete version')}
               isChecked={removeDeletionFlow}
-              onChange={checked => setRemoveDeletionFlow(checked)}
+              onChange={(_event, checked) => setRemoveDeletionFlow(checked)}
               style={{ margin: 0 }}
             />
           </Alert>)}
       {(versionEnvironments.length !== 0) &&
-        <TableComposable ouiaId="version-delete-env-table" variant={TableVariant.compact}>
+        <Table ouiaId="version-delete-env-table" variant={TableVariant.compact}>
           <Thead>
             <Tr ouiaId="version-delete-env-table-header">
               <Td
@@ -86,7 +92,7 @@ const CVEnvironmentSelectionForm = () => {
                   rowIndex: 0,
                   onSelect: onSelectAll,
                   isSelected: areAllSelected() || deleteFlow || removeDeletionFlow,
-                  disable: deleteFlow || removeDeletionFlow,
+                  isDisabled: deleteFlow || removeDeletionFlow,
                 }}
               />
               {columnHeaders.map(col =>
@@ -106,7 +112,7 @@ const CVEnvironmentSelectionForm = () => {
                       rowIndex,
                       onSelect: (event, isSelected) => onSelect(event, isSelected, id),
                       isSelected: selectedEnvSet.has(id) || deleteFlow || removeDeletionFlow,
-                      disable: deleteFlow || removeDeletionFlow,
+                      isDisabled: deleteFlow || removeDeletionFlow,
                     }}
                   />
                   <Td>
@@ -118,12 +124,10 @@ const CVEnvironmentSelectionForm = () => {
               ))
             }
           </Tbody>
-        </TableComposable>}
+        </Table>}
       {(versionEnvironments.length === 0) &&
         <EmptyState variant={EmptyStateVariant.xs}>
-          <Title headingLevel="h4" size="md" ouiaId="not-promoted-title">
-            {__('This version has not been promoted to any environments.')}
-          </Title>
+          <EmptyStateHeader titleText={<>{__('This version has not been promoted to any environments.')}</>} headingLevel="h4" />
           <EmptyStateBody>
             {versionEnvironmentsEmptyInfo}
           </EmptyStateBody>

data/webpack/scenes/ContentViews/Details/Versions/Delete/RemoveSteps/CVReassignActivationKeysForm.js

@@ -1,7 +1,12 @@
 import React, { useState, useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-import { ExpandableSection, SelectOption, Alert, AlertActionCloseButton } from '@patternfly/react-core';
+import {
+  ExpandableSection, Alert, AlertActionCloseButton,
+} from '@patternfly/react-core';
+import {
+  SelectOption,
+} from '@patternfly/react-core/deprecated';
 import { STATUS } from 'foremanReact/constants';
 import { translate as __ } from 'foremanReact/common/I18n';
 import EnvironmentPaths from '../../../../components/EnvironmentPaths/EnvironmentPaths';
@@ -75,7 +80,7 @@ const CVReassignActivationKeysForm = () => {
     contentViewsInEnvError, selectedEnvForAK, setSelectedCVForAK, setSelectedCVNameForAK,
     cvInEnvLoading, selectedCVForAK, cvId, versionEnvironments, selectedEnvSet]);
 
-  const multiCVWarning = activationKeysResponse?.results?.some?.(key =>
+  const multiCVInfo = activationKeysResponse?.results?.some?.(key =>
     key.multi_content_view_environment);
 
   const fetchSelectedCVName = (id) => {
@@ -112,12 +117,12 @@ const CVReassignActivationKeysForm = () => {
 
   return (
     <>
-      {!alertDismissed && multiCVWarning && (
+      {!alertDismissed && multiCVInfo && (
         <Alert
-          ouiaId="multi-cv-warning-alert"
-          variant="warning"
+          ouiaId="multi-cv-info-alert"
+          variant="info"
           isInline
-          title={__('Warning')}
+          title={__('Multi-environment activation key(s) affected')}
           actionClose={<AlertActionCloseButton onClose={() => setAlertDismissed(true)} />}
         >
           <p>{multiCVRemovalInfo}</p>
@@ -145,7 +150,7 @@ const CVReassignActivationKeysForm = () => {
         toggleText={showActivationKeys ?
           'Hide activation keys' :
           'Show activation keys'}
-        onToggle={expanded => setShowActivationKeys(expanded)}
+        onToggle={(_event, expanded) => setShowActivationKeys(expanded)}
         isExpanded={showActivationKeys}
       >
         <AffectedActivationKeys

data/webpack/scenes/ContentViews/Details/Versions/Delete/RemoveSteps/CVReassignHostsForm.js

@@ -1,9 +1,11 @@
 import React, { useState, useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-import { ExpandableSection, SelectOption, Alert, AlertActionCloseButton } from '@patternfly/react-core';
+import { ExpandableSection, Alert, AlertActionCloseButton } from '@patternfly/react-core';
+import { SelectOption } from '@patternfly/react-core/deprecated';
 import { STATUS } from 'foremanReact/constants';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { FormattedMessage } from 'react-intl';
 import EnvironmentPaths from '../../../../components/EnvironmentPaths/EnvironmentPaths';
 import getContentViews from '../../../../ContentViewsActions';
 import { selectContentViewError, selectContentViews, selectContentViewStatus } from '../../../../ContentViewSelectors';
@@ -12,6 +14,7 @@ import AffectedHosts from '../affectedHosts';
 import DeleteContext from '../DeleteContext';
 import ContentViewSelect from '../../../../components/ContentViewSelect/ContentViewSelect';
 import { getCVPlaceholderText, shouldDisableCVSelect } from '../../../../components/ContentViewSelect/helpers';
+import { selectEnvironmentPaths } from '../../../../components/EnvironmentPaths/EnvironmentPathSelectors';
 
 const CVReassignHostsForm = () => {
   const dispatch = useDispatch();
@@ -28,8 +31,40 @@ const CVReassignHostsForm = () => {
   } = useContext(DeleteContext);
   const [alertDismissed, setAlertDismissed] = useState(false);
   const hostResponse = useSelector(selectCVHosts);
+  const environmentPathResponse = useSelector(state => selectEnvironmentPaths(state));
 
-  const multiCVWarning = hostResponse?.results?.some?.(host =>
+  const contentSourceIds = new Set((hostResponse?.results || [])
+    .map(host => host.content_facet_attributes?.content_source_id)
+    .filter(id => id));
+
+  const lifecycleEnvironments = environmentPathResponse?.results?.map(path =>
+    path.environments).flat() || [];
+
+  const enabledLifecycleEnvironmentIds = new Set();
+
+  if (lifecycleEnvironments) {
+    lifecycleEnvironments.forEach((env) => {
+      if (env.capsules) {
+        env.capsules.forEach((capsule) => {
+          if (contentSourceIds.has(capsule.id) && capsule.lifecycle_environments) {
+            capsule.lifecycle_environments.forEach((le) => {
+              enabledLifecycleEnvironmentIds.add(le.id);
+            });
+          }
+        });
+      }
+    });
+  }
+
+  const disabledEnvs = enabledLifecycleEnvironmentIds.size
+    ? lifecycleEnvironments.filter(env => !enabledLifecycleEnvironmentIds.has(env.id))
+    : [];
+
+  const showAlert = disabledEnvs.length > 0;
+
+  const affectedHostIds = (hostResponse?.results || []).map(host => host.id).join(',');
+
+  const multiCVInfo = hostResponse?.results?.some?.(host =>
     host.content_facet_attributes?.multi_content_view_environment);
 
   const multiCVRemovalInfo = __('This content view version is used in one or more multi-environment hosts. The version will simply be removed from the multi-environment hosts. The content view and lifecycle environment you select here will only apply to single-environment hosts. See hammer activation-key --help for more details.');
@@ -111,23 +146,45 @@ const CVReassignHostsForm = () => {
 
   return (
     <>
-      {!alertDismissed && multiCVWarning && (
+      {!alertDismissed && multiCVInfo && (
         <Alert
-          ouiaId="multi-cv-warning-alert"
-          variant="warning"
+          ouiaId="multi-cv-info-alert"
+          variant="info"
           isInline
-          title={__('Warning')}
+          title={__('Multi-environment host(s) affected')}
           actionClose={<AlertActionCloseButton onClose={() => setAlertDismissed(true)} />}
         >
           <p>{multiCVRemovalInfo}</p>
         </Alert>
       )}
+      {showAlert && (
+        <Alert
+          variant="info"
+          ouiaId="disabled-environments-alert"
+          isInline
+          title={__('Some environments are disabled because they are not associated with all of the affected hosts\' content sources.')}
+          style={{ marginBottom: '1rem' }}
+        >
+          <FormattedMessage
+            id="hosts.changeContentSourcePrompt"
+            defaultMessage="To enable them, add the environment to the hosts' content sources, or {link}."
+            values={{
+              link: (
+                <a href={`/change_host_content_source?search=id ^ (${affectedHostIds})`}>
+                  {__('assign a new content source to the hosts')}
+                </a>
+              ),
+            }}
+          />
+        </Alert>
+      )}
       <EnvironmentPaths
         userCheckedItems={selectedEnvForHost}
         setUserCheckedItems={setSelectedEnvForHost}
         publishing={false}
         headerText={__('Select lifecycle environment')}
         multiSelect={false}
+        enabledLifecycleEnvironmentIds={enabledLifecycleEnvironmentIds}
       />
       <ContentViewSelect
         onClear={onClear}
@@ -146,7 +203,7 @@ const CVReassignHostsForm = () => {
       </ContentViewSelect>
       <ExpandableSection
         toggleText={showHosts ? 'Hide hosts' : 'Show hosts'}
-        onToggle={expanded => setShowHosts(expanded)}
+        onToggle={(_event, expanded) => setShowHosts(expanded)}
         isExpanded={showHosts}
       >
         <AffectedHosts

data/webpack/scenes/ContentViews/Details/Versions/Delete/RemoveSteps/CVVersionRemoveReview.js

@@ -1,24 +1,24 @@
 import React, { useContext, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { Alert, Flex, FlexItem, Label, AlertActionCloseButton } from '@patternfly/react-core';
+import { Alert, Flex, FlexItem, Label, AlertActionCloseButton, ExpandableSection } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { FormattedMessage } from 'react-intl';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { selectCVActivationKeys, selectCVHosts, selectCVVersions } from '../../../ContentViewDetailSelectors';
+import { selectCVVersions } from '../../../ContentViewDetailSelectors';
 import DeleteContext from '../DeleteContext';
 import WizardHeader from '../../../../components/WizardHeader';
+import AffectedHosts from '../affectedHosts';
+import AffectedActivationKeys from '../affectedActivationKeys';
 
 const CVVersionRemoveReview = () => {
   const [alertDismissed, setAlertDismissed] = useState(false);
+  const [showHosts, setShowHosts] = useState(false);
+  const [showAKs, setShowAKs] = useState(false);
   const {
-    cvId, versionIdToRemove, versionNameToRemove, selectedEnvSet,
+    cvId, versionEnvironments, versionIdToRemove, versionNameToRemove, selectedEnvSet,
     selectedEnvForAK, selectedCVNameForAK, selectedCVNameForHosts,
-    selectedEnvForHost, affectedActivationKeys, affectedHosts, deleteFlow, removeDeletionFlow,
+    selectedEnvForHost, deleteFlow, removeDeletionFlow,
   } = useContext(DeleteContext);
-  const activationKeysResponse = useSelector(state => selectCVActivationKeys(state, cvId));
-  const hostsResponse = useSelector(state => selectCVHosts(state, cvId));
-  const { results: hostResponse = [] } = hostsResponse || {};
-  const { results: akResponse = [] } = activationKeysResponse || {};
   const cvVersions = useSelector(state => selectCVVersions(state, cvId));
   const versionDeleteInfo = __(`Version ${versionNameToRemove} will be deleted from all environments. It will no longer be available for promotion.`);
   const removalNotice = __(`Version ${versionNameToRemove} will be removed from the environments listed below, and will remain available for later promotion. ` +
@@ -29,16 +29,19 @@ const CVVersionRemoveReview = () => {
     .flatMap(cv => cv.content_view_environments || [])
     .filter(env => selectedEnvSet.has(env.environment_id));
 
-  const multiCVHosts = hostResponse?.filter(host =>
-    host.content_facet_attributes?.multi_content_view_environment) || [];
-  const multiCVHostsCount = multiCVHosts.length;
+  const selectedEnvs = versionEnvironments.filter(env => selectedEnvSet.has(env.id));
 
-  const singleCVHostsCount = (hostResponse?.length || 0) - multiCVHostsCount;
+  const hostCount = selectedEnvs.reduce((sum, env) =>
+    sum + (env.host_count || 0), 0);
+  const multiCVHostsCount = selectedEnvs.reduce((sum, env) =>
+    sum + (env.multi_env_host_count || 0), 0);
+  const singleCVHostsCount = hostCount - multiCVHostsCount;
 
-  const multiCVActivationKeys = akResponse.filter(key => key.multi_content_view_environment);
-  const multiCVActivationKeysCount = multiCVActivationKeys.length;
-
-  const singleCVActivationKeysCount = akResponse.length - multiCVActivationKeysCount;
+  const akCount = selectedEnvs.reduce((sum, env) =>
+    sum + (env.activation_key_count || 0), 0);
+  const multiCVActivationKeysCount = selectedEnvs.reduce((sum, env) =>
+    sum + (env.multi_env_ak_count || 0), 0);
+  const singleCVActivationKeysCount = akCount - multiCVActivationKeysCount;
 
   return (
     <>
@@ -63,10 +66,10 @@ const CVVersionRemoveReview = () => {
           </Flex>
           <Flex>
             {selectedCVE?.map(({ environment_name: name, environment_id: id }) =>
-              <FlexItem key={name}><Label isTruncated color="purple" href={`/lifecycle_environments/${id}`}>{name}</Label></FlexItem>)}
+              <FlexItem key={name}><Label color="purple" href={`/lifecycle_environments/${id}`}>{name}</Label></FlexItem>)}
           </Flex>
         </>}
-      {affectedHosts &&
+      {hostCount > 0 &&
         <>
           <h3>{__('Content hosts')}</h3>
           {singleCVHostsCount > 0 && (
@@ -82,7 +85,7 @@ const CVVersionRemoveReview = () => {
                     plural: __('hosts'),
                     cvName: selectedCVNameForHosts,
                     envName: selectedEnvForHost[0] && (
-                      <Label isTruncated color="purple" href={`/lifecycle_environments/${selectedEnvForHost[0].id}`}>
+                      <Label color="purple" href={`/lifecycle_environments/${selectedEnvForHost[0].id}`}>
                         {selectedEnvForHost[0].name}
                       </Label>
                     ),
@@ -121,8 +124,22 @@ const CVVersionRemoveReview = () => {
               </FlexItem>
             </Flex>
           )}
+          <ExpandableSection
+            toggleText={showHosts ? 'Hide hosts' : 'Show hosts'}
+            onToggle={() => setShowHosts(prev => !prev)}
+            isExpanded={showHosts}
+          >
+            <AffectedHosts
+              {...{
+                cvId,
+                versionEnvironments,
+                selectedEnvSet,
+              }}
+              deleteCV={false}
+            />
+          </ExpandableSection>
         </>}
-      {affectedActivationKeys &&
+      {akCount > 0 &&
         <>
           <h3>{__('Activation keys')}</h3>
           {singleCVActivationKeysCount > 0 && (
@@ -138,7 +155,7 @@ const CVVersionRemoveReview = () => {
                     plural: __('activation keys'),
                     cvName: selectedCVNameForAK,
                     envName: selectedEnvForAK[0] && (
-                      <Label isTruncated color="purple" href={`/lifecycle_environments/${selectedEnvForAK[0].id}`}>
+                      <Label color="purple" href={`/lifecycle_environments/${selectedEnvForAK[0].id}`}>
                         {selectedEnvForAK[0].name}
                       </Label>
                     ),
@@ -177,6 +194,20 @@ const CVVersionRemoveReview = () => {
               </FlexItem>
             </Flex>
           )}
+          <ExpandableSection
+            toggleText={showAKs ? 'Hide activation keys' : 'Show activation keys'}
+            onToggle={() => setShowAKs(prev => !prev)}
+            isExpanded={showAKs}
+          >
+            <AffectedActivationKeys
+              {...{
+                cvId,
+                versionEnvironments,
+                selectedEnvSet,
+              }}
+              deleteCV={false}
+            />
+          </ExpandableSection>
         </>}
     </>
   );

data/webpack/scenes/ContentViews/Details/Versions/Delete/__tests__/cvVersionRemove.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
-import { nockInstance, assertNockRequest, mockAutocomplete, mockForemanAutocomplete } from '../../../../../../test-utils/nockWrapper';
+import { nockInstance, assertNockRequest, mockAutocomplete } from '../../../../../../test-utils/nockWrapper';
 import api, { foremanApi } from '../../../../../../services/api';
 import CONTENT_VIEWS_KEY from '../../../../ContentViewsConstants';
 import ContentViewVersions from '../../ContentViewVersions';
@@ -61,7 +61,8 @@ test('Can call API and show versions on page load', async (done) => {
     expect(getByText(`Version ${firstVersion.version}`)).toBeTruthy();
   });
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done);
+  assertNockRequest(scope);
+  done();
 });
 
 test('Can open Remove wizard and remove version from simple environment', async (done) => {
@@ -97,9 +98,9 @@ test('Can open Remove wizard and remove version from simple environment', async
     expect(getByText(`Version ${firstVersion.version}`)).toBeTruthy();
   });
   // Expand Row Action
-  expect(getAllByLabelText('Actions')[0]).toHaveAttribute('aria-expanded', 'false');
-  fireEvent.click(getAllByLabelText('Actions')[0]);
-  expect(getAllByLabelText('Actions')[0]).toHaveAttribute('aria-expanded', 'true');
+  expect(getAllByLabelText('Kebab toggle')[0]).toHaveAttribute('aria-expanded', 'false');
+  fireEvent.click(getAllByLabelText('Kebab toggle')[0]);
+  expect(getAllByLabelText('Kebab toggle')[0]).toHaveAttribute('aria-expanded', 'true');
   fireEvent.click(getByText('Remove from environments'));
   await patientlyWaitFor(() => {
     expect(getByText('Remove Version')).toBeInTheDocument();
@@ -115,13 +116,18 @@ test('Can open Remove wizard and remove version from simple environment', async
   assertNockRequest(scope);
   assertNockRequest(autocompleteScope);
   assertNockRequest(envPathRemovalScope);
-  assertNockRequest(versionRemovalScope, done);
+  assertNockRequest(versionRemovalScope);
+  done();
 });
 
 test('Can open Remove wizard and remove version from environment with hosts', async (done) => {
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const hostAutocompleteUrl = '/hosts/auto_complete_search';
-  const hostAutocompleteScope = mockForemanAutocomplete(nockInstance, hostAutocompleteUrl);
+  const hostAutocompleteScope = nockInstance
+    .get(foremanApi.getApiUrl(hostAutocompleteUrl))
+    .query(true)
+    .times(2)
+    .reply(200, []);
 
   const scope = nockInstance
     .get(cvVersions)
@@ -136,6 +142,7 @@ test('Can open Remove wizard and remove version from environment with hosts', as
   const hostScope = nockInstance
     .get(hostURL)
     .query(true)
+    .times(2)
     .reply(200, affectedHostData);
 
   const cVDropDownOptionsScope = nockInstance
@@ -166,9 +173,9 @@ test('Can open Remove wizard and remove version from environment with hosts', as
     expect(getByText(`Version ${firstVersion.version}`)).toBeTruthy();
   });
   // Expand Row Action
-  expect(getAllByLabelText('Actions')[0]).toHaveAttribute('aria-expanded', 'false');
-  fireEvent.click(getAllByLabelText('Actions')[0]);
-  expect(getAllByLabelText('Actions')[0]).toHaveAttribute('aria-expanded', 'true');
+  expect(getAllByLabelText('Kebab toggle')[0]).toHaveAttribute('aria-expanded', 'false');
+  fireEvent.click(getAllByLabelText('Kebab toggle')[0]);
+  expect(getAllByLabelText('Kebab toggle')[0]).toHaveAttribute('aria-expanded', 'true');
   fireEvent.click(getByText('Remove from environments'));
   await patientlyWaitFor(() => {
     expect(getByText('Remove Version')).toBeInTheDocument();
@@ -202,13 +209,18 @@ test('Can open Remove wizard and remove version from environment with hosts', as
   assertNockRequest(hostScope);
   assertNockRequest(cVDropDownOptionsScope);
   assertNockRequest(envPathRemovalScope);
-  assertNockRequest(versionRemovalScope, done);
+  assertNockRequest(versionRemovalScope);
+  done();
 });
 
 test('Can open Remove wizard and remove version from environment with activation keys', async (done) => {
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const akAutocompleteUrl = '/activation_keys/auto_complete_search';
-  const akAutocompleteScope = mockAutocomplete(nockInstance, akAutocompleteUrl);
+  const akAutocompleteScope = nockInstance
+    .get(api.getApiUrl(akAutocompleteUrl))
+    .query(true)
+    .times(2)
+    .reply(200, []);
 
   const scope = nockInstance
     .get(cvVersions)
@@ -223,6 +235,7 @@ test('Can open Remove wizard and remove version from environment with activation
   const activationKeysScope = nockInstance
     .get(activationKeyURL)
     .query(true)
+    .times(2)
     .reply(200, affectedActivationKeysData);
 
   const cVDropDownOptionsScope = nockInstance
@@ -253,9 +266,9 @@ test('Can open Remove wizard and remove version from environment with activation
     expect(getByText(`Version ${firstVersion.version}`)).toBeTruthy();
   });
   // Expand Row Action
-  expect(getAllByLabelText('Actions')[0]).toHaveAttribute('aria-expanded', 'false');
-  fireEvent.click(getAllByLabelText('Actions')[0]);
-  expect(getAllByLabelText('Actions')[0]).toHaveAttribute('aria-expanded', 'true');
+  expect(getAllByLabelText('Kebab toggle')[0]).toHaveAttribute('aria-expanded', 'false');
+  fireEvent.click(getAllByLabelText('Kebab toggle')[0]);
+  expect(getAllByLabelText('Kebab toggle')[0]).toHaveAttribute('aria-expanded', 'true');
   fireEvent.click(getByText('Remove from environments'));
   await patientlyWaitFor(() => {
     expect(getByText('Remove Version')).toBeInTheDocument();
@@ -290,5 +303,6 @@ test('Can open Remove wizard and remove version from environment with activation
   assertNockRequest(activationKeysScope);
   assertNockRequest(cVDropDownOptionsScope);
   assertNockRequest(envPathRemovalScope);
-  assertNockRequest(versionRemovalScope, done);
+  assertNockRequest(versionRemovalScope);
+  done();
 });

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetails.scss

@@ -1,13 +1,13 @@
 .content-view-header-content {
   padding-top: 24px;
 
-  .pf-c-content {
+  .pf-v5-c-content {
     dl {
       margin: 0;
     }
   }
 
-  .pf-l-flex {
+  .pf-v5-l-flex {
     padding-top: 24px;
   }
 }
@@ -17,30 +17,30 @@
   margin-top: 24px;
   display: flex;
 
-  .pf-c-tabs.pf-m-vertical {
+  .pf-v5-c-tabs.pf-m-vertical {
     max-width: 230px;
     border-right: 1px solid #d2d2d2;
 
-    .pf-c-tabs__item {
+    .pf-v5-c-tabs__item {
       margin-top: 0;
 
       button {
         align-items: center;
 
-        .pf-c-label__content {
+        .pf-v5-c-label__content {
           &::before {
             border: none;
           }
         }
       }
 
-      &.pf-m-current .pf-c-label__content {
+      &.pf-m-current .pf-v5-c-label__content {
         font-weight: bold;
       }
     }
   }
 
-  .pf-l-grid.pf-m-gutter {
+  .pf-v5-l-grid.pf-m-gutter {
     display: initial;
     width: 100%;
   }

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetailsHeader.js

@@ -11,11 +11,13 @@ import {
   Label,
   Flex,
   FlexItem,
+} from '@patternfly/react-core';
+import {
   Dropdown,
   DropdownItem,
   KebabToggle,
   DropdownPosition,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { useHistory } from 'react-router-dom';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { hasPermission } from '../../../helpers';
@@ -131,7 +133,7 @@ const ContentViewVersionDetailsHeader = ({
           style={{ width: 'inherit' }}
           position={DropdownPosition.right}
           toggle={
-            <KebabToggle onToggle={setDropdownOpen} id="toggle-dropdown" />
+            <KebabToggle onToggle={(_event, val) => setDropdownOpen(val)} id="toggle-dropdown" />
           }
           isOpen={dropdownOpen}
           dropdownItems={dropDownItems}
@@ -153,7 +155,7 @@ const ContentViewVersionDetailsHeader = ({
         <Flex>
           {environments?.map(({ name, id: envId }) => (
             <FlexItem key={name}>
-              <Label isTruncated color="purple" href={`/lifecycle_environments/${envId}`}>{name}</Label>
+              <Label color="purple" href={`/lifecycle_environments/${envId}`}>{name}</Label>
             </FlexItem>))}
         </Flex>
       </GridItem>

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetailsTable.js

@@ -9,10 +9,12 @@ import {
 } from 'react-redux';
 import {
   Grid,
+} from '@patternfly/react-core';
+import {
   Select,
   SelectOption,
   SelectVariant,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import {
   TableVariant,
   Tbody,
@@ -94,7 +96,7 @@ const ContentViewVersionDetailsTable = ({
         actionButtons={
           repoType &&
           <Select
-            onToggle={setOpen}
+            onToggle={(_event, val) => setOpen(val)}
             isOpen={open}
             ouiaId="repo-type-selector"
             variant={SelectVariant.single}

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/__tests__/ContentViewVersionDetails.test.js

@@ -108,7 +108,8 @@ test('Can show versions details - Components Tab', async (done) => {
 
   assertNockRequest(scope);
   assertNockRequest(scope);
-  assertNockRequest(componentScope, done);
+  assertNockRequest(componentScope);
+  done();
 });
 
 const testConfig = [
@@ -255,7 +256,8 @@ testConfig.forEach(({
     assertNockRequest(autocompleteScope);
     assertNockRequest(scope);
     assertNockRequest(tabScope);
-    assertNockRequest(scope, done);
+    assertNockRequest(scope);
+    done();
   }));
 
 test('Can change repository selector', async (done) => {
@@ -317,5 +319,6 @@ test('Can change repository selector', async (done) => {
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope);
   assertNockRequest(tabScope);
-  assertNockRequest(scope, done);
+  assertNockRequest(scope);
+  done();
 });

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/__tests__/ContentViewVersionDetailsEmpty.test.js

@@ -59,6 +59,7 @@ test('Can show versions detail header', async (done) => {
   await patientlyWaitFor(() => {
     expect(getByText(`Version ${version}`)).toBeInTheDocument();
   });
-  assertNockRequest(scope, done);
+  assertNockRequest(scope);
+  done();
   act(done);// Need to tell the test to stahp!
 });