diff --git a/web/src/assets/styles/global.scss b/web/src/assets/styles/global.scss
index cbd6d1558b..35b0e7c73c 100644
--- a/web/src/assets/styles/global.scss
+++ b/web/src/assets/styles/global.scss
@@ -25,7 +25,7 @@ a {
color: currentcolor;
}
-a:not(.pf-v5-c-button,.pf-v5-c-nav__link),
+a:not(.pf-v5-c-button,.pf-v5-c-nav__link,.pf-v5-c-menu__item),
// TODO: make it better, using PatternFly custom properties for overriding it
button.pf-m-plain,
button.pf-m-link {
diff --git a/web/src/components/storage/DeviceSelection.jsx b/web/src/components/storage/DeviceSelection.jsx
index f6306297fe..12e5b28e24 100644
--- a/web/src/components/storage/DeviceSelection.jsx
+++ b/web/src/components/storage/DeviceSelection.jsx
@@ -28,6 +28,7 @@ import { useNavigate } from "react-router-dom";
import {
Card,
CardBody,
+ Flex,
Form, FormGroup,
PageSection,
Radio,
@@ -40,6 +41,7 @@ import { deviceChildren } from "~/components/storage/utils";
import { Loading } from "~/components/layout";
import { Page } from "~/components/core";
import { DeviceSelectorTable } from "~/components/storage";
+import DevicesTechMenu from "./DevicesTechMenu";
import { compact, useCancellablePromise } from "~/utils";
import { useInstallerClient } from "~/context/installer";
@@ -174,7 +176,7 @@ devices.").split(/[[\]]/);
-
+
+
+
+ {_("Prepare more devices by configuring advanced")}
+
+
diff --git a/web/src/components/storage/ProposalPageMenu.jsx b/web/src/components/storage/DevicesTechMenu.jsx
similarity index 76%
rename from web/src/components/storage/ProposalPageMenu.jsx
rename to web/src/components/storage/DevicesTechMenu.jsx
index 8adbd86943..ffdb42aea7 100644
--- a/web/src/components/storage/ProposalPageMenu.jsx
+++ b/web/src/components/storage/DevicesTechMenu.jsx
@@ -23,7 +23,10 @@
import React, { useEffect, useState } from "react";
import { useHref } from "react-router-dom";
-import { Page } from "~/components/core";
+import {
+ MenuToggle,
+ Select, SelectList, SelectOption
+} from "@patternfly/react-core";
import { _ } from "~/i18n";
import { useInstallerClient } from "~/context/installer";
@@ -35,13 +38,13 @@ const DASDLink = () => {
const href = useHref("/storage/dasd");
return (
-
DASD
-
+
);
};
@@ -53,13 +56,13 @@ const ZFCPLink = () => {
const href = useHref("/storage/zfcp");
return (
-
{_("zFCP")}
-
+
);
};
@@ -71,13 +74,13 @@ const ISCSILink = () => {
const href = useHref("/storage/iscsi");
return (
-
{_("iSCSI")}
-
+
);
};
@@ -90,7 +93,8 @@ const ISCSILink = () => {
*
* @param {ProposalMenuProps} props
*/
-export default function ProposalPageMenu({ label }) {
+export default function DevicesTechMenu({ label }) {
+ const [isOpen, setIsOpen] = useState(false);
const [showDasdLink, setShowDasdLink] = useState(false);
const [showZFCPLink, setShowZFCPLink] = useState(false);
const { storage: client } = useInstallerClient();
@@ -100,13 +104,30 @@ export default function ProposalPageMenu({ label }) {
client.zfcp.isSupported().then(setShowZFCPLink);
}, [client.dasd, client.zfcp]);
+ const toggle = toggleRef => (
+ setIsOpen(!isOpen)} isExpanded={isOpen}>
+ {label}
+
+ );
+
+ const onSelect = (_event, value) => {
+ setIsOpen(false);
+ };
+
return (
-
-
+
-
+
+
);
}
diff --git a/web/src/components/storage/index.js b/web/src/components/storage/index.js
index 3561fcf16e..220de471c6 100644
--- a/web/src/components/storage/index.js
+++ b/web/src/components/storage/index.js
@@ -20,7 +20,6 @@
*/
export { default as ProposalPage } from "./ProposalPage";
-export { default as ProposalPageMenu } from "./ProposalPageMenu";
export { default as ProposalSettingsSection } from "./ProposalSettingsSection";
export { default as ProposalTransactionalInfo } from "./ProposalTransactionalInfo";
export { default as ProposalActionsDialog } from "./ProposalActionsDialog";