foreman_rh_cloud 14.3.0 → 14.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1c2ad7078753ff687e7dfa1cf410efbfbc3f1ad9b8dc74500f9e77bf0c9a7fc9
-  data.tar.gz: 9eb2679eb38c91fa3c1163915328d91959f7e6408e73bd4fc0c4d7fe98b9a0cf
+  metadata.gz: '03458c064241e69e2f5384094f124fd0911a9bb2b08a0e299581c8d5c22ef5da'
+  data.tar.gz: 4a14089d8e6410a5389473824d6206637370a34c552dcd178fe843b2eea3307c
 SHA512:
-  metadata.gz: 0e4cb92c3a41b257ebf018a988ced92b086aa5cec373214888bb22a3dc43f765a007f42182b1da6a058c97b8633d59e1239efef658c3e0d53744bb9b8fc41125
-  data.tar.gz: 780195de89dcac76c3774a8b48ae67c7c52ad8b2b4f1029020e1c1e42ec701092f2122ff4caec64de083cf01094ebac40b42cf1d0985d06fdbbc46838331d541
+  metadata.gz: c5daadeadfe2543a242aea723e832b4fcc5f7ac31a598fc05f34792e1c58042ec993718e07b96bff3841b35f366438b8ed7e52166fe94ea118f635f9caadfa16
+  data.tar.gz: c6008984ca0d88a5bcc51a1d6fd288e031b51238a0c561fcdb414cc967b7814750a529c5f5c0916866401dd922b71efd9fc20ad0b927fb2faec36ee21d5ae859

data/lib/foreman_rh_cloud/version.rb

@@ -1,3 +1,3 @@
 module ForemanRhCloud
