Reload repositories

web/src/api/software.ts

@@ -67,6 +67,11 @@ const fetchRepositories = (): Promise<Repository[]> => get("/api/software/reposi
  */
 const updateConfig = (config: SoftwareConfig) => put("/api/software/config", config);
 
+/**
+ * Updates the software configuration
+ */
+const probe = () => post("/api/software/probe");
+
 /**
  * Request registration of selected product with given key
  */
@@ -81,5 +86,6 @@ export {
   fetchRegistration,
   fetchRepositories,
   updateConfig,
+  probe,
   register,
 };

web/src/components/software/SoftwarePage.tsx

@@ -22,6 +22,8 @@
 
 import React from "react";
 import {
+  Alert,
+  Button,
   DescriptionList,
   DescriptionListDescription,
   DescriptionListGroup,
@@ -33,7 +35,13 @@ import {
 import { Link, IssuesHint, Page } from "~/components/core";
 import UsedSize from "./UsedSize";
 import { useIssues } from "~/queries/issues";
-import { usePatterns, useProposal, useProposalChanges, useRepositories } from "~/queries/software";
+import {
+  usePatterns,
+  useProposal,
+  useProposalChanges,
+  useRepositories,
+  useRepositoryMutation,
+} from "~/queries/software";
 import { Pattern, SelectedBy } from "~/types/software";
 import { _ } from "~/i18n";
 import { SOFTWARE as PATHS } from "~/routes/paths";
@@ -86,9 +94,6 @@ const NoPatterns = (): React.ReactNode => (
   </Page.Section>
 );
 
-// TODO: implement a real button, reprobe after clicking
-const ReloadSection = (): React.ReactNode => <p>{_("Reload")}</p>;
-
 /**
  * Software page component
  */
@@ -97,13 +102,26 @@ function SoftwarePage(): React.ReactNode {
   const proposal = useProposal();
   const patterns = usePatterns();
   const repos = useRepositories();
+  const { mutate: probe } = useRepositoryMutation();
 
   useProposalChanges();
 
   // Selected patterns section should fill the full width in big screen too when
   // there is no information for rendering the Proposal Size section.
   const selectedPatternsXlSize = proposal.size ? 6 : 12;
 
+  const ReloadSection = (): React.ReactNode => (
+    <Alert variant="warning" isInline title={_("Repository load failed")}>
+      {_(
+        "Some installation repositories failed to load. The system cannot be installed without them.",
+      )}{" "}
+      {/* TODO: add some loading indicator */}
+      <Button variant="link" isInline onClick={probe}>
+        {_("Try again")}
+      </Button>
+    </Alert>
+  );
+
   const reload = repos.some((r) => !r.loaded) ? <ReloadSection /> : null;
 
   return (

web/src/queries/software.ts

@@ -46,6 +46,7 @@ import {
   fetchProposal,
   fetchRegistration,
   fetchRepositories,
+  probe,
   register,
   updateConfig,
 } from "~/api/software";
@@ -151,6 +152,21 @@ const useRegisterMutation = () => {
   return useMutation(query);
 };
 
+/**
+ * Hook that builds a mutation for reloading repositories
+ */
+const useRepositoryMutation = () => {
+  const queryClient = useQueryClient();
+
+  const query = {
+    mutationFn: probe,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["software/repositories"] });
+    },
+  };
+  return useMutation(query);
+};
+
 /**
  * Returns available products and selected one, if any
  */
@@ -285,4 +301,5 @@ export {
   useRegistration,
   useRegisterMutation,
   useRepositories,
+  useRepositoryMutation,
 };