Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(software): Reload repositories after failure #1894

Merged
merged 18 commits into from
Jan 20, 2025
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 20 additions & 12 deletions web/src/components/software/SoftwarePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,12 @@ const NoPatterns = (): React.ReactNode => (
</Page.Section>
);

const errorMsg = _(
/* TRANSLATORS: error details followed by a "Try again" link*/
"Some installation repositories could not be loaded. \
The system cannot be installed without them.",
);

/**
* Software page component
*/
Expand All @@ -121,25 +127,23 @@ function SoftwarePage(): React.ReactNode {
const ReloadSection = (): React.ReactNode => (
// TRANSLATORS: title for an error message box, at least one repository could not be loaded
<Alert variant="danger" isInline title={_("Repository load failed")}>
{/* TRANSLATORS: error details followed by a "Try again" link*/}
{_(
"Some installation repositories could not be loaded. The system cannot be installed without them.",
)}{" "}
{loading ? (
<>
{" "}
<Spinner size="md" />
<Spinner size="md" /> {_("Loading the installation repositories...")}
</>
) : (
<Button variant="link" isInline onClick={startProbing}>
{/* TRANSLATORS: link for retrying failed repository load */}
{_("Try again")}
</Button>
<>
{errorMsg}{" "}
<Button variant="link" isInline onClick={startProbing}>
{/* TRANSLATORS: link for retrying failed repository load */}
{_("Try again")}
</Button>
</>
Copy link
Contributor

Choose a reason for hiding this comment

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

Sorry, I forgot to mention in yestereday's review. Please, move this component outside of the component is using it. As far as I can see yo just need to give it an onReload prop

<ReloadSection onReload={startProbing} />

Reason for moving it outside: https://react.dev/learn/preserving-and-resetting-state.

We have had issues with that, for example #1550 (comment)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks a lot about this, I didn't know it!

)}
</Alert>
);

const reload = repos.some((r) => !r.loaded) ? <ReloadSection /> : null;
const showReposAlert = repos.some((r) => !r.loaded);

return (
<Page>
Expand All @@ -152,7 +156,11 @@ function SoftwarePage(): React.ReactNode {
<GridItem sm={12}>
<IssuesHint issues={issues} />
</GridItem>
<GridItem sm={12}>{reload}</GridItem>
{showReposAlert && (
<GridItem sm={12}>
<ReloadSection />
</GridItem>
)}
<GridItem sm={12} xl={selectedPatternsXlSize}>
{patterns.length === 0 ? <NoPatterns /> : <SelectedPatterns patterns={patterns} />}
</GridItem>
Expand Down
Loading