foreman_leapp 3.2.1 → 3.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dbb9af7bc42545f2e0eecc31e462afef8b356f170e29d1b754281f071b0b2948
-  data.tar.gz: 8f424144f2ef5886a204aa85399fe37d7d8bfbe42249566c3fec8bd5c811ab79
+  metadata.gz: 8841245ebb39f45ba92ea5b955a3398434dc103a860c50f2930019c0ee102a4e
+  data.tar.gz: 9a13e0df52eb412eecff7dfa1adff514670ada9dec259a9e349eef1b5ec9e092
 SHA512:
-  metadata.gz: cada565d0df1f5578f334aa03d5207c91e2f8f89fba58d45a29cf3bf699e89df4aa163068485f6a2e7bd5133c9a36a173fb92445d6bdcefd2301b01d3b772f1c
-  data.tar.gz: 8d8787b1f57a45e88f3f00bec04e9998e71957d37349f54afc883908908d76f9ba20ff2c446db0da82d547d84217c606e28a69392450420e1e05ebf851c661d8
+  metadata.gz: 37b092dbdd94f413763b9301c29c552a55cc44a0a0881462fe228d0f1b3510f750145b20eb55b459bc6acf09212b40381657749eaf0590a49024dbd79c9b097a
+  data.tar.gz: f93aca5a49a5c5f76fc36759310c0372f7e56b418ee2bad597461700ba9055544c9bdcb0b5ffab9561eddf7121dc0ad80af0061ee5557944f2d71b2af2927be2

data/lib/foreman_leapp/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ForemanLeapp
-  VERSION = '3.2.1'
+  VERSION = '3.3.0'
 end

data/webpack/components/PreupgradeReportsTable/PreupgradeReportsTable.scss

@@ -0,0 +1,5 @@
+.leapp-report-details {
+  dd {
+    white-space: pre-wrap;
+  }
+}

data/webpack/components/PreupgradeReportsTable/ReportDetails.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Label,
+  LabelGroup,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import './PreupgradeReportsTable.scss';
+
+export const renderSeverityLabel = severity => {
+  switch (severity) {
+    case 'high':
+      return <Label color="red">{__('High')}</Label>;
+    case 'medium':
+      return <Label color="orange">{__('Medium')}</Label>;
+    case 'low':
+      return <Label color="blue">{__('Low')}</Label>;
+    case 'info':
+      return <Label color="grey">{__('Info')}</Label>;
+    default:
+      return <Label color="grey">{severity || __('Info')}</Label>;
+  }
+};
+
+const ReportDetails = ({ entry }) => (
+  <DescriptionList isHorizontal isCompact className="leapp-report-details">
+    {entry.title && (
+      <DescriptionListGroup>
+        <DescriptionListTerm>{__('Title')}</DescriptionListTerm>
+        <DescriptionListDescription>{entry.title}</DescriptionListDescription>
+      </DescriptionListGroup>
+    )}
+
+    {entry.severity && (
+      <DescriptionListGroup>
+        <DescriptionListTerm>{__('Risk Factor')}</DescriptionListTerm>
+        <DescriptionListDescription>
+          {renderSeverityLabel(entry.severity)}
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+    )}
+
+    {entry.summary && (
+      <DescriptionListGroup>
+        <DescriptionListTerm>{__('Summary')}</DescriptionListTerm>
+        <DescriptionListDescription>{entry.summary}</DescriptionListDescription>
+      </DescriptionListGroup>
+    )}
+
+    {entry.tags && entry.tags.length > 0 && (
+      <DescriptionListGroup>
+        <DescriptionListTerm>{__('Tags')}</DescriptionListTerm>
+        <DescriptionListDescription>
+          <LabelGroup>
+            {entry.tags.map(tag => (
+              <Label key={tag} color="blue">
+                {tag}
+              </Label>
+            ))}
+          </LabelGroup>
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+    )}
+
+    {entry.detail?.external?.filter(link => link.url).length > 0 && (
+      <DescriptionListGroup>
+        <DescriptionListTerm>{__('Links')}</DescriptionListTerm>
+        <DescriptionListDescription>
+          {entry.detail.external
+            .filter(link => link.url)
+            .map((item, i) => (
+              <div key={item.url || i}>
+                <a href={item.url} target="_blank" rel="noopener noreferrer">
+                  {item.title || item.url}
+                </a>
+              </div>
+            ))}
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+    )}
+
+    {entry.detail?.remediations?.length > 0 &&
+      entry.detail.remediations.map((item, i) => (
+        <DescriptionListGroup key={`remediations-${i}`}>
+          <DescriptionListTerm>
+            {item.type === 'command' ? __('Command') : __('Hint')}
+          </DescriptionListTerm>
+          <DescriptionListDescription>
+            {item.type === 'command' ? (
+              <code>
+                {Array.isArray(item.context)
+                  ? item.context.join(' ')
+                  : item.context}
+              </code>
+            ) : (
+              item.context
+            )}
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+      ))}
+  </DescriptionList>
+);
+
+ReportDetails.propTypes = {
+  entry: PropTypes.shape({
+    title: PropTypes.string,
+    severity: PropTypes.string,
+    summary: PropTypes.string,
+    tags: PropTypes.arrayOf(PropTypes.string),
+    detail: PropTypes.shape({
+      external: PropTypes.arrayOf(
+        PropTypes.shape({
+          url: PropTypes.string,
+          title: PropTypes.string,
+        })
+      ),
+      remediations: PropTypes.arrayOf(
+        PropTypes.shape({
+          type: PropTypes.string,
+          context: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.arrayOf(PropTypes.string),
+          ]),
+        })
+      ),
+    }),
+  }).isRequired,
+};
+
+export default ReportDetails;

