foreman_rh_cloud 14.3.0 → 14.5.0

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/SyncButton/__tests__/integrations.test.js

@@ -3,24 +3,16 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import * as API from 'foremanReact/redux/API';
 import ConnectedSyncButton from '../index';
-import { successResponse } from './SyncButtonFixtures';
-import { INVENTORY_SYNC } from '../SyncButtonConstants';
-
-jest.spyOn(API, 'post');
 
 const mockStore = configureMockStore([thunk]);
 
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
 describe('SyncButton integration test', () => {
   it('dispatches sync action when button is clicked', () => {
-    API.post.mockImplementation(({ handleSuccess, key, ...action }) => {
-      if (key === INVENTORY_SYNC && handleSuccess) {
-        handleSuccess(successResponse);
-      }
-      return { type: 'API_POST', ...action };
-    });
-
     const store = mockStore({
       API: {},
     });

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/InsightsTable/__tests__/InsightsTableActions.test.js

@@ -117,10 +117,10 @@ describe('InsightsTable actions', () => {
       expect(push).toHaveBeenCalled();
 
       const apiAction = dispatch.mock.calls.find(
-        call => call[0] && call[0].key === INSIGHTS_HITS_API_KEY
+        call => call[0] && call[0].payload?.key === INSIGHTS_HITS_API_KEY
       );
       expect(apiAction).toBeTruthy();
-      const getArg = apiAction[0];
+      const getArg = apiAction[0].payload;
       expect(getArg.url).toBe(INSIGHTS_HITS_PATH);
       expect(getArg.params.page).toBe(2);
       expect(getArg.params.per_page).toBe(7);

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/InsightsCloudSync/__tests__/InsightsCloudSyncActions.test.js

@@ -1,3 +1,4 @@
+import { API_OPERATIONS } from 'foremanReact/redux/API';
 import { syncInsights } from '../InsightsCloudSyncActions';
 import { INSIGHTS_CLOUD_SYNC } from '../InsightsCloudSyncConstants';
 
@@ -17,17 +18,18 @@ describe('InsightsCloudSync actions', () => {
 
     expect(dispatch).toHaveBeenCalledTimes(1);
     const dispatched = dispatch.mock.calls[0][0];
-    expect(dispatched.key).toBe(INSIGHTS_CLOUD_SYNC);
-    expect(dispatched.url).toBe('/insights_cloud/tasks');
-    expect(typeof dispatched.handleSuccess).toBe('function');
-    expect(typeof dispatched.errorToast).toBe('function');
+    expect(dispatched.type).toBe(API_OPERATIONS.POST);
+    expect(dispatched.payload.key).toBe(INSIGHTS_CLOUD_SYNC);
+    expect(dispatched.payload.url).toBe('/insights_cloud/tasks');
+    expect(typeof dispatched.payload.handleSuccess).toBe('function');
+    expect(typeof dispatched.payload.errorToast).toBe('function');
   });
 
   it('errorToast returns failure message with error details', () => {
     syncInsights(jest.fn(), '')(dispatch);
     const dispatched = dispatch.mock.calls[0][0];
 
-    const result = dispatched.errorToast('some error');
+    const result = dispatched.payload.errorToast('some error');
     expect(result).toContain('some error');
   });
 });

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>
   );
 };