katello 4.2.1 → 4.3.0.rc1

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   Flex,
@@ -19,11 +19,12 @@ import Loading from '../../../components/Loading';
 import ContentViewIcon from '../components/ContentViewIcon';
 import ActionableDetail from '../../../components/ActionableDetail';
 import './contentViewInfo.scss';
-import { dependenciesHelpText, autoPublishHelpText } from '../helpers';
+import { dependenciesHelpText, autoPublishHelpText, hasPermission } from '../helpers';
 import { LabelImportOnly } from '../Create/ContentViewFormComponents';
 
 const ContentViewInfo = ({ cvId, details }) => {
   const dispatch = useDispatch();
+  const [currentAttribute, setCurrentAttribute] = useState();
   const updating = useSelector(state => selectIsCVUpdating(state));
   const {
     name,
@@ -33,10 +34,16 @@ const ContentViewInfo = ({ cvId, details }) => {
     solve_dependencies: solveDependencies,
     auto_publish: autoPublish,
     import_only: importOnly,
+    permissions,
   } = details;
 
   if (updating) return <Loading size="sm" showText={false} />;
-  const onEdit = (val, attribute) => dispatch(updateContentView(cvId, { [attribute]: val }));
+
+  const onEdit = (val, attribute) => {
+    if (val === details[attribute]) return;
+    dispatch(updateContentView(cvId, { [attribute]: val }));
+  };
+
   return (
     <TextContent>
       <TextList component={TextListVariants.dl}>
@@ -44,7 +51,9 @@ const ContentViewInfo = ({ cvId, details }) => {
           label={__('Name')}
           attribute="name"
           onEdit={onEdit}
+          disabled={!hasPermission(permissions, 'edit_content_views')}
           value={name}
+          {...{ currentAttribute, setCurrentAttribute }}
         />
         <TextListItem component={TextListItemVariants.dt}>
           {__('Label')}
@@ -62,7 +71,7 @@ const ContentViewInfo = ({ cvId, details }) => {
         <TextListItem component={TextListItemVariants.dd} className="foreman-spaced-list">
           <Flex>
             <FlexItem spacer={{ default: 'spacerXs' }}><ContentViewIcon composite={composite} /></FlexItem>
-            <FlexItem>{ composite ? 'Composite' : 'Component' }</FlexItem>
+            <FlexItem>{composite ? 'Composite' : 'Component'}</FlexItem>
           </Flex>
         </TextListItem>
         <ActionableDetail
@@ -70,7 +79,9 @@ const ContentViewInfo = ({ cvId, details }) => {
           label={__('Description')}
           attribute="description"
           onEdit={onEdit}
+          disabled={!hasPermission(permissions, 'edit_content_views')}
           value={description}
+          {...{ currentAttribute, setCurrentAttribute }}
         />
         {composite ?
           (<ActionableDetail
@@ -78,16 +89,20 @@ const ContentViewInfo = ({ cvId, details }) => {
             attribute="auto_publish"
             value={autoPublish}
             onEdit={onEdit}
+            disabled={!hasPermission(permissions, 'edit_content_views')}
             tooltip={autoPublishHelpText}
             boolean
+            {...{ currentAttribute, setCurrentAttribute }}
           />) :
           (<ActionableDetail
             label={__('Solve dependencies')}
             attribute="solve_dependencies"
             value={solveDependencies}
             onEdit={onEdit}
+            disabled={!hasPermission(permissions, 'edit_content_views')}
             tooltip={dependenciesHelpText}
             boolean
+            {...{ currentAttribute, setCurrentAttribute }}
           />)}
         <TextListItem component={TextListItemVariants.dt}>
           {LabelImportOnly()}
@@ -116,6 +131,7 @@ ContentViewInfo.propTypes = {
     solve_dependencies: PropTypes.bool,
     auto_publish: PropTypes.bool,
     import_only: PropTypes.bool,
+    permissions: PropTypes.shape({}),
   }).isRequired,
 };
 

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

@@ -5,17 +5,20 @@ 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, Radio, TextArea,
-  Split, SplitItem, Select, SelectOption } from '@patternfly/react-core';
-import { createContentViewFilter } from '../../ContentViewDetailActions';
+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,
-  selectCreateContentViewFilterError,
+  selectCreateContentViewFilterError, selectCreateFilterRule,
+  selectCreateFilterRuleError, selectCreateFilterRuleStatus,
 } from '../../../Details/ContentViewDetailSelectors';
 import { FILTER_TYPES } from '../../../ContentViewsConstants';
 import ContentType from '../ContentType';
 
-const CVFilterAddModal = ({ cvId, show, setIsOpen }) => {
+const CVFilterAddModal = ({ cvId, onClose }) => {
   const [inclusion, setInclusion] = useState(true);
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
@@ -26,9 +29,12 @@ const CVFilterAddModal = ({ cvId, show, setIsOpen }) => {
   const response = useSelector(state => selectCreateContentViewFilter(state));
   const status = useSelector(state => selectCreateContentViewFilterStatus(state));
   const error = useSelector(state => selectCreateContentViewFilterError(state));
+  const ruleResponse = useSelector(state => selectCreateFilterRule(state));
+  const ruleStatus = useSelector(state => selectCreateFilterRuleStatus(state));
+  const ruleError = useSelector(state => selectCreateFilterRuleError(state));
   const [redirect, setRedirect] = useState(false);
 
-  const onSave = () => {
+  const onSubmit = () => {
     setSaving(true);
     dispatch(createContentViewFilter(
       cvId,
@@ -46,29 +52,47 @@ const CVFilterAddModal = ({ cvId, show, setIsOpen }) => {
   useDeepCompareEffect(() => {
     const { id } = response || {};
     if (id && status === STATUS.RESOLVED && saving) {
-      setSaving(false);
-      setRedirect(true);
+      // We need to create an empty rule for Errata by Date type once the Filter is created.
+      if (type === 'erratum_date') {
+        dispatch(addCVFilterRule(id, { types: ['security', 'enhancement', 'bugfix'] }));
+      } else {
+        setSaving(false);
+        setRedirect(true);
+      }
     } else if (status === STATUS.ERROR) {
       setSaving(false);
     }
-  }, [response, status, error, saving]);
+  }, [response, status, error, saving, dispatch, type]);
+
+  useDeepCompareEffect(() => {
+    const { id: filterId } = response || {};
+    const { id: filterRuleId } = ruleResponse || {};
+    if (filterId && filterRuleId &&
+      status === STATUS.RESOLVED && ruleStatus === STATUS.RESOLVED &&
+      saving) {
+      setSaving(false);
+      setRedirect(true);
+    }
+  }, [response, status, ruleResponse, ruleStatus, ruleError, saving]);
 
   if (redirect) {
     const { id } = response;
-    return (<Redirect to={`/labs/content_views/${cvId}#filters?subContentId=${id}`} />);
+    return (<Redirect to={`/filters/${id}`} />);
   }
 
   return (
     <Modal
       title={__('Create filter')}
-      variant={ModalVariant.small}
-      isOpen={show}
-      onClose={() => {
-        setIsOpen(false);
-      }}
+      variant={ModalVariant.large}
+      isOpen
+      onClose={onClose}
       appendTo={document.body}
     >
-      <Form>
+      <Form onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit();
+      }}
+      >
         <FormGroup label={__('Name')} isRequired fieldId="name">
           <TextInput
             isRequired
@@ -80,6 +104,22 @@ const CVFilterAddModal = ({ cvId, show, setIsOpen }) => {
             onChange={value => setName(value)}
           />
         </FormGroup>
+        <FormGroup label={__('Content type')} isRequired fieldId="content_type">
+          <Select
+            selections={type}
+            onSelect={onSelect}
+            isOpen={typeSelectOpen}
+            onToggle={setTypeSelectOpen}
+            id="content_type"
+            name="content_type"
+            aria-label="ContentType"
+          >
+            {
+              FILTER_TYPES.map(item =>
+                <SelectOption key={item} value={item}><ContentType type={item} /></SelectOption>)
+            }
+          </Select>
+        </FormGroup>
         <FormGroup>
           <Split hasGutter>
             <SplitItem>
@@ -90,6 +130,7 @@ const CVFilterAddModal = ({ cvId, show, setIsOpen }) => {
                 label="Include Filter"
                 id="include_filter"
                 value="includeFilter"
+                style={{ margin: '1px' }}
               />
             </SplitItem>
             <SplitItem>
@@ -100,26 +141,11 @@ const CVFilterAddModal = ({ cvId, show, setIsOpen }) => {
                 label="Exclude Filter"
                 id="exclude_filter"
                 value="excludeFilter"
+                style={{ margin: '1px' }}
               />
             </SplitItem>
           </Split>
         </FormGroup>
-        <FormGroup label={__('Content type')} isRequired fieldId="content_type">
-          <Select
-            selections={type}
-            onSelect={onSelect}
-            isOpen={typeSelectOpen}
-            onToggle={isExpanded => setTypeSelectOpen(isExpanded)}
-            id="content_type"
-            name="content_type"
-            aria-label="ContentType"
-          >
-            {
-              FILTER_TYPES.map(item =>
-                <SelectOption key={item} value={item}><ContentType type={item} /></SelectOption>)
-            }
-          </Select>
-        </FormGroup>
         <FormGroup label={__('Description')} fieldId="description">
           <TextArea
             type="text"
@@ -134,12 +160,12 @@ const CVFilterAddModal = ({ cvId, show, setIsOpen }) => {
           <Button
             aria-label="create_filter"
             variant="primary"
-            isDisabled={saving}
-            onClick={() => onSave()}
+            isDisabled={saving || name.length === 0}
+            type="submit"
           >
             {__('Create filter')}
           </Button>
-          <Button variant="link" onClick={() => setIsOpen(false)}>
+          <Button variant="link" onClick={onClose}>
             {__('Cancel')}
           </Button>
         </ActionGroup>
@@ -150,12 +176,11 @@ const CVFilterAddModal = ({ cvId, show, setIsOpen }) => {
 
 CVFilterAddModal.propTypes = {
   cvId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  show: PropTypes.bool.isRequired,
-  setIsOpen: PropTypes.func,
+  onClose: PropTypes.func,
 };
 
 CVFilterAddModal.defaultProps = {
-  setIsOpen: null,
+  onClose: null,
 };
 
 export default CVFilterAddModal;

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

@@ -5,8 +5,7 @@ import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-
 import api from '../../../../../../services/api';
 import CVFilterAddModal from '../CVFilterAddModal';
 import { nockInstance, assertNockRequest } from '../../../../../../test-utils/nockWrapper';
-
-const cvCreateData = require('./cvFilterCreateResult.fixtures.json');
+import cvCreateData from './cvFilterCreateResult.fixtures.json';
 
 const cvCreateFilterPath = api.getApiUrl('/content_view_filters?content_view_id=5');
 
@@ -33,7 +32,7 @@ test('Can save content view filter from form', (done) => {
   fireEvent.change(getByLabelText('input_name'), { target: { value: 'test' } });
   fireEvent.change(getByLabelText('input_description'), { target: { value: 'Creating filter' } });
 
-  getByLabelText('create_filter').click();
+  fireEvent.submit(getByLabelText('create_filter'));
   assertNockRequest(createFilterscope, done);
 });
 
@@ -45,7 +44,7 @@ test('Closes content view filter form upon save', async (done) => {
   fireEvent.change(getByLabelText('input_name'), { target: { value: 'test' } });
   fireEvent.change(getByLabelText('input_description'), { target: { value: 'Creating filter' } });
 
-  getByLabelText('create_filter').click();
+  fireEvent.submit(getByLabelText('create_filter'));
   await patientlyWaitFor(() => {
     expect(queryByText('Description')).not.toBeInTheDocument();
   });

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

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { shallowEqual, useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Select, SelectOption } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { selectCVFilterDetails } from '../../ContentViewDetailSelectors';
+import { editCVFilter, getCVFilterDetails } from '../../ContentViewDetailActions';
+
+const AffectedRepositorySelection = ({
+  cvId, filterId, setShowAffectedRepos, disabled,
+}) => {
+  const dispatch = useDispatch();
+  const response = useSelector(state => selectCVFilterDetails(state, cvId, filterId), shallowEqual);
+  const { repositories = [] } = response;
+  const [type, setType] = useState(repositories.length ? 'affect_repos' : 'all_repos');
+  const [typeSelectOpen, setTypeSelectOpen] = useState(false);
+
+  const onSelect = (event, selection) => {
+    if (selection === 'all_repos') {
+      setShowAffectedRepos(false);
+      if (repositories.length) {
+        dispatch(editCVFilter(
+          filterId,
+          { id: filterId, repository_ids: [] },
+          () => {
+            dispatch(getCVFilterDetails(cvId, filterId));
+          },
+        ));
+      }
+    }
+    if (selection === 'affect_repos') {
+      setShowAffectedRepos(true);
+    }
+    setType(selection);
+    setTypeSelectOpen(false);
+  };
+
+  return (
+    <Select
+      selections={type}
+      onSelect={onSelect}
+      isOpen={typeSelectOpen}
+      onToggle={isExpanded => setTypeSelectOpen(isExpanded)}
+      id="affected_repos"
+      name="affected_repos"
+      aria-label="affected_repos"
+      isDisabled={disabled}
+    >
+      <SelectOption key="all_repos" value="all_repos">{__('Apply to all repositories in the CV')}</SelectOption>
+      <SelectOption key="affect_repos" value="affect_repos">{__('Apply to subset of repositories')}</SelectOption>
+    </Select>
+  );
+};
+
+AffectedRepositorySelection.propTypes = {
+  cvId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filterId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  setShowAffectedRepos: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+};
+
+AffectedRepositorySelection.defaultProps = {
+  disabled: false,
+};
+export default AffectedRepositorySelection;

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

@@ -0,0 +1,260 @@
+import React, { useState, useCallback } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { useSelector, shallowEqual, useDispatch } from 'react-redux';
+import {
+  Bullseye,
+  Split,
+  SplitItem,
+  Button,
+  ActionList,
+  ActionListItem,
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+} from '@patternfly/react-core';
+import { TableVariant, fitContent } from '@patternfly/react-table';
+import { omit } from 'lodash';
+import { STATUS } from 'foremanReact/constants';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import PropTypes from 'prop-types';
+import onSelect from '../../../../../components/Table/helpers';
+import { editCVFilter, getCVFilterDetails, getFilterRepositories } from '../../ContentViewDetailActions';
+import { selectCVFilterRepos, selectCVFilterReposStatus, selectCVFilterReposError, selectCVFilterDetails } from '../../ContentViewDetailSelectors';
+import ContentCounts from '../../Repositories/ContentCounts';
+import LastSync from '../../Repositories/LastSync';
+import AddedStatusLabel from '../../../../../components/AddedStatusLabel';
+import TableWrapper from '../../../../../components/Table/TableWrapper';
+import RepoIcon from '../../Repositories/RepoIcon';
+import SelectableDropdown from '../../../../../components/SelectableDropdown/SelectableDropdown';
+import { hasPermission } from '../../../helpers';
+
+const allProducts = 'All products';
+
+const AffectedRepositoryTable = ({
+  cvId, filterId, repoType, setShowAffectedRepos, details,
+}) => {
+  const dispatch = useDispatch();
+  const response = useSelector(state => selectCVFilterRepos(state, filterId), shallowEqual);
+  const [initialResponse, setInitialResponse] = useState(response);
+  const status = useSelector(state => selectCVFilterReposStatus(state, filterId), shallowEqual);
+  const error = useSelector(state => selectCVFilterReposError(state, filterId), shallowEqual);
+  const filterDetails = useSelector(state =>
+    selectCVFilterDetails(state, cvId, filterId), shallowEqual);
+  const { repositories = [] } = filterDetails;
+  const [rows, setRows] = useState([]);
+  const [searchQuery, updateSearchQuery] = useState('');
+  const [productSelected, setProductSelected] = useState(allProducts);
+  const [repoProducts, setRepoProducts] = useState({});
+  const [bulkActionOpen, setBulkActionOpen] = useState(false);
+  const hasAddedSelected = rows.some(({ selected, added }) => selected && added);
+  const hasNotAddedSelected = rows.some(({ selected, added }) => selected && !added);
+  const deselectAll = () => setRows(rows.map(row => ({ ...row, selected: false })));
+  const metadata = omit(response, ['results']);
+  const { permissions } = details;
+
+  const columnHeaders = [
+    { title: __('Type'), transforms: [fitContent] },
+    __('Name'),
+    __('Product'),
+    __('Sync state'),
+    __('Content'),
+    { title: __('Status') },
+  ];
+  const loading = status === STATUS.PENDING;
+
+  const buildRows = useCallback((results) => {
+    const isAddedToFilter = repoId => (!!repositories.filter(repo => repo.id === repoId).length);
+    const newRows = [];
+    results.forEach((repo) => {
+      const {
+        id,
+        content_type: contentType,
+        name,
+        product: { id: productId, name: productName },
+        content_counts: counts,
+        last_sync_words: lastSyncWords,
+        last_sync: lastSync,
+      } = repo;
+
+      const addedToFilter = isAddedToFilter(id);
+
+      const cells = [
+        { title: <Bullseye><RepoIcon type={contentType} /></Bullseye> },
+        { title: <a href={urlBuilder(`products/${productId}/repositories`, '', id)}>{name}</a> },
+        productName,
+        { title: <LastSync {...{ lastSyncWords, lastSync }} /> },
+        { title: <ContentCounts {...{ counts, productId }} repoId={id} /> },
+        {
+          title: <AddedStatusLabel added={addedToFilter} />,
+        },
+      ];
+      newRows.push({
+        repoId: id,
+        cells,
+        added: addedToFilter,
+      });
+    });
+    return newRows.sort(({ added: addedA }, { added: addedB }) => {
+      if (addedA === addedB) return 0;
+      return addedA ? -1 : 1;
+    });
+  }, [repositories]);
+
+  useDeepCompareEffect(() => {
+    const { results } = response;
+    if (!loading && results) {
+      if (Object.keys(initialResponse).length === 0 || !Object.keys(repoProducts).length) {
+        setInitialResponse(response);
+        const allRepoProducts = {};
+        allRepoProducts[allProducts] = 'all';
+        results.forEach((repo) => {
+          const { product = {} } = repo;
+          const { name, id } = product;
+          allRepoProducts[name] = id;
+        });
+        setRepoProducts(allRepoProducts);
+      }
+      const newRows = buildRows(results);
+      setRows(newRows);
+    }
+  }, [response, loading, buildRows, initialResponse,
+    setInitialResponse, repoProducts, setRepoProducts]);
+
+  const toggleBulkAction = () => {
+    setBulkActionOpen(!bulkActionOpen);
+  };
+
+  const onAdd = (repos) => {
+    const repositoryIds = repositories.map(repo => repo.id);
+    dispatch(editCVFilter(
+      filterId,
+      { id: filterId, repository_ids: repositoryIds.concat(repos) }, () => {
+        dispatch(getCVFilterDetails(cvId, filterId));
+      },
+    ));
+  };
+
+  const onRemove = (repos) => {
+    const reposToDelete = [].concat(repos);
+    const repositoryIds = repositories.map(repo => repo.id);
+    const deletedRepos = repositoryIds.filter(x => !reposToDelete.includes(x));
+    dispatch(editCVFilter(
+      filterId,
+      { id: filterId, repository_ids: deletedRepos },
+      () => dispatch(getCVFilterDetails(cvId, filterId, {})),
+    ));
+    if (deletedRepos.length === 0) setShowAffectedRepos(false);
+  };
+
+  const addBulk = () => {
+    setBulkActionOpen(false);
+    const reposToAdd = rows.filter(({ selected, added }) =>
+      selected && !added).map(({ repoId }) => repoId);
+    deselectAll();
+    onAdd(reposToAdd);
+  };
+
+  const removeBulk = () => {
+    setBulkActionOpen(false);
+    const reposToDelete = rows.filter(({ selected, added }) =>
+      selected && added).map(({ repoId }) => repoId);
+    deselectAll();
+    onRemove(reposToDelete);
+  };
+
+  const getCVReposWithOptions = useCallback((params = {}) => {
+    const allParams = { ...params };
+    allParams.content_type = repoType;
+    if (productSelected !== allProducts) {
+      allParams.product_id = repoProducts[productSelected];
+    }
+    return getFilterRepositories(cvId, filterId, allParams);
+  }, [cvId, filterId, repoType, productSelected, repoProducts]);
+
+  const emptyContentTitle = __("You currently don't have any repositories to add to this filter.");
+  const emptyContentBody = __('Please add some repositories.');
+  const emptySearchTitle = __('No matching repositories found');
+  const emptySearchBody = __('Try changing your search settings.');
+  const activeFilters = [productSelected];
+  const defaultFilters = [allProducts];
+  const dropdownItems = [
+    <DropdownItem aria-label="bulk_add" key="bulk_add" isDisabled={!hasNotAddedSelected} component="button" onClick={addBulk}>
+      {__('Add')}
+    </DropdownItem>,
+    <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={removeBulk}>
+      {__('Remove')}
+    </DropdownItem>,
+  ];
+
+  return (
+    <TableWrapper
+      {...{
+        rows,
+        metadata,
+        emptyContentTitle,
+        emptyContentBody,
+        emptySearchTitle,
+        emptySearchBody,
+        searchQuery,
+        updateSearchQuery,
+        activeFilters,
+        defaultFilters,
+        error,
+        status,
+      }}
+      onSelect={hasPermission(permissions, 'edit_content_views') ? onSelect(rows, setRows) : null}
+      cells={columnHeaders}
+      variant={TableVariant.compact}
+      autocompleteEndpoint="/repositories/auto_complete_search"
+      fetchItems={useCallback(params => getCVReposWithOptions(params), [getCVReposWithOptions])}
+      additionalListeners={[productSelected]}
+      actionButtons={
+        <>
+          <Split hasGutter>
+            <SplitItem>
+              <SelectableDropdown
+                items={Object.keys(repoProducts)}
+                title={__('Product')}
+                selected={productSelected}
+                setSelected={setProductSelected}
+                placeholderText={__('Product')}
+              />
+            </SplitItem>
+            {hasPermission(permissions, 'edit_content_views') &&
+              <SplitItem>
+                <ActionList>
+                  <ActionListItem>
+                    <Button onClick={addBulk} isDisabled={!hasNotAddedSelected} variant="secondary" aria-label="add_repositories">
+                      Add repositories
+                    </Button>
+                  </ActionListItem>
+                  <ActionListItem>
+                    <Dropdown
+                      toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
+                      isOpen={bulkActionOpen}
+                      isPlain
+                      dropdownItems={dropdownItems}
+                    />
+                  </ActionListItem>
+                </ActionList>
+              </SplitItem>
+            }
+          </Split>
+        </>
+      }
+    />
+  );
+};
+
+AffectedRepositoryTable.propTypes = {
+  cvId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filterId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  repoType: PropTypes.string.isRequired,
+  setShowAffectedRepos: PropTypes.func.isRequired,
+  details: PropTypes.shape({
+    permissions: PropTypes.shape({}),
+  }).isRequired,
+};
+
+export default AffectedRepositoryTable;

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

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Checkbox } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { editCVFilter } from '../ContentViewDetailActions';
+
+export const ArtifactsWithNoErrataRenderer = ({ filterDetails }) => {
+  const dispatch = useDispatch();
+  const { id, inclusion, type } = filterDetails;
+
+  const artifactAttribute = (type === 'modulemd') ? 'original_module_streams' : 'original_packages';
+  const [artifactsNoErrata, enableArtifactsNoErrata] =
+      useState(filterDetails[artifactAttribute] === true);
+
+  const [isLoading, setLoading] = useState(false);
+
+  const setArtifactsNoErrata = (checked) => {
+    enableArtifactsNoErrata(checked);
+    setLoading(true);
+    dispatch(editCVFilter(id, { [artifactAttribute]: checked }, () => setLoading(false)));
+  };
+  const getLabel = () => {
+    switch (true) {
+      case type === 'modulemd' && inclusion:
+        return __('Include all Module Streams with no errata.');
+      case type === 'modulemd' && !inclusion:
+        return __('Exclude all Module Streams with no errata.');
+      case !inclusion:
+        return __('Exclude all RPMs with no errata.');
+      default:
+        return __('Include all RPMs with no errata.');
+    }
+  };
+
+  return (<Checkbox
+    id="artifactsNoErrata"
+    name="artifactsNoErrata"
+    label=<p style={{ marginTop: '4px' }}>{getLabel()}</p>
+    isChecked={artifactsNoErrata}
+    isDisabled={isLoading}
+    onChange={setArtifactsNoErrata}
+  />);
+};
+
+ArtifactsWithNoErrataRenderer.propTypes = {
+  filterDetails: PropTypes.shape({
+    inclusion: PropTypes.bool.isRequired,
+    type: PropTypes.string.isRequired,
+    id: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default ArtifactsWithNoErrataRenderer;