Wizard: fix repeatable build behavior in pkg and repo steps

[dominikvagner]

Summary

This PR includes a few changes and fixes to correct the behavior of the wizard when a repeatable build with a snapshot date is chosen.

• This adds a different view for the 'Repositories' step that reflects if a repeatable build with a set snapshot date was chosen. It hides information about repositories that might be incorrect at the chosen date and presents a snapshot date and displays correct package count with a link to the snapshot detail.
• This fixes an issue with the 'Packages' step where you could pick additional packages that might not be available in the included repositories at the chosen snapshot date, or ones that were removed.
  This would be very complicated to do solely in this frontend, so the names search APIs were extended to support a date argument and search the correct snapshots for the right content when that's provided. [PR]

Also fixes a bug found while testing, where the package search step would outright crash when a package group with an empty package list existed in the searched repos. (This can happen in Red Hat repos in the Conflict package groups)

The required BE changes are now deployed in Prod, so this is ready for review now!

Issue Link: [HMS-8645]

Testing Steps

1. Create a repo with 2 snapshots (good one to use are these ones), create a repo with the v1 URL and then update it to the v2 URL.
2. Verify the repositories and package search steps show the correct stuff, depending on the option and date chosen in the "Repeatable Build" step. (For what to expect, feel free to look at this test)
   2.1 If you select a date few days in the past, the picked up snapshot will be the V1 and if you select use latest, or a date after the repo was created, it should be the second one.

[regexowl]

/ok-to-test

[regexowl]

Quick heads up - the manual API changes check failure will most probably get resolved after rebase.

[codecov]

Codecov Report

❌ Patch coverage is 81.63265% with 27 lines in your changes missing coverage. Please review.
✅ Project coverage is 79.97%. Comparing base (21453b6) to head (980e6a5).
⚠️ Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
...ateImageWizard/steps/Repositories/Repositories.tsx	87.17%	15 Missing ⚠️
...ents/CreateImageWizard/steps/Packages/Packages.tsx	57.14%	12 Missing ⚠️

@@            Coverage Diff             @@
##             main    #3731      +/-   ##
==========================================
+ Coverage   79.85%   79.97%   +0.11%     
==========================================
  Files         222      222              
  Lines       25762    25824      +62     
  Branches     2500     2529      +29     
==========================================
+ Hits        20573    20652      +79     
+ Misses       5160     5143      -17     
  Partials       29       29              

Files with missing lines	Coverage Δ
src/Utilities/time.ts	88.05% <100.00%> (+3.21%)	⬆️
...ents/CreateImageWizard/steps/Packages/Packages.tsx	79.56% <57.14%> (-0.42%)	⬇️
...ateImageWizard/steps/Repositories/Repositories.tsx	86.60% <87.17%> (+3.91%)	⬆️

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 21453b6...980e6a5. Read the comment docs.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[regexowl]

/ok-to-test

[regexowl]

/ok-to-test

[regexowl]

Thank you, this works great! ❤️

Two questions - do the tables have to be this different (between with and without repeatable build) or could we just:

• render plain/link packages count based on status of repeatable build
• render snapshot date column based on the same
• as for the repository link under the repository name that gets rendered with no repeatable build, that one could be completely removed. We're in the middle of UI revamp and it's not in final mocks so there's no need to conditionally switch between hiding/rendering it

Second question which is more or less based on what the first answer is - there's a bunch of duplicate code now. Could we move some of it to reusable components and use those so we don't have to update code in two places when we need to for example rename an alert or table heading?

[dominikvagner]

Thank you, this works great! ❤️

Two questions - do the tables have to be this different (between with and without repeatable build) or could we just:

* render plain/link packages count based on status of repeatable build

* render snapshot date column based on the same

* as for  the repository link under the repository name that gets rendered with no repeatable build, that one could be completely removed. We're in the middle of UI revamp and it's not in final mocks so there's no need to conditionally switch between hiding/rendering it

