katello 4.5.0.rc2 → 4.6.0.rc2

data/webpack/scenes/ContentViews/Details/ContentViewDetailSelectors.js

@@ -37,6 +37,14 @@ import {
   REPOSITORY_TYPES,
   RPM_PACKAGE_GROUPS_CONTENT,
   RPM_PACKAGES_CONTENT,
+  cvRPMPackagesCompareKey,
+  cvPackageGroupsCompareKey,
+  cvErrataCompareKey,
+  cvModuleStreamsCompareKey,
+  cvDockerTagsCompareKey,
+  cvDebPackagesCompareKey,
+  filesCompareKey,
+  genericContentCompareKey,
 } from '../ContentViewsConstants';
 
 export const selectCVDetails = (state, cvId) =>
@@ -126,6 +134,87 @@ export const selectCVHistoriesStatus = (state, cvId) =>
 export const selectCVHistoriesError = (state, cvId) =>
   selectAPIError(state, cvDetailsHistoryKey(cvId));
 
+export const selectRPMPackagesComparison = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIResponse(state, cvRPMPackagesCompareKey(versionOne, versionTwo, viewBy)) || {};
+
+export const selectRPMPackagesComparisonStatus = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIStatus(state, cvRPMPackagesCompareKey(versionOne, versionTwo, viewBy)) || STATUS.PENDING;
+
+export const selectRPMPackagesComparisonError = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIError(state, cvRPMPackagesCompareKey(versionOne, versionTwo, viewBy));
+
+export const selectErrataComparison = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIResponse(state, cvErrataCompareKey(versionOne, versionTwo, viewBy)) || {};
+
+export const selectErrataComparisonStatus = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIStatus(state, cvErrataCompareKey(versionOne, versionTwo, viewBy)) || STATUS.PENDING;
+
+export const selectErrataComparisonError = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIError(state, cvErrataCompareKey(versionOne, versionTwo, viewBy));
+
+export const selectPackageGroupsComparison = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIResponse(state, cvPackageGroupsCompareKey(versionOne, versionTwo, viewBy)) || {};
+
+export const selectPackageGroupsComparisonStatus = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIStatus(state, cvPackageGroupsCompareKey(versionOne, versionTwo, viewBy))
+    || STATUS.PENDING;
+
+export const selectPackageGroupsComparisonError = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIError(state, cvPackageGroupsCompareKey(versionOne, versionTwo, viewBy));
+
+export const selectModuleStreamsComparison = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIResponse(state, cvModuleStreamsCompareKey(versionOne, versionTwo, viewBy)) || {};
+
+export const selectModuleStreamsComparisonStatus = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIStatus(state, cvModuleStreamsCompareKey(versionOne, versionTwo, viewBy))
+    || STATUS.PENDING;
+
+export const selectModuleStreamsComparisonError = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIError(state, cvModuleStreamsCompareKey(versionOne, versionTwo, viewBy));
+
+export const selectDockerTagsComparison = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIResponse(state, cvDockerTagsCompareKey(versionOne, versionTwo, viewBy)) || {};
+
+export const selectDockerTagsComparisonStatus = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIStatus(state, cvDockerTagsCompareKey(versionOne, versionTwo, viewBy)) || STATUS.PENDING;
+
+export const selectDockerTagsComparisonError = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIError(state, cvDockerTagsCompareKey(versionOne, versionTwo, viewBy));
+
+export const selectDebPackagesComparison = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIResponse(state, cvDebPackagesCompareKey(versionOne, versionTwo, viewBy)) || {};
+
+export const selectDebPackagesComparisonStatus = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIStatus(state, cvDebPackagesCompareKey(versionOne, versionTwo, viewBy)) || STATUS.PENDING;
+
+export const selectDebPackagesComparisonError = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIError(state, cvDebPackagesCompareKey(versionOne, versionTwo, viewBy));
+
+export const selectFilesComparison = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIResponse(state, filesCompareKey(versionOne, versionTwo, viewBy)) || {};
+
+export const selectFilesComparisonStatus = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIStatus(state, filesCompareKey(versionOne, versionTwo, viewBy)) || STATUS.PENDING;
+
+export const selectFilesComparisonError = (state, versionOne, versionTwo, viewBy) =>
+  selectAPIError(state, filesCompareKey(versionOne, versionTwo, viewBy));
+
+export const selectGenericContentComparison =
+  (state, versionOne, versionTwo, pluralLabel, viewBy) =>
+    selectAPIResponse(
+      state,
+      genericContentCompareKey(pluralLabel, versionOne, versionTwo, viewBy),
+    ) || {};
+
+export const selectGenericContentComparisonStatus =
+  (state, versionOne, versionTwo, pluralLabel, viewBy) =>
+    selectAPIStatus(state, genericContentCompareKey(pluralLabel, versionOne, versionTwo, viewBy))
+    || STATUS.PENDING;
+
+export const selectGenericContentComparisonError =
+  (state, versionOne, versionTwo, pluralLabel, viewBy) =>
+    selectAPIError(state, genericContentCompareKey(pluralLabel, versionOne, versionTwo, viewBy));
+
 export const selectCVFilterRules = (state, filterId) =>
   selectAPIResponse(state, cvFilterRulesKey(filterId));
 

