Fixes #38958 - Add basic Leapp preupgrade report table to the new job invocation page

app/views/api/v2/preupgrade_report_entries/base.json.rabl

@@ -1,4 +1,4 @@
 object @preupgrade_report_entry
 
-attributes :id, :preupgrade_report_id, :host_id, :hostname, :title, :actor, :audience,
+attributes :id, :detail, :preupgrade_report_id, :host_id, :hostname, :title, :actor, :audience,
            :severity, :leapp_run_id, :summary, :tags, :flags, :created_at, :updated_at

lib/foreman_leapp/engine.rb

@@ -40,6 +40,8 @@ class Engine < ::Rails::Engine
                                               :resource_type => 'JobInvocation'
           end
 
+          register_global_js_file 'global'
+
           describe_host do
             multiple_actions_provider :leapp_hosts_multiple_actions
           end

webpack/components/PreupgradeReports/PreupgradeReports.js

@@ -119,7 +119,7 @@ const withLoadingState = Component => componentProps => {
       <MessageBox
         key="preupgrade-reports-error"
         icontype="error-circle-o"
-        msg={sprintf(__('Could not retrieve data: %(status) - %(msg)'), {
+        msg={sprintf(__('Could not retrieve data: %(status)s - %(msg)s'), {
           status: error.statusText,
           msg: error.errorMsg,
         })}

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

@@ -4,7 +4,7 @@ exports[`PreupgradeReports should render error 1`] = `
 <MessageBox
   icontype="error-circle-o"
   key="preupgrade-reports-error"
-  msg="Could not retrieve data: %(status) - %(msg)"
+  msg="Could not retrieve data: Internal server error - Well, this is embarassing"
 />
 `;
 

webpack/components/PreupgradeReports/components/__snapshots__/NoReports.test.js.snap

@@ -2,18 +2,24 @@
 
 exports[`NoReports should render when reports expected 1`] = `
 <EmptyStatePattern
+  action={null}
   description="The preupgrade report could not be generated, check the job details for the reason"
+  documentation={null}
   header="No Preupgrade Report Available"
   icon="warning-triangle-o"
   iconType="pf"
+  secondaryActions={Array []}
 />
 `;
 
 exports[`NoReports should render when reports not expected 1`] = `
 <EmptyStatePattern
+  action={null}
   description="The preupgrade report will be available after the job finishes"
+  documentation={null}
   header="No Preupgrade Report Available"
   icon="in-progress"
   iconType="pf"
+  secondaryActions={Array []}
 />
 `;

webpack/components/PreupgradeReportsList/__tests__/PreupgradeReportsList.test.js

@@ -1,40 +1,124 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import PreupgradeReportsList from '../index';
 
-const allEntries = [
-  { title: 'Fix me!', severity: 'Too severe to talk about' },
-  { title: 'I am broken too', severity: 'medium' },
-  { title: 'Octocat is not happy', severity: 'high' },
-  { title: 'Not enough credits', severity: 'low' },
-];
-
-const isSelected = () => false;
-const toggleSelected = () => {};
-const sort = { attribute: '', order: 'asc' };
-const changeSort = () => {};
-const toggleSelectAll = () => {};
-
-const fixtures = {
-  'should render': {
-    allEntries,
-    fixAllWorking: false,
-    isSelected,
-    toggleSelected,
-    sort,
-    changeSort,
-    toggleSelectAll,
-  },
-  'should render when working': {
-    allEntries,
-    fixAllWorking: true,
-    isSelected,
-    toggleSelected,
-    sort,
-    changeSort,
-    toggleSelectAll,
-  },
+jest.mock('foremanReact/components/Pagination', () => {
+  const MockPagination = () => <div data-testid="pagination">Pagination</div>;
+  return MockPagination;
+});
+
+jest.mock('../components/images/i_severity-high.svg', () => 'severity-high.svg');
+jest.mock('../components/images/i_severity-med.svg', () => 'severity-med.svg');
+jest.mock('../components/images/i_severity-low.svg', () => 'severity-low.svg');
+
+const createMockEntries = count =>
+  Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    preupgradeReportId: 100,
+    title: `Entry ${i + 1}`,
+    hostname: `host${i + 1}.example.com`,
+    severity: i % 3 === 0 ? 'high' : i % 3 === 1 ? 'medium' : 'low',
+    flags: i === 0 ? ['inhibitor'] : [],
+    detail: {
+      remediations:
+        i < 2
+          ? [{ type: 'command', context: ['echo', 'fix', 'command'] }]
+          : [],
+    },
+  }));
+
+const defaultProps = {
+  allEntries: createMockEntries(4),
+  isSelected: () => false,
+  toggleSelected: jest.fn(),
+  sort: { attribute: '', order: 'asc' },
+  changeSort: jest.fn(),
+  toggleSelectAll: jest.fn(),
 };
 
-describe('PreupgradeReportsList', () =>
-  testComponentSnapshotsWithFixtures(PreupgradeReportsList, fixtures));
+const renderComponent = (props = {}) =>
+  render(<PreupgradeReportsList {...defaultProps} {...props} />);
+
+describe('PreupgradeReportsList', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the list header', () => {
+    renderComponent();
+
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Host')).toBeInTheDocument();
+    expect(screen.getByText('Risk Factor')).toBeInTheDocument();
+    expect(screen.getByText('Has Remediation?')).toBeInTheDocument();
+    expect(screen.getByText('Inhibitor?')).toBeInTheDocument();
+  });
+
+  it('renders entry titles', () => {
+    renderComponent();
+
+    expect(screen.getByText('Entry 1')).toBeInTheDocument();
+    expect(screen.getByText('Entry 2')).toBeInTheDocument();
+    expect(screen.getByText('Entry 3')).toBeInTheDocument();
+    expect(screen.getByText('Entry 4')).toBeInTheDocument();
+  });
+
+  it('renders entry hostnames', () => {
+    renderComponent();
+
+    expect(screen.getByText('host1.example.com')).toBeInTheDocument();
+    expect(screen.getByText('host2.example.com')).toBeInTheDocument();
+  });
+
+  it('renders checkboxes for entries', () => {
+    renderComponent();
+
+    const checkboxes = screen.getAllByRole('checkbox');
+    expect(checkboxes.length).toBeGreaterThan(0);
+  });
+
+  it('calls toggleSelectAll when header checkbox is clicked', () => {
+    const toggleSelectAll = jest.fn();
+    renderComponent({ toggleSelectAll });
+
+    const checkboxes = screen.getAllByRole('checkbox');
+    fireEvent.click(checkboxes[0]);
+
+    expect(toggleSelectAll).toHaveBeenCalled();
+  });
+
+  it('renders with empty entries array', () => {
+    renderComponent({ allEntries: [] });
+
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.queryByText('Entry 1')).not.toBeInTheDocument();
+  });
+
+  it('renders entries with selected state', () => {
+    const isSelected = entry => entry.id === 1;
+    renderComponent({ isSelected });
+
+    const checkboxes = screen.getAllByRole('checkbox');
+    const entryCheckboxes = checkboxes.slice(1);
+    expect(entryCheckboxes[0]).toBeChecked();
+    expect(entryCheckboxes[1]).not.toBeChecked();
+  });
+
+  it('calls toggleSelected when entry checkbox is clicked', () => {
+    const toggleSelected = jest.fn();
+    renderComponent({ toggleSelected });
+
+    const checkboxes = screen.getAllByRole('checkbox');
+    fireEvent.click(checkboxes[1]);
+
+    expect(toggleSelected).toHaveBeenCalled();
+  });
+
+  it('renders pagination component', () => {
+    renderComponent();
+
+    expect(screen.getByTestId('pagination')).toBeInTheDocument();
+  });
+});

webpack/components/PreupgradeReportsTable/PreupgradeReportsTable.scss

@@ -0,0 +1,4 @@
+ .leapp-report-section .table-title-section,
+ .leapp-report-section .table-toolbar-section {
+   padding-top: 0 !important;
+ }