Fixes #36683 - Add help icons to rpm filters (#10698)

(cherry picked from commit 7bf5ec6)
Katello · Sep 20, 2023 · d5146c4 · d5146c4
1 parent cb9a2dc
commit d5146c4
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/webpack/scenes/ContentViews/Details/Filters/MatchContentModal/CVRpmMatchContentModal.js b/webpack/scenes/ContentViews/Details/Filters/MatchContentModal/CVRpmMatchContentModal.js
@@ -3,23 +3,27 @@ import { useSelector, shallowEqual } from 'react-redux';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {
-  Modal, ModalVariant,
+  Modal, ModalVariant, Popover, Button,
 } from '@patternfly/react-core';
+import {
+  HelpIcon,
+} from '@patternfly/react-icons';
 import { TableVariant, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
 import TableWrapper from '../../../../../components/Table/TableWrapper';
 import { getRPMPackages } from '../../ContentViewDetailActions';
 import { selectRPMPackages, selectRPMPackagesStatus } from '../../ContentViewDetailSelectors';
+import './matchContentModal.scss';
 
 
 const columnHeaders = [
   __('RPM name'),
   __('Summary'),
 ];
 
-const emptyContentTitle = __('No matching RPM found.');
-const emptyContentBody = __("Given criteria doesn't match any RPMs. Try changing your rule.");
-const emptySearchTitle = __('Your search returned no matching RPMs.');
+const emptyContentTitle = __('No matching non-modular RPM found.');
+const emptyContentBody = __("Given criteria doesn't match any non-modular RPMs. Try changing your rule.");
+const emptySearchTitle = __('Your search returned no matching non-modular RPMs.');
 const emptySearchBody = __('Try changing your search criteria.');
 
 const CVRpmMatchContentModal = ({ filterId, onClose, filterRuleId }) => {
@@ -41,6 +45,16 @@ const CVRpmMatchContentModal = ({ filterId, onClose, filterRuleId }) => {
       isOpen
       onClose={onClose}
       appendTo={document.body}
+      help={
+        <Popover
+          headerContent={__('Help')}
+          bodyContent={__("Matching RPMs based on your created filter rule. Remember, RPM filters don't apply to modular RPMs.")}
+        >
+          <Button variant="plain" aria-label="Help" ouiaId="matching-content-modal-help">
+            <HelpIcon />
+          </Button>
+        </Popover>
+      }
     >
       <TableWrapper
         {...{

diff --git a/webpack/scenes/ContentViews/Details/Filters/MatchContentModal/matchContentModal.scss b/webpack/scenes/ContentViews/Details/Filters/MatchContentModal/matchContentModal.scss
@@ -0,0 +1,3 @@
+.pf-c-empty-state {
+  margin-top: 0;
+}
diff --git a/webpack/scenes/ContentViews/Details/Filters/Rules/Package/AddEditPackageRuleModal.js b/webpack/scenes/ContentViews/Details/Filters/Rules/Package/AddEditPackageRuleModal.js
@@ -6,8 +6,11 @@ import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {
   Modal, ModalVariant, Form, FormGroup, TextInput,
-  ActionGroup, Button, FormSelect, FormSelectOption,
+  ActionGroup, Button, FormSelect, FormSelectOption, Popover,
 } from '@patternfly/react-core';
+import {
+  HelpIcon,
+} from '@patternfly/react-icons';
 import { addCVFilterRule, editCVFilterRule, getCVFilterRules } from '../../../ContentViewDetailActions';
 import {
   selectCreateFilterRuleStatus,
@@ -135,6 +138,17 @@ const AddEditPackageRuleModal = ({
       isOpen
       onClose={onClose}
       appendTo={document.body}
+      help={
+        <Popover
+          headerContent={__('Help')}
+          bodyContent={__('Use filter rules to include or restrict certain content. ' +
+        "When selecting RPMs, be aware that RPM filters don't apply to modular RPMs.")}
+        >
+          <Button variant="plain" aria-label="Help" ouiaId="rpm-filter-rule-modal-help">
+            <HelpIcon />
+          </Button>
+        </Popover>
+      }
     >
       <Form onSubmit={(e) => {
         e.preventDefault();