WIP

web/src/assets/styles/blocks.scss

@@ -482,7 +482,33 @@ ul[data-type="agama/list"][role="grid"] {
   }
 }
 
+[data-type="agama/tag"] {
+  font-size: 0.75rem;
+
+  &[data-variant="teal"] {
+    color: var(--color-teal);
+  }
+
+  &[data-variant="orange"] {
+    color: var(--color-orange);
+  }
+
+  &[data-variant="gray-highlight"] {
+    padding: var(--spacer-smaller);
+    color: var(--color-gray-darkest);
+    background: var(--color-gray);
+    border: 1px solid var(--color-gray-dark);
+    border-radius: 5px;
+    margin-inline-start: var(--spacer-smaller);
+  }
+}
+
 table[data-type="agama/tree-table"] {
+  th:first-child {
+    width: 1%;
+    padding-inline-end: var(--spacer-normal);
+  }
+
   tr.dimmed-row {
     background-color: #fff;
     opacity: 0.8;
@@ -495,15 +521,35 @@ table[data-type="agama/tree-table"] {
   }
 
   @media (width > 768px) {
-    th.text-end,
-    td.text-end {
+    th.device-column-details {
+      padding-inline-start: calc(
+      60px + var(--spacer-smaller) * 2
+      );
+    }
+
+    td.device-column-details {
+      display: grid;
+      gap: var(--spacer-smaller);
+      grid-template-columns: 60px 1fr;
+
+      :first-child {
+        text-align: end;
+      }
+    }
+
+    th.sizes-column,
+    td.sizes-column {
       text-align: end;
-      padding-inline-end: var(--spacer-large);
+
+      div.split {
+        justify-content: flex-end;
+      }
     }
   }
 
   @media (width <= 768px) {
-    td:empty {
+    td:empty,
+    td div:empty {
       display: none;
     }
   }

web/src/assets/styles/composition.scss

@@ -16,6 +16,10 @@
   gap: var(--split-gutter);
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 [data-items-alignment="start"] {
   align-items: start;
 }

web/src/assets/styles/variables.scss

@@ -51,8 +51,12 @@
   --color-gray: #f2f2f2;
   --color-gray-dark: #efefef; // Fog
   --color-gray-darker: #999;
+  --color-gray-darkest: #333;
   --color-gray-dimmed: #888;
   --color-gray-dimmest: #666;
+  --color-teal: #279c9c;
+  --color-blue: #0d4ea6;
+  --color-orange: #e86427;
 
   --color-link: #0c322c;
   --color-link-hover: #30ba78;

web/src/components/core/TreeTable.jsx

@@ -19,20 +19,47 @@
  * find current contact information at www.suse.com.
  */
 
+// @ts-check
+
 import React from "react";
 import { Table, Thead, Tr, Th, Tbody, Td, TreeRowWrapper } from '@patternfly/react-table';
 
+/**
+ * @typedef {import("@patternfly/react-table").TableProps} TableProps
+ */
+
+/**
+ * @typedef {object} TreeTableColumn
+ * @property {string} title
+ * @property {(any) => React.ReactNode} content
+ * @property {string} [classNames]
+ */
+
+/**
+ * @typedef {object} TreeTableBaseProps
+ * @property {TreeTableColumn[]} columns=[]
+ * @property {object[]} items=[]
+ * @property {(any) => array} [itemChildren]
+ * @property {(any) => string} [rowClassNames]
+ */
+
 /**
  * Table built on top of PF/Table
  * @component
  *
- * @param {object} props
+ * FIXME: omitting `ref` here to avoid a TypeScript error but keep component as
+ * typed as possible. Further investigation is needed.
+ *
+ * @typedef {TreeTableBaseProps & Omit<TableProps,'ref'>} TreeTableProps
+ *
+ * @param {TreeTableProps} props
  */
 export default function TreeTable({
   columns = [],
   items = [],
   itemChildren = () => [],
-  rowClassNames = () => ""
+  rowClassNames = () => "",
+  ...tableProps
 }) {
   const renderColumns = (item, treeRow) => {
     return columns.map((c, cIdx) => {
@@ -44,7 +71,7 @@ export default function TreeTable({
       if (cIdx === 0) props.treeRow = treeRow;
 
       return (
-        // FIXME: using an array below becasue for some reason React is
+        // FIXME: using an array below because for some reason React is
         // complaining about
         // Objects are not valid as a React child (found: object with keys {title}). If you meant to render a collection of children, use an array instead.
         // when rendering the first column using the treeRow prop
@@ -56,7 +83,7 @@ export default function TreeTable({
   };
 
   const renderRows = (items, level) => {
-    if (!items?.length > 0) return;
+    if (items?.length <= 0) return;
 
     return (
       items.map((item, itemIdx) => {
@@ -88,7 +115,7 @@ export default function TreeTable({
   };
 
   return (
-    <Table isTreeTable variant="compact" data-type="agama/tree-table">
+    <Table isTreeTable variant="compact" {...tableProps} data-type="agama/tree-table">
       <Thead>
         <Tr>
           { columns.map((c, i) => <Th key={i} className={c.classNames}>{c.title}</Th>) }

web/src/components/core/index.js

@@ -58,3 +58,5 @@ export { default as DevelopmentInfo } from "./DevelopmentInfo";
 export { default as Selector } from "./Selector";
 export { default as OptionsPicker } from "./OptionsPicker";
 export { default as TreeTable } from "./TreeTable";
+export { default as Tag } from "./Tag";
+export { default as Html } from "./Html";