katello 4.5.1 → 4.8.0.rc2

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

@@ -109,7 +109,12 @@ const CVErrataDateFilterContent = ({
   const invalidDateFormat = __('Enter a valid date: MM/DD/YYYY');
 
   return (
-    <Tabs className="margin-0-24" activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+    <Tabs
+      className="margin-0-24"
+      ouiaId="errata-date-filter-tabs"
+      activeKey={activeTabKey}
+      onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}
+    >
       <Tab eventKey={0} title={<TabTitleText>{tabTitle}</TabTitleText>}>
         <div className="margin-24">
           <Form onSubmit={(e) => {
@@ -125,6 +130,7 @@ const CVErrataDateFilterContent = ({
                   onSelect={(_event, selection) => onTypeSelect(selection)}
                   selections={selectedTypes}
                   isOpen={typeSelectOpen}
+                  ouiaId="errata-type-selector"
                   placeholderText={__('Errata type')}
                   isCheckboxSelectionBadgeHidden
                 >
@@ -180,6 +186,7 @@ const CVErrataDateFilterContent = ({
                   isOpen={dateTypeSelectOpen}
                   onToggle={setDateTypeSelectOpen}
                   id="date_type_selector"
+                  ouiaId="date_type_selector"
                   name="date_type_selector"
                   aria-label="date_type_selector"
                   isDisabled={!hasPermission(permissions, 'edit_content_views')}
@@ -198,7 +205,7 @@ const CVErrataDateFilterContent = ({
                     value={startDate}
                     invalidFormatText={invalidDateFormat}
                     dateFormat={dateFormat}
-                    onChange={setStartDate}
+                    onChange={(e, val) => setStartDate(val)}
                     dateParse={dateParse}
                     placeholder={startEntry ? 'MM/DD/YYYY' : __('Start date')}
                     isDisabled={!hasPermission(permissions, 'edit_content_views')}
@@ -207,7 +214,7 @@ const CVErrataDateFilterContent = ({
               </FlexItem>
               <FlexItem spacer={{ default: 'spacerNone' }}>
                 <Bullseye style={{ padding: '0 5px' }}>
-                  <Text>{__('to')}</Text>
+                  <Text ouiaId="to-text">{__('to')}</Text>
                 </Bullseye>
               </FlexItem>
               <FlexItem span={2}>
@@ -220,7 +227,7 @@ const CVErrataDateFilterContent = ({
                     value={endDate}
                     invalidFormatText={invalidDateFormat}
                     dateFormat={dateFormat}
-                    onChange={setEndDate}
+                    onChange={(e, val) => setEndDate(val)}
                     dateParse={dateParse}
                     placeholder={endEntry ? 'MM/DD/YYYY' : __('End date')}
                     isDisabled={!hasPermission(permissions, 'edit_content_views')}
@@ -230,9 +237,10 @@ const CVErrataDateFilterContent = ({
             </Flex>
             <Flex>
               <FlexItem>
-                <ChipGroup categoryName={__('Type')}>
+                <ChipGroup ouiaId="chipgroup-type" categoryName={__('Type')}>
                   {selectedTypes.map(type => (
                     <Chip
+                      ouiaId={type}
                       key={type}
                       onClick={() => onTypeSelect(type)}
                       isReadOnly={singleSelection(type) || !hasPermission(permissions, 'edit_content_views')}
@@ -243,12 +251,20 @@ const CVErrataDateFilterContent = ({
                 </ChipGroup>
               </FlexItem>
               <FlexItem>
-                <ChipGroup categoryName={dateType === 'issued' ? __('Issued from') : __('Updated from')}>
-                  <Chip key="startDate" onClick={() => setStartDate('')} isReadOnly={!startDate || !hasPermission(permissions, 'edit_content_views')}>
+                <ChipGroup
+                  ouiaId="chip-issued"
+                  categoryName={dateType === 'issued' ? __('Issued from') : __('Updated from')}
+                >
+                  <Chip
+                    ouiaId="startDate"
+                    key="startDate"
+                    onClick={() => setStartDate('')}
+                    isReadOnly={!startDate || !hasPermission(permissions, 'edit_content_views')}
+                  >
                     {startDate || __('ANY')}
                   </Chip>
                   {__('to')}
-                  <Chip key="endDate" onClick={() => setEndDate('')} isReadOnly={!endDate || !hasPermission(permissions, 'edit_content_views')}>
+                  <Chip ouiaId="startDate" key="endDate" onClick={() => setEndDate('')} isReadOnly={!endDate || !hasPermission(permissions, 'edit_content_views')}>
                     {endDate || __('ANY')}
                   </Chip>
                 </ChipGroup>

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

@@ -206,12 +206,12 @@ const CVErrataIDFilterContent = ({
     } else setSelectedTypes([...selectedTypes, selection]);
   };
 
-  const setValidStartDate = (value) => {
+  const setValidStartDate = (e, value) => {
     setStartDate(value);
     if (validAPIDate(value)) setApiStartDate(value);
   };
 
-  const setValidEndDate = (value) => {
+  const setValidEndDate = (e, value) => {
     setEndDate(value);
     if (validAPIDate(value)) setApiEndDate(value);
   };
@@ -247,7 +247,12 @@ const CVErrataIDFilterContent = ({
   const invalidDateFormat = __('Enter a valid date: MM/DD/YYYY');
 
   return (
-    <Tabs className="margin-0-24" activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+    <Tabs
+      className="margin-0-24"
+      ouiaId="errata-filter-tabs"
+      activeKey={activeTabKey}
+      onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}
+    >
       <Tab eventKey={0} title={<TabTitleText>{__('Errata')}</TabTitleText>}>
         <div className="margin-24-0">
           <TableWrapper
@@ -264,13 +269,16 @@ const CVErrataIDFilterContent = ({
               status,
               activeFilters,
               defaultFilters,
+              resetFilters,
             }}
             ouiaId="content-view-errata-by-id-filter-table"
             actionResolver={hasPermission(permissions, 'edit_content_views') ? actionResolver : null}
             onSelect={hasPermission(permissions, 'edit_content_views') ? onSelect(rows, setRows) : null}
             cells={columnHeaders}
             variant={TableVariant.compact}
-            autocompleteEndpoint={`/errata/auto_complete_search?filterid=${filterId}`}
+            autocompleteEndpoint="/katello/api/v2/errata"
+            autocompleteQueryParams={{ filterid: filterId }}
+            bookmarkController="katello_content_view_erratum_filter_rules"
             additionalListeners={[statusSelected, selectedTypes.length,
               dateType, apiStartDate, apiEndDate]}
             fetchItems={useCallback(params =>
@@ -285,11 +293,13 @@ const CVErrataIDFilterContent = ({
                     setSelected={setStatusSelected}
                     placeholderText={__('Status')}
                     aria-label="status_selector"
+                    ouiaId="status-selector"
                   />
                 </SplitItem>
                 <SplitItem>
                   <Select
                     aria-label="errata_type_selector"
+                    ouiaId="errata_type_selector"
                     variant={SelectVariant.checkbox}
                     onToggle={setTypeSelectOpen}
                     onSelect={(_event, selection) => onTypeSelect(selection)}
@@ -327,9 +337,10 @@ const CVErrataIDFilterContent = ({
                     <Dropdown
                       toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
                       isOpen={bulkActionOpen}
+                      ouiaId="cv-errata-id-bulk-action-dropdown"
                       isPlain
                       dropdownItems={[
-                        <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={bulkRemove}>
+                        <DropdownItem ouiaId="bulk-remove" aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={bulkRemove}>
                           {__('Remove')}
                         </DropdownItem>]
                       }
@@ -352,6 +363,7 @@ const CVErrataIDFilterContent = ({
                       onToggle={setDateTypeSelectOpen}
                       id="date_type_selector"
                       name="date_type_selector"
+                      ouiaId="date_type_selector"
                       aria-label="date_type_selector"
                     >
                       <SelectOption key="issued" value="issued">{__('Issued from')}</SelectOption>
@@ -376,7 +388,7 @@ const CVErrataIDFilterContent = ({
                   </FlexItem>
                   <FlexItem spacer={{ default: 'spacerNone' }}>
                     <Bullseye style={{ padding: '0 5px' }}>
-                      <Text>{__('to')}</Text>
+                      <Text ouiaId="to-text">{__('to')}</Text>
                     </Bullseye>
                   </FlexItem>
                   <FlexItem span={2}>
@@ -398,27 +410,28 @@ const CVErrataIDFilterContent = ({
                 </Flex>
                 <Flex>
                   <FlexItem>
-                    <ChipGroup categoryName={__('Status')}>
-                      <Chip key="status" onClick={() => setStatusSelected(ALL_STATUSES)} isReadOnly={statusSelected === ALL_STATUSES}>
+                    <ChipGroup ouiaId="status-chipgroup" categoryName={__('Status')}>
+                      <Chip ouiaId="status" key="status" onClick={() => setStatusSelected(ALL_STATUSES)} isReadOnly={statusSelected === ALL_STATUSES}>
                         {statusSelected}
                       </Chip>
                     </ChipGroup>
                   </FlexItem>
                   <FlexItem>
-                    <ChipGroup categoryName={dateType === 'issued' ? __('Issued from') : __('Updated from')}>
-                      <Chip key="startDate" onClick={() => setValidStartDate('')} isReadOnly={startDate === ''}>
+                    <ChipGroup ouiaId="issued-chipgroup" categoryName={dateType === 'issued' ? __('Issued from') : __('Updated from')}>
+                      <Chip ouiaId="startDate" key="startDate" onClick={() => setValidStartDate('')} isReadOnly={startDate === ''}>
                         {startDate || __('ANY')}
                       </Chip>
                       {__('to')}
-                      <Chip key="endDate" onClick={() => setValidEndDate('')} isReadOnly={endDate === ''}>
+                      <Chip ouiaId="endDate" key="endDate" onClick={() => setValidEndDate('')} isReadOnly={endDate === ''}>
                         {endDate || __('ANY')}
                       </Chip>
                     </ChipGroup>
                   </FlexItem>
                   <FlexItem>
-                    <ChipGroup categoryName={__('Type')}>
+                    <ChipGroup ouiaId="type-chipgroup" categoryName={__('Type')}>
                       {selectedTypes.map(type => (
                         <Chip
+                          ouiaId={`chip-${type}`}
                           key={type}
                           onClick={() => onTypeSelect(type)}
                           isReadOnly={singleSelection(type)}

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

@@ -25,7 +25,6 @@ import getContentViewDetails, {
 } from '../ContentViewDetailActions';
 import AddedStatusLabel from '../../../../components/AddedStatusLabel';
 import AffectedRepositoryTable from './AffectedRepositories/AffectedRepositoryTable';
-import { ArtifactsWithNoErrataRenderer } from './ArtifactsWithNoErrata';
 import { ADDED, ALL_STATUSES, NOT_ADDED } from '../../ContentViewsConstants';
 import { hasPermission } from '../../helpers';
 
@@ -75,6 +74,8 @@ const CVModuleStreamFilterContent = ({
   ];
   const selectedAdded = allAddedNotAdded[selectedIndex];
 
+  const resetFilters = () => setSelectedIndex(0);
+
   const fetchItems = useCallback((params) => {
     const adjustedParams = { ...params };
     switch (selectedIndex) {
@@ -200,7 +201,12 @@ const CVModuleStreamFilterContent = ({
 
 
   return (
-    <Tabs className="margin-0-24" activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+    <Tabs
+      className="margin-0-24"
+      ouiaId="module-stream-filter-content-tabs"
+      activeKey={activeTabKey}
+      onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}
+    >
       <Tab eventKey={0} title={<TabTitleText>{__('Module Streams')}</TabTitleText>}>
         <div className="margin-24-0">
           <TableWrapper
@@ -215,6 +221,7 @@ const CVModuleStreamFilterContent = ({
               updateSearchQuery,
               error,
               status,
+              resetFilters,
             }}
             ouiaId="content-view-module-stream-filter-table"
             additionalListeners={[selectedIndex]}
@@ -222,7 +229,9 @@ const CVModuleStreamFilterContent = ({
             defaultFilters={[allAddedNotAdded[0]]}
             cells={columnHeaders}
             variant={TableVariant.compact}
-            autocompleteEndpoint={`/module_streams/auto_complete_search?filterid=${filterId}`}
+            autocompleteEndpoint="/katello/api/v2/module_streams"
+            autocompleteQueryParams={{ filterid: filterId }}
+            bookmarkController="katello_content_view_module_stream_filter_rules"
             fetchItems={fetchItems}
             actionResolver={hasPermission(permissions, 'edit_content_views') ? actionResolver : null}
             onSelect={hasPermission(permissions, 'edit_content_views') ? onSelect(rows, setRows) : null}
@@ -232,6 +241,7 @@ const CVModuleStreamFilterContent = ({
                   <Select
                     variant={SelectVariant.single}
                     onToggle={setSelectOpen}
+                    ouiaId="added-notAdded-selector"
                     onSelect={(_event, selection) => {
                       setSelectedIndex(allAddedNotAdded.indexOf(selection));
                       setSelectOpen(false);
@@ -259,19 +269,15 @@ const CVModuleStreamFilterContent = ({
                   <Dropdown
                     toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
                     isOpen={bulkActionOpen}
+                    ouiaId="bulk-actions-dropdown"
                     isPlain
                     dropdownItems={[
-                      <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={bulkRemove}>
+                      <DropdownItem ouiaId="bulk-remove" aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={bulkRemove}>
                         {__('Remove')}
                       </DropdownItem>]
                     }
                   />
                 </SplitItem>
-                <SplitItem>
-                  <ArtifactsWithNoErrataRenderer
-                    filterDetails={filterDetails}
-                  />
-                </SplitItem>
               </Split>
             }
           />

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,10 +188,15 @@ 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)}>
+    <Tabs
+      ouiaId="cv-package-group-filter-content"
+      className="margin-0-24"
+      activeKey={activeTabKey}
+      onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}
+    >
       <Tab eventKey={0} title={<TabTitleText>{__('Package groups')}</TabTitleText>}>
         <div className="margin-24-0">
           <TableWrapper
@@ -205,6 +211,7 @@ const CVPackageGroupFilterContent = ({
               updateSearchQuery,
               error,
               status,
+              resetFilters,
             }}
             ouiaId="content-view-package-group-filter-table"
             additionalListeners={[selectedIndex]}
@@ -212,7 +219,9 @@ const CVPackageGroupFilterContent = ({
             defaultFilters={[allAddedNotAdded[0]]}
             cells={columnHeaders}
             variant={TableVariant.compact}
-            autocompleteEndpoint={`/package_groups/auto_complete_search?filterid=${filterId}`}
+            autocompleteEndpoint="/katello/api/v2/package_groups"
+            autocompleteQueryParams={{ filterid: filterId }}
+            bookmarkController="katello_content_view_package_group_filter_rules"
             fetchItems={fetchItems}
             actionResolver={hasPermission(permissions, 'edit_content_views') ? actionResolver : null}
             onSelect={hasPermission(permissions, 'edit_content_views') ? onSelect(rows, setRows) : null}
@@ -222,6 +231,7 @@ const CVPackageGroupFilterContent = ({
                   <Select
                     variant={SelectVariant.single}
                     onToggle={setSelectOpen}
+                    ouiaId="allAddedNotAdded"
                     onSelect={(_event, selection) => {
                       setSelectedIndex(allAddedNotAdded.indexOf(selection));
                       setSelectOpen(false);
@@ -249,9 +259,10 @@ const CVPackageGroupFilterContent = ({
                   <Dropdown
                     toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
                     isOpen={bulkActionOpen}
+                    ouiaId="cv-package-group-filter-bulk-actions-dropdown"
                     isPlain
                     dropdownItems={[
-                      <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={bulkRemove}>
+                      <DropdownItem ouiaId="bulk_remove" aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={bulkRemove}>
                         {__('Remove')}
                       </DropdownItem>]
                     }

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

@@ -3,10 +3,9 @@ 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';
 import onSelect from '../../../../components/Table/helpers';
 import TableWrapper from '../../../../components/Table/TableWrapper';
 import {
@@ -106,7 +105,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,8 +144,24 @@ 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)}>
+    <Tabs
+      className="margin-0-24"
+      ouiaId="cv-rpm-filter-content-tabs"
+      activeKey={activeTabKey}
+      onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}
+    >
       <Tab eventKey={0} title={<TabTitleText>{tabTitle}</TabTitleText>}>
         <div className="margin-24-0">
           <TableWrapper
@@ -160,13 +175,16 @@ const CVRpmFilterContent = ({
               searchQuery,
               updateSearchQuery,
               status,
+              showPrimaryAction,
+              primaryActionButton,
             }}
             ouiaId="content-view-rpm-filter-table"
             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_package_filter_rules"
             fetchItems={useCallback(params => getCVFilterRules(filterId, params), [filterId])}
             actionButtons={
               <>
@@ -178,6 +196,7 @@ const CVRpmFilterContent = ({
                     onClose={onClose}
                   />}
                 {hasPermission(permissions, 'edit_content_views') &&
+                  status === STATUS.RESOLVED && rows.length !== 0 &&
                   <Split hasGutter>
                     <SplitItem>
                       <Button
@@ -191,23 +210,18 @@ const CVRpmFilterContent = ({
                     </SplitItem>
                     <SplitItem>
                       <Dropdown
+                        ouiaId="rpm-filter-content-bulk-actions"
                         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}>
+                          <DropdownItem ouiaId="bulk-remove" aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasSelected} component="button" onClick={bulkRemove}>
                             {__('Remove')}
                           </DropdownItem>]
                         }
                       />
                     </SplitItem>
-                    <SplitItem>
-                      <ArtifactsWithNoErrataRenderer
-                        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/ContentViewFilterDetailsHeader.js

@@ -1,23 +1,46 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
 import { head } from 'lodash';
-import { Split, SplitItem, Grid, GridItem, TextContent, Text, TextVariants, Label } from '@patternfly/react-core';
+import {
+  Split,
+  SplitItem,
+  Grid,
+  GridItem,
+  TextContent,
+  Text,
+  TextVariants,
+  Label,
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+  DropdownPosition,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { useDispatch } from 'react-redux';
-import { getCVFilterDetails, editCVFilter } from '../ContentViewDetailActions';
+import {
+  getCVFilterDetails,
+  editCVFilter,
+  deleteContentViewFilter,
+} from '../ContentViewDetailActions';
 import AffectedRepositorySelection from './AffectedRepositories/AffectedRepositorySelection';
 import RepoIcon from '../Repositories/RepoIcon';
 import { repoType } from '../../../../utils/helpers';
 import { hasPermission } from '../../helpers';
 import { typeName } from './ContentType';
 import ActionableDetail from '../../../../components/ActionableDetail';
+import { ArtifactsWithNoErrataRenderer } from './ArtifactsWithNoErrata';
 
 const ContentViewFilterDetailsHeader = ({
   cvId, filterId, filterDetails, setShowAffectedRepos, details,
 }) => {
   const dispatch = useDispatch();
+  const { push } = useHistory();
   const [currentAttribute, setCurrentAttribute] = useState('');
   const [loading, setLoading] = useState(false);
+  const [dropDownOpen, setDropdownOpen] = useState(false);
   const {
     type, name, inclusion, description, rules,
   } = filterDetails;
@@ -41,6 +64,21 @@ const ContentViewFilterDetailsHeader = ({
     ));
   };
 
+  const dropDownItems = [
+    <DropdownItem
+      key="delete"
+      ouiaId="cv-filter-delete"
+      onClick={() => {
+        dispatch(deleteContentViewFilter(filterId, () => {
+          push(`/content_views/${cvId}#/filters/`);
+        }));
+      }}
+    >
+      {__('Delete')}
+    </DropdownItem>,
+  ];
+
+  const showArtifactsWithNoErrata = (type === 'rpm' || type === 'modulemd');
   return (
     <Grid className="margin-0-24">
       <GridItem span={9}>
@@ -58,7 +96,14 @@ const ContentViewFilterDetailsHeader = ({
             setCurrentAttribute={setCurrentAttribute}
           />
         </TextContent>
-        <TextContent style={{ padding: '24px 0 12px' }}>
+        {showArtifactsWithNoErrata &&
+          <TextContent style={{ padding: '12px 0 12px' }}>
+            <ArtifactsWithNoErrataRenderer
+              filterDetails={filterDetails}
+            />
+          </TextContent>
+        }
+        <TextContent style={{ padding: '12px 0 12px' }}>
           <ActionableDetail
             key={description} // This fixes a render issue with the initial value
             textArea
@@ -74,12 +119,27 @@ const ContentViewFilterDetailsHeader = ({
         </TextContent>
       </GridItem>
       <GridItem span={3} style={{ float: 'right' }}>
-        <AffectedRepositorySelection
-          cvId={cvId}
-          filterId={filterId}
-          setShowAffectedRepos={setShowAffectedRepos}
-          disabled={!hasPermission(permissions, 'edit_content_views')}
-        />
+        <Flex justifyContent={{ lg: 'justifyContentFlexEnd', sm: 'justifyContentFlexStart' }}>
+          <FlexItem>
+            <AffectedRepositorySelection
+              cvId={cvId}
+              filterId={filterId}
+              setShowAffectedRepos={setShowAffectedRepos}
+              disabled={!hasPermission(permissions, 'edit_content_views')}
+            />
+          </FlexItem>
+          <FlexItem>
+            <Dropdown
+              ouiaId="cv-filter-actions-kebab"
+              position={DropdownPosition.right}
+              style={{ marginLeft: 'auto' }}
+              toggle={<KebabToggle onToggle={setDropdownOpen} id="toggle-dropdown" />}
+              isOpen={dropDownOpen}
+              isPlain
+              dropdownItems={dropDownItems}
+            />
+          </FlexItem>
+        </Flex>
       </GridItem>
       <GridItem span={10}>
         <Split hasGutter style={{ alignItems: 'baseline' }}>
@@ -90,7 +150,7 @@ const ContentViewFilterDetailsHeader = ({
             <RepoIcon type={repositoryType} />
           </SplitItem>
           <SplitItem>
-            <Text component={TextVariants.p}>
+            <Text ouiaId={`text-${displayedType()}`} component={TextVariants.p}>
               {displayedType()}
             </Text>
           </SplitItem>