-  VERSION = '14.3.0'.freeze
+  VERSION = '14.4.0'.freeze
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foreman_rh_cloud",
-  "version": "14.3.0",
+  "version": "14.4.0",
   "description": "Inventory Upload =============",
   "main": "index.js",
   "scripts": {

data/webpack/ForemanInventoryUpload/Components/InventorySettings/MinimalInventoryDropdown.js

@@ -79,6 +79,7 @@ const MinimalInventoryDropdown = ({ setChosenValue }) => {
           isFullWidth
           onClick={onToggleClick}
           isExpanded={isOpen}
+          ouiaId="inventory-dropdown-toggle"
         >
           {dropdownValues[currentDropdownValue].title}
         </MenuToggle>

data/webpack/ForemanInventoryUpload/Components/PageHeader/PageTitle.js

@@ -59,6 +59,7 @@ const PageTitle = () => {
               variant="plain"
               onClick={() => setIsDropdownOpen(prev => !prev)}
               isExpanded={isDropdownOpen}
+              ouiaId="title-dropdown-toggle"
             >
               <EllipsisVIcon />
             </MenuToggle>

data/webpack/ForemanRhCloudPages.js

@@ -5,6 +5,7 @@ import ForemanInventoryUpload from './ForemanInventoryUpload';
 import InsightsVulnerabilityListPage from './InsightsVulnerability/InsightsVulnerabilityListPage';
 import InsightsCloudSync from './InsightsCloudSync';
 import IopRecommendationDetails from './IopRecommendationDetails/IopRecommendationDetails';
+import IopPathwayDetails from './IopPathwayDetails/IopPathwayDetails';
 import InsightsHostDetailsTab from './InsightsHostDetailsTab';
 import CveDetailsPage from './CveDetailsPage';
 import './common/styles.scss';
@@ -31,6 +32,11 @@ export const routes = [
     exact: true,
     render: props => <InsightsCloudSync {...props} />,
   },
+  {
+    path: '/foreman_rh_cloud/recommendations/pathways/:slug',
+    exact: false,
+    render: props => <IopPathwayDetails {...props} />,
+  },
   {
     path: '/foreman_rh_cloud/recommendations',
     exact: false,

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsLabel.js

@@ -7,21 +7,22 @@ import {
 } from '@patternfly/react-icons';
 import { Label } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
 
 const VALUE_TO_STATE = {
-  1: { icon: <AngleDoubleDownIcon />, text: 'Low', color: 'blue' },
-  2: { icon: <EqualsIcon />, text: 'Moderate', color: 'yellow' },
-  3: { icon: <AngleDoubleUpIcon />, text: 'Important', color: 'orange' },
-  4: { icon: <CriticalRiskIcon />, text: 'Critical', color: 'red' },
+  1: { icon: <AngleDoubleDownIcon />, text: __('Low'), color: 'blue' },
+  2: { icon: <EqualsIcon />, text: __('Moderate'), color: 'yellow' },
+  3: { icon: <AngleDoubleUpIcon />, text: __('Important'), color: 'orange' },
+  4: { icon: <CriticalRiskIcon />, text: __('Critical'), color: 'red' },
 };
 
 const InsightsLabel = ({ value = 1, text, hideIcon, ...props }) => (
   <Label
     {...props}
-    color={VALUE_TO_STATE[value].color}
-    icon={!hideIcon && VALUE_TO_STATE[value].icon}
+    color={VALUE_TO_STATE[value]?.color}
+    icon={!hideIcon && VALUE_TO_STATE[value]?.icon}
   >
-    {text || VALUE_TO_STATE[value].text}
+    {text || VALUE_TO_STATE[value]?.text}
   </Label>
 );
 

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableConstants.js

@@ -31,7 +31,7 @@ export const actionsFormatter = rowData => {
   recommendationUrl &&
     !isLocalAdvisorEngine &&
     dropdownItems.push(
-      <DropdownItem key="recommendation-url">
+      <DropdownItem key="recommendation-url" ouiaId="insights-dropdown-item-recommendation-url">
         <a href={recommendationUrl} target="_blank" rel="noopener noreferrer">
           {__('View in Red Hat Insights')} <ExternalLinkAltIcon />
         </a>
@@ -40,7 +40,7 @@ export const actionsFormatter = rowData => {
 
   accessRHUrl &&
     dropdownItems.push(
-      <DropdownItem key="access-url">
+      <DropdownItem key="access-url" ouiaId="insights-dropdown-item-knowledgebase">
         <a href={accessRHUrl} target="_blank" rel="noopener noreferrer">
           {__('Knowledgebase article')} <ExternalLinkAltIcon />
         </a>

data/webpack/InsightsCloudSync/Components/InsightsTable/Pagination.js

@@ -42,6 +42,7 @@ const Pagination = ({ variant, ...props }) => {
 
   return (
     <PfPagination
+      ouiaId={`recommendations-pagination-${variant}`}
       itemCount={itemCount}
       widgetId={`recommendation-pagination-${variant}`}
       perPage={perPage}

data/webpack/InsightsCloudSync/Components/ToolbarDropdown.js

@@ -53,6 +53,7 @@ const ToolbarDropdown = ({ onRecommendationSync }) => {
           aria-label={__('Recommendations actions')}
           onClick={() => setIsDropdownOpen(prev => !prev)}
           isExpanded={isDropdownOpen}
+          ouiaId="recommendations-dropdown-toggle"
         >
           <EllipsisVIcon />
         </MenuToggle>

data/webpack/InsightsHostDetailsTab/InsightsTab.js

@@ -1,56 +1,70 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { orderBy } from 'lodash';
-import { Grid, ListView } from 'patternfly-react';
+import { Accordion, Grid, GridItem, Title } from '@patternfly/react-core';
 import { noop } from 'foremanReact/common/helpers';
 import { translate as __ } from 'foremanReact/common/I18n';
 import ListItem from './components/ListItem';
 import './InsightsTab.scss';
 
-class InsightsHostDetailsTab extends React.Component {
-  componentDidMount() {
-    const { fetchHits, hostID } = this.props;
+const InsightsHostDetailsTab = ({ fetchHits, hostID, hits }) => {
+  useEffect(() => {
     fetchHits(hostID);
-  }
-
-  render() {
-    const { hits } = this.props;
+  }, [hostID]);
 
-    if (!hits.length) {
-      return <h2>{__('No recommendations were found for this host!')}</h2>;
-    }
-    const hitsSorted = orderBy(hits, ['total_risk'], ['desc']);
-    const items = hitsSorted.map(
-      (
-        {
-          title,
-          total_risk: totalRisk,
-          results_url: resultsUrl,
-          solution_url: solutionUrl,
-        },
-        index
-      ) => (
-        <ListItem
-          key={index}
-          title={title}
-          totalRisk={totalRisk}
-          resultsUrl={resultsUrl}
-          solutionUrl={solutionUrl}
-        />
-      )
-    );
+  if (!hits.length) {
     return (
       <div id="host_details_insights_tab">
-        <Grid.Row>
-          <Grid.Col xs={12}>
-            <h2>{__('Recommendations')}</h2>
-            <ListView id="hits_list">{items}</ListView>
-          </Grid.Col>
-        </Grid.Row>
+        <Title
+          headingLevel="h2"
+          size="md"
+          ouiaId="insights-recommendations-empty-title"
+        >
+          {__('No recommendations were found for this host!')}
+        </Title>
       </div>
     );
   }
-}
+
+  const hitsSorted = orderBy(hits, ['total_risk'], ['desc']);
+
+  return (
+    <div id="host_details_insights_tab">
+      <Grid hasGutter>
+        <GridItem span={12}>
+          <Title
+            headingLevel="h2"
+            size="md"
+            ouiaId="insights-recommendations-title"
+          >
+            {__('Recommendations')}
+          </Title>
+          <div id="hits_list" data-testid="hits-list">
+            <Accordion>
+              {hitsSorted.map(
+                ({
+                  id,
+                  title,
+                  total_risk: totalRisk,
+                  results_url: resultsUrl,
+                  solution_url: solutionUrl,
+                }) => (
+                  <ListItem
+                    key={id}
+                    title={title}
+                    totalRisk={totalRisk}
+                    resultsUrl={resultsUrl}
+                    solutionUrl={solutionUrl}
+                  />
+                )
+              )}
+            </Accordion>
+          </div>
+        </GridItem>
+      </Grid>
+    </div>
+  );
+};
 
 InsightsHostDetailsTab.propTypes = {
   hostID: PropTypes.number.isRequired,

data/webpack/InsightsHostDetailsTab/InsightsTab.scss

@@ -1,84 +1,18 @@
 #host_details_insights_tab {
-  #btn_toolbar {
-    float: right;
-  }
-
-  #btn_fullscreen {
-    margin-left: 5px;
-
-    .fa-arrows-alt {
-      margin-left: 5px;
-    }
-  }
-
-  h2 {
-    margin-top: 5px;
-  }
-
   #hits_list {
     max-height: 650px;
     overflow-y: scroll;
     overflow-x: hidden;
-    margin-top: 15px;
-
-    .list-view-pf-expand {
-      padding: 0;
-    }
-
-    .list-group-item-header {
-      .list-view-pf-expand .fa-angle-right {
-        margin-top: 6px;
-      }
-
-      .list-view-pf-main-info .list-view-pf-description {
-        width: 83%;
-
-        .list-group-item-heading {
-          width: 375px;
-        }
-
-        p {
-          margin: 0;
-          font-size: 14px;
-        }
-      }
-
-      .list-view-pf-additional-info {
-        .risk-label {
-          padding: 5px 8px;
-          border-radius: 12px;
-
-          &.risk-1 {
-            background-color: #e7f1fa;
-          }
-
-          &.risk-2 {
-            background-color: #fdf7e7;
-          }
-
-          &.risk-3 {
-            background-color: #f9dddd;
-          }
-
-          &.risk-4 {
-            background-color: #ffecec;
-          }
-
-          p {
-            margin: 0;
-          }
-        }
-      }
-    }
+    margin-top: var(--pf-v5-global--spacer--md);
 
     &::-webkit-scrollbar {
-      width: 12px;
-      height: 12px;
+      width: var(--pf-v5-global--spacer--sm);
+      height: var(--pf-v5-global--spacer--sm);
     }
 
     &::-webkit-scrollbar-thumb {
-      background: #222;
-      border-radius: 6px;
+      background: var(--pf-v5-global--palette--black-900);
+      border-radius: var(--pf-v5-global--BorderRadius--sm);
       border: 3px solid transparent;
       background-clip: content-box;
     }
@@ -86,9 +20,9 @@
 }
 
 #new_host_details_insights_tab {
-  padding: 24px;
+  padding: var(--pf-v5-global--spacer--lg);
 }
 
 #total-risks-dropdown-container ul.pf-v5-c-menu__list {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }

data/webpack/InsightsHostDetailsTab/__tests__/InsightsTab.fixtures.js

@@ -2,6 +2,7 @@ export const hostID = 1234;
 
 export const hits = [
   {
+    id: 1,
     hostname: 'my-host.example.com',
     rhel_version: '7.8',
     uuid: '4739b323-a343-4e89-b71b-81991b8dc656',
@@ -17,6 +18,12 @@ export const hits = [
   },
 ];
 
+export const multipleHits = [
+  { ...hits[0], id: 1, title: 'Low risk', total_risk: 1 },
+  { ...hits[0], id: 2, title: 'High risk', total_risk: 4 },
+  { ...hits[0], id: 3, title: 'Medium risk', total_risk: 2 },
+];
+
 export const props = {
   hostID,
   hits,

data/webpack/InsightsHostDetailsTab/__tests__/InsightsTab.test.js

@@ -1,46 +1,68 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { screen, waitFor, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { rtlHelpers } from 'foremanReact/common/rtlTestHelpers';
 import InsightsTab from '../InsightsTab';
-import { hits, hostID } from './InsightsTab.fixtures';
+import { hits, hostID, multipleHits } from './InsightsTab.fixtures';
+
+const { renderWithI18n } = rtlHelpers;
+
+const renderInsightsTab = (props = {}) =>
+  renderWithI18n(
+    <InsightsTab hostID={hostID} hits={[]} fetchHits={jest.fn()} {...props} />
+  );
 
 describe('InsightsTab', () => {
-  it('renders "No recommendations" message when hits is empty', () => {
-    render(<InsightsTab hostID={hostID} hits={[]} />);
+  it('renders empty state heading when there are no recommendations', async () => {
+    renderInsightsTab({ hits: [] });
+
+    expect(
+      await screen.findByRole('heading', {
+        name: 'No recommendations were found for this host!',
+      })
+    ).toBeInTheDocument();
+
     expect(
-      screen.getByText('No recommendations were found for this host!')
-    ).toBeTruthy();
+      screen.queryByRole('heading', { name: 'Recommendations' })
+    ).not.toBeInTheDocument();
   });
 
-  it('renders Recommendations heading when hits exist', () => {
-    render(<InsightsTab hostID={hostID} hits={hits} />);
-    expect(screen.getByText('Recommendations')).toBeTruthy();
+  it('renders recommendations heading when hits exist', async () => {
+    renderInsightsTab({ hits });
+
+    expect(
+      await screen.findByRole('heading', { name: 'Recommendations' })
+    ).toBeInTheDocument();
   });
 
-  it('displays hit titles', () => {
-    render(<InsightsTab hostID={hostID} hits={hits} />);
-    hits.forEach(hit => {
-      expect(screen.getByText(hit.title)).toBeTruthy();
-    });
+  it('displays recommendation titles in the list', async () => {
+    renderInsightsTab({ hits });
+
+    expect(
+      await screen.findByText(
+        'New Ansible Engine packages are inaccessible when dedicated Ansible repo is not enabled'
+      )
+    ).toBeInTheDocument();
   });
 
-  it('calls fetchHits on mount', () => {
+  it('requests recommendations for the host on mount', async () => {
     const fetchHits = jest.fn();
-    render(<InsightsTab hostID={hostID} hits={[]} fetchHits={fetchHits} />);
-    expect(fetchHits).toHaveBeenCalledWith(hostID);
+
+    renderInsightsTab({ hits: [], fetchHits });
+
+    await waitFor(() => {
+      expect(fetchHits).toHaveBeenCalledWith(hostID);
+    });
   });
 
-  it('sorts hits by total_risk descending', () => {
-    const multipleHits = [
-      { ...hits[0], title: 'Low risk', total_risk: 1 },
-      { ...hits[0], title: 'High risk', total_risk: 4 },
-      { ...hits[0], title: 'Medium risk', total_risk: 2 },
-    ];
-    render(<InsightsTab hostID={hostID} hits={multipleHits} />);
-    const titles = screen.getAllByText(/risk/i).map(el => el.textContent);
-    const highRiskIndex = titles.findIndex(t => t === 'High risk');
-    const mediumRiskIndex = titles.findIndex(t => t === 'Medium risk');
-    const lowRiskIndex = titles.findIndex(t => t === 'Low risk');
-    expect(highRiskIndex).toBeLessThan(mediumRiskIndex);
-    expect(mediumRiskIndex).toBeLessThan(lowRiskIndex);
+  it('sorts recommendations by total risk descending', async () => {
+    renderInsightsTab({ hits: multipleHits });
+
+    const hitsList = await screen.findByTestId('hits-list');
+    const toggles = within(hitsList).getAllByRole('button');
+
+    expect(toggles[0]).toHaveTextContent('High risk');
+    expect(toggles[1]).toHaveTextContent('Medium risk');
+    expect(toggles[2]).toHaveTextContent('Low risk');
   });
 });

data/webpack/InsightsHostDetailsTab/components/ListItem/ListItem.js

@@ -1,33 +1,24 @@
-import React, { Fragment } from 'react';
-import { ListView, Icon } from 'patternfly-react';
+import React, { useState } from 'react';
+import {
+  AccordionContent,
+  AccordionItem,
+  AccordionToggle,
+  Flex,
+  FlexItem,
+  Truncate,
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-
-const labelMapper = {
-  1: __('Low'),
-  2: __('Moderate'),
-  3: __('Important'),
-  4: __('Critical'),
-};
+import InsightsLabel from '../../../InsightsCloudSync/Components/InsightsTable/InsightsLabel';
 
 const ListItem = ({ title, totalRisk, resultsUrl, solutionUrl }) => {
-  const heading = (
-    <p className="ellipsis list-item-heading" title={title}>
-      {title}
-    </p>
-  );
-
-  const riskLabel = labelMapper[totalRisk];
-  const additionalInfo = [
-    <span key={`risk-info-${title}`} className={`risk-label risk-${totalRisk}`}>
-      <p>{riskLabel}</p>
-    </span>,
-  ];
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const knowledgebaseLink = solutionUrl && (
     <p>
       <a href={solutionUrl} target="_blank" rel="noopener noreferrer">
-        {__('Knowledgebase article')} <Icon name="external-link" />
+        {__('Knowledgebase article')} <ExternalLinkAltIcon />
       </a>
     </p>
   );
@@ -35,24 +26,41 @@ const ListItem = ({ title, totalRisk, resultsUrl, solutionUrl }) => {
   const insightsCloudLink = resultsUrl && (
     <p>
       <a href={resultsUrl} target="_blank" rel="noopener noreferrer">
-        {__('Read more about it in RH cloud insights')}{' '}
-        <Icon name="external-link" />
+        {__('Read more about it in RH cloud insights')}
+        <ExternalLinkAltIcon />
       </a>
     </p>
   );
 
   return (
-    <ListView.Item
-      heading={heading}
-      additionalInfo={additionalInfo}
-      hideCloseIcon
-    >
-      <Fragment>
-        <p>{title}</p>
-        {knowledgebaseLink}
-        {insightsCloudLink}
-      </Fragment>
-    </ListView.Item>
+    <AccordionItem>
+      <AccordionToggle
+        onClick={() => setIsExpanded(currentValue => !currentValue)}
+        isExpanded={isExpanded}
+      >
+        <Flex
+          alignItems={{ default: 'alignItemsCenter' }}
+          justifyContent={{ default: 'justifyContentSpaceBetween' }}
+          flexWrap={{ default: 'nowrap' }}
+        >
+          <FlexItem>
+            <Truncate content={title} />
+          </FlexItem>
+          <FlexItem>
+            <InsightsLabel value={totalRisk} />
+          </FlexItem>
+        </Flex>
+      </AccordionToggle>
+      <AccordionContent isHidden={!isExpanded}>
+        {isExpanded && (
+          <>
+            <p>{title}</p>
+            {knowledgebaseLink}
+            {insightsCloudLink}
+          </>
+        )}
+      </AccordionContent>
+    </AccordionItem>
   );
 };
 

data/webpack/InsightsHostDetailsTab/components/ListItem/__tests__/ListItem.test.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { Accordion } from '@patternfly/react-core';
+import { rtlHelpers } from 'foremanReact/common/rtlTestHelpers';
+import ListItem from '../ListItem';
+
+const { renderWithI18n } = rtlHelpers;
+
+const defaultProps = {
+  title: 'Test recommendation title',
+  totalRisk: 2,
+  resultsUrl:
+    'https://cloud.redhat.com/insights/advisor/recommendations/example',
+  solutionUrl: 'https://access.redhat.com/solutions/123456',
+};
+
+const renderListItem = (props = {}) =>
+  renderWithI18n(
+    <Accordion>
+      <ListItem {...defaultProps} {...props} />
+    </Accordion>
+  );
+
+describe('ListItem', () => {
+  it('renders the recommendation title when collapsed', async () => {
+    renderListItem();
+
+    expect(
+      await screen.findByText('Test recommendation title')
+    ).toBeInTheDocument();
+  });
+
+  it('renders the total risk label when collapsed', async () => {
+    renderListItem({ totalRisk: 2 });
+
+    expect(await screen.findByText('Moderate')).toBeInTheDocument();
+  });
+
+  it('does not show detail links before expanding', async () => {
+    renderListItem();
+
+    await screen.findByText('Test recommendation title');
+
+    expect(
+      screen.queryByRole('link', { name: /Knowledgebase article/i })
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('link', {
+        name: /Read more about it in RH cloud insights/i,
+      })
+    ).not.toBeInTheDocument();
+  });
+
+  it('shows detail links after expanding the recommendation', async () => {
+    renderListItem();
+
+    await userEvent.click(await screen.findByRole('button'));
+
+    const knowledgebaseLink = screen.getByRole('link', {
+      name: /Knowledgebase article/i,
+    });
+    expect(knowledgebaseLink).toHaveAttribute('href', defaultProps.solutionUrl);
+    expect(knowledgebaseLink).toHaveAttribute('target', '_blank');
+    expect(knowledgebaseLink).toHaveAttribute('rel', 'noopener noreferrer');
+
+    const insightsCloudLink = screen.getByRole('link', {
+      name: /Read more about it in RH cloud insights/i,
+    });
+    expect(insightsCloudLink).toHaveAttribute('href', defaultProps.resultsUrl);
+    expect(insightsCloudLink).toHaveAttribute('target', '_blank');
+    expect(insightsCloudLink).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('omits the knowledgebase link when no solution URL is provided', async () => {
+    renderListItem({ solutionUrl: '' });
+
+    await userEvent.click(await screen.findByRole('button'));
+
+    expect(
+      screen.queryByRole('link', { name: /Knowledgebase article/i })
+    ).not.toBeInTheDocument();
+
+    const insightsCloudLink = screen.getByRole('link', {
+      name: /Read more about it in RH cloud insights/i,
+    });
+    expect(insightsCloudLink).toBeInTheDocument();
+    expect(insightsCloudLink).toHaveAttribute('target', '_blank');
+    expect(insightsCloudLink).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('omits the insights cloud link when no results URL is provided', async () => {
+    renderListItem({ resultsUrl: '' });
+
+    await userEvent.click(await screen.findByRole('button'));
+
+    const knowledgebaseLink = screen.getByRole('link', {
+      name: /Knowledgebase article/i,
+    });
+    expect(knowledgebaseLink).toBeInTheDocument();
+    expect(knowledgebaseLink).toHaveAttribute('target', '_blank');
+    expect(knowledgebaseLink).toHaveAttribute('rel', 'noopener noreferrer');
+
+    expect(
+      screen.queryByRole('link', {
+        name: /Read more about it in RH cloud insights/i,
+      })
+    ).not.toBeInTheDocument();
+  });
+});

data/webpack/IopPathwayDetails/IopPathwayDetails.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useRouteMatch } from 'react-router-dom';
+import { ScalprumComponent, ScalprumProvider } from '@scalprum/react-core';
+
+import RemediationModal from '../InsightsCloudSync/Components/RemediationModal';
+import { createProviderOptions } from '../common/ScalprumModule/ScalprumContext';
+import { useInsightsPermissions } from '../common/Hooks/PermissionsHooks';
+
+const scope = 'advisor';
+const pathwayModule = './PathwayDetailsWrapped';
+
+const IopPathwayDetails = props => {
+  const pathwayMatch = useRouteMatch(
+    '/foreman_rh_cloud/recommendations/pathways/:slug'
+  );
+  const slug = pathwayMatch?.params?.slug;
+
+  return (
+    <div className="iop-pathway-details-scalprum advisor">
+      <ScalprumComponent
+        scope={scope}
+        module={pathwayModule}
+        pathwayId={slug}
+        IopRemediationModal={RemediationModal}
+        {...props}
+      />
+    </div>
+  );
+};
+
+const IopPathwayDetailsWrapped = props => {
+  const permissions = useInsightsPermissions();
+  return (
+    <ScalprumProvider {...createProviderOptions(permissions)}>
+      <IopPathwayDetails {...props} />
+    </ScalprumProvider>
+  );
+};
+
+export default IopPathwayDetailsWrapped;

data/webpack/IopRecommendationDetails/IopRecommendationDetails.js

@@ -8,30 +8,12 @@ import { useInsightsPermissions } from '../common/Hooks/PermissionsHooks';
 
 const scope = 'advisor';
 const module = './RecommendationDetailsWrapped';
-const pathwayModule = './PathwayDetailsWrapped';
 
 const IopRecommendationDetails = props => {
-  const pathwayMatch = useRouteMatch(
-    '/foreman_rh_cloud/recommendations/pathways/:slug'
-  );
   const urlParams = useRouteMatch('/foreman_rh_cloud/recommendations/:rule_id');
   // eslint-disable-next-line camelcase
   const ruleId = urlParams?.params?.rule_id;
 
-  if (pathwayMatch) {
-    return (
-      <div className="iop-pathway-details-scalprum advisor">
-        <ScalprumComponent
-          scope={scope}
-          module={pathwayModule}
-          pathwayId={pathwayMatch.params.slug}
-          IopRemediationModal={RemediationModal}
-          {...props}
-        />
-      </div>
-    );
-  }
-
   return (
     <div className="iop-recommendation-details-scalprum advisor">
       <ScalprumComponent

data/webpack/common/DropdownToggle.js

@@ -18,6 +18,7 @@ const DropdownToggle = ({ items, ...props }) => {
           aria-label={__('Table actions')}
           onClick={() => setOpen(prev => !prev)}
           isExpanded={isOpen}
+          ouiaId="toggle-dropdown-toggle"
         >
           <EllipsisVIcon />
         </MenuToggle>

data/webpack/common/Switcher/HelpLabel.js

@@ -1,18 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Popover } from '@patternfly/react-core';
+import { Button, Popover } from '@patternfly/react-core';
 import { HelpIcon } from '@patternfly/react-icons';
 
 export const HelpLabel = ({ text, id, className }) => {
   if (!text) return null;
+
   return (
     <Popover id={`${id}-help`} bodyContent={text} aria-label="help-text">
-      <button
-        onClick={e => e.preventDefault()}
-        className={`pf-v5-c-form__group-label-help ${className}`}
+      <Button
+        variant="plain"
+        ouiaId={`help-button-${id}`}
+        className={className}
       >
         <HelpIcon />
-      </button>
+      </Button>
     </Popover>
   );
 };

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: foreman_rh_cloud
 version: !ruby/object:Gem::Version
-  version: 14.3.0
+  version: 14.4.0
 platform: ruby
 authors:
 - Foreman Red Hat Cloud team
@@ -464,6 +464,7 @@ files:
 - webpack/InsightsHostDetailsTab/__tests__/InsightsTotalRiskChart.test.js
 - webpack/InsightsHostDetailsTab/__tests__/NewHostDetailsTab.test.js
 - webpack/InsightsHostDetailsTab/components/ListItem/ListItem.js
+- webpack/InsightsHostDetailsTab/components/ListItem/__tests__/ListItem.test.js
 - webpack/InsightsHostDetailsTab/components/ListItem/index.js
 - webpack/InsightsHostDetailsTab/index.js
 - webpack/InsightsVulnerability/InsightsVulnerabilityListPage.js
@@ -475,6 +476,7 @@ files:
 - webpack/InsightsVulnerabilityActionsBar/index.js
 - webpack/InsightsVulnerabilityHostIndexExtensions/CVECountCell.js
 - webpack/InsightsVulnerabilityHostIndexExtensions/__tests__/CVECountCell.test.js
+- webpack/IopPathwayDetails/IopPathwayDetails.js
 - webpack/IopRecommendationDetails/IopRecommendationDetails.js
 - webpack/__mocks__/foremanReact/Root/Context/ForemanContext.js
 - webpack/__mocks__/foremanReact/common/I18n.js