First incomplete prototype of the new UI

web/src/agama.js

@@ -100,6 +100,20 @@ agama.ngettext = function ngettext(str1, strN, n) {
   return n === 1 ? str1 : strN;
 };
 
+/**
+ * Wrapper around Intl.ListFormat to get a language-specific representation of the given list of
+ * strings.
+ *
+ * @param {string[]} list iterable list of strings to represent
+ * @param {object} options passed to the Intl.ListFormat constructor
+ * @return {string} concatenation of the original strings with the correct language-specific
+ *  separators according to the currently selected language for the Agama UI
+ */
+agama.formatList = function formatList(list, options) {
+  const formatter = new Intl.ListFormat(agama.language, options);
+  return formatter.format(list);
+};
+
 // register a global object so it can be accessed from a separate po.js script
 window.agama = agama;
 

web/src/api/storage/types/config-model.ts

@@ -1,4 +1,3 @@
-/* eslint-disable */
 /**
  * This file was automatically generated by json-schema-to-typescript.
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,

web/src/assets/styles/app.scss

@@ -66,3 +66,15 @@ button.remove-link:hover {
     }
   }
 }
+
+.menu-toggle-inline {
+  padding: 1px 0.5ch;
+  margin-block-end: 0.5em;
+  background: var(--color-gray);
+  border-radius: 4px;
+
+  &.pf-v5-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
+    text-decoration: none;
+    color: black;
+  }
+}

web/src/assets/styles/patternfly-overrides.scss

@@ -347,3 +347,21 @@
     inline-size: 250px;
   }
 }
+
+// FIXME: Some of these pf-v5-c-menu__list overrides shouldn't be needed, specially after migrating a PF6
+.pf-v5-c-menu__list {
+  --pf-v5-c-list--nested--MarginTop: 0;
+  --pf-v5-c-list--nested--MarginLeft: 0;
+  --pf-v5-c-menu__list--PaddingTop: 0;
+  --pf-v5-c-menu__list--PaddingBottom: 0;
+  --pf-v5-c-menu__list--c-divider--MarginTop: 0;
+  --pf-v5-c-menu__list--c-divider--MarginBottom: 0;
+
+  li + li {
+    --pf-v5-c-list--li--MarginTop: 0;
+  }
+}
+
+.menu-toggle-inline {
+  padding-inline-start: 0.5ch;
+}

web/src/components/layout/Icon.tsx

@@ -44,6 +44,7 @@ import Feedback from "@icons/feedback.svg?component";
 import Folder from "@icons/folder.svg?component";
 import FolderOff from "@icons/folder_off.svg?component";
 import FrameInspect from "@icons/frame_inspect.svg?component";
+import KeyboardArrowDown from "@icons/keyboard_arrow_down.svg?component";
 import Globe from "@icons/globe.svg?component";
 import HardDrive from "@icons/hard_drive.svg?component";
 import Help from "@icons/help.svg?component";
@@ -115,6 +116,7 @@ const icons = {
   info: Info,
   inventory_2: Inventory,
   keyboard: Keyboard,
+  keyboard_arrow_down: KeyboardArrowDown,
   lan: Lan,
   list_alt: ListAlt,
   lock: Lock,

web/src/components/storage/ConfigEditor.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) [2024] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation; either version 2 of the License, or (at your option)
+ * any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+import { useDevices, useConfigModel } from "~/queries/storage";
+import DriveEditor from "~/components/storage/DriveEditor";
+import { List, ListItem } from "@patternfly/react-core";
+
+export default function ConfigEditor() {
+  const model = useConfigModel({ suspense: true });
+  const devices = useDevices("system", { suspense: true });
+
+  return (
+    <List isPlain>
+      {model.drives.map((drive, i) => {
+        const device = devices.find((d) => d.name === drive.name);
+
+        return (
+          <ListItem key={i}>
+            <DriveEditor drive={drive} driveDevice={device} />
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+}

web/src/components/storage/ConfigEditorMenu.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) [2024] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation; either version 2 of the License, or (at your option)
+ * any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React, { useState } from "react";
+import { _ } from "~/i18n";
+import { useHref } from "react-router-dom";
+import {
+  Dropdown,
+  MenuToggleElement,
+  MenuToggle,
+  DropdownList,
+  DropdownItem,
+  Divider,
+} from "@patternfly/react-core";
+
+export default function ConfigEditorMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = () => setIsOpen(!isOpen);
+
+  return (
+    <Dropdown
+      isOpen={isOpen}
+      onOpenChange={toggle}
+      onSelect={toggle}
+      onActionClick={toggle}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={toggle}
+          aria-label={_("More options toggle")}
+          isExpanded={isOpen}
+        >
+          {_("More options")}
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>
+        <DropdownItem key="disk">{_("Use additional disk")}</DropdownItem>
+        <DropdownItem key="vg">{_("Add LVM volume group")}</DropdownItem>
+        <DropdownItem key="raid">{_("Add MD RAID")}</DropdownItem>
+        <Divider />
+        <DropdownItem key="boot">{_("Change boot options")}</DropdownItem>
+        <DropdownItem key="reinstall">{_("Reinstall an existing system")}</DropdownItem>
+        <Divider />
+        <DropdownItem key="iscsi-link" to={useHref("/storage/iscsi")}>
+          {_("Configure iSCSI")}
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+}

web/src/components/storage/DeviceSelectorTable.tsx

@@ -46,36 +46,7 @@ const DeviceInfo = ({ item }: { item: PartitionSlot | StorageDevice }) => {
   if (!device) return null;
 
   const DeviceType = () => {
-    let type: string;
-
-    switch (device.type) {
-      case "multipath": {
-        // TRANSLATORS: multipath device type
-        type = _("Multipath");
-        break;
-      }
-      case "dasd": {
-        // TRANSLATORS: %s is replaced by the device bus ID
-        type = sprintf(_("DASD %s"), device.busId);
-        break;
-      }
-      case "md": {
-        // TRANSLATORS: software RAID device, %s is replaced by the RAID level, e.g. RAID-1
-        type = sprintf(_("Software %s"), device.level.toUpperCase());
-        break;
-      }
-      case "disk": {
-        if (device.sdCard) {
-          type = _("SD Card");
-        } else {
-          const technology = device.transport || device.bus;
-          type = technology
-            ? // TRANSLATORS: %s is substituted by the type of disk like "iSCSI" or "SATA"
-              sprintf(_("%s disk"), technology)
-            : _("Disk");
-        }
-      }
-    }
+    const type = typeDescription(device);
 
     return type && <div>{type}</div>;
   };
@@ -133,27 +104,10 @@ const DeviceExtendedDetails = ({ item }: { item: PartitionSlot | StorageDevice }
 
   if (!device || ["partition", "lvmLv"].includes(device.type)) return <DeviceDetails item={item} />;
 
-  // TODO: there is a lot of room for improvement here, but first we would need
-  // device.description (comes from YaST) to be way more granular
   const Description = () => {
-    if (device.partitionTable) {
-      const type = device.partitionTable.type.toUpperCase();
-      const numPartitions = device.partitionTable.partitions.length;
-
-      // TRANSLATORS: disk partition info, %s is replaced by partition table
-      // type (MS-DOS or GPT), %d is the number of the partitions
-      return sprintf(_("%s with %d partitions"), type, numPartitions);
-    }
-
-    if (!!device.model && device.model === device.description) {
-      // TRANSLATORS: status message, no existing content was found on the disk,
-      // i.e. the disk is completely empty
-      return _("No content found");
-    }
-
     return (
       <div>
-        {device.description} <FilesystemLabel item={device} />
+        {contentDescription(device)} <FilesystemLabel item={device} />
       </div>
     );
   };
@@ -164,7 +118,7 @@ const DeviceExtendedDetails = ({ item }: { item: PartitionSlot | StorageDevice }
     const System = ({ system }) => {
       const isWindows = /windows/i.test(system);
 
-      if (isWindows) return;
+      if (isWindows) return <div>{system}</div>;
 
       return (
         <div>