katello 4.5.1 → 4.6.0.rc1

data/webpack/scenes/ContentViews/Details/Filters/CVRpmFilterContent.js

@@ -3,7 +3,7 @@ import useDeepCompareEffect from 'use-deep-compare-effect';
 import PropTypes from 'prop-types';
 import { shallowEqual, useSelector, useDispatch } from 'react-redux';
 import { TableVariant } from '@patternfly/react-table';
-import { Tabs, Tab, TabTitleText, Split, SplitItem, Button, Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+import { Tabs, Tab, TabTitleText, Split, SplitItem, Dropdown, DropdownItem, KebabToggle, Button } from '@patternfly/react-core';
 import { STATUS } from 'foremanReact/constants';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { ArtifactsWithNoErrataRenderer } from './ArtifactsWithNoErrata';
@@ -106,7 +106,7 @@ const CVRpmFilterContent = ({
   }, [showAffectedRepos, repositories.length]);
 
   const emptyContentTitle = __('No rules have been added to this filter.');
-  const emptyContentBody = __("Add to this filter using the 'Add RPM rule' button.");
+  const emptyContentBody = __('Items will appear here when a filter rule is added.');
   const emptySearchTitle = __('No matching rules found.');
   const emptySearchBody = __('Try changing your search settings.');
   const tabTitle = (inclusion ? __('Included') : __('Excluded')) + __(' RPMs');
@@ -145,6 +145,17 @@ const CVRpmFilterContent = ({
     deselectAll();
   };
 
+  const showPrimaryAction = true;
+  const primaryActionButton =
+    (
+      <Button
+        ouiaId="add-rpm-rule-button"
+        onClick={() => setModalOpen(true)}
+        variant="primary"
+        aria-label="add_rpm_rule_empty_state"
+      > {__('Add RPM rule')}
+      </Button>);
+
   return (
     <Tabs className="margin-0-24" activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
       <Tab eventKey={0} title={<TabTitleText>{tabTitle}</TabTitleText>}>
@@ -160,6 +171,8 @@ const CVRpmFilterContent = ({
               searchQuery,
               updateSearchQuery,
               status,
+              showPrimaryAction,
+              primaryActionButton,
             }}
             ouiaId="content-view-rpm-filter-table"
             actionResolver={hasPermission(permissions, 'edit_content_views') ? actionResolver : null}
@@ -178,6 +191,7 @@ const CVRpmFilterContent = ({
                     onClose={onClose}
                   />}
                 {hasPermission(permissions, 'edit_content_views') &&
+                  status === STATUS.RESOLVED && rows.length !== 0 &&
                   <Split hasGutter>
                     <SplitItem>
                       <Button
@@ -206,8 +220,7 @@ const CVRpmFilterContent = ({
                         filterDetails={filterDetails}
                       />
                     </SplitItem>
-                  </Split>
-                }
+                  </Split>}
                 {modalOpen &&
                   <AddEditPackageRuleModal
                     filterId={filterId}

data/webpack/scenes/ContentViews/Details/Filters/ContentType.js

@@ -14,6 +14,7 @@ export const typeName = (type, errataByDate) => {
     erratum: __('Errata'),
     erratum_date: __('Errata - by date range'),
     erratum_id: __('Errata'),
+    deb: __('Deb'),
   };
 
   if (type in nameMap) return nameMap[type];

data/webpack/scenes/ContentViews/Details/Filters/ContentViewFilters.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { shallowEqual, useSelector, useDispatch } from 'react-redux';
-import { Label, Split, SplitItem, Button, Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+import { Label, Split, SplitItem, Dropdown, DropdownItem, KebabToggle, Button } from '@patternfly/react-core';
 import { TableVariant } from '@patternfly/react-table';
 import { STATUS } from 'foremanReact/constants';
 import LongDateTime from 'foremanReact/components/common/dates/LongDateTime';
@@ -47,7 +47,6 @@ const ContentViewFilters = ({ cvId, details }) => {
     __('Content type'),
     __('Inclusion type'),
   ];
-
   const buildRows = useCallback(() => {
     const newRows = [];
     results.forEach((filter) => {
@@ -109,9 +108,19 @@ const ContentViewFilters = ({ cvId, details }) => {
   ];
 
   const emptyContentTitle = __("You currently don't have any filters for this content view.");
-  const emptyContentBody = __("Add filters using the 'Add filter' button above."); // needs link
+  const emptyContentBody = __('Filters will appear here when the filter is created.'); // needs link
   const emptySearchTitle = __('No matching filters found');
   const emptySearchBody = __('Try changing your search settings.');
+  const showPrimaryAction = true;
+  const primaryActionButton =
+    (
+      <Button
+        ouiaId="create-filter-button"
+        onClick={() => openAddModal()}
+        variant="primary"
+        aria-label="create_filter_empty_state"
+      > {__('Create filter')}
+      </Button>);
   return (
     <TableWrapper
       {...{
@@ -125,6 +134,8 @@ const ContentViewFilters = ({ cvId, details }) => {
         updateSearchQuery,
         error,
         status,
+        showPrimaryAction,
+        primaryActionButton,
       }}
       ouiaId="content-view-filters-table"
       actionResolver={hasPermission(permissions, 'edit_content_views') ? actionResolver : null}
@@ -135,25 +146,26 @@ const ContentViewFilters = ({ cvId, details }) => {
       fetchItems={useCallback(params => getContentViewFilters(cvId, params), [cvId])}
       actionButtons={hasPermission(permissions, 'edit_content_views') &&
         <>
-          <Split hasGutter>
-            <SplitItem>
-              <Button ouiaId="create-filter-button" onClick={openAddModal} variant="primary" aria-label="create_filter">
-                {__('Create filter')}
-              </Button>
-            </SplitItem>
-            <SplitItem>
-              <Dropdown
-                toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
-                isOpen={bulkActionOpen}
-                isPlain
-                dropdownItems={[
-                  <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!bulkActionEnabled} component="button" onClick={bulkRemove}>
-                    {__('Remove')}
-                  </DropdownItem>]
-                }
-              />
-            </SplitItem>
-          </Split>
+          {status === STATUS.RESOLVED && rows.length !== 0 &&
+            <Split hasGutter>
+              <SplitItem>
+                <Button ouiaId="create-filter-button" onClick={openAddModal} variant="primary" aria-label="create_filter">
+                  {__('Create filter')}
+                </Button>
+              </SplitItem>
+              <SplitItem>
+                <Dropdown
+                  toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
+                  isOpen={bulkActionOpen}
+                  isPlain
+                  dropdownItems={[
+                    <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!bulkActionEnabled} component="button" onClick={bulkRemove}>
+                      {__('Remove')}
+                    </DropdownItem>]
+                  }
+                />
+              </SplitItem>
+            </Split>}
           {addModalOpen &&
             <CVFilterAddModal
               cvId={cvId}

data/webpack/scenes/ContentViews/Details/Filters/MatchContentModal/CVDebMatchContentModal.js

@@ -0,0 +1,97 @@
+import React, { useState, useCallback } from 'react';
+import { useSelector, shallowEqual } from 'react-redux';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  Modal, ModalVariant,
+} from '@patternfly/react-core';
+import { TableVariant, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import TableWrapper from '../../../../../components/Table/TableWrapper';
+import { getDebPackages } from '../../ContentViewDetailActions';
+import { selectDebPackages, selectDebPackagesStatus } from '../../ContentViewDetailSelectors';
+
+
+const columnHeaders = [
+  __('DEB name'),
+  __('Summary'),
+];
+
+const emptyContentTitle = __('No matching DEB found.');
+const emptyContentBody = __("Given criteria doesn't match any DEBs. Try changing your rule.");
+const emptySearchTitle = __('Your search returned no matching DEBs.');
+const emptySearchBody = __('Try changing your search criteria.');
+
+const CVDebMatchContentModal = ({ filterId, onClose, filterRuleId }) => {
+  const [searchQuery, updateSearchQuery] = useState('');
+  const response = useSelector(state => selectDebPackages(state), shallowEqual);
+  const status = useSelector(state => selectDebPackagesStatus(state), shallowEqual);
+
+  const fetchItems = useCallback(params => getDebPackages({
+    content_view_filter_rule_id: filterRuleId, filterId, ...params,
+  }), [filterRuleId, filterId]);
+
+  const { results, ...metadata } = response;
+
+  return (
+    <Modal
+      title={__('Matching content')}
+      variant={ModalVariant.medium}
+      isOpen
+      onClose={onClose}
+      appendTo={document.body}
+    >
+      <TableWrapper
+        {...{
+          metadata,
+          emptyContentTitle,
+          emptyContentBody,
+          emptySearchTitle,
+          emptySearchBody,
+          searchQuery,
+          updateSearchQuery,
+          fetchItems,
+          status,
+        }}
+        ouiaId="content-view-deb-match-content-table"
+        autocompleteEndpoint="/debs/auto_complete_search"
+        variant={TableVariant.compact}
+      >
+        <Thead>
+          <Tr>
+            {columnHeaders.map(col =>
+              <Th key={col}>{col}</Th>)}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {results?.map((result) => {
+            const {
+              nva, description = '-', id,
+            } = result;
+            return (
+              <Tr key={`${nva}_${description}_${id}`}>
+                <Td>
+                  <a rel="noreferrer" target="_blank" href={urlBuilder(`debs/${id}`, '')}>{nva}</a>
+                </Td>
+                <Td>{description}</Td>
+              </Tr>
+            );
+          })
+          }
+        </Tbody>
+      </TableWrapper>
+    </Modal>
+  );
+};
+
+CVDebMatchContentModal.propTypes = {
+  filterRuleId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filterId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  onClose: PropTypes.func,
+};
+
+CVDebMatchContentModal.defaultProps = {
+  onClose: undefined,
+};
+
+export default CVDebMatchContentModal;

data/webpack/scenes/ContentViews/Details/Filters/MatchContentModal/__tests__/CVRpmMatchContentModal.test.js

@@ -4,7 +4,7 @@ import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-
 
 import api from '../../../../../../services/api';
 import CVRpmMatchContentModal from '../CVRpmMatchContentModal';
-import nock, { nockInstance, assertNockRequest, mockSetting, mockAutocomplete } from '../../../../../../test-utils/nockWrapper';
+import { nockInstance, assertNockRequest, mockSetting, mockAutocomplete } from '../../../../../../test-utils/nockWrapper';
 
 import CVMatchedContent from './CVRpmMatchContent.fixtures.json';
 import CVMatchContentSearch from './CVRpmMatchContentSearch.fixtures.json';
@@ -27,7 +27,6 @@ beforeEach(() => {
 });
 
 afterEach(() => {
-  nock.cleanAll();
   assertNockRequest(searchDelayScope);
   assertNockRequest(autoSearchScope);
 });

data/webpack/scenes/ContentViews/Details/Filters/Rules/DebPackage/AddEditDebPackageRuleModal.js

@@ -0,0 +1,128 @@
+import React, { useState } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { useDispatch, useSelector } from 'react-redux';
+import { STATUS } from 'foremanReact/constants';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Modal, ModalVariant, Form, FormGroup, TextInput, ActionGroup, Button } from '@patternfly/react-core';
+import { addCVFilterRule, editCVFilterRule, getCVFilterRules } from '../../../ContentViewDetailActions';
+import {
+  selectCreateFilterRuleStatus,
+} from '../../../ContentViewDetailSelectors';
+
+const AddEditDebPackageRuleModal = ({ filterId, onClose, selectedFilterRuleData }) => {
+  const {
+    id: editingId,
+    name: editingName,
+    arch: editingArchitecture,
+  } = selectedFilterRuleData || {};
+
+  const isEditing = !!selectedFilterRuleData;
+
+
+  const [name, setName] = useState(editingName || '');
+  const [architecture, setArchitecture] = useState(editingArchitecture || '');
+  const [saving, setSaving] = useState(false);
+  const dispatch = useDispatch();
+  const status = useSelector(state => selectCreateFilterRuleStatus(state));
+
+  const submitDisabled = !name || name.length === 0;
+
+  const onSubmit = () => {
+    setSaving(true);
+    dispatch(isEditing ?
+      editCVFilterRule(
+        filterId,
+        {
+          id: editingId,
+          name,
+          architecture,
+        },
+        () => {
+          dispatch(getCVFilterRules(filterId));
+          onClose();
+        },
+      ) :
+      addCVFilterRule(
+        filterId,
+        { name, architecture }, () => {
+          dispatch(getCVFilterRules(filterId));
+          onClose();
+        },
+      ));
+  };
+
+  useDeepCompareEffect(() => {
+    if (status === STATUS.ERROR) {
+      setSaving(false);
+    }
+  }, [status, setSaving]);
+
+  return (
+    <Modal
+      title={selectedFilterRuleData ? __('Edit package filter rule') : __('Create package filter rule')}
+      variant={ModalVariant.small}
+      isOpen
+      onClose={onClose}
+      appendTo={document.body}
+    >
+      <Form onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit();
+      }}
+      >
+        <FormGroup label={__('DEB name')} isRequired fieldId="name">
+          <TextInput
+            isRequired
+            type="text"
+            id="name"
+            aria-label="input_name"
+            name="name"
+            value={name}
+            onChange={value => setName(value)}
+          />
+        </FormGroup>
+        <FormGroup label={__('Architecture')} fieldId="architecture">
+          <TextInput
+            type="text"
+            id="architecture"
+            aria-label="input_architecture"
+            name="architecture"
+            value={architecture}
+            onChange={value => setArchitecture(value)}
+          />
+        </FormGroup>
+        <ActionGroup>
+          <Button
+            aria-label="create_deb_package_filter_rule"
+            variant="primary"
+            isDisabled={saving || submitDisabled}
+            type="submit"
+          >
+            {selectedFilterRuleData ? __('Edit rule') : __('Create rule')}
+          </Button>
+          <Button variant="link" onClick={onClose}>
+            {__('Cancel')}
+          </Button>
+        </ActionGroup>
+      </Form>
+    </Modal>
+  );
+};
+
+AddEditDebPackageRuleModal.propTypes = {
+  filterId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  onClose: PropTypes.func,
+  selectedFilterRuleData: PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+    arch: PropTypes.string,
+  }),
+};
+
+AddEditDebPackageRuleModal.defaultProps = {
+  onClose: null,
+  selectedFilterRuleData: undefined,
+};
+
+export default AddEditDebPackageRuleModal;

data/webpack/scenes/ContentViews/Details/Filters/__tests__/CVContainerImageFilterContent.test.js

@@ -3,7 +3,7 @@ import { renderWithRedux, patientlyWaitFor, fireEvent, act } from 'react-testing
 import { Route } from 'react-router-dom';
 
 import { cvFilterDetailsKey } from '../../../ContentViewsConstants';
-import nock, {
+import {
   nockInstance,
   assertNockRequest,
   mockAutocomplete,
@@ -13,6 +13,7 @@ import api from '../../../../../services/api';
 import CVContainerImageFilterContent from '../CVContainerImageFilterContent';
 import cvFilterFixtures from './CVContainerImageFilterContent.fixtures.json';
 import details from '../../../../ContentViews/__tests__/mockDetails.fixtures.json';
+import emptyCVContainerImageData from './emptyCVContainerImageFilterContent.fixtures.json';
 
 const afterDeleteFilterResultsArray = [...cvFilterFixtures.results];
 afterDeleteFilterResultsArray.shift();
@@ -51,7 +52,6 @@ beforeEach(() => {
 afterEach(() => {
   assertNockRequest(searchDelayScope);
   assertNockRequest(autoSearchScope);
-  nock.cleanAll();
 });
 
 test('Can view container image filter rules', async (done) => {
@@ -138,7 +138,6 @@ test('Can remove filter rules', async (done) => {
   assertNockRequest(cvFiltersCallbackScope, done);
 });
 
-
 // Add
 test('Can add filter rules', async (done) => {
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl, true, [], 2);
@@ -279,3 +278,57 @@ test('Can edit filter rules', async (done) => {
   assertNockRequest(cvFiltersCallbackScope, done);
   act(done);
 });
+
+test('Shows call-to-action when there are no filter rules', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl, true, [], 2);
+  const autocompleteNameScope = mockAutocomplete(nockInstance, autocompleteNameUrl, true, [], 2);
+  const inputSearchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0, 2);
+  const inputAutoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', undefined, 2);
+  const cvFiltersScope = nockInstance
+    .get(cvFilterRulesPath)
+    .query(true)
+    .reply(200, emptyCVContainerImageData);
+
+  const { queryByLabelText, getAllByLabelText } =
+    renderWithRedux(
+      withCVRoute(<CVContainerImageFilterContent filterId={195} details={details} />),
+      renderOptions,
+    );
+
+  expect(queryByLabelText('add_filter_rule_empty_state')).toBeNull();
+  await patientlyWaitFor(() => expect(queryByLabelText('add_filter_rule_empty_state')).toBeInTheDocument());
+  fireEvent.click(queryByLabelText('add_filter_rule_empty_state'));
+  await patientlyWaitFor(() => {
+    expect(getAllByLabelText('text input for search')[0]).toBeInTheDocument();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(inputSearchDelayScope);
+  assertNockRequest(inputAutoSearchScope);
+  assertNockRequest(autocompleteNameScope);
+  assertNockRequest(cvFiltersScope, done);
+  act(done);
+});
+
+test('Hides bulk_remove dropdownItem when there are no filter rules', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const cvFiltersScope = nockInstance
+    .get(cvFilterRulesPath)
+    .query(true)
+    .reply(200, emptyCVContainerImageData);
+
+  const { queryByText, getByText, queryByLabelText } =
+    renderWithRedux(
+      withCVRoute(<CVContainerImageFilterContent filterId={195} details={details} />),
+      renderOptions,
+    );
+  expect(queryByText('Add filter rule')).toBeNull();
+  await patientlyWaitFor(() => {
+    expect(getByText('Add filter rule')).toBeInTheDocument();
+    expect(queryByLabelText('bulk_actions')).not.toBeInTheDocument();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(cvFiltersScope, done);
+  act(done);
+});

data/webpack/scenes/ContentViews/Details/Filters/__tests__/CVRpmFilterContent.test.js

@@ -15,6 +15,8 @@ import cvFilterDetails from './cvPackageFilterDetail.fixtures.json';
 import cvPackageFilterRules from './cvPackageFilterRules.fixtures.json';
 import cvFilterFixtures from './contentViewFilters.fixtures.json';
 import details from '../../../__tests__/mockDetails.fixtures.json';
+// import emptyContentViewFiltersData from './emptyContentViewFilters.fixtures.json';
+import emptyCVPackageFilterRules from './emptyCVPackageFilterRules.fixtures.json';
 
 const cvFiltersPath = api.getApiUrl('/content_view_filters');
 const cvFilterDetailsPath = api.getApiUrl('/content_view_filters/2');
@@ -69,7 +71,7 @@ test('Can show filter details and package groups on page load', async (done) =>
   assertNockRequest(autoSearchScope);
   assertNockRequest(cvFilterScope);
   assertNockRequest(cvFiltersScope);
-  assertNockRequest(cvPackageFilterRulesScope, done);
+  assertNockRequest(cvPackageFilterRulesScope);
   act(done);
 });
 
@@ -128,7 +130,8 @@ test('Can search for package rules in package filter details', async (done) => {
   assertNockRequest(cvFiltersScope);
   assertNockRequest(cvPackageFilterRulesScope);
   assertNockRequest(withSearchScope);
-  assertNockRequest(packageRuleSearchScope, done);
+  assertNockRequest(packageRuleSearchScope);
+  act(done);
 });
 
 test('Can add package rules to filter in a self-closing modal', async (done) => {
@@ -207,7 +210,8 @@ test('Can add package rules to filter in a self-closing modal', async (done) =>
   assertNockRequest(cvFilterDetailsScope);
   assertNockRequest(cvPackageFilterRulesScope);
   assertNockRequest(createscope);
-  assertNockRequest(cvPackageFilterRulesScope, done);
+  assertNockRequest(cvPackageFilterRulesScope);
+  act(done);
 });
 
 test('Remove rpm filter rule in a self-closing modal', async (done) => {
@@ -263,7 +267,8 @@ test('Remove rpm filter rule in a self-closing modal', async (done) => {
   assertNockRequest(cvFilterDetailsScope);
   assertNockRequest(cvPackageFilterRulesScope);
   assertNockRequest(removeScope);
-  assertNockRequest(cvPackageFilterRulesScope, done);
+  assertNockRequest(cvPackageFilterRulesScope);
+  act(done);
 });
 
 test('Edit rpm filter rule in a self-closing modal', async (done) => {
@@ -284,8 +289,8 @@ test('Edit rpm filter rule in a self-closing modal', async (done) => {
     .query(true)
     .reply(200, cvFilterDetails);
   const cvPackageFilterRulesScope = nockInstance
+    .persist()
     .get(cvPackageFilterRulesPath)
-    .times(2) // One on initial page load and one after rule create
     .query(true)
     .reply(200, cvPackageFilterRules);
 
@@ -319,10 +324,10 @@ test('Edit rpm filter rule in a self-closing modal', async (done) => {
 
   await patientlyWaitFor(() => {
     expect(getByText('Edit RPM rule')).toBeInTheDocument();
-    fireEvent.submit(getByLabelText('add_package_filter_rule'));
   });
-
+  fireEvent.submit(getByLabelText('add_package_filter_rule'));
   await patientlyWaitFor(() => {
+    expect(queryByText('Edit RPM rule')).not.toBeInTheDocument();
     expect(getByText(cvFilterName)).toBeInTheDocument();
   });
 
@@ -334,6 +339,55 @@ test('Edit rpm filter rule in a self-closing modal', async (done) => {
   assertNockRequest(cvFiltersScope);
   assertNockRequest(cvFilterDetailsScope);
   assertNockRequest(cvPackageFilterRulesScope);
-  assertNockRequest(editScope, done);
+  assertNockRequest(editScope);
+  act(done);
+});
+
+test('Shows call-to-action when there are no RPM filters', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const autocompleteNameScope = mockAutocomplete(nockInstance, autocompleteNameUrl);
+  const autocompleteArchScope = mockAutocomplete(nockInstance, autocompleteArchUrl);
+  const searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0, 3);
+  const autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', undefined, 3);
+  const cvFilterDetailScope = nockInstance
+    .get(cvFilterDetailsPath)
+    .query(true)
+    .reply(200, cvFilterDetails);
+  const cvFiltersScope = nockInstance
+    .get(cvFiltersPath)
+    .query(true)
+    .reply(200, cvFilterFixtures);
+  const cvPackageFilterRulesScope = nockInstance
+    .get(cvPackageFilterRulesPath)
+    .times(1)
+    .query(true)
+    .reply(200, emptyCVPackageFilterRules);
+  const {
+    queryByLabelText, getAllByLabelText, queryByText,
+  } =
+    renderWithRedux(withCVRoute(<ContentViewFilterDetails
+      cvId={1}
+      details={details}
+    />), renderOptions);
+  expect(queryByLabelText('add_rpm_rule_empty_state')).not.toBeInTheDocument();
+  await patientlyWaitFor(() => expect(queryByLabelText('add_rpm_rule_empty_state')).toBeInTheDocument());
+  fireEvent.click(queryByLabelText('add_rpm_rule_empty_state'));
+
+  await patientlyWaitFor(() => {
+    expect(getAllByLabelText('text input for search')[0]).toBeInTheDocument();
+    expect(queryByText('Cancel')).toBeInTheDocument();
+  });
+  fireEvent.click(queryByText('Cancel'));
+  await patientlyWaitFor(() => {
+    expect(queryByLabelText('add-edit-package-modal-cancel')).not.toBeInTheDocument();
+  });
+  assertNockRequest(autocompleteNameScope);
+  assertNockRequest(autocompleteArchScope);
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
+  assertNockRequest(cvFiltersScope);
+  assertNockRequest(cvFilterDetailScope);
+  assertNockRequest(cvPackageFilterRulesScope);
   act(done);
 });

data/webpack/scenes/ContentViews/Details/Filters/__tests__/ContentViewPackageGroupFilter.test.js

@@ -4,7 +4,7 @@ import { Route } from 'react-router-dom';
 
 import ContentViewFilterDetails from '../ContentViewFilterDetails';
 import { ADDED, cvFilterDetailsKey, NOT_ADDED } from '../../../ContentViewsConstants';
-import nock, {
+import {
   nockInstance,
   assertNockRequest,
 } from '../../../../../test-utils/nockWrapper';
@@ -38,10 +38,6 @@ const renderOptions = {
 
 const withCVRoute = component => <Route path="/content_views/:id([0-9]+)#/filters/:filterId([0-9]+)">{component}</Route>;
 
-afterEach(() => {
-  nock.cleanAll();
-});
-
 jest.mock('../../../../../components/Search', () => () => 'mocked!');
 
 test('Can enable and disable add filter button', async (done) => {

data/webpack/scenes/ContentViews/Details/Filters/__tests__/contentViewFilterDetails.test.js

@@ -4,7 +4,7 @@ import { Route } from 'react-router-dom';
 
 import ContentViewFilterDetails from '../ContentViewFilterDetails';
 import { cvFilterDetailsKey } from '../../../ContentViewsConstants';
-import nock, {
+import {
   nockInstance,
   assertNockRequest,
   mockAutocomplete,
@@ -40,7 +40,6 @@ beforeEach(() => {
 afterEach(() => {
   assertNockRequest(searchDelayScope);
   assertNockRequest(autoSearchScope);
-  nock.cleanAll();
 });
 
 test('Can show filter details and package groups on page load', async (done) => {