katello 4.16.1 → 4.17.0.rc1

data/webpack/components/Table/EmptyStateMessage.js

@@ -4,10 +4,8 @@ import {
   EmptyStateBody,
   EmptyStateIcon,
   EmptyStateVariant,
-  EmptyStateSecondaryActions,
   Bullseye,
-  Title,
-  Button,
+  Button, EmptyStateActions, EmptyStateHeader, EmptyStateFooter,
 } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -77,7 +75,7 @@ const EmptyStateMessage = ({
   return (
     <Bullseye>
       <EmptyState
-        variant={happy ? EmptyStateVariant.xl : EmptyStateVariant.small}
+        variant={happy ? EmptyStateVariant.xl : EmptyStateVariant.sm}
       >
         <KatelloEmptyStateIcon
           error={!!error}
@@ -85,15 +83,14 @@ const EmptyStateMessage = ({
           customIcon={PlusCircleIcon}
           happyIcon={happy}
         />
-        <Title headingLevel="h2" size="lg" ouiaId="empty-state-title">
-          {emptyStateTitle}
-        </Title>
+        <EmptyStateHeader titleText={<>{emptyStateTitle}</>} headingLevel="h2" />
         <EmptyStateBody>
           {emptyStateBody}
         </EmptyStateBody>
-        {showPrimaryAction && actionButton}
-        {showSecondaryActionAnchor &&
-          <EmptyStateSecondaryActions>
+        <EmptyStateFooter>
+          {showPrimaryAction && actionButton}
+          {showSecondaryActionAnchor &&
+          <EmptyStateActions>
             <Button variant="link" ouiaId="empty-state-secondary-action-link">
               {extraTableProps.secondaryActionTargetBlank ? (
                 <a href={secondaryActionLink} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }} >{secondaryActionTitle}</a>
@@ -101,17 +98,18 @@ const EmptyStateMessage = ({
                 <a href={secondaryActionLink} style={{ textDecoration: 'none' }} >{secondaryActionTitle}</a>
               )}
             </Button>
-          </EmptyStateSecondaryActions>
+          </EmptyStateActions>
         }
 
-        {(!showSecondaryActionAnchor &&
+          {(!showSecondaryActionAnchor &&
           (showSecondaryActionButton || searchIsActive || !!filtersAreActive)) &&
-          <EmptyStateSecondaryActions>
+          <EmptyStateActions>
             <Button variant="link" onClick={handleClick} ouiaId="empty-state-secondary-action-router-link">
               {secondaryActionText}
             </Button>
-          </EmptyStateSecondaryActions>
+          </EmptyStateActions>
         }
+        </EmptyStateFooter>
       </EmptyState>
     </Bullseye>
   );

data/webpack/components/Table/MainTable.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
+
 import {
-  Table,
+  Table as TableDeprecated,
   TableHeader,
   TableBody,
-  TableComposable,
-} from '@patternfly/react-table';
+  Table,
+} from '@patternfly/react-table/deprecated';
 import { STATUS } from 'foremanReact/constants';
 import { isEqual } from 'lodash';
 import PropTypes from 'prop-types';
@@ -96,18 +97,18 @@ const MainTable = ({
   const tableProps = { cells, rows, ...extraTableProps };
   if (children) {
     return (
-      <TableComposable
+      <Table
         ouiaId="content-view-table-composable"
         aria-label="Content View Table"
         className="katello-pf4-table"
         {...extraTableProps}
       >
         {children}
-      </TableComposable>
+      </Table>
     );
   }
   return (
-    <Table
+    <TableDeprecated
       ouiaId="Content-View-table"
       aria-label="Content View Table"
       className="katello-pf4-table"
@@ -115,7 +116,7 @@ const MainTable = ({
     >
       <TableHeader />
       <TableBody />
-    </Table>
+    </TableDeprecated>
   );
 };
 

data/webpack/components/Table/MainTable.scss

@@ -1,18 +1,18 @@
 .katello-pf4-table {
-  .pf-c-dropdown.pf-m-align-right {
+  .pf-v5-c-dropdown.pf-m-align-right {
     width: 100%;
     justify-content: flex-end;
     display: flex;
   }
 
-  .pf-c-dropdown__menu {
+  .pf-v5-c-dropdown__menu {
     min-width: 0;
   }
-  .pf-c-wizard__footer {
+  .pf-v5-c-wizard__footer {
     z-index: 1;
   }
 
-  .pf-c-table tbody tr td {
+  .pf-v5-c-table tbody tr td {
     vertical-align: inherit;
   }
 

data/webpack/components/extensions/HostDetails/ActionsBar/index.js

@@ -1,6 +1,9 @@
 import React, { useContext } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+import {
+  DropdownItem,
+  DropdownSeparator,
+} from '@patternfly/react-core/deprecated';
 import { CubeIcon, UndoIcon, RedoIcon } from '@patternfly/react-icons';
 
 import { translate as __ } from 'foremanReact/common/I18n';

data/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/ChangeHostCVModal.js

@@ -229,7 +229,7 @@ const ChangeHostCVModal = ({
       </TextContent>
       <Checkbox
         isChecked={forceProfileUpload}
-        onChange={setForceProfileUpload}
+        onChange={(_event, val) => setForceProfileUpload(val)}
         label={__('Update the host immediately via remote execution')}
         id="force-profile-upload-checkbox"
         ouiaId="force-profile-upload-checkbox"

data/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/ContentViewDetailsCard.js

@@ -4,15 +4,17 @@ import {
   CardHeader,
   CardTitle,
   CardBody,
-  Dropdown,
-  DropdownItem,
   Flex,
   FlexItem,
   GridItem,
-  KebabToggle,
   Label,
   Tooltip,
 } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+} from '@patternfly/react-core/deprecated';
 import { FormattedMessage } from 'react-intl';
 
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
@@ -59,15 +61,15 @@ export const ContentViewEnvironmentDisplay = ({
             }}
           />}
         >
-          <Label isTruncated color="purple" href={`/lifecycle_environments/${lifecycleEnvironment.id}`}>{lifecycleEnvironment.name}</Label>
+          <Label color="purple" href={`/lifecycle_environments/${lifecycleEnvironment.id}`} style={{ marginRight: '2px' }}>{lifecycleEnvironment.name}</Label>
         </Tooltip>
-        <ContentViewIcon composite={contentView.composite} style={{ marginRight: '2px' }} position="left" />
+        <ContentViewIcon composite={contentView.composite} rolling={contentViewDefault || contentView.rolling} style={{ marginRight: '2px' }} position="left" />
         {contentViewDefault ? <span>{contentView.name}</span> :
         <a style={{ fontSize: '14px' }} href={`/content_views/${contentView.id}`}>
           {truncate(contentView.name)}
         </a>
         }
-        {!contentViewDefault &&
+        {!(contentViewDefault || contentView.rolling) &&
           <FlexItem>
             <a style={{ fontSize: '14px' }} href={urlBuilder(`content_views/${contentView.id}/versions/${contentViewVersionId}`, '')}>
               <FormattedMessage
@@ -89,6 +91,7 @@ ContentViewEnvironmentDisplay.propTypes = {
     name: PropTypes.string,
     id: PropTypes.number,
     composite: PropTypes.bool,
+    rolling: PropTypes.bool,
   }).isRequired,
   lifecycleEnvironment: PropTypes.shape({
     name: PropTypes.string,

data/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/__tests__/changeHostCVModal.test.js

@@ -126,6 +126,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/HostDetails/Cards/ContentViewDetailsCard/__tests__/contentViews.fixtures.json

@@ -14,6 +14,7 @@
     "results": [
         {
             "composite": false,
+            "rolling": false,
             "component_ids": [],
             "default": true,
             "version_count": 1,
@@ -92,6 +93,7 @@
         },
         {
             "composite": true,
+            "rolling": false,
             "component_ids": [
                 3
             ],
@@ -317,6 +319,7 @@
         },
         {
             "composite": false,
+            "rolling": false,
             "component_ids": [],
             "default": false,
             "version_count": 2,
@@ -440,4 +443,4 @@
             }
         }
     ]
-}
+}

data/webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.js

@@ -8,13 +8,15 @@ import {
   FlexItem,
   GridItem,
   ToggleGroup,
+  ToggleGroupItem,
+  Tooltip,
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { propsToCamelCase } from 'foremanReact/common/helpers';
 import PropTypes from 'prop-types';
-import { ChartPie } from '@patternfly/react-charts';
-import { ErrataMapper, ErrataToggleGroupItem } from '../../../../components/Errata';
+import { ChartPie, ChartTooltip } from '@patternfly/react-charts';
+import { ErrataMapper } from '../../../../components/Errata';
 import { hostIsRegistered } from '../hostDetailsHelpers';
 import { TranslatedAnchor } from '../../../Table/components/TranslatedPlural';
 import EmptyStateMessage from '../../../Table/EmptyStateMessage';
@@ -85,6 +87,9 @@ function HostInstallableErrata({
                   }}
                   width={250}
                   height={130}
+                  labelComponent={
+                    <ChartTooltip constrainToVisibleArea renderInPortal={false} />
+                  }
                 />
               </div>
             </div>
@@ -120,20 +125,32 @@ const ErrataOverviewCard = ({ hostDetails }) => {
             <CardTitle>{__('Errata')}</CardTitle>
             {neededErrata &&
               <ToggleGroup isCompact>
-                <ErrataToggleGroupItem
+                <ToggleGroupItem
                   text={__('Applicable')}
                   aria-label="Show applicable errata chart"
-                  tooltipText={__('Applicable errata apply to at least one package installed on the host.')}
+                  buttonId="applicableToggle"
                   isSelected={errataCategory === 'applicable'}
                   onChange={selected => selected && setErrataCategory('applicable')}
                 />
-                <ErrataToggleGroupItem
+                <ToggleGroupItem
                   text={__('Installable')}
                   aria-label="Show installable errata chart"
-                  tooltipText={__('Installable errata are applicable errata that are available in the host\'s assigned content view environments.')}
+                  buttonId="installableToggle"
                   isSelected={errataCategory === 'installable'}
                   onChange={selected => selected && setErrataCategory('installable')}
                 />
+                <Tooltip
+                  content={__('Applicable errata apply to at least one package installed on the host.')}
+                  position="top"
+                  enableFlip
+                  triggerRef={() => document.getElementById('applicableToggle')}
+                />
+                <Tooltip
+                  content={__('Installable errata are applicable errata that are available in the host\'s assigned content view environments.')}
+                  position="top"
+                  enableFlip
+                  triggerRef={() => document.getElementById('installableToggle')}
+                />
               </ToggleGroup>
             }
           </Flex>

data/webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.scss

@@ -1,5 +1,5 @@
 #errata-card {
-  .pf-c-empty-state {
+  .pf-v5-c-empty-state {
     margin-top: 0;
   }
   .piechart-overflow {

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsCard.js

@@ -6,14 +6,16 @@ import {
   CardHeader,
   CardTitle,
   CardBody,
-  Dropdown,
   ExpandableSection,
-  KebabToggle,
   Flex,
   FlexItem,
   GridItem,
-  DropdownItem,
 } from '@patternfly/react-core';
+import {
+  Dropdown,
+  KebabToggle,
+  DropdownItem,
+} from '@patternfly/react-core/deprecated';
 import { PlusCircleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { propsToCamelCase } from 'foremanReact/common/helpers';

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsCard.scss

@@ -1,15 +1,15 @@
 .host-collection-card-body {
-  .pf-l-bullseye {
+  .pf-v5-l-bullseye {
     position: relative;
     top: -20px;
   }
-  .pf-c-empty-state__icon {
+  .pf-v5-c-empty-state__icon {
     font-size: 2em;
   }
   .pf-m-lg {
     margin: -20px;
   }
-  .pf-c-empty-state__body {
+  .pf-v5-c-empty-state__body {
     font-size: smaller;
     margin-top: 1.4em;
     margin-bottom: 1em;

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsModal.js

@@ -192,7 +192,7 @@ export const HostCollectionsModal = ({
               <Tr key={id} ouiaId={`row-${id}`}>
                 <Td
                   select={{
-                    disable: isDisabled,
+                    isDisabled,
                     isSelected: isSelected(id),
                     onSelect: (_event, selected) => selectOne(selected, id, hostCollection),
                     rowIndex,

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/__tests__/hostCollectionsModal.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, fireEvent, act, waitFor } from 'react-testing-lib-wrapper';
 import mockAvailableHostCollections from './availableHostCollections.fixtures.json';
 import mockRemovableHostCollections from './removableHostCollections.fixtures.json';
 import { REMOVABLE_HOST_COLLECTIONS_KEY } from '../HostCollectionsConstants';
-import { assertNockRequest, mockAutocomplete, nockInstance } from '../../../../../../test-utils/nockWrapper';
+import nock, { assertNockRequest, mockAutocomplete, nockInstance } from '../../../../../../test-utils/nockWrapper';
 import katelloApi, { foremanApi } from '../../../../../../services/api';
 import { HostCollectionsAddModal, HostCollectionsRemoveModal } from '../HostCollectionsModal';
 
@@ -44,6 +44,10 @@ describe('HostCollectionsAddModal', () => {
     const { results } = mockAvailableHostCollections;
     [firstHostCollection] = results;
   });
+  afterEach(() => {
+    nock.cleanAll(); // Removes all interceptors
+    nock.restore(); // Restores HTTP to normal behavior
+  });
 
   test('Calls API with available_for=host on page load', async (done) => {
     const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
@@ -65,7 +69,8 @@ describe('HostCollectionsAddModal', () => {
     await patientlyWaitFor(() =>
       expect(getAllByText(firstHostCollection.name)[0]).toBeInTheDocument());
     assertNockRequest(autocompleteScope);
-    assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+    assertNockRequest(scope);
+    act(done);
   });
 
   test('Calls alterHostCollections with combined list of existing and new host collections', async (done) => {
@@ -107,6 +112,7 @@ describe('HostCollectionsAddModal', () => {
     assertNockRequest(autocompleteScope);
     assertNockRequest(scope);
     assertNockRequest(alterScope);
+    await waitFor(() => expect(hostDetailsScope.isDone()).toBe(true));
     assertNockRequest(hostDetailsScope, done);
   });
   test('Host collections whose host limit is exceeded are disabled', async (done) => {
@@ -136,7 +142,8 @@ describe('HostCollectionsAddModal', () => {
     expect(disabledCheckboxes).toHaveLength(maxedOutHostCollections.length);
 
     assertNockRequest(autocompleteScope);
-    assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+    assertNockRequest(scope);
+    act(done); // Pass jest callback to confirm test is done
   });
 });
 
@@ -146,6 +153,10 @@ describe('HostCollectionsRemoveModal', () => {
     [firstHostCollection] = results;
   });
 
+  afterEach(() => {
+    nock.cleanAll(); // Removes all interceptors
+    nock.restore(); // Restores HTTP to normal behavior
+  });
   test('Calls API without available_for=host on page load', async (done) => {
     const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
 
@@ -168,7 +179,8 @@ describe('HostCollectionsRemoveModal', () => {
       expect(getAllByText(firstHostCollection.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);
+    act(done); // Pass jest callback to confirm test is done
   });
 
   test('Calls alterHostCollections with host collections being removed filtered out from the list', async (done) => {
@@ -204,16 +216,19 @@ describe('HostCollectionsRemoveModal', () => {
     await patientlyWaitFor(() =>
       expect(getAllByText(firstRemovableHostCollection.name)[0]).toBeInTheDocument());
     const checkbox = getByRole('checkbox', { name: 'Select row 0' });
-    fireEvent.click(checkbox);
+    await act(async () => {
+      fireEvent.click(checkbox);
+    });
     expect(getAllByText('1 selected')).toHaveLength(1);
     const removeButton = getByRole('button', { name: 'Remove' });
     expect(removeButton).toHaveAttribute('aria-disabled', 'false');
-    fireEvent.click(removeButton);
-
+    await act(async () => {
+      fireEvent.click(removeButton);
+    });
     assertNockRequest(autocompleteScope);
     assertNockRequest(scope);
     assertNockRequest(alterScope);
-    assertNockRequest(hostDetailsScope, done);
+    assertNockRequest(hostDetailsScope);
+    act(done);
   });
 });
-

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard.js

@@ -20,6 +20,7 @@ import {
   Tooltip,
   Skeleton,
   CardExpandableContent,
+  Icon,
 } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -101,14 +102,16 @@ const SystemPurposeCard = ({ hostDetails, akDetails }) => {
                     enableFlip
                     isContentLeftAligned
                   >
-                    <OutlinedQuestionCircleIcon style={{ marginTop: '7px' }} color="gray" />
+                    <Icon color="gray">
+                      <OutlinedQuestionCircleIcon style={{ marginTop: '7px' }} />
+                    </Icon>
                   </Tooltip>
                 </FlexItem>
               </Flex>
             </FlexItem>
             {showEditButton && (
               <FlexItem>
-                <Button variant="link" isSmall ouiaId="syspurpose-edit-button" onClick={() => setEditing(val => !val)}>{__('Edit')}</Button>
+                <Button variant="link" size="sm" ouiaId="syspurpose-edit-button" onClick={() => setEditing(val => !val)}>{__('Edit')}</Button>
               </FlexItem>)
             }
           </Flex>

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard.scss

@@ -1,12 +1,12 @@
 .system-purpose-card-body {
   font-size: small;
-  .pf-c-label {
+  .pf-v5-c-label {
     font-size: smaller;
   }
 }
 
 #system-purpose-card {
-  .pf-c-card__header-toggle {
+  .pf-v5-c-card__header-toggle {
     margin-top: -2px;
   }
 }

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeEditModal.js

@@ -11,6 +11,7 @@ import {
   FormSelect,
   FormSelectOption,
 } from '@patternfly/react-core';
+
 import { FormattedMessage } from 'react-intl';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {
@@ -183,7 +184,7 @@ const SystemPurposeEditModal = ({
             name="role"
             ouiaId="role-select"
             value={selectedRole}
-            onChange={setSelectedRole}
+            onChange={(_event, val) => setSelectedRole(val)}
           >
             {roleOptions.map(option => (
               <FormSelectOption
@@ -200,7 +201,7 @@ const SystemPurposeEditModal = ({
             name="serviceLevel"
             ouiaId="service-level-select"
             value={selectedServiceLevel}
-            onChange={setSelectedServiceLevel}
+            onChange={(_event, val) => setSelectedServiceLevel(val)}
           >
             {serviceLevelOptions.map(option => (
               <FormSelectOption
@@ -217,7 +218,7 @@ const SystemPurposeEditModal = ({
             name="usage"
             ouiaId="usage-select"
             value={selectedUsage}
-            onChange={setSelectedUsage}
+            onChange={(_event, val) => setSelectedUsage(val)}
           >
             {usageOptions.map(option => (
               <FormSelectOption
@@ -234,7 +235,7 @@ const SystemPurposeEditModal = ({
             name="release_version"
             ouiaId="release-version-select"
             value={selectedReleaseVersion}
-            onChange={setSelectedReleaseVersion}
+            onChange={(_event, val) => setSelectedReleaseVersion(val)}
           >
             {releaseVersionOptions.map(option => (
               <FormSelectOption

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/__tests__/SystemPurposeCard.test.js

@@ -63,7 +63,8 @@ test('shows system purpose details for a host', async (done) => {
   expect(getByText('8')).toBeInTheDocument();
 
   assertNockRequest(orgScope);
-  assertNockRequest(availableReleaseVersionsScope, done);
+  assertNockRequest(availableReleaseVersionsScope);
+  done();
 });
 
 test('shows system purpose details for an activation key', () => {
@@ -93,7 +94,8 @@ test('shows edit button for a user with edit_hosts permission', async (done) =>
   expect(queryByText('Edit')).toBeInTheDocument();
 
   assertNockRequest(orgScope);
-  assertNockRequest(availableReleaseVersionsScope, done);
+  assertNockRequest(availableReleaseVersionsScope);
+  done();
 });
 
 test('does not show edit button for a user without edit_hosts permission', (done) => {
@@ -118,6 +120,7 @@ test('does not show edit button for a user without edit_hosts permission', (done
   expect(queryByText('Edit')).not.toBeInTheDocument();
 
   assertNockRequest(orgScope);
-  assertNockRequest(availableReleaseVersionsScope, done);
+  assertNockRequest(availableReleaseVersionsScope);
+  done();
   act(done);
 });

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/__tests__/SystemPurposeEditModal.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { propsToCamelCase } from 'foremanReact/common/helpers';
-import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, fireEvent, act } from 'react-testing-lib-wrapper';
 import HOST_DETAILS from '../../../HostDetailsConstants';
 import SystemPurposeEditModal from '../SystemPurposeEditModal';
 import { assertNockRequest, nockInstance } from '../../../../../../test-utils/nockWrapper';
@@ -87,7 +87,8 @@ describe('SystemPurposeEditModal', () => {
     expect(getByText('8')).toBeInTheDocument();
 
     assertNockRequest(orgScope);
-    assertNockRequest(availableReleaseVersionsScope, done);
+    assertNockRequest(availableReleaseVersionsScope);
+    done();
   });
 
   test('Shows blank options as (unset)', () => {
@@ -159,8 +160,9 @@ describe('SystemPurposeEditModal', () => {
 
     // Save button should now be enabled
     expect(saveButton).toHaveAttribute('aria-disabled', 'false');
-    fireEvent.click(saveButton);
-
+    await act(async () => {
+      fireEvent.click(saveButton);
+    });
     await patientlyWaitFor(() => {
       expect(baseAttributes.closeModal).toHaveBeenCalled();
     });
@@ -168,7 +170,8 @@ describe('SystemPurposeEditModal', () => {
     [orgScope, availableReleaseVersionsScope, hostEditScope].forEach((scope) => {
       assertNockRequest(scope);
     });
-    assertNockRequest(hostDetailsScope, done);
+    assertNockRequest(hostDetailsScope);
+    done();
   });
   test('Calls API and changes syspurpose values for activation key', async (done) => {
     const orgScope = nockInstance
@@ -212,8 +215,9 @@ describe('SystemPurposeEditModal', () => {
 
     // Save button should now be enabled
     expect(saveButton).toHaveAttribute('aria-disabled', 'false');
-    fireEvent.click(saveButton);
-
+    await act(async () => {
+      fireEvent.click(saveButton);
+    });
     await patientlyWaitFor(() => {
       expect(baseAttributes.closeModal).toHaveBeenCalled();
     });
@@ -221,7 +225,8 @@ describe('SystemPurposeEditModal', () => {
     [orgScope, availableReleaseVersionsScope, akEditScope].forEach((scope) => {
       assertNockRequest(scope);
     });
-    assertNockRequest(akDetailsScope, done);
+    assertNockRequest(akDetailsScope);
+    done();
   });
   test('Retrieves available release versions for host', async (done) => {
     const orgScope = nockInstance
@@ -241,8 +246,9 @@ describe('SystemPurposeEditModal', () => {
       />, renderOptions());
 
     const releaseVersionDropdown = getByLabelText('Release version');
-    fireEvent.click(releaseVersionDropdown);
-
+    await act(async () => {
+      fireEvent.click(releaseVersionDropdown);
+    });
     await patientlyWaitFor(() => {
       expect(getByText('8')).toBeInTheDocument();
       expect(getByText('9')).toBeInTheDocument();
@@ -271,8 +277,9 @@ describe('SystemPurposeEditModal', () => {
       />, renderOptions(ACTIVATION_KEY));
 
     const releaseVersionDropdown = getByLabelText('Release version');
-    fireEvent.click(releaseVersionDropdown);
-
+    await act(async () => {
+      fireEvent.click(releaseVersionDropdown);
+    });
     await patientlyWaitFor(() => {
       expect(getByText('8')).toBeInTheDocument();
       expect(getByText('9')).toBeInTheDocument();