Second question which is more or less based on what the first answer is - there's a bunch of duplicate code now. Could we move some of it to reusable components and use those so we don't have to update code in two places when we need to for example rename an alert or table heading?

@regexowl thanks for taking a look at this! 🫶
they don't really, made the columns and packages count render conditionally 🫡 and removed the URL link 👍🏼
now the code is more DRY and not so duplicated ✨

also made small adjustments to the loading states so it's not reloading the whole step so much and looks a bit nicer (there was also an issue with the templates page flickering the amount of repos (showing incorrect ones), which shouldn't be happening anymore) 😅

[kingsleyzissou]

/ok-to-test

[tkoscieln]

/ok-to-test

[regexowl]

/ok-to-test

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request adds snapshot date support across the Create Image Wizard. Packages now read snapshotDate from the store, attach a date to multiple package/group search requests, and include snapshotDate in effect dependencies and memoization; several substr(1) calls were corrected to substring(1) and optional chaining was added for package lists. Repositories gain a snapshot-mode that calls useListSnapshotsByDateMutation, derives per-repo snapshots, and conditionally renders snapshot-specific columns and links. selectSnapshotDate is exposed from the wizard slice. timestampToDisplayStringDetailed now accepts an optional tz parameter.

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/Components/CreateImageWizard/steps/Packages/Packages.tsx (1)

1286-1302: Add optional chaining to prevent potential crash.

Line 1286 correctly uses optional chaining (grp.package_list?.length), but line 1292 maps over grp.package_list without optional chaining. If package_list is undefined (as the PR notes can happen with empty package groups in Red Hat repos), this would throw a runtime error.

Apply this diff to add defensive optional chaining:

