Skip to content

Fixes #39728 - Migrate Manifest History table from PF3 to PF5 - #11804

Merged
pavanshekar merged 1 commit into
Katello:masterfrom
Lukshio:manifestUpdate
Sep 4, 2026
Merged

pavanshekar merged 1 commit into
Katello:masterfrom
Lukshio:manifestUpdate

Conversation

@Lukshio

@Lukshio Lukshio commented Jul 23, 2026 •

Copy link
Copy Markdown
Contributor

Manifest History tab

  • Replace pf3Table with PF5 composable Table (@patternfly/react-table)
  • Replace table empty state with foremanReact/components/common/EmptyState
  • Remove ManifestHistoryTableSchema.js
  • Replace katello LoadingState with foremanReact/components/Loading

Modal layout and tabs

  • Replace react-bootstrap Grid/Tabs/Tab/FormControl with PF5 Grid, Tabs, TabContent, Title, and native file input
  • Switch main modal from ModalVariant.small to ModalVariant.large
  • Use PF5 tab pattern with explicit hidden={activeTabKey !== TAB_KEY} on TabContent (PF5 does not hide inactive panes when using children)
  • Remove obsolete PF3/Bootstrap-specific SCSS (.spinner, .form-horizontal, .modal-body, etc.)

Component structure

  • Convert ManageManifestModal from class component to function component (useState, useEffect, useRef)
  • Extract ManifestHistoryContent for table/empty-state rendering
  • Keep shared katello TooltipButton with upstream button variants (tertiary, danger, link)

Before:
image

After
image

Summary by CodeRabbit

  • New Features
    • Refreshed the manifest management modal with a larger layout and tab navigation.
    • Added dedicated views for manifest details, history, and CDN configuration.
    • Improved manifest history with clear loading and empty states and a structured table.
    • Preserved upload, refresh, deletion, permission-based access, and task-driven behavior.
  • Bug Fixes
    • Updated spinner styling and simplified related modal layout.
  • Tests
    • Added coverage for loading, empty, and populated manifest history states.

@coderabbitai

coderabbitai Bot commented Jul 23, 2026 •

Copy link
Copy Markdown

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

ManageManifestModal now uses hooks and controlled PatternFly tabs. Manifest, history, and CDN content move into separate components. Tests cover loading, empty, and populated history states. Styling now targets the PatternFly v5 spinner class.

Changes

Manifest modal migration

Layer / File(s) Summary
Extracted manifest content components
webpack/scenes/Subscriptions/Manifest/ManifestTabContent.js, webpack/scenes/Subscriptions/Manifest/ManifestHistoryContent.js, webpack/scenes/Subscriptions/Manifest/CdnTabContent.js
Manifest actions, history states, and CDN configuration are rendered by separate components with PropTypes and default values.
Hook-based modal behavior
webpack/scenes/Subscriptions/Manifest/ManageManifestModal.js, webpack/scenes/Subscriptions/Manifest/ManageManifestModalConstants.js
The modal uses hooks, controlled PatternFly tabs, permission-based visibility, task-transition effects, and shared tab identifiers.
Manifest history validation and coverage
webpack/scenes/Subscriptions/Manifest/__tests__/ManageManifestModal.test.js
The modal history states are covered by loading, empty, and populated test cases.
Manifest modal styling
webpack/scenes/Subscriptions/Manifest/ManageManifestModal.scss
The manifest-action spinner selector targets the PatternFly v5 spinner class. The modal-body overflow rules are removed.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant ManageManifestModal
  participant ManifestTabContent
  participant ManifestHistoryContent
  participant CdnTabContent
  ManageManifestModal->>ManifestTabContent: Render manifest state and actions
  ManageManifestModal->>ManifestHistoryContent: Render loading, empty, or history table state
  ManageManifestModal->>CdnTabContent: Render CDN configuration
  ManifestTabContent->>ManageManifestModal: Invoke upload, refresh, or delete callback
  CdnTabContent->>ManageManifestModal: Invoke configuration update callback
