[web] Fix text when no device is selected yet

web/src/components/overview/StorageSection.jsx

@@ -30,12 +30,12 @@ import { Em, ProgressText, Section } from "~/components/core";
 import { _ } from "~/i18n";
 
 const ProposalSummary = ({ proposal }) => {
-  const { result } = proposal;
+  const { availableDevices = [], result = {} } = proposal;
 
-  if (result === undefined) return <Text>{_("Device not selected yet")}</Text>;
+  const bootDevice = result.settings?.bootDevice;
+  if (!bootDevice) return <Text>{_("No device selected yet")}</Text>;
 
-  const bootDevice = result.settings.bootDevice;
-  const device = proposal.availableDevices.find(d => d.name === bootDevice);
+  const device = availableDevices.find(d => d.name === bootDevice);
 
   const label = device ? deviceLabel(device) : bootDevice;
 
@@ -171,7 +171,7 @@ export default function StorageSection({ showErrors = false }) {
     }
 
     return (
-      <ProposalSummary proposal={state.proposal} />
+      <ProposalSummary proposal={state.proposal || {}} />
     );
   };
 

web/src/components/overview/StorageSection.test.jsx

@@ -89,9 +89,23 @@ describe("when there is a proposal", () => {
     await screen.findByText(/and deleting all its content/);
   });
 
+  describe("and there is no boot device", () => {
+    beforeEach(() => {
+      const result = { settings: { bootDevice: "" } };
+      storage.proposal.getResult = jest.fn().mockResolvedValue(result);
+    });
+
+    it("indicates that a device is not selected", async () => {
+      installerRender(<StorageSection />);
+
+      await screen.findByText(/No device selected/);
+    });
+  });
+
   describe("with errors", () => {
     beforeEach(() => {
-      errors = [{ description: "Cannot make a proposal" }];
+      const errors = [{ description: "Cannot make a proposal" }];
+      storage.getErrors = jest.fn().mockResolvedValue(errors);
     });
 
     describe("and component has received the showErrors prop", () => {
@@ -106,7 +120,9 @@ describe("when there is a proposal", () => {
       it("does not render errors", async () => {
         installerRender(<StorageSection />);
 
-        await waitFor(() => expect(screen.queryByText("Fake error")).not.toBeInTheDocument());
+        await waitFor(() => {
+          expect(screen.queryByText("Cannot make a proposal")).not.toBeInTheDocument();
+        });
       });
     });
   });

web/src/components/storage/ProposalSettingsSection.jsx

@@ -34,6 +34,7 @@ import { Icon } from "~/components/layout";
 import { noop } from "~/utils";
 
 /**
+ * @typedef {import ("~/clients/storage").ProposalSettings} ProposalSettings
  * @typedef {import ("~/clients/storage").StorageDevice} StorageDevice
  * @typedef {import ("~/clients/storage").Volume} Volume
  */
@@ -111,7 +112,7 @@ const InstallationDeviceField = ({ current, devices, isLoading, onChange }) => {
 
   const DeviceContent = ({ device }) => {
     const text = (deviceName) => {
-      if (deviceName === undefined) return _("No device selected yet");
+      if (!deviceName || deviceName.length === 0) return _("No device selected yet");
 
       const device = devices.find(d => d.name === deviceName);
       return device ? deviceLabel(device) : deviceName;
@@ -339,7 +340,7 @@ const EncryptionPasswordField = ({ selected: selectedProp, password: passwordPro
  * @param {object} props
  * @param {StorageDevice[]} [props.availableDevices=[]]
  * @param {Volume[]} [props.volumeTemplates=[]]
- * @param {object} [props.settings={}]
+ * @param {ProposalSettings} [props.settings={}]
  * @param {boolean} [isLoading=false]
  * @param {onChangeFn} [props.onChange=noop]
  *

web/src/components/storage/ProposalSettingsSection.test.jsx

@@ -66,13 +66,14 @@ describe("Installation device field", () => {
 
     describe("and there is no selected device yet", () => {
       beforeEach(() => {
-        props.settings = { bootDevice: undefined };
+        props.settings = { bootDevice: "" };
       });
 
-      it("does not render content", () => {
+      it("renders a message indicating that the device is not selected", () => {
         plainRender(<ProposalSettingsSection {...props} />);
 
-        expect(screen.queryByText(/Installation device/)).toBeNull();
+        screen.getByText(/Installation device/);
+        screen.getByText(/No device selected/);
       });
     });
 
@@ -92,7 +93,7 @@ describe("Installation device field", () => {
 
   describe("if there is no selected device yet", () => {
     beforeEach(() => {
-      props.settings = { candidateDevices: [] };
+      props.settings = { bootDevice: "" };
     });
 
     it("renders a message indicating that the device is not selected", () => {

web/src/components/storage/VolumeForm.jsx

@@ -100,7 +100,7 @@ const SizeAuto = ({ volume }) => {
     // %s is replaced by a list of mount points like "/home, /boot"
     conditions.push(format(_("the presence of the file system for %s"),
                            // TRANSLATORS: conjunction for merging two list items
-                           volume.sizeRelevantVolumes.join(_(", "))));
+                           volume.outline.sizeRelevantVolumes.join(_(", "))));
 
   // TRANSLATORS: the %s is replaced by the items which affect the computed size
   const conditionsText = format(_("The final size depends on %s."),