katello 4.5.1 → 4.8.0.rc2

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}`} />);
@@ -85,6 +111,7 @@ const CVFilterAddModal = ({ cvId, onClose }) => {
       title={__('Create filter')}
       variant={ModalVariant.large}
       isOpen
+      ouiaId="create-filter-modal"
       onClose={onClose}
       appendTo={document.body}
     >
@@ -99,6 +126,7 @@ const CVFilterAddModal = ({ cvId, onClose }) => {
             type="text"
             id="name"
             aria-label="input_name"
+            ouiaId="input_name"
             name="name"
             value={name}
             onChange={value => setName(value)}
@@ -110,14 +138,12 @@ const CVFilterAddModal = ({ cvId, onClose }) => {
             onSelect={onSelect}
             isOpen={typeSelectOpen}
             onToggle={setTypeSelectOpen}
+            ouiaId="content_type"
             id="content_type"
             name="content_type"
             aria-label="ContentType"
           >
-            {
-              FILTER_TYPES.map(item =>
-                <SelectOption key={item} value={item}><ContentType type={item} /></SelectOption>)
-            }
+            { filterTypeOptions() }
           </Select>
         </FormGroup>
         <FormGroup>
@@ -129,6 +155,7 @@ const CVFilterAddModal = ({ cvId, onClose }) => {
                 onChange={checked => setInclusion(checked)}
                 label={__('Include filter')}
                 id="include_filter"
+                ouiaId="include_filter"
                 value="includeFilter"
                 style={{ margin: '1px' }}
               />
@@ -140,6 +167,7 @@ const CVFilterAddModal = ({ cvId, onClose }) => {
                 onChange={checked => setInclusion(!checked)}
                 label={__('Exclude filter')}
                 id="exclude_filter"
+                ouiaId="exclude_filter"
                 value="excludeFilter"
                 style={{ margin: '1px' }}
               />

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/AffectedRepositories/AffectedRepositorySelection.js

@@ -37,6 +37,7 @@ const AffectedRepositorySelection = ({
 
   return (
     <Select
+      ouiaId="affected-repos"
       selections={type}
       onSelect={onSelect}
       isOpen={typeSelectOpen}

data/webpack/scenes/ContentViews/Details/Filters/AffectedRepositories/AffectedRepositoryTable.js

@@ -178,6 +178,9 @@ const AffectedRepositoryTable = ({
   const emptySearchBody = __('Try changing your search settings.');
   const activeFilters = [productSelected];
   const defaultFilters = [allProducts];
+  const resetFilters = () => {
+    setProductSelected(allProducts);
+  };
   const dropdownItems = [
     <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={removeBulk}>
       {__('Remove')}
@@ -197,6 +200,7 @@ const AffectedRepositoryTable = ({
         updateSearchQuery,
         activeFilters,
         defaultFilters,
+        resetFilters,
         error,
         status,
       }}
@@ -204,7 +208,8 @@ const AffectedRepositoryTable = ({
       onSelect={hasPermission(permissions, 'edit_content_views') ? onSelect(rows, setRows) : null}
       cells={columnHeaders}
       variant={TableVariant.compact}
-      autocompleteEndpoint="/repositories/auto_complete_search"
+      autocompleteEndpoint="/katello/api/v2/repositories"
+      bookmarkController="katello_content_view_filters"
       fetchItems={useCallback(params => getCVReposWithOptions(params), [getCVReposWithOptions])}
       additionalListeners={[productSelected]}
       actionButtons={

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Checkbox } from '@patternfly/react-core';
+import { Switch } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { editCVFilter } from '../ContentViewDetailActions';
 
@@ -23,23 +23,24 @@ export const ArtifactsWithNoErrataRenderer = ({ filterDetails }) => {
   const getLabel = () => {
     switch (true) {
     case type === 'modulemd' && inclusion:
-      return __('Include all Module Streams with no errata.');
+      return __('Include all module streams not associated to any errata');
     case type === 'modulemd' && !inclusion:
-      return __('Exclude all Module Streams with no errata.');
+      return __('Exclude all module streams not associated to any errata');
     case !inclusion:
-      return __('Exclude all RPMs with no errata.');
+      return __('Exclude all RPMs not associated to any errata');
     default:
-      return __('Include all RPMs with no errata.');
+      return __('Include all RPMs not associated to any errata');
     }
   };
 
-  return (<Checkbox
+  return (<Switch
+    ouiaId="artifactsNoErrata"
     id="artifactsNoErrata"
     name="artifactsNoErrata"
-    label=<p style={{ marginTop: '4px' }}>{getLabel()}</p>
+    label={getLabel()}
     isChecked={artifactsNoErrata}
     isDisabled={isLoading}
-    onChange={setArtifactsNoErrata}
+    onChange={checked => setArtifactsNoErrata(checked)}
   />);
 };
 

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);
@@ -116,7 +125,12 @@ const CVContainerImageFilterContent = ({
   ];
 
   return (
-    <Tabs className="margin-0-24" activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+    <Tabs
+      className="margin-0-24"
+      activeKey={activeTabKey}
+      ouiaId="cv-container-image-filter-tabs"
+      onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}
+    >
       <Tab eventKey={0} title={<TabTitleText>{__('Tags')}</TabTitleText>}>
         <div className="margin-24-0">
           <TableWrapper
@@ -130,40 +144,45 @@ const CVContainerImageFilterContent = ({
               searchQuery,
               updateSearchQuery,
               status,
+              showPrimaryAction,
+              primaryActionButton,
             }}
             ouiaId="content-view-container-image-filter"
             actionResolver={hasPermission(permissions, 'edit_content_views') ? actionResolver : null}
             onSelect={hasPermission(permissions, 'edit_content_views') ? onSelect(rows, setRows) : null}
             cells={columnHeaders}
             variant={TableVariant.compact}
-            autocompleteEndpoint={`/content_view_filters/${filterId}/rules/auto_complete_search`}
+            autocompleteEndpoint={`/katello/api/v2/content_view_filters/${filterId}/rules`}
+            bookmarkController="katello_content_view_docker_filter_rules"
             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}
+                        ouiaId="cv-container-image-bulk-actions"
+                        isPlain
+                        dropdownItems={[
+                          <DropdownItem ouiaId="cv-container-image-bulk-remove" 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,241 @@
+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
+      ouiaId="cv-deb-filter-content-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={`/katello/api/v2/content_view_filters/${filterId}/rules`}
+            bookmarkController="katello_content_view_deb_filter_rules"
+            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;