web: small improvements

web/src/components/overview/StorageSection.tsx

@@ -89,9 +89,11 @@ export default function StorageSection() {
     return _("Install using several devices with a custom strategy to find the needed space.");
   };
 
-  if (drives.length === 0) return <Text>{_("No device selected yet")}</Text>;
-  if (!drives.find((dr) => devices.map((d) => d.name).includes(dr.name)))
-    return <Text>{_("No device selected yet")}</Text>;
+  const existDevice = (name) => devices.some((d) => d.name === name);
+  const noDrive = drives.length === 0 || drives.some((d) => !existDevice(d));
+
+  if (noDrive) return <Text>{_("No device selected yet")}</Text>;
+
   if (drives.length > 1) {
     return (
       <Content>

web/src/components/storage/DriveEditor.tsx

@@ -21,13 +21,15 @@
  */
 
 import React, { useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, generatePath } from "react-router-dom";
 import { _, formatList } from "~/i18n";
 import { sprintf } from "sprintf-js";
 import { baseName, deviceLabel, formattedPath, SPACE_POLICIES } from "~/components/storage/utils";
 import { useAvailableDevices } from "~/queries/storage";
 import { configModel } from "~/api/storage/types";
 import { StorageDevice } from "~/types/storage";
+import { STORAGE as PATHS } from "~/routes/paths";
+import { useChangeDrive, useSetSpacePolicy } from "~/queries/storage";
 import * as driveUtils from "~/components/storage/utils/drive";
 import { typeDescription, contentDescription } from "~/components/storage/utils/device";
 import { Icon } from "../layout";
@@ -50,9 +52,6 @@ import {
   MenuToggle,
 } from "@patternfly/react-core";
 
-import { useChangeDrive, useSetSpacePolicy } from "~/queries/storage";
-import { Drive } from "~/api/storage/types/config-model";
-
 type DriveEditorProps = { drive: configModel.Drive; driveDevice: StorageDevice };
 
 // FIXME: Presentation is quite poor
@@ -92,9 +91,9 @@ const SpacePolicySelector = ({ drive, driveDevice }: DriveEditorProps) => {
   const navigate = useNavigate();
   const setSpacePolicy = useSetSpacePolicy();
   const onToggle = () => setIsOpen(!isOpen);
-  const onSpacePolicyChange = (spacePolicy: "keep" | "delete" | "resize" | "custom") => {
+  const onSpacePolicyChange = (spacePolicy: configModel.SpacePolicy) => {
     if (spacePolicy === "custom") {
-      return navigate("/storage/space-policy/" + baseName(drive.name));
+      return navigate(generatePath(PATHS.spacePolicy, { id: baseName(drive.name) }));
     } else {
       setSpacePolicy(drive.name, spacePolicy);
       setIsOpen(false);
@@ -157,7 +156,7 @@ const SpacePolicySelector = ({ drive, driveDevice }: DriveEditorProps) => {
 };
 
 const SearchSelectorIntro = ({ drive }) => {
-  const mainText = (drive: Drive): string => {
+  const mainText = (drive: configModel.Drive): string => {
     if (driveUtils.hasReuse(drive)) {
       // The current device will be the only option to choose from
       return _("This uses existing partitions at the device");
@@ -213,7 +212,7 @@ const SearchSelectorIntro = ({ drive }) => {
     );
   };
 
-  const extraText = (drive: Drive): string => {
+  const extraText = (drive: configModel.Drive): string => {
     // Nothing to add in these cases
     if (driveUtils.hasReuse(drive)) return;
     if (!driveUtils.hasFilesystem(drive)) return;
@@ -314,7 +313,7 @@ const SearchSelectorMultipleOptions = ({ selected, withNewVg = false, onChange }
       return (
         <MenuItem
           component="a"
-          onClick={() => navigate("/storage/target-device")}
+          onClick={() => navigate(PATHS.targetDevice)}
           itemId="lvm"
           description={_("The configured partitions will be created as logical volumes")}
         >
@@ -513,7 +512,6 @@ const DriveHeader = ({ drive, driveDevice }: DriveEditorProps) => {
 };
 
 const PartitionsNoContentSelector = () => {
-  const navigate = useNavigate();
   const menuRef = useRef();
   const toggleMenuRef = useRef();
   const [isOpen, setIsOpen] = useState(false);
@@ -547,7 +545,6 @@ const PartitionsNoContentSelector = () => {
                 key="add-partition"
                 itemId="add-partition"
                 description={_("Add another partition or mount an existing one")}
-                onClick={() => navigate("/storage/space-policy")}
               >
                 <Flex component="span" justifyContent={{ default: "justifyContentSpaceBetween" }}>
                   <span>{_("Add or use partition")}</span>
@@ -562,7 +559,6 @@ const PartitionsNoContentSelector = () => {
 };
 
 const PartitionsWithContentSelector = ({ drive }) => {
-  const navigate = useNavigate();
   const menuRef = useRef();
   const toggleMenuRef = useRef();
   const [isOpen, setIsOpen] = useState(false);
@@ -626,7 +622,6 @@ const PartitionsWithContentSelector = ({ drive }) => {
                 key="add-partition"
                 itemId="add-partition"
                 description={_("Add another partition or mount an existing one")}
-                onClick={() => navigate("/storage/space-policy")}
               >
                 <Flex component="span" justifyContent={{ default: "justifyContentSpaceBetween" }}>
                   <span>{_("Add or use partition")}</span>

web/src/components/storage/SpacePolicySelection.tsx

@@ -28,12 +28,12 @@ import { SpaceActionsTable } from "~/components/storage";
 import { baseName, deviceChildren } from "~/components/storage/utils";
 import { _ } from "~/i18n";
 import { PartitionSlot, SpacePolicyAction, StorageDevice } from "~/types/storage";
-import { Partition } from "~/api/storage/types/config-model";
+import { configModel } from "~/api/storage/types";
 import { useConfigModel, useDevices, useSetCustomSpacePolicy } from "~/queries/storage";
 import { toStorageDevice } from "./device-utils";
 import { sprintf } from "sprintf-js";
 
-const partitionAction = (partition: Partition) => {
+const partitionAction = (partition: configModel.Partition) => {
   if (partition.delete) return "delete";
   if (partition.resizeIfNeeded) return "resizeIfNeeded";
 

web/src/components/storage/utils/drive.tsx

@@ -26,7 +26,6 @@ import { _, n_, formatList } from "~/i18n";
 import { configModel } from "~/api/storage/types";
 import { SpacePolicy, SPACE_POLICIES, baseName, formattedPath } from "~/components/storage/utils";
 import * as partitionUtils from "~/components/storage/utils/partition";
-import { Drive } from "~/api/storage/types/config-model";
 import { sprintf } from "sprintf-js";
 
 /**
@@ -160,11 +159,11 @@ const hasReuse = (drive: configModel.Drive): boolean => {
   return drive.partitions && drive.partitions.some((p) => p.mountPath && p.name);
 };
 
-const hasPv = (drive: Drive): boolean => {
+const hasPv = (drive: configModel.Drive): boolean => {
   return drive.volumeGroups && drive.volumeGroups.length > 0;
 };
 
-const explicitBoot = (drive: Drive): boolean => {
+const explicitBoot = (drive: configModel.Drive): boolean => {
   return drive.boot && drive.boot === "explicit";
 };