web: Visually improve the "Add file system" menu (#1174)

During the today's review, we found a little thing to improve * The visual presentation of the _Add file system_ menu options.
agama-project · May 3, 2024 · 0535723 · 0535723
2 parents a554ab0 + 55bcce3
commit 0535723
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/web/src/components/storage/PartitionsField.jsx b/web/src/components/storage/PartitionsField.jsx
@@ -23,7 +23,7 @@
 
 import React, { useState } from "react";
 import {
-  Button, Dropdown, DropdownList, DropdownItem, List, ListItem, MenuToggle, Skeleton
+  Button, Divider, Dropdown, DropdownList, DropdownItem, List, ListItem, MenuToggle, Skeleton
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { sprintf } from "sprintf-js";
@@ -596,11 +596,18 @@ const AddVolumeButton = ({ options, onClick }) => {
     >
       <DropdownList>
         {options.map((option, index) => {
-          return (
-            <DropdownItem key={index} value={option}>
-              {option === "" ? _("Other") : option}
-            </DropdownItem>
-          );
+          if (option === "") {
+            return (
+              <React.Fragment key="other-option">
+                <Divider component="li" key="separator" />
+                <DropdownItem key={index} value={option}>{_("Other")}</DropdownItem>
+              </React.Fragment>
+            );
+          } else {
+            return (
+              <DropdownItem key={index} value={option}><b>{option}</b></DropdownItem>
+            );
+          }
         })}
       </DropdownList>
     </Dropdown>

diff --git a/web/src/components/storage/VolumeDialog.jsx b/web/src/components/storage/VolumeDialog.jsx
@@ -163,7 +163,7 @@ class MissingSizeError {
    * @param {SizeMethod} sizeMethod
    * @param {string|number} size
    */
-  constructor (sizeMethod, size) {
+  constructor(sizeMethod, size) {
     this.sizeMethod = sizeMethod;
     this.size = size;
   }
@@ -191,7 +191,7 @@ class MissingMinSizeError {
    * @param {SizeMethod} sizeMethod
    * @param {string|number} minSize
    */
-  constructor (sizeMethod, minSize) {
+  constructor(sizeMethod, minSize) {
     this.sizeMethod = sizeMethod;
     this.minSize = minSize;
   }
@@ -220,7 +220,7 @@ class InvalidMaxSizeError {
    * @param {string|number} minSize
    * @param {string|number} maxSize
    */
-  constructor (sizeMethod, minSize, maxSize) {
+  constructor(sizeMethod, minSize, maxSize) {
     this.sizeMethod = sizeMethod;
     this.minSize = minSize;
     this.maxSize = maxSize;
@@ -735,7 +735,7 @@ export default function VolumeDialog({
           onChange={updateData}
         />
         <SizeOptionsField
-          { ...state }
+          {...state}
           errors={sizeErrors()}
           isDisabled={isDisabled}
           onChange={changeSizeOptions}