refactor(web): use queries and convert StorageSection to queries

agama-project · Sep 24, 2024 · b9dede1 · b9dede1
1 parent 28682bc
commit b9dede1
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 81 deletions.
diff --git a/...mponents/overview/StorageSection.test.jsx → ...mponents/overview/StorageSection.test.tsx b/...mponents/overview/StorageSection.test.jsx → ...mponents/overview/StorageSection.test.tsx
@@ -22,46 +22,35 @@
 
 import React from "react";
 import { screen } from "@testing-library/react";
-import { installerRender } from "~/test-utils";
-import { createClient } from "~/client";
+import { plainRender } from "~/test-utils";
 import { StorageSection } from "~/components/overview";
 
 jest.mock("~/client");
 
-const availableDevices = [
+const mockAvailableDevices = [
   { name: "/dev/sda", size: 536870912000 },
   { name: "/dev/sdb", size: 697932185600 },
 ];
 
-const proposalResult = {
-  settings: {
-    target: "disk",
-    targetDevice: "/dev/sda",
-    spacePolicy: "delete",
-  },
-  actions: [],
-};
-
-const storageMock = {
-  probe: jest.fn().mockResolvedValue(0),
-  proposal: {
-    getAvailableDevices: jest.fn().mockResolvedValue(availableDevices),
-    getResult: jest.fn().mockResolvedValue(proposalResult),
-  },
-  onStatusChange: jest.fn(),
-};
-
-let storage;
-
-beforeEach(() => {
-  storage = { ...storageMock, proposal: { ...storageMock.proposal } };
-
-  createClient.mockImplementation(() => ({ storage }));
-});
+let mockResultSettings = { target: "disk", targetDevice: "/dev/sda", spacePolicy: "delete" };
+
+jest.mock("~/queries/storage", () => ({
+  ...jest.requireActual("~/queries/storage"),
+  useAvailableDevices: () => mockAvailableDevices,
+  useProposalResult: () => ({
+    settings: mockResultSettings,
+    actions: [],
+  }),
+}));
 
 describe("when there is a proposal", () => {
+  beforeEach(() => {
+    mockResultSettings.target = "disk";
+    mockResultSettings.spacePolicy = "delete";
+  });
+
   it("renders the proposal summary", async () => {
-    installerRender(<StorageSection />);
+    plainRender(<StorageSection />);
 
     await screen.findByText(/Install using device/);
     await screen.findByText(/\/dev\/sda, 500 GiB/);
@@ -70,38 +59,38 @@ describe("when there is a proposal", () => {
 
   describe("and the space policy is set to 'resize'", () => {
     beforeEach(() => {
-      const result = { settings: { spacePolicy: "resize", targetDevice: "/dev/sda" } };
-      storage.proposal.getResult = jest.fn().mockResolvedValue(result);
+      // const result = { settings: { spacePolicy: "resize", targetDevice: "/dev/sda" } };
+      mockResultSettings.spacePolicy = "resize";
+      mockResultSettings.targetDevice = "/dev/sda";
     });
 
     it("indicates that partitions may be shrunk", async () => {
-      installerRender(<StorageSection />);
+      plainRender(<StorageSection />);
 
       await screen.findByText(/shrinking existing partitions as needed/);
     });
   });
 
   describe("and the space policy is set to 'keep'", () => {
     beforeEach(() => {
-      const result = { settings: { spacePolicy: "keep", targetDevice: "/dev/sda" } };
-      storage.proposal.getResult = jest.fn().mockResolvedValue(result);
+      mockResultSettings.spacePolicy = "keep";
+      mockResultSettings.targetDevice = "/dev/sda";
     });
 
     it("indicates that partitions will be kept", async () => {
-      installerRender(<StorageSection />);
+      plainRender(<StorageSection />);
 
       await screen.findByText(/without modifying existing partitions/);
     });
   });
 
   describe("and there is no target device", () => {
     beforeEach(() => {
-      const result = { settings: { targetDevice: "" } };
-      storage.proposal.getResult = jest.fn().mockResolvedValue(result);
+      mockResultSettings.targetDevice = "";
     });
 
     it("indicates that a device is not selected", async () => {
-      installerRender(<StorageSection />);
+      plainRender(<StorageSection />);
 
       await screen.findByText(/No device selected/);
     });

diff --git a/...rc/components/overview/StorageSection.jsx → ...rc/components/overview/StorageSection.tsx b/...rc/components/overview/StorageSection.jsx → ...rc/components/overview/StorageSection.tsx
@@ -20,33 +20,21 @@
  * find current contact information at www.suse.com.
  */
 
-// @ts-check
-
-import React, { useEffect, useState, useCallback } from "react";
+import React from "react";
 import { Text, TextContent, TextVariants } from "@patternfly/react-core";
-
 import { deviceLabel } from "~/components/storage/utils";
 import { Em } from "~/components/core";
 import { _ } from "~/i18n";
-import { useInstallerClient } from "~/context/installer";
-import { IDLE } from "~/client/status";
-
-/**
- * @typedef {import ("~/client/storage").ProposalResult} ProposalResult
- * @typedef {import ("~/client/storage").StorageDevice} StorageDevice
- *
- * @typedef {object} Proposal
- * @property {StorageDevice[]} availableDevices
- * @property {ProposalResult} result
- */
+import { useAvailableDevices, useProposalResult } from "~/queries/storage";
+import { ProposalTarget } from "~/types/storage";
 
 /**
  * Build a translated summary string for installing on an LVM with multiple
  * physical partitions/disks
- * @param {String} policy Find space policy
- * @returns {String} Translated description
+ * @param policy - Find space policy
+ * @returns Translated description
  */
-const msgLvmMultipleDisks = (policy) => {
+const msgLvmMultipleDisks = (policy: string): string => {
   switch (policy) {
     case "resize":
       // TRANSLATORS: installing on an LVM with multiple physical partitions/disks
@@ -74,11 +62,11 @@ const msgLvmMultipleDisks = (policy) => {
 /**
  * Build a translated summary string for installing on an LVM with a single
  * physical partition/disk
- * @param {String} policy Find space policy
- * @returns {String} Translated description with %s placeholder for the device
+ * @param policy - Find space policy
+ * @returns Translated description with %s placeholder for the device
  * name
  */
-const msgLvmSingleDisk = (policy) => {
+const msgLvmSingleDisk = (policy: string): string => {
   switch (policy) {
     case "resize":
       // TRANSLATORS: installing on an LVM with a single physical partition/disk,
@@ -124,26 +112,8 @@ const Content = ({ children }) => (
  * @param {Proposal} props.proposal
  */
 export default function StorageSection() {
-  const client = useInstallerClient();
-
-  const [availableDevices, setAvailableDevices] = useState([]);
-  const [result, setResult] = useState(undefined);
-
-  const loadProposal = useCallback(() => {
-    const proposal = client.storage.proposal;
-    proposal.getAvailableDevices().then(setAvailableDevices);
-    proposal.getResult().then(setResult);
-  }, [client, setAvailableDevices, setResult]);
-
-  useEffect(loadProposal, [loadProposal]);
-
-  useEffect(() => {
-    return client.storage.onStatusChange((status) => {
-      if (status === IDLE) {
-        loadProposal();
-      }
-    });
-  }, [client.storage, loadProposal]);
+  const availableDevices = useAvailableDevices();
+  const result = useProposalResult();
 
   if (result === undefined) return;
 
@@ -152,7 +122,7 @@ export default function StorageSection() {
     return device ? deviceLabel(device) : deviceName;
   };
 
-  if (result.settings.target === "NEW_LVM_VG") {
+  if (result.settings.target === ProposalTarget.NEW_LVM_VG) {
     const pvDevices = result.settings.targetPVDevices;
 
     if (pvDevices.length > 1) {
@@ -179,7 +149,7 @@ export default function StorageSection() {
   const targetDevice = result.settings.targetDevice;
   if (!targetDevice) return <Text>{_("No device selected yet")}</Text>;
 
-  const fullMsg = (policy) => {
+  const fullMsg = (policy: string): string => {
     switch (policy) {
       case "resize":
         // TRANSLATORS: %s will be replaced by the device name and its size,