Merge pull request #821 from openSUSE/fix-loading

Properly track the status

web/package/cockpit-agama.changes

@@ -1,3 +1,10 @@
+-------------------------------------------------------------------
+Thu Oct 26 16:07:02 UTC 2023 - Imobach Gonzalez Sosa <[email protected]>
+
+- Properly track the status changes. It prevents of getting stuck
+  in the first page when there are multiple products
+  (gh#openSUSE/agama#821).
+
 -------------------------------------------------------------------
 Thu Oct 26 05:58:15 UTC 2023 - Imobach Gonzalez Sosa <[email protected]>
 

web/src/App.jsx

@@ -34,7 +34,6 @@ import {
   Disclosure,
   Installation,
   IssuesLink,
-  LoadingEnvironment,
   LogsButton,
   ShowLogButton,
   ShowTerminalButton,
@@ -63,6 +62,18 @@ function App() {
   const [status, setStatus] = useState(undefined);
   const [phase, setPhase] = useState(undefined);
 
+  useEffect(() => {
+    if (client) {
+      return client.manager.onPhaseChange(setPhase);
+    }
+  }, [client, setPhase]);
+
+  useEffect(() => {
+    if (client) {
+      return client.manager.onStatusChange(setStatus);
+    }
+  }, [client, setStatus]);
+
   useEffect(() => {
     const loadPhase = async () => {
       const phase = await client.manager.getPhase();
@@ -71,22 +82,18 @@ function App() {
       setStatus(status);
     };
 
-    if (client) loadPhase().catch(console.error);
-  }, [client, setPhase, setStatus]);
-
-  useEffect(() => {
     if (client) {
-      return client.manager.onPhaseChange(setPhase);
+      loadPhase().catch(console.error);
     }
-  }, [client, setPhase]);
+  }, [client, setPhase, setStatus]);
 
   const Content = () => {
     if (!client || !products) {
       return (attempt > ATTEMPTS) ? <DBusError /> : <Loading />;
     }
 
     if ((phase === STARTUP && status === BUSY) || phase === undefined || status === undefined) {
-      return <LoadingEnvironment onStatusChange={setStatus} />;
+      return <Loading />;
     }
 
     if (phase === INSTALL) {

web/src/App.test.jsx

@@ -44,7 +44,6 @@ jest.mock("~/context/software", () => ({
 // Mock some components,
 // See https://www.chakshunyu.com/blog/how-to-mock-a-react-component-in-jest/#default-export
 jest.mock("~/components/core/DBusError", () => <div>D-BusError Mock</div>);
-jest.mock("~/components/core/LoadingEnvironment", () => () => <div>LoadingEnvironment Mock</div>);
 jest.mock("~/components/questions/Questions", () => () => <div>Questions Mock</div>);
 jest.mock("~/components/core/Installation", () => () => <div>Installation Mock</div>);
 jest.mock("~/components/core/Sidebar", () => () => <div>Sidebar Mock</div>);
@@ -56,6 +55,7 @@ const getPhaseFn = jest.fn();
 
 // capture the latest subscription to the manager#onPhaseChange for triggering it manually
 const onPhaseChangeFn = cb => { callbacks.onPhaseChange = cb };
+const onStatusChangeFn = cb => { callbacks.onStatusChange = cb };
 const changePhaseTo = phase => act(() => callbacks.onPhaseChange(phase));
 
 describe("App", () => {
@@ -68,6 +68,7 @@ describe("App", () => {
           getStatus: getStatusFn,
           getPhase: getPhaseFn,
           onPhaseChange: onPhaseChangeFn,
+          onStatusChange: onStatusChangeFn,
         },
         language: {
           getUILanguage: jest.fn().mockResolvedValue("en-us"),
@@ -92,7 +93,7 @@ describe("App", () => {
       mockProducts = undefined;
     });
 
-    it("renders the LoadingEnvironment screen", async () => {
+    it("renders the Loading screen", async () => {
       installerRender(<App />, { withL10n: true });
       await screen.findByText(/Loading installation environment/);
     });
@@ -104,9 +105,9 @@ describe("App", () => {
       getStatusFn.mockResolvedValue(BUSY);
     });
 
-    it("renders the LoadingEnvironment screen", async () => {
+    it("renders the Loading screen", async () => {
       installerRender(<App />, { withL10n: true });
-      await screen.findByText("LoadingEnvironment Mock");
+      await screen.findByText(/Loading installation environment/);
     });
   });
 
@@ -116,10 +117,10 @@ describe("App", () => {
       getStatusFn.mockResolvedValue(BUSY);
     });
 
-    it("renders the LoadingEnvironment component", async () => {
+    it("renders the Loading screen", async () => {
       installerRender(<App />, { withL10n: true });
 
-      await screen.findByText("LoadingEnvironment Mock");
+      await screen.findByText(/Loading installation environment/);
     });
   });
 

web/src/components/core/index.js

@@ -38,7 +38,6 @@ export { default as InstallButton } from "./InstallButton";
 export { default as IssuesLink } from "./IssuesLink";
 export { default as IssuesPage } from "./IssuesPage";
 export { default as SectionSkeleton } from "./SectionSkeleton";
-export { default as LoadingEnvironment } from "./LoadingEnvironment";
 export { default as LogsButton } from "./LogsButton";
 export { default as FileViewer } from "./FileViewer";
 export { default as RowActions } from "./RowActions";