data/webpack/scenes/ContentViews/Details/Filters/Add/CVFilterAddModal.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { Redirect } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
@@ -9,12 +9,11 @@ import {
   Modal, ModalVariant, Form, FormGroup, TextInput, ActionGroup, Button, Radio, TextArea,
   Split, SplitItem, Select, SelectOption,
 } from '@patternfly/react-core';
-import { addCVFilterRule, createContentViewFilter } from '../../ContentViewDetailActions';
-import {
-  selectCreateContentViewFilter, selectCreateContentViewFilterStatus,
+import { addCVFilterRule, createContentViewFilter, getRepositoryTypes } from '../../ContentViewDetailActions';
+import { selectCreateContentViewFilter, selectCreateContentViewFilterStatus,
   selectCreateContentViewFilterError, selectCreateFilterRule,
   selectCreateFilterRuleError, selectCreateFilterRuleStatus,
-} from '../../../Details/ContentViewDetailSelectors';
+  selectRepoTypes, selectRepoTypesStatus } from '../../../Details/ContentViewDetailSelectors';
 import { FILTER_TYPES } from '../../../ContentViewsConstants';
 import ContentType from '../ContentType';
 
@@ -32,7 +31,14 @@ const CVFilterAddModal = ({ cvId, onClose }) => {
   const ruleResponse = useSelector(state => selectCreateFilterRule(state));
   const ruleStatus = useSelector(state => selectCreateFilterRuleStatus(state));
   const ruleError = useSelector(state => selectCreateFilterRuleError(state));
+  const repoTypesResponse = useSelector(state => selectRepoTypes(state));
+  const repoTypesStatus = useSelector(state => selectRepoTypesStatus(state));
   const [redirect, setRedirect] = useState(false);
+  const [repoTypes, setRepoTypes] = useState([]);
+
+  useEffect(() => {
+    dispatch(getRepositoryTypes());
+  }, [dispatch]);
 
   const onSubmit = () => {
     setSaving(true);
@@ -75,6 +81,26 @@ const CVFilterAddModal = ({ cvId, onClose }) => {
     }
   }, [response, status, ruleResponse, ruleStatus, ruleError, saving]);
 
