From d5146c4c8d09bad3fc14aab63e23d4a15770a1e1 Mon Sep 17 00:00:00 2001
From: Samir Jha <sjha4@ncsu.edu>
Date: Wed, 13 Sep 2023 16:00:39 -0400
Subject: [PATCH] Fixes #36683 - Add help icons to rpm filters (#10698)

(cherry picked from commit 7bf5ec6b164600eca14f8ce10d895fae70590100)
---
 .../CVRpmMatchContentModal.js                 | 22 +++++++++++++++----
 .../MatchContentModal/matchContentModal.scss  |  3 +++
 .../Rules/Package/AddEditPackageRuleModal.js  | 16 +++++++++++++-
 3 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 webpack/scenes/ContentViews/Details/Filters/MatchContentModal/matchContentModal.scss

diff --git a/webpack/scenes/ContentViews/Details/Filters/MatchContentModal/CVRpmMatchContentModal.js b/webpack/scenes/ContentViews/Details/Filters/MatchContentModal/CVRpmMatchContentModal.js
index 162b338e807..36874724156 100644
--- a/webpack/scenes/ContentViews/Details/Filters/MatchContentModal/CVRpmMatchContentModal.js
+++ b/webpack/scenes/ContentViews/Details/Filters/MatchContentModal/CVRpmMatchContentModal.js
@@ -3,13 +3,17 @@ 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 = [
@@ -17,9 +21,9 @@ const columnHeaders = [
   __('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
new file mode 100644
index 00000000000..b0fd6c70f01
--- /dev/null
+++ b/webpack/scenes/ContentViews/Details/Filters/MatchContentModal/matchContentModal.scss
@@ -0,0 +1,3 @@
+.pf-c-empty-state {
+  margin-top: 0;
+}
\ No newline at end of file
diff --git a/webpack/scenes/ContentViews/Details/Filters/Rules/Package/AddEditPackageRuleModal.js b/webpack/scenes/ContentViews/Details/Filters/Rules/Package/AddEditPackageRuleModal.js
index 2cc2454cc9e..44e11817875 100644
--- 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();