data/webpack/components/PreupgradeReportsTable/__tests__/PreupgradeReportsTable.test.js

@@ -1,5 +1,11 @@
 import React from 'react';
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import {
+  render,
+  screen,
+  waitFor,
+  fireEvent,
+  within,
+} from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
@@ -23,8 +29,15 @@ const mockEntries = Array.from({ length: 12 }, (_, i) => ({
   title: `Report Entry ${i + 1}`,
   hostname: 'example.com',
   severity: i === 0 ? 'high' : 'low',
+  summary: `Summary for report entry ${i + 1}`,
+  tags: i === 0 ? ['security', 'network'] : [],
   flags: i === 0 ? ['inhibitor'] : [],
-  detail: { remediations: i === 0 ? [{ type: 'cmd' }] : [] },
+  detail: {
+    remediations:
+      i === 0 ? [{ type: 'command', context: ['echo', 'fix_command'] }] : [],
+    external:
+      i === 0 ? [{ url: 'http://example.com', title: 'External Link' }] : [],
+  },
 }));
 
 describe('PreupgradeReportsTable', () => {
@@ -48,10 +61,10 @@ describe('PreupgradeReportsTable', () => {
     });
   });
 
-  const renderComponent = () =>
+  const renderComponent = (data = mockJobData) =>
     render(
       <Provider store={store}>
-        <PreupgradeReportsTable data={mockJobData} />
+        <PreupgradeReportsTable data={data} />
       </Provider>
     );
 
@@ -62,37 +75,67 @@ describe('PreupgradeReportsTable', () => {
   it('renders data', async () => {
     renderComponent();
     expandSection();
+    await waitFor(() => screen.getByText('Report Entry 1', { selector: 'td' }));
+    expect(
+      screen.getByText('Report Entry 1', { selector: 'td' })
+    ).toBeInTheDocument();
+  });
+
+  it('expands a row and shows details', async () => {
+    renderComponent();
+    expandSection();
+    await waitFor(() => screen.getByText('Report Entry 1', { selector: 'td' }));
+
+    const rowExpandButtons = screen.getAllByLabelText('Details');
+    fireEvent.click(rowExpandButtons[0]);
+
+    expect(await screen.findByText('Summary')).toBeInTheDocument();
+    expect(
+      await screen.findByText('Summary for report entry 1')
+    ).toBeInTheDocument();
+  });
+
+  it('expands all rows', async () => {
+    renderComponent();
+    expandSection();
+    await waitFor(() => screen.getByText('Report Entry 1', { selector: 'td' }));
 
-    await waitFor(() => screen.getByText('Report Entry 1'));
+    const expandAllButton = screen.getByLabelText('Expand all rows');
+    fireEvent.click(expandAllButton);
 
-    expect(screen.getByText('Report Entry 1')).toBeInTheDocument();
-    expect(screen.getByText('Report Entry 5')).toBeInTheDocument();
-    expect(screen.queryByText('Report Entry 6')).not.toBeInTheDocument();
+    expect(
+      await screen.findByText('Summary for report entry 1')
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText('Summary for report entry 5')
+    ).toBeInTheDocument();
   });
 
   it('paginates to the next page', async () => {
     renderComponent();
     expandSection();
-    await waitFor(() => screen.getByText('Report Entry 1'));
+    await waitFor(() => screen.getByText('Report Entry 1', { selector: 'td' }));
 
     fireEvent.click(screen.getAllByLabelText('Go to next page')[0]);
+    await waitFor(() => screen.getByText('Report Entry 6', { selector: 'td' }));
 
-    await waitFor(() => screen.getByText('Report Entry 6'));
-    expect(screen.getByText('Report Entry 10')).toBeInTheDocument();
-    expect(screen.queryByText('Report Entry 1')).not.toBeInTheDocument();
+    expect(
+      screen.getByText('Report Entry 10', { selector: 'td' })
+    ).toBeInTheDocument();
   });
 
   it('changes perPage limit to 10', async () => {
     renderComponent();
     expandSection();
-    await waitFor(() => screen.getByText('Report Entry 1'));
+    await waitFor(() => screen.getByText('Report Entry 1', { selector: 'td' }));
 
     fireEvent.click(screen.getAllByLabelText('Items per page')[0]);
     fireEvent.click(screen.getAllByText('10 per page')[0]);
 
     await waitFor(() => {
-      expect(screen.getByText('Report Entry 10')).toBeInTheDocument();
-      expect(screen.queryByText('Report Entry 11')).not.toBeInTheDocument();
+      expect(
+        screen.getByText('Report Entry 10', { selector: 'td' })
+      ).toBeInTheDocument();
     });
   });
 
@@ -106,12 +149,38 @@ describe('PreupgradeReportsTable', () => {
         return { type: 'EMPTY' };
       };
     });
-
     renderComponent();
     expandSection();
-
     await waitFor(() => {
-      expect(screen.getByText('The preupgrade report shows no issues.')).toBeInTheDocument();
+      expect(
+        screen.getByText('The preupgrade report shows no issues.')
+      ).toBeInTheDocument();
     });
   });