-                            {grp.package_list.map((pkg) => (
+                            {grp.package_list?.map((pkg) => (
                               <Tr key={`details-${pkg}`}>

Alternatively, if package_list is guaranteed to be an array (possibly empty) when it passes the length check, add a comment explaining this invariant.

🧹 Nitpick comments (1)

src/Components/CreateImageWizard/steps/Packages/Packages.tsx (1)

304-306: Simplify the date conversion chain.

The conversion snapshotDate → convertStringToDate() → new Date() → toISOString() appears redundant. The convertStringToDate utility returns a timestamp (number), which is then wrapped in new Date() and converted back to ISO string.

Consider simplifying to:

date: snapshotDate ? new Date(snapshotDate).toISOString() : undefined,

Unless convertStringToDate performs special parsing logic that's required here, this simpler approach would be more readable and efficient.

Can you confirm whether the convertStringToDate utility is necessary for parsing the snapshotDate format, or if it can be simplified as suggested?

Also applies to: 321-323, 331-333, 373-375, 386-388, 396-398

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 21453b6 and 732fcff.

📒 Files selected for processing (3)

• src/Components/CreateImageWizard/steps/Packages/Packages.tsx (10 hunks)
• src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx (10 hunks)
• src/Utilities/time.ts (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx (7)

src/store/hooks.ts (1)

• useAppSelector (7-7)

src/store/wizardSlice.ts (1)

• selectSnapshotDate (465-467)

src/store/contentSourcesApi.ts (1)

• useListSnapshotsByDateMutation (8-10)

src/Utilities/time.ts (2)

• convertStringToDate (59-68)
• timestampToDisplayStringDetailed (36-57)

src/Components/CreateImageWizard/steps/Repositories/components/Error.tsx (1)

• Error (5-11)

src/Components/CreateImageWizard/steps/Repositories/components/Loading.tsx (1)

• Loading (5-15)

src/constants.ts (1)

• CONTENT_URL (13-13)

src/Components/CreateImageWizard/steps/Packages/Packages.tsx (3)

src/store/hooks.ts (1)

• useAppSelector (7-7)

src/store/wizardSlice.ts (1)

• selectSnapshotDate (465-467)

src/Utilities/time.ts (1)

• convertStringToDate (59-68)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (18)

• GitHub Check: testing-farm:centos-stream-10-x86_64:self
• GitHub Check: testing-farm:fedora-43-x86_64:self
• GitHub Check: testing-farm:fedora-41-x86_64:self
• GitHub Check: testing-farm:fedora-42-x86_64:self
• GitHub Check: rpm-build:centos-stream-10-aarch64
• GitHub Check: rpm-build:centos-stream-9-aarch64
• GitHub Check: rpm-build:centos-stream-9-x86_64
• GitHub Check: rpm-build:fedora-41-x86_64
• GitHub Check: rpm-build:fedora-rawhide-x86_64
• GitHub Check: rpm-build:fedora-43-x86_64
• GitHub Check: rpm-build:centos-stream-10-x86_64
• GitHub Check: rpm-build:fedora-42-x86_64
• GitHub Check: Check for Blocked Packages
• GitHub Check: playwright-tests
• GitHub Check: Manual API Changes Check
• GitHub Check: Build Check
• GitHub Check: Sourcery review
• GitHub Check: Red Hat Konflux / image-builder-frontend-on-pull-request

🔇 Additional comments (9)

src/Utilities/time.ts (1)

36-36: LGTM! Timezone parameter addition is well-implemented.

The optional tz parameter is backward compatible and properly integrated. When tz is undefined, the Intl.DateTimeFormat will use the default behavior (typically the runtime's timezone), which is correct.

Also applies to: 52-52

src/Components/CreateImageWizard/steps/Packages/Packages.tsx (3)

362-362: Good modernization: substr → substring.

Replacing the deprecated substr with substring is a best practice update.

Also applies to: 382-382, 394-394

---

352-352: LGTM! Dependency arrays properly updated.

The snapshotDate is correctly added to the dependency arrays of the useEffect hooks that trigger package and group searches, ensuring searches re-run when the snapshot date changes.

Also applies to: 415-415

---

96-96: selectSnapshotDate is properly exported and correctly imported.

The selector is correctly exported from src/store/wizardSlice.ts (line 465) and properly imported in Packages.tsx at line 96. The usage at line 149 with useAppSelector is correct.

Note: The reference to line 104 appears to be stale—there is no selectSnapshotDate reference at that location; only lines 96 and 149 contain it.

src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx (5)

16-16: LGTM! Imports properly added for snapshot functionality.

All necessary imports for snapshot date handling are correctly added, including the mutation hook, selectors, utilities, and UI components.

Also applies to: 41-41, 51-51, 65-65, 71-74, 88-88

---

524-558: Verify the snapshot fetching logic and dependencies.

The useEffect correctly skips fetching when snapshots aren't needed (no date, using latest content, or template selected). The dependency array is comprehensive.

However, ensure the contentList.length check doesn't cause issues on the initial render when the list might be empty before repositories load.

Please verify that the snapshot fetch doesn't get skipped incorrectly when repositories are still loading initially.

---

781-782: Verify EPEL warning is intentionally hidden in snapshot mode.

The EPEL warning (CustomEpelWarning) is now only rendered when !snapshotDate. This means users won't see the warning when viewing repositories with a snapshot date selected.

If this is intentional (perhaps because the warning is only relevant for latest content), consider adding a comment explaining why. If the warning should appear in both modes, remove the !snapshotDate condition.

Confirm whether the EPEL warning should be shown in snapshot mode or if hiding it is the intended behavior.

---

721-839: LGTM! Conditional table rendering is well-implemented.

The snapshot-driven display mode is cleanly implemented with:

• Proper conditional column headers (Architecture/Version/Status vs. Snapshot date)
• Correct use of the new time formatting utility with UTC timezone
• External links to snapshot details in the Content UI
• Loading spinners during snapshot data fetch
• Fallback to '-' when snapshot data is unavailable

The implementation maintains table structure consistency and handles edge cases appropriately.

---

779-783: Community repository URLs are correctly hidden in snapshot mode and shown in non-snapshot mode.

The simplification was intentional. The commit message indicates this change "hides information about repositories that might be incorrect at the chosen date". Community repositories follow the same rendering pattern as all other repository types:

• When snapshotDate is set: detailed columns (including Status with URLs) are hidden for all repos to avoid showing potentially stale information
• When snapshotDate is not set (!snapshotDate): the Status column displays URLs for all repos, including Community repos, via the RepositoriesStatus component

The CommunityRepositoryLabel component serves as a visual indicator and tooltip, while URL display is handled consistently for all repository types through the conditional Status column. This design is correct and no changes are needed.

[regexowl]

/ok-to-test

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/Components/CreateImageWizard/steps/Packages/Packages.tsx (1)

268-353: Consider adding reposInTemplate to the dependency array.

The effect uses reposInTemplate at lines 297-301 but doesn't include it in the dependency array (lines 338-353). While isLoadingReposInTemplate is included and may trigger re-runs indirectly, best practice is to include all values referenced in the effect body.

Apply this diff to add the missing dependency:

   }, [
     customRepositories,
     searchCustomRpms,
     searchDistroRpms,
     debouncedSearchTerm,
     activeTabKey,
     searchRecommendedRpms,
     epelRepoUrlByDistribution,
     isSuccessDistroRepositories,
     distroRepositories,
     arch,
     template,
     distribution,
     debouncedSearchTermIsGroup,
     snapshotDate,
+    reposInTemplate,
   ]);

src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx (1)

756-760: Conditional rendering correctly implements snapshot mode, but improve type safety at line 827.

The snapshot-aware rendering is well-implemented: derives per-repo snapshot data, shows loading spinners during fetch, displays snapshot date and package counts, and links to snapshot details. However, line 827 accesses snapshot.match.uuid without optional chaining inside a condition that uses optional chaining (line 819).

While logically safe (the condition ensures it exists), TypeScript may not narrow the type properly. For type safety and consistency, apply this diff:

                                   href={`${CONTENT_URL}/${uuid}/snapshots/${snapshot.match.uuid}`}
+                                  href={`${CONTENT_URL}/${uuid}/snapshots/${snapshot?.match?.uuid}`}

Also applies to: 779-783, 785-839

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 732fcff and 980e6a5.

📒 Files selected for processing (3)

• src/Components/CreateImageWizard/steps/Packages/Packages.tsx (10 hunks)
• src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx (10 hunks)
• src/Utilities/time.ts (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/Utilities/time.ts

🧰 Additional context used

🧬 Code graph analysis (2)

src/Components/CreateImageWizard/steps/Packages/Packages.tsx (3)

src/store/hooks.ts (1)

• useAppSelector (7-7)

src/store/wizardSlice.ts (1)

• selectSnapshotDate (465-467)

src/Utilities/time.ts (1)

• convertStringToDate (59-68)

src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx (6)

src/store/wizardSlice.ts (1)

• selectSnapshotDate (465-467)

src/store/contentSourcesApi.ts (1)

• useListSnapshotsByDateMutation (8-10)

src/Utilities/time.ts (2)

• convertStringToDate (59-68)
• timestampToDisplayStringDetailed (36-57)

src/Components/CreateImageWizard/steps/Repositories/components/Error.tsx (1)

• Error (5-11)

src/Components/CreateImageWizard/steps/Repositories/components/Loading.tsx (1)

• Loading (5-15)

src/constants.ts (1)

• CONTENT_URL (13-13)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (29)

• GitHub Check: rpm-build:fedora-41-x86_64
• GitHub Check: rpm-build:fedora-rawhide-x86_64
• GitHub Check: rpm-build:centos-stream-10-aarch64
• GitHub Check: rpm-build:centos-stream-9-x86_64
• GitHub Check: rpm-build:fedora-42-x86_64
• GitHub Check: rpm-build:centos-stream-9-aarch64
• GitHub Check: rpm-build:centos-stream-10-x86_64
• GitHub Check: rpm-build:fedora-43-x86_64
• GitHub Check: Build Check
• GitHub Check: Manual API Changes Check
• GitHub Check: Circular Dependencies Check
• GitHub Check: ESLint
• GitHub Check: Service Tests
• GitHub Check: Cockpit Tests
• GitHub Check: Check for Blocked Packages
• GitHub Check: testing-farm:fedora-41-x86_64:self
• GitHub Check: testing-farm:fedora-43-x86_64:self
• GitHub Check: testing-farm:fedora-42-x86_64:self
• GitHub Check: testing-farm:centos-stream-10-x86_64:self
• GitHub Check: rpm-build:fedora-rawhide-x86_64
• GitHub Check: rpm-build:centos-stream-10-x86_64
• GitHub Check: rpm-build:fedora-43-x86_64
• GitHub Check: rpm-build:centos-stream-9-aarch64
• GitHub Check: rpm-build:fedora-41-x86_64
• GitHub Check: rpm-build:centos-stream-10-aarch64
• GitHub Check: rpm-build:fedora-42-x86_64
• GitHub Check: rpm-build:centos-stream-9-x86_64
• GitHub Check: Sourcery review
• GitHub Check: Red Hat Konflux / image-builder-frontend-on-pull-request

🔇 Additional comments (9)

src/Components/CreateImageWizard/steps/Packages/Packages.tsx (5)

96-96: LGTM! Snapshot date integration properly initialized.

The imports of selectSnapshotDate and convertStringToDate, along with reading snapshotDate from the store, correctly set up the component to filter packages by snapshot date.

Also applies to: 104-104, 149-149

---

304-306: LGTM! Date parameter consistently integrated across RPM searches.

The date field is correctly added to distro, custom, and recommended RPM search API calls with consistent conversion logic. The snapshotDate dependency ensures searches re-execute when the date changes.

Also applies to: 321-323, 331-333, 352-352

---

362-362: LGTM! Group searches updated with date parameters and modernized string method.

The date parameter is consistently added to all group search API calls, and substring(1) correctly replaces the deprecated substr(1) method for trimming the @ prefix from group searches.

Also applies to: 373-375, 382-382, 386-388, 394-394, 396-398, 415-415

---

1281-1281: LGTM! Optional chaining prevents crash on empty package lists.

The optional chaining on grp.package_list?.length safely handles package groups with undefined or empty package lists, fixing the crash issue mentioned in the PR objectives.

Also applies to: 1286-1286

---

1464-1464: LGTM! Dependency array correctly includes transformed groups.

Adding transformedGroups to the bodyContent memoization dependencies ensures the table body re-renders when group data changes.

src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx (4)

16-16: LGTM! Snapshot infrastructure properly imported and initialized.

The necessary imports for snapshot functionality (mutation hook, selectors, utilities, UI components) and reading snapshotDate from the store correctly set up the component for snapshot-aware repository display.

Also applies to: 41-41, 51-51, 65-65, 71-74, 88-88

---

510-510: LGTM! Snapshot fetching logic correctly implemented.

The useEffect appropriately fetches snapshots when a snapshot date is selected (and not using latest content or templates). The date conversion is consistent with Packages.tsx, and the dependency array is complete.

Also applies to: 524-558

---

595-611: LGTM! Error and loading states correctly handle snapshot data.

The error condition appropriately includes isSnapshotsError, and the loading logic for snapshots (isSnapshotsLoading && isSnapshotsUninitilized) intentionally shows full-page loading only on initial fetch while subsequent fetches display spinners in table cells (lines 814, 835).

---

721-733: LGTM! Table headers conditionally render for snapshot mode.

The conditional headers correctly display snapshot-specific columns (Snapshot date and Packages) when a snapshot date is selected, hiding metadata that may not reflect the historical snapshot state.

[regexowl]

Looks great, thanks a lot! 🚀