WIP: first prototype throwing data on 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/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

@@ -26,6 +26,7 @@ import React from "react";
 // icons location. Check the tsconfig.json file to see its value.
 import AddAPhoto from "@icons/add_a_photo.svg?component";
 import Apps from "@icons/apps.svg?component";
+import ArrowForward from "@icons/arrow_forward.svg?component";
 import Badge from "@icons/badge.svg?component";
 import Backspace from "@icons/backspace.svg?component";
 import CheckCircle from "@icons/check_circle.svg?component";
@@ -90,6 +91,7 @@ import { SiLinux } from "@icons-pack/react-simple-icons";
 const icons = {
   add_a_photo: AddAPhoto,
   apps: Apps,
+  arrow_forward: ArrowForward,
   badge: Badge,
   backspace: Backspace,
   check_circle: CheckCircle,

web/src/components/storage/ConfigEditor.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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 drives = useConfigModel({ suspense: true }).drives;
+  const devices = useDevices("system", { suspense: true });
+  console.log("drives", drives);
+
+  return (
+    <List isPlain isBordered>
+      {drives.map((drive, i) => {
+        const device = devices.find((d) => d.name === drive.name);
+
+        return (
+          <ListItem>
+            <DriveEditor key={i} drive={drive} driveDevice={device} />
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+}

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>