Fixes #39412 - replace messagebox with empty state and update to pf5 components inside PreupgradeReports (#175)

* Fixes #39412 - replace messagebox with empty state and update to pf5 components inside PreupgradeReports

* Refs #39412 - fix snapshot failing

* Refs #39412 - bump foreman core dependency

Author: andreilakatos

lib/foreman_leapp/engine.rb

@@ -17,7 +17,7 @@ class Engine < ::Rails::Engine
     initializer 'foreman_leapp.register_plugin', before: :finisher_hook do |app|
       app.reloader.to_prepare do
         Foreman::Plugin.register :foreman_leapp do
-          requires_foreman '>= 3.16'
+          requires_foreman '>= 5.0'
           register_gettext
 
           apipie_documented_controllers ["#{ForemanLeapp::Engine.root}/app/controllers/api/v2/*.rb"]

webpack/components/PreupgradeReports/PreupgradeReports.js

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
-import MessageBox from 'foremanReact/components/common/MessageBox';
+import { Icon } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import EmptyState from 'foremanReact/components/common/EmptyState';
 import { LoadingState, Row } from 'patternfly-react';
 import PropTypes from 'prop-types';
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
@@ -116,10 +118,15 @@ const withLoadingState = Component => componentProps => {
 
   if (!isEmpty(error)) {
     return (
-      <MessageBox
+      <EmptyState
         key="preupgrade-reports-error"
-        icontype="error-circle-o"
-        msg={sprintf(__('Could not retrieve data: %(status)s - %(msg)s'), {
+        variant="xs"
+        icon={
+          <Icon iconSize="lg">
+            <ExclamationCircleIcon />
+          </Icon>
+        }
+        header={sprintf(__('Could not retrieve data: %(status)s - %(msg)s'), {
           status: error.statusText,
           msg: error.errorMsg,
         })}

webpack/components/PreupgradeReports/__tests__/PreupgradeReports.fixtures.js

@@ -60,6 +60,49 @@ export const preupgradeReports = [
   },
 ];
 
+export const preupgradeReportsWithFixableEntries = [
+  {
+    hostId: 5,
+    entries: [
+      {
+        title: 'Fixable entry',
+        severity: 'high',
+        id: 100,
+        hostId: 5,
+        hostname: 'host.example.com',
+        flags: [],
+        detail: {
+          remediations: [{ type: 'command', context: ['echo', 'fix'] }],
+        },
+      },
+      {
+        title: 'Not fixable entry',
+        severity: 'low',
+        id: 101,
+        hostId: 5,
+        hostname: 'host.example.com',
+        flags: [],
+      },
+    ],
+  },
+  {
+    hostId: 6,
+    entries: [
+      {
+        title: 'Another fixable entry',
+        severity: 'medium',
+        id: 102,
+        hostId: 6,
+        hostname: 'foo.example.com',
+        flags: [],
+        detail: {
+          remediations: [{ type: 'command', context: ['echo', 'fix2'] }],
+        },
+      },
+    ],
+  },
+];
+
 export const reportsWithRemediations = [
   {
     hostId: 5,

webpack/components/PreupgradeReports/__tests__/PreupgradeReports.test.js

@@ -1,54 +1,159 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import PreupgradeReports from '../PreupgradeReports';
+import {
+  preupgradeReports,
+  preupgradeReportsWithFixableEntries,
+} from './PreupgradeReports.fixtures';
 
-import { preupgradeReports } from './PreupgradeReports.fixtures';
+jest.mock('foremanReact/components/Pagination', () => {
+  const MockPagination = () => <div data-testid="pagination">Pagination</div>;
+  return MockPagination;
+});
+
+jest.mock('../../PreupgradeReportsList/components/images/i_severity-high.svg', () => 'severity-high.svg');
+jest.mock('../../PreupgradeReportsList/components/images/i_severity-med.svg', () => 'severity-med.svg');
+jest.mock('../../PreupgradeReportsList/components/images/i_severity-low.svg', () => 'severity-low.svg');
+
+const mockStore = configureMockStore([]);
 
 const csrfToken = 'xyz';
 const newJobInvocationUrl = '/job_invocations/new';
-const getPreupgradeReports = () => {};
-
-const fixtures = {
-  'should render when loaded with reports': {
-    loading: false,
-    error: {},
-    preupgradeReports,
-    csrfToken,
-    newJobInvocationUrl,
-    getPreupgradeReports,
-    reportsExpected: true,
-  },
-  'should render when loaded without reports': {
-    loading: false,
-    error: {},
-    preupgradeReports: [],
-    csrfToken,
-    newJobInvocationUrl,
-    getPreupgradeReports,
-    reportsExpected: true,
-  },
-  'should render when loading': {
-    loading: true,
-    error: {},
-    preupgradeReports: [],
-    csrfToken,
-    newJobInvocationUrl,
-    getPreupgradeReports,
-    reportsExpected: false,
-  },
-  'should render error': {
-    loading: false,
-    error: {
-      statusText: 'Internal server error',
-      errorMsg: 'Well, this is embarassing',
-    },
-    preupgradeReports: [],
-    csrfToken,
-    newJobInvocationUrl,
-    getPreupgradeReports,
-    reportsExpected: false,
-  },
+
+const defaultProps = {
+  loading: false,
+  error: {},
+  preupgradeReports,
+  csrfToken,
+  newJobInvocationUrl,
+  reportsExpected: true,
 };
 
-describe('PreupgradeReports', () =>
-  testComponentSnapshotsWithFixtures(PreupgradeReports, fixtures));
+const renderComponent = (props = {}) =>
+  render(
+    <Provider store={mockStore({})}>
+      <PreupgradeReports {...defaultProps} {...props} />
+    </Provider>
+  );
+
+const getFixSelectedForm = () =>
+  screen.getByRole('button', { name: 'Fix Selected' }).closest('form');
+
+describe('PreupgradeReports', () => {
+  // withLoadingState wraps content in patternfly-react LoadingState, which
+  // delays showing the spinner by 300ms and always schedules that timeout on
+  // mount — even when loading=false. Without fake timers the timeout fires
+  // after the test unmounts and React logs a setState-on-unmounted warning.
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it('renders report entries when loaded with reports', () => {
+    renderComponent();
+
+    expect(screen.getByText('Fix me!')).toBeInTheDocument();
+    expect(screen.getByText('I am broken too')).toBeInTheDocument();
+    expect(screen.getByText('Octocat is not happy')).toBeInTheDocument();
+  });
+
+  it('renders empty state when loaded without reports', () => {
+    renderComponent({ preupgradeReports: [] });
+
+    expect(
+      screen.getByRole('heading', {
+        name: 'No Preupgrade Report Available',
+        level: 5,
+      })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'The preupgrade report could not be generated, check the job details for the reason'
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('renders loading state while data is being fetched', () => {
+    renderComponent({
+      loading: true,
+      preupgradeReports: [],
+      reportsExpected: false,
+    });
+
+    // LoadingState renders nothing until its 300ms timeout elapses.
+    jest.advanceTimersByTime(300);
+
+    expect(screen.getByText('Loading')).toBeInTheDocument();
+    expect(
+      screen.queryByRole('heading', {
+        name: 'No Preupgrade Report Available',
+      })
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders error empty state when data retrieval fails', () => {
+    renderComponent({
+      error: {
+        statusText: 'Internal server error',
+        errorMsg: 'Unexpected error',
+      },
+      preupgradeReports: [],
+      reportsExpected: false,
+    });
+
+    expect(
+      screen.getByRole('heading', {
+        name: 'Could not retrieve data: Internal server error - Unexpected error',
+        level: 5,
+      })
+    ).toBeInTheDocument();
+  });
+
+  it('disables Fix Selected when no fixable entries are selected', () => {
+    renderComponent({ preupgradeReports: preupgradeReportsWithFixableEntries });
+
+    expect(screen.getByRole('button', { name: 'Fix Selected' })).toBeDisabled();
+  });
+
+  it('enables Fix Selected and passes selected entry ids when a fixable entry is selected', () => {
+    renderComponent({ preupgradeReports: preupgradeReportsWithFixableEntries });
+
+    const [, fixableEntryCheckbox] = screen.getAllByRole('checkbox');
+
+    fireEvent.click(fixableEntryCheckbox);
+
+    expect(screen.getByRole('button', { name: 'Fix Selected' })).toBeEnabled();
+    expect(
+      getFixSelectedForm().querySelector('input[name="inputs[remediation_ids]"]')
+    ).toHaveValue('100');
+  });
+
+  it('selects all fixable entries when header checkbox is clicked', () => {
+    renderComponent({ preupgradeReports: preupgradeReportsWithFixableEntries });
+
+    const [selectAllCheckbox] = screen.getAllByRole('checkbox');
+
+    fireEvent.click(selectAllCheckbox);
+
+    expect(screen.getByRole('button', { name: 'Fix Selected' })).toBeEnabled();
+
+    const form = getFixSelectedForm();
+
+    expect(
+      form.querySelector('input[name="inputs[remediation_ids]"]')
+    ).toHaveValue('100,102');
+    expect(
+      [...form.querySelectorAll('input[name="host_ids[]"]')].map(
+        input => input.value
+      )
+    ).toEqual(['5', '6']);
+  });
+});