+
+  it('does not render anything for non-Leapp jobs', () => {
+    const nonLeappData = { id: 55, template_name: 'Standard RHEL Update' };
+    renderComponent(nonLeappData);
+    expect(
+      screen.queryByText('Leapp preupgrade report')
+    ).not.toBeInTheDocument();
+  });
+
+  it('displays correct inhibitor status based on flags', async () => {
+    renderComponent();
+    expandSection();
+    await waitFor(() => screen.getByText('Report Entry 1', { selector: 'td' }));
+
+    const row1 = screen
+      .getByText('Report Entry 1', { selector: 'td' })
+      .closest('tr');
+    const inhibitorCell1 = row1.querySelector('td[data-label="Inhibitor?"]');
+    expect(within(inhibitorCell1).getByText('Yes')).toBeInTheDocument();
+
+    const row2 = screen
+      .getByText('Report Entry 2', { selector: 'td' })
+      .closest('tr');
+    const inhibitorCell2 = row2.querySelector('td[data-label="Inhibitor?"]');
+    expect(within(inhibitorCell2).getByText('No')).toBeInTheDocument();
+  });
 });

data/webpack/components/PreupgradeReportsTable/index.js

@@ -1,35 +1,25 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { ExpandableSection, Label, Tooltip } from '@patternfly/react-core';
+import { ExpandableSection, Tooltip } from '@patternfly/react-core';
+import { ExpandableRowContent, Tbody, Td, Tr } from '@patternfly/react-table';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { Table } from 'foremanReact/components/PF4/TableIndexPage/Table/Table';
+import { getColumnHelpers } from 'foremanReact/components/PF4/TableIndexPage/Table/helpers';
 import { APIActions } from 'foremanReact/redux/API';
 import { STATUS } from 'foremanReact/constants';
-
 import { entriesPage } from '../PreupgradeReports/PreupgradeReportsHelpers';
-
-const renderSeverityLabel = severity => {
-  switch (severity) {
-    case 'high':
-      return <Label color="red">{__('High')}</Label>;
-    case 'medium':
-      return <Label color="orange">{__('Medium')}</Label>;
-    case 'low':
-      return <Label color="blue">{__('Low')}</Label>;
-    case 'info':
-      return <Label color="grey">{__('Info')}</Label>;
-    default:
-      return <Label color="grey">{severity || __('Info')}</Label>;
-  }
-};
+import ReportDetails, { renderSeverityLabel } from './ReportDetails';
 
 const PreupgradeReportsTable = ({ data = {} }) => {
   const [error, setError] = useState(null);
-  const [isExpanded, setIsExpanded] = useState(false);
+
+  const [isReportExpanded, setIsReportExpanded] = useState(false); // Outer expansion state (Leapp Report Section)
   const [pagination, setPagination] = useState({ page: 1, perPage: 5 });
   const [reportData, setReportData] = useState(null);
   const [status, setStatus] = useState(STATUS.RESOLVED);
+  const [expandedRowIds, setExpandedRowIds] = useState(new Set()); // Inner table expansion state (Rows)
+
   const dispatch = useDispatch();
   // eslint-disable-next-line camelcase
   const isLeappJob = data?.template_name?.includes('Run preupgrade via Leapp');
@@ -67,7 +57,7 @@ const PreupgradeReportsTable = ({ data = {} }) => {
 
   useEffect(() => {
     let isMounted = true;
-    if (!isLeappJob || !isExpanded || reportData) {
+    if (!isLeappJob || !isReportExpanded || reportData) {
       return undefined;
     }
     setStatus(STATUS.PENDING);
@@ -117,7 +107,7 @@ const PreupgradeReportsTable = ({ data = {} }) => {
     return () => {
       isMounted = false;
     };
-  }, [isExpanded, data.id, isLeappJob, reportData, dispatch]);
+  }, [isReportExpanded, data.id, isLeappJob, reportData, dispatch]);
 
   // eslint-disable-next-line camelcase
   const entries = reportData?.preupgrade_report_entries || [];
@@ -129,15 +119,43 @@ const PreupgradeReportsTable = ({ data = {} }) => {
       page: newParams.page || prev.page,
       perPage: newParams.per_page || prev.perPage,
     }));
+    setExpandedRowIds(new Set());
   };
 
+  const toggleRowExpansion = (id, isExpanding) => {
+    setExpandedRowIds(prev => {
+      const newSet = new Set(prev);
+      if (isExpanding) {
+        newSet.add(id);
+      } else {
+        newSet.delete(id);
+      }
+      return newSet;
+    });
+  };
+
+  const areAllRowsExpanded =
+    pagedEntries.length > 0 &&
+    pagedEntries.every(entry => expandedRowIds.has(entry.id));
+
+  const onExpandAll = () => {
+    setExpandedRowIds(() => {
+      if (areAllRowsExpanded) {
+        return new Set();
+      }
+      return new Set(pagedEntries.map(e => e.id));
+    });
+  };
+
+  const [columnKeys, keysToColumnNames] = getColumnHelpers(columns);
+
   if (!isLeappJob) return null;
 
   return (
     <ExpandableSection
       className="leapp-report-section"
-      isExpanded={isExpanded}
-      onToggle={(_event, val) => setIsExpanded(val)}
+      isExpanded={isReportExpanded}
+      onToggle={(_event, val) => setIsReportExpanded(val)}
       toggleText={__('Leapp preupgrade report')}
     >
       <Table
@@ -161,14 +179,53 @@ const PreupgradeReportsTable = ({ data = {} }) => {
         isDeleteable={false}
         emptyMessage={__('The preupgrade report shows no issues.')}
         setParams={handleParamsChange}
-      />
+        childrenOutsideTbody
+        onExpandAll={onExpandAll}
+        // Inverted per PatternFly implementation to ensure correct toggle icon state
+        areAllRowsExpanded={!areAllRowsExpanded}
+      >
+        {pagedEntries.map((entry, rowIndex) => {
+          const isRowExpanded = expandedRowIds.has(entry.id);
+          return (
+            <Tbody key={entry.id} isExpanded={isRowExpanded}>
+              <Tr ouiaId={`table-row-${rowIndex}`}>
+                <Td
+                  expand={{
+                    rowIndex,
+                    isExpanded: isRowExpanded,
+                    onToggle: (_event, _rowIndex, isOpen) =>
+                      toggleRowExpansion(entry.id, isOpen),
+                  }}
+                />
+                {columnKeys.map(key => (
+                  <Td key={key} dataLabel={keysToColumnNames[key]}>
+                    {columns[key].wrapper
+                      ? columns[key].wrapper(entry)
+                      : entry[key]}
+                  </Td>
+                ))}
+              </Tr>
+              <Tr
+                isExpanded={isRowExpanded}
+                ouiaId={`table-row-details-${rowIndex}`}
+              >
+                <Td colSpan={columnKeys.length + 1}>
+                  <ExpandableRowContent>
+                    {isRowExpanded && <ReportDetails entry={entry} />}
+                  </ExpandableRowContent>
+                </Td>
+              </Tr>
+            </Tbody>
+          );
+        })}
+      </Table>
     </ExpandableSection>
   );
 };
 
 PreupgradeReportsTable.propTypes = {
   data: PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    id: PropTypes.number,
     template_name: PropTypes.string,
   }),
 };

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: foreman_leapp
 version: !ruby/object:Gem::Version
-  version: 3.2.1
+  version: 3.3.0
 platform: ruby
 authors:
 - Foreman Leapp team
@@ -186,6 +186,8 @@ files:
 - webpack/components/PreupgradeReportsList/components/images/i_severity-low.svg
 - webpack/components/PreupgradeReportsList/components/images/i_severity-med.svg
 - webpack/components/PreupgradeReportsList/index.js
+- webpack/components/PreupgradeReportsTable/PreupgradeReportsTable.scss
+- webpack/components/PreupgradeReportsTable/ReportDetails.js
 - webpack/components/PreupgradeReportsTable/__tests__/PreupgradeReportsTable.test.js
 - webpack/components/PreupgradeReportsTable/index.js
 - webpack/consts.js