+  useDeepCompareEffect(() => {
+    if (repoTypesStatus === STATUS.RESOLVED && repoTypesResponse) {
+      const allRepoTypes = [];
+      repoTypesResponse.forEach((repoType) => {
+        const { name: repoTypeName } = repoType;
+        allRepoTypes.push(repoTypeName);
+      });
+      setRepoTypes(allRepoTypes);
+    }
+  }, [repoTypesResponse, repoTypesStatus]);
+
+  const filterTypeOptions = () => {
+    const filterTypeSelectOpions = FILTER_TYPES.map(item =>
+      <SelectOption key={item} value={item}><ContentType type={item} /></SelectOption>);
+    if (repoTypes.includes('deb')) {
+      filterTypeSelectOpions.push(<SelectOption key="deb" value="deb"><ContentType type="deb" /></SelectOption>);
+    }
+    return filterTypeSelectOpions;
+  };
+
   if (redirect) {
     const { id } = response;
     return (<Redirect to={`/filters/${id}`} />);
@@ -114,10 +140,7 @@ const CVFilterAddModal = ({ cvId, onClose }) => {
             name="content_type"
             aria-label="ContentType"
           >
-            {
-              FILTER_TYPES.map(item =>
-                <SelectOption key={item} value={item}><ContentType type={item} /></SelectOption>)
-            }
+            { filterTypeOptions() }
           </Select>
         </FormGroup>
         <FormGroup>

data/webpack/scenes/ContentViews/Details/Filters/Add/__tests__/cvFilterAdd.test.js

@@ -1,13 +1,14 @@
 import React from 'react';
-import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { fireEvent, patientlyWaitFor, renderWithRedux } from 'react-testing-lib-wrapper';
 
 
 import api from '../../../../../../services/api';
 import CVFilterAddModal from '../CVFilterAddModal';
-import { nockInstance, assertNockRequest } from '../../../../../../test-utils/nockWrapper';
+import { assertNockRequest, nockInstance } from '../../../../../../test-utils/nockWrapper';
 import cvCreateData from './cvFilterCreateResult.fixtures.json';
 
 const cvCreateFilterPath = api.getApiUrl('/content_view_filters?content_view_id=5');
+const repoTypesResponse = [{ name: 'deb' }, { name: 'docker' }, { name: 'file' }, { name: 'ostree' }, { name: 'yum' }];
 
 const setIsOpen = jest.fn();
 
@@ -26,6 +27,10 @@ test('Can save content view filter from form', (done) => {
   const createFilterscope = nockInstance
     .post(cvCreateFilterPath, createDetails)
     .reply(201, createdCVDetails);
+  const repoTypeScope = nockInstance
+    .get(api.getApiUrl('/repositories/repository_types'))
+    .query(true)
+    .reply(200, repoTypesResponse);
   const { queryByText, getByLabelText } = renderWithRedux(form);
   expect(queryByText('Description')).toBeInTheDocument();
 
@@ -33,6 +38,7 @@ test('Can save content view filter from form', (done) => {
   fireEvent.change(getByLabelText('input_description'), { target: { value: 'Creating filter' } });
 
   fireEvent.submit(getByLabelText('create_filter'));
+  assertNockRequest(repoTypeScope);
   assertNockRequest(createFilterscope, done);
 });
 
@@ -40,6 +46,10 @@ test('Closes content view filter form upon save', async (done) => {
   const createFilterscope = nockInstance
     .post(cvCreateFilterPath, createDetails)
     .reply(201, createdCVDetails);
+  const repoTypeScope = nockInstance
+    .get(api.getApiUrl('/repositories/repository_types'))
+    .query(true)
+    .reply(200, repoTypesResponse);
   const { queryByText, getByLabelText } = renderWithRedux(form);
   fireEvent.change(getByLabelText('input_name'), { target: { value: 'test' } });
   fireEvent.change(getByLabelText('input_description'), { target: { value: 'Creating filter' } });
@@ -48,6 +58,6 @@ test('Closes content view filter form upon save', async (done) => {
   await patientlyWaitFor(() => {
     expect(queryByText('Description')).not.toBeInTheDocument();
   });
-
+  assertNockRequest(repoTypeScope);
   assertNockRequest(createFilterscope, done);
 });

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

@@ -10,10 +10,10 @@ import {
   TabTitleText,
   Split,
   SplitItem,
-  Button,
   Dropdown,
   DropdownItem,
   KebabToggle,
+  Button,
 } from '@patternfly/react-core';
 import { STATUS } from 'foremanReact/constants';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -30,7 +30,7 @@ import AffectedRepositoryTable from './AffectedRepositories/AffectedRepositoryTa
 import { hasPermission } from '../../helpers';
 
 const emptyContentTitle = __('No rules have been added to this filter.');
-const emptyContentBody = __("Add to this filter using the 'Add filter rule' button.");
+const emptyContentBody = __('Items will appear here when a filter rule is added.');
 const emptySearchTitle = __('No matching filter rules found.');
 const emptySearchBody = __('Try changing your search settings.');
 
@@ -55,7 +55,16 @@ const CVContainerImageFilterContent = ({
   const hasSelected = rows.some(({ selected }) => selected);
   const metadata = omit(response, ['results']);
   const { permissions } = details;
-
+  const showPrimaryAction = true;
+  const primaryActionButton =
+    (
+      <Button
+        ouiaId="add-content-view-container-image-filter-button"
+        onClick={() => setModalOpen(true)}
+        variant="primary"
+        aria-label="add_filter_rule_empty_state"
+      > {__('Add filter rule')}
+      </Button>);
   const onClose = () => {
     setModalOpen(false);
     setSelectedFilterRuleData(undefined);
@@ -130,6 +139,8 @@ const CVContainerImageFilterContent = ({
               searchQuery,
               updateSearchQuery,
               status,
+              showPrimaryAction,
+              primaryActionButton,
             }}
             ouiaId="content-view-container-image-filter"
             actionResolver={hasPermission(permissions, 'edit_content_views') ? actionResolver : null}
@@ -140,30 +151,31 @@ const CVContainerImageFilterContent = ({
             fetchItems={useCallback(params => getCVFilterRules(filterId, params), [filterId])}
             actionButtons={hasPermission(permissions, 'edit_content_views') &&
               <>
-                <Split hasGutter>
-                  <SplitItem>
-                    <Button
-                      ouiaId="add-content-view-container-image-filter-button"
-                      onClick={() => setModalOpen(true)}
-                      variant="primary"
-                      aria-label="add_filter_rule"
-                    >
-                      {__('Add filter rule')}
-                    </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={!hasSelected} component="button" onClick={bulkRemove}>
-                          {__('Remove')}
-                        </DropdownItem>]
-                      }
-                    />
-                  </SplitItem>
-                </Split>
+                {status === STATUS.RESOLVED && rows.length !== 0 &&
+                  <Split hasGutter>
+                    <SplitItem>
+                      <Button
+                        ouiaId="add-content-view-container-image-filter-button"
+                        onClick={() => setModalOpen(true)}
+                        variant="primary"
+                        aria-label="add_filter_rule"
+                      >
+                        {__('Add filter rule')}
+                      </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={!hasSelected} component="button" onClick={bulkRemove}>
+                            {__('Remove')}
+                          </DropdownItem>]
+                        }
+                      />
+                    </SplitItem>
+                  </Split>}
                 {modalOpen &&
                   <AddEditContainerTagRuleModal
                     {...{

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

@@ -0,0 +1,236 @@
+import React, { useState, useEffect, useCallback } from 'react';
+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 { STATUS } from 'foremanReact/constants';
+import { translate as __ } from 'foremanReact/common/I18n';
+import onSelect from '../../../../components/Table/helpers';
+import TableWrapper from '../../../../components/Table/TableWrapper';
+import {
+  selectCVFilterDetails,
+  selectCVFilterRules,
+  selectCVFilterRulesStatus,
+} from '../ContentViewDetailSelectors';
+import { deleteContentViewFilterRules, getCVFilterRules, removeCVFilterRule } from '../ContentViewDetailActions';
+import CVDebMatchContentModal from './MatchContentModal/CVDebMatchContentModal';
+import AddEditDebPackageRuleModal from './Rules/DebPackage/AddEditDebPackageRuleModal';
+import AffectedRepositoryTable from './AffectedRepositories/AffectedRepositoryTable';
+import { hasPermission } from '../../helpers';
+
+const CVDebFilterContent = ({
+  cvId, filterId, inclusion, showAffectedRepos, setShowAffectedRepos, details,
+}) => {
+  const response = useSelector(state => selectCVFilterRules(state, filterId), shallowEqual);
+  const { results, ...metadata } = response;
+  const status = useSelector(state => selectCVFilterRulesStatus(state, filterId), shallowEqual);
+  const loading = status === STATUS.PENDING;
+  const filterDetails = useSelector(state =>
+    selectCVFilterDetails(state, cvId, filterId), shallowEqual);
+  const { repositories = [] } = filterDetails;
+  const dispatch = useDispatch();
+  const { permissions } = details;
+
+  const [rows, setRows] = useState([]);
+  const [searchQuery, updateSearchQuery] = useState('');
+  const [activeTabKey, setActiveTabKey] = useState(0);
+  const [filterRuleId, setFilterRuleId] = useState(undefined);
+  const [bulkActionOpen, setBulkActionOpen] = useState(false);
+  const deselectAll = () => setRows(rows.map(row => ({ ...row, selected: false })));
+  const toggleBulkAction = () => setBulkActionOpen(prevState => !prevState);
+  const hasSelected = rows.some(({ selected }) => selected);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [selectedFilterRuleData, setSelectedFilterRuleData] = useState(undefined);
+  const [showMatchContent, setShowMatchContent] = useState(false);
+
+  const onClose = () => {
+    setModalOpen(false);
+    setShowMatchContent(false);
+    setSelectedFilterRuleData(undefined);
+  };
+
+  const columnHeaders = [
+    __('Deb name'),
+    __('Architecture'),
+    __('Versions'),
+  ];
+
+  const versionText = (rule) => {
+    const { version, min_version: minVersion, max_version: maxVersion } = rule;
+
+    if (rule.version) return `Version ${version}`;
+    if (rule.min_version && !rule.max_version) return `Greater than version ${minVersion}`;
+    if (!rule.min_version && rule.max_version) return `Less than version ${maxVersion}`;
+    if (rule.min_version && rule.max_version) {
+      return `Between versions ${rule.min_version} and ${rule.max_version}`;
+    }
+    return 'All versions';
+  };
+
+  const buildRows = useCallback(() => {
+    const newRows = [];
+    results.forEach((rule) => {
+      const {
+        name, architecture, id, ...rest
+      } = rule;
+
+      const cells = [
+        { title: name },
+        { title: architecture || 'All architectures' },
+        { title: versionText(rule) },
+      ];
+
+      newRows.push({
+        cells, id, name, arch: architecture, ...rest,
+      });
+    });
+
+    return newRows;
+  }, [results]);
+
+  useDeepCompareEffect(() => {
+    if (!loading && results) {
+      const newRows = buildRows(results);
+      setRows(newRows);
+    }
+  }, [response, results, loading, buildRows]);
+
+  useEffect(() => {
+    if (!repositories.length && showAffectedRepos) {
+      setActiveTabKey(1);
+    } else {
+      setActiveTabKey(0);
+    }
+  }, [showAffectedRepos, repositories.length]);
+
+  const emptyContentTitle = __('No rules have been added to this filter.');
+  const emptyContentBody = __("Add to this filter using the 'Add Deb rule' button.");
+  const emptySearchTitle = __('No matching rules found.');
+  const emptySearchBody = __('Try changing your search settings.');
+  const tabTitle = (inclusion ? __('Included') : __('Excluded')) + __(' DEBs');
+
+
+  const actionResolver = () => [
+    {
+      title: __('Remove'),
+      onClick: (_event, _rowId, { id }) => {
+        dispatch(removeCVFilterRule(filterId, id, () =>
+          dispatch(getCVFilterRules(filterId))));
+      },
+    },
+    {
+      title: __('Edit'),
+      onClick: (_event, _rowId, ruleDetails) => {
+        setSelectedFilterRuleData(ruleDetails);
+        setModalOpen(true);
+      },
+    },
+    {
+      title: __('View matching content'),
+      onClick: (_event, _rowId, { id }) => {
+        setFilterRuleId(id);
+        setShowMatchContent(true);
+      },
+    },
+  ];
+
+  const bulkRemove = () => {
+    setBulkActionOpen(false);
+    const debFilterIds =
+      rows.filter(row => row.selected).map(selected => selected.id);
+    dispatch(deleteContentViewFilterRules(filterId, debFilterIds, () =>
+      dispatch(getCVFilterRules(filterId))));
+    deselectAll();
+  };
+
+  return (
+    <Tabs activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+      <Tab eventKey={0} title={<TabTitleText>{tabTitle}</TabTitleText>}>
+        <div className="tab-body-with-spacing">
+          <TableWrapper
+            {...{
+              rows,
+              metadata,
+              emptyContentTitle,
+              emptyContentBody,
+              emptySearchTitle,
+              emptySearchBody,
+              searchQuery,
+              updateSearchQuery,
+              status,
+            }}
+            ouiaId="content-view-deb-filter-table"
+            actionResolver={hasPermission(permissions, 'edit_content_views') ? actionResolver : null}
+            status={status}
+            onSelect={hasPermission(permissions, 'edit_content_views') ? onSelect(rows, setRows) : null}
+            cells={columnHeaders}
+            variant={TableVariant.compact}
+            autocompleteEndpoint={`/content_view_filters/${filterId}/rules/auto_complete_search`}
+            fetchItems={useCallback(params => getCVFilterRules(filterId, params), [filterId])}
+            actionButtons={
+              <>
+                {showMatchContent &&
+                  <CVDebMatchContentModal
+                    key={`${filterId}-${filterRuleId}`}
+                    filterRuleId={filterRuleId}
+                    filterId={filterId}
+                    onClose={onClose}
+                  />}
+                <Split hasGutter>
+                  <SplitItem>
+                    <Button onClick={() => setModalOpen(true)} variant="secondary" aria-label="create_deb_rule">
+                      {__('Add DEB rule')}
+                    </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={!hasSelected} component="button" onClick={bulkRemove}>
+                          {__('Remove')}
+                        </DropdownItem>]
+                      }
+                    />
+                  </SplitItem>
+                </Split>
+                {modalOpen &&
+                  <AddEditDebPackageRuleModal
+                    filterId={filterId}
+                    onClose={onClose}
+                    selectedFilterRuleData={selectedFilterRuleData}
+                  />}
+              </>}
+          />
+        </div>
+      </Tab>
+      {(repositories.length || showAffectedRepos) &&
+        <Tab eventKey={1} title={<TabTitleText>{__('Affected Repositories')}</TabTitleText>}>
+          <div className="tab-body-with-spacing">
+            <AffectedRepositoryTable cvId={cvId} filterId={filterId} repoType="deb" setShowAffectedRepos={setShowAffectedRepos} details={details} />
+          </div>
+        </Tab>}
+    </Tabs>
+  );
+};
+
+CVDebFilterContent.propTypes = {
+  cvId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  filterId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  inclusion: PropTypes.bool,
+  showAffectedRepos: PropTypes.bool.isRequired,
+  setShowAffectedRepos: PropTypes.func.isRequired,
+  details: PropTypes.shape({
+    permissions: PropTypes.shape({}),
+    repository_ids: PropTypes.arrayOf(PropTypes.number),
+  }).isRequired,
+};
+
+CVDebFilterContent.defaultProps = {
+  cvId: '',
+  filterId: '',
+  inclusion: false,
+};
+export default CVDebFilterContent;

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

@@ -264,6 +264,7 @@ const CVErrataIDFilterContent = ({
               status,
               activeFilters,
               defaultFilters,
+              resetFilters,
             }}
             ouiaId="content-view-errata-by-id-filter-table"
             actionResolver={hasPermission(permissions, 'edit_content_views') ? actionResolver : null}

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

@@ -7,6 +7,7 @@ import CVContainerImageFilterContent from './CVContainerImageFilterContent';
 import CVModuleStreamFilterContent from './CVModuleStreamFilterContent';
 import CVErrataIDFilterContent from './CVErrataIDFilterContent';
 import CVErrataDateFilterContent from './CVErrataDateFilterContent';
+import CVDebFilterContent from './CVDebFilterContent';
 
 const CVFilterDetailType = ({
   cvId, filterId, inclusion, type, showAffectedRepos, setShowAffectedRepos, rules, details,
@@ -63,6 +64,15 @@ const CVFilterDetailType = ({
       setShowAffectedRepos={setShowAffectedRepos}
       details={details}
     />);
+  case 'deb':
+    return (<CVDebFilterContent
+      cvId={cvId}
+      filterId={filterId}
+      inclusion={inclusion}
+      showAffectedRepos={showAffectedRepos}
+      setShowAffectedRepos={setShowAffectedRepos}
+      details={details}
+    />);
   default:
     return null;
   }

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

@@ -75,6 +75,8 @@ const CVModuleStreamFilterContent = ({
   ];
   const selectedAdded = allAddedNotAdded[selectedIndex];
 
+  const resetFilters = () => setSelectedIndex(0);
+
   const fetchItems = useCallback((params) => {
     const adjustedParams = { ...params };
     switch (selectedIndex) {
@@ -215,6 +217,7 @@ const CVModuleStreamFilterContent = ({
               updateSearchQuery,
               error,
               status,
+              resetFilters,
             }}
             ouiaId="content-view-module-stream-filter-table"
             additionalListeners={[selectedIndex]}

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

@@ -69,6 +69,7 @@ const CVPackageGroupFilterContent = ({
     ADDED,
     NOT_ADDED,
   ];
+
   const selectedAdded = allAddedNotAdded[selectedIndex];
 
   const fetchItems = useCallback((params) => {
@@ -187,7 +188,7 @@ const CVPackageGroupFilterContent = ({
   const emptyContentBody = __("Add to this filter using the 'Add filter rule' button.");
   const emptySearchTitle = __('No matching filter rules found.');
   const emptySearchBody = __('Try changing your search settings.');
-
+  const resetFilters = () => setSelectedIndex(0);
 
   return (
     <Tabs className="margin-0-24" activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
@@ -205,6 +206,7 @@ const CVPackageGroupFilterContent = ({
               updateSearchQuery,
               error,
               status,
+              resetFilters,
             }}
             ouiaId="content-view-package-group-filter-table"
             additionalListeners={[selectedIndex]}