Loading

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely describes the primary change: migrating the Manifest History table from PF3 to PF5. The issue reference is relevant to the pull request.
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@webpack/scenes/Subscriptions/Manifest/ManageManifestModal.js`:
- Around line 37-45: Consolidate the duplicated tab-visibility derivation in the
component: compute showSubscriptionManifest and showManifestTab once before
useState, pass the resulting showManifestTab into getDefaultTabKey, and reuse
both values for the JSX render guards. Update getDefaultTabKey to consume the
precomputed visibility rather than recomputing permission logic, keeping default
selection and rendered tabs synchronized.
- Around line 75-83: Update the row identity in the manifestHistory.results.map
rendering to use a collision-resistant value that remains unique for duplicate
records, such as incorporating the map index alongside the existing fields, and
apply the same identity consistently to both the React key and ouiaId on each
Tr.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 72d25dbd-b3fb-4bf3-af3b-32a4dc51fec4

📥 Commits

Reviewing files that changed from the base of the PR and between 977c863 and c3c02be.

📒 Files selected for processing (4)
  • webpack/scenes/Subscriptions/Manifest/ManageManifestModal.js
  • webpack/scenes/Subscriptions/Manifest/ManageManifestModal.scss
  • webpack/scenes/Subscriptions/Manifest/ManifestHistoryTableSchema.js
  • webpack/scenes/Subscriptions/Manifest/__tests__/ManageManifestModal.test.js
💤 Files with no reviewable changes (1)
  • webpack/scenes/Subscriptions/Manifest/ManifestHistoryTableSchema.js

Comment thread webpack/scenes/Subscriptions/Manifest/ManageManifestModal.js Outdated
Comment thread webpack/scenes/Subscriptions/Manifest/ManageManifestModal.js Outdated
Comment thread webpack/scenes/Subscriptions/Manifest/ManageManifestModal.js

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
webpack/scenes/Subscriptions/Manifest/ManifestHistoryContent.js (1)

51-55: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider a more precise results shape.

results is typed as PropTypes.arrayOf(PropTypes.shape({})), an empty shape. Declare the status, statusMessage, and created fields actually used at Lines 41-43. This documents the contract and helps catch a mismatch at development time.

♻️ Proposed refactor
 ManifestHistoryContent.propTypes = {
   manifestHistory: PropTypes.shape({
-    results: PropTypes.arrayOf(PropTypes.shape({})),
+    results: PropTypes.arrayOf(PropTypes.shape({
+      status: PropTypes.string,
+      statusMessage: PropTypes.string,
+      created: PropTypes.string,
+    })),
   }).isRequired,
 };
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@webpack/scenes/Subscriptions/Manifest/ManifestHistoryContent.js` around lines
51 - 55, Update the manifestHistory prop type in
ManifestHistoryContent.propTypes so results uses a precise PropTypes.shape
declaring the status, statusMessage, and created fields consumed by the
component, replacing the empty shape while preserving the existing array
contract.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@webpack/scenes/Subscriptions/Manifest/ManifestTabContent.js`:
- Around line 69-73: Update uploadManifest and its file-selection handler to
clear the native file input value after reading the selected file list, while
preserving the existing upload(fileList[0]) behavior. Reset e.target.value after
initiating the upload so selecting the same file again triggers onChange,
including the alternate occurrence noted in the comment.
- Around line 62-67: Update disabledTooltipText to check actionInProgress
instead of taskInProgress, matching the Delete button’s disabled condition and
ensuring manifestActionStarted reports the in-progress task reason.

---

Nitpick comments:
In `@webpack/scenes/Subscriptions/Manifest/ManifestHistoryContent.js`:
- Around line 51-55: Update the manifestHistory prop type in
ManifestHistoryContent.propTypes so results uses a precise PropTypes.shape
declaring the status, statusMessage, and created fields consumed by the
component, replacing the empty shape while preserving the existing array
contract.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: df83006a-496a-4e9a-a493-33d80b011693

📥 Commits

Reviewing files that changed from the base of the PR and between 9ddd865 and 91fe158.

📒 Files selected for processing (5)
  • webpack/scenes/Subscriptions/Manifest/CdnTabContent.js
  • webpack/scenes/Subscriptions/Manifest/ManageManifestModal.js
  • webpack/scenes/Subscriptions/Manifest/ManageManifestModalConstants.js
  • webpack/scenes/Subscriptions/Manifest/ManifestHistoryContent.js
  • webpack/scenes/Subscriptions/Manifest/ManifestTabContent.js

Comment thread webpack/scenes/Subscriptions/Manifest/ManifestTabContent.js
Comment thread webpack/scenes/Subscriptions/Manifest/ManifestTabContent.js Outdated
@coderabbitai

coderabbitai Bot commented Aug 5, 2026

Copy link
Copy Markdown

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

Comment thread webpack/scenes/Subscriptions/Manifest/__tests__/ManageManifestModal.test.js Outdated
Comment thread webpack/scenes/Subscriptions/Manifest/CdnTabContent.js Outdated
Comment thread webpack/scenes/Subscriptions/Manifest/ManifestTabContent.js Outdated
Comment thread webpack/scenes/Subscriptions/Manifest/ManifestTabContent.js Outdated
Comment thread webpack/scenes/Subscriptions/Manifest/ManifestTabContent.js
Comment thread webpack/scenes/Subscriptions/Manifest/ManageManifestModal.js
Comment thread webpack/scenes/Subscriptions/Manifest/ManageManifestModal.js
Comment thread webpack/scenes/Subscriptions/Manifest/ManifestTabContent.js
Comment thread webpack/scenes/Subscriptions/Manifest/ManifestTabContent.js
Comment thread webpack/scenes/Subscriptions/Manifest/ManifestTabContent.js
@Lukshio

Lukshio commented Aug 18, 2026

Copy link
Copy Markdown
Contributor Author

I am wondering if the linter is setup correctly, because this should be fine

Comment thread webpack/scenes/Subscriptions/Manifest/ManifestTabContent.js Outdated
Comment thread webpack/scenes/Subscriptions/Manifest/ManifestTabContent.js
Comment thread webpack/scenes/Subscriptions/Manifest/ManifestTabContent.js Outdated
Comment thread webpack/scenes/Subscriptions/Manifest/ManageManifestModal.js Outdated

@pondrejk pondrejk left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Checked from the functional side using packit build, I consider this good to go

@MariaAga MariaAga left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

code lgtm

@MariaAga

MariaAga commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

I have linked this PR to https://projects.theforeman.org/issues/39728 , commits and title should be updated (#39444 is closed)

@pavanshekar pavanshekar left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good 👍

@LadislavVasina1 LadislavVasina1 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also checked this PR from the functional side and it looks good to me.

@Lukshio Lukshio changed the title Fixes #39444 - Migrate Manifest History table from PF3 to PF5 Fixes #39728 - Migrate Manifest History table from PF3 to PF5 Sep 4, 2026
@Lukshio

Lukshio commented Sep 4, 2026

Copy link
Copy Markdown
Contributor Author

@pavanshekar Commits squashed and updated redmine issue number

@pavanshekar
pavanshekar merged commit ed8ff6e into Katello:master Sep 4, 